@charset "utf-8";
/* 서브 페이지 전용 */
.detail {display: grid; gap: 4rem; align-items: center;}
.detail-img {overflow: hidden; aspect-ratio: 3 / 2; background: #0b1220;}
.detail-img img {width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease);}
.detail-img:hover img {transform: scale(1.025);}
.detail-no {font-family: var(--font-en); font-size: 2.4rem; color: var(--blue);}
.detail h2 {margin-top: 1.2rem; font-size: clamp(3.6rem, 3.6vw, 6.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2;}
.detail .p-en {font-size: 1.4rem;}
.detail .lead {margin-top: 2.4rem;}
.check {margin-top: 3.2rem; border-top: 1px solid var(--line);}
.check li {display: flex; gap: 1.6rem; padding-block: 1.6rem; border-bottom: 1px solid var(--line); font-size: 1.7rem;}
.check li b {flex: 0 0 9rem; color: var(--navy);}
.check li span {color: var(--sub);}
.detail-act {display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 4rem;}
.note {margin-top: 2.4rem; font-size: 1.4rem; color: var(--sub);}
@media (min-width: 64em) {.detail {grid-template-columns: 1.15fr 1fr; gap: 9.6rem;}}
.shapes {display: grid; gap: 2rem;}
.shape {padding: 3.2rem; border: 1px solid var(--line); background: #fff; transition: border-color .3s, transform .4s var(--ease);}
.shape:hover {border-color: var(--blue); transform: translateY(-.6rem);}
.shape svg {width: 6.4rem; height: 6.4rem; fill: none; stroke: var(--navy); stroke-width: 1.6;}
.shape h3 {margin-top: 2.4rem; font-size: 2.4rem;}
.shape .p-en {margin-top: .4rem;}
.shape p {margin-top: 1.2rem; color: var(--sub); font-size: 1.6rem;}
.shape .p-en {color: var(--blue);}
@media (min-width: 48em) {.shapes {grid-template-columns: repeat(3, 1fr); gap: 3.2rem;}}
.tbl-wrap {margin-top: 4rem; overflow-x: auto;}
.tbl {width: 100%; min-width: 64rem; border-collapse: collapse; font-size: 1.7rem;}
.tbl caption {padding-bottom: 1.6rem; text-align: left; font-size: 1.4rem; color: var(--sub);}
.tbl th, .tbl td {padding: 2rem 2.4rem; border-bottom: 1px solid var(--line); text-align: left;}
.tbl thead th {border-bottom: 1px solid var(--text); font-size: 1.5rem; color: var(--navy); background: var(--bg-alt);}
.tbl tbody th {font-weight: 700;}
.tbl td {color: var(--sub);}
.cta-band {display: grid; gap: 3.2rem; align-items: center; padding: clamp(4rem, 5vw, 9.6rem); color: #fff; background: var(--navy);}
.cta-band .display {font-size: clamp(4.8rem, 6vw, 10rem);}
.cta-band p {margin-top: 1.6rem; color: rgba(255, 255, 255, .72);}
@media (min-width: 64em) {.cta-band {grid-template-columns: 1fr auto;}}

/* ============================================================
   서브 히어로 / 현재 위치 / 하위 메뉴(탭)
   ============================================================ */
.sub-hero {position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(42rem, 44vw, 60rem); padding-block: calc(var(--hd-h) + 4rem) 6rem; color: #fff; background: var(--navy);}
.sub-hero > .bg {position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s var(--ease);}
.is-loaded .sub-hero > .bg {transform: none;}
.sub-hero::before {content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 14, 28, .86) 0%, rgba(8, 14, 28, .5) 55%, rgba(8, 14, 28, .1) 100%), linear-gradient(0deg, rgba(8, 14, 28, .5) 0%, rgba(8, 14, 28, 0) 40%);}
.sub-hero.is-plain {min-height: 30rem; padding-block: calc(var(--hd-h) + 3rem) 4rem;}
.sub-hero.is-plain::before {display: none;}
.sub-hero-in {position: relative;}
.sub-hero .eyebrow {margin-top: 3.2rem; color: rgba(255, 255, 255, .8);}
.sub-hero .hero-ko {margin-top: 1.6rem; font-size: clamp(3.6rem, 4.2vw, 7.2rem); font-weight: 700; line-height: 1.2; letter-spacing: -.03em;}
.sub-hero .hero-desc {max-width: 62rem; margin-top: 2rem;}
.sub-ghost {position: absolute; right: 0; bottom: -1.2rem; display: none; max-width: 100%; font-family: var(--font-en); font-size: clamp(8rem, 12vw, 22rem); line-height: .9; text-transform: uppercase; color: transparent; -webkit-text-stroke: .15rem rgba(255, 255, 255, .22); pointer-events: none;}
@media (min-width: 64em) {.sub-ghost {display: block;}}
.crumb ol {display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; font-size: 1.4rem; color: rgba(255, 255, 255, .72);}
.crumb li + li::before {content: '/'; margin-right: 1.2rem;}
.crumb a {display: inline-flex; align-items: center; min-height: 4.4rem;}
.crumb a:hover, .crumb a:focus-visible {color: #fff;}
.crumb [aria-current] {color: #fff;}
.sub-board {padding-block: 6rem 10rem;}

.sub-tabs {position: relative; z-index: 2; background: #fff; border-bottom: 1px solid var(--line);}
.sub-tabs ul {display: flex; width: min(100% - var(--gut) * 2, var(--max)); margin-inline: auto; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
.sub-tabs ul::-webkit-scrollbar {display: none;}
.sub-tabs li {flex: 0 0 auto;}
.sub-tabs li:first-child a {padding-left: 0;}
.sub-tabs a {display: flex; align-items: center; min-height: 6.4rem; padding: 0 2.6rem; border-bottom: .3rem solid transparent; font-size: 1.6rem; font-weight: 700; white-space: nowrap; color: var(--sub); transition: color .25s, border-color .25s, background .25s;}
.sub-tabs a:hover, .sub-tabs a:focus-visible {color: var(--text); background: var(--bg-alt);}
.sub-tabs a.is-on {color: var(--text); border-bottom-color: var(--blue);}
@media (max-width: 47.99em) {.sub-tabs a {padding: 0 1.8rem; font-size: 1.5rem;}}

/* ============================================================
   서브 공통 블록 (사업 영역 / 핵심 포인트 / 가공 단계)
   ============================================================ */
.sec-head {max-width: 78rem; margin-bottom: clamp(3.6rem, 4vw, 7.2rem);}
.sec-head .h-ko {margin-top: 2.4rem;}
.biz-grid {display: grid; gap: 4rem 3.2rem;}
@media (min-width: 48em) {.biz-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}}
.points {display: grid; gap: 0; border-top: 1px solid var(--text);}
.points li {display: grid; grid-template-columns: 7rem 1fr; gap: 1.6rem 2.4rem; padding-block: 3rem; border-bottom: 1px solid var(--line);}
.points b {font-family: var(--font-en); font-size: 2.8rem; font-weight: 400; color: var(--blue);}
.points strong {display: block; font-size: clamp(2.2rem, 1.6vw, 3rem);}
.points span {display: block; margin-top: .8rem; color: var(--sub); font-size: clamp(1.6rem, 1.05vw, 1.9rem);}
@media (min-width: 64em) {.points li {grid-template-columns: 9rem 28rem 1fr; align-items: baseline;} .points span {margin-top: 0;}}
.flow {display: grid; gap: 2rem;}
.flow li {padding: 3.2rem; border: 1px solid var(--line); background: #fff; transition: border-color .3s, transform .4s var(--ease);}
.flow li:hover {border-color: var(--blue); transform: translateY(-.6rem);}
.flow b {font-family: var(--font-en); font-size: 2.8rem; font-weight: 400; color: var(--blue);}
.flow strong {display: block; margin-top: 2rem; font-size: 2.4rem;}
.flow span {display: block; margin-top: 1rem; color: var(--sub); font-size: 1.6rem;}
@media (min-width: 48em) {.flow {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (min-width: 80em) {.flow {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2rem;}}
.sec-cta {padding-block: 0 var(--sec-y);}