@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nanum+Gothic&family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@200..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

#sect3_st { background-color: #000; }
.mySwiper {  width: 100%; height: 100vh; }

.mySwiper .swiper-slide .anim { position: absolute; width: 1200px; height: 100%; margin: 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: center; left: 50%; transform: translateX(-50%); z-index: 99;}


.mySwiper .swiper-slide .anim .item { position:relative; }
.mySwiper .swiper-slide .anim .t1 {  margin-left: -26px;}


.mySwiper .swiper-slide .tt_box { position: relative; width: 350px; margin-left: 50px; top:5%; text-align: left; }

.mySwiper .swiper-slide .t2 { font-family: "Montserrat", sans-serif; font-size: 1em; color: #f0f0f0;  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;}
.mySwiper .swiper-slide .t3 { font-family: "Noto Sans KR", serif; font-size: 1.5rem; letter-spacing:-2px; color: #cafcff; font-weight: 500; }
.mySwiper .swiper-slide .t3 span { font-size: 20px; color: #fff; font-weight: 300;}

.mySwiper .swiper-slide .t4 { font-family: "Noto Sans KR", sans-serif; font-size: 1rem; color:#f0f0f0; margin-top:px; letter-spacing: -1px; }

span.st { font-size: 0.7em; }
.anim .ex { position: absolute; width: 900px !important; bottom: -15%;  font-size: 12px; font-weight: 400; color: #9f9f9f; letter-spacing: -1.5px; border: 0px solid red;}

.cir { position: relative; left:483px; top: -123px;  animation: rotate_image 20s linear infinite; z-index: 99; opacity: 0.8; }
@keyframes rotate_image{
    100% {
        transform: rotate(360deg);
    }
}


.mySwiper .bgimg {
    position:absolute; width:100%; height:100%; top: 0; left: 0px; z-index:2; overflow: hidden;
}


.mySwiper .bgimg .imgbox { width:100%; height:100%;}
.mySwiper .s1 .bgimg .img1 { background:url(./img/sect3_img1.jpg) no-repeat center / cover; }
.mySwiper .s2 .bgimg .img2 { background:url(./img/sect3_img2.jpg) no-repeat center / cover; }
.mySwiper .s3 .bgimg .img3 { background:url(./img/sect3_img3.jpg) no-repeat center / cover; }
.mySwiper .s4 .bgimg .img4 { background:url(./img/sect3_img4.jpg) no-repeat center / cover; }
.mySwiper .s5 .bgimg .img5 { background:url(./img/sect3_img5.jpg) no-repeat center / cover; }
.mySwiper .s6 .bgimg .img6 { background:url(./img/sect3_img6.jpg) no-repeat center / cover; }

.mySwiper .swiper-slide.swiper-slide-active .bgimg .imgbox { animation: sec03_bigimg 3s 0s both; opacity: 1;}
.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; }
.mySwiper .swiper-slide.swiper-slide-active .t4 { animation: sec03_txt2 1.2s 0.4s both; }

@keyframes sec03_bigimg {
    from { transform: scale(1.4); opacity: 0.5; }
    to {  }
}
@keyframes sec03_txt2 {
    from { transform: translateY(40px); opacity: 0; }
    to {  }
}
/*
@keyframes sec03_floor {
    from { transform: translateY(35px); opacity: 0.5; }
    to {  }
}
*/


/* 썸네일 */
.myThumbs {
    /*display:flex;  width: 554px; height: 366px; align-items:center; flex-wrap: wrap !important; justify-content:space-between; */
}
.myThumbs_box { position: relative; width: 1200px; height: 100%; display: block;  border: 1px solid yellow; }
.myThumbs { position: absolute !important; top: 340px; left: 1100px; width: 130px; height: 130px; pointer-events: none;}

.swiper-wrapper { position: relative; left: 0px; top: 0px;}

.myThumbs .thu { position: absolute; width: 80px !important; height: 80px !important;  font-size: 1.6em; font-family: "DM Serif Text", serif; font-weight: 400; color: #fff; border-radius: 50%; line-height: 75px; text-align: center;}
.myThumbs .thumb01 { background-color: #2e4a56;  opacity: 0.8; }
.myThumbs .thumb02 { }
.myThumbs .thumb03 { }
.myThumbs .thumb04 { }
.myThumbs .thumb05 { }
.myThumbs .thumb06 { }




.myThumbs .swiper-slide .thumb_on, .myThumbs .swiper-slide .thumb_gray {
    position: absolute; width: 100%; height: 100%; left: 0; top: 0; 
}
.myThumbs .swiper-slide .thumb_on { z-index: 9; opacity: 0; }
.myThumbs .swiper-slide-thumb-active .thumb_on { opacity: 1; pointer-events : none;}


.sect3_wrap.active .bgimg:after { transition: 1.5s 0.2s; width: 0; }


.sect3_wrap.active .sec03_tit { transition: 1.2s 0.2s; opacity: 1; transform: translateX(0); }
.sect3_wrap.active .sec03_tit_box p { transition: 1.2s 0.5s; opacity: 1; transform: translateX(0); }
.sect3_wrap.active .sec03_arrow { transition: 1.2s 0.6s; opacity: 1; transform: translateY(0); }






.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:#e6e6e6; }
#sect3_st .swiper-button-prev { width: auto; margin-left: 25%;  }
#sect3_st .swiper-button-next { width: auto; margin-right: 10%;}

/* 페이지네이션 변경하기 */
#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:red; }
#sect3_st .swiper-pagination {
    --swiper-pagination-bullet-inactive-color:  red;;/* 색 */
    --swiper-pagination-bullet-inactive-opacity: .2;/* 투명도 */
    --swiper-pagination-bottom:150px;/*하단 위치 높이 변경*/
    --swiper-pagination-bullet-horizontal-gap: 5px;/*불렛간 간격 조정 - 가로*/
    --swiper-pagination-bullet-vertical-gap: 10px;/*불렛간 간격 조정 - 세로*/
}