@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;height:100vh;background-color:#222}

/* 텍스트 */
#mainVisual .cont{position:relative;margin:0 auto}
#mainVisual .txt{position:absolute;bottom:400px;left:50%;transform:translateX(-50%);z-index:1;width:max-content;color:#fff;text-align:center}
#mainVisual .txt b{display:block;font-size:16px;font-weight:500;color:#fff;font-family:var(--k-font)}
#mainVisual .txt h1{padding-top:45px;font-size:46px;font-weight:700;line-height:1.3;white-space:pre-line;text-transform:uppercase;font-family:var(--e-font)}

/* 이미지 */
#mainVisual .mainSwiper{position:absolute;left:0;top:0;z-index:1001;width:100%;height:100vh}
#mainVisual .slider li{display:flex;align-items:center;justify-content:center;width:100%;height:100vh;text-align:center;background:url(./img/img1.jpg) center no-repeat;background-size:cover}
#mainVisual .slider li.img02{background-image:url(./img/img2.jpg)}
#mainVisual .slider li.img03{background-image:url(./img/img3.jpg)}
#mainVisual .slider li.img04{background-image:url(./img/img4.jpg)}

/* progressbar */
.progress{display:grid;grid-template-columns:repeat(4,1fr);gap:23px;position:absolute;left:50%;bottom:112px;transform:translate(-50%, 0);max-width:var(--mainsize);width:100%}
.progress li{position:relative;flex-grow:1;cursor:pointer;width:100%;border-bottom:1px solid rgba(255, 255, 255, 0.3)}
.progress li:after{position:absolute;content:'';bottom:0;left:0;z-index:-1;width:100%;height:1px;background:transparent}
.progress li p{padding-bottom:10px;font-size:16px;font-weight:600;color:rgba(255,255,255,0.3);transition:all .3s;font-family:var(--k-font)}
.progress li p span{display:inline-block;padding-right:25px;font-size:15px;font-weight:700}
.progress li.active p{color:#fff}
.progress li .bar{position:absolute;bottom:-1px;left:0;width:0;height:1px;background-color:#fff}
.progress li.active .bar{background:#fff;animation:countingBar 3s linear forwards}
@keyframes countingBar{0%{width:0}100%{width:100%}}

/* 반응형 [s] */
@media (max-width:1380px){
.progress{max-width:unset;width:95%}
}
@media (max-width:1024px){
#mainVisual .cont{position: static;}
#mainVisual .txt{bottom:unset;top:240px;width:95%}
#mainVisual .txt h1{padding-top:35px;font-size:35px}
.progress{gap:20px}
.progress li p{font-size:15px}
}
@media (max-width:768px){
#mainVisual .txt b{font-size:15px}
#mainVisual .txt h1{padding-top:30px;font-size:30px;white-space:normal}
.progress{grid-template-columns:repeat(2, 1fr);gap:50px}
.progress li p{text-align:center}
}
@media (max-width:480px){
#mainVisual .txt b{font-size:14px}
#mainVisual .txt h1{padding-top:25px;font-size:25px}
.progress{gap:40px;bottom:90px}
.progress li p{font-size:14px}
}
@media (max-width:390px){
#mainVisual .txt b{font-size:13px}
#mainVisual .txt h1{padding-top:20px;font-size:23px}
.progress{gap:35px}
.progress li p{font-size:13px}
}
/* 반응형 [e] */