@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;height:990px;font-family:'Poppins', 'AppleSDGothicNeo'}
#mainVisual .bg{overflow:hidden;position:absolute;top:0;width:100%;height:740px;background-color:#111}
#mainVisual .bg:after{display:block;content:"";position:absolute;left:50%;top:0;width:1px;height:0;background-color:rgba(255,255,255,.16);transition:all 3s var(--ani)}
#mainVisual .bg canvas{opacity:0;position:absolute;top:-350px;left:0;z-index:5;width:150%;height:1090px;filter:grayscale(1);transition:all 1s linear}
#mainVisual .bg.on canvas{opacity:.5}
#mainVisual .bg.on:after{height:100%}

/* 타이틀 */
#mainVisual .tit_area{position:relative;z-index:11;max-width:1600px;width:100%;margin:0 auto;padding-top:330px;line-height:1.8;color:#fff}
#mainVisual .tit_area span{opacity:.4;font-size:15px}
#mainVisual .tit_area p{font-size:46px;font-weight:600}

/* 슬라이더 */
#mainVisual .slider_wrap{opacity:0;position:absolute;top:300px;right:0;z-index:10;width:100%;margin-right:200px}
#mainVisual .swiper-container{overflow:visible;height:690px}
#mainVisual .swiper-slide-next{opacity:0}
#mainVisual ul{align-items:end}
#mainVisual ul li{overflow:hidden;width:415px;height:525px;transition:height .4s var(--ani), opacity .4s var(--ani)}
#mainVisual ul li .img{position:relative;width:100%;height:475px;background:center no-repeat;background-size:cover}
#mainVisual ul li .img:before{opacity:0;display:block;content:"";color:"";position:absolute;left:0;bottom:0;z-index:0;width:100%;height:30%;background:linear-gradient(360deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);transition:all .4s var(--ani)}
#mainVisual ul li .img iframe{width:100% !important;height:100% !important}
#mainVisual ul li .img .gall_img{height:100%}
/* #mainVisual ul li .img02{background-image:url(/sh_img/index/main_banner/main_img02.jpg)}
#mainVisual ul li .img03{background-image:url(/sh_img/index/main_banner/main_img03.jpg)}
#mainVisual ul li .img04{background-image:url(/sh_img/index/main_banner/main_img04.jpg)}
#mainVisual ul li .img05{background-image:url(/sh_img/index/main_banner/main_img05.jpg)} */
#mainVisual ul li video{width:100%;height:100%;background-color:#000}
#mainVisual ul li a{overflow:hidden;display:block;position:relative;height:100%}
#mainVisual ul li.active{width:1100px;height:720px;transform:translateY(-50px)}
#mainVisual ul li.active .img{height:100%}
#mainVisual ul li .more{position:absolute;right:0;bottom:0;z-index:1;padding-bottom:10px;font-size:12px;font-weight:700;color:#222;text-transform:uppercase;background-color:#fff}
#mainVisual ul li .more:before{display:block;content:"";position:absolute;left:0;bottom:0;transform:scaleX(0);transform-origin:bottom right;width:100%;height:3px;background-color:#222;transition:transform .4s var(--ani)}
#mainVisual ul li .overlay{opacity:0;position:absolute;left:0;bottom:0;width:100%;padding:90px 80px;line-height:2;color:#fff;transition:all .4s var(--ani);background:rgb(0,0,0);
background:linear-gradient(360deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%)}
#mainVisual ul li .overlay:before{opacity:0;display:block;content:"";position:absolute;left:0;bottom:0;z-index:0;width:100%;height:130%;background:linear-gradient(360deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);transition:all .4s var(--ani)}
#mainVisual ul li .overlay span{position:relative;z-index:1;opacity:.5;font-size:15px}
#mainVisual ul li .overlay p{position:relative;z-index:1;font-size:28px;font-weight:700}
#mainVisual ul li.active .more{right:80px;bottom:80px;color:#fff;background:none}
#mainVisual ul li.active .more:before{background-color:#fff}
#mainVisual ul li.active .overlay{opacity:1;padding:70px 80px}
#mainVisual ul li.active:hover .more:before{transform:scaleX(1);transform-origin:bottom left}
#mainVisual ul li.active:hover .overlay:before{opacity:.3}
#mainVisual ul li:not(.active):hover .more:before{transform:scaleX(1);transform-origin:bottom left}
#mainVisual ul li:not(.active):hover .img:before{opacity:.5}

/* controls */
#mainVisual .diretions{opacity:0;position:absolute;right:30px;top:660px;z-index:11;width:160px;height:160px;margin-right:-40px}
#mainVisual .diretions .arr{cursor:pointer;position:absolute;right:0;top:0;width:80px;height:80px;border:none;border-radius:0;background-color:#fff}
#mainVisual .diretions .arr.prev{top:auto;right:auto;bottom:0;left:0;background-color:#0e0e0e}
#mainVisual .diretions .arr img{position:absolute;transition:all .3s var(--ani)}
#mainVisual .diretions .arr.next .on{opacity:0;top:49px;right:50px}
#mainVisual .diretions .arr.next .off{top:34px;right:35px}
#mainVisual .diretions .arr.next:hover img.on{opacity:1;top:34px;right:35px;transition-delay:.1s}
#mainVisual .diretions .arr.next:hover img.off{opacity:0;top:14px;right:15px}
#mainVisual .diretions .arr.prev .on{opacity:0;bottom:49px;left:50px}
#mainVisual .diretions .arr.prev .off{bottom:34px;left:35px}
#mainVisual .diretions .arr.prev:hover img.on{opacity:1;bottom:34px;left:35px;transition-delay:.1s}
#mainVisual .diretions .arr.prev:hover img.off{opacity:0;bottom:14px;left:15px}

@media (max-width:1600px){
#mainVisual .tit_area{padding-left:20px}
#mainVisual .diretions{right:0}
#mainVisual ul li.active{width:950px;height:620px}
}
@media (max-width:1230px){
#mainVisual{height:auto}
#mainVisual .tit_area{padding:230px 0 50px;text-align:center}	
#mainVisual .swiper-container{height:auto}
#mainVisual .slider_wrap{position:relative;top:auto;margin-right:0!important}
#mainVisual .swiper-slide-next{opacity:1}
#mainVisual ul li{width:80%}
#mainVisual ul li .img{height:100%}
#mainVisual ul li.active{width:80%;height:605px;transform:none}
#mainVisual ul li .more{display:none}
#mainVisual .diretions{display:none}
}
@media (max-width:1024px){
#mainVisual .bg{height:600px}
#mainVisual .tit_area{padding:150px 0 50px}
#mainVisual ul li{height:460px}	
#mainVisual ul li.active{height:460px}
}
@media (max-width:768px){
#mainVisual .bg{height:450px}
#mainVisual .tit_area{padding:120px 0 40px}
#mainVisual .tit_area span{font-size:13px}
#mainVisual .tit_area p{font-size:36px}
#mainVisual ul li{height:420px}	
#mainVisual ul li.active{height:420px}
#mainVisual ul li.active .overlay{padding:40px 8%}	
#mainVisual ul li.active .more{right:8%}
#mainVisual ul li .overlay span{font-size:13px}
#mainVisual ul li .overlay p{font-size:22px;line-height:1.2}
}
@media (max-width:580px){
#mainVisual ul li{height:340px}	
#mainVisual ul li.active{height:340px}
}
@media (max-width:480px){
#mainVisual .bg{height:360px}
#mainVisual .tit_area{padding:100px 0 30px}
#mainVisual .tit_area p{font-size:32px}
#mainVisual ul li{height:300px}	
#mainVisual ul li.active{height:300px}
#mainVisual ul li .overlay p{font-size:18px;font-weight:600}
}
@media (max-width:380px){
#mainVisual .bg{height:320px}
#mainVisual .tit_area{padding:80px 0 30px}
#mainVisual ul li{height:260px}	
#mainVisual ul li.active{height:260px}
}