/* 두현건설㈜ 홈페이지 — 로고 색: 남색 #1b2d84 · 파랑 #0093dc · 하늘 #9cd8f6 */
@font-face { font-family: "PretendardDH"; src: url("/doohyun/img/pretendard-dh.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --navy: #1b2d84;
  --navy-2: #2a42b0;
  --deep: #0a1238;
  --deep-2: #101b4e;
  --ink: #111727;
  --ink-2: #3f475c;
  --ink-3: #6b7285;
  --blue: #0093dc;
  --sky: #9cd8f6;
  --line: #e2e6ef;
  --bg: #ffffff;
  --bg-2: #f3f5fa;
  --hd-h: 92px;
  --r: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 14px 40px rgba(14, 24, 72, .09);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "PretendardDH", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 18px; line-height: 1.75; letter-spacing: -0.015em; word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 48px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 400; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
em { font-style: normal; color: var(--navy); }

.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 260; pointer-events: none; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--sky)); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- 버튼 ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 32px; border-radius: 8px; font-weight: 700; font-size: 17px; border: 1px solid transparent; cursor: pointer; overflow: hidden; isolation: isolate; transition: color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { transform: translateY(-2px); }
.btn i { font-style: normal; transition: transform .3s; }
.btn:hover i { transform: translateX(4px); }
.btn-w { background: #fff; color: var(--navy); }
.btn-w::before { background: var(--sky); }
.btn-line { border-color: rgba(255,255,255,.65); color: #fff; }
.btn-line::before { background: #fff; }
.btn-line:hover { color: var(--navy); border-color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy::before { background: var(--blue); }
.btn-navy:hover { box-shadow: 0 12px 26px rgba(0,147,220,.3); }
.btn-line-d { border-color: var(--line); color: var(--ink); background: #fff; min-height: 48px; padding: 0 20px; font-size: 15.5px; }
.btn-line-d::before { background: var(--navy); }
.btn-line-d:hover { color: #fff; border-color: var(--navy); }

/* ---------- 로고 인트로 ---------- */
.intro { position: fixed; inset: 0; z-index: 500; background: var(--deep); display: grid; place-items: center; pointer-events: none; animation: introOut .8s var(--ease) 1.9s forwards; }
.intro-in { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.intro-mark { width: 96px; height: 96px; overflow: visible; }
.intro-mark .im1 { fill: #fff; animation: imA .7s var(--ease) both; }
.intro-mark .im0 { fill: none; }
.intro-mark .im2 { fill: var(--blue); animation: imB .6s .35s var(--ease) both; }
.intro-mark .im3 { fill: var(--sky); animation: imC .5s .65s var(--ease) both; }
.intro-word { width: min(420px, 74vw); height: auto; opacity: 0; animation: imW .7s .85s var(--ease) both; clip-path: inset(0 100% 0 0); }
@keyframes imA { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes imB { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes imC { from { opacity: 0; transform: translate(10px, -30px); } to { opacity: 1; transform: none; } }
@keyframes imW { to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes introOut { to { transform: translateY(-100%); visibility: hidden; } }
html.no-intro .intro, html:not(.js) .intro { display: none; }

/* ---------- 머리 ---------- */
.hd { position: fixed; left: 0; right: 0; top: 0; z-index: 220; color: #fff; transition: background .35s, color .35s, box-shadow .35s; }
.hd::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; background: linear-gradient(rgba(6,12,40,.6), rgba(6,12,40,0)); pointer-events: none; transition: opacity .35s; }
.hd.solid, .hd.mega, body.menu-open .hd { background: #fff; color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.hd.solid::before, .hd.mega::before, body.menu-open .hd::before { opacity: 0; }
.hd-in { position: relative; z-index: 2; height: var(--hd-h); max-width: 1600px; margin: 0 auto; padding: 0 48px; display: flex; align-items: center; gap: 24px; transition: height .35s; }
.hd.solid .hd-in { height: 76px; }
.logo { position: relative; flex: none; display: block; height: 48px; aspect-ratio: 965 / 157; }
.logo picture { position: absolute; inset: 0; transition: opacity .35s; }
.logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.logo-c { opacity: 0; }
.hd.solid .logo-c, .hd.mega .logo-c, body.menu-open .hd .logo-c { opacity: 1; }
.hd.solid .logo-w, .hd.mega .logo-w, body.menu-open .hd .logo-w { opacity: 0; }
.gnb { margin-left: auto; display: flex; height: 100%; }
.gnb-i { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.gnb-i > a { position: relative; display: flex; align-items: center; height: 100%; padding: 0 22px; font-size: 17.5px; font-weight: 700; white-space: nowrap; }
.gnb-i > a::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 22px; height: 3px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transition: transform .3s var(--ease); }
.gnb-i > a:hover::after, .gnb-i > a.on::after { transform: scaleX(1); }
.hd.solid .gnb-i > a.on, .hd.mega .gnb-i:hover > a { color: var(--navy); }
.sub { position: absolute; top: 100%; left: 0; min-width: 100%; padding: 26px 22px 30px; display: flex; flex-direction: column; gap: 12px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--ease), visibility .25s; }
.sub a { font-size: 15.5px; color: var(--ink-3); font-weight: 500; white-space: nowrap; transition: color .2s, transform .2s; }
.sub a:hover { color: var(--navy); transform: translateX(3px); }
.hd.mega .sub { opacity: 1; visibility: visible; transform: none; }
.gnb-i:hover .sub a { color: var(--ink-2); }
.hd-panel { position: absolute; left: 0; right: 0; top: 100%; height: 0; background: #fff; box-shadow: 0 24px 40px rgba(14,24,72,.08); transition: height .35s var(--ease); z-index: 1; }
.hd.mega .hd-panel { height: 200px; border-top: 1px solid var(--line); }
.hd-tel { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: 8px; font-weight: 800; font-size: 17px; white-space: nowrap; letter-spacing: 0; }
.hd-tel svg { width: 18px; height: 18px; fill: currentColor; color: var(--sky); }
.hd.solid .hd-tel svg, .hd.mega .hd-tel svg, body.menu-open .hd .hd-tel svg { color: var(--blue); }
.hd-cta { flex: none; display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; font-size: 15.5px; transition: background .3s, transform .3s; }
.hd-cta:hover { background: var(--navy); transform: translateY(-1px); }
.hd-menu { display: none; width: 46px; height: 46px; margin-right: -8px; border: 0; background: none; cursor: pointer; position: relative; color: inherit; }
.hd-menu span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s, opacity .3s; }
.hd-menu span:nth-child(1) { top: 16px; } .hd-menu span:nth-child(2) { top: 22px; right: 17px; } .hd-menu span:nth-child(3) { top: 28px; }
body.menu-open .hd-menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .hd-menu span:nth-child(2) { opacity: 0; }
body.menu-open .hd-menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mnav { position: fixed; left: 0; right: 0; top: 68px; bottom: 0; z-index: 210; background: #fff; padding: 8px 24px 40px; display: flex; flex-direction: column; overflow-y: auto; opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .3s var(--ease); }
.mnav[hidden] { display: none; }
body:not(.menu-open) .mnav { pointer-events: none; }
body.menu-open .mnav { opacity: 1; transform: none; }
.mnav a { display: flex; align-items: baseline; gap: 14px; padding: 18px 4px; border-bottom: 1px solid var(--line); font-size: 21px; font-weight: 800; }
.mnav a b { font-size: 13px; color: var(--blue); font-weight: 800; letter-spacing: .06em; }
.mnav .mnav-tel { margin-top: 26px; justify-content: center; border: 0; background: var(--navy); color: #fff; border-radius: 10px; font-size: 18px; }
body.menu-open { overflow: hidden; }

/* 오른쪽 섹션 표시 */
.sidx { position: fixed; right: 30px; top: 50%; z-index: 150; transform: translateY(-50%); display: none; flex-direction: column; gap: 6px; }
.sidx a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 26px; font-size: 12px; font-weight: 800; color: rgba(17,23,39,.35); letter-spacing: .05em; }
.sidx a::after { content: ""; width: 14px; height: 2px; background: currentColor; transition: width .3s var(--ease), background .3s; }
.sidx a::before { content: attr(data-t); position: absolute; right: 54px; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--navy); opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; background: #fff; padding: 2px 10px; border-radius: 999px; box-shadow: var(--shadow); pointer-events: none; }
.sidx a:hover::before { opacity: 1; transform: none; }
.sidx a.on { color: var(--blue); }
.sidx a.on::after { width: 34px; }
.sidx.dark a { color: rgba(255,255,255,.45); }
.sidx.dark a.on { color: var(--sky); }
@media (min-width: 1500px) { .sidx { display: flex; } }

/* ---------- 첫 화면 ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 720px; max-height: 1200px; color: #fff; overflow: hidden; background: var(--deep); }
.hero-slides, .slide { position: absolute; inset: 0; }
.slide { opacity: 0; transition: opacity 1.6s ease; }
.slide.on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 8s ease-out; }
.slide.on img { transform: scale(1.02); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,14,46,.86) 0%, rgba(8,14,46,.55) 48%, rgba(8,14,46,.12) 100%), linear-gradient(0deg, rgba(8,14,46,.7), rgba(8,14,46,0) 45%); }
.hero-in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 150px; padding-top: 60px; }
.kicker { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 800; letter-spacing: .24em; color: var(--sky); }
.kicker span { width: 48px; height: 2px; background: var(--sky); }
.hero-t { margin-top: 26px; font-size: clamp(44px, 6.2vw, 96px); line-height: 1.16; font-weight: 800; letter-spacing: -0.04em; }
.hero-t .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-t .ln > span { display: inline-block; }
.hero-t em { color: #fff; position: relative; white-space: nowrap; z-index: 0; }
.hero-t em::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .08em; height: .2em; background: var(--blue); z-index: -1; transform-origin: left; }
.hero-s { margin-top: 30px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.75; color: rgba(255,255,255,.88); max-width: 680px; }
.hero-btns { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 150px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 40px; pointer-events: none; }
.hero-foot > * { pointer-events: auto; }
.hero-dots { display: flex; gap: 18px; }
.hero-dots button { border: 0; background: none; padding: 0; color: rgba(255,255,255,.55); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.hero-dots i { width: 64px; height: 2px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.hero-dots i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero-dots button.on { color: #fff; }
.hero-dots button.on i::after { animation: dotRun 6.5s linear forwards; }
@keyframes dotRun { to { transform: scaleX(1); } }
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: .3em; color: rgba(255,255,255,.8); }
.scroll-cue i { width: 1px; height: 54px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: #fff; animation: cue 2s ease-in-out infinite; }
@keyframes cue { to { top: 100%; } }
.svc-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(10,18,56,.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.14); }
.svc-bar a { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; padding: 28px 40px; border-left: 1px solid rgba(255,255,255,.12); transition: background .35s; overflow: hidden; }
.svc-bar a:first-child { border-left: 0; }
.svc-bar a::after { content: "→"; position: absolute; right: 32px; top: 50%; transform: translate(-8px, -50%); opacity: 0; font-size: 20px; transition: opacity .3s, transform .3s var(--ease); }
.svc-bar a:hover { background: rgba(0,147,220,.55); }
.svc-bar a:hover::after { opacity: 1; transform: translate(0, -50%); }
.svc-bar b { grid-row: 1 / 3; font-size: 15px; color: var(--sky); font-weight: 800; padding-top: 3px; }
.svc-bar span { font-size: 19px; font-weight: 800; }
.svc-bar small { font-size: 14px; color: rgba(255,255,255,.68); }
.js .hero-t .ln > span { transform: translateY(110%); animation: lnUp 1.1s var(--ease) forwards; animation-delay: var(--d, 0s); }
.js .hero-t em::after { transform: scaleX(0); animation: penX .8s var(--ease) forwards; animation-delay: var(--d, 0s); }
.js .kicker, .js .hero-s, .js .hero-btns, .js .svc-bar, .js .hero-foot { opacity: 0; animation: fadeUp 1s var(--ease) forwards; animation-delay: var(--d, 0s); }
.js .kicker { --d: .1s; }
.js .hero-t .ln:nth-child(1) > span { --d: .25s; }
.js .hero-t .ln:nth-child(2) > span { --d: .42s; }
.js .hero-t em::after { --d: 1.2s; }
.js .hero-s { --d: .7s; }
.js .hero-btns { --d: .85s; }
.js .svc-bar { --d: 1s; }
.js .hero-foot { --d: 1.2s; }
/* 로고 인트로가 나올 때는 첫 화면 글씨를 인트로 뒤로 미룬다 */
html.js:not(.no-intro) .kicker { --d: 2.3s; }
html.js:not(.no-intro) .hero-t .ln:nth-child(1) > span { --d: 2.45s; }
html.js:not(.no-intro) .hero-t .ln:nth-child(2) > span { --d: 2.62s; }
html.js:not(.no-intro) .hero-t em::after { --d: 3.4s; }
html.js:not(.no-intro) .hero-s { --d: 2.9s; }
html.js:not(.no-intro) .hero-btns { --d: 3.05s; }
html.js:not(.no-intro) .svc-bar { --d: 3.2s; }
html.js:not(.no-intro) .hero-foot { --d: 3.4s; }
@keyframes lnUp { to { transform: none; } }
@keyframes penX { to { transform: scaleX(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- 내리면 나타나기 ---------- */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--ease); }
.js .wipe img { transform: scale(1.18); transition: transform 1.8s var(--ease); }
.js .wipe.in { clip-path: inset(0 0 0 0); }
.js .wipe.in img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .hero-t .ln > span, .js .kicker, .js .hero-s, .js .hero-btns, .js .svc-bar, .js .hero-foot { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .js .hero-t em::after { transform: none !important; animation: none !important; }
  .js .wipe { clip-path: none !important; }
  .js .wipe img, .slide img { transform: none !important; transition: none !important; }
  .mq-track { animation: none !important; flex-wrap: wrap; width: auto !important; justify-content: center; }
}

/* ---------- 공통 섹션 머리 ---------- */
section { position: relative; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; letter-spacing: .04em; color: var(--blue); }
.eyebrow .no { display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 6px; background: var(--navy); color: #fff; font-size: 13px; letter-spacing: .04em; }
.eyebrow.light { color: var(--sky); }
.eyebrow.light .no { background: var(--blue); }
h2 { margin-top: 18px; font-size: clamp(34px, 4.3vw, 62px); line-height: 1.24; font-weight: 800; letter-spacing: -0.04em; }
.sec-head { margin-bottom: 72px; }
.sec-head.center { text-align: center; }
.sec-head.center .sec-sub { margin-left: auto; margin-right: auto; }
.sec-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.sec-head.split .sec-sub { max-width: 440px; margin-top: 0; }
.sec-sub { margin-top: 22px; color: var(--ink-2); font-size: 19px; max-width: 760px; }
.sec-sub b { color: var(--navy); }

/* ---------- 한 문장 ---------- */
.statement { padding: 170px 0 150px; background: #fff; }
.st-eye { font-size: clamp(14px, 1.2vw, 17px); font-weight: 800; letter-spacing: .32em; color: var(--blue); }
.st-big { margin-top: 28px; font-size: clamp(30px, 3.9vw, 58px); line-height: 1.42; font-weight: 800; letter-spacing: -0.04em; max-width: 1180px; }
.js .st-big .w { color: #d3d8e4; transition: color .35s; }
.js .st-big .w.on { color: var(--ink); }
.st-big b { font-weight: 800; color: var(--navy); }
.js .st-big b .w.on { color: var(--navy); }

/* ---------- 숫자 ---------- */
.figures { color: #fff; padding: 150px 0; overflow: hidden; background: var(--deep); }
.fig-bg, .band-bg, .q-bg { position: absolute; inset: 0; overflow: hidden; }
.fig-bg img, .band-bg img, .q-bg img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.figures::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(8,14,46,.95) 20%, rgba(16,27,78,.82)); }
.fig-in { position: relative; z-index: 2; }
.fig-head { margin-bottom: 72px; }
.fig-head h2 em { color: var(--sky); }
.fig-list { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(255,255,255,.16); }
.fig-list li { padding: 36px 26px 6px; border-left: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 10px; }
.fig-list li:first-child { border-left: 0; padding-left: 0; }
.fig-list li:nth-child(2) { transition-delay: .08s; } .fig-list li:nth-child(3) { transition-delay: .16s; } .fig-list li:nth-child(4) { transition-delay: .24s; } .fig-list li:nth-child(5) { transition-delay: .32s; }
.fig-k { font-size: 16px; color: var(--sky); font-weight: 700; }
.fig-v { font-size: clamp(46px, 4.6vw, 76px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig-v .pre { font-size: .34em; font-weight: 700; margin-right: 6px; color: rgba(255,255,255,.8); vertical-align: .5em; }
.fig-v small { font-size: .36em; font-weight: 700; margin-left: 6px; color: rgba(255,255,255,.85); }
.fig-d { font-size: 15px; color: rgba(255,255,255,.62); }

/* ---------- 회사소개 ---------- */
.about { padding: 160px 0 140px; }
.about-in { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.about-ph { position: relative; height: 620px; }
.ph { position: absolute; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-a { left: 0; top: 0; width: 76%; height: 74%; }
.ph-b { right: 0; bottom: 0; width: 56%; height: 50%; border: 8px solid #fff; transition-delay: .2s; }
.ph-b img { transition-delay: .2s; }
.ph-badge { position: absolute; left: 6%; bottom: 4%; z-index: 2; background: var(--navy); color: #fff; padding: 26px 30px; border-radius: 14px; box-shadow: 0 18px 36px rgba(27,45,132,.35); }
.ph-badge b { display: block; font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.ph-badge span { display: block; margin-top: 10px; font-size: 15px; color: var(--sky); line-height: 1.5; font-weight: 600; }
.about-txt h2 { margin-bottom: 36px; }
.about-txt p + p { margin-top: 18px; }
.about-txt .lead { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.65; }
.about-txt p { color: var(--ink-2); }
.about-txt b { color: var(--navy); }
.about-card { margin-top: 100px; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: var(--r); background: var(--bg-2); overflow: hidden; }
.about-card div { padding: 32px 36px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transition: background .3s; }
.about-card div:hover { background: #fff; }
.about-card div:nth-child(3n+1) { border-left: 0; }
.about-card div:nth-child(-n+3) { border-top: 0; }
.about-card dt { font-size: 15px; font-weight: 800; color: var(--blue); }
.about-card dd { margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.about-card dd span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-3); font-weight: 500; }

/* ---------- 대표 인사말 ---------- */
.ceo { padding: 160px 0; background: linear-gradient(135deg, var(--deep) 0%, var(--deep-2) 60%, #16297a 100%); color: #fff; overflow: hidden; }
.ceo-mark { position: absolute; right: -6%; top: 50%; width: 46vw; max-width: 720px; transform: translateY(-50%); opacity: .045; pointer-events: none; }
.ceo-mark svg { width: 100%; fill: #fff; }
.ceo-in { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; }
.ceo-side h2 { font-size: clamp(36px, 4.4vw, 64px); }
.ceo-side h2 em { color: var(--sky); }
.ceo-q { margin-top: 30px; font-size: 200px; line-height: .8; font-weight: 800; color: var(--blue); opacity: .55; font-family: Georgia, serif; }
.ceo-body p { color: rgba(255,255,255,.82); font-size: 19px; line-height: 1.95; }
.ceo-body p + p { margin-top: 24px; }
.pen { color: #fff; font-weight: 700; background: linear-gradient(transparent 58%, rgba(0,147,220,.6) 58%, rgba(0,147,220,.6) 92%, transparent 92%) no-repeat 0 0 / 0% 100%; transition: background-size 1.8s var(--ease); padding: 0 2px; }
.pen.on, html:not(.js) .pen { background-size: 100% 100%; }
.ceo-sign { margin-top: 48px !important; display: flex; align-items: baseline; gap: 16px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.16); }
.ceo-sign span { font-size: 17px; color: rgba(255,255,255,.7); }
.ceo-sign b { font-size: 30px; font-weight: 800; letter-spacing: .14em; color: #fff; }

/* ---------- 연혁 ---------- */
.history { padding: 160px 0; }
.his-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; }
.his-side { position: sticky; top: 140px; align-self: start; }
.his-year { margin-top: 40px; font-size: clamp(90px, 11vw, 190px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px var(--navy); opacity: .9; font-variant-numeric: tabular-nums; transition: opacity .3s; }
.his-year.swap { opacity: .2; }
.tl { position: relative; padding-left: 52px; }
.tl::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.tl::after { content: ""; position: absolute; left: 9px; top: 12px; width: 2px; height: calc((100% - 24px) * var(--p, 0)); background: linear-gradient(var(--blue), var(--navy)); }
.tl > li { position: relative; padding: 6px 0 46px; }
.tl > li::before { content: ""; position: absolute; left: -52px; top: 14px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--line); transition: border-color .4s, box-shadow .4s; z-index: 1; }
.tl > li.on::before { border-color: var(--blue); box-shadow: 0 0 0 7px rgba(0,147,220,.14); }
.tl-y { font-size: 34px; font-weight: 800; line-height: 1.2; color: var(--navy); letter-spacing: -0.02em; }
.tl ul { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.tl ul li { display: flex; gap: 14px; font-size: 18.5px; color: var(--ink); padding: 16px 22px; background: var(--bg-2); border-radius: 12px; transition: background .3s, transform .3s; }
.tl ul li:hover { background: #e9eef9; transform: translateX(4px); }
.tl ul li span { flex: none; width: 34px; color: var(--blue); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- 사업분야 ---------- */
.biz { padding: 160px 0; background: var(--bg-2); }
.biz-list { display: flex; flex-direction: column; gap: 110px; }
.biz-row { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; }
.biz-row.rev { grid-template-columns: 1fr 1.25fr; }
.biz-row.rev .biz-ph { order: 2; }
.biz-ph { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); }
.biz-ph img { width: 100%; height: 100%; object-fit: cover; }
.biz-row:hover .biz-ph.in img { transform: scale(1.05); transition: transform 1.2s var(--ease); }
.biz-tx { position: relative; z-index: 2; margin-left: -90px; background: #fff; border-radius: var(--r); padding: 56px 56px 52px; box-shadow: 0 24px 60px rgba(14,24,72,.12); }
.biz-row.rev .biz-tx { margin-left: 0; margin-right: -90px; }
.biz-no { position: absolute; right: 44px; top: 28px; font-size: 84px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px #d4dbec; letter-spacing: -0.04em; }
.biz-en { font-size: 14px; font-weight: 800; letter-spacing: .2em; color: var(--blue); }
.biz-tx h3 { margin-top: 10px; font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; letter-spacing: -0.03em; color: var(--navy); }
.biz-tx p { margin-top: 16px; color: var(--ink-2); font-size: 18px; }
.biz-tx ul { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.biz-tx li { position: relative; padding-left: 20px; font-size: 16.5px; color: var(--ink); font-weight: 600; }
.biz-tx li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--blue); }

/* ---------- 사진 띠 ---------- */
.band { height: 640px; overflow: hidden; color: #fff; display: flex; align-items: center; background: var(--deep); }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,14,46,.9), rgba(8,14,46,.35)); }
.band-in { position: relative; z-index: 2; }
.band-eye { font-size: 15px; font-weight: 800; letter-spacing: .3em; color: var(--sky); }
.band-q { margin-top: 20px; font-size: clamp(34px, 4.4vw, 66px); font-weight: 800; line-height: 1.3; letter-spacing: -0.04em; }
.band-q em { color: var(--sky); }
.band-s { margin-top: 22px; color: rgba(255,255,255,.85); font-size: 20px; }

/* ---------- 시공실적 ---------- */
.works { padding: 160px 0 0; }
.feat { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 22px; margin-bottom: 90px; }
.feat-card { position: relative; padding: 36px 34px 32px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s, border-color .4s, opacity .9s ease; display: flex; flex-direction: column; }
.feat-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--navy), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.feat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.feat-card:hover::after { transform: scaleX(1); }
.feat-card.big { grid-row: 1 / 3; background: linear-gradient(160deg, var(--navy) 0%, var(--deep) 100%); color: #fff; border: 0; justify-content: flex-end; padding: 44px 42px; min-height: 460px; }
.feat-card.big::before { content: ""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 50%; border: 40px solid rgba(0,147,220,.18); }
.feat-ico { width: 56px; height: 56px; border-radius: 14px; background: var(--bg-2); display: grid; place-items: center; transition: background .3s; }
.feat-ico svg { width: 30px; height: 30px; fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.feat-card:hover .feat-ico { background: var(--navy); }
.feat-card:hover .feat-ico svg { stroke: #fff; }
.feat-card.big .feat-ico { position: absolute; top: 44px; left: 42px; width: 72px; height: 72px; background: rgba(255,255,255,.1); }
.feat-card.big .feat-ico svg { width: 40px; height: 40px; stroke: #fff; }
.feat-tag { margin-top: 28px; font-size: 14px; font-weight: 800; color: var(--blue); }
.feat-card.big .feat-tag { color: var(--sky); }
.feat-card h3 { margin-top: 8px; font-size: 21px; line-height: 1.45; font-weight: 800; letter-spacing: -0.02em; }
.feat-card.big h3 { font-size: clamp(30px, 2.8vw, 42px); line-height: 1.3; }
.feat-card p { margin-top: 10px; font-size: 15px; color: var(--ink-3); }
.feat-card.big p { color: rgba(255,255,255,.7); font-size: 16px; }
.wk-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.wk-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-tabs button { border: 1px solid var(--line); background: #fff; padding: 11px 20px; border-radius: 999px; font-size: 16px; font-weight: 700; cursor: pointer; color: var(--ink-2); transition: all .25s; }
.wk-tabs button span { color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.wk-tabs button:hover { border-color: var(--navy); color: var(--navy); }
.wk-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 8px 18px rgba(27,45,132,.25); }
.wk-tabs button.on span { color: var(--sky); }
.wk-search input { width: 300px; height: 50px; border: 1px solid var(--line); border-radius: 999px; padding: 0 22px 0 48px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7285' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 18px 50% / 18px; font-size: 16px; }
.wk-search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(27,45,132,.1); }
.wk-table { border-top: 2px solid var(--navy); overflow-x: auto; }
.wk-table table { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.wk-table th { text-align: left; font-size: 15px; color: var(--ink-3); font-weight: 700; padding: 16px 14px; border-bottom: 1px solid var(--line); background: #f8f9fc; white-space: nowrap; }
.wk-table td { padding: 18px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.wk-table tbody tr { transition: background .2s; }
.wk-table tbody tr:hover { background: #f4f7fd; }
.wk-table tbody tr.new { animation: rowIn .5s var(--ease) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } }
.c-st { width: 110px; }
.c-cl { width: 26%; color: var(--ink-2); }
.c-wk { width: 160px; }
.c-pd { width: 200px; white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.c-nm b { font-weight: 700; }
.m-cl { display: none; }
.st { display: inline-block; font-size: 13.5px; font-weight: 800; padding: 5px 11px; border-radius: 6px; white-space: nowrap; }
.st-ing { background: var(--blue); color: #fff; position: relative; padding-left: 22px; }
.st-ing::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.st-plan { background: #e3f3fc; color: #00679c; }
.st-done { background: var(--bg-2); color: var(--ink-3); }
.wk-k { display: block; font-size: 14.5px; color: var(--ink-2); }
.wk-w { display: block; font-size: 13.5px; color: var(--ink-3); }
.wk-empty { padding: 40px 0; text-align: center; color: var(--ink-3); }
.wk-more { text-align: center; margin-top: 36px; }
.clients { margin-top: 140px; padding: 70px 0 80px; background: var(--deep); color: #fff; overflow: hidden; }
.cl-t { text-align: center; font-size: 15px; font-weight: 800; letter-spacing: .3em; color: var(--sky); margin-bottom: 36px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: 16px; }
.mq-track { display: flex; gap: 16px; width: max-content; animation: mq 46s linear infinite; }
.marquee.rev .mq-track { animation-direction: reverse; animation-duration: 52s; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-track span { flex: none; font-size: 19px; font-weight: 700; padding: 16px 30px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: rgba(255,255,255,.9); white-space: nowrap; transition: background .3s, border-color .3s; }
.mq-track span:hover { background: rgba(0,147,220,.35); border-color: var(--blue); }
@keyframes mq { to { transform: translateX(calc(-50% - 8px)); } }

/* ---------- 조직 · 기술인력 ---------- */
.people { padding: 160px 0; background: var(--bg-2); }
.org { text-align: center; }
.org-top { display: inline-flex; flex-direction: column; padding: 24px 70px; border-radius: 14px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; box-shadow: 0 16px 34px rgba(27,45,132,.3); }
.org-top span { font-size: 14px; color: var(--sky); font-weight: 700; }
.org-top b { font-size: 26px; font-weight: 800; }
.org-line { width: 2px; height: 46px; margin: 0 auto; background: var(--navy); transform-origin: top; }
.org-teams { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-top: 46px; }
.org-teams::before { content: ""; position: absolute; top: 0; left: 12.5%; right: 12.5%; height: 2px; background: var(--navy); transform-origin: center; }
.org-teams li { position: relative; background: #fff; border-radius: var(--r); padding: 34px 22px 30px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .35s var(--ease); }
.org-teams li:hover { transform: translateY(-6px); }
.org-teams li::before { content: ""; position: absolute; top: -46px; left: 50%; width: 2px; height: 46px; background: var(--navy); }
.org-teams i { width: 58px; height: 58px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; margin-bottom: 6px; }
.org-teams i svg { width: 28px; height: 28px; fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.org-teams b { font-size: 23px; font-weight: 800; color: var(--navy); }
.org-teams span { font-size: 16px; color: var(--ink-2); }
.js .org .org-line { transform: scaleY(0); transition: transform .5s .3s; }
.js .org .org-teams::before { transform: scaleX(0); transition: transform .6s .7s var(--ease); }
.js .org.in .org-line, .js .org.in .org-teams::before { transform: none; }
.eng { margin-top: 90px; display: grid; grid-template-columns: 1.1fr .9fr 1.3fr; gap: 56px; align-items: center; background: #fff; border-radius: var(--r); padding: 54px 56px; box-shadow: var(--shadow); }
.eng-big { display: flex; align-items: baseline; gap: 4px; color: var(--navy); }
.eng-big b { font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.eng-big span { font-size: 26px; font-weight: 800; }
.eng-k h3 { margin-top: 10px; font-size: 24px; font-weight: 800; color: var(--ink); }
.eng-k p { margin-top: 8px; color: var(--ink-2); font-size: 16.5px; }
.eng-grade { display: flex; gap: 12px; }
.eng-grade li { flex: 1; text-align: center; padding: 22px 8px; border-radius: 14px; background: var(--bg-2); }
.eng-grade li:first-child { background: var(--navy); color: #fff; }
.eng-grade li:first-child span { color: var(--sky); }
.eng-grade b { display: block; font-size: 42px; font-weight: 800; line-height: 1.1; }
.eng-grade span { font-size: 15px; color: var(--ink-3); font-weight: 700; }
.eng-field { display: flex; flex-direction: column; gap: 16px; }
.eng-field li { display: grid; grid-template-columns: 82px 1fr 50px; gap: 14px; align-items: center; font-size: 16.5px; }
.eng-field span { color: var(--ink-2); font-weight: 700; }
.eng-field i { position: relative; height: 12px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.eng-field i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0); background: linear-gradient(90deg, var(--navy), var(--blue)); border-radius: 6px; }
.js .eng-field i::after { width: 0; transition: width 1.3s .2s var(--ease); }
.js .eng.in .eng-field i::after { width: var(--w, 0); }
.eng-field b { text-align: right; color: var(--navy); font-weight: 800; }

/* ---------- 품질 · 안전 ---------- */
.quality { padding: 160px 0; color: #fff; background: var(--deep); overflow: hidden; }
.quality::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,14,46,.9), rgba(8,14,46,.96)); }
.q-in { position: relative; z-index: 2; }
.quality h2 em { color: var(--sky); }
.q-line { position: relative; height: 2px; margin: 0 10%; background: rgba(255,255,255,.12); }
.q-line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue), var(--sky)); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--ease); }
.q-line i.in { transform: none; }
.q-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 0; padding-top: 70px; }
.q-steps li { position: relative; padding: 0 26px 36px; border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: background .35s, border-color .35s, transform 1s var(--ease), opacity .9s ease; text-align: center; }
.q-steps li:nth-child(2) { transition-delay: .12s; } .q-steps li:nth-child(3) { transition-delay: .24s; } .q-steps li:nth-child(4) { transition-delay: .36s; } .q-steps li:nth-child(5) { transition-delay: .48s; }
.q-steps li:hover { background: rgba(0,147,220,.16); border-color: rgba(156,216,246,.45); }
.q-ico { display: grid; place-items: center; width: 96px; height: 96px; margin: -48px auto 0; border-radius: 50%; background: var(--deep-2); border: 2px solid rgba(156,216,246,.4); }
.q-ico svg { width: 46px; height: 46px; fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.js .q-ico .d { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s .4s var(--ease); }
.js .q-steps li.in .q-ico .d { stroke-dashoffset: 0; }
.q-no { display: block; margin-top: 24px; font-size: 13px; font-weight: 800; color: var(--sky); letter-spacing: .16em; }
.q-steps h3 { margin-top: 10px; font-size: 23px; font-weight: 800; }
.q-steps p { margin-top: 12px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.78); }

/* ---------- 상담 띠 ---------- */
.cta { background: linear-gradient(110deg, var(--navy) 0%, var(--blue) 100%); color: #fff; padding: 76px 0; overflow: hidden; }
.cta::before { content: ""; position: absolute; right: 8%; top: -120px; width: 360px; height: 360px; border: 60px solid rgba(255,255,255,.08); transform: rotate(45deg); }
.cta-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-t { font-size: clamp(28px, 3vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; }
.cta-s { margin-top: 10px; font-size: 18px; color: rgba(255,255,255,.85); }
.cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.cta .btn-w { font-size: 20px; font-weight: 800; letter-spacing: 0; }

/* ---------- 문의 ---------- */
.contact { padding: 160px 0; }
.ct-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }
.ct-info h2 { font-size: clamp(32px, 3.4vw, 50px); }
.ct-list { margin-top: 40px; border-top: 2px solid var(--navy); }
.ct-list li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.ct-list span { color: var(--ink-3); font-weight: 700; font-size: 16px; }
.ct-list a { color: var(--navy); font-weight: 800; }
.ct-list b { font-weight: 600; }
.ct-map { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.ct-form { background: #fff; border-radius: var(--r); padding: 48px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 24px 60px rgba(14,24,72,.1); border: 1px solid var(--line); }
.f-title { font-size: 24px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-form label { display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; font-weight: 700; color: var(--ink-2); }
.ct-form label i { color: var(--blue); font-style: normal; }
.ct-form input:not([type=checkbox]), .ct-form select, .ct-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #f9fafc; padding: 15px 16px; font-size: 16.5px; font-weight: 500; color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s; }
.ct-form textarea { resize: vertical; min-height: 150px; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 4px rgba(27,45,132,.1); }
.ct-form .f-agree { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 15px; }
.f-agree input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--navy); flex: none; }
.f-msg { font-size: 15.5px; }
.f-msg:empty { display: none; }
.f-msg.err { color: #c0392b; }
.f-msg.ok { color: var(--navy); }
.f-send { width: 100%; }
.f-note { font-size: 14px; color: var(--ink-3); text-align: center; margin-top: -6px; }

/* ---------- 바닥 ---------- */
.ft { background: #070d2c; color: rgba(255,255,255,.7); padding: 72px 0 52px; font-size: 15px; }
.ft-top { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; }
.ft-logo img { height: 38px; width: auto; }
.ft-nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.ft-nav a { color: rgba(255,255,255,.85); font-weight: 700; }
.ft-nav a:hover { color: #fff; }
.ft-info { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 30px; }
.ft-info div { display: flex; gap: 8px; }
.ft-info dt { color: rgba(255,255,255,.45); }
.ft-copy { margin-top: 26px; color: rgba(255,255,255,.45); }
.ft-credit { margin-top: 6px; color: rgba(255,255,255,.35); font-size: 13px; }
.totop { position: fixed; right: 28px; bottom: 28px; z-index: 160; width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(14,24,72,.3); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s, transform .3s, background .3s; }
.totop:hover { background: var(--blue); }
.totop.on { opacity: 1; transform: none; pointer-events: auto; }
.totop svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- 화면 폭별 ---------- */
@media (max-width: 1440px) {
  .gnb-i > a { padding: 0 16px; font-size: 16.5px; }
  .gnb-i > a::after { left: 16px; right: 16px; }
  .sub { padding-left: 16px; padding-right: 16px; }
  .hd-tel span { display: none; }
  .hd-tel { width: 46px; height: 46px; justify-content: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; margin-left: 0; }
  .hd.solid .hd-tel, .hd.mega .hd-tel, body.menu-open .hd .hd-tel { border-color: var(--line); }
}
@media (max-width: 1280px) {
  .logo { height: 40px; }
  .gnb-i > a { padding: 0 12px; font-size: 16px; }
  .gnb-i > a::after { left: 12px; right: 12px; }
  .sub { padding-left: 12px; padding-right: 12px; }
  .q-steps { grid-template-columns: repeat(3, 1fr); row-gap: 70px; }
  .q-line { display: none; }
  .eng { grid-template-columns: 1fr 1fr; }
  .eng-field { grid-column: 1 / -1; }
  .fig-list { grid-template-columns: repeat(3, 1fr); }
  .fig-list li:nth-child(4) { border-left: 0; padding-left: 0; }
  .svc-bar a { padding: 24px 26px; }
  .svc-bar a::after { right: 20px; }
}
@media (max-width: 1080px) {
  :root { --hd-h: 72px; }
  .hd.solid .hd-in { height: 68px; }
  .gnb, .hd-cta, .hd-panel { display: none; }
  .hd-tel { margin-left: auto; }
  .hd-menu { display: block; }
  .wrap, .hd-in { padding: 0 28px; }
  .about-in, .ceo-in, .ct-in, .his-in { grid-template-columns: 1fr; gap: 56px; }
  .his-side { position: static; }
  .his-year { display: none; }
  .about-ph { height: 520px; }
  .about-card { grid-template-columns: 1fr 1fr; }
  .about-card div { border-left: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; }
  .about-card div:nth-child(odd) { border-left: 0 !important; }
  .about-card div:nth-child(-n+2) { border-top: 0 !important; }
  .biz-row, .biz-row.rev { grid-template-columns: 1fr; }
  .biz-row.rev .biz-ph { order: 0; }
  .biz-tx, .biz-row.rev .biz-tx { margin: -80px 28px 0; }
  .feat { grid-template-columns: 1fr 1fr; }
  .feat-card.big { grid-column: 1 / -1; grid-row: auto; min-height: 340px; }
  .c-cl { display: none; }
  .m-cl { display: block; font-size: 14px; color: var(--ink-3); margin-top: 2px; }
  .sec-head.split { flex-direction: column; align-items: flex-start; }
  .svc-bar { grid-template-columns: 1fr 1fr; }
  .svc-bar a:nth-child(3) { border-left: 0; }
  .svc-bar a:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
  .hero-in { padding-bottom: 230px; }
  .hero-foot { bottom: 200px; }
}
@media (max-width: 800px) {
  body { font-size: 16.5px; }
  :root { --hd-h: 64px; }
  .hd.solid .hd-in { height: 64px; }
  .mnav { top: 64px; }
  .wrap, .hd-in { padding: 0 20px; }
  .logo { height: 34px; aspect-ratio: 551 / 157; }
  .hd-tel { width: 42px; height: 42px; }
  .hero { min-height: 640px; }
  .hero-shade { background: linear-gradient(0deg, rgba(8,14,46,.95) 0%, rgba(8,14,46,.6) 55%, rgba(8,14,46,.35) 100%); }
  .hero-in { justify-content: flex-end; padding-bottom: 196px; }
  .kicker { font-size: 12px; letter-spacing: .16em; gap: 10px; }
  .kicker span { width: 28px; }
  .hero-t { font-size: clamp(36px, 10.4vw, 48px); margin-top: 18px; }
  .hero-s { font-size: 16px; margin-top: 18px; }
  .hero-btns { margin-top: 26px; flex-wrap: nowrap; }
  .hero-btns .btn { flex: 1; padding: 0 10px; min-width: 0; min-height: 52px; font-size: 16px; }
  .hero-foot { display: none; }
  .svc-bar a { padding: 16px 18px; column-gap: 10px; }
  .svc-bar a::after { display: none; }
  .svc-bar b { font-size: 12px; }
  .svc-bar span { font-size: 15.5px; }
  .svc-bar small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .statement { padding: 100px 0 90px; }
  .st-big { font-size: clamp(25px, 7vw, 32px); line-height: 1.5; }
  .figures { padding: 96px 0; }
  .fig-head { margin-bottom: 44px; }
  .fig-list { grid-template-columns: 1fr 1fr; }
  .fig-list li { padding: 26px 0 4px 18px; }
  .fig-list li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fig-list li:nth-child(4) { border-left: 1px solid rgba(255,255,255,.12); padding-left: 18px; }
  .fig-list li:last-child { grid-column: 1 / -1; }
  .fig-v { font-size: 46px; }
  .fig-k { font-size: 14.5px; }
  .fig-d { font-size: 13.5px; }
  .about, .ceo, .history, .biz, .people, .quality, .contact { padding: 96px 0; }
  .works { padding-top: 96px; }
  h2 { font-size: clamp(29px, 8vw, 36px); }
  .sec-head { margin-bottom: 44px; }
  .sec-sub { font-size: 16.5px; }
  .eyebrow { font-size: 14.5px; }
  .about-ph { height: 380px; }
  .ph-badge { padding: 18px 20px; }
  .ph-badge b { font-size: 34px; }
  .ph-badge span { font-size: 13px; }
  .about-txt .lead { font-size: 18.5px; }
  .about-card { margin-top: 60px; grid-template-columns: 1fr; }
  .about-card div { border-left: 0 !important; border-top: 1px solid var(--line) !important; padding: 20px 22px; }
  .about-card div:first-child { border-top: 0 !important; }
  .about-card dd { font-size: 16.5px; }
  .ceo-body p { font-size: 16.5px; }
  .ceo-q { display: none; }
  .ceo-mark { width: 90vw; right: -30%; }
  .ceo-sign b { font-size: 24px; }
  .tl { padding-left: 40px; }
  .tl::before, .tl::after { left: 7px; }
  .tl > li::before { left: -40px; width: 18px; height: 18px; }
  .tl-y { font-size: 27px; }
  .tl ul li { font-size: 16px; padding: 13px 16px; }
  .biz-list { gap: 70px; }
  .biz-tx, .biz-row.rev .biz-tx { margin: -50px 14px 0; padding: 32px 24px 30px; }
  .biz-no { font-size: 56px; right: 22px; top: 20px; }
  .biz-tx p { font-size: 16px; }
  .biz-tx ul { grid-template-columns: 1fr; }
  .biz-tx li { font-size: 15.5px; }
  .band { height: 480px; }
  .band-s { font-size: 16.5px; }
  .feat { grid-template-columns: 1fr; gap: 14px; margin-bottom: 56px; }
  .feat-card { padding: 26px 24px; }
  .feat-card.big { min-height: 300px; padding: 30px 26px; }
  .feat-card.big .feat-ico { top: 28px; left: 26px; width: 60px; height: 60px; }
  .feat-card h3 { font-size: 19px; }
  .wk-tools { flex-direction: column; align-items: stretch; }
  .wk-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
  .wk-tabs::-webkit-scrollbar { display: none; }
  .wk-tabs button { flex: none; padding: 10px 16px; font-size: 15px; }
  .wk-search input { width: 100%; }
  .wk-table { overflow: visible; }
  .wk-table thead { display: none; }
  .wk-table table, .wk-table tbody, .wk-table tr, .wk-table td { display: block; width: auto; }
  .wk-table tr { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .wk-table td { padding: 0; border: 0; }
  .wk-table td.c-cl { display: none; }
  .wk-table .c-st { grid-column: 1; grid-row: 1; }
  .wk-table .c-pd { grid-column: 2; grid-row: 1; text-align: right; font-size: 14px; align-self: center; }
  .wk-table .c-nm { grid-column: 1 / -1; font-size: 16.5px; }
  .wk-table .c-wk { grid-column: 1 / -1; display: flex; gap: 8px; }
  .wk-table .c-wk span { display: inline; font-size: 13.5px; }
  .wk-table .c-wk .wk-w::before { content: "· "; }
  .clients { margin-top: 90px; padding: 50px 0 56px; }
  .mq-track span { font-size: 16px; padding: 12px 20px; }
  .org-teams { grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 30px; }
  .org-teams::before { left: 25%; right: 25%; }
  .org-teams li::before { display: none; }
  .org-teams li:nth-child(-n+2)::before { display: block; top: -30px; height: 30px; }
  .org-line { height: 30px; }
  .org-top { padding: 18px 44px; }
  .org-top b { font-size: 22px; }
  .org-teams li { padding: 24px 12px; }
  .org-teams i { width: 48px; height: 48px; }
  .org-teams b { font-size: 19px; }
  .org-teams span { font-size: 14px; }
  .eng { grid-template-columns: 1fr; gap: 30px; padding: 32px 22px; margin-top: 56px; }
  .eng-big b { font-size: 64px; }
  .q-steps { grid-template-columns: 1fr; row-gap: 62px; padding-top: 50px; }
  .q-steps li { padding: 0 22px 28px; }
  .q-ico { width: 84px; height: 84px; margin-top: -42px; }
  .q-steps p { font-size: 15.5px; }
  .cta { padding: 60px 0; }
  .cta-btns { width: 100%; }
  .cta-btns .btn { flex: 1; padding: 0 12px; }
  .ct-form { padding: 28px 20px; }
  .f-row { grid-template-columns: 1fr; }
  .ct-list li { grid-template-columns: 70px 1fr; font-size: 16.5px; }
  .ft { padding: 52px 0 100px; }
  .ft-logo img { height: 30px; }
  .ft-info { flex-direction: column; gap: 4px; }
  .totop { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}
@media (max-width: 380px) {
  .hero-t { font-size: 34px; }
  .fig-v { font-size: 40px; }
  .svc-bar small { display: none; }
}