@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.anim2 .txt-box { position: absolute; top: 20%;}
#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.3rem; color: #fff; letter-spacing: -2px; text-align: center;}
#mVisual .anim .txt.t2 b { color: #910050  }
#mVisual .anim .txt.t3 { opacity: 0; }
#mVisual .anim .txt.t4 { opacity: 0; margin-top:20px }

#mVisual .anim .inna {
    position: absolute; display: inline-block; bottom:0; right:0; transition: all 1s ease; z-index:101;
    opacity: 0;
}

#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 .inna { animation: inna 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 .inna { animation: inna 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 inna {
    from { transform: translateX(50px); }
    to { opacity: 1 }
}


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


/* 체크포인트 */
#sect3 { background-color:#1B1240; padding:70px 0;  }
#sect3 .title { position: relative; width: 95%; margin: 0 auto;  padding-bottom:30px;  }

#sect3 .item {
    position: relative;  width: 95%; margin: 0 auto 10px; padding: 15px 40px; background-color: #fff; border-radius: 70px;
}
#sect3 .item.tt {
    background-color: #910050; color: #fff; font-size: 1.3rem; font-weight: 600; text-align: center; letter-spacing: -1.5px;
    padding: 15px 30px; 
}
#sect3 .item.tt strong { color:yellow }
#sect3 .item .ico { font-size: 1.5rem; font-weight: 600; color:#910050 ; padding-bottom: 5px; letter-spacing: -2px}
#sect3 .item .ico i { margin-right: 5px; }
#sect3 .item .txt { word-break: keep-all; letter-spacing: -1.5px; padding-bottom: 10px; line-height: 1.2rem;}
#sect3 .item .txt strong {  font-size:1.1rem; }
#sect3 .item .txt div {  font-size:1rem; }
#sect3 .duck > div { color:rgba(255,255,255,0.7); padding:0 15px }




/* 약도 */
#sect4 { background-color:#EFEFEF; padding:70px 0;  }
#sect4 .title { position: relative; width: 95%; margin: 0 auto;  padding-bottom:40px;  }

#sect4 .item { position: relative;  width: 95%; margin: 0 auto 10px; padding: 15px 35px; background-color: #fff; border-radius: 50px; }
#sect4 .item.tt {
    background-color: #910050; color: #fff; font-size: 1.3rem; font-weight: 600; text-align: center; letter-spacing: -1.5px;
}
#sect4 .item.tt strong { color:yellow }
#sect4 .item .txt { word-break: keep-all; font-size:1.1rem; letter-spacing: -1.5px; padding: 0}
#sect4 .item .txt strong { color:#9C145E  }
#sect4 .item .txt div {  font-size:1rem; }
#sect4 .duck > div { color:rgba(0,0,0,0.7); padding:0 15px }





#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; }