@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;height:100vh;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 .mainSwiper{position:absolute;left:0;top:0;z-index:1001;width:100%;height:100vh}
#mainVisual .slider li {position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100vh;background-size:cover;background-position:center}
#mainVisual .slider li .txt{position:absolute;left:10%;bottom:400px;text-align:left;transform:none;padding:0 20px;color:#fff;z-index:10}
#mainVisual .slider li .txt span{color:#3b846a}
#mainVisual .slider li .txt b{font-size:15px;color:#3b846a;font-family:var(--main-font)}
#mainVisual .slider li .txt h1{color:#334242;font-size:45px;font-weight: 500;line-height:1.3;padding:30px 0 40px;white-space: pre-line;font-family:var(--main-font);font-weight: 600;}
#mainVisual .slider li .txt p{font-size: 17px;line-height: 1.6;color: rgb(4 4 4 / 70%);}
#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 #d9e6d9;background-size:cover}
#mainVisual .slider li.img02{background: url(./img/img2.jpg) center #d9e6d9;background-size:cover;background-position:center}
#mainVisual .slider li.img03{background:url(./img/img3.jpg) #d9e6d9;background-size:cover;background-position:center}
#mainVisual .slider li.img04{background:url(./img/img4.jpg) #d9e6d9;background-size:cover;background-position:center}

/* progressbar */
.progress{display:grid;grid-template-columns: repeat(4,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:#333;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:#3b846a}
.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:1700px){
#mainVisual .slider li .txt{left:6%}
}
@media (max-width:1400px){
#mainVisual .txt{left:5%}
.progress{max-width:unset;width:100%}
.progress li p{font-size:16px}
}
@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}
#mainVisual .slider li .txt{bottom: 250px;}
#mainVisual .slider li .txt h1{font-size:36px}
.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 p{font-size:15px;line-height:1.5}
#mainVisual .slider li{height:550px}
#mainVisual .slider li .txt{bottom:200px;text-align:center;left:0;width:100%}
#mainVisual .slider li .txt h1{font-size:30px}
.progress{bottom:45px}
.progress li p{text-align:center;align-items:center;gap:4px;padding-left:0px;padding-bottom:8px;font-size:13px}
.progress li p span{font-size:14px}
}
@media (max-width:480px){
#mainVisual{height: 480px;}
#mainVisual::before{display:none}
#mainVisual .txt{bottom:140px}
#mainVisual .txt b{font-size:14px}
#mainVisual .txt h1{padding:15px 0 25px;font-size:25px}
#mainVisual .txt p{font-size:14px}
#mainVisual .slider li{height:480px}
#mainVisual .slider li .txt{bottom:90px}
#mainVisual .slider li .txt h1{font-size:25px}
#mainVisual .slider li .txt p{font-size:14px;word-break:keep-all}
#mainVisual .slider li .txt b{font-size:14px}
.progress{display:none}
}
@media (max-width:380px){
#mainVisual{height:380px}
#mainVisual .slider .txt{bottom:115px}
#mainVisual .slider .txt b{font-size:13px}
#mainVisual .slider li .txt h1{padding:12px 0 22px;font-size:21px}
#mainVisual .slider .txt p{font-size:13px}
#mainVisual .slider li{height:380px}
}
/* 반응형 [e] */