@charset "utf-8";

/*
	## 메인 슬라이드
*/
#mVisual { width:100%; height:100vh; /*height:1000px*/ }
#mVisual .swiper-slide { position: relative; overflow:hidden }
#mVisual .swiper-slide .bgimg {
    position:absolute;
    top: 0; left: 0; width:100%; height:100%;
    background-size: cover;
    background-position:center center;
}
#mVisual .swiper-wrapper .txt1 {
	position: relative; background-color:transparent; 
}
#mVisual .anim1 .bgimg { background-image: url(../img/mobile/main1.jpg); }
#mVisual .anim2 .bgimg { background-image: url(../img/mobile/main2.jpg); }

#mVisual .anim .txt-box { position: absolute; top: 17%;}
#mVisual .anim .txt { position: relative; transition: all 1s ease; }
#mVisual .anim .txt.t1 { opacity: 0;  }
#mVisual .anim .txt.t2 { opacity: 0; margin-top:20px; font-size: 1.6rem; letter-spacing: -3px; text-align: center;}
#mVisual .anim .txt.t3 { opacity: 0; margin-top:20px }
#mVisual .anim .txt.t4 { opacity: 0; margin-top:20px }


#mVisual .swiper-slide.swiper-slide-active .bgimg { animation: bgimg 5s 0.5s ease-out both }
#mVisual .anim1.swiper-slide-active .t1 { animation: t1_1 1s ease-out both 0.5s; }
#mVisual .anim1.swiper-slide-active .t2 { animation: t1_2 1s ease-out both 0.9s }
#mVisual .anim1.swiper-slide-active .t3 { animation: t1_3 1s ease-out both 1.2s }
#mVisual .anim1.swiper-slide-active .t4 { animation: t1_4 1s ease-out both 1.6s }

#mVisual .anim2.swiper-slide-active .t1 { animation: t1_1 1s ease-out both 0.5s; }
#mVisual .anim2.swiper-slide-active .t2 { animation: t1_2 1s ease-out both 0.9s }
#mVisual .anim2.swiper-slide-active .t3 { animation: t1_3 1s ease-out both 1.2s }
#mVisual .anim2.swiper-slide-active .t4 { animation: t1_4 1s ease-out both 1.6s }

@keyframes bgimg {
    from { scale:1.2 }
    to { scale:1 }
}
@keyframes t1_1 {
    from { transform: translateY(50px); }
    to {  opacity: 1 }
}
@keyframes t1_2 {
    from { transform: translateY(50px); }
    to { scale:1; opacity: 1 }
}
@keyframes t1_3 {
    from { transform: translateX(50px); }
    to { scale:1; opacity: 1 }
}
@keyframes t1_4 {
    from { transform: translateY(-30px); }
    to { opacity: 1 }
}


/*
	## 내용
*/
section { position:relative; }
.main-link { width:100% !important; letter-spacing:-1px; display:block; border-radius:5px !important; }









#section4 { padding: 70px 0 100px }
#section4 .tt { padding: 0 0 30px 0; }
.mapbox { position:relative; width:100%; margin-bottom: 130px; }
.warp-map { position: relative; width:95%; margin:0 auto; text-align:center; }
 
.map1 { position: relative; width:100%;  margin:0 auto 30px;}
.map2 { width:100%; height:388px; border: 1px solid #7D7D7D; margin-bottom: 50px }

.map1 .wrap { position: relative; display: flex; background-color:#F3EFEE  }
.map1 .wrap div  {
    padding: 10px; font-size:1rem; letter-spacing: -2px; border: 1px solid #7D7D7D; border-top: 0;
    text-align: center; word-break: keep-all;
}
.map1 .wrap div:nth-child(1) { flex-grow: 1.4; font-size:1rem; border-right:0 }
.map1 .wrap div:nth-child(2) { flex-grow: 0.6; cursor: pointer; }

.map2 .wrap div  {
    padding: 10px; font-size:1rem; letter-spacing: -2px; border: 1px solid #7D7D7D;
    text-align: center; word-break: keep-all; background-color:#F3EFEE; margin-top: 0px;
}
.mapbox .wrap div b { margin-right:8px; }







#MainMovie { position;relative; padding:20px 5px }
#MainMovie .title { font-size:18px; padding-bottom: 5px; font-family: Noto Sans KR; }