@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 .main_slide .slide03{background-image:url('./img/main_banner_03.jpg')}

/* 텍스트 */
#main_banner .txt{width:100%;max-width: var(--mainsize);position:absolute;left:50%;top:50%;z-index:100;transform:translate(-50%,-50%);color:#fff;letter-spacing:0}
#main_banner .txt .main_txt{padding-top:170px;font-size:20px;color:rgba(255,255,255,0.6)}
#main_banner .txt .main_txt p{font-size:60px;font-weight:200;line-height:1.2;color:#fff}
#main_banner .txt .main_txt span{font-weight:700}
#main_banner .txt .main_txt .ko_txt{padding:50px 0 100px;line-height:1.5}
#main_banner .txt .main_txt a{display:flex;align-items:center;justify-content:center;gap:14px;width:276px;height:80px;font-size:30px;font-weight:700;line-height:55px;text-align:center;background: #775e4c;border-radius:50px;color:#fff;transition:0.2s}
#main_banner .txt .main_txt a b{display:flex;align-items:center;justify-content:center;width:45px;height:45px;background:rgba(255,255,255,0.15);border-radius:50px}
#main_banner .txt .main_txt a b svg{width:17px}

/* 컨트롤 */
#main_banner .controls{display:flex;align-items:center;position:absolute;top:70px;left: 0;z-index:101;overflow:hidden;color:#fff}
#main_banner .controls button{position:relative;margin-top:2px;display:flex;cursor:pointer;width:45px;border:none;background:none;transition:0.2s;align-items:center;justify-content:center}
#main_banner .controls .prev:after{position:absolute;content:'';right:0;top:50%;transform: translateY(-50%);width:1px;height:15px;background:rgba(255,255,255,0.3)}
#main_banner .controls .num{left:auto;margin:0 15px;bottom:auto;color: rgba(255,255,255,0.4);}
#main_banner .controls .pager{margin: 0 15px 0 0;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: 110px;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:1400px){
#main_banner .txt .main_txt{padding:170px 50px 0}
#main_banner .txt .main_txt p{font-size:55px}
#main_banner .controls{left:50px}
}
@media (max-width:1200px){
#main_banner .txt .main_txt{font-size:17px}
#main_banner .txt .main_txt p{font-size:50px}
}
@media (max-width:1024px){
#main_banner .main_slide{min-height:auto;height:625px}
#main_banner .txt .main_txt p{font-size:44px}
#main_banner .txt .main_txt a{width:max-content;padding:0 24px;height:70px;font-size:25px}
#main_banner .txt .main_txt .ko_txt{padding:50px 0 50px}
#main_banner .controls{top:100px}
}
@media (max-width:768px){
#main_banner .main_slide{min-height:auto;height:500px}
#main_banner .controls{left:30px;top:70px}
#main_banner .txt .main_txt{padding:130px 30px 0;font-size:15px}
#main_banner .txt .main_txt p{font-size:36px}
#main_banner .txt .main_txt .ko_txt{padding:30px 0}
#main_banner .txt .main_txt a{height:66px;font-size:23px}
}
@media (max-width:600px){
#main_banner .controls{font-size:13px}
#main_banner .txt .main_txt {padding:117px 30px 0}
#main_banner .txt .main_txt p{font-size:30px}
#main_banner .txt .main_txt a{height:60px;font-size:19px}
}
@media (max-width:480px){
#main_banner{text-align:center}
#main_banner .main_slide{min-height:auto;height:450px}
#main_banner .controls{top:77px;left:50%;transform:translateX(-50%)}
#main_banner .txt .main_txt{padding:117px 15px 0;font-size:14px}
#main_banner .txt .main_txt p{font-size:23px}
#main_banner .txt .main_txt a{margin: 0 auto}
}
@media (max-width:380px){
#main_banner .txt .main_txt p{font-size:20px}
#main_banner .txt .main_txt .ko_txt br{display:none}
}
/* 반응형 [e] */