@charset "utf-8";
#mainVisual{position:relative;height:100vh;background:#000;font-family:var(--e-font), var(--k-font)}

/* 텍스트 */
#mainVisual .main_txt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;max-width:1400px;width:100%;color:#fff}
#mainVisual .main_txt h1{padding-bottom:25px;font-size:55px;font-weight:700;color:#fff}
#mainVisual .main_txt > span{overflow:hidden;display:block;padding-bottom:75px;font-size:20px;color:rgba(255, 255, 255, 0.7)}
#mainVisual .main_txt i{display:inline-block;font-style:normal}
#mainVisual .main_txt p{margin:25px 0 70px;font-size:72px;font-weight:600;line-height:1.1}
#mainVisual .main_txt p span{overflow:hidden;display:block}
#mainVisual .main_txt p span+span{margin-left:120px}
#mainVisual .main_txt a{overflow:hidden;position:relative;padding-right:28px;font-size:16px;font-weight:400;color:#fff}
#mainVisual .main_txt a span{padding-right:15px}
#mainVisual .main_txt a img{position:absolute;right:0;top:7px;transition:all .2s}
#mainVisual .main_txt a img.on{right:20px;opacity:0}

/* 이미지 */
#mainVisual .main_slide{z-index:1;height:100%}
#mainVisual .main_slide li{position:relative;overflow:hidden;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover}

/* 페이저 */
#mainVisual .pager_num{display:flex;align-items:center;flex-direction:column;position:absolute;top:50%;right:calc((100% - 1400px) / 2);z-index:3;transform:translateY(-50%);color:#fff}
#mainVisual .pager_num span{position:relative;right:-15%;line-height:1;opacity:0.4;transition:all 0.2s;cursor:pointer}
#mainVisual .pager_num .swiper_num{height:60px;margin:10px 0;padding:0 30px;font-size:35px;font-weight:700;color:#fff;text-align:center;font-family:var(--e-font)}
#mainVisual .pager_num .swiper_num li{padding-right:10px}
#mainVisual .pager_num .swiper_num::before{content:'/ 04';display:inline-block;position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:16px;font-weight:400;color:rgba(255, 255, 255, 0.4)}

/* 프로그레스바 */
.swiper-progress-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;position:relative;width:268px;height:2px;margin-top:195px}
.slide_progress-bar{display:flex;align-items:center;justify-content:space-between;position:relative;width:100%;height:2px;background:rgba(255,255,255,0.4)}
.swiper-progress-bar.active .slide_progress-bar{opacity:1} 
.slide_progress-bar:after{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:#fff;transition:none}
.slide_progress-bar.animate:after{width:100%;transition:width 3.5s linear}

@media (hover:hover){
#mainVisual .main_txt a:hover img.off{right:-20px;opacity:0}
#mainVisual .main_txt a:hover img.on{right:0;opacity:1}
#mainVisual .pager_num span:hover{opacity:1}
}
@media(max-width:1700px){
#mainVisual .main_txt{width:95%;max-width:initial}
#mainVisual .pager_num{right:10%}
}
@media(max-width:1200px){
#mainVisual .main_txt h1{ font-size:45px}
}
@media(max-width:1024px){
#mainVisual .main_txt h1{ font-size:40px}
#mainVisual .pager_num{right:3%}
}
@media(max-width:768px){
#mainVisual .main_txt{width:90%}
#mainVisual .main_txt h1{padding-bottom:20px;font-size:35px}
#mainVisual .pager_num .swiper_num{height:45px;font-size:30px}
#mainVisual .main_txt > span{font-size:18px}
}
@media(max-width:480px){    
#mainVisual .pager_num{display:none}
#mainVisual .main_txt h1{font-size:28px}
#mainVisual .main_txt{text-align:center}
#mainVisual .main_txt > span{padding-bottom:30px;font-size:17px;word-break:keep-all}
#mainVisual .main_txt a{font-size:15px}
.swiper-progress-bar{margin:80px auto 0}
#mainVisual .main_slide li{aspect-ratio:16 / 9;/* 가로세로 비율 */height:auto}
}
@media(max-width:380px){    
#mainVisual .main_txt h1{font-size:25px}
#mainVisual .main_txt > span{padding-bottom:75px;font-size:16px}
.swiper-progress-bar{margin:75px auto 0}
}