@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;height:750px;background-color:#222}
/* #mainVisual::before{content:"";display:block;position:absolute;left:0;bottom:112px;z-index:1;width:100%;height:1px;background:rgba(255, 255, 255, 0.3)} */

/* 텍스트 */
#mainVisual .cont{position:relative;/*max-width:var(--mainsize);*/margin:0 auto}
#mainVisual .txt{position:absolute;bottom:300px;left:50%;transform:translateX(-50%);width:100%;z-index:1;color:#fff}
#mainVisual .txt b{font-size:15px;font-weight:700;color:#fff;font-family:var(--main-font)}
#mainVisual .txt h1{padding:30px 0 40px;text-align:center;font-size:45px;font-weight:400;line-height:1.3;white-space:pre-line;font-family:var(--main-font);text-shadow:0 0 10px rgba(0,0,0,0.2);font-weight:bold}
#mainVisual .txt p{font-size:17px;color:rgba(255, 255, 255, 0.7);font-family:var(--sub-font);word-break:keep-all}
#mainVisual .txt span{color:#ffbe24}

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

/* progressbar */
.progress{display:grid;grid-template-columns:repeat(3,1fr);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%}
.progress li:after{position:absolute;content:'';bottom:0;left:0;z-index:-1;width:100%;height:1px;background:transparent}
.progress li p{padding:0 0 20px 25px;font-size:17px;font-weight:700;color:rgba(255,255,255,0.5);transition:all .3s;font-family:var(--main-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:0;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:1400px){
/* #mainVisual .txt{left:5%} */
.progress{max-width:unset;width:90%}
}
@media (max-width:1024px){
#mainVisual{height:650px}
#mainVisual::before{bottom:50px}
#mainVisual .txt{/*left:2.5%;*/bottom:250px}
#mainVisual .txt h1{padding:25px 0 35px;font-size:36px}
#mainVisual .txt p{font-size:16px}
#mainVisual .slider li{height:650px}
.progress{bottom:50px;width:95%}
.progress li p{display:flex;align-items:center;gap:6px;padding:0 0 12px 20px;font-size:16px;word-break:keep-all}
.progress li p span{padding-right:20px}
}
@media (max-width:885px){
.progress li p{flex-direction:column;align-items:start;padding:0 0 10px 10px}
.progress li p span{padding-right:0px}
}
@media (max-width:768px){
#mainVisual{height:550px}
#mainVisual::before{bottom:45px}
#mainVisual .txt{bottom:235px;left:50%;transform:translateX(-50%);width:95%;text-align:center}
#mainVisual .txt h1{padding:20px 0 30px;font-size:30px}
#mainVisual .txt p{font-size:15px;line-height:1.5}
#mainVisual .slider li{height:550px}
.progress{bottom:45px}
.progress li p{text-align:center;align-items:center;gap:4px;padding-left:0px;padding-bottom:8px;font-size:15px}
.progress li p span{font-size:14px}
}
@media (max-width:480px){
#mainVisual{height:420px}
#mainVisual::before{display:none}
#mainVisual .txt{bottom:140px}
#mainVisual .txt b{font-size:14px}
#mainVisual .txt h1{padding:15px 0 25px;font-size:25px;white-space:normal}
#mainVisual .txt p{font-size:14px}
#mainVisual .txt span{display:block}
#mainVisual .slider li{height:420px}
.progress{display:none}
}
@media (max-width:380px){
#mainVisual{height:380px}
#mainVisual .txt{bottom:115px}
#mainVisual .txt b{font-size:13px}
#mainVisual .txt h1{padding:12px 0 22px;font-size:21px}
#mainVisual .txt p{font-size:13px}
#mainVisual .slider li{height:380px}
}
/* 반응형 [e] */