@charset "utf-8";
/* ============================================================
SPCI — 공통 + 히어로(01)
Figma: SPCI_Web-ui / 01 (127:333) · 아트보드 1920 × 1080
============================================================ */
:root {
/* 브랜드 */
--color-cobalt: #2E5AD6;
--color-white: #ffffff;
--color-ink: #111418;
--font-base: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
/* 시안은 숫자·영문에 Roboto 를 썼다. 지금은 웹폰트를 싣지 않아 Pretendard 로
떨어지며, 나중에 Roboto 를 로드하면 이 변수만으로 바로 적용된다 */
--font-roboto: "Roboto", var(--font-base);
/* 히어로 오버레이 — 이 값만 바꾸면 배경 톤이 한 번에 조절된다 */
--hero-overlay: rgba(0, 0, 0, .45);
--hero-overlay-from: rgba(0, 0, 0, 0);
--hero-overlay-to: rgba(0, 0, 0, .8);
--hero-overlay-from-stop: 38%;
--hero-overlay-to-stop: 96%;
/* 영상이 없거나 로드에 실패했을 때 깔리는 바닥색 */
--hero-fallback-bg: #0b0f18;
/* 배경 영상 크로스페이드 길이 */
--hero-fade: 1s;
/* 02 섹션 — 오버레이와 전환 길이 */
--sec02-overlay: rgba(0, 0, 0, .65);
--sec02-overlay-to: rgba(0, 0, 0, .65);
--sec02-fallback-bg: #10151f;
--sec02-fade: .6s;
/* 04 섹션 */
/* 2026-09-18 배경이 어두운 사진 → 흰 바탕 선화(03 섹션 것)로 바뀌어 밝은 섹션으로 전환.
검은 막 대신 흰 막을 살짝 덮어 선을 눌러 준다 (글자는 진한 색) */
--sec04-overlay: rgba(20, 30, 60, .06); /* 아주 살짝 어둡게 (2026-09-18 피드백) */
--sec04-fallback-bg: #f4f6f9;
/* 05 섹션 */
--sec05-fallback-bg: #dfe3e8;
/* 07 섹션 */
--stat-line: #dedede;
/* 08 섹션 + 푸터 */
--sec-last-overlay: rgba(0, 0, 0, .2);
--sec-last-fallback-bg: #10151f;
--footer-bg: #222222;
--footer-desc: #929292;
--footer-muted: #7f7f7f;
--footer-line: #4e4e4e;
/* 06 섹션 */
--sec06-bg: #f5f5f5;
--step-dim-closed: .55; /* 닫힌 패널 딤 */
--step-dim-open: .25; /* 열리면 걷힌다 */
/* 03 섹션 */
--sec03-fallback-bg: #dfe3e8; /* 이미지가 없을 때 자리를 지키는 박스 색 */
--sec03-sticky-top: clamp(2rem, 6.5vh, 6rem);
--card-bg-soft: #f7f7f7;
--gray: #9f9f9f; /* 비활성 텍스트·인디케이터 */
--line-track: #ececec; /* 탭 밑선·진행 트랙 */
--ink-mid: #575757;
--ink-body: #878787;
/* 서브페이지 포인트 · 잉크 — 시안 변수 --color #135a9c / --black #222.
페이지 파일마다 --infra-point · --bm-point · --po-point 로 따로 들고 있던 값의 공용 이름이다 (2026-09-14, ESG 정책 페이지부터 쓴다) */
--sub-point: #135a9c;
--sub-ink: #222222;
/* 레이아웃 */
--gnb-x: clamp(1.25rem, 2.083vw, 2.5rem); /* 40 */
--gnb-y: clamp(1.25rem, 3.177vw, 3.8125rem); /* 61 */
}
/* 중문 — 한자는 Noto Sans SC (layout head 가 중문(/ch) 페이지에서만 싣는다). 숫자 · 영문은 그대로 Pretendard */
html[lang="zh"] {
--font-base: "Pretendard Variable", Pretendard, "Noto Sans SC", -apple-system, BlinkMacSystemFont,
system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* 국문용 word-break: keep-all(어절 단위 줄바꿈)이 곳곳에 걸려 있는데, 띄어쓰기가 없는 중문에서는 쉼표 사이 한 구절이
통째로 안 끊겨 카드 밖으로 넘쳐 잘린다 (2026-10-27). 중문은 글자 단위로 끊는다 — 문장부호가 줄 앞에 오지 않는 규칙은 브라우저가 지킨다 */
html[lang="zh"] body,
html[lang="zh"] body * { word-break: normal !important; }
/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/*
한 화면에 한 섹션씩 멈추게 한다.
mandatory 라도 03(설비 인프라)처럼 화면보다 큰 섹션 안에서는
브라우저가 자유 스크롤을 허용한다(스펙의 large-element 규칙).
그래서 03 은 위쪽에서 한 번 걸리고 안쪽은 그대로 흐른다.
*/
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
body {
background: var(--color-ink);
color: var(--color-white);
font-family: var(--font-base);
line-height: normal;
overflow-x: hidden;
}
ul { list-style: none; }
/* ============================================================
서브페이지 모바일 세로 간격 단계 (2026-09 결정)
서브페이지 모바일 시안이 없어 데스크톱 값을 비율로 줄여 쓰다 보니 섹션 사이가
52~56, 제목→내용이 18~24 로 빡빡했다 (393 폭 실측). 세 단계로 통일한다.
--sp-section 섹션과 섹션 사이 (전 52~56)
--sp-block 히어로→본문, 서브탭→첫 섹션, 섹션 안 큰 덩어리 사이 (전 20~30)
--sp-head 섹션 제목(infra-sec__head 류)→내용 (전 18~24)
카드 사이(16)·eyebrow→제목(10~12)·제목→lead(14) 는 그대로 둔다.
각 페이지 CSS 의 768 이하 규칙이 이 변수를 쓴다. 단위는 --u (375 기준, 최대 1px).
============================================================ */
@media (max-width: 768px) {
body.page {
--sp-section: calc(80 * var(--u));
--sp-block: calc(40 * var(--u));
--sp-head: calc(28 * var(--u));
}
}
img { display: block; border: 0; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-cobalt); outline-offset: 4px; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.skip-link {
position: absolute;
left: 1rem;
top: -100px;
z-index: 100;
padding: .625rem 1.125rem;
border-radius: .375rem;
background: var(--color-cobalt);
color: var(--color-white);
font-size: 1rem;
}
.skip-link:focus { top: 1rem; }
/* ============================================================
헤더
GNB 는 /gnb/gnb.css 로 옮겼다 (시안 3gC6DdCllqkGj4ATOQ8mMI · 2048:3).
전 페이지 공통 부품이라 이 파일에 두지 않는다.
여기 있던 예전 헤더(히어로 위에 투명하게 얹히던 것)는 걷어냈다.
새 헤더는 position: fixed 라 자리를 차지하지 않고 콘텐츠 위에 얹힌다.
그래서 섹션 높이는 예전처럼 100dvh 그대로다.
기본은 배경 없이 글자만 놓이고, 메뉴에 올렸을 때만 흰 배경이 깔린다.
============================================================ */
/* ============================================================
우측 섹션 인디케이터
============================================================ */
.page-nav {
position: fixed;
right: var(--gnb-x);
top: 50%;
transform: translateY(-50%);
z-index: 30;
}
.page-nav ul {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem; /* 원 간격 28 - 지름 8 */
}
.page-nav a {
display: block;
width: 8px;
height: 8px;
border-radius: 4px;
background: var(--color-white);
opacity: .45;
transition: opacity .2s ease, height .2s ease, background-color .4s ease;
}
.page-nav a:hover { opacity: .8; }
.page-nav .is-current a { height: 23px; opacity: 1; }
/* 배경이 밝은 섹션(03·05·06·07·08)에서는 흰 점이 배경에 묻힌다.
지금 보고 있는 섹션의 data-tone 을 보고 js/section-flow.js 가 이 클래스를 켠다.
섹션을 늘릴 때는 마크업에 data-tone="light" 만 붙이면 된다. */
.page-nav.is-on-light a { background: var(--color-ink); }
.page-nav.is-on-light a:hover { opacity: .7; }
/* 콘텐츠 폭이 1405 로 묶여 있어서, 화면이 그보다 좁아지면
콘텐츠가 좌우 여백까지 꽉 차고 점이 그 위에 올라탄다.
06 은 하필 그 자리가 파란 패널이라 어두운 점이 다시 묻힌다.
점을 여백 한가운데로 옮겨 콘텐츠와 겹치지 않게 한다. */
@media (max-width: 1500px) {
.page-nav { right: calc((var(--gnb-x) - 8px) / 2); }
}
/* ============================================================
섹션 공통 — 이후 섹션도 같은 규격으로 붙인다
============================================================ */
.sec,
.sec-hero {
position: relative;
width: 100%;
/* 헤더는 position: fixed 라 자리를 차지하지 않는다. 섹션이 한 화면을 그대로 쓴다 */
height: 100vh;
height: 100dvh;
overflow: hidden;
}
/* --- 스냅 지점 --- */
/* 화면 높이 섹션은 반드시 멈춘다. 빠르게 굴려도 건너뛰지 않는다 */
.sec,
.sec-hero {
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* 03 은 화면보다 길다. 들어올 때만 위를 맞추고 안에서는 흐르게 둔다
(always 를 주면 위로 되돌아갈 때 섹션 맨 위로 튄다) */
.sec-fac {
scroll-snap-align: start;
scroll-snap-stop: normal;
}
/* 푸터는 화면보다 짧다. 끝을 맞춰야 아래에 빈 공간이 생기지 않는다 */
.footer { scroll-snap-align: end; }
/* 인디케이터로 먼 섹션으로 건너뛰는 동안만 스냅을 푼다.
그러지 않으면 scroll-snap-stop: always 에 걸려 중간에서 멈춘다.
(js/section-flow.js 의 goTo) */
html.is-navigating { scroll-snap-type: none; }
/* 휠 이동을 스크립트가 맡아 움직이는 동안 (js/wheel-scroll.js). 도착 지점이 스냅 지점과 같으므로 끝나면 다시 켜도 튀지 않는다 */
html.is-wheeling { scroll-snap-type: none; scroll-behavior: auto; } /* 우리가 프레임마다 옮기므로 브라우저 smooth 는 끈다 */
/* ============================================================
01 히어로
============================================================ */
.sec-hero { background: var(--hero-fallback-bg); }
/* 사진이 없거나 실패해도 이 배경이 남아 레이아웃이 무너지지 않는다 */
.sec-hero__bg {
position: absolute;
inset: 0;
background-color: var(--hero-fallback-bg);
background-image: url("../assets/img/hero-poster.jpg");
background-size: cover;
background-position: center;
}
/* 배경 사진 3장 — 겹쳐 두고 투명도로만 바꾼다. 보이는 장은 아주 천천히 커진다 (켄 번즈) */
.sec-hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--hero-fade) ease;
}
.sec-hero__slide.is-active { opacity: 1; }
.sec-hero__slide img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 7s linear; /* INTERVAL(6s) + 페이드 동안 계속 움직인다 */
}
.sec-hero__slide.is-active img { transform: scale(1.06); }
/* 영상 장 (2026-09-18) — 사진 위에 겹쳐 두고 실제로 재생이 시작되면 나타난다.
그 전까지는 사진(포스터)이 보이므로 로딩 중 검은 화면이 없다. js/hero.js 가 만든다 (모바일은 세로 파일) */
.sec-hero__slide video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .8s ease;
}
.sec-hero__slide.is-playing video { opacity: 1; }
/* 영상에는 확대를 걸지 않는다 (2026-10-23). 느린 scale 전환이 움직이는 영상과 겹치면 매 프레임 재샘플링으로 떨려 보였다.
사진(포스터)의 확대는 그대로다 — 영상은 재생 시작 직후 페이드인되므로 그 시점의 사진 배율 차이는 1% 안팎이다 */
.sec-hero__slide video { transform: none; transition: opacity 1.2s ease; }
.sec-hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
var(--hero-overlay-from) var(--hero-overlay-from-stop),
var(--hero-overlay-to) var(--hero-overlay-to-stop)),
var(--hero-overlay);
}
/* --- 카피 --- */
.sec-hero__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column; /* 카피 아래에 점이 온다 */
align-items: center;
justify-content: center;
height: 100%;
padding: 0 var(--gnb-x) 8vh; /* 시안의 카피 중심(41.8%)에 맞춰 살짝 위로 */
}
/* 카피 3벌을 같은 자리에 겹쳐 둔다. 한 벌만 보이고(hidden 아님) 나머지는 hidden 이다.
높이는 가장 긴 카피가 아니라 보이는 카피를 따라가므로 grid 로 겹치되 hidden 은 자리를 차지하지 않는다 */
.sec-hero__copies {
position: relative;
display: grid;
width: 100%;
}
/* 카피 뒤에 세로 그라데이션 딤 — 사진의 밝은 구간에 글이 얹혀도 읽히게.
화면 폭을 다 덮고 위아래로 스며 사라지므로 상자로 보이지 않는다.
.sec-hero__inner 가 z-index 로 쌓임 맥락을 만들어 -1 이어도 오버레이보다 위, 카피보다 아래에 놓인다 */
.sec-hero__copies::before {
content: "";
position: absolute;
left: 50%;
top: -14vh;
bottom: -14vh;
width: 100vw;
transform: translateX(-50%);
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 50%, rgba(0, 0, 0, 0) 100%);
z-index: -1;
pointer-events: none;
}
.sec-hero__copy {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(.875rem, 1.563vw, 1.875rem); /* 30 */
opacity: 0;
transform: translateY(30px);
}
.sec-hero__copy[hidden] { display: none; }
/* 첫 그리기(is-loaded) 와 장 전환(is-active) 모두 같은 등장 동작이다 */
.is-loaded .sec-hero__copy.is-active {
opacity: 1;
transform: none;
transition: opacity .8s ease-out, transform .8s ease-out;
}
/* 나가는 카피는 살짝 내려가며 사라진다 (js COPY_SWAP 350ms 와 맞춤) */
.sec-hero__copy.is-out {
opacity: 0;
transform: translateY(-20px);
transition: opacity .35s ease-in, transform .35s ease-in;
}
.sec-hero__title {
margin: 0;
font-weight: 700;
/* 시안 140. 카피가 3벌이 되면서 '고객과 함께 성장하는 SPCI' 처럼 긴 줄이 생겼고
아래에 한 줄 설명이 붙어, 110 으로 낮췄다 (1920 기준). 시안 대비 의도적 축소다 */
font-size: clamp(2.25rem, 5.729vw, 6.875rem); /* 110 */
line-height: 1.15;
letter-spacing: -.03em;
text-align: center;
text-wrap: balance;
}
.sec-hero__title-em,
.sec-hero__title-brand {
font-weight: 800;
font-size: clamp(2.375rem, 5.99vw, 7.1875rem); /* 115 */
}
.sec-hero__title-em { color: var(--color-cobalt); }
/* 제목 아래 한 줄 (클라이언트 피드백으로 추가 — 시안에는 없다) */
.sec-hero__sub {
margin: 0;
font-weight: 400;
font-size: clamp(.9375rem, 1.354vw, 1.625rem); /* 26 */
line-height: 1.6;
letter-spacing: -.02em;
text-align: center;
color: rgba(255, 255, 255, .85);
word-break: keep-all;
}
/* 데스크톱에서는 한 줄로 읽히게
을 없앤다. 좁은 화면에서만 두 줄 */
.sec-hero__br { display: none; }
/* --- 조작부 — 왼쪽 아래 모서리 ---
[ ‹ ] 01 / 03 ━━━━━━━━━━━ [ › ]
가운데 세로선은 카피와 SCROLL 에 맡기고, 몇 번째인지·언제 넘어가는지는 모서리에서 조용히 알린다.
숫자는 사업모델 프로세스의 01·02 와 같은 Roboto 다 */
.sec-hero__ctrl {
position: absolute;
left: var(--gnb-x);
bottom: clamp(2rem, 4.4vh, 3rem);
z-index: 2;
display: flex;
align-items: center;
gap: clamp(.75rem, 1.042vw, 1.25rem); /* 20 */
color: var(--color-white);
opacity: 0;
transition: opacity .8s ease-out .4s;
}
.is-loaded .sec-hero__ctrl { opacity: 1; }
.sec-hero__counter {
display: flex;
align-items: baseline;
gap: .375rem;
margin: 0;
font-family: var(--font-roboto);
font-variant-numeric: tabular-nums; /* 숫자가 바뀌어도 폭이 흔들리지 않게 */
}
.sec-hero__num {
font-weight: 700;
font-size: clamp(1.25rem, 1.458vw, 1.75rem); /* 28 */
line-height: 1;
}
.sec-hero__total {
font-weight: 500;
font-size: clamp(.75rem, .729vw, .875rem); /* 14 */
color: rgba(255, 255, 255, .6);
}
/* 진행 막대 — INTERVAL 동안 왼쪽에서 오른쪽으로 찬다. 길이는 js 가 --hero-interval 로 넣는다 */
.sec-hero__bar {
position: relative;
width: clamp(4rem, 6.25vw, 7.5rem); /* 120 */
height: 2px;
background: rgba(255, 255, 255, .28);
overflow: hidden;
}
.sec-hero__bar i {
position: absolute;
inset: 0;
background: var(--color-white);
transform: scaleX(0);
transform-origin: left;
}
.sec-hero__bar.is-running i { animation: heroBar var(--hero-interval, 6s) linear forwards; }
.sec-hero__bar.is-paused i { animation-play-state: paused; }
@keyframes heroBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* 이전/다음 — 얇은 꺾쇠 하나 */
.sec-hero__arrow {
position: relative;
width: clamp(1.75rem, 1.875vw, 2.25rem); /* 36 */
height: clamp(1.75rem, 1.875vw, 2.25rem);
padding: 0;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 50%;
background: none;
color: var(--color-white);
cursor: pointer;
transition: border-color .3s ease, background-color .3s ease;
}
.sec-hero__arrow::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: .4em;
height: .4em;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: translate(-40%, -50%) rotate(45deg);
}
.sec-hero__arrow--prev::before { transform: translate(-60%, -50%) rotate(-135deg); }
.sec-hero__arrow:hover { border-color: var(--color-white); background: rgba(255, 255, 255, .12); }
/* --- 스크롤 유도 --- */
.sec-hero__scroll {
position: absolute;
left: 50%;
bottom: 0;
z-index: 2;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.sec-hero__scroll-label {
font-weight: 500;
font-size: clamp(.75rem, 1.302vw, 1.5625rem); /* 25 */
letter-spacing: .05em;
}
.sec-hero__scroll-line {
position: relative;
width: 1px;
height: clamp(3.75rem, 5.208vw, 6.25rem); /* 100 */
margin-top: clamp(1rem, 1.198vw, 1.4375rem); /* 23 */
overflow: hidden;
background: #6b6b6b;
}
/* 시안의 흰색 50px 구간을 아래로 흘려 스크롤을 유도한다 */
.sec-hero__scroll-line::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 50%;
background: var(--color-white);
animation: heroScrollFlow 2.2s ease-in-out infinite;
}
@keyframes heroScrollFlow {
0% { transform: translateY(-100%); }
60% { transform: translateY(200%); }
100% { transform: translateY(200%); }
}
/* ============================================================
반응형 — 375px 기준
============================================================ */
@media (max-width: 768px) {
.gnb__menu,
.gnb__lang { display: none; }
.gnb__toggle { display: flex; }
.page-nav { display: none; }
.sec-hero__title { line-height: 1.2; word-break: keep-all; } /* '양산 / 으로' 처럼 어절 중간에서 끊기지 않게 (2026-09-18) */
/* 포스터 사진의 크롭 중심을 모바일 영상(세로 크롭)과 맞춘다 — 사진→영상으로 넘어갈 때 장면이 튀지 않게.
1번 항공은 건물 벽의 SPCI 간판이 들어오게 왼쪽(20%), 2번 간판은 글자가 들어오게 오른쪽(54%),
3번 반응기는 작업자가 들어오게 왼쪽(30%) (2026-09-18) */
.sec-hero__slide:nth-child(1) img { object-position: 20% 50%; }
.sec-hero__slide:nth-child(2) img { object-position: 54% 50%; }
.sec-hero__slide:nth-child(3) img { object-position: 30% 50%; }
/* ---------- 히어로 아래 묶음 (좁은 화면) ----------
아래에서부터 SCROLL(선 64 + 글자) → 16 → 페이저 한 줄 → 32 + 안전영역.
카피 블록은 히어로 세로 가운데 그대로 두고, 아래 여백만 묶음이 들어갈 만큼 남긴다 */
.sec-hero__inner { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 60 * var(--u)); }
/* 2026-09-18: 히어로 높이는 dvh(주소창이 접히면 늘어남)라 아래에 다음 섹션이 비치지 않는다.
대신 카피 · SCROLL · 페이저는 svh 기준으로 위에서 재서 주소창이 접혀도 자리가 바뀌지 않는다 */
.sec-hero__scroll {
bottom: auto;
top: calc(100svh - env(safe-area-inset-bottom, 0px) - 32 * var(--u) - 87 * var(--u));
}
.sec-hero__scroll-label { font-size: calc(11 * var(--u)); }
.sec-hero__scroll-line { height: calc(64 * var(--u)); margin-top: calc(8 * var(--u)); }
/* 페이저 — 양쪽 화살표 사이 남는 폭을 진행 막대가 전부 쓴다 */
.sec-hero__ctrl {
left: var(--gnb-x);
right: var(--gnb-x);
/* SCROLL 묶음(글자 ~15 + 8 + 선 64 ≈ 87) 위로 16, 페이저 자신 높이 28 */
bottom: auto;
top: calc(100svh - env(safe-area-inset-bottom, 0px) - 32 * var(--u) - 87 * var(--u) - 16 * var(--u) - 28 * var(--u));
gap: calc(12 * var(--u));
}
.sec-hero__arrow { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.sec-hero__bar { flex: 1 1 auto; width: auto; height: 2px; background: rgba(255, 255, 255, .2); }
}
/* 세로가 짧은 폰(가로 모드·SE 급)에서는 SCROLL 이 카피와 겹치므로 감춘다. 페이저가 그 자리로 내려온다 */
@media (max-width: 768px) and (max-height: 640px) {
.sec-hero__scroll { display: none; }
.sec-hero__ctrl { bottom: auto; top: calc(100svh - env(safe-area-inset-bottom, 0px) - 32 * var(--u) - 28 * var(--u)); }
}
/*
좁은 화면의 히어로 카피.
전에는 560px 이하 30px, 420px 이하 26px 로 고정해 두었다.
'한 줄이 화면을 넘지 않게' 맞춘 값인데, 가장 좁은 기기를 기준으로 잘라 놓으니
375 짜리 화면에서도 26px 이 되어 카피가 화면 높이의 8% 밖에 차지하지 못했다.
화면은 꽉 찬 한 장인데 글자만 작으니 여백만 크게 느껴진다.
실측: 375(글자 폭 328 가용)에서 42px 까지 두 줄이 유지된다. 상한은 약 11vw.
글꼴이 대체될 경우를 감안해 10.5vw 로 잡아 여유를 둔다.
*/
@media (max-width: 560px) {
.sec-hero__title { font-size: clamp(2rem, 10.5vw, 3.25rem); } /* 32 ~ 52 */
.sec-hero__title-em,
.sec-hero__title-brand { font-size: clamp(2.125rem, 11.3vw, 3.5rem); }
.sec-hero__sub { font-size: clamp(.875rem, 3.7vw, 1rem); padding: 0 .5rem; }
.sec-hero__br { display: inline; } /* 두 줄로 */
}
@media (max-width: 420px) {
:root { --gnb-x: 1rem; --gnb-y: 1.25rem; }
}
/* ============================================================
02 인프라 / 기술 / 제품 — 탭 로테이션
Figma: 02 (127:317) · 1920 × 1080
============================================================ */
.sec-tabs { background: var(--sec02-fallback-bg); }
/* --- 배경 (레이어를 겹쳐두고 하나씩 보여준다) --- */
.sec-tabs__bg { position: absolute; inset: 0; }
.sec-tabs__bg-layer {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--sec02-fade) ease;
will-change: opacity; /* 배경([data-flow-bg])이 커지는 동안 같이 페이드된다 — 미리 레이어로 */
}
.sec-tabs__bg-layer.is-active { opacity: 1; }
.sec-tabs__bg-layer img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 48%; /* 시안 크롭 중심 (1436, 910) */
/* 켄 번즈 (2026-09-16) — 보이는 동안 천천히 커지며 흐른다. 자동 전환 5초보다 길게(9초) 잡아
끝까지 가지 않고 다음 장으로 넘어간다. 애니메이션이 아니라 transition 이라
나가는 장도 제자리로 돌아가며 사라지므로 튀지 않는다 */
transform: scale(1.02);
transition: transform 9s linear;
will-change: transform;
}
.sec-tabs__bg-layer.is-active img { transform: scale(1.12) translate(var(--kb-x, 0), var(--kb-y, 0)); }
/* 장마다 흐르는 방향을 달리한다 */
.sec-tabs__bg-layer:nth-child(1) { --kb-x: -1.6%; --kb-y: 0; }
.sec-tabs__bg-layer:nth-child(2) { --kb-x: 1.6%; --kb-y: -.8%; }
.sec-tabs__bg-layer:nth-child(3) { --kb-x: 0; --kb-y: 1.4%; }
.sec-tabs__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0) 13.6%, var(--sec02-overlay-to) 99.8%),
var(--sec02-overlay);
}
/* --- 본문 --- */
.sec-tabs__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 562fr) minmax(0, 843fr);
/* 두 칸을 다 늘려 놓고 안에서 세로 가운데를 맞춘다.
전에는 탭은 아래, 글은 위(start)에 붙여 시안 좌표(153/153)를 따랐는데,
글+사진이 위로 몰려 제목 위 여백은 크고 사진 아래는 뷰포트에 잘렸다 (2026-09-10 수정) */
align-items: stretch;
width: min(1405px, calc(100% - var(--gnb-x) * 2));
height: 100%;
margin: 0 auto;
padding: 10vh 0;
}
.sec-tabs__nav {
align-self: center; /* 탭 묶음의 세로 중심 = 오른쪽 블록의 세로 중심 */
display: flex;
flex-direction: column;
gap: clamp(.5rem, 1.042vw, 1.25rem); /* 20 */
}
.sec-tabs__tab {
font-weight: 900;
font-size: clamp(2rem, 3.906vw, 4.6875rem); /* 75 */
line-height: 1.36; /* 102 / 75 */
text-align: left;
color: #515151;
transition: color .3s ease;
}
.sec-tabs__tab:hover { color: #8a9dc4; }
.sec-tabs__tab.is-active { color: var(--color-cobalt); }
/* 활성 탭 아래 진행 바 — 자동 전환 간격(5초, js/sec-tabs.js INTERVAL)만큼 차오른다.
탭을 옮기면 클래스가 새 탭으로 가므로 처음부터 다시 찬다 (2026-09-16) */
.sec-tabs__tab { position: relative; padding-bottom: .12em; }
.sec-tabs__tab::after {
content: "";
position: absolute;
left: 0; bottom: 0;
height: 3px;
width: 0;
background: var(--color-cobalt);
opacity: 0;
}
.sec-tabs__tab.is-active::after { opacity: 1; animation: sec02Progress 5s linear forwards; }
@keyframes sec02Progress { from { width: 0; } to { width: 100%; } }
/* 오른쫝 블록 — 글과 사진을 한 덩어리로 세로 가운데에 둔다. 위아래 남는 여백이 같아진다 */
.sec-tabs__panel {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
/* 텍스트는 페이드아웃 → 교체 → 페이드인 */
.sec-tabs__text { transition: opacity .3s ease, transform .3s ease; }
.sec-tabs__text.is-out { opacity: 0; transform: translateY(12px); }
.sec-tabs__title {
font-weight: 800;
font-size: clamp(1.5rem, 2.604vw, 3.125rem); /* 50 */
line-height: 1.36;
}
.sec-tabs__desc {
margin-top: clamp(1rem, 1.51vw, 1.8125rem); /* 29 */
font-size: clamp(.9375rem, 1.563vw, 1.875rem); /* 30 */
line-height: 1.333; /* 40 / 30 */
/* 탭마다 설명 줄 수가 다르다 (Technology 3줄 / Facilities·Products 2줄 + 문단 간격 + 1줄).
줄 수대로 높이가 바뀌면 아래 사진이 탭을 옮길 때마다 위아래로 튄다 → 가장 큰 쪽(3줄 + 문단 간격)으로 고정 */
min-height: calc(3 * 1.333em + 1.25vw);
}
/* 문단은 로 나뉘고 사이는 24 (전에는 빈 줄 한 줄 = 40) */
.sec-tabs__desc p { margin: 0; }
.sec-tabs__desc p + p { margin-top: clamp(.75rem, 1.25vw, 1.5rem); } /* 24 */
.sec-tabs__figure {
position: relative;
width: 100%;
margin-top: clamp(1.5rem, 3.438vw, 4.125rem); /* 66 */
/* 시안 비율(843:430 → 430 높이)은 1080 뷰포트에서 아래가 잘렸다.
높이를 뷰포트의 46% 또는 480(1920 기준) 중 작은 쪽으로 묶는다. 잘리는 쪽은 object-fit: cover 가 맡는다 */
height: min(46vh, 25vw);
overflow: hidden;
background: var(--sec02-fallback-bg);
}
.sec-tabs__figure-layer {
position: absolute;
inset: 0;
opacity: 0;
/* 들어오는 사진은 살짝 커진 상태에서 제자리로 내려앉는다 (2026-09-16) */
transform: scale(1.06);
transition: opacity var(--sec02-fade) ease, transform 1.4s cubic-bezier(.22, 1, .36, 1);
}
.sec-tabs__figure-layer.is-active { opacity: 1; transform: scale(1); }
/* 사진 위를 지나가는 밝은 띠 — 전환 순간 한 번 */
.sec-tabs__figure-layer::after {
content: "";
position: absolute;
top: 0; bottom: 0;
left: -30%;
width: 30%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-12deg);
opacity: 0;
pointer-events: none;
}
.sec-tabs__figure-layer.is-active::after { animation: sec02Sheen 1.1s ease-out .15s 1; }
@keyframes sec02Sheen {
0% { left: -30%; opacity: 0; }
20% { opacity: 1; }
100% { left: 110%; opacity: 0; }
}
/* 시안의 위아래 여백 153px 은 900px 높이 기준이다.
창이 낮으면 그 여백 때문에 이미지 아래가 잘려 나간다.
한 화면에 담는 섹션이라 잘린 부분은 스크롤로도 볼 수 없으므로 여백부터 줄인다. */
@media (min-width: 769px) and (max-height: 800px) {
.sec-tabs__inner { padding: 8vh 0; }
.sec-tabs__figure { margin-top: clamp(1rem, 2.2vw, 2.5rem); }
}
@media (min-width: 769px) and (max-height: 700px) {
.sec-tabs__inner { padding: 5vh 0; }
/* 843:430 비율대로 두면 이미지 하나가 430px 을 차지해 낮은 창을 통째로 먹는다.
높이를 눌러도 잘리는 쪽은 object-fit: cover 가 처리한다 */
.sec-tabs__figure { max-height: 50vh; }
}
.sec-tabs__figure-layer img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 39% 40%; /* 시안 크롭 중심 (533, 368) */
}
/* 텍스트 강조 — 섹션마다 따로 정의하지 않고 여기 한 곳만 쓴다 */
.c-brand { color: var(--color-cobalt); }
.c-gray { color: var(--gray); }
/* 아직 카피가 확정되지 않은 항목 표시 */
.is-tbd::after {
content: " ○";
color: #ffb020;
font-weight: 400;
}
/* 섹션을 가리지 않는 범용 표시 — 확정 전 카피에 붙인다 */
.is-draft {
border-bottom: 1px dashed #e07b39;
padding-bottom: .25em;
}
/* --- 02 반응형 (기본 스타일 뒤에 두어야 덮이지 않는다) --- */
@media (max-width: 768px) {
/* 좁은 화면은 오버레이를 균일하게 — 위쪽만 밝게 남기는 그라데이션이 히어로 아래에서 밝은 띠처럼 보였다 (2026-09-18) */
.sec-tabs__overlay { background: var(--sec02-overlay); }
.sec-tabs__inner {
/* minmax(0,·) 가 없으면 탭 줄이 내용 폭만큼 벌어져 컨테이너를 밀어낸다 */
grid-template-columns: minmax(0, 1fr);
align-content: center;
align-items: stretch;
gap: clamp(1.5rem, 5vw, 2.5rem);
padding: 9vh 0;
}
/* 탭을 위로 올리고 가로로 눕힌다 */
.sec-tabs__nav {
order: -1;
align-self: start;
min-width: 0;
flex-direction: row;
flex-wrap: wrap;
gap: clamp(.75rem, 4vw, 1.5rem);
}
.sec-tabs__tab {
font-size: clamp(1.0625rem, 4.6vw, 1.5rem);
line-height: 1.3;
}
/* 데스크톱 비율(843:430)을 그대로 쓰면 좁은 화면에서 띠처럼 얇아진다 */
/* 데스크톱의 높이 제한(min(46vh, 25vw))은 좁은 화면에서 98px 로 뭉개진다 → 비율로 되돌린다 */
.sec-tabs__figure { margin-top: clamp(1.25rem, 5vw, 2rem); height: auto; aspect-ratio: 16 / 10; }
/* 좁은 화면에서는 Products 가 2줄 + 문단 간격 + 2줄이 된다 → 그 높이로 고정 */
.sec-tabs__desc { min-height: calc(4 * 1.333em + .75rem); }
.sec-tabs__desc p + p { margin-top: .75rem; }
}
/* ============================================================
03 FACILITIES — 스택 카드
원안: 시안 03 (127:271) 은 왼쪽 고정 제목 + 오른쪽 지그재그 카드였다.
2026-09-10 클라이언트 결정으로 스택 카드 안(spci_sec03_D_final_v2.html)으로 바꿨다.
원안 마크업·CSS·JS 는 docs/backup/sec03-zigzag/ 에 있다 (되돌리는 법도 거기 README).
구성
머리 왼쪽 눈썹 + 제목, 오른쪽 아래에 한 줄 설명
카드 4 화면 위에 24 씩 어긋나게 붙는다(sticky). 다음 장이 올라오면 앞 장은 살짝 줄고 옅어진다
(js/sec-fac.js). 안은 사진 절반 + 글 절반, 오른쪽 위에 큰 번호 워터마크
배경 "FACILITIES" 워터마크가 스크롤에 따라 옆으로 천천히 흐른다
프로토타입에서 뺀 것: 파란 글로우(사이트 어법에 없다), blur 필터(스크롤마다 넷을 다시 그려 버벅인다),
수치·태그(확정 자료 아님 — 문구는 원안 그대로). 카드 높이는 640 → 560.
치수는 프로토타입처럼 --u(1920 기준, gnb.css) 를 쓴다.
============================================================ */
.sec-fac {
position: relative;
padding: calc(140 * var(--u)) 0 calc(40 * var(--u));
background: #f4f7fb; /* 프로토타입 라이트 톤 — 서브페이지 회색 판과 같은 계열 */
color: var(--color-ink);
/* 워터마크가 옆으로 넘친다. hidden 은 스크롤 컨테이너가 되어 안쪽 sticky 가 죽으므로 clip */
overflow-x: clip;
}
/* 배경 워터마크 — 카드처럼 화면에 붙어(sticky) 스크롤 내내 카드 뒤에 남는다.
처음엔 섹션 위에 고정해 두었는데 3번 카드부터는 화면에서 사라져 배경이 비었다 (2026-09-11).
높이 0 인 상자가 붙고, 글자는 그 안에 절대 위치로 놓인다. 낱말은 자리 잡은 카드의 data-mark 를 따라 바뀐다 (js) */
.sec-fac__mark {
position: sticky;
top: 0;
z-index: 0;
height: 0;
pointer-events: none;
user-select: none;
}
.sec-fac__mark span {
position: absolute;
left: calc(-40 * var(--u));
top: calc(60 * var(--u));
font-family: var(--font-roboto);
font-weight: 800;
font-size: calc(360 * var(--u));
line-height: 1;
letter-spacing: -.06em;
color: rgba(20, 40, 80, .035);
white-space: nowrap;
transition: opacity .35s ease;
}
.sec-fac__mark.is-swap span { opacity: 0; }
.sec-fac__inner {
position: relative;
z-index: 1;
width: min(1400px, calc(100% - var(--gnb-x) * 2));
margin: 0 auto;
}
/* --- 머리 --- */
.sec-fac__head {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
margin-bottom: calc(72 * var(--u));
}
.sec-fac__label {
margin: 0 0 calc(18 * var(--u));
font-weight: 500;
font-size: calc(20 * var(--u));
color: var(--color-cobalt);
}
.sec-fac__title {
margin: 0;
font-weight: 700;
font-size: calc(52 * var(--u));
line-height: 1.25;
letter-spacing: -.02em;
}
.sec-fac__desc {
justify-self: end;
max-width: calc(520 * var(--u));
margin: 0;
font-size: calc(18 * var(--u));
line-height: 1.7;
color: var(--ink-mid);
word-break: keep-all;
}
/* --- 카드 스택 --- */
.sec-fac__stack { position: relative; margin: 0; padding: 0; list-style: none; }
/*
스냅 표지 (li.fac-snap) — 카드 앞에 놓인 높이 0 의 항목.
스크롤에 묶인 움직임은 천천히 굴릴 때만 보이고 빠르게 넘기면 카드 넷이 한 번에 지나갔다.
그래서 한 번 굴리면 다음 카드가 자리 잡은 상태에서 멈추도록 스냅을 건다 (메인의 다른 섹션과 같은 always).
카드 자체는 sticky 라 스냅 대상이 될 수 없어(붙은 위치와 원래 위치가 다르다) 바로 앞의 표지에 건다.
scroll-margin-top 은 그 카드가 붙는 자리와 같아야 멈춘 순간 카드가 정확히 제자리다.
카드를 li 로 감싸는 방법은 안 된다 — sticky 는 감싼 li 안에서만 붙어 스택이 풀린다.
좁은 화면은 html 스냅 자체가 꺼져 있어(아래 미디어) 영향이 없다 (2026-09-11)
*/
.fac-snap {
height: 0;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.fac-snap:nth-child(1) { scroll-margin-top: calc(96 * var(--u)); }
.fac-snap:nth-child(3) { scroll-margin-top: calc(120 * var(--u)); }
.fac-snap:nth-child(5) { scroll-margin-top: calc(144 * var(--u)); }
.fac-snap:nth-child(7) { scroll-margin-top: calc(168 * var(--u)); }
/* 마지막 장 아래로 스크롤이 조금 더 이어져야 마지막 장이 다 펴진 채로 잠시 머문다 */
.sec-fac__tail { height: calc(120 * var(--u)); }
.fac-card {
position: sticky;
display: grid;
grid-template-columns: 1fr 1fr;
height: calc(560 * var(--u)); /* 프로토타입 640 — 넷을 겹치면 길어져 한 단 낮췼다 */
margin-bottom: calc(40 * var(--u));
border: 1px solid #e2e6ec;
border-radius: calc(24 * var(--u));
overflow: hidden;
background: var(--color-white);
box-shadow: 0 calc(20 * var(--u)) calc(50 * var(--u)) rgba(20, 40, 80, .08);
transform-origin: top center;
will-change: transform;
}
/* 옅어지는 효과는 카드 자체의 opacity 가 아니라 위에 덮는 바탕색 막(::after)으로 낸다.
카드를 투명하게 하면 뒤에 겹쳐 있는 앞 장들의 글·사진이 비쳐 보인다 (프로토타입은 blur 로 가렸다).
--fac-veil 은 js/sec-fac.js 가 0~1 로 넣는다 */
.fac-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: #f4f7fb; /* 섹션 바탕색 — 바탕으로 잦아드는 느낌 */
opacity: var(--fac-veil, 0);
pointer-events: none;
}
/* 붙는 자리 — 장마다 24 씩 내려가 앞 장의 윗변이 살짝 남는다 */
/* (표지가 홀수 번째, 카드가 짝수 번째다) */
.fac-card:nth-child(2) { top: calc(96 * var(--u)); }
.fac-card:nth-child(4) { top: calc(120 * var(--u)); }
.fac-card:nth-child(6) { top: calc(144 * var(--u)); }
.fac-card:nth-child(8) { top: calc(168 * var(--u)); }
.fac-card__pic {
position: relative;
overflow: hidden;
background: var(--sec03-fallback-bg);
}
.fac-card__pic img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* 스크롤하는 동안 위아래로 흐를 여유 (js 가 translateY 를 넣는다) */
transform: scale(1.15);
will-change: transform;
}
.fac-card__txt {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: calc(64 * var(--u)) calc(72 * var(--u));
}
.fac-card__n {
position: absolute;
top: calc(32 * var(--u));
right: calc(56 * var(--u));
font-family: var(--font-roboto);
font-weight: 700;
font-size: calc(140 * var(--u));
line-height: 1;
letter-spacing: -.05em;
color: rgba(20, 40, 80, .05);
pointer-events: none;
}
.fac-card__en {
margin: 0 0 calc(14 * var(--u));
font-weight: 500;
font-size: calc(14 * var(--u));
letter-spacing: .04em;
text-transform: uppercase;
color: var(--color-cobalt);
}
.fac-card__title {
margin: 0 0 calc(20 * var(--u));
font-weight: 700;
font-size: calc(40 * var(--u));
letter-spacing: -.02em;
}
.fac-card__desc {
max-width: calc(520 * var(--u));
margin: 0;
font-size: calc(17 * var(--u));
line-height: 1.75;
color: var(--ink-mid);
word-break: keep-all;
}
/* 태그 — 설명 아래 알약 모양 (프로토타입 .tags). 내용은 클라이언트 확정(2026-09-11) */
.fac-card__tags {
display: flex;
flex-wrap: wrap;
gap: calc(8 * var(--u));
margin: calc(28 * var(--u)) 0 0;
}
.fac-card__tags span {
padding: calc(7 * var(--u)) calc(12 * var(--u));
border: 1px solid #dfe5ee;
border-radius: 999px;
background: #f4f7fb;
font-size: calc(13 * var(--u));
line-height: 1.3;
letter-spacing: -.01em;
color: var(--ink-mid);
white-space: nowrap;
}
/* 첫 태그(카드의 핵심 하나)는 파란 테두리·글자로만 구분한다 — 무게 차이는 두되 색으로 채우진 않는다.
(처음엔 코발트로 채웠는데 오버 효과와 겹쳐 '항상 눌린 것' 처럼 보였다) */
.fac-card__tags .is-key {
border-color: rgba(46, 90, 214, .45);
color: var(--color-cobalt);
font-weight: 600;
}
/* 짚으면 어느 태그든 코발트로 차오르고 살짝 뜬다 (터치 화면은 hover 가 눌어붙으므로 마우스가 있는 기기에서만) */
@media (hover: hover) {
.fac-card__tags span {
cursor: default;
transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* 등장 규칙(.js .fac-card.is-in … span)이 transform 과 지연을 갖고 있어 그보다 구체적으로 쓰고 지연은 0 으로 */
.js .fac-card.is-in .fac-card__tags span:hover {
border-color: var(--color-cobalt);
background: var(--color-cobalt);
color: var(--color-white);
transform: translateY(-2px);
box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(46, 90, 214, .25);
transition-delay: 0s;
}
}
/* 숫자만 한 단 크고 굵게 (1공장 6기 → 6) */
.fac-card__tags b {
font-family: var(--font-roboto);
font-weight: 700;
font-size: 1.25em;
line-height: 1;
vertical-align: -.05em;
}
.fac-card__idx {
position: absolute;
right: calc(72 * var(--u));
bottom: calc(40 * var(--u));
margin: 0;
font-family: var(--font-roboto);
font-size: calc(13 * var(--u));
letter-spacing: .1em;
color: var(--gray);
}
/* --- 등장 --- */
/* 머리는 공용 등장(js/reveal.js 가 .is-in). 카드 안 글은 카드가 자리 잡을 때(js 가 .is-in) 한 줄씩 올라온다 */
.js [data-reveal] {
opacity: 0;
transform: translateY(40px);
transition: opacity var(--flow-dur, 1.15s) var(--flow-ease, ease-out),
transform var(--flow-dur, 1.15s) var(--flow-ease, ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .fac-card__txt > * {
opacity: 0;
transform: translateY(calc(18 * var(--u)));
transition: opacity .6s ease, transform .6s ease;
}
.js .fac-card.is-in .fac-card__txt > * { opacity: 1; transform: none; }
.js .fac-card.is-in .fac-card__txt > :nth-child(3) { transition-delay: .05s; }
.js .fac-card.is-in .fac-card__txt > :nth-child(4) { transition-delay: .1s; }
.js .fac-card.is-in .fac-card__txt > :nth-child(5) { transition-delay: .15s; }
.js .fac-card.is-in .fac-card__txt > :nth-child(6) { transition-delay: .2s; }
/* 태그는 줄이 통째로 뜨지 않고 왼쪽에서 하나씩 들어온다 */
.js .fac-card__tags span {
opacity: 0;
transform: translateX(calc(-8 * var(--u)));
transition: opacity .45s ease, transform .45s ease;
}
.js .fac-card.is-in .fac-card__tags span { opacity: 1; transform: none; }
.js .fac-card.is-in .fac-card__tags span:nth-child(1) { transition-delay: .25s; }
.js .fac-card.is-in .fac-card__tags span:nth-child(2) { transition-delay: .31s; }
.js .fac-card.is-in .fac-card__tags span:nth-child(3) { transition-delay: .37s; }
.js .fac-card.is-in .fac-card__tags span:nth-child(4) { transition-delay: .43s; }
.js .fac-card.is-in .fac-card__tags span:nth-child(5) { transition-delay: .49s; }
/* 워터마크 번호와 색인은 등장에 끼지 않는다 */
.js .fac-card__n,
.js .fac-card__idx { opacity: 1; transform: none; transition: none; }
/* --- 03 반응형 (기본 스타일 뒤에 두어야 덮이지 않는다) --- */
@media (max-width: 768px) {
.sec-fac { padding: calc(64 * var(--u)) 0 0; }
.sec-fac__mark span { top: calc(24 * var(--u)); font-size: calc(160 * var(--u)); }
.sec-fac__head { grid-template-columns: 1fr; row-gap: calc(12 * var(--u)); margin-bottom: calc(32 * var(--u)); }
.sec-fac__title { font-size: calc(30 * var(--u)); }
.sec-fac__desc { justify-self: start; max-width: none; font-size: calc(15 * var(--u)); }
/* 좁은 화면에서도 같은 스택이다 — 다음 장이 올라오면 앞 장은 줄고 잦아든다 (js 가 같은 계산을 쓴다).
겹쳐야 하므로 카드 높이를 고정하고 글은 그 안에서 세로 가운데. 붙는 자리는 12 씩 어긋난다 */
.fac-card {
grid-template-columns: 1fr;
grid-template-rows: calc(190 * var(--u)) 1fr;
height: calc(500 * var(--u)); /* 태그 줄이 들어가 470 → 500 */
border-radius: calc(16 * var(--u));
box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(20, 40, 80, .08);
}
.fac-card { margin-bottom: calc(20 * var(--u)); }
.fac-card:nth-child(2) { top: calc(64 * var(--u)); }
.fac-card:nth-child(4) { top: calc(76 * var(--u)); }
.fac-card:nth-child(6) { top: calc(88 * var(--u)); }
.fac-card:nth-child(8) { top: calc(100 * var(--u)); }
.sec-fac__tail { height: calc(80 * var(--u)); }
.fac-card__pic { height: auto; }
.fac-card__txt { padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(48 * var(--u)); }
.fac-card__n { top: calc(12 * var(--u)); right: calc(20 * var(--u)); font-size: calc(80 * var(--u)); }
.fac-card__title { font-size: calc(24 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.fac-card__desc { font-size: max(calc(14 * var(--u)), 14px); line-height: 1.7; }
.fac-card__desc br { display: none; } /* 데스크톱용 줄바꿈은 좁은 폭에서 어긋난다 */
.fac-card__tags { gap: calc(6 * var(--u)); margin-top: calc(16 * var(--u)); }
.fac-card__tags span { padding: calc(5 * var(--u)) calc(10 * var(--u)); font-size: max(calc(12 * var(--u)), 11px); }
.fac-card__idx { right: calc(24 * var(--u)); bottom: calc(20 * var(--u)); }
}
/* ============================================================
04 사업군별 소재 라인업 — 캐러셀
Figma: 04 (127:227) · 1920 × 1080
============================================================ */
/* 안쪽 틀을 세로 가운데 두되 높이는 콘텐츠에 맡긴다.
틀에 height:100% 를 주면, 오른쪽 블록의 align-self:stretch 가
카드 칸이 아니라 화면 전체 높이로 늘어나 화살표가 바닥까지 내려간다.
(배경·오버레이는 position:absolute 라 이 flex 에 끼지 않는다) */
.sec-mat {
background: var(--sec04-fallback-bg);
display: flex;
align-items: center;
}
.sec-mat__bg { position: absolute; inset: 0; }
.sec-mat__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 53%; /* 시안 크롭 중심 (1000, 706) */
}
.sec-mat__overlay { position: absolute; inset: 0; background: var(--sec04-overlay); }
.sec-mat__inner {
position: relative;
z-index: 2;
display: flex;
align-items: stretch; /* 오른쪽 블록이 카드 칸 높이만큼 늘어난다 */
/* 시안은 이 섹션만 콘텐츠 폭이 1765 다 (다른 섹션은 1405).
그대로 두면 04 번만 좌우로 벌어져, 스크롤할 때 오른쪽 제목이 혼자 튀어나온다.
페이지 기준선에 맞추고 안쪽 비율(제목 블록 : 여백 : 카드)은 그대로 줄였다.
1765 → 1405 카드 360 → 281 제목 블록 450 → 358 여백 155 → 123 */
gap: clamp(1.25rem, 6.406vw, 7.6875rem); /* 123 */
width: min(1405px, calc(100% - var(--gnb-x) * 2));
margin: 0 auto;
}
/* --- 캐러셀 --- */
.sec-mat__carousel { flex: 1 1 auto; min-width: 0; }
/* 1160 폭에 slidesPerView 3 / spaceBetween 40 이면 카드가 정확히 360 이 된다 (시안 값) */
/* 가로만 잘라야 한다. overflow:hidden 이 카드 그림자(0 14px 34px)까지 아래에서 잘라 내
카드 사이에 가는 가로선이 생겼다 (2026-10-08 피드백). 위아래로 여유를 두고 음수 margin 으로 되돌린다 */
.sec-mat .swiper { overflow: hidden; padding: 16px 0 56px; margin: -16px 0 -56px; }
.sec-mat .swiper-wrapper { transition-timing-function: ease-out; }
.sec-mat .swiper-slide { height: auto; }
/* 스케일은 슬라이드가 아니라 안쪽 래퍼에 준다.
슬라이드에 직접 transform 을 걸면 Swiper 의 전환 종료 감지가 깨진다 */
.mat-scaler {
transform: scale(.97);
transition: transform .6s ease-out;
}
.sec-mat .swiper-slide-visible .mat-scaler { transform: scale(1); }
.mat-card {
position: relative;
aspect-ratio: 360 / 500;
border-radius: clamp(.75rem, 1.042vw, 1.25rem); /* 20 */
overflow: hidden;
/* 배경이 밝아져 흰 카드가 묻혔다 (2026-09-18). 카드를 옅은 회청색으로 깔고 또렷한 테두리 + 그림자를 준다.
호버하면 코발트로 뒤집히는 것은 그대로 */
background: #f3f6fb;
color: var(--color-ink);
box-shadow: 0 0 0 1px rgba(19, 90, 156, .18), 0 14px 34px rgba(20, 30, 60, .10);
/* 안쪽 글자 크기의 기준을 카드 폭으로 삼는다 (아래 cqw 참고) */
container-type: inline-size;
/* 눌러서도 넘길 수 있다 (js/sec-cards.js 의 click) */
cursor: pointer;
transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease;
}
/* 카드 배경 이미지. 파일이 없으면 위 배경색이 그대로 남는다 */
.mat-card__bg { position: absolute; inset: 0; }
.mat-card__bg img { width: 100%; height: 100%; object-fit: cover; }
.mat-card__body {
position: relative;
z-index: 1;
padding: 43.33% 13.33% 0; /* 156 / 48 (카드 폭 360 기준) */
}
/*
글자 크기를 화면 폭(vw)이 아니라 카드 폭(cqw)에 맞춘다.
여백은 이미 % 라 카드와 함께 줄지만 글자만 vw 로 두면,
카드가 좁아졌을 때 줄 수가 늘어나 카드 아래로 넘쳐 잘린다.
cqw 로 묶어 두면 카드가 어떤 크기가 되든 시안의 안쪽 비율이 그대로 유지된다.
(기준은 시안의 카드 폭 360)
*/
/* 국문 이름 — 영문 제목 위에 작게. 시안에는 없고 확정 카피에 국문 이름이 함께 와서 넣었다 */
.mat-card__ko {
margin: 0 0 2.5%;
font-weight: 600;
font-size: 4.167cqw; /* 15 / 360 */
letter-spacing: -.02em;
color: var(--color-cobalt);
transition: color .3s ease;
}
.mat-card__title {
font-weight: 700;
font-size: 8.333cqw; /* 30 / 360 */
line-height: 1.167; /* 35 / 30 */
letter-spacing: -.02em;
}
/* 설명이 시안보다 길어져(최대 5~6줄) 위 여백을 63 → 40 으로, 글자를 20 → 18 로 낮췄다.
가장 긴 카드(완성촉매)가 카드 아래 여백 안에 들어오는 값이다 */
.mat-card__desc {
margin-top: 11%; /* 40 / 360 */
font-size: 5cqw; /* 18 / 360 */
line-height: 1.55;
letter-spacing: -.02em;
color: var(--ink-body);
word-break: keep-all;
transition: color .3s ease;
}
/* 기본은 흰 카드, 마우스를 올리면 코발트로 바뀐다 */
.swiper-slide:hover .mat-card {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
background: var(--color-cobalt);
color: var(--color-white);
}
.swiper-slide:hover .mat-card__desc { color: rgba(255, 255, 255, .92); }
.swiper-slide:hover .mat-card__ko { color: rgba(255, 255, 255, .75); }
/* --- 진행 바 --- */
.sec-mat__progress {
position: relative;
height: 3px;
margin-top: clamp(1.25rem, 2.083vw, 2.5rem);
background: rgba(0, 0, 0, .1); /* 밝은 배경 위 트랙 (2026-09-18) */
border-radius: 2px;
overflow: hidden;
}
.sec-mat__progress-fill {
display: block;
width: 100%;
height: 100%;
border-radius: 2px;
background: var(--color-cobalt);
transform: scaleX(0);
transform-origin: left center;
transition: transform .6s ease-out;
}
/* --- 오른쪽 타이틀 --- */
.sec-mat__aside {
/* 시안 450 을 1405 기준으로 줄인 값. 글자 크기는 다른 섹션과 맞춰 그대로 둔다
(여기만 제목이 작아지면 섹션끼리 위계가 어긋난다) */
flex: 0 0 clamp(12rem, 18.646vw, 22.375rem); /* 358 */
/* 카드 칸과 같은 높이로 늘려 두고 화살표를 바닥에 붙인다.
고정 여백으로 밀어 두면 설명 줄 수가 바뀔 때마다 화살표 위치가 어긋난다 */
align-self: stretch;
display: flex;
flex-direction: column;
text-align: right;
color: var(--color-ink); /* 밝은 배경 (2026-09-18) */
}
.sec-mat__title {
font-weight: 700;
font-size: clamp(2rem, 3.646vw, 4.375rem); /* 70 */
line-height: 1.286; /* 90 / 70 */
letter-spacing: -.05em; /* -3.5 / 70 */
}
.sec-mat__desc {
margin-top: clamp(1rem, 1.198vw, 1.4375rem); /* 23 */
font-size: clamp(.875rem, 1.302vw, 1.5625rem); /* 25 */
line-height: 1.4; /* 35 / 25 */
letter-spacing: -.02em;
}
.sec-mat__nav {
display: flex;
justify-content: flex-end;
gap: clamp(.75rem, 1.563vw, 1.875rem); /* 30 */
/* 시안처럼 카드 아래끝에 맞춰 선다 (위 aside 가 카드 높이만큼 늘어나 있다) */
margin-top: auto;
}
.sec-mat__btn {
display: flex;
align-items: center;
justify-content: center;
width: clamp(2.75rem, 3.906vw, 4.6875rem); /* 75 */
height: clamp(2.75rem, 3.906vw, 4.6875rem);
border-radius: 50%;
transition: opacity .2s ease, transform .2s ease;
}
/* 두 단추는 같은 모양(흰 원 + 얇은 선)이고, 마우스를 올린 쪽만 코발트로 찬다.
전에는 이전 단추가 항상 코발트여서 상태 표시처럼 오해됐다 (2026-09-18) */
.sec-mat__btn {
background: var(--color-white);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
transition: opacity .2s ease, transform .2s ease, background-color .25s ease, box-shadow .25s ease;
}
.sec-mat__btn:hover,
.sec-mat__btn:focus-visible { transform: translateY(-2px); background: var(--color-cobalt); box-shadow: inset 0 0 0 1px var(--color-cobalt); }
.sec-mat__btn.swiper-button-disabled { opacity: .35; pointer-events: none; }
/* 꺾쇠는 두 획을 회전시켜 만든다 */
.sec-mat__chev {
width: clamp(.5rem, .625vw, .75rem);
height: clamp(.5rem, .625vw, .75rem);
border-top: 3px solid;
border-right: 3px solid;
border-radius: 1px;
}
.sec-mat__chev { border-color: var(--color-ink); transition: border-color .25s ease; }
.sec-mat__btn:hover .sec-mat__chev,
.sec-mat__btn:focus-visible .sec-mat__chev { border-color: var(--color-white); }
.sec-mat__btn--prev .sec-mat__chev { transform: rotate(-135deg) translate(-2px, -2px); }
.sec-mat__btn--next .sec-mat__chev { transform: rotate(45deg) translate(-2px, -2px); }
/* --- 좁은 화면 조작부 [‹] ● ● ● 1 / 3 [›] — js/sec-cards.js 가 만든다. 데스크톱은 감춘다 (2026-09-18) --- */
.sec-mat__mctrl {
display: none;
align-items: center;
justify-content: center;
gap: .875rem;
margin-top: 1.25rem;
}
.sec-mat__mbtn {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--color-white);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.sec-mat__mbtn:active { background: var(--color-cobalt); }
.sec-mat__mbtn:active .sec-mat__chev { border-color: var(--color-white); }
.sec-mat__mbtn .sec-mat__chev { width: .5rem; height: .5rem; border-width: 2px; }
.sec-mat__mbtn--prev .sec-mat__chev { transform: rotate(-135deg) translate(-1px, -1px); }
.sec-mat__mbtn--next .sec-mat__chev { transform: rotate(45deg) translate(-1px, -1px); }
.sec-mat__dots { display: flex; gap: .5rem; padding: 0 .25rem; }
.sec-mat__dot {
width: .5rem;
height: .5rem;
border-radius: 50%;
background: rgba(0, 0, 0, .18);
transition: width .25s ease, background-color .25s ease;
}
.sec-mat__dot.is-on { width: 1.375rem; border-radius: .25rem; background: var(--color-cobalt); }
.sec-mat__count {
min-width: 2.6em;
font-family: var(--font-roboto);
font-size: .8125rem;
letter-spacing: .02em;
color: var(--ink-mid);
text-align: center;
}
/* --- 04 반응형 (기본 스타일 뒤에 두어야 덮이지 않는다) --- */
@media (max-width: 768px) {
.sec-mat__inner {
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: clamp(1.5rem, 6vw, 2.5rem);
}
.sec-mat__aside { flex: none; order: -1; text-align: left; }
.sec-mat__nav { display: none; } /* 오른쪽 블록의 큰 화살표는 감추고 */
.sec-mat__progress { display: none; } /* 진행 바 대신 아래 점 · 번호 · 화살표 (2026-09-18) */
.sec-mat__mctrl { display: flex; }
/* 좁은 화면 카드 — 세로 비율을 500 → 420 으로 눌러 내용에 비해 카드가 크게 보이지 않게 (2026-09-18).
위쪽 사진 자리도 40% → 30% 로 줄인다. 사진은 object-fit: cover 라 잘려도 된다 */
.mat-card { aspect-ratio: 360 / 420; }
.mat-card__body { padding: 30% 8% 0; }
.mat-card__desc { margin-top: 8%; }
/* 손가락으로 만지는 화면에서는 리프트도 색 반전도 쓰지 않는다
(터치하면 hover 가 남아 카드가 파랗게 굳는다) */
.swiper-slide:hover .mat-card {
transform: none;
box-shadow: none;
background: var(--color-white);
color: var(--color-ink);
}
.swiper-slide:hover .mat-card__desc { color: var(--ink-body); }
}
/* ============================================================
05 확장하는 사업 분야 — 사분면 구성
클라이언트 요청(2026-09-10, spci_main_sec05_business_B.html) 으로 시안(127:206)의
'탭 + 사진' 구성을 걷어내고 네 사업군을 가운데 엠블럼 둘레에 놓는 구성으로 바꿨다.
가운데 제목 → [좌 500 | 엠블럼 | 우 500] 사분면 → 아래 한 줄 띠
왼쪽 두 칸은 오른쪽 정렬이라 엠블럼을 향해 모인다. 색 캡(light/deep)은 사업군 구분용이다.
치수는 받은 프로토타입 값(1920 기준)을 그대로 vw 로 옮겼다.
============================================================ */
.sec-biz {
--biz-light: #4d8fe0; /* 프로토타입 --blue-light */
--biz-deep: #0f3f7d; /* 프로토타입 --blue-deep */
--biz-soft: #f3f6fa;
--biz-line: #dfe5ee;
background: var(--color-white);
color: var(--color-ink);
}
.sec-biz__inner {
display: flex;
flex-direction: column;
justify-content: center;
width: min(1400px, calc(100% - var(--gnb-x) * 2));
height: 100%;
margin: 0 auto;
}
/* --- 제목 --- */
.sec-biz__head { text-align: center; margin-bottom: clamp(1.5rem, 2.5vw, 3rem); } /* 48 (프로토타입 64) */
.sec-biz__label {
font-weight: 500;
font-size: clamp(.875rem, 1.042vw, 1.25rem); /* 20 */
color: var(--color-cobalt);
}
.sec-biz__title {
margin-top: clamp(.375rem, .729vw, .875rem); /* 14 */
font-weight: 700;
font-size: clamp(1.75rem, 2.396vw, 2.875rem); /* 46 */
line-height: 1.25;
letter-spacing: -.02em;
}
/* --- 사분면 --- */
.biz-grid {
display: grid;
grid-template-columns: minmax(0, 500fr) minmax(0, 400fr) minmax(0, 500fr);
grid-template-rows: auto auto;
column-gap: clamp(1rem, 2.083vw, 2.5rem); /* 40 */
row-gap: clamp(1.25rem, 2.083vw, 2.5rem); /* 40 (프로토타입 56 — 한 화면에 맞춰 줄임) */
align-items: start;
}
.biz-item--l1 { grid-column: 1; grid-row: 1; }
.biz-item--l2 { grid-column: 1; grid-row: 2; }
.biz-item--r1 { grid-column: 3; grid-row: 1; }
.biz-item--r2 { grid-column: 3; grid-row: 2; }
.biz-center {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
}
/* 엠블럼 — index.html 에 inline