@charset "utf-8";

#mainVisual{position:relative;margin:0 70px;padding-top:100px;width:var(--mainsize)}
#mainVisual .tit{margin-top:150px;margin-left:auto;width:calc(100% - (50% / 4))}
#mainVisual .tit h1{margin-top:35px;line-height:1.1;font-size:120px;font-weight:700;word-break:keep-all}
#mainVisual .tit p span{color:var(--primary-color)}
#mainVisual h2{
    position:relative;margin:150px auto;
    /* padding:60px 0 0 70px; */
    width:calc(100% / 4);
    font-size:24px;
    font-weight:500
}
#mainVisual h2:after{content:"";position:absolute;top:0px;left:0px;width:15px;height:15px;border-radius:50%;background-color:var(--primary-color)}
#mainVisual .gsap_wrap{padding-bottom:50px}
#mainVisual .gsap_wrap .img_cont{position:relative;width:100%;height:100vh}
#mainVisual .gsap_wrap img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:calc(100% / 3);height:80%;object-fit:cover;filter:brightness(1)}
#mainVisual .gsap_wrap h3{position:absolute;bottom:-100%;left:50%;transform:translateX(-50%);width:100%;line-height:1.5;text-align:center}
#mainVisual .gsap_wrap h3 span{position:relative;display:inline;white-space:pre-line;font-size:78px;font-weight:600}

#mainVisual .gsap_wrap video{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:calc(100% / 3);
    height:80%;
    object-fit:cover;
    filter:brightness(1);
}
/* 마우스 호버 시 글씨에 적용되는 마스크 효과 */
.hero-title {
    font-size: 94px;  /* 72px * 1.3 = 93.6px */
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffffff;
    position: relative;
    transition: color 0.3s ease;
    cursor:default;
}

.hero-title span {
    display: block;
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #fff3ee 25%, #fff3ed 50%, #fff7f3 75%, #ffffff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 10s ease infinite;
}

/* 마우스 호버 효과를 위한 오버레이 */
.hero-title span::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle 500px at var(--mouse-x, 50%) var(--mouse-y, 50%), #FF7411 0%, transparent 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.hero-title:hover span::before {
    opacity: 1;
}



/* 그라데이션 애니메이션 */
@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* 마우스 따라다니는 블러 효과 */
.mouse-blur {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 17, 51, 0.12) 0%, rgba(0, 8, 34, 0.06) 40%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    opacity: 0;

}

#mainVisual:hover .mouse-blur {
    opacity: 1;
}



/* 반응형 [s] */
@media (max-width:1980px){
#mainVisual .tit h1{font-size:100px}
#mainVisual h2{font-size:19px}
#mainVisual .gsap_wrap h3 span{font-size:56px}
}
@media (max-width:1380px){
#mainVisual .tit{width:calc(100% - (25% / 4))}
#mainVisual .tit h1{font-size:85px}
#mainVisual h2{padding:50px 0 0 60px;width:40%;font-size:17px}
#mainVisual h2:after{width:12px;height:12px}
#mainVisual .gsap_wrap h3 span{font-size:45px}
#mainVisual .gsap_wrap img{width:40%}
}
@media (max-width:1024px){
#mainVisual{margin:auto;padding-top:20px;width:95%}
#mainVisual .tit{margin-top:70px;width:100%;text-align:center}
#mainVisual .tit h1{margin-top:30px;font-size:55px}
#mainVisual h2{padding:40px 0 0 0;margin-top:130px;width:70%;font-size:16px;text-align:center}
#mainVisual h2:after{left:50%;transform:translateX(-50%);width:75%;height:2px;border-radius:0px}
#mainVisual .gsap_wrap img{width:70%}
#mainVisual .gsap_wrap h3 span{font-size:35px}
}
@media (max-width:768px){
#mainVisual .tit{margin-top:130px}
#mainVisual .tit h1{margin-top:25px;font-size:40px}
#mainVisual h2{margin-top:80px;width:75%}
#mainVisual .gsap_wrap img{width:75%}
#mainVisual .gsap_wrap h3 span{font-size:26px}
}
@media (max-width:480px){
/* #mainVisual .tit{margin-top:30px} */
#mainVisual .tit h1{margin-top:20px;font-size:30px}
#mainVisual h2{margin-top:70px;width:80%;font-size:15px;white-space:pre-line !important}
#mainVisual .gsap_wrap img{width:80%}
#mainVisual .gsap_wrap h3 span{font-size:23px}
}
@media (max-width:390px){
/* #mainVisual .tit{margin-top:20px} */
#mainVisual .tit h1{margin-top:16px;font-size:25px}
#mainVisual h2{margin-top:50px;font-size:14px;width:85%}
#mainVisual .gsap_wrap img{width:85%}
#mainVisual .gsap_wrap h3 span{font-size:20px;white-space:normal}
}
/* 반응형 [e] */