@charset "utf-8";

/* Mainslide */
#mainVisual{overflow-x:hidden;width:100%}
#mainVisual .main_slide{position:relative;width:100%;height:100vh}
#mainVisual .swiper-slide.bg01{position:relative;background:url(/img/main_img1.jpg) no-repeat center / cover}
#mainVisual .swiper-slide.bg02{position:relative;background:url(/img/main_img2.jpg) no-repeat center / cover}
#mainVisual .main_txt{position:absolute;top:48%;left:50%;transform:translate(-50%, -50%);z-index:2;width:100%;color:rgba(255, 255, 255, 0.8);text-align:center}
#mainVisual .main_txt .txt h1{margin-bottom:15px;font-size:50px;font-weight:700;white-space:pre-line}
#mainVisual .main_txt .txt h3{font-size:24px;font-weight:400;color:rgba(255, 255, 255, 0.8);font-family:var(--k-font);word-break:keep-all}

/* Pager */
#mainVisual .control{position:absolute;left:50%;transform:translateX(-50%);margin-top:45px;display:flex;font-weight:600}
#mainVisual .control *{display:flex;align-items:center;justify-content:center}
#mainVisual .control .pager{gap:6px;margin:0 25px;color:#fff;font-size:10px;font-family:var(--e-font)}
#mainVisual .control svg{width:24px;height:24px;color:#fff}
#mainVisual .control > span{cursor:pointer}
#mainVisual .control .swiper-pagination-current{font-size:13px}
#mainVisual .control .swiper-pagination-total{font-size:13px}

/* 프로그레스바 */
.swiper-progress-bar{position:absolute;left:50%;bottom:100px;width:1px;height:100px;z-index:1;background:rgba(255, 255, 255, 0.4)}
.slide_progress-bar{opacity:0;width:1px;height:100%}
.slide_progress-bar:after{content:"";position:absolute;top:0;left:0;width:100%;height:0;background:#fff}
.swiper-progress-bar.active .slide_progress-bar{opacity:1} 
.swiper-progress-bar.animate .slide_progress-bar{transition:height 3.5s linear;height:100%}	
.swiper-progress-bar.animate .slide_progress-bar:after{transition:height 3.5s linear;height:100%}

/* 반응형 [s] */
@media (max-width:1380px){
#mainVisual .main_txt .txt h1{font-size:45px}
}
@media (max-width:1024px){
#mainVisual .main_slide{height:600px}
#mainVisual .main_txt .txt h1{margin-bottom:20px;font-size:36px}
#mainVisual .control{margin-top:40px}
.swiper-progress-bar{bottom:70px;height:80px}
}
@media (max-width:768px){
#mainVisual .main_slide{height:500px}
#mainVisual .main_txt .txt h1{margin-bottom:15px;font-size:30px}
#mainVisual .main_txt .txt h3{margin:auto;width:95%}
#mainVisual .control{margin-top:35px}
.swiper-progress-bar{bottom:30px;height:70px}
}
@media (max-width:480px){
#mainVisual .main_slide{height:420px}
#mainVisual .main_txt .txt h1{margin-bottom:12px;font-size:25px}
#mainVisual .main_txt .txt h3{font-size:14px}
#mainVisual .control{margin-top:30px}
#mainVisual .control .pager{margin:0 20px}
.swiper-progress-bar{height:65px}
}
@media (max-width:380px){
#mainVisual .main_slide{height:380px}
#mainVisual .main_txt .txt h1{font-size:21px}
#mainVisual .main_txt .txt h3{font-size:13px}
#mainVisual .control{margin-top:22px}
#mainVisual .control .pager{margin:0 15px}
#mainVisual .control .swiper-pagination-current{font-size:12px}
#mainVisual .control svg{width:22px;height:22px}
.swiper-progress-bar{height:60px}
}
/* 반응형 [e] */