@charset "utf-8";

#mainVisual{position:relative;width:100%;height:100vh;overflow:hidden}
#mainVisual .main_banner{overflow:hidden;width:100%;height:100%}
#mainVisual .main_banner video{width:100%;filter:brightness(0.7);object-fit:cover}
#mainVisual .scroll_down{display:flex;flex-direction:column;align-items:center;gap:50px;position:absolute;top:50%;right:1%;transform:translateY(-50%);font-size:13px;font-family:var(--k-font);color:rgb(255, 255, 255, 0.5)}
#mainVisual .scroll_down div:first-child{transform:rotate(-90deg)}
#mainVisual .scroll_down .line{position:relative;width:1px;height:170px;background-color:rgb(255, 255, 255, 0.5)}
#mainVisual .scroll_down .line::before{content:"";position:absolute;top:0%;left:0px;width:1px;height:0%;background-color:#fff;animation:scroll_down 5s infinite}
#mainVisual .scroll_down .line::after{opacity:0;content:"";position:absolute;top:0%;left:-1.5px;width:5px;height:5px;border-radius:50%;background-color:#fff;animation:scroll_ball 5s infinite}
#mainVisual .tit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;z-index:2}
#mainVisual h1{font-size:60px;line-height:1.3}
#mainVisual .text_slider {position:relative;width:1600px;height:160px;text-align:center;overflow:hidden}
#mainVisual .text_slider .slide{position:absolute;top:0;left:0;width:100%;opacity:0;transform:translateY(40px);transition:all 0.6s ease}
#mainVisual .text_slider .slide.active{opacity:1;transform:translateY(0)}
#mainVisual .s_t{font-size:30px;font-weight:500;letter-spacing:1.1px;text-shadow:0 5px 20px rgba(0, 0, 0, 20)}
#mainVisual .b_t{font-size:80px;text-shadow:0 5px 20px rgba(0,0,0,50)}

@keyframes scroll_down {0%{height:0%;opacity:1}80%{height:100%;opacity:1}81%{height:0%;opacity:1}100%{height:0%;opacity:0}}
@keyframes scroll_ball {0%{top:0%;opacity:1}80%{top:100%;opacity:1}81%{top:0%;opacity:1}100%{top:0%;opacity:1}}

#mainVisual .scroll-icon {position:absolute;bottom:100px;left:50%;transform:translateX(-50%)}
#mainVisual .scroll-icon span {z-index:9999;position:absolute;width:30px;height:30px;margin-left:-12px;border-left:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:sdb 1.5s infinite;animation:sdb 1.5s infinite;box-sizing:border-box }
@-webkit-keyframes sdb {
0% {-webkit-transform:rotate(-45deg) translate(0, 0);opacity:0}
50%{opacity:1}
100%{-webkit-transform:rotate(-45deg) translate(-20px, 20px);opacity:0}
}
@keyframes sdb {
0%{transform:rotate(-45deg) translate(0, 0);opacity:0}
50%{opacity:1}
100%{transform:rotate(-45deg)translate(-20px, 20px);opacity:0}
}

.global-light {position:fixed;width:300px;height:300px;pointer-events:none;background:radial-gradient(circle, rgba(246, 187, 7, 0.4) 0%, rgba(246, 187, 7, 0) 70%);transform:translate(-50%, -50%);transition:transform 0.08s ease-out;z-index:9999}
body:hover .global-light {opacity:1}

/* 반응형 [s] */
@media (hover:hover){
#mainVisual .tit a:hover{background-color:var(--primary)}
#mainVisual .tit a:hover svg{transform:translateX(10px)}
}
@media(max-width:1980px){
#mainVisual .tit h1{font-size:58px}
#mainVisual .tit a{font-size:18px}
#mainVisual .main_banner video{height:100%}
}
@media(max-width:1800px){
#mainVisual .b_t{font-size:60px}
}
@media (max-width:1380px){
#mainVisual .s_t {font-size:24px}
#mainVisual .b_t {font-size:50px}
#mainVisual .tit h1{font-size:50px}
#mainVisual .tit a{font-size:16px}
.global-light{display:none}
}
@media (max-width:1024px){
#mainVisual{overflow:hidden}
#mainVisual .s_t {font-size:22px}
#mainVisual .b_t {font-size:40px}
#mainVisual .tit h1{font-size:40px}
#mainVisual .tit a{padding:15px 35px;font-size:15px}
#mainVisual .scroll_down{right:-1%}
}
@media (max-width:768px){
#mainVisual{height:500px}
#mainVisual .s_t{padding-bottom:10px}
#mainVisual .tit h1{font-size:35px}
#mainVisual .tit a{margin-top:40px;font-size:14px}
#mainVisual .scroll_down{display:none}
#mainVisual .text_slider{width:700px}
}
@media (max-width:600px){
#mainVisual .b_t{font-size:30px}
#mainVisual .s_t {font-size:18px}
#mainVisual .text_slider {width:400px}
}
@media (max-width:480px){
#mainVisual{height:auto}
#mainVisual .tit h1{font-size:28px}
#mainVisual .tit a{margin-top:35px;font-size:13px}
#mainVisual .main_banner video{object-fit:contain;height:auto}
#mainVisual .tit {top:56%}
#mainVisual .s_t{font-size:16px}
#mainVisual .b_t{font-size:23px}
#mainVisual .scroll-icon{bottom:80px}
#mainVisual .scroll-icon span {width:15px;height:15px}
}
@media (max-width:390px){
#mainVisual{height:auto} 
#mainVisual .text_slider {width:300px}
#mainVisual .tit h1{font-size:25px}
#mainVisual .tit a{margin-top:32px;padding:13px 30px;font-size:12px}
#mainVisual .s_t {font-size:14px}
#mainVisual .b_t {font-size:20px}
#mainVisual .scroll-icon {bottom:80px}
}
/* 반응형 [e] */