@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%}
#mainVisual:after{position:absolute;top:0;left:0;content:"";display:block;width:100%;height:100%;background:rgba(0,0,0,0.2)}

/* 텍스트 */
#mainVisual .cont{position:absolute;top:0;left:50%;transform:translateX(-50%);width:1400px;height:100%;z-index:1}
#mainVisual .txt{position:absolute;left:0;top:45%;transform:translateY(-50%);z-index:1;color:#fff}
#mainVisual .txt b{display:block;margin-bottom:55px;font-size:16px;font-family:var(--plyfont)}
#mainVisual .txt h1{margin-bottom:70px;font-size:44px;font-weight:600;line-height:1.3} 
#mainVisual .txt h1 > span{font-weight:300}
#mainVisual .txt > span{font-size:19px;color:rgba(225,225,225,0.8)}
.slider_wrap{height:100%}

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

/* progressbar */
.progress{display:grid;grid-template-columns:repeat(4,1fr);position:absolute;left:50%;bottom:100px;transform:translate(-50%, 0);max-width:var(--mainsize);width:100%}
.progress li{position:relative;flex-grow:1;cursor:pointer;width:100%;border-bottom:2px 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:20px;font-size:16px;font-weight:550;color:rgba(255,255,255,0.6);text-align:center;transition:all .3s}
.progress li p span{display:inline-block;padding-right:25px;font-size:15px;font-weight:700}
.progress li p > b{margin-right:13px;font-family:var(--plyfont)}
.progress li.active p{color:#fff}
.progress li .bar{position:absolute;left:0;width:0;height:2px;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:1500px){
#mainVisual .cont{width:95%}
#mainVisual .txt h1{line-height:1.3;font-size:45px}
#mainVisual .slider li{height:900px}
}
@media (max-width:1200px){
#mainVisual .slider li{height:850px}
#mainVisual .txt h1{font-size:40px}
}
@media (max-width:1024px){
#mainVisual .slider li{height:750px}
#mainVisual .txt h1{margin-bottom:50px;font-size:35px}  
#mainVisual .txt b{margin-bottom:40px}
}
@media (max-width:768px){
#mainVisual .cont{width:100%}
#mainVisual .slider li{height:600px}
#mainVisual .txt{padding:0 15px;width:100%;text-align:center}
#mainVisual .txt h1{margin-bottom:40px;font-size:28px}
#mainVisual .txt b{margin-bottom:30px}
#mainVisual .txt > span{font-size:17px}
.progress li p{font-size:15px}
.progress{padding:0 15px}
}
@media (max-width:750px){
#mainVisual .slider li{background:url("main_banner_img_m01.jpg") center no-repeat;background-size:cover}
#mainVisual .slider li.img02{background-image:url("main_banner_img_m02.jpg")}
#mainVisual .slider li.img03{background-image:url("main_banner_img_m03.jpg")}
#mainVisual .slider li.img04{background-image:url("main_banner_img_m04.jpg")}
}
@media (max-width:700px){
.progress{display:none}
#mainVisual .slider li{height:450px}
#mainVisual .txt{top:56%;}
#mainVisual .txt h1{font-size:25px}
#mainVisual .txt > span{line-height:1.3}
}
@media (max-width:580px){
#mainVisual .slider li{height:350px}
#mainVisual .txt h1{margin-bottom:30px;line-height:1.4;font-size:20px}
#mainVisual .txt b{margin-bottom:25px;font-size:15px}
#mainVisual .txt > span{line-height:1.4;font-size:16px}
}
@media (max-width:480px){
#mainVisual .slider li{height:280px}
#mainVisual .txt b{margin-bottom:10px;font-size:13px}
#mainVisual .txt h1{margin-bottom:15px;font-size:16px}
#mainVisual .txt > span{font-size:13px}
}
/* 반응형 [e] */