@charset "utf-8";

/* ============================================================
   공통 컴포넌트
   ============================================================ */
#main-content {
  overflow: clip;
}
#main-content section {
  scroll-margin-top: var(--header-height);
}

body.main {--title-size: 4.8rem; --title-ls: -.18rem; --title-lh: 1.25;}
body.sub {--title-size: 4.4rem; --title-ls: 0; --title-lh: 1.28;}

.section-label {display: flex;align-items: center;gap: 1rem;font-size: 1.4rem;font-weight: 700;letter-spacing: .14rem;text-transform: uppercase;color: var(--color-text-sub);margin-bottom: 2rem;}
.section-label::before {content: ''; flex: 0 0 2.8rem; height: .3rem; background: var(--color-primary);}
.section-label.is-orange {color: var(--color-primary-dark);}
.section-label.is-orange::before {display: none;}
.section-label.is-dark {color: rgba(255,255,255,.72);}
.sub .section-label {font-size: 1.3rem; letter-spacing: 0;}

.section-header {display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem; margin-bottom: 4.4rem;}
.section-header > div {max-width: 79rem;margin-bottom: 3rem;}
.section-header.is-col {flex-direction: column; align-items: flex-start; gap: 2rem; margin-bottom: 0;}

.section-title {margin-top: 2rem; font-size: var(--title-size); font-weight: 700; line-height: var(--title-lh); letter-spacing: var(--title-ls);}
.section-header.is-col .section-title {margin-top: 0;}

.section-desc {max-width: 45rem; font-size: 1.6rem; line-height: 1.75; color: var(--color-text-sub);}
.main .section-desc,
.is-col .section-desc {font-size: 1.8rem;}
.sub .is-col .section-desc {font-size: 1.7rem;}
.is-col .section-desc {max-width: none;}

.link-more {display: inline-flex; align-items: center; gap: 1rem; font-size: 1.5rem; font-weight: 700; color: var(--color-text); transition: color var(--transition-base);}
.main .link-more {font-size: 1.6rem;}
.link-more:hover,
.link-more:focus-visible {color: var(--color-primary);}
.link-more .ico {width: 1.7rem; height: 1.7rem; transition: transform var(--transition-base);}
.link-more:hover .ico {transform: translateX(.4rem);}
.link-more.is-light {color: #fff;}

.note {font-size: 1.2rem; color: var(--color-text-mute);}
.icon-box,
.icon-circle {display: grid; place-items: center; flex: 0 0 auto;}

.btn-dark {display: inline-flex; align-items: center; justify-content: center; gap: 1.6rem; min-height: 5.6rem; padding: 0 2.4rem; border: 1px solid var(--color-dark); border-radius: .4rem; font-size: 1.6rem; font-weight: 700; color: #fff; background: var(--color-dark); transition: background var(--transition-base), color var(--transition-base);}
.btn-dark:hover,
.btn-dark:focus-visible {color: var(--color-dark); background: #fff;}
.btn-dark .ico {width: 1.7rem; height: 1.7rem;}


/* ============================================================
   이미지 공통
   ============================================================ */

.main-visual,
.sub-hero,
.tech-visual,
.esg-visual,
.about-visual,
.overview-visual,
.proj-card,
.cta-box {position: relative; isolation: isolate; overflow: hidden;}

.main-visual > .bg,
.sub-hero > .bg,
.tech-visual > img,
.esg-visual > img,
.about-visual > img,
.overview-visual > img,
.proj-card > img,
.cta-box > img {position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;}

.main-visual::before,
.sub-hero::before,
.tech-visual::before,
.esg-visual::before,
.about-visual::before,
.overview-visual::before,
.proj-card::before,
.cta-career::before {content: ''; position: absolute; inset: 0; z-index: -1;}


/* ============================================================
   히어로
   ============================================================ */

.main-visual,
.sub-hero {display: flex; flex-direction: column; justify-content: space-between; color: #fff;}

.main-visual {min-height: 74rem; padding: 10.4rem var(--edge-x) 4.4rem;}
.sub-hero {min-height: 67rem; padding: 9.4rem var(--edge-x) 4.2rem;}

.main-visual::before {background: linear-gradient(90deg, rgba(17,21,24,.85) 0%, rgba(17,21,24,.3) 49.88%, rgba(17,21,24,.08) 86%);}
.sub-hero::before {background: linear-gradient(90deg, rgba(17,21,24,.88) 0%, rgba(17,21,24,.44) 51%, rgba(17,21,24,.07) 88%);}

.hero-msg {display: flex; flex-direction: column; align-items: flex-start; gap: 2.6rem; max-width: 82rem;}
.sub-hero .hero-msg {gap: 2.5rem; max-width: 85rem;}

.eyebrow {display: flex; align-items: center; gap: 1rem; font-size: 1.4rem; font-weight: 700; letter-spacing: .16rem;}
.sub-hero .eyebrow {font-size: 1.3rem; letter-spacing: 0;}
.eyebrow .bar {display: block; width: 3.6rem; height: .3rem; background: var(--color-primary);}

.hero-title {font-size: 7.6rem; font-weight: 700; line-height: 1.17; letter-spacing: -.35rem;}
.sub-hero .hero-title {font-size: 6.8rem; line-height: 1.18; letter-spacing: 0;}

.hero-desc {max-width: 59rem; font-size: 2.3rem; line-height: 1.65; color: rgba(255,255,255,.8);}
.sub-hero .hero-desc {max-width: 65rem; font-size: 2.2rem; color: rgba(255,255,255,.82);}

.hero-foot {display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;}
.sub-hero .hero-foot {align-items: center; font-size: 1.3rem;}

.progress {display: flex; align-items: center; gap: 1.4rem; font-family: var(--font-mono); font-size: 1.4rem;}
.progress b {font-weight: 700;}
.progress i {color: rgba(255,255,255,.6);}
.progress .line {position: relative; width: 11.2rem; height: .2rem; background: rgba(255,255,255,.27);}
.progress .line::after {content: ''; position: absolute; inset: 0 auto 0 0; width: 33.3%; background: #fff;}

.proj-link {display: inline-flex; align-items: center; gap: 1.4rem; font-size: 1.6rem; font-weight: 700; transition: opacity .22s ease;}
.proj-link .ico {width: 1.8rem; height: 1.8rem; transition: transform var(--transition-base);}
.proj-link:hover .ico {transform: translate(.3rem, -.3rem);}
.proj-link span {display: inline-block;}
.proj-link.is-swap {opacity: 0;}

.crumb ol {display: flex; gap: 1.2rem; color: rgba(255,255,255,.72);}
.crumb li + li::before {content: '/'; margin-right: 1.2rem;}
.crumb a:hover {color: #fff;}
.crumb [aria-current] {color: #fff;}

.biz-nav {display: flex; gap: 2.2rem; color: rgba(255,255,255,.5);}
.biz-nav .is-next {font-weight: 700; color: #fff;}
.biz-nav a:hover {color: #fff;}


/* ============================================================
   핵심 실적
   ============================================================ */

.glance {padding: 8.4rem 0;}
.glance .inner {display: flex;}

.glance-intro {display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 29.8rem; padding-right: 4.8rem; border-right: 1px solid var(--color-line);}
.glance-title {margin-top: 1.6rem; font-size: 3rem; font-weight: 700; line-height: 1.3; letter-spacing: -.1rem;}
.glance-intro .note {margin-top: 3rem; font-size: 1.3rem;}

.glance-list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; min-width: 0;}
.glance-list li {display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-height: 22.2rem; padding: 0 2.8rem;}
.glance-list li + li {border-left: 1px solid var(--color-line);}
.glance-list .top {display: flex; flex-direction: column; gap: 2rem;}

.glance-list .icon-box {width: 5rem; height: 5rem; border-radius: 50%; color: var(--color-primary); background: #fff4ee;}
.glance-list .icon-box .ico {width: 2rem; height: 2rem;}

.num {display: flex; align-items: baseline; flex-wrap: wrap; gap: .7rem; line-height: 1;}
.num strong {font-family: var(--font-mono); font-size: 5.6rem; font-weight: 600; letter-spacing: -.2rem;}
.num .unit {font-size: 1.8rem; font-weight: 700; color: var(--color-primary-dark);}

.glance-list .txt h3 {font-size: 2rem;font-weight: 700;}
.glance-list .txt p {margin-top: .8rem; font-size: 1.6rem; color: var(--color-text-mute);}

.glance.is-warm {padding: 7.8rem 0; background: var(--color-bg-warm);}
.glance.is-warm .glance-intro {flex-basis: 29.3rem;}
.glance-list.is-plain li {min-height: 20.4rem;}
.glance-list.is-plain .num strong {font-size: 4.8rem; letter-spacing: 0;}
.glance-list.is-plain .num .unit {font-size: 1.3rem;}
.glance-list.is-plain .txt h3 {font-size: 1.6rem;}
.glance-list.is-plain .txt p {margin-top: .7rem; font-size: 1.2rem;}


/* ============================================================
   사업 카드
   ============================================================ */

.biz-area {padding: 8.8rem 0; background: linear-gradient(180deg, #f6f3ed 0%, #efeae2 58%, #e6ded3 100%);}
.biz-area .section-header {margin-bottom: 4.8rem;}

.biz-cards {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem;}
.biz-cards a {display: flex; flex-direction: column; height: 45rem; overflow: hidden; border: 1px solid #e7e5e0; border-radius: .4rem; background: #fff; box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.04); transition: transform var(--transition-base), box-shadow var(--transition-base);}
.biz-cards a:hover,
.biz-cards a:focus-visible {transform: translateY(-.6rem); box-shadow: 0 1.2rem 2.8rem rgba(0,0,0,.12);}

.biz-cards .thumb {flex: 0 0 26rem; overflow: hidden;}
.biz-cards .thumb img {width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;}
.biz-cards a:hover .thumb img {transform: scale(1.05);}

.biz-cards .info {display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2rem 2.2rem;}
.biz-cards .row {display: flex; align-items: center; justify-content: space-between;}
.biz-cards .idx {font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; color: var(--color-primary-dark);}
.biz-cards .ico {width: 1.7rem; height: 1.7rem;}
.biz-cards h3 {font-size: 2.6rem; line-height: 1.3;}
.biz-cards .info p:not(.row):not(.en) {margin-top: .8rem; font-size: 1.5rem; line-height: 1.55; color: var(--color-text-sub);}

.biz-cards.is-tall a {height: 47rem; box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.07);}
.biz-cards.is-tall .thumb {flex-basis: 27.5rem;}
.biz-cards.is-tall .idx {font-size: 1.2rem; font-weight: 700;}
.biz-cards.is-tall h3 {font-size: 2.5rem;}

.biz-cards .en {margin-top: .7rem; font-size: 1.1rem; font-weight: 700; letter-spacing: .04rem; color: var(--color-text-mute);}
.biz-cards.is-tall .info p:not(.row):not(.en) {margin-top: .7rem; font-size: 1.4rem;}

.portfolio {padding: 8.8rem 0 9.6rem; background: linear-gradient(180deg, #f6f3ed, #e8e1d7);}
.portfolio .section-header {margin-bottom: 4.6rem;}


/* ============================================================
   프로젝트 갤러리
   ============================================================ */

.projects {padding: 8.8rem 0 9.2rem;}
.main .projects {padding: 8.8rem 0;}

.proj-gallery {display: grid; grid-template-columns: minmax(0, 1fr) 44rem; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2rem; height: 64rem;}
.main .proj-gallery {height: 67rem;}
.proj-gallery > li:first-child {grid-row: 1 / 3;}

.proj-card {display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 2.4rem; border-radius: .4rem; color: #fff;}
.proj-gallery > li:first-child .proj-card {padding: 3rem;}
.proj-card::before {background: linear-gradient(180deg, rgba(17,21,24,.03) 15%, rgba(17,21,24,.3) 64.3%, rgba(17,21,24,.88) 100%);}
.proj-card > img {transition: transform .6s ease;}
.proj-card:hover > img {transform: scale(1.04);}

.proj-card .tag {align-self: flex-start; padding: .7rem 1.2rem; border-radius: .4rem; font-size: 1.1rem; font-weight: 700; letter-spacing: .08rem; background: rgba(17,21,24,.66);}
.main .proj-card .tag {font-size: 1.2rem;}

.proj-card .meta {display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;}
.proj-card .name {display: flex; flex-direction: column; gap: .7rem; min-width: 0;}
.proj-card .name strong {font-size: 2.1rem; line-height: 1.25;}
.proj-card .name em {font-size: 1.3rem; color: rgba(255,255,255,.72);}
.proj-gallery > li:first-child .name strong {font-size: 2.7rem;}

.main .proj-card .name {gap: .9rem;}
.main .proj-card .name strong {font-size: 2.4rem; letter-spacing: -.1rem;}
.main .proj-card .name em {font-weight: 500;}
.main .proj-gallery > li:first-child .name strong {font-size: 3.6rem;}

.proj-card .go {display: grid; place-items: center; flex: 0 0 auto; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--color-primary); transition: transform var(--transition-base);}
.main .proj-card .go {width: 4.4rem; height: 4.4rem;}
.proj-card .go .ico {width: 1.6rem; height: 1.6rem;}
.main .proj-card .go .ico {width: 1.8rem; height: 1.8rem;}
.proj-card:hover .go {transform: translate(.2rem, -.2rem);}


/* ============================================================
   기술 · 안전
   ============================================================ */

.tech{background: var(--color-dark);}
.tech .inner{display: grid;grid-template-columns: 60rem minmax(0, 1fr);min-height: 71rem;color: #fff;background: var(--color-dark);justify-content: space-between;}
.tech-visual {display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; padding: 3rem;}
.tech-visual::before {background: rgba(17,21,24,.26);}
.tech-visual .badge {display: inline-flex; align-self: flex-start; align-items: center; gap: .8rem; padding: .9rem 1.4rem; border-radius: .4rem; font-size: 1.2rem; font-weight: 700; color: var(--color-dark); background: rgba(255,255,255,.91);}
.tech-visual .badge .ico {width: 1.6rem; height: 1.6rem; color: var(--color-primary-dark);}
.tech-visual .caption {max-width: 36rem;font-size: 1.8rem;line-height: 1.55;color: rgba(255,255,255,.9);}

.main .tech-visual {padding: 3.6rem;}
.main .tech-visual .badge {border-radius: 0; font-size: 1.3rem;}
.main .tech-visual .caption {max-width: 32rem; line-height: 1.5;}

.tech-body {display: flex; flex-direction: column; gap: 4.2rem; min-width: 0; padding: 7.8rem var(--page-gutter) 6.8rem;}
.main .tech-body {gap: 4.6rem; padding: 8rem var(--page-gutter) 7.2rem;}

.tech .section-title {color: #fff;}
.tech .section-desc {color: rgba(255,255,255,.72);}

.tech-list {display: flex; flex: 1; flex-direction: column;}
.tech-list li {display: flex; flex: 1; border-top: 1px solid rgba(255,255,255,.14);}
.tech-list li:last-child {border-bottom: 1px solid rgba(255,255,255,.14);}
.main .tech-list li:last-child {border-bottom: 0;}

.tech-list a {display: flex; align-items: center; gap: 2rem; width: 100%; min-height: 7.2rem; padding: 1.8rem 0; transition: background var(--transition-base), padding var(--transition-base);}
.tech-list a:hover,
.tech-list a:focus-visible {padding-inline: 1.2rem; background: rgba(255,255,255,.04);}

.tech-list .icon-box {width: 4.2rem; height: 4.2rem; background: rgba(255,255,255,.06);}
.tech-list .icon-box .ico {width: 2rem; height: 2rem;}
.tech-list strong {flex: 0 0 16rem; font-size: 2rem;}
.tech-list .desc {flex: 1; min-width: 0; font-size: 1.5rem; line-height: 1.6; color: rgba(255,255,255,.6);}
.tech-list .arr {width: 1.7rem; height: 1.7rem; color: rgba(255,255,255,.8);}

.tech-list.is-num .idx {flex: 0 0 3.4rem; font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; color: var(--color-primary);}
.tech-list.is-num strong {flex: 1; min-width: 0; font-size: 1.8rem;}

.tech-list.is-cap li {align-items: stretch;}
.tech-list.is-cap .row {display: flex; align-items: center; gap: 2rem; width: 100%; padding: 1.7rem 0;}
.tech-list.is-cap .icon-circle {width: 4.2rem; height: 4.2rem; border-radius: 50%; background: rgba(255,255,255,.05);}
.tech-list.is-cap .icon-circle .ico {width: 1.9rem; height: 1.9rem;}
.tech-list.is-cap .txt {display: flex; flex: 1; flex-direction: column; gap: .5rem; min-width: 0;}
.tech-list.is-cap strong {flex: none; font-size: 1.8rem;}
.tech-list.is-cap .desc {flex: none; font-size: 1.4rem; color: rgba(255,255,255,.5);}
.tech-list.is-cap .idx {font-family: var(--font-mono); font-size: 1.2rem; color: rgba(255,255,255,.5);}


/* ============================================================
   ESG
   ============================================================ */

.esg {padding: 8.8rem 0; background: #f2f1ee;}
.esg .inner {display: grid;grid-template-columns: 60rem minmax(0, 1fr);gap: 5rem;}
.esg-body {display: flex; flex-direction: column; justify-content: space-between; gap: 4rem;}

.esg-list {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 2rem;}
.esg-list li {display: flex;flex-direction: column;justify-content: space-between;gap: 3rem;min-height: 15rem;padding: 1.4rem 1.2rem 1.4rem 1.6rem;border-block: 1px solid var(--color-line);}
.esg-list .head {display: flex;align-items: center;justify-content: space-between;gap: .8rem;font-size: 1.6rem;font-weight: 700;}
.esg-list .head b {font-family: var(--font-mono); color: var(--color-primary-dark);}
.esg-list .val {font-family: var(--font-mono);font-size: 3.8rem;font-weight: 700;line-height: 1.2;}
.esg-list .cap {margin-top: .4rem;font-size: 1.3rem;line-height: 1.5;color: var(--color-text-sub);}

.esg-visual {display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-height: 52rem; padding: 2.8rem; border-radius: .4rem; color: #fff;}
.esg-visual::before {background: linear-gradient(180deg, rgba(23,33,27,0) 35%, rgba(23,33,27,.75) 100%);}
.esg-visual .pill {display: inline-flex; align-self: flex-start; align-items: center; gap: .7rem; padding: .8rem 1.3rem; border-radius: 99.9rem; font-size: 1.2rem; font-weight: 700; color: #2f6d57; background: rgba(255,255,255,.91);}
.esg-visual .pill .ico {width: 1.5rem; height: 1.5rem;}
.esg-visual .cap {display: flex; flex-direction: column; gap: .8rem;}
.esg-visual .cap strong {font-size: 2.6rem;}
.esg-visual .cap span {font-size: 1.4rem; color: rgba(255,255,255,.72);}


/* ============================================================
   기업 소개
   ============================================================ */

.about {display: grid; grid-template-columns: 72rem minmax(0, 1fr); min-height: 62rem; padding-left: max(0px, calc((100% - var(--container-width)) / 2));}
.about-body {display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; padding: 8rem var(--page-gutter) 7.6rem;}
.about-foot {display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;}

.quote blockquote {font-size: 2.6rem;font-weight: 700;line-height: 1.55;margin: 0;color: #ffc964;text-align: right;}
.quote figcaption {margin-top: 1rem;font-size: 1.7rem;color: var(--color-text-mute);display: none;}

.about-visual {display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; padding: 3.2rem; color: #fff;}
.about-visual::before {background: linear-gradient(180deg, rgba(17,21,24,0) 40%, rgba(17,21,24,.66) 100%);}
.about-visual .since {font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600;}
.about-visual .values {display: flex; gap: 2.8rem; font-size: 1.7rem; font-weight: 700;}
.about-visual .values li::before {content: ''; display: block; width: 2.4rem; height: .2rem; margin-bottom: .7rem; background: var(--color-primary);}


/* ============================================================
   뉴스
   ============================================================ */

.news {padding: 8rem 0; background: #f2f1ee;}
.news .section-header {margin-bottom: 4.2rem;}
.news-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem;}

.news-list a {display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; height: 100%; min-height: 31rem; padding: 2.6rem; border-radius: .4rem; background: #fff; transition: transform var(--transition-base), box-shadow var(--transition-base);}
.news-list a:hover,
.news-list a:focus-visible {transform: translateY(-.5rem); box-shadow: 0 1.2rem 2.8rem rgba(0,0,0,.1);}

.news-list .meta {display: flex; align-items: center; justify-content: space-between;}
.news-list .cate {padding: .6rem 1rem;border-radius: 99.9rem;font-size: 1.4rem;font-weight: 700;color: var(--color-primary-dark);background: #fff0e9;}
.news-list time {font-family: var(--font-mono); font-size: 1.2rem; color: var(--color-text-mute);}
.news-list h3 {font-size: 2.4rem;line-height: 1.45;}
.news-list .txt p {margin-top: 1.2rem;font-size: 1.7rem;line-height: 1.65;color: var(--color-text-sub);}
.news-list .more {display: flex; align-items: center; justify-content: space-between;}
.news-list .more .line {flex: 1; height: 1px; background: var(--color-line);}
.news-list .more .go {display: grid; place-items: center; width: 3.4rem; height: 3.4rem;}
.news-list a:hover .go {color: var(--color-primary);}


/* ============================================================
   사업 개요
   ============================================================ */

.overview {padding: 9.6rem 0;}
.overview .inner {display: grid; grid-template-columns: 56rem minmax(0, 1fr); gap: 7.8rem; min-height: 41.8rem;}
.overview-body {display: flex; flex-direction: column; justify-content: space-between; gap: 4rem;}

.overview-visual {display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-height: 36rem; padding: 2.8rem; border-radius: .4rem; color: #fff;}
.overview-visual::before {background: linear-gradient(180deg, rgba(17,21,24,0) 51.25%, rgba(17,21,24,.72) 100%);}
.overview-visual .tag {font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700;}
.overview-visual .cap {max-width: 36rem; font-size: 1.7rem; font-weight: 700; line-height: 1.5;}
.overview-visual .cap.is-lg {max-width: 38rem; font-size: 2.4rem; line-height: 1.45;}

.keywords {display: flex; flex-wrap: wrap; gap: 1.4rem;}
.keywords li {padding: .9rem 1.5rem; border-radius: 99.9rem; font-size: 1.3rem; font-weight: 700; color: var(--color-primary-dark); background: var(--color-primary-soft);}


/* ============================================================
   서비스 범위
   ============================================================ */

.scope {padding: 8.4rem 0 8.8rem; background: var(--color-bg-warm);}
.scope-list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem;}

.scope-list a {display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; height: 100%; min-height: 31rem; padding: 2.6rem; border: 1px solid #e7e5e0; border-radius: .4rem; background: #fff; box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.07); transition: transform var(--transition-base), box-shadow var(--transition-base);}
.scope-list a:hover,
.scope-list a:focus-visible {transform: translateY(-.6rem); box-shadow: 0 1.4rem 3rem rgba(0,0,0,.12);}

.scope-list .top {display: flex; align-items: flex-start; justify-content: space-between;}
.scope-list .icon-circle {width: 5.2rem; height: 5.2rem; border-radius: 50%; color: var(--color-primary); background: #fff1eb;}
.scope-list .icon-circle .ico {width: 2.6rem; height: 2.6rem;}
.scope-list .idx {font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; color: var(--color-text-mute);}
.scope-list h3 {font-size: 2.3rem;}
.scope-list .txt p {margin-top: 1.2rem; font-size: 1.4rem; line-height: 1.65; color: var(--color-text-sub);}
.scope-list .arr {width: 1.7rem; height: 1.7rem;}


/* ============================================================
   프로세스
   ============================================================ */

.process {padding: 8.4rem 0 8.8rem; background: var(--color-bg-warm);}
.process .section-header {margin-bottom: 5rem;}
.process-list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));}

.process-list li {display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-height: 23rem; padding: 2.4rem 2.4rem 2.2rem; border: solid var(--color-line); border-width: 1px 1px 1px 0; background: #fff;}
.process-list li:first-child {border: 1px solid var(--color-primary); color: #fff; background: var(--color-primary);}
.process-list .top {display: flex; align-items: flex-start; justify-content: space-between;}
.process-list .idx {font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--color-primary-dark);}
.process-list li:first-child .idx {color: #fff;}
.process-list .ico {width: 1.7rem; height: 1.7rem;}
.process-list h3 {font-size: 2rem;}
.process-list .txt p {margin-top: .9rem; font-size: 1.3rem; line-height: 1.6; color: var(--color-text-sub);}
.process-list li:first-child .txt p {color: rgba(255,255,255,.82);}


/* ============================================================
   실적
   ============================================================ */

.perf {padding: 8rem 0 8.4rem;}
.perf .section-header {margin-bottom: 4.2rem;}
.perf-list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));}

.perf-list li {display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-height: 19rem; padding: 0 2.8rem;}
.perf-list li + li {border-left: 1px solid var(--color-line);}
.perf-list .num strong {font-size: 4.8rem; letter-spacing: 0;}
.perf-list .num .unit {font-size: 1.3rem;}
.perf-list h3 {font-size: 1.6rem;}
.perf-list .txt p {margin-top: .7rem; font-size: 1.2rem; color: var(--color-text-mute);}


/* ============================================================
   CTA
   ============================================================ */

.cta {display: grid; grid-template-columns: minmax(0, 1fr) 52rem; min-height: 36rem;}
.main .cta {grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 40rem;}

.cta-box {display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; padding: 5.6rem 6.4rem; color: #fff;}
.cta-career {padding-inline: var(--edge-x);}
.cta-career::before {background: rgba(17,21,24,.79);}
.main .cta-box {padding: 6rem var(--page-gutter);}
.main .cta-career::before {background: rgba(17,21,24,.76);}
.main .cta-career {padding-left: var(--edge-x);}
.main .cta-inquiry {padding-right: var(--edge-x);}
.cta-inquiry {background: var(--color-primary);}

.cta .label {font-size: 1.3rem; font-weight: 700; letter-spacing: .14rem;}
.cta-career .label {color: var(--color-primary);}
.cta-inquiry .label {color: rgba(255,255,255,.82);}

.cta .msg h2 {font-size: 3.4rem; line-height: 1.32;}
.main .cta .msg h2 {font-size: 4rem;line-height: 1.3;letter-spacing: -.12rem;}
.cta .msg p {margin-top: 1.6rem; font-size: 1.6rem; color: rgba(255,255,255,.72);}
.main .cta .msg p {margin-top: 1.8rem;}
.main .cta-inquiry .msg p {color: rgba(255,255,255,.82);}

.cta .go {display: inline-flex;align-items: center;align-self: flex-start;gap: 1rem;font-size: 1.7rem;font-weight: 700;}
.cta .go .ico {width: 1.7rem; height: 1.7rem; transition: transform var(--transition-base);}
.cta .go:hover .ico {transform: translateX(.5rem);}


/* ============================================================
   반응형 - 1280px
   ============================================================ */

@media (max-width: 79.999em) {

  .hero-title {font-size: clamp(4.8rem, 5.8vw, 7.6rem); letter-spacing: -.2rem;}
  .sub-hero .hero-title {font-size: clamp(4.4rem, 5.2vw, 6.8rem);}

  .tech .inner {grid-template-columns: 44rem minmax(0, 1fr);}
  .tech-list strong {flex-basis: 13rem; font-size: 1.8rem;}

  .esg .inner {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem;}
  .about {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .overview .inner {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem;}

  .proj-gallery {grid-template-columns: minmax(0, 1fr) 34rem;}

  .glance-list li,
  .perf-list li {padding: 0 0 0 2rem;}

  .num strong {font-size: 4.8rem;}
  .glance-intro {flex-basis: 24rem; padding-right: 3rem;}
  .glance.is-warm .glance-intro {flex-basis: 24rem;}

  .cta {grid-template-columns: minmax(0, 1fr) 42rem;}

}


/* ============================================================
   반응형 - 1024px
   ============================================================ */

@media (max-width: 63.999em) {

  .main-visual {min-height: 62rem; padding-top: 12rem;}
  .sub-hero {min-height: 56rem; padding-top: 11rem;}

  .hero-title,
  .sub-hero .hero-title {font-size: clamp(3.6rem, 6.4vw, 5.6rem); letter-spacing: -.1rem;}

  .hero-desc,
  .sub-hero .hero-desc {font-size: 2rem;}

  .section-title {font-size: clamp(3rem, 4.6vw, 4.4rem);}

  .section-header {flex-direction: column; align-items: flex-start; gap: 2rem; margin-bottom: 3.6rem;}

  .biz-area,
  .projects,
  .main .projects,
  .portfolio,
  .esg,
  .overview,
  .scope,
  .process,
  .perf,
  .news {padding-block: 7rem;}

  .glance .inner {flex-direction: column; gap: 4rem;}
  .glance-intro {flex: none; flex-direction: row; align-items: flex-end; padding: 0 0 3rem; border-right: 0; border-bottom: 1px solid var(--color-line);}
  .glance-intro .note {margin-top: 0;}
  .glance-list {grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4rem;}
  .glance-list li:nth-child(odd) {padding-left: 0; border-left: 0;}
  .glance-list li {min-height: 0;}

  .biz-cards,
  .scope-list {grid-template-columns: repeat(2, minmax(0, 1fr));}

  .biz-cards a,
  .biz-cards.is-tall a {height: auto;}

  .biz-cards .thumb,
  .biz-cards.is-tall .thumb {flex-basis: auto; aspect-ratio: 4 / 3;}

  .proj-gallery,
  .main .proj-gallery {grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 48rem 30rem; height: auto;}

  .proj-gallery > li:first-child {grid-column: 1 / 3; grid-row: 1;}

  .tech .inner {grid-template-columns: minmax(0, 1fr); min-height: 0; padding-inline: 0;}
  .tech-visual {min-height: 40rem;}

  .tech-body,
  .main .tech-body {padding-block: 6rem;}

  .esg .inner,
  .overview .inner,
  .about {grid-template-columns: minmax(0, 1fr);}

  .esg-visual,
  .overview-visual {min-height: 40rem;}

  .about-visual {min-height: 40rem;}
  .about-body {padding-block: 6rem;}

  .news-list {grid-template-columns: minmax(0, 1fr);}
  .news-list a {min-height: 0;}

  .process-list {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .process-list li {min-height: 20rem; border-width: 1px; border-left-width: 1px;}
  .process-list li:first-child {border-width: 1px;}

  .perf-list {grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4rem;}
  .perf-list li:nth-child(odd) {padding-left: 0; border-left: 0;}
  .perf-list li {min-height: 0;}

  .cta,
  .main .cta {grid-template-columns: minmax(0, 1fr); min-height: 0;}

  .cta-box,
  .main .cta-box {min-height: 32rem; padding-block: 5rem;}

  .hero-slide {min-height: 62rem; padding-top: 12rem;}

}


/* ============================================================
   반응형 - 768px
   ============================================================ */

@media (max-width: 47.999em) {

  .main-visual {min-height: 54rem; padding-bottom: 3rem;}
  .sub-hero {min-height: 50rem; padding-bottom: 3rem;}

  .hero-msg,
  .sub-hero .hero-msg {gap: 1.8rem;}

  .hero-title,
  .sub-hero .hero-title {font-size: 3.4rem; line-height: 1.25;}

  .hero-title br {display: none;}

  .hero-desc,
  .sub-hero .hero-desc {font-size: 1.7rem;}

  .hero-foot {flex-direction: column; align-items: flex-start;}
  .sub-hero .hero-foot {align-items: flex-start;}

  .section-title {font-size: 3rem;}

  .biz-area,
  .projects,
  .main .projects,
  .portfolio,
  .esg,
  .overview,
  .scope,
  .process,
  .perf,
  .news,
  .glance,
  .glance.is-warm {padding-block: 5.6rem;}

  .glance-intro {flex-direction: column; align-items: flex-start; gap: 1.6rem;}

  .num strong,
  .glance-list.is-plain .num strong,
  .perf-list .num strong {font-size: 3.8rem;}

  .biz-cards,
  .scope-list,
  .process-list {grid-template-columns: minmax(0, 1fr);}

  .proj-gallery,
  .main .proj-gallery {grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: 32rem;}

  .proj-gallery > li:first-child {grid-column: auto; grid-row: auto;}

  .main .proj-gallery > li:first-child .name strong,
  .proj-gallery > li:first-child .name strong {font-size: 2.6rem;}

  .tech-list a {flex-wrap: wrap; gap: 1rem 1.6rem;}
  .tech-list strong {flex: 1;}
  .tech-list .desc {flex-basis: 100%; order: 4;}
  .tech-list .arr {order: 3;}

  .esg-list {grid-template-columns: minmax(0, 1fr);}
  .esg-list li {min-height: 0; border-top-width: 0;}
  .esg-list li:first-child {border-top-width: 1px;}

  .about-foot {flex-direction: column; align-items: flex-start;}

  .scope-list a,
  .process-list li {min-height: 0;}

  .cta .msg h2,
  .main .cta .msg h2 {font-size: 2.8rem;}

  .cta .msg h2 br {display: none;}

  .hero-slide {min-height: 54rem; padding-bottom: 14rem;}
  .main-slider .hero-foot {bottom: 3rem; flex-direction: column; align-items: flex-start; gap: 1.6rem;}

  .hero-ctl {flex-wrap: wrap;}
  .hero-btn {width: 4rem; height: 4rem;}

  .hero-play::before,
  .hero-play::after {top: 1.3rem;}

  .hero-play::before {left: 1.4rem;}
  .hero-play::after {left: 2.3rem;}

  .quick a:hover,
  .quick button:hover {transform: none;}

  .about-ctl {flex-wrap: wrap;}
  .about-bullets {order: 3; width: 100%; margin-right: 0;}

}


/* ============================================================
   서브 히어로 애니메이션
   ============================================================ */

@keyframes heroRise {
  from {opacity: 0; transform: translateY(3.2rem);}
  to {opacity: 1; transform: none;}
}

@keyframes heroZoom {
  from {transform: scale(1.14);}
  to {transform: scale(1);}
}

.sub-hero > .bg {animation: heroZoom 9s ease-out both;}
.sub-hero .hero-msg > * {animation: heroRise .9s ease both;}
.sub-hero .hero-msg > :nth-child(2) {animation-delay: .2s;}
.sub-hero .hero-msg > :nth-child(3) {animation-delay: .4s;}
.sub-hero .hero-foot {animation: heroRise .9s ease .6s both;}


/* ============================================================
   공통 인터랙션
   ============================================================ */

.fx-progress {position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: .3rem; background: var(--color-primary); transform: scaleX(0); transform-origin: left; pointer-events: none;}

#header {transition: transform .4s ease, box-shadow .3s;}
#header.is-hide {transform: translateY(-100%);}

.fx-reveal {opacity: 0; transform: translateY(3.6rem); transition: opacity .8s ease, transform .8s ease; transition-delay: var(--d, 0s);}
.fx-reveal.is-in {opacity: 1; transform: none;}

.fx-parallax {scale: 1.14; will-change: transform;}

.cta-box > img {transition: scale .8s ease;}
.cta-box:hover > img {scale: 1.06;}

.tech-visual .badge,
.esg-visual .pill {transition: transform .35s ease;}

.tech-visual:hover .badge,
.esg-visual:hover .pill {transform: translateY(-.6rem);}

.glance-list li,
.perf-list li,
.esg-list li,
.values li {transition: transform .35s ease;}

.glance-list li:hover,
.perf-list li:hover {transform: translateY(-.8rem);}

.esg-list li:hover {transform: translateX(.8rem);}
.values li:hover {transform: translateY(-.5rem);}

.icon-box {transition: transform .35s ease;}

li:hover > .top .icon-box,
a:hover > .icon-box {transform: scale(1.1) rotate(-6deg);}

.btn-dark,
.link-more,
.cta .go {transition: transform .25s ease, background .25s, color .25s;}

.btn-dark:hover,
.cta .go:hover {transform: translateY(-.3rem);}

.footer-menu a,
.policy a {transition: color .2s, padding .2s;}

.footer-menu a:hover {padding-left: .6rem;}

.quick a,
.quick button {transition: transform .25s, background .25s, color .25s;}

.quick a:hover,
.quick button:hover {transform: translateX(-.4rem);}


/* ============================================================
   그누보드 연동
   ============================================================ */

.sub-hero.is-plain {min-height: 30rem; background: var(--color-dark);}
.sub-hero.is-plain::before {display: none;}

.sub-board {padding-block: 6rem 10rem;}

.site-footer .admin ul {display: flex; gap: 1.6rem;}
.site-footer .admin a {font-size: 1.3rem; color: rgba(255,255,255,.6);}
.site-footer .admin a:hover {color: #fff;}


/* ============================================================
   메인 히어로 슬라이드
   ============================================================ */

.main-slider {padding: 0;}
.main-slider::before {display: none;}

.visual-swiper {position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;}
.visual-swiper .swiper-wrapper {height: 100%;}

.hero-slide {position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; height: auto; min-height: 74rem; padding: 10.4rem var(--edge-x) 12rem; color: #fff;}
.hero-slide::before {content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17,21,24,.85) 0%, rgba(17,21,24,.3) 49.88%, rgba(17,21,24,.08) 86%);}

.hero-slide > .bg {position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 9s ease-out;}
.hero-slide.swiper-slide-active > .bg {transform: scale(1);}

.hero-slide .hero-msg > * {opacity: 0; transform: translateY(3.2rem); transition: opacity .9s ease, transform .9s ease;}
.hero-slide.swiper-slide-active .hero-msg > * {opacity: 1; transform: none;}
.hero-slide.swiper-slide-active .hero-msg > :nth-child(2) {transition-delay: .25s;}
.hero-slide.swiper-slide-active .hero-msg > :nth-child(3) {transition-delay: .5s;}

.hero-slide .eyebrow .bar {transform: scaleX(0); transform-origin: left; transition: transform .8s ease .6s;}
.hero-slide.swiper-slide-active .eyebrow .bar {transform: none;}

.main-slider .hero-foot {position: absolute; left: 0; right: 0; bottom: 4.4rem; z-index: 2; padding: 0 var(--edge-x);}

.hero-ctl {display: flex; align-items: center; gap: 1.6rem;}
.main-slider .progress .line::after {width: calc(var(--p, 0) * 100%);}

.hero-btn {display: inline-flex;align-items: center;justify-content: center;width: 4.4rem;height: 4.4rem;border: 1px solid rgba(255,255,255,.45);border-radius: 50%;background: transparent;color: #fff;cursor: pointer;transition: background .25s, color .25s, border-color .25s, transform .25s;flex-shrink: 0;}
.hero-btn .ico {width: 1.8rem; height: 1.8rem;}
.hero-btn:hover {background: #fff; color: var(--color-dark); border-color: #fff; transform: scale(1.08);}

.hero-prev .ico {transform: rotate(180deg);}

.hero-play {position: relative;}

.hero-play::before,
.hero-play::after {content: ''; position: absolute; top: 1.5rem; width: .3rem; height: 1.4rem; background: currentColor;}

.hero-play::before {left: 1.6rem;}
.hero-play::after {left: 2.5rem;}

.hero-play.is-paused::after {display: none;}
.hero-play.is-paused::before {left: 1.8rem; top: 1.4rem; width: 0; height: 0; background: none; border-left: 1.1rem solid currentColor; border-top: .8rem solid transparent; border-bottom: .8rem solid transparent;}


/* ============================================================
   기업 소개 이미지 슬라이드
   ============================================================ */

.about-swiper {position: absolute; inset: 0; z-index: -2;}
.about-swiper .swiper-slide {overflow: hidden;}
.about-swiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s ease-out;}
.about-swiper .swiper-slide-active img {transform: scale(1);}

.about-bottom {display: flex; flex-direction: column; gap: 2.8rem;}
.about-ctl {display: flex; align-items: center; gap: 1.4rem;}

.about-count {flex: 0 0 auto; white-space: nowrap; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600;}
.about-count i {font-style: normal; color: rgba(255,255,255,.6);}

.about-bullets {display: flex; flex: 1 1 auto; align-items: center; gap: .8rem; min-width: 0; margin-right: auto;}
.about-bullets .swiper-pagination-bullet {width: 4.4rem; height: .3rem; margin: 0 !important; padding: 0; border: 0; border-radius: 0; background: rgba(255,255,255,.35); opacity: 1; cursor: pointer; transition: background .3s, width .3s;}
.about-bullets .swiper-pagination-bullet:hover {background: rgba(255,255,255,.7);}
.about-bullets .swiper-pagination-bullet-active {width: 6.4rem; background: var(--color-primary);}


/* ============================================================
   기업 소개 문구 슬라이드
   ============================================================ */

.about-texts,
.about-quotes {display: grid;}

.about-text {grid-area: 1 / 1; display: flex; flex-direction: column; gap: 2rem; visibility: hidden; opacity: 0; transform: translateY(2.4rem); transition: opacity .5s ease, transform .5s ease, visibility 0s .5s;}
.about-text.is-on {visibility: visible; opacity: 1; transform: none; transition: opacity .7s ease .3s, transform .7s ease .3s, visibility 0s;}
.about-text .section-title {margin-top: 0;}

.about-quotes .quote {grid-area: 1 / 1;align-self: end;visibility: hidden;opacity: 0;transform: translateY(1.6rem);transition: opacity .5s ease, transform .5s ease, visibility 0s .5s;display: none;}
.about-quotes .quote.is-on {visibility: visible; opacity: 1; transform: none; transition: opacity .7s ease .4s, transform .7s ease .4s, visibility 0s;}

.about-visual .values button {padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; opacity: .6; transition: opacity .3s;}
.about-visual .values li.is-on button,
.about-visual .values button:hover {opacity: 1;}

.about-visual .values li::before {transition: width .4s ease;}
.about-visual .values li.is-on::before {width: 4.8rem;}


/* ============================================================
   데스크톱 전용
   ============================================================ */

@media (min-width: 80em) {

  .about-visual {padding-right: max(9.6rem, var(--edge-x));}

}


/* ============================================================
   모션 최소화 설정
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .hero-slide > .bg,
  .hero-slide .hero-msg > *,
  .hero-slide .eyebrow .bar {transform: none; opacity: 1; transition: none;}

  .fx-reveal {opacity: 1; transform: none; transition: none;}
  .fx-parallax {scale: 1;}

  .sub-hero > .bg,
  .sub-hero .hero-msg > *,
  .sub-hero .hero-foot {animation: none;}

  #header {transition: none;}

  .about-swiper .swiper-slide img {transform: none; transition: none;}

  .about-text,
  .about-text.is-on,
  .about-quotes .quote,
  .about-quotes .quote.is-on {transform: none; transition: none;}

}