@charset "utf-8";

/* 슬라이더 */
#main_banner{position:relative}
#main_banner .main_slide{min-height:800px;height:100vh}
#main_banner .main_slide li{background:center no-repeat;background-size:cover}
#main_banner .main_slide .slide01{background-image:url('./img/main_banner_01.jpg')}
#main_banner .main_slide .slide02{background-image:url('./img/main_banner_02.jpg')}

/* 텍스트 */
#main_banner .txt{width:100%;position:absolute;left:50%;top:40%;z-index:100;transform:translate(-50%,-50%);color:#fff;letter-spacing:0}
#main_banner .txt .main_txt{color:#fff;text-align:center}
#main_banner .txt .main_txt p{padding-bottom:30px;font-size:25px;font-weight:500}
#main_banner .txt .main_txt span{font-size:75px;font-weight:300;line-height:1;font-family:var(--e-font)}
#main_banner .txt .main_txt a{display:block;width:233px;height:55px;margin:60px auto 0;border:1px solid rgba(255, 255, 255, 0.3);font-weight:300;line-height:55px;text-align:center;color:#fff;transition:0.2s;font-family:var(--k-font)}

/* 컨트롤 */
#main_banner .controls{ display:flex;align-items:center;position:absolute;bottom:60px;left:50%;z-index:101;transform:translateX(-50%);overflow:hidden;color:#fff}
#main_banner .controls button{margin-top:2px;display:inline-block;cursor:pointer;width:45px;border:none;background:none;transition:0.2s}
#main_banner .controls .num{left:auto;margin:0 15px;bottom:auto;width:auto;font-size:17px;font-weight:300;color:#fff;font-family:var(--e-font);line-height:29px}
#main_banner .controls .pager{margin:0 15px;width:18px;display:inline-block}
#main_banner .controls .pager ul li{opacity:0!important;text-align:center}
#main_banner .controls .pager ul li.on{opacity:1!important}

/* 프로그레스바 */
.swiper-progress-bar{position:relative;width:90px;height:1px;margin-right:10px}
.slide_progress-bar{opacity:0;position:absolute;left:0;right:0;width:100%;height:1px;background:rgba(255,255,255,0.3)}
.slide_progress-bar:after{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:#fff}
.swiper-progress-bar.active .slide_progress-bar{opacity:1} 
.swiper-progress-bar.animate .slide_progress-bar{transition:width 3.5s linear;width:100%}	
.swiper-progress-bar.animate .slide_progress-bar:after{transition:width 3.5s linear;width:100%} 		 

/* 반응형 [s] */
@media (hover:hover){
#main_banner .txt .main_txt a:hover{background:rgba(255, 255, 255, 0.2)}
#main_banner .controls button:hover{opacity:1}
}
@media (max-width:1024px){
#main_banner .main_slide{min-height:auto;height:625px}
#main_banner .txt{top:42%}
#main_banner .txt .main_txt p{padding-bottom:20px;font-size:15px}
#main_banner .txt .main_txt span{font-size:52px}
#main_banner .txt .main_txt a{display:flex;justify-content:center;align-items:center;margin:50px auto 0;width:200px;height:52px}
#main_banner .controls button{width:30px}
#main_banner .controls .pager{width:16px}
}
@media (max-width:768px){
#main_banner .main_slide{height:485px}
#main_banner .txt{top:45%}
#main_banner .txt .main_txt p{padding-bottom:15px;font-size:14px}
#main_banner .txt .main_txt span{font-size:38px}
#main_banner .txt .main_txt a{margin:40px auto 0;width:168px;height:46px;font-size:14px}
#main_banner .controls button{width:20px}
#main_banner .controls button img{width:60%}
#main_banner .controls .num{margin:0 10px;font-size:16px}
#main_banner .controls .pager{margin:0 10px}
#main_banner .controls .pager .swiper-wrapper{font-size:14px}
.swiper-progress-bar{width:75px}
}
@media (max-width:480px){
#main_banner .main_slide{height:380px}
#main_banner .txt{top:50%}
#main_banner .txt .main_txt p{padding-bottom:10px;font-size:13px}
#main_banner .txt .main_txt span{font-size:28px}
#main_banner .txt .main_txt a{margin:30px auto 0;width:150px;height:42px;font-size:13px}
#main_banner .controls{bottom:30px}
#main_banner .controls button{width:18px}
#main_banner .controls button img{width:52%}
#main_banner .controls .num{margin:0 8px;font-size:15px}
#main_banner .controls .pager{margin:0 8px}
#main_banner .controls .pager .swiper-wrapper{font-size:13px}
.swiper-progress-bar{width:65px}
}
@media (max-width:380px){
#main_banner .main_slide{height:325px}
#main_banner .txt .main_txt p{padding-bottom:8px;font-size:12px}
#main_banner .txt .main_txt span{font-size:24px}
#main_banner .txt .main_txt a{margin:20px auto 0;width:135px;height:38px;font-size:12px}
#main_banner .controls{bottom:25px}
#main_banner .controls button{margin:0px}
#main_banner .controls button img{width:50%}
#main_banner .controls .num{margin:0 4px}
#main_banner .controls .pager{margin:0 4px}
.swiper-progress-bar{width:55px}
}
/* 반응형 [e] */