@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%;height:100%;background-color:#222}

/* 이미지 */
#mainVisual .main_img{position:relative;left:20px;width:100%;height:100vh;min-height:550px}
#mainVisual .main_img li .img{position:absolute;width:100%;height:100%;background:center no-repeat;background-size:cover;transition:all .4s}
#mainVisual .main_img li .img.img01{display:block;background-image:url(/sh_img/index/main_banner/main_banner_01.jpg)}
#mainVisual .main_img li .img.img02{background-image:url(/sh_img/index/main_banner/main_banner_02.jpg)}
#mainVisual .main_img li .img.img03{background-image:url(/sh_img/index/main_banner/main_banner_03.jpg)}
#mainVisual .main_img li .img.img04{background-image:url(/sh_img/index/main_banner/main_banner_04.jpg)}
#mainVisual .main_img li .img.img05{background-image:url(/sh_img/index/main_banner/main_banner_05.jpg)}
#mainVisual .main_img li .img.img06{background-image:url(/sh_img/index/main_banner/main_banner_06.jpg)}
#mainVisual .main_img li.num1 .txt{right:unset;bottom:185px;left:160px}
#mainVisual .main_img li.num1.on .txt{left:260px}
#mainVisual .main_img li .txt{opacity:0;position:absolute;right:290px;bottom:65px;max-width:100%;width:max-content;transition:all .4s}
#mainVisual .main_img li.on .txt{opacity:1;right:270px}

#mainVisual .pager{display:flex;flex-direction:column;align-items:center;position:absolute;right:100px;top:50%;z-index:101;transform:translateY(-50%); width:max-content}
#mainVisual .pager span{width:10px;height:10px;margin:10px 0;border:1px solid #fff;background:none;opacity:1;transition:all .3s}
#mainVisual .pager span.on{background:#fff}
	 

@media(max-width:1024px){
#mainVisual .main_img{height:700px;min-height:auto}	
#mainVisual .controls{bottom:40px}
#mainVisual .main_img li .txt{bottom:50px;left:0px;right:unset;margin-top:-20px}
#mainVisual .main_img li.num1 .txt{bottom:50px;right:unset;left:0}
#mainVisual .main_img li.num1.on .txt{left:30px}
#mainVisual .main_img li.on .txt{right:unset;left:50px}
#mainVisual .main_img li .txt img{width:70%}
#mainVisual .pager{right:50px}
}
@media(max-width:768px){
#mainVisual .main_img{height:550px;min-height:auto}	
#mainVisual .main_img li .txt p{font-size:55px}	
#mainVisual .main_img li .txt span{font-size:18px}
#mainVisual .main_img li .txt img{width:40%}
#mainVisual .pager{right:25px}
#mainVisual .main_img li.on .txt{left:25px}
}
@media(max-width:620px){
#mainVisual .main_img li .txt p{font-size:45px}	
}
@media(max-width:480px){
#mainVisual .main_img{height:500px}
}
@media(max-width:380px){
#mainVisual .main_img li .txt p{font-size:38px}	
#mainVisual .controls{margin-left:10px}
.swiper-progress-bar{width:140px}
}