@charset "utf-8";

#mainVisual{position:relative;padding-top:100px;height:890px}

/* 메인배너 텍스트 */
#mainVisual .txt{position:relative;width:100%;padding-top:80px;text-align:center;color:#000;z-index:9999;transition:all .4s;transform:skew(-0.1deg);font-family:'NEXEN_TIRE_Bold'}
#mainVisual.on .txt{color:#fff;transition:all .4s .4s;}
#mainVisual .txt .txt1{display:inline-block;position:relative;margin-bottom:28px;font-size:18px}
#mainVisual .txt .txt1:before{position:absolute;right:-15px;top:-6px;content:'';width:8px;height:8px;border-radius:100px;background:var(--primary)}
#mainVisual .txt .txt2{font-size:50px;line-height:75px}
#mainVisual .txt .txt2.txt2_mo{display:none}
#mainVisual .txt .txt2 span{display:block;overflow:hidden;height:70px;padding-top:71px;transition:padding 1.2s}
#mainVisual .txt .txt2 b{font-weight:normal;color:var(--primary)}
#mainVisual .txt a{display:block;visibility:hidden;overflow:hidden;width:250px;height:75px;margin:85px auto 0;border-radius:50px;font-size:15px;line-height:75px;color:#fff;opacity:0;transition:opacity .4s;font-family:'NEXEN_TIRE_Regular'}
#mainVisual .txt a span{display:block;width:100%;height:100%;background:#000;transition:all .3s}
#mainVisual.on .txt a{visibility:visible;opacity:1;transition:opacity .4s .4s}

/* 이미지 슬라이드 */
#mainVisual .mainSwiper{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:calc(100% - 120px);height:390px;border-radius:30px;transition:width .4s .4s, height .4s, border-radius .2s;}
#mainVisual .mainSwiper:before{position:absolute;left:0;top:0;content:'';z-index:5;width:100%;height:100%;opacity:0;transition:all .4s;background:url('./black_filter.png');background-position:center bottom}
#mainVisual.on .mainSwiper{width:100%;height:100%;border-radius:0;transition:width .4s, height .4s .4s, border-radius .2s .4s;transition-timing-function:ease-in-out}
#mainVisual.on .mainSwiper:before{opacity:1;transition:all .4s}
#mainVisual.stop .mainSwiper{transition:all 0s;transition-timing-function:ease-in-out}
#mainVisual .main_img{position:relative;width:100%}
#mainVisual .main_img li{position:absolute;left:0;width:100%!important;height:100%;background-position:center bottom;opacity:0 !important}
#mainVisual .main_img li.swiper-slide-active{opacity:1 !important}
#mainVisual .main_img li.img01{background-image:url(./img01.jpg)}
#mainVisual .main_img li.img02{background-image:url(./img02.jpg)}

/* 스크롤다운 */
#mainVisual .scroll{position:absolute;left:50%;bottom:44px;z-index:10;transform:translateX(-50%) skew(-0.1deg);font-size:13px;color:#fff;font-family:'NEXEN_TIRE_Regular'}
#mainVisual .scroll span{display:block;position:relative;width:1px;height:75px;margin:0 auto 15px;background:rgba(255,255,255,.3)}
#mainVisual .scroll span:before{position:absolute;left:50%;transform:translateX(-50%);content:'';width:5px;height:5px;border-radius:100px;background:#fff;animation:scr_down 2s infinite}
@keyframes scr_down {0%{top:10px;opacity:1} 100%{top:90%;opacity:0}}

/* 모바일 호버 X */
@media (hover:hover) {
#mainVisual.on .txt a:hover span{background:var(--primary)}
}

/* 반응형 [s] */
@media (max-width:1560px){
#mainVisual .mainSwiper{width:calc(100% - 60px)}
}
@media (max-width:1230px){
#mainVisual{height:860px}
#mainVisual .txt .txt2{font-size:43px}
#mainVisual .txt .txt2 span{height:57px}
#mainVisual .mainSwiper{height:430px}
}
@media (max-width:1024px){
#mainVisual{height:710px;padding-top:70px}
#mainVisual .txt{padding-top:100px;color:#fff}
#mainVisual .txt .txt2{font-size:32px}
#mainVisual .txt .txt2 span{height:50px}
#mainVisual .txt a{visibility:initial;opacity:1}
#mainVisual .mainSwiper{width:100%;height:100%;border-radius:0}
#mainVisual .mainSwiper:before{opacity:1}
#mainVisual .main_img li{background-size:cover}
#mainVisual .scroll{bottom:30px}
}
@media (max-width:768px){
#mainVisual{height:630px}
#mainVisual .txt{padding-top:75px}
#mainVisual .txt .txt1{font-size:15px}
#mainVisual .txt .txt1:before{right:-12px;top:-4px;width:6px;height:6px}
#mainVisual .txt .txt2{overflow:hidden;height:165px;font-size:28px}
#mainVisual .txt .txt2.txt2_mo{display:block}
#mainVisual .txt .txt2.txt2_pc{display:none}
#mainVisual .txt .txt2 span{height:41px;line-height:50px}
#mainVisual .txt a{width:225px;height:65px;margin-top:45px;font-size:14px;line-height:65px}
#mainVisual .scroll{font-size:11px}
#mainVisual .scroll span{height:50px}
}
@media (max-width:480px){
#mainVisual{height:550px}
#mainVisual .txt{padding-top:85px}
#mainVisual .txt .txt2{height:140px;font-size:23px}
#mainVisual .txt .txt2 span{height:35px;line-height:35px}
#mainVisual .txt a{width:220px;height:60px;margin-top:25px;line-height:60px}
#mainVisual .scroll{bottom:20px}
#mainVisual .scroll span{height:40px}
#mainVisual .scroll span:before{width:3px;height:3px;transform:translateX(-2px)}
}
@media (max-width:380px){
#mainVisual{height:500px}
#mainVisual .txt{padding-top:75px}
#mainVisual .txt .txt1{margin-bottom:23px}
#mainVisual .txt .txt2{height:120px;font-size:20px}
#mainVisual .txt .txt2 span{height:30px;line-height:30px}
#mainVisual .txt a{width:195px;height:55px;font-size:13px;line-height:55px}
}
/* 반응형 [e] */