@charset "utf-8";

/*
	## 메인 슬라이드
*/
#mVisual { width:100%; height:100%; }
#mVisual .swiper-slide { position: relative; overflow:hidden }
#mVisual .swiper-slide .img {
    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 .img { background-image: url(../img/mobile/main1.jpg); }
#mVisual .anim2 .img { background-image: url(../img/mobile/main2.jpg); }



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

#section2 { padding:0px 0 50px; background-color: #f2f2f2}
.premium {
  position:relative; width:85%; font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;
}
.premium .swiper-slide {
    position:relative; text-align: center; border:1px solid #ddd; padding:30px 0 10px;
    border-radius: 30px; background-color:#fff;
}

.premium .swiper-slide .p1 { position:relative; width:100%; height:150px; margin-bottom:30px; overflow:hidden; }
.premium .swiper-slide .p1 .img { position:absolute; width:100%; top:50%; left:50%; transform:translate(-50%, -50%); }
.premium .swiper-slide .p1 .img img { width:100%; }
.premium .swiper-slide .ico { position:absolute; top:240px; left:50%; transform:translateX(-50%);  }

.premium .swiper-slide .p2 { font-size:2rem; font-weight:800; letter-spacing: -2px; line-height:2rem; padding-bottom:30px; }
.premium .swiper-slide .p2 .eng {
   font-size: 1.6rem; font-weight: 600; line-height: 50px; letter-spacing: -0.5px;
   font-family: '나눔명조', sans-serif; color: #c29c69;
}
.premium .swiper-slide .p2 span { color: #cb6f5a }
.premium .swiper-slide .p3 {
   padding: 20px 10px; font-size: 1.4rem; color: #505050; font-weight: 500; letter-spacing: -2px; line-height: 2rem;
   word-break: keep-all;
}.premium .swiper-slide .p3 span { color:#cb6f5a }
.premium .p1 .txt { position:absolute; right:5px; bottom:5px; color:#fff; font-size:0.8rem }

.premium .bi {
   position: relative; border: 0; display: flex; align-items: center; justify-content: center;

}
.premium .bi > div { position: relative; width:80% }

/* 페이지네이션 변경하기 */
.premium-pagination .swiper-pagination-bullet {
	width:13px; height:13px; border-radius: 13px;
	transition: all .3s ease; 
}
.premium-pagination .swiper-pagination-bullet-active { width:35px; background-color:#881F7E }
.premium-pagination {
	text-align: center; margin-top: 30px;
	--swiper-pagination-bullet-inactive-color:  #000;
	--swiper-pagination-bullet-inactive-opacity: 0.7;
	/*--swiper-pagination-bottom:50px;/*하단 위치 높이 변경*/*/
	--swiper-pagination-bullet-horizontal-gap: 7px;/*불렛간 간격 조정 - 가로*/
	--swiper-pagination-bullet-vertical-gap: 10px;/*불렛간 간격 조정 - 세로*/
}




/*section3*/
#section3 {
	background:linear-gradient(#b8b8b8, 10%, #fff);
}
#sect3_st, #sect3_wrap { position:relative;   }

.mySwiper.swiper { position: relative; width: 100%; }

.mySwiper .swiper-slide .anim { 
    position: absolute; display: inline-block; width: 100%; padding: 0 10px; top:calc((50% - 300px) + 10px);
    z-index: 2; border:0px solid red;
} 

.mySwiper .swiper-slide .anim .item { position:relative; border:0px solid blue }
.mySwiper .swiper-slide .anim .t1 {
    letter-spacing: -10px; font-size: 6rem; color: #EEEAEB; font-weight: 800; top:40px; text-align: left;
}
.mySwiper .swiper-slide .t2 { font-size: 2.4rem; letter-spacing:-2.5px }
.mySwiper .swiper-slide .t3 { font-size: 1rem; color:#808080; margin-top:0px; letter-spacing: -2px; }

.mySwiper .bgimg { position:relative; width:100%;bottom:0; z-index:1; overflow: hidden }

.mySwiper .bgimg img { width:100% }

.mySwiper .swiper-slide.swiper-slide-active .bgimg .imgbox { animation: sec03_bigimg 3s 0s both; }
.mySwiper .swiper-slide.swiper-slide-active .t1 { animation: sec03_floor 1.5s 0.2s both; }
.mySwiper .swiper-slide.swiper-slide-active .t2 { animation: sec03_txt2 1.2s 0.2s both; }
.mySwiper .swiper-slide.swiper-slide-active .t3 { animation: sec03_txt2 1.2s 0.4s both; }


/* 썸네일 */
.myThumbsTitle {
    position: relative; width: 100%; text-align: left; z-index: 1; letter-spacing:-.5px; padding:70px 20px 0;
}
.myThumbsTitle .tt1 { font-family: 'Nanum Square', "Noto Sans KR", 'Noto Sans'; font-size:2.1rem; line-height: 2.4rem;}
.myThumbsTitle .tt2 { font-family: "Noto Sans KR", 'Noto Sans'; font-size:1rem; color:#575757; line-height: 1.3rem; margin: 20px 0 0px;}
.myThumbsTitle .tt3 { position: absolute; top: -150px; right: -350px;  opacity: 0; transform: translateX(-50px);}

.myThumbs { position: relative; width: 90%; z-index: 99; margin-top:30px; height: 366px; }

.myThumbs .swiper-slide { width: 150px; height: 150px }
.myThumbs, .myThumbs .swiper-slide {  background-color:transparent !important; background: transparent !important}

@media screen and (max-width: 500px)
{
    .mySwiper .swiper-slide .anim { top:calc((64% - 300px) + 10px); }
	.myThumbs .swiper-slide { width: 70px; height: 70px }
	.myThumbs { height:270px }
    .mySwiper .swiper-slide .t1 {font-size: 1rem; }
    .mySwiper .swiper-slide .t2 {font-size: 2rem}
    .mySwiper .swiper-slide .t3 {font-size: 1rem}
}


@media (max-width: 500)
{
    
}

.myThumbs .swiper-slide .thumb_on, .myThumbs .swiper-slide .thumb_gray {
    position: relative; width: 100%; height: 100%; left: 0; top: 0; cursor:pointer
}
/*
.myThumbs .swiper-slide .thumb_gray { z-index: 1; opacity: 1; }
.myThumbs .swiper-slide .thumb_on { z-index: 9; opacity: 0; }
.myThumbs .swiper-slide .thumb_on:hover { opacity: 1; }
.myThumbs .swiper-slide-thumb-active .thumb_on { opacity: 1; }
*/
.myThumbs .swiper-slide .thumb_gray { z-index: 1; display:block }
.myThumbs .swiper-slide .thumb_on { z-index: 2; display:none }
.myThumbs .swiper-slide .thumb_on:hover { opacity: 1; }
.myThumbs .swiper-slide-thumb-active .thumb_on { display:block }
.myThumbs .swiper-slide-thumb-active .thumb_gray { display:none }


@keyframes sec03_bigimg {
    from { transform: scale(1); }
    to {  }
}
@keyframes sec03_txt2 {
    from { transform: translateX(50px); opacity: 0; }
    to {  }
}
@keyframes sec03_floor {
    from { transform: translateX(250px); opacity: 0; }
    to {  }
}

.myThumbs .swiper-slide-thumb-active {
    opacity: 1;  filter: brightness(1); transition: 0.3s ease;
}

.play-paused {
    position: relative; display: inline-block; font-size:1.4rem; padding: 0 !important; top:2px; left: 25px;
    border: 0px solid red;
}

/* 네비게이션 변경하기 */
#sect3_st .swiper-button-prev:after, .swiper-button-next:after { color:#111 }
#sect3_st .swiper-button-prev { width: auto;  }


/* 페이지네이션 변경하기 */
#sect3_st .swiper-pagination-bullet {
    width:12px; height:12px; border-radius: 10px;
    transition: all .3s ease; 
}
#sect3_st .swiper-pagination-bullet-active { width:50px; background-color:#111 }
#sect3_st .swiper-pagination {
    --swiper-pagination-bullet-inactive-color:  #111;/* 색 */
    --swiper-pagination-bullet-inactive-opacity: .2;/* 투명도 */
    --swiper-pagination-bottom:150px;/*하단 위치 높이 변경*/
    --swiper-pagination-bullet-horizontal-gap: 5px;/*불렛간 간격 조정 - 가로*/
    --swiper-pagination-bullet-vertical-gap: 10px;/*불렛간 간격 조정 - 세로*/
}









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

.wrap-notice { position:relative; color:#222; margin:50px 0px 0px; }
.wrap-notice > h3 {
	font-size:1.6rem; font-weight:bold; text-transform: uppercase;
	text-align:center; margin:20px 0 20px;
}
.wrap-notice .sub-tt { display:block; font-size:1rem; padding-top:5px; color:#676767; }



.bx-wrapper {  background-color:transparent;  }


.bx-wrapper .bx-pager.bx-default-pager a {
	width:12px; height:12px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	background: #fff;
	border:1px solid #818181;
	margin-bottom: -50px !important;
  	transition: all .3s 0s ease;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
	border:1px solid #FFFF64;
	background: #FFFF64;
	width: 30px;
}