:root{
  overflow-x:hidden;
  --standard-size: 1vh;
}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.intro {
  width:100vw;
  height:100vh;
  position:fixed;
  top:0;
  left:0;
  visibility:hidden;
  opacity:0;
  transition:all 0.5s ease-in-out;
  z-index:9999;
  overflow: hidden;
  background: url(../assets/images/intro_background.png) no-repeat center center;
  background-size: cover;
}

.intro.active{
  visibility:visible;
  opacity:1;
}

.enter_btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,30%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:32px;
  padding:32px 90px;
  border-radius:68px;
  background-color:rgba(255, 255, 255, 0.9);
  max-width:95vw;
  visibility:hidden;
  opacity:0;
  transition:all 1s ease;
}
.enter_btn.active{
  visibility:visible;
  transform:translate(-50%, -50%);
  opacity:1;
}



.enter_btn button{
  cursor:pointer;
  border:none;
  padding:0;
}


.intro_content{
  background:#E9EEF2;
  width:100vw;
  height:100vh;
}

.over_area{
  width:100vh;
  margin:auto;
}
.over_img_list{
  width:100%;
  padding-bottom:100%;
  position:relative;
}

.over_area .over_cont{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.over_area .over_cont img{
  width:100%;
  height:100%;
}
.over_area .over_img{
  opacity:0;
  transition:all 0.5s ease-in-out;
}

.over_area .over_btn {
  position:absolute;
  max-width:calc(var(--standard-size) * 12.96);
  border:none;
  background:unset;
  cursor:pointer;
  transition:all 0.5s ease-in-out;
}
.over_area .over_btn:hover{
  transform:scale(1.175)
}
.over_area .over_btn .hover{
  visibility:hidden;
  position:absolute;
  top:0;;
  left:0;
  transition:all 0.5s ease-in-out;
  opacity:0;
}

.over_area .over_btn:hover .hover{
  display:block;
  visibility:visible;
  opacity:1;

}
.over_area .over_btn img{
  width:100%;
}
.over_area .over_btn:nth-of-type(1){
  top: 34%;
  left: 15.5%;
}
.over_area .over_btn:nth-of-type(2){
  top: 39%;
  left: 63.5%;
}
.over_area .over_btn:nth-of-type(3){
  top: 47%;
  left: 8.5%;
}
.over_area .over_btn:nth-of-type(4){
  top: 58.5%;
  left: 65.5%;
}

.over_area:has(.over_btn:nth-of-type(1):hover) .over_img.nan{
  opacity:1;
}
.over_area:has(.over_btn:nth-of-type(2):hover) .over_img.jung{
  opacity:1;
}
.over_area:has(.over_btn:nth-of-type(3):hover) .over_img.seo{
  opacity:1;
}
.over_area:has(.over_btn:nth-of-type(4):hover) .over_img.tan{
  opacity:1;
}




@media screen and (max-width: 768px) {
  :root{
    standard-size: 1vw;
  }
.over_area{
  width: 100vw;
  height: 100%;
  display:flex;
  align-items:center;
}
.over_area .over_btn{
  max-width: calc(var(--standard-size) * 9.9 )
}

.over_area .over_btn:nth-of-type(1){
  top: 30%;
  left: 12.5%;
}
.over_area .over_btn:nth-of-type(2){
  top: 35%;
  left: 60.5%;
}
.over_area .over_btn:nth-of-type(3){
  top: 48%;
  left: 6.5%;
}
.over_area .over_btn:nth-of-type(4){
  top: 53.5%;
  left: 61.5%;
}
.enter_btn{
  max-width:320px;
  padding:24px 52.5px;
  width:95vw;
  border-radius:48px;
}
.enter_btn img{
  width:100%;
}
}