@charset "utf-8";
#mainVisual{overflow:hidden;position:relative;width:100%;height:920px;margin:0 auto}

/* swiper text */
#mainVisual .main_txt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;font-family:var(--main-font);text-align:center;color:#fff;z-index:111}
#mainVisual .main_txt h1{padding-bottom:28px;font-family:var(--main-font);font-size:42px;line-height:1.4;word-break:keep-all}
#mainVisual .main_txt p{padding-bottom:40px;font-size:22px;line-height:1.4;word-break:keep-all}

/* swiper control */
#mainVisual .swiper-control{display:flex;align-items:center;justify-content:center;gap:20px}
#mainVisual .swiper-control button{all:unset;cursor:pointer}
#mainVisual .swiper-control button svg{stroke:rgba(255,255,255,0.3);width:20px}
#mainVisual .swiper-control .pager{display:flex;gap:6px;width:auto}

/* swiper */
#mainVisual .main_slide{position:relative;width: 100%;height:100%;border-radius:0 0 var(--radius) var(--radius)}
#mainVisual ul li{width:100%;height:100%;overflow:hidden}
#mainVisual ul li .bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-size:cover}
#mainVisual ul li .bg:after{position:absolute;top:0;left:0;display:block;content:"";width:100%;height:100%;background:rgba(0, 0, 0, .4);z-index:1}
#mainVisual ul li .bg01{background-image:url("./img/main_banner01.jpg")}
#mainVisual ul li .bg02{background-image:url("./img/main_banner02.jpg")}
#mainVisual ul li .bg03{background-image:url("./img/main_banner03.jpg")}


/* 이벤트 버튼 */
#mainVisual .btnWrap{position:absolute;bottom:0;right:0;z-index:1;background-color:#fff}
#mainVisual .btnWrap .link-event{position:relative;display:flex;align-items:center;gap:24px;padding-right:36px;box-shadow:-5px -1px 0 15px #fff !important;border-radius:10px 0 0 0;font-size:18px;color:var(--primary);font-weight:600}
#mainVisual .btnWrap .link-event::before{position:absolute;content:'';left:-33px;bottom:0;z-index:-1;width:var(--radius);height:var(--radius);border-radius:0 0 25px 0;box-shadow:25px 25px 0 25px #fff}
#mainVisual .btnWrap .link-event::after{position:absolute;content:'';right:0;bottom:71px;z-index:-1;width:var(--radius);height:var(--radius);border-radius:0 0 25px 0;box-shadow:25px 25px 0 25px #fff}
#mainVisual .btnWrap .link-event img{animation:spin 6s linear infinite}
@keyframes spin{from{ transform:rotate(0deg)} to{ transform:rotate(360deg)}}

/* scroll */
#mainVisual .scroll{position:absolute;bottom:0;left:178px;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:var(--e-font);color:#fff;font-size:12px;writing-mode:sideways-lr}
#mainVisual .scroll span.bar{position:relative;width:1px;height:175px;background-color:transparent}
#mainVisual .scroll span.bar::before{position:absolute;content:'';top:0;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50px;background-color:#fff;animation:movebullet 2.5s linear infinite}
#mainVisual .scroll span.bar::after{position:absolute;content:'';top:0;left:0;width:1px;height:0;background-color:#fff;animation:movebar 2.5s linear infinite;}
@keyframes movebar {0% {height:0} 100% {height:100%}}
@keyframes movebullet {0%{top:0} 100%{top:100%}}

/* 반응형 [s] */
@media (max-width:1400px){
#mainVisual{height:740px}
#mainVisual .main_txt h1{padding-bottom:20px;font-size:36px}
#mainVisual .main_txt p{padding-bottom:36px;font-size:20px}
#mainVisual .scroll{left:50px}
#mainVisual .btnWrap .link-event{gap:20px;padding-right:26px;font-size:16px}
#mainVisual .btnWrap .link-event img{width:50px}
#mainVisual .btnWrap .link-event::after{bottom:62px}
}
@media (max-width:1200px){
#mainVisual .main_txt h1{font-size:32px}
#mainVisual .main_txt p{font-size:18px}
#mainVisual .btnWrap .link-event{padding-right:16px;font-size:15px;box-shadow:-5px -1px 0 10px #fff !important}
#mainVisual .btnWrap .link-event::after{bottom:52px}
#mainVisual .btnWrap .link-event::before{left:-28px}
#mainVisual .btnWrap .link-event img{width:44px}
}
@media (max-width:1024px){
#mainVisual{height:500px}
#mainVisual .main_txt h1{padding-bottom:15px;font-size:28px}
#mainVisual .main_txt p{padding-bottom:30px;font-size:17px}
#mainVisual .scroll span.bar{height:135px}
}
@media (max-width:768px){
#mainVisual{height:420px}
#mainVisual .main_txt h1{padding-bottom:10px;font-size:clamp(20px, 3.125vw, 24px)}
#mainVisual .main_txt p{padding-bottom:20px;font-size:15px}
#mainVisual .swiper-control{gap:14px}
#mainVisual .scroll{left:24px;gap:8px;font-size:10px}
#mainVisual .scroll span.bar{height:120px}
#mainVisual .btnWrap .link-event{gap:12px;padding-right:10px;font-size:14px}
#mainVisual .btnWrap .link-event::before{left:-25px}
}
@media (max-width:480px){
#mainVisual{height:330px}
#mainVisual .main_txt{padding:0 20px}
#mainVisual .main_txt h1{white-space:pre-line;font-size:clamp(16px, 4.17vw, 20px)}
#mainVisual .main_txt p{padding-bottom:14px;font-size:clamp(13px,3.125vw,15px)}
#mainVisual .btnWrap .link-event{gap:10px;padding-right:10px;font-size:13px}
#mainVisual .btnWrap .link-event img{width:36px}
#mainVisual .btnWrap .link-event::after{bottom:44px}
}
@media (max-width:390px){
#mainVisual{height:100%}
#mainVisual .main_slide{height:260px}
#mainVisual .btnWrap{position:static}
#mainVisual .scroll{display:none}
#mainVisual .swiper-control{gap:8px}
#mainVisual .main_txt{padding:0 15px}
#mainVisual .main_txt p{padding-bottom:10px}
#mainVisual .btnWrap .link-event{flex-wrap:wrap;justify-content:center;padding-top:15px;padding-right:0;box-shadow:none;text-align:center;word-break:keep-all}
}
/* 반응형 [e] */