:root { --about-navy: #0f335f; --about-cyan: #00f0ff; --about-blue: #74bce7; }
html { font-family: Arial, sans-serif; font-weight: 300; color: #fff; background: #051932; }
* { box-sizing: border-box; }
.main { height: auto; min-height: 100vh; max-height: none; }
.main.is-page-stack, .main:has(.page-stack) { overflow: visible; height: auto; max-height: none; }
.page-stack { margin-top: var(--header-height); }
@media (prefers-reduced-motion:reduce) {
.page-stack [class*="-trAnim-"] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.about-page { position: relative; min-height: calc(100vh - var(--header-height)); width: 100%; padding: 6% 0 5%; background-color: #051932; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: hidden; }
.about-page__mask { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5, 25, 50, .55) 0%, rgba(15, 51, 95, .72) 48%, rgba(5, 25, 50, .82) 100%); pointer-events: none; }
.about-page__inner { position: relative; z-index: 2; margin: 0 auto; width: 100%; max-width: 1400px; padding: 0 2rem; }
.about-hero { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1600px; margin: 0 auto 5rem; }
.about-hero__badge { display: inline-flex; align-items: center; justify-content: center; padding: 0 1.5rem; height: 2.25rem; border: 1px solid var(--about-cyan); border-radius: 999px; font-size: .875rem; font-weight: 400; letter-spacing: .08em; color: var(--about-cyan); background: rgba(15, 51, 95, .28); }
.about-hero__title { margin: 1.5rem 0 0; font-size: clamp(1.75rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.25; color: #ffffff; }
.about-hero__title--accent { margin-top: .5rem; background: linear-gradient(273.41deg, #74BCE7 -1.1%, #00F0FF 94.53%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; }
.about-hero__subtitle { margin: 1.25rem 0 0; font-size: 1.125rem; font-weight: 300; line-height: 1.6; color: #ffffff; }
.about-hero__line { width: 104px; height: 7px; margin: 1.5rem 0 0; background: #ffffff; }
.about-hero__desc { margin: 1.25rem 0 0; max-width: 720px; font-size: .9375rem; font-weight: 300; line-height: 1.7; color: #ffffff; }
.about-who { margin: 0 auto 3.5rem; }
.about-who__title { margin: 0 0 2rem; text-align: center; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; color: #165DFF; background: linear-gradient(90deg, #165DFF 0%, #36BFFB 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; }
.about-who__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.about-who__card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 10.5rem; padding: 1.75rem 1rem; text-align: center; border: 1px solid rgba(116, 188, 231, .28); border-radius: 12px; background: rgba(5, 25, 50, .55); }
.about-who__num { font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 700; line-height: 1.1; color: #36BFFB; }
.about-who__label { margin-top: .75rem; font-size: 1rem; font-weight: 400; line-height: 1.4; color: #D1D5DB; }
.about-who__unit { margin-top: .35rem; font-size: .8125rem; font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.about-intro { margin: 0 auto; padding: 2.5rem 1.5rem; border: 1px solid #165DFF33; border-radius: 12px; }
.about-intro--2 { display: flex; gap: 2.5rem; }
.about-intro--2 .about-intro-item { flex: 1; }
.about-intro__title { margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 400; color: #36BFFB; }
.about-intro__text { font-size: .9375rem; font-weight: 300; line-height: 1.85; color: rgba(255, 255, 255, .92); }
.about-intro__text p { margin: 0 0 1rem; color: #D1D5DB; }
.about-intro__text p:last-child { margin-bottom: 0; }
.about-philosophy { width: 100%; padding: 7% 0; background: linear-gradient(180deg, #0A101F 0%, #0D1730 100%); text-align: center; }
.about-philosophy__inner { margin: 0 auto; width: 100%; max-width: 1400px; padding: 0 2rem; }
.about-philosophy__title { margin: 0 0 4.5rem; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 700; line-height: 1.2; color: #ffffff; }
.about-philosophy__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.about-philosophy__item { margin: 0; display: flex; flex-direction: column; align-items: center; font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 400; line-height: 1.7; color: #ffffff; }
.about-philosophy__icon { display: block; width: 80px; height: 80px; margin-bottom: 1.25rem; }
.about-philosophy__item:nth-child(1) .about-philosophy__icon { width: 90px; height: 90px; }
.about-philosophy__item p { margin: 0; }
.about-scope { width: 100%; padding: 6% 0 7%; background-color: var(--about-navy); text-align: center; }
.about-scope__inner { margin: 0 auto; width: 100%; max-width: 1400px; padding: 0 2rem; }
.about-scope__title { margin: 0 0 1rem; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 700; line-height: 1.2; color: #ffffff; }
.about-scope__desc { margin: 0 auto 3rem; max-width: 820px; font-size: 1.0625rem; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, .92); }
.about-scope-subtitle { margin: .5rem 0 0; font-size: .9375rem; font-weight: 300; line-height: 1.7; color: #9CA3AF; }
.about-scope__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.about-scope__card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 11.5rem; padding: 2rem 1rem; border-radius: 12px; }
.about-scope__icon { display: block; width: 48px; height: 48px; margin-bottom: 1.25rem; object-fit: contain; }
.about-scope__name { margin: 0; font-size: 1.25rem; font-weight: 400; line-height: 1.4; color: #ffffff; }
.about-core { width: 100%; padding: 6% 0 7%; background: #051932; text-align: center; }
.about-core__inner { margin: 0 auto; width: 100%; max-width: 1500px; padding: 0 2rem; }
.about-core__title { margin: 0 0 3rem; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 700; line-height: 1.2; color: #ffffff; }
.about-core__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.about-core__card { display: flex; flex-direction: column; min-width: 0; padding: 1.25rem 1rem 1rem; border: 1px solid rgba(116, 188, 231, .35); border-radius: 16px; background: rgba(15, 51, 95, .55); box-shadow: 0 0 16px 2px rgba(0, 240, 255, .18); }
.about-core__name { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 400; line-height: 1.4; color: #74bce7; }
.about-core__desc { margin: 0 0 1.25rem; font-size: .9375rem; font-weight: 300; line-height: 1.7; color: #9CA3AF; }
.about-core__visual { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; }
.about-core__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-capability { width: 100%; padding: 6% 0 7%; background: #0f335f; }
.about-capability__inner { margin: 0 auto; width: 100%; max-width: 1400px; padding: 0 2rem; }
.about-capability__title { margin: 0 0 3rem; text-align: center; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 700; line-height: 1.2; color: #ffffff; }
.about-capability__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; margin-bottom: 2.5rem; }
.about-capability__copy h3 { margin: 0 0 .75rem; font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 400; line-height: 1.5; color: #ffffff; }
.about-capability__copy p { margin: 0; font-size: .9375rem; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, .78); }
.about-capability__tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.about-capability__tags span { display: flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .75rem 1rem; border: 1px solid rgba(22, 93, 255, 0.2); border-radius: 6px; font-size: 1rem; font-weight: 400; line-height: 1.3; color: #ffffff; text-align: center; }
.about-capability__video { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #1a2744; }
.about-capability__video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.about-capability__shot { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 1.5rem 1.5rem; text-align: center; box-sizing: border-box; }
.about-capability__shot-icon { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.15rem; color: #c5cdd8; }
.about-capability__shot-icon svg { display: block; width: 100%; height: 100%; }
.about-capability__shot-title { margin: 0; font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 400; line-height: 1.5; color: #d7dde6; }
.about-capability__shot-note { margin: .65rem 0 0; max-width: 42rem; font-size: clamp(.8125rem, 1.2vw, .9375rem); font-weight: 300; line-height: 1.7; color: #8b95a5; }
.about-global { width: 100%; padding: 6% 0 7%; background: #051932; text-align: center; }
.about-global__inner { margin: 0 auto; width: 100%; max-width: 1400px; padding: 0 2rem; }
.about-global__title { margin: 0 0 1rem; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 700; line-height: 1.2; color: #ffffff; }
.about-global__desc { margin: 0 auto 3rem; max-width: 720px; font-size: 1.125rem; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.about-global__map { width: 100%; max-width: 1200px; margin: 0 auto; }
.about-global__map img { display: block; width: 100%; height: auto; }
@media screen and (max-width:991px) {
.about-page { padding: 12% 0 8%; }
.about-page__inner { padding: 0 1.25rem; }
.about-hero { margin-bottom: 3.5rem; }
.about-who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.about-intro { padding: 1.75rem 1.5rem; }
.about-intro--2 { flex-direction: column; gap: 1.5rem; }
.about-philosophy { padding: 12% 0; }
.about-philosophy__title { margin-bottom: 2.5rem; }
.about-philosophy__grid { grid-template-columns: 1fr; gap: 1.75rem; }
.about-scope { padding: 12% 0; }
.about-scope__desc { margin-bottom: 2rem; font-size: 1rem; }
.about-scope__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.about-core { padding: 12% 0; }
.about-core__title { margin-bottom: 2rem; }
.about-core__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.about-core__name { min-height: 0; font-size: 1rem; }
.about-capability { padding: 12% 0; }
.about-capability__title { margin-bottom: 2rem; }
.about-capability__row { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.about-capability__copy h3 { font-size: 1.125rem; }
.about-capability__shot { padding: 1.25rem 1.25rem; }
.about-capability__shot-icon { width: 2.25rem; height: 2.25rem; margin-bottom: .9rem; }
.about-capability__shot-title { font-size: 1.125rem; }
.about-capability__shot-note { margin-top: .5rem; font-size: .8125rem; }
.about-global { padding: 12% 0; }
.about-global__desc { margin-bottom: 2rem; font-size: 1rem; }
}
@media screen and (max-width:576px) {
.about-page { padding: 16% 0 10%; }
.about-hero__subtitle { font-size: 1rem; }
.about-hero__desc { font-size: .875rem; }
.about-who__grid { grid-template-columns: 1fr; }
.about-who__card { min-height: 8.5rem; padding: 1.25rem 1rem; }
.about-intro__title { font-size: 1.25rem; }
.about-intro__text { font-size: .9375rem; line-height: 1.75; }
.about-philosophy__inner { padding: 0 1.25rem; }
.about-philosophy__item { font-size: 1rem; }
.about-scope__inner { padding: 0 1.25rem; }
.about-scope__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.about-scope__card { min-height: 9rem; padding: 1.5rem 1rem; }
.about-scope__name { font-size: 1.125rem; }
.about-core__inner { padding: 0 1.25rem; }
.about-core__grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
.about-capability__inner { padding: 0 1.25rem; }
.about-capability__tags span { min-height: 2.75rem; font-size: .9375rem; }
.about-capability__shot { padding: 1rem .85rem; }
.about-capability__shot-icon { width: 2rem; height: 2rem; margin-bottom: .7rem; }
.about-capability__shot-title { font-size: 1rem; }
.about-capability__shot-note { font-size: .75rem; }
.about-global__inner { padding: 0 1.25rem; }
.about-global__desc { font-size: .9375rem; }
.body-zh .about-capability__tags span { font-size: 14px; }
}

@media screen and (max-width:480px) {
    .body-zh .about-capability__tags span {padding: .75rem 10px;  font-size: 12px; }
}