@charset "UTF-8";

.sub-header-wrap {--sv-navy: #14213d; --sv-sub: #4a5a78; --sv-blue: #2f6bff; --sv-ease: cubic-bezier(.22, .8, .24, 1); --hd: 88px; position: relative; background: #fff;}

.sub-visual {position: relative; overflow: hidden; display: flex; align-items: center; height: calc(clamp(260px, 15vw, 290px) + var(--hd)); padding-top: var(--hd); background: linear-gradient(180deg, #e6f0fc 0%, #f4f8fe 45%, #fff 100%);}

.sub-scene {position: absolute; inset: 0; z-index: 0; pointer-events: none;}
.sub-grid {position: absolute; inset: -10%; background-image: linear-gradient(rgba(47, 107, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 107, 255, .09) 1px, transparent 1px); background-size: 48px 48px; background-position: center; -webkit-mask: radial-gradient(55% 60% at 50% 55%, #000, transparent); mask: radial-gradient(55% 60% at 50% 55%, #000, transparent); transform: translate(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -8px)); animation: subZoom 1.8s cubic-bezier(.22, .8, .24, 1) .55s backwards;}
.sub-glow {position: absolute; left: 50%; top: calc(50% + var(--hd) / 2); width: min(1100px, 72vw); height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 107, 255, .2), rgba(0, 180, 230, .1) 55%, rgba(0, 180, 230, 0)); opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 10px)) scale(calc(1 + var(--sp, 0) * .3)); animation: subShow 1.4s ease .7s forwards, subBreath 6s ease-in-out 2.1s infinite alternate;}

.sub-door {position: absolute; left: 0; right: 0; z-index: 1; background: #fff; pointer-events: none; animation: 1.1s cubic-bezier(.76, 0, .24, 1) .55s forwards;}
.sub-door-t {top: 0; height: calc(50% + var(--hd) / 2); animation-name: subDoorUp;}
.sub-door-b {top: calc(50% + var(--hd) / 2); bottom: 0; animation-name: subDoorDown;}
.sub-door::after {content: ""; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(47, 107, 255, 0), #2f6bff 30%, #00b4e6 50%, #2f6bff 70%, rgba(47, 107, 255, 0)); box-shadow: 0 0 14px rgba(47, 107, 255, .55); scale: 0 1; animation: subSeam .55s cubic-bezier(.65, 0, .35, 1) forwards, subHide .5s ease 1.2s forwards;}
.sub-door-t::after {bottom: -1px;}
.sub-door-b::after {top: -1px;}

.sub-line {position: absolute; left: 50%; bottom: 0; z-index: 1; width: min(1550px, calc(100% - 40px)); height: 1px; transform: translateX(-50%) scaleY(.6); transform-origin: bottom; background: linear-gradient(90deg, rgba(20, 33, 61, 0), rgba(20, 33, 61, .16) 50%, rgba(20, 33, 61, 0)); pointer-events: none;}
.sub-line::after {content: ""; position: absolute; left: 0; bottom: 0; width: 22%; height: 3px; background: linear-gradient(90deg, rgba(47, 107, 255, 0), #2f6bff 50%, rgba(47, 107, 255, 0)); opacity: 0; animation: subLineLight 1.6s cubic-bezier(.45, 0, .2, 1) 3.6s forwards;}

.sub-visual::after {content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #fff 100%); pointer-events: none;}

.sub-header {position: relative; z-index: 2; width: 100%; padding: 10px 20px 0; text-align: center; opacity: calc(1 - var(--sp, 0) * .75); transform: translate(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 4px + var(--sp, 0) * -36px));}
.sub-title {--fs: clamp(48px, 4.2vw, 74px); height: calc(var(--fs) * 1.2); margin: 0;}
.sub-title svg {display: block; width: 100%; height: 100%; overflow: visible;}
.sub-title text {font-family: var(--ff); font-weight: 800; text-rendering: geometricPrecision; font-size: var(--fs); letter-spacing: -0.03em;}
.sub-title .t-main {fill: var(--sv-navy); fill-opacity: 0; stroke: var(--sv-navy); stroke-width: 1.2px; stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: subStroke 2.4s cubic-bezier(.45, 0, .2, 1) .6s forwards, subFill .8s ease 2.4s forwards;}
.sub-title .t-shine {fill: url(#subTitleShine); pointer-events: none;}
.sub-desc {margin: 18px 0 0; font-weight: 400; font-size: clamp(17px, 1.05vw, 20px); line-height: 1.7; letter-spacing: -0.02em; color: #2a3954; white-space: nowrap;}
.sub-desc span {display: inline-block; opacity: 0; animation: subFadeUp18 .55s var(--sv-ease) calc(1.9s + var(--i) * .05s) forwards;}

@keyframes subShow {
    to {opacity: 1;}
}
@keyframes subHide {
    to {opacity: 0;}
}
@keyframes subBreath {
    to {opacity: .6;}
}
@keyframes subZoom {
    from {opacity: 0; scale: 1.18;}
}
@keyframes subSeam {
    to {scale: 1 1;}
}
@keyframes subDoorUp {
    to {transform: translateY(-100%);}
}
@keyframes subDoorDown {
    to {transform: translateY(100%);}
}
@keyframes subLineLight {
    0%       {opacity: 0; transform: none;}
    15%, 85% {opacity: 1;}
    100%     {opacity: 0; transform: translateX(355%);}
}
@keyframes subStroke {
    to {stroke-dashoffset: 0;}
}
@keyframes subFill {
    to {fill-opacity: 1; stroke-width: 0;}
}
@keyframes subFadeUp18 {
    from {opacity: 0; transform: translateY(18px);}
    to   {opacity: 1; transform: none;}
}

@media (max-width: 768px) {
    .sub-header-wrap {--hd: 64px;}
    .sub-visual {height: calc(220px + var(--hd));}
    .sub-grid {background-size: 32px 32px;}
    .sub-glow {width: 130vw; height: 200px;}
    .sub-header {padding: 0 20px;}
    .sub-title {--fs: clamp(32px, 9vw, 44px);}
    .sub-title .t-main {stroke-width: 1px;}
    .sub-desc {margin-top: 12px; font-size: 15px; line-height: 1.6; white-space: normal; word-break: keep-all;}
}
@media (prefers-reduced-motion: reduce) {
    .sub-line::after {display: none;}
    .sub-door {display: none;}
    .sub-grid {animation: none;}
    .sub-glow {opacity: 1; animation: none;}
    .sub-desc span {opacity: 1; transform: none; animation: none;}
    .sub-title .t-main {fill-opacity: 1; stroke-width: 0; stroke-dashoffset: 0; animation: none;}
    .sub-title .t-shine {display: none;}
}

#subContents {max-width: 1550px; padding: 80px 20px 150px; margin: 0 auto;}

@media (max-width: 768px) {
    #subContents {padding: 50px 15px 100px;}
}