/* ===== Fonts ===== */
@font-face {
  font-family: 'Paperlogy';
  font-weight: 400;
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 500;
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 700;
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 800;
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 900;
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 300;
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 600;
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
  font-display: swap;
}

/* ===== 제목용 폰트: Gmarket Sans (Light 300 / Medium 500 / Bold 700) ===== */
@font-face {
  font-family: 'GmarketSans'; font-weight: 300; font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
}
@font-face {
  font-family: 'GmarketSans'; font-weight: 500; font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
}
@font-face {
  font-family: 'GmarketSans'; font-weight: 700; font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
}

/* 제목·헤딩 포함 전체 Pretendard 통일 (smksc.co.kr 스타일) */
.hero-title, .sec02-copy, .sec02-copy strong, .sec03-title, .sec04-title, .sec05-title,
.cta-title, .s3-name, .s3-label, .step-name, .step-labels li, .ct-labels li,
.vc-big, .vc-title, .f-company,
.page-title, .p-label, .p-head, .sec-label, .sec-heading, .gv-lead, .gv-name, .biz-name,
.greet-head, .greet-sign .name, .fc-title, .sr-title, .sr-num, .acc-title, .acc-num, .hist-year,
.app-card .ac-title, .loc-info dt,
.case-card .cc-title, .cd-title, .cd-row .lbl, .case-page a,
.inq-label, .inq-head, .inq-flabel, .inq-submit, .inq-card .ic-head, .inq-card .ic-t {
  font-family: 'Pretendard', sans-serif !important;
}

/* ===== Reset / Base ===== */
:root {
  --blue: #009edd;
  --green: #abeca9;
  --black: #3b3b3b;
  --gray: #b1b1b1;
  --dark: #222;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
ul, li { list-style: none; }
a { text-decoration: none; color: inherit; }
button { border: 0; background: none; cursor: pointer; font: inherit; }
img { vertical-align: top; }
dl, dt, dd { margin: 0; }

body {
  font-family: 'Pretendard', sans-serif;
  color: var(--black);
  word-break: keep-all;
  background: #fff;
  overflow-x: hidden;
}

section, footer { position: relative; overflow: hidden; }

/* ===== Fit-to-screen =====
   섹션 박스(배경)는 화면 전체를 채우고,
   콘텐츠 캔버스(.inner)만 --s 배율로 축소된다.
   --s = min(1, 화면폭/1920, 화면높이/1138) : JS(main.js)에서 계산 */
.inner {
  position: relative;
  width: 1920px;
  margin: 0 auto;
  zoom: var(--s, 1);
}
.hero, .sec02, .sec03, .sec04, .sec05, .sec06 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero .inner  { height: 1080px; }
.sec02 .inner { height: 1000px; }
.sec03 .inner { height: 1080px; }
.sec04 .inner { height: 1000px; }
.sec05 .inner { height: 1138px; }
.sec06 .inner { height: 240px; }
.footer-dark .inner { height: 431px; }
.footer-bar .inner  { height: 109px; }

.dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--dim, .5));
  pointer-events: none;
}
.card-img {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ===== Scroll reveal motion ===== */
.reveal {
  opacity: 0;
  translate: 0 60px;
  transition: opacity .9s ease, translate .9s ease;
  transition-delay: var(--d, 0s);
}
.reveal.in {
  opacity: 1;
  translate: 0 0;
}
.capture .reveal { opacity: 1; translate: none; transition: none; }

/* ===== Chevron (border corner, crisp at any scale) ===== */
.chev {
  display: inline-block;
  box-sizing: border-box;
  width: 14px; height: 14px;
  border: solid #fff;
  border-width: 4px 4px 0 0;
}
/* down: ∨ */
.chev-down  { transform: rotate(135deg); }
/* right: › */
.chev-right { transform: rotate(45deg); }
/* left: ‹ */
.chev-left  { transform: rotate(-135deg); }

/* ===== 01. HERO ===== */
/* 풀스크린 이미지 슬라이더 — 다크 오버레이 + 화이트 타이포 */
.hero { height: 100vh; background: #10161c; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-slide {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s ease, transform 7s linear;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 14, 18, .55) 0%, rgba(10, 14, 18, .25) 55%, rgba(10, 14, 18, .12) 100%);
}
/* 하단을 sec02 화이트로 페이드 */
.gnb {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: calc(124px * var(--sw, 1));
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  overflow: hidden;
  transition: background .4s ease, height .4s ease, border-color .4s ease;
  z-index: 10;
}
/* 헤더 호버 시 다크 패널이 슬라이드 다운되며 서브메뉴 전체 노출 (대한상선 GNB 방식) */
.gnb:hover {
  height: calc(310px * var(--sw, 1));
  background: rgba(0, 0, 0, .8);
  border-color: transparent;
}
.gnb::before {
  content: '';
  position: absolute;
  left: 0; top: calc(124px * var(--sw, 1));
  width: 100%; height: 1px;
  background: rgba(255, 255, 255, .14);
  opacity: 0;
  transition: opacity .35s ease;
}
.gnb:hover::before { opacity: 1; }
.gnb-in {
  position: relative;
  width: 1920px;
  height: 124px;
  margin: 0 auto;
  zoom: var(--sw, 1);
}
.gnb .logo {
  position: absolute;
  left: 40px; top: 21px;
}
.gnb .logo img { width: 171px; height: 83px; }

/* 메뉴 — 중앙 정렬 등폭 컬럼 */
.menu {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  height: 124px;
}
.menu > ul {
  display: flex;
  height: 100%;
}
.menu > ul > li {
  position: relative;
  width: 190px;
  height: 100%;
  display: flex;
  justify-content: center;
  transition: width .4s ease;
}
/* 패널 오픈 시 메뉴 간격이 벌어지는 모션 (원본 .header.hover 패딩 확장) */
.gnb:hover .menu > ul > li { width: 236px; }
/* 컬럼 사이 세로 디바이더 (패널 오픈 시) */
.menu > ul > li::before,
.menu > ul > li:last-child::after {
  content: '';
  position: absolute;
  left: 0; top: 124px;
  width: 1px; height: 160px;
  background: rgba(238, 238, 238, .3);
  opacity: 0;
  transition: opacity .4s ease;
}
.menu > ul > li:last-child::after { left: auto; right: 0; }
.gnb:hover .menu > ul > li::before,
.gnb:hover .menu > ul > li:last-child::after { opacity: 1; }
.menu > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #fff;
  letter-spacing: 1.5px;
  white-space: nowrap;
}
/* 호버한 메뉴 아래 경계선 위치에 블루 언더라인 */
.menu > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .4s ease;
}
.menu > ul > li:hover > a::after { transform: scaleX(1); }
.menu .chev-down { width: 11px; height: 11px; border-width: 3px 3px 0 0; margin-left: 12px; vertical-align: 7px; border-color: #fff; }

.sub-menu {
  position: absolute;
  left: 0; top: 124px;
  width: 100%;
  padding: 30px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.sub-menu a {
  font-family: 'Pretendard', sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: rgba(255, 255, 255, .8);
  text-align: center;
  white-space: nowrap;
  padding: 7px 0;
  transition: color .2s ease;
}
.sub-menu a:hover { color: var(--blue); }
.gnb:hover .sub-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-sub {
  position: absolute;
  left: 112px; top: 388px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 6px;
  color: #009edd;
  white-space: nowrap;
  z-index: 2;
}
.hero-title {
  position: absolute;
  left: 105px; top: 430px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 100px;
  line-height: 1.18;
  letter-spacing: -1px;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
}
.hero-desc {
  position: absolute;
  left: 110px; top: 700px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
  z-index: 2;
}
.hero-indicator {
  position: absolute;
  left: 110px; bottom: 62px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 5;
}
.hero-indicator .ind {
  width: 44px; height: 3px;
  background: rgba(255, 255, 255, .35);
  transition: background .3s ease;
}
.hero-indicator .ind.is-active { background: #fff; }
.hero-scroll {
  position: absolute;
  left: 50%; bottom: 36px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, .9);
  z-index: 4;
}
.hero-scroll .line {
  display: inline-block;
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .2), #fff);
}

/* ===== 02. INTRO COPY ===== */
.sec02 { height: 100vh; background: #fff; }
.sec02-bg {
  position: absolute;
  inset: 0;
  /* 1920x1000 기준(34px -283px / 2455x1700)을 비율로 환산 */
  background: url('../images/sec02_bg.webp') no-repeat -6.4% 40.4% / 127.9% 170%;
  opacity: .45;
}
.sec02-copy {
  position: absolute;
  left: 0; top: 400px;
  width: 100%;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 96px;
  line-height: 144px;
  letter-spacing: -3.8px;
  color: #d9d9d9;
  text-align: center;
  white-space: nowrap;
}
.sec02-copy strong {
  font-weight: 700;
  background: linear-gradient(90deg, #029edd, #abeca9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sec02-copy .fill {
  background: linear-gradient(to right, #111 var(--p, 0%), #d9d9d9 var(--p, 0%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== 03. ABOUT SLIDER ===== */
.sec03 { height: 100vh; background: url('../images/sec03_bg.webp') 50% 100% / cover no-repeat #fff; }
/* 공통 영문 아이브로우 라벨 */
.sec-eyebrow {
  position: absolute;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 4px;
  color: #009edd;
  white-space: nowrap;
}
.sec03 .sec-eyebrow { left: 192px; top: 150px; }
/* 우측 세로 영문 텍스트 */
.sec03-side {
  position: absolute;
  left: 1852px; top: 190px;
  writing-mode: vertical-rl;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 6px;
  color: #b7c2c9;
  white-space: nowrap;
}
/* smksc m_tit과 동일 비율: 타이틀 80px / 설명 20px·#777, 간격 24px */
.sec03-title {
  position: absolute;
  left: 190px; top: 196px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 80px;
  line-height: 1.05;
  letter-spacing: 0;
  color: #111;
  white-space: nowrap;
}
.sec03-sub {
  position: absolute;
  left: 190px; top: 316px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 0;
  color: #777;
  white-space: nowrap;
}
/* smksc.co.kr m_about 스타일: 회전하는 원형 텍스트 배지 안에 prev/next */
.sec03-arrows {
  position: absolute;
  left: 1620px; top: 304px;
  width: 198px; height: 198px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 5;
}
.arrows-ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: s3rotate 10s linear infinite;
  pointer-events: none;
}
.arrows-ring text {
  font-family: 'Pretendard', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 2px;
  fill: #111;
}
@keyframes s3rotate {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
.arrow-btn {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s;
}
.arrow-btn:hover { transform: scale(1.2); }
.arrow-btn .chev { width: 13px; height: 13px; border-width: 3px 3px 0 0; border-color: #111; }

/* smksc.co.kr m_about 슬라이드: 동일 크기 카드 일렬,
   활성 카드(p1)는 위로 상승 + 큰 라벨 슬라이드-인 + 하단 텍스트 노출 */
.s3-slider { position: absolute; inset: 0; }
.s3-card {
  position: absolute;
  width: 740px;
  top: 500px;
  cursor: pointer;
  transition: left 1.2s, top 1.2s;
}
/* smksc 원본과 동일한 740×350 가로형 비율 */
.s3-imgbox {
  position: relative;
  height: 350px;
  border-radius: 30px;
  overflow: hidden;
  background: #000;
}
.s3-card .card-img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.s3-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
/* 이미지 안 좌하단 라벨 — 활성 시 아래로 밀려나감 */
.s3-label {
  position: absolute;
  left: 40px; bottom: 30px;
  font-weight: 800;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
  transition: transform 1.2s;
}
/* 활성 카드 전용 대형 라벨 — 우하단, 오른쪽 밖에서 슬라이드-인 */
.s3-label.on {
  left: auto; right: 28px; bottom: 20px;
  font-size: 80px;
  text-align: right;
  transform: translateX(130%);
}
/* 이미지 아래 설명 텍스트 — 이미지 뒤에 숨었다가 활성 시 내려옴 */
.s3-hover {
  position: relative;
  z-index: -1;
  padding: 40px 50px 0;
  transform: translateY(-100%);
  transition: transform 1.2s;
  pointer-events: none;
}
.s3-name {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  color: #111;
  margin-bottom: 14px;
}
.s3-desc {
  font-family: 'Pretendard', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: #444;
}
/* positions: 5 slots — smksc 배치: [왼쪽 살짝][내려간 카드][활성 p2][오른쪽 살짝][밖 대기] */
.s3-card.p0 { left: -570px; }
.s3-card.p1 { left: 190px; }
.s3-card.p2 { left: 950px; top: 394px; }
.s3-card.p3 { left: 1710px; }
.s3-card.p4 { left: 2470px; }

/* 활성(p2): 기본 라벨은 아래로 퇴장, 대형 라벨 슬라이드-인, 텍스트 노출 */
.s3-card.p2 .s3-label:not(.on) { transform: translateY(250%); }
.s3-card.p2 .s3-label.on { transform: translateX(0); }
.s3-card.p2 .s3-hover { transform: translateY(0); }

.s3-card.no-trans { transition: none; }
/* 캡처(스크린샷) 시 전환 없이 최종 위치를 즉시 렌더 */
.capture .s3-card { transition: none !important; }
.capture .step-card { transition: none !important; }
.capture .step-card.is-active .step-name,
.capture .step-card.is-active .step-desc { opacity: 1 !important; }

/* ===== 04. THREE VALUES (accordion) ===== */
/* 시공 현장 사진 풀블리드 + 어두운 오버레이 + 패럴랙스(fixed) — smksc m_biz와 같은 기법 */
.sec04 {
  height: 100vh;
  background: url('../images/standard_banner.webp') 50% 30% / cover no-repeat fixed #111;
}
.sec04::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.sec04 .sec-eyebrow { left: 0; top: 110px; width: 100%; text-align: center; color: #4fc3e8; }
.sec04-title {
  position: absolute;
  left: 0; top: 152px;
  width: 100%;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 80px;
  line-height: 104px;
  letter-spacing: -2px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.values {
  position: absolute;
  left: 106px; top: 329px;
  width: 1709px; height: 550px;
  display: flex;
  gap: 24px;
}
.value-card {
  position: relative;
  width: 409px; height: 550px;
  flex: 0 0 auto;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-sizing: border-box;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  transition: width .6s ease;
}
/* 카드 우상단 아웃라인 넘버 */
.vc-num {
  position: absolute;
  right: 36px; top: 22px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 900;
  font-size: 90px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .35);
  pointer-events: none;
}
.value-card.is-on { width: 842px; }
.value-card .card-img { opacity: .8; }
.value-card:nth-child(3) .card-img { opacity: .75; }

.vc-compact {
  position: absolute;
  left: 60px; bottom: 48px;
  opacity: 1;
  transition: opacity .4s ease .15s;
}
.value-card.is-on .vc-compact { opacity: 0; transition-delay: 0s; }
.vc-big {
  font-weight: 900;
  font-size: 40px;
  line-height: 52px;
  letter-spacing: -1px;
  color: #fff;
  white-space: nowrap;
}
.vc-small {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .75);
  white-space: nowrap;
}
.vc-expand {
  position: absolute;
  left: 64px; bottom: 56px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
}
.value-card.is-on .vc-expand {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .25s;
}
.vc-title {
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 52px;
  color: #fff;
  white-space: nowrap;
}
.vc-desc {
  margin-top: 14px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
  white-space: nowrap;
}

/* ===== 05. 7 STEPS SLIDER ===== */
.sec05 { height: 100vh; background: #3a424b; }
.sec05::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 120px 120px;
}
.sec05 .sec-eyebrow { left: 0; top: 96px; width: 100%; text-align: center; color: #4fc3e8; }
/* 우상단 아웃라인 워터마크 */
.sec05-word {
  position: absolute;
  right: 56px; top: 44px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 900;
  font-size: 170px;
  letter-spacing: 8px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .12);
  pointer-events: none;
}
.sec05-title {
  position: absolute;
  left: 0; top: 138px;
  width: 100%;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 80px;
  line-height: 104px;
  letter-spacing: -2px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.steps-track { position: absolute; inset: 0; }
.step-card {
  position: absolute;
  left: 765px; top: 605px;
  width: 493px; height: 225px;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  transition: left .7s ease, top .7s ease, width .7s ease, height .7s ease;
}
.step-card .card-img {
  opacity: .35;
  transition: opacity .7s ease;
}
.step-card .dim { opacity: 0; transition: opacity .7s ease; }
.step-card.is-active .card-img { opacity: 1; }
.step-card.is-active .dim { opacity: 1; }
.step-card.is-active { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px rgba(0, 0, 0, .5); }

.step-name {
  position: absolute;
  left: 56px; top: 266px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: #fff;
  white-space: nowrap;
  z-index: 1;
  opacity: 0;
  transition: opacity .5s ease;
}
.step-desc {
  position: absolute;
  left: 56px; top: 322px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
  z-index: 1;
  opacity: 0;
  transition: opacity .5s ease;
}
.step-card.is-active .step-name,
.step-card.is-active .step-desc { opacity: 1; transition-delay: .3s; }

.steps-timeline {
  position: absolute;
  left: 0; top: 950px;
  width: 100%; height: 30px;
}
.tl-line {
  position: absolute;
  left: 211px; top: 15px;
  width: 1488px; height: 1px;
  background: #525b64;
}
.tl-dot {
  position: absolute;
  top: 15px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #5a636c;
  transform: translate(-50%, -50%);
  transition: width .4s ease, height .4s ease, background .4s ease;
}
.tl-dot.is-active {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, #029edd, #abeca9);
}
.tl-dot:nth-child(2) { left: 211px; }
.tl-dot:nth-child(3) { left: 459px; }
.tl-dot:nth-child(4) { left: 707px; }
.tl-dot:nth-child(5) { left: 955px; }
.tl-dot:nth-child(6) { left: 1203px; }
.tl-dot:nth-child(7) { left: 1451px; }
.tl-dot:nth-child(8) { left: 1699px; }

.step-labels {
  position: absolute;
  left: 0; top: 998px;
  width: 100%;
}
.step-labels li {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.5px;
  color: #848e97;
  white-space: nowrap;
  cursor: pointer;
  transition: color .4s ease;
}
.step-labels li.is-active { font-weight: 900; color: #fff; }
.step-labels li:nth-child(1) { left: 211px; }
.step-labels li:nth-child(2) { left: 459px; }
.step-labels li:nth-child(3) { left: 707px; }
.step-labels li:nth-child(4) { left: 955px; }
.step-labels li:nth-child(5) { left: 1203px; }
.step-labels li:nth-child(6) { left: 1451px; }
.step-labels li:nth-child(7) { left: 1699px; }

/* ===== 06. CTA ===== */
.sec06 {
  height: calc(240px * var(--s, 1));
  background: linear-gradient(to bottom, #3a424b 50%, var(--dark) 50%);
  overflow: visible;
}
.cta-card {
  position: absolute;
  top: 0;
  height: 240px;
  border-radius: 20px;
  display: block;
  color: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
}
.cta-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .3);
}
.cta-contact {
  left: 105px;
  width: 843px;
  background: linear-gradient(115deg, #16303f 0%, #0d90c8 100%);
}
.cta-product {
  left: 972px;
  width: 842px;
  background: #10202b;
  border: 1px solid #2c4453;
  box-sizing: border-box;
}
.cta-title {
  position: absolute;
  left: 64px; top: 40px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 40px;
  white-space: nowrap;
}
.cta-desc {
  position: absolute;
  left: 64px; top: 108px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 33px;
  white-space: nowrap;
}
.cta-product .cta-title,
.cta-product .cta-desc { left: 64px; }
.cta-chev {
  position: absolute;
  right: 56px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 34px;
}
.cta-chev::before, .cta-chev::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 24px; height: 5.5px;
  border-radius: 100px;
  background: #fff;
}
.cta-chev::before { top: 7px; transform: translateX(-50%) rotate(45deg); }
.cta-chev::after  { top: 21px; transform: translateX(-50%) rotate(-45deg); }

/* ===== 07. FOOTER ===== */
.footer-dark {
  position: relative;
  height: calc(431px * var(--s, 1));
  background: var(--dark);
}
.f-company {
  position: absolute;
  left: 105px; top: 94px;
  font-weight: 900;
  font-size: 40px;
  letter-spacing: -.8px;
  color: #fff;
  white-space: nowrap;
}
.f-tagline {
  position: absolute;
  left: 273px; top: 111px;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -.46px;
  color: #fff;
}
.f-info {
  position: absolute;
  left: 125px; top: 204px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.f-info > div { display: flex; gap: 48px; align-items: baseline; }
.f-info dt {
  width: 79px;
  font-weight: 700;
  font-size: 25px;
  line-height: 30px;
  letter-spacing: -.5px;
  color: #fff;
}
.f-info dd {
  font-weight: 300;
  font-size: 23px;
  line-height: 30px;
  letter-spacing: -.46px;
  color: #a9a9a9;
}
.f-logo {
  position: absolute;
  left: 1528px; top: 145px;
  width: 286px; height: 139px;
}
.footer-bar {
  position: relative;
  height: calc(109px * var(--s, 1));
  background: #1a1a1a;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.footer-bar .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 125px;
}
.f-copy {
  font-weight: 400;
  font-size: 25px;
  letter-spacing: -.5px;
  color: #fff;
}
.f-copy strong { font-weight: 500; }
.f-links {
  display: flex;
  gap: 49px;
}
.f-links a {
  font-weight: 500;
  font-size: 25px;
  letter-spacing: -.5px;
  color: #fff;
}
.f-links a:hover { text-decoration: underline; }