@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;background:#222}

/* 텍스트 */
#mainVisual .main_txt{display:flex;flex-flow:column;gap:45px;position:absolute;z-index:101;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:var(--mainsize);color:#fff;text-align:center}
#mainVisual .main_txt h1{font-size:60px;font-weight:100;white-space:pre-line;line-height:1.1}
#mainVisual .main_txt h1 b{font-weight:700}
#mainVisual .main_txt span{font-size:16px;line-height:26px;color:rgba(255, 255, 255, 0.6);font-weight:500;white-space:pre-line;word-break:keep-all}
#mainVisual .main_txt a{margin-top:30px;display:flex;align-items:center;gap:20px;width:max-content;font-size:16px;color:#fff;font-weight:600}
#mainVisual .main_txt a span{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:100%;border:1px solid #e1e1e1;font-size:18px;color:#fff;transition:all .3s}

/* Pager */
#mainVisual .pager{display:flex;gap:13px;position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:30;width:max-content;height:max-content}
#mainVisual .pager span{display:block;opacity:1;width:9px;height:9px;margin:0;border-radius:100%;color:#fff;cursor:pointer;background:rgba(255, 255, 255, .2);transition:.2s}
#mainVisual .pager span.on{background-color:#fff}
#mainVisual .pager span:first-child:after{display:none}

/* bg */
#mainVisual ul:after{display:block;content:"";position:absolute;left:0;top:0;width:100%;height:100%}
#mainVisual ul li{height:100vh;overflow:hidden}
#mainVisual ul li .bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center}
#mainVisual ul li .bg01{background-image:url(./main_img01.jpg)}
#mainVisual ul li .bg02{background-image:url(./main_img02.jpg)}
#mainVisual ul li .bg03{background-image:url(./main_img03.jpg)}

/* progress-bar */
.swiper-progress-bar{display:flex;position:absolute;bottom:267px;right:-105px;z-index:9999;transform:rotate(90deg);width:390px}
.swiper-progress-bar .slide_progress-bar{overflow:hidden;position:absolute;height:1px;background:rgba(255, 255, 255, 0.3);width:100%;clear:both;opacity:0}
.swiper-progress-bar .slide_progress-bar:after{position:absolute;top:0;left:0;background:#fff;height:100%;width:0;content:""}
.swiper-progress-bar.active .slide_progress-bar{opacity:1}
.swiper-progress-bar.animate .slide_progress-bar:after{width:120%;transition:width 3.8s linear;transition-delay:unset}
.swiper-progress-bar p{display:inline-block;margin:13px 0 0 auto;color:#fff;font-size:13px;transform:rotate(-180deg);font-family:var(--e-font)}

/* 반응형 [s] */
@media (hover:hover){
#mainVisual .main_txt a:hover span{margin-right:10px;border:1px solid #fff;color:#111;background-color:#fff}
}
@media (max-width:1380px){
#mainVisual .main_txt{width:90%}
#mainVisual .main_txt h1{font-size:50px}
.swiper-progress-bar{right:calc(5% - 180px)}
}
@media (max-width:1024px){
#mainVisual .main_txt{width:95%;gap:30px}
#mainVisual .main_txt h1{font-size:38px}
#mainVisual .main_txt a{margin-top:40px}
#mainVisual .main_txt a span{width:55px;height:55px}
.swiper-progress-bar{bottom:calc(8% + 140px);right:calc(2.5% - 125px);width:280px}
}
@media (max-width:768px){
#mainVisual .main_txt{gap:20px}
#mainVisual .main_txt h1{font-size:32px}
#mainVisual .main_txt span{width:100%;font-size:15px;white-space:normal}
#mainVisual .main_txt a{margin-top:30px;gap:15px;font-size:15px}
#mainVisual .main_txt a span{width:50px;height:50px}
#mainVisual .main_txt a:hover span{margin-right:5px}
#mainVisual ul li .bg{background-position:70%}
.swiper-progress-bar{bottom:calc(8% + 115px);right:calc(2.5% - 100px);width:230px}
#mainVisual .pager{bottom:30%}
}
@media (max-width:480px){
#mainVisual .main_txt{top:40%}
#mainVisual .main_txt{align-items:center;text-align:center}
#mainVisual .main_txt h1{font-size:26px}
#mainVisual .main_txt span{width:90%;font-size:14px}
#mainVisual .main_txt span br{display:none}
#mainVisual .main_txt a span{margin-right:0px !important;width:48px;height:48px;color:#111;background-color:#fff}
.swiper-progress-bar{display:none}
}
@media (max-width:380px){
#mainVisual .main_txt{gap:15px}
#mainVisual .main_txt h1{font-size:23px}
#mainVisual .main_txt span{width:95%;font-size:13px}
#mainVisual .main_txt a{margin-top:25px;font-size:14px}
#mainVisual .main_txt a span{width:45px;height:45px}
}
/* 반응형 [e] */