@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --c-accent: #1677ff;
    --c-accent-deep: #0b56cc;
    --c-ink: #0b1420;
    --c-ink-2: #4b5d72;
    --c-ink-3: #8795a8;
    --c-line: #dfe7f1;
    --c-bg: #fff;
    --c-bg-soft: #f3f7fc;
    --c-navy: #06172c;
    --font-body: "Roboto", Pretendard, system-ui, sans-serif;
    --font-display: "Roboto", Pretendard, system-ui, sans-serif;
    --wrap: 1400px;
    --wrap-nar: 1180px;
    --gutter: 40px;
    --sec-pad: 100px;
    --header-h: 86px;
    --ease: cubic-bezier(.19, 1, .22, 1);
    --hero-time: 6s;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 66%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -.01em;
    overflow-x: hidden;  font-size:1.4rem;
}

body.is-locked {
    overflow: hidden;
}
table, input, select, textarea, button { font-size: inherit; font-family: inherit; }
img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

button {
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.wrap2 {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.wrap--narrow {
    max-width: var(--wrap-nar);
}

.section {
    padding: var(--sec-pad) 0;
}

.section--soft {
    background: var(--c-bg-soft);
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-accent);
}

.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 58px;
}

.sec-head__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size:5rem; 
    line-height: 1.08;
    letter-spacing: -.020em;
    margin: 12px 0 15px;
	
}

.sec-head__desc {
    max-width: 850px;
    color: #fff; 
    font-size: 1.8rem;
    margin: 0;
 }

.sec-head--center {
    display: block;
    text-align: center;
}

.sec-head--center .sec-head__desc {
    margin: 0 auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, .45);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: .35s var(--ease);
}

.btn:hover {
    background: #fff;
    color: var(--c-ink);
    border-color: #fff;
}

.btn--accent {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
}

.btn--accent:hover {
    background: var(--c-accent-deep);
    border-color: var(--c-accent-deep);
    color: #fff;
}

.btn--dark {
    border-color: var(--c-ink);
    color: var(--c-ink);
}

.btn--dark:hover {
    background: var(--c-ink);
    color: #fff;
}

.reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: var(--d, 0s);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* header */

.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    color: #fff;
    transition: background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.header.is-solid {
    background: rgba(255, 255, 255, .96);
    color: var(--c-ink);
    box-shadow: 0 1px 0 var(--c-line);
    backdrop-filter: blur(8px);
}

.logo {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    line-height: 1;
}

.logo__mark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.7rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.logo__mark em {
    font-style: normal;
    color: var(--c-accent);
}

.logo__sub {
    font-size: .9rem;
    letter-spacing: .22em;
    opacity: .65;
    padding-bottom: 3px;
}

.gnb {
    display: flex;
    align-items: center;
    gap: 38px;
    height: var(--header-h);
}

.gnb__item {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.gnb__link {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
    font-weight: 600;
    font-size: 1.5rem;
    white-space: nowrap;
    transition: color .3s;
}

.gnb__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--c-accent);
    transform: translateX(-50%);
    transition: width .35s var(--ease);
}

.gnb__item:hover .gnb__link,
.gnb__item:focus-within .gnb__link {
    color: var(--c-accent);
}

.gnb__item:hover .gnb__link::after,
.gnb__item:focus-within .gnb__link::after {
    width: 100%;
}

/* 2차 메뉴 */

.gnb__sub {
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    z-index: 120;
    min-width: 190px;
    padding: 25px 0;
    background: #fff;
    box-shadow: 0 16px 35px rgba(6,23,44,.14);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity .25s ease,
        visibility .25s ease,
        transform .35s var(--ease);
}

.gnb__item:hover .gnb__sub,
.gnb__item:focus-within .gnb__sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.gnb__sub li {
    position: relative;
}

.gnb__sub a {
    position: relative;
    display: block;
    padding: 3px 22px;
    color: var(--c-ink-2);
    font-size: 1.4rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color .25s,
        background .25s,
        padding-left .3s var(--ease);
}

.gnb__sub a:hover::before {
    width: 6px;
}

.header__util {
    display: flex;
    align-items: center;
    gap: 18px;
}

.lang {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .08em;
    opacity: .8;
}

.burger {
    display: none;
    width: 30px;
    height: 22px;
    position: relative;
}

.burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform .4s var(--ease), opacity .3s;
}

.burger span:nth-child(1) {
    top: 0;
}

.burger span:nth-child(2) {
    top: 10px;
}

.burger span:nth-child(3) {
    top: 20px;
}

body.is-menu .burger span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

body.is-menu .burger span:nth-child(2) {
    opacity: 0;
}

body.is-menu .burger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--c-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: circle(0% at calc(100% - 50px) 43px);
    transition: clip-path .7s var(--ease);
    pointer-events: none;
}

body.is-menu .mobile-nav {
    clip-path: circle(150% at calc(100% - 50px) 43px);
    pointer-events: auto;
}

.mobile-nav__list {
    text-align: center;
}

.mobile-nav__list li {
    margin: 15px 0;
}

.mobile-nav__list a {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
}

.mobile-nav__list a:hover {
    color: var(--c-accent);
}

/* image placeholders */

.ph {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #20272f;
}

/* hero */

.hero {
    position: relative;
    height: 100svh;
    min-height: 700px;
    overflow: hidden;
    background: #04111f;
    color: #fff;
}

.hero__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero__visual-item {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.2s var(--ease), transform 7s linear;
}

.hero__visual-item.is-active {
    opacity: 1;
    transform: scale(1);
}

.hero__visual-item:nth-child(1) {
    background-image: url('./img/main_vi1.png');
}

.hero__visual-item:nth-child(2) {
    background-image: url('./img/main_vi2.png');
}

.hero__visual-item:nth-child(3) {
    background-image: url('./img/main_vi1.png');
}

.hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 76% 34%, rgba(41, 145, 255, .18), transparent 23%), radial-gradient(circle at 58% 68%, rgba(0, 203, 255, .08), transparent 30%), linear-gradient(90deg, rgba(2, 10, 20, .78) 0%, rgba(2, 10, 20, .55) 42%, rgba(2, 10, 20, .28) 72%, rgba(2, 10, 20, .42) 100%), linear-gradient(180deg, rgba(2, 10, 20, .08) 0%, rgba(2, 10, 20, .10) 55%, rgba(2, 10, 20, .52) 100%);
}

.hero__grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .10;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
    background-size: calc(100% / 6) 100%;
}

.beam {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 2;
    height: 2px;
    pointer-events: none;
}

.beam__line {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(22, 119, 255, .78) 22%, #fff 50%, rgba(22, 119, 255, .78) 78%, transparent);
    filter: blur(.4px);
    transform: scaleX(0);
    transform-origin: center;
    animation: beamIn 1.6s var(--ease) .5s forwards;
}

@keyframes beamIn {
    to {
        transform: scaleX(1);
    }
}

.beam__dot {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px 4px rgba(22, 119, 255, .92), 0 0 40px 12px rgba(22, 119, 255, .48);
    animation: beamRun 5.5s cubic-bezier(.55, 0, .45, 1) 1.4s infinite;
}

@keyframes beamRun {
    0% {
        left: 6%;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    50% {
        left: 94%;
        opacity: 1;
    }

    58% {
        opacity: 0;
    }

    100% {
        left: 94%;
        opacity: 0;
    }
}

.hero__body {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    padding-top: 20vh;
}

.hero__content {
    max-width: 100%;
}

.hero__eyebrow {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .25em;
    color: #7db8ff;
    margin-bottom: 24px;
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 7rem;
    line-height: .98;
    letter-spacing: -2px;
    margin: 0;
}

.hero__title span {
    display: block;
    color: var(--c-accent);
}

.hero__desc {
    max-width: 740px;
    font-size: 2rem; 
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    margin: 30px 0 34px;
}

.hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero__stats {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    border-top: 1px solid rgba(255, 255, 255, .18);
    background: rgba(3, 8, 14, .38);
    backdrop-filter: blur(9px);
}

.hero__stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stat {
    min-height: 124px;
    padding: 27px 30px;
    border-right: 1px solid rgba(255, 255, 255, .14);
}

.stat:last-child {
    border-right: 0;
}

.stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
}

.stat span {
    display: block;
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
}

.scroll-cue {
    position: absolute;
    right: 36px;
    bottom: 154px;
    z-index: 4;
    color: rgba(255, 255, 255, .58);
    font-family: var(--font-display);
    font-size: .9rem;
    letter-spacing: .28em;
    writing-mode: vertical-rl;
}

/* why 60 */

.why {
    background: #fff;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}

.why-card {
    position: relative;
    min-height: 360px;
    padding: 42px 32px 36px;
    border-right: 1px solid var(--c-line);
    overflow: hidden;
    transition: .45s var(--ease);
}

.why-card:last-child {
    border-right: 0;
}

.why-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}

.why-card:hover {
    background: var(--c-ink);
    color: #fff;
    transform: translateY(-8px);
}

.why-card:hover::before {
    transform: scaleX(1);
}

.why-card__no {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
  
    color: var(--c-accent);
	 border:1px solid var(--c-accent); 
	width:45px; height:45px; display:flex; align-items:center;   justify-content:center;   
}

.why-card h3 {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1.13;
    letter-spacing: -.010em;
    margin:30px 0 18px;
}

.why-card p {
    margin: 0;
    color: var(--c-ink-2);
    font-size: 1.4rem;
}

.why-card:hover p {
    color: rgba(255, 255, 255, .68);
}

/* how */

.how {
    background: var(--c-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.how::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000, transparent);
}

.how .sec-head {
    position: relative;
    z-index: 2;
}

.how .sec-head__desc {
    color: rgba(255, 255, 255, .65);
}

.flow {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 10px;
}

.flow::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 70px;
    height: 1px;
    background: rgba(255, 255, 255, .16);
}

.flow::after {
    content: "";
    position: absolute;
    left: 8%;
    top: 69px;
    width: 84%;
    height: 3px;
    background: linear-gradient(90deg, #76b5ff, var(--c-accent), #76b5ff);
    transform: scaleX(0);
    transform-origin: left center;
    box-shadow: 0 0 18px rgba(22, 119, 255, .5);
}

.flow.is-flow-in::after {
    animation: flowLine 1.65s var(--ease) .15s forwards;
}

.flow-card {
    position: relative;
    padding: 0 26px;
    text-align: center;
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.flow.is-flow-in .flow-card {
    opacity: 1;
    transform: none;
}

.flow.is-flow-in .flow-card:nth-child(1) {
    transition-delay: .15s;
}

.flow.is-flow-in .flow-card:nth-child(2) {
    transition-delay: .42s;
}

.flow.is-flow-in .flow-card:nth-child(3) {
    transition-delay: .69s;
}

.flow.is-flow-in .flow-card:nth-child(4) {
    transition-delay: .96s;
}

.flow-card__dot {
    position: relative;
    z-index: 2;
    width: 22px;
    height: 22px;
    margin: 59px auto 40px;
    border-radius: 50%;
    background: var(--c-navy);
    border: 6px solid var(--c-accent);
    box-shadow: 0 0 0 8px rgba(22, 119, 255, .14);
    transform: scale(.65);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.flow.is-flow-in .flow-card__dot {
    transform: scale(1);
    animation: flowPulse 2.4s ease-in-out 1.25s infinite;
}

.flow.is-flow-in .flow-card:nth-child(2) .flow-card__dot {
    animation-delay: 1.52s;
}

.flow.is-flow-in .flow-card:nth-child(3) .flow-card__dot {
    animation-delay: 1.79s;
}

.flow.is-flow-in .flow-card:nth-child(4) .flow-card__dot {
    animation-delay: 2.06s;
}

.flow-card__dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(255, 255, 255, .9);
}

.flow-card__no {
    font-family: var(--font-display);
    font-size: 1.5rem;
	font-weight:700; 
	 
	/* border:1px solid var(--c-accent); 
	width:40px; height:40px; display:flex; align-items:center;  margin:0 auto; justify-content:center;   */
     color: var(--c-accent);
}

.flow-card h3 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    margin: 11px 0 16px;
}

.flow-card p {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, .62);
    margin: 0;
}

@keyframes flowLine {
    to {
        transform: scaleX(1);
    }
}

@keyframes flowPulse {
    0%,
    100% {
        box-shadow: 0 0 0 8px rgba(22, 119, 255, .12), 0 0 0 0 rgba(22, 119, 255, 0);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(22, 119, 255, .18), 0 0 0 17px rgba(22, 119, 255, .08);
    }
}

.arch {
    position: relative;
    z-index: 2;
    margin-top: 90px;
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .035);
}

.arch__title {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-bottom: 28px;
}

.arch__title strong {
    font-family: var(--font-display);
    font-size: 1.8rem;
}

.arch__title span {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .5);
}

.arch__row {
    display: grid;
    grid-template-columns: 1fr 74px 1fr 74px 1fr 74px 1fr;
    align-items: center;
    gap: 8px;
}

.arch__node {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(6, 13, 22, .7);
}

.arch__node strong {
    font-family: var(--font-display);
    font-size: 1.6rem;
}

.arch__node span {
    margin-top: 6px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .5);
}

.arch__arrow {
    position: relative;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .15), var(--c-accent));
}

.arch__arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -4px;
    border-left: 7px solid var(--c-accent);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

/* products */

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.product {
    display: block;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
    transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}

.product:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 46px rgba(13, 18, 25, .12);
}

.product__thumb {
    position: relative;
    aspect-ratio: 16/12;
    overflow: hidden;
}

.product__thumb .ph {
    position: absolute;
    inset: 0;
    transition: transform 1.1s var(--ease);
}

.product:hover .product__thumb .ph {
    transform: scale(1.06);
}

.product__badge {
    position: absolute;
    left: 18px;
    top: 18px;
    padding: 7px 10px;
    background: rgba(8, 15, 24, .82);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .13em;
}

.product__body {
    padding: 26px 26px 30px;
}

.product__body h3 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1.2;
    margin: 0 0 11px;
}

.product__body p {
    font-size: 1.4rem;
    color: var(--c-ink-2);
    margin: 0 0 26px;
    min-height: 46px;
}

.product__spec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--c-line);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--c-ink-2);
}

.product__spec i {
    font-style: normal;
    color: var(--c-accent);
    font-size: 1.5rem;
}

/* applications */

.applications {
    background: #071728;
    color: #fff;
}

.applications .sec-head__desc {
    color: rgba(255, 255, 255, .62);
}

.applications .sec-head {
    align-items: center;
}

.applications .btn--view {
    flex: 0 0 auto;
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
    white-space: nowrap;
}

.applications .btn--view:hover {
    background: #fff;
    border-color: #fff;
    color: #071728;
}

.app-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 35px;
}

.app-tabs button {
    padding: 11px 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .66);
    font-size: 1.3rem;
    font-weight: 600;
    transition: .3s;
}

.app-tabs button.is-active,
.app-tabs button:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.app {
    position: relative;
    aspect-ratio: 16/16;
    overflow: hidden;
    display: block;
}

.app[hidden] {
    display: none;
}

.app .ph {
    position: absolute;
    inset: 0;
    transition: transform 1s var(--ease);
}

.app:hover .ph {
    transform: scale(1.08);
}

.app::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 8, 12, .05) 35%, rgba(3, 8, 12, .88) 100%);
}

.app__text {
    position: absolute;
    left: 35px;
    right: 35px;
    bottom: 35px;
    z-index: 2;
}

.app__cat {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: .14em;
    color: #76b5ff;
    font-weight: 700;
}

.app h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin: 7px 0 0;
}

/* news */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.news {
    background: #fff;
    border: 1px solid var(--c-line);
    transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}

.news:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(13, 18, 25, .12);
}

.news__thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.news__thumb .ph {
    position: absolute;
    inset: 0;
    transition: transform 1.1s var(--ease);
}

.news:hover .news__thumb .ph {
    transform: scale(1.06);
}

.news__body {
    padding: 25px 26px 30px;
}

.news__date {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--c-accent);
}

.news__body h3 {
    font-size: 2rem;
    line-height: 1.45;
    margin: 10px 0 12px;
}

.news__body p {
    font-size: 1.4rem;
    color: var(--c-ink-2);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.news__more {
    display: inline-block;
    margin-top: 24px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .12em;
}

/* contact */

.contact {
    position: relative;
    overflow: hidden;
    background: var(--c-navy);
    color: #fff;
    padding: 135px 0;
}

.contact__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(22, 119, 255, .28), transparent 65%);
}

.contact__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    margin-top: 60px;
}

.contact__title {
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: 1.02;
    letter-spacing: -.04em;
    margin: 14px 0 24px;
}

.contact__lead {
    color: rgba(255, 255, 255, .67);
    font-size: 1.6rem;
    max-width: 560px;
    margin: 0 0 44px;
}

.info-list {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 0;
}

.info-list > div {
    width: 50%;
}

.info-list > div:first-child {
    width: 100%;
}

.info-list dt {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
     color: #76b5ff;
    margin-bottom: 7px;
}

.info-list dd {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 1.4rem;
    line-height: 1.6;
}

.contact-form {
    padding: 40px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.field {
    margin-bottom: 18px;
}

.field label {
    display: block;
    font-size: 1.3rem;
    font-weight: 500;
     color: rgba(255, 255, 255, .62);
    margin-bottom: 8px;
}

.field input,
.field textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .035);
    color: #fff;
    padding: 14px 15px;
    outline: none;
    transition: border-color .25s;
}

.field input {
    height: 50px;
}

.field textarea {
    height: 136px;
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    border-color: var(--c-accent);
}

.field input::placeholder,
.field textarea::placeholder {
    color: rgba(255, 255, 255, .32);
}

.agree {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 6px 0 24px;
    color: rgba(255, 255, 255, .56);
    font-size: 1.1rem;
    line-height: 1.55;
}

.agree input {
    margin-top: 3px;
    accent-color: var(--c-accent);
}

.contact-form .btn {
    width: 100%;
}

/* footer */

.footer {
    background: #f7f8fa;
    color: var(--c-ink-2);
    padding: 52px 0 58px;
    font-size: 1.3rem;
}

.footer__top {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--c-line);
}

.footer__logo {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.1rem;
    color: var(--c-ink);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.footer__nav {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer__nav a {
    font-weight: 600;
}

.footer__nav a:hover {
    color: var(--c-accent);
}

.footer__policy {
    margin-left: auto;
    display: flex;
    gap: 16px;
}

.footer__policy a:first-child {
    color: var(--c-ink);
    font-weight: 700;
}

.footer__info {
    padding-top: 24px;
    line-height: 1.95;
}

.footer__info span {
    display: inline-block;
    margin-right: 18px;
}

.footer__copy {
    margin-top: 10px;
    color: var(--c-ink-3);
    font-size: 1.2rem;
}

.to-top {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 80;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-accent);
    color: #fff;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: .4s;
}

.to-top.is-show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.to-top:hover {
    background: var(--c-accent-deep);
}

.progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--c-accent);
    z-index: 110;
}

.how_table {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 50px;
	 
}

.how_cell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
	padding:0 20px;
 }
.how_cell:after {content:''; width:1px; height:30px; position:absolute; right:0; top:50%; margin-top:-25px; background:rgba(255,255,255,.3)}
.how_cell:last-child:after {display:none}
.how_cell:last-child {
    border-right: 0;
}

.how_head {
    flex: 1;
    padding: 32px 30px 28px;
}

.how_head .num {
    display: block;
    font-family: var(--font-display);
    font-size: 4.2rem;
    line-height: 1;
    font-weight: 700;
    color: var(--c-accent);
}

.how_head .line {
    position: relative;
    height: 2px;
    margin: 14px 0 20px;
    background: #b7d7ed;
}

.how_head .line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--c-accent);
    border-right: 2px solid var(--c-accent);
    transform: translateY(-50%) rotate(45deg);
}

.how_head .line i {
    position: absolute;
    top: 50%;
    left: 52%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--c-accent);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 5px rgba(0, 126, 210, .08);
}

.how_head h4 {
    margin: 0 0 12px;
    font-size: 2.3rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--c-ink);
}

.how_head p {
    margin: 0;
    min-height: 76px;
    font-size: 1.4rem;
    line-height: 1.65;
    color: var(--c-ink-2);
}

.how_icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-height: 105px;
    padding: 20px 10px 18px;
}

.how_icons>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: center;
}

.how_icons i {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-size: 2.5rem;
    color: var(--c-accent);
}

.how_icons span {
    display: block;
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 500;
    color: rgba(255, 255, 255, .65);
}

 /* =========================================================
   SUB COMMON
========================================================= */

.sub_visual {
    position: relative;
    height: 450px;
    overflow: hidden;
    background: var(--c-navy);
    color: #fff;
}

.sub_visual__bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.03);
}

.sub_visual__dim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(3, 15, 29, .82) 0%,
            rgba(3, 15, 29, .55) 45%,
            rgba(3, 15, 29, .18) 100%
        );
}

.sub_visual__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--header-h);
}

.sub_visual__eyebrow {
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: #86bcff;
}

.sub_visual h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 5.8rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.04em;
}

.sub_visual p {
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 1.7rem;
}


/* location */

.location {
    height: 64px;
    border-bottom: 1px solid var(--c-line);
    background: #fff;
}

.location__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 1.4rem;
    color: var(--c-ink-3);
}

.location__inner > span {
    font-size: .8rem;
    color: #c4ced8;
}

.location__inner a {
    transition: color .25s;
}

.location__inner a:hover {
    color: var(--c-accent);
}

.location__inner strong {
    color: var(--c-ink);
    font-weight: 600;
}

.location__home {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* sub heading */

.sub_head {
 
    margin-bottom: 70px;
}

.sub_head h2 {
    margin: 12px 0 18px;
    font-family: var(--font-display);
    font-size: 5.2rem;
    line-height: 1.1;
    letter-spacing: -.04em;
}

.sub_head p {
    margin: 0;
    color: var(--c-ink-2);
    font-size: 1.7rem;
}


/* =========================================================
   ABOUT INTRO
========================================================= */

.about_intro__grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 100px;
    align-items: center;
}


/* image */

.about_intro__visual {
    position: relative;
}

.about_intro__image {
    position: relative;
    overflow: hidden;
}

.about_intro__image::before {
    content: "";
    display: block;
    padding-top: 118%;
}

.about_intro__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about_intro__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(3, 15, 29, .42) 100%
        );
}

.about_intro__caption {
    position: absolute;
    left: 38px;
    right: 38px;
    bottom: 34px;
    z-index: 2;
    color: #fff;
}

.about_intro__caption span {
    display: block;
    margin-bottom: 9px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: #83bdff;
}

.about_intro__caption strong {
    display: block;
    font-family: var(--font-display);
    font-size: 2.3rem;
    line-height: 1.35;
}


/* text */

.about_intro__content {
    max-width: 650px;
}

.about_intro__title {
    margin-bottom: 36px;
}

.about_intro__title > span {
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--c-accent);
}

.about_intro__title h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 3.9rem;
    line-height: 1.25;
    letter-spacing: -.035em;
}

.about_intro__text {
    position: relative;
    padding-left: 30px;
}

.about_intro__text::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;
    width: 2px;
    background:
        linear-gradient(
            to bottom,
            var(--c-accent),
            #c9d8e8
        );
}

.about_intro__text p {
    margin: 0 0 23px;
    color: var(--c-ink-2);
    font-size: 1.5rem;
    line-height: 1.85;
}

.about_intro__text p:last-child {
    margin-bottom: 0;
}
 

.sian_tab {width:100%; display:flex; text-align:center; height:55px;  }
.sian_tab li  {width:50%; display:inline-block; line-height:55px;  text-align:center;  font-size:20px;   background-color:#f5f5f5;  transition: all 0.3s ease-out;}
.sian_tab li a {color:#333  ; width:100%; display:inline-block }