@charset "utf-8";

#mainVisual{position:relative;height:865px;border-radius:0 0 100px 100px;overflow:hidden}
#mainVisual::before{z-index:2;position:absolute;content:"";inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.3)}
#mainVisual .main_slider_wrap{width:100%;height:100%}
#mainVisual .MainSwiper{width:100%;height:100%}
#mainVisual .swiper-slide{height:100%;background-repeat:no-repeat;background-position:center;background-size:cover}
#mainVisual .list1{background-image:url("./main_banner01.jpg")}
#mainVisual .list2{background-image:url("./main_banner02.jpg")}
#mainVisual .list3{background-image:url("./main_banner03.jpg")}

#mainVisual .txt_wrap{position:absolute;top:0;left:0;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:160px;padding-left:calc((100% - var(--mainsize))/2);width:100%;;height:100%;z-index:3}
#mainVisual .txt_wrap .txt_box{padding-bottom:85px}
#mainVisual .txt_wrap .txt_box .sub-tit{padding-bottom:20px;font-size:55px;line-height:1.18;font-weight:700;white-space:pre-line;color:#fff;word-break:keep-all}
#mainVisual .txt_wrap .txt_box .main-tit{font-size:20px;line-height:1.5;font-weight:500;color:#fff;word-break:keep-all}
#mainVisual .txt_wrap .swiper-controller{display:flex;align-items:center;gap:30px}
#mainVisual .txt_wrap .swiper-controller .btn-nav{all:unset;cursor:pointer}
#mainVisual .txt_wrap .swiper-controller .btn-nav svg{stroke:#a9b3b9;transform:translateY(1.5px);transition:stroke 0.2s}
#mainVisual .txt_wrap .swiper-controller .console-box{display:flex;align-items:center;gap:20px}
#mainVisual .txt_wrap .swiper-controller .console-box span{font-family:var(--e-font);font-size:15px;font-weight:700;color:#fff}
#mainVisual .txt_wrap .swiper-controller .console-box .swiper-pagination{position:static;display:flex;align-items:center;gap:10px}
#mainVisual .txt_wrap .swiper-controller .console-box .swiper-pagination .swiper-pagination-bullet{width:7px;height:7px;background:#fff;opacity:0.5;border-radius:100px;transition:all 0.2s}
#mainVisual .txt_wrap .swiper-controller .console-box .swiper-pagination .swiper-pagination-bullet-active{width:47px;opacity:1}

/* SCROLL DOWN */
#mainVisual .scroll-mark{position:absolute;z-index:3;bottom:92px;right:75px;writing-mode:vertical-lr;font-family:var(--e-font);font-size:13px;font-weight:600;color:#fff}
#mainVisual .scroll-mark .animation{display:flex;justify-content:flex-end;gap:12px;animation:scrolldown 2s ease-in-out infinite}
#mainVisual .scroll-mark span{display:flex;align-items:center;gap:12px}
@keyframes scrolldown{0% {opacity:0.3;transform:translateY(6px)}50% {opacity:0.8;transform:translateY(0)}100% {opacity:0.3;transform:translateY(6px)}}

@media (hover:hover){
#mainVisual .txt_wrap .swiper-controller .btn-nav:hover svg{stroke:#fff}
}

/* 반응형 [s] */
@media (max-width:1600px){
#mainVisual{height:750px}
#mainVisual::before{background-color:rgba(0,0,0,0.5)}
#mainVisual .txt_wrap{top:50%;transform:translateY(-50%);justify-content:center;align-items:center;padding:0 20px;text-align:center}
#mainVisual .txt_wrap .txt_box{padding-bottom:45px}
#mainVisual .txt_wrap .txt_box .sub-tit{padding-bottom:12px;font-size:48px}
#mainVisual .scroll-mark{bottom:50px;right:50%;transform:translateX(50%);writing-mode:unset}
}
@media (max-width:1400px){
#mainVisual{height:700px;border-radius:0 0 50px 50px}
#mainVisual .txt_wrap .txt_box .sub-tit{font-size:42px}
#mainVisual .txt_wrap .txt_box .main-tit{font-size:18px}
#mainVisual .txt_wrap .txt_box{padding-bottom:45px}
#mainVisual .txt_wrap .swiper-controller{gap:20px}
#mainVisual .txt_wrap .swiper-controller .console-box .swiper-pagination .swiper-pagination-bullet-active{width:36px}
}
@media (max-width:1024px){
#mainVisual{height:630px;border-radius:0 0 30px 30px}
#mainVisual .txt_wrap .txt_box .sub-tit{font-size:36px}
#mainVisual .txt_wrap .txt_box .main-tit{font-size:16px}
#mainVisual .txt_wrap .swiper-controller{gap:16px}
#mainVisual .txt_wrap .swiper-controller .btn-nav svg{width:22px;height:22px}
#mainVisual .txt_wrap .swiper-controller .console-box{gap:15px}
#mainVisual .txt_wrap .swiper-controller .console-box span{font-size:14px}
#mainVisual .scroll-mark{bottom:35px;font-size:12px}
#mainVisual .scroll-mark span{gap:8px}
#mainVisual .scroll-mark svg{width:22px;height:22px}
}
@media (max-width:768px){
#mainVisual{height:540px;border-radius:0}
#mainVisual .txt_wrap .txt_box{padding-bottom:15px}
#mainVisual .txt_wrap .txt_box .sub-tit{font-size:32px}
#mainVisual .txt_wrap .txt_box .main-tit{font-size:15px}
#mainVisual .txt_wrap .swiper-controller{gap:14px}
#mainVisual .txt_wrap .swiper-controller .btn-nav svg{width:20px;height:20px}
#mainVisual .txt_wrap .swiper-controller .console-box{gap:12px}
#mainVisual .txt_wrap .swiper-controller .console-box span{font-size:13px}
#mainVisual .txt_wrap .swiper-controller .console-box .swiper-pagination{gap:8px}
}
@media (max-width:480px){
#mainVisual{height:470px}
#mainVisual .txt_wrap .txt_box .sub-tit{padding-bottom:8px;font-size:26px;line-height:1.3}
#mainVisual .scroll-mark{font-size:11px}
#mainVisual .scroll-mark span{gap:5px}
#mainVisual .scroll-mark svg{width:20px;height:20px}
}
/* 반응형 [e] */