@charset "utf-8";
/* ==========================================================================
co2 MOBIX MOTORS — main.css (index.html 전용 · body.home)
참고 «S-OIL» 실측 SPEC = _co/_스펙_co2_soil.md
문법 : 980px 고정 중앙 컬럼 · 100vh(902) 패널 126/650/126 · 라운드 0
대비율 56(섹션제목) : 52(히어로2행) : 15(본문)
큰 글자 전부 w400 · 자간 normal (큰 숫자만 -2px)
오버레이는 rgba(0,0,0,α) 단색. α 는 사진 밝기 95백분위 실측으로 계산
========================================================================== */
:root{
/* 색 사다리 — hue 152° (co1 #0E7C86 hue 186° 과 34° 벌렸다) */
--g900:#052E20; /* 상단 유틸 띠 · 가장 어두운 면 */
--g700:#0B7A55; /* 주색 : 섹션제목·링크·탭활성·페이저 흰 위 5.34:1 */
--g500:#9FE6C5; /* 어두운 면 «위» 글자·아이콘 전용 #052E20 위 5.00:1 */
--g100:#E6F0EC; /* 연민트 패널 */
--lime:#7FBF3F; /* 로고·배지에만 소량 */
--ink:#333333;
--body:#666666; /* 흰 위 5.74:1 */
--line:#E5E5E5;
--mute:#6F6F6F; /* 페이저 비활성 — S-OIL 은 #CCC 이나 AA 때문에 낮췄다 */
--white:#ffffff;
--sx-w:980px; /* 컨테이너 고정폭 */
--sx-panel:902px; /* 100vh 패널 */
--sx-pad:126px; /* 패널 위·아래 여백 (902 = 126+650+126) */
--sx-hd108:108px; /* 헤더 = 37 + 71 */
}
/* ---------------------------------------------------------------- 기본 */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.home{
font-size:15px;line-height:1.7;letter-spacing:normal;
color:var(--body);background:var(--white);
padding-top:var(--sx-hd108);
word-break:keep-all !important;overflow-wrap:break-word;overflow-x:hidden;
}
body.home *{word-break:keep-all !important}
/* ★리셋은 :where() 로 «명시도 0» 을 만든다.
body.home h1{margin:0} 처럼 쓰면 .sx-hero__h{margin:33px} 같은 부품 규칙을 «이긴다» —
실제로 히어로 선·리드·부제 여백이 전부 죽었다(메모리 «CSS 명시도 자기 충돌»). */
:where(body.home) h1,:where(body.home) h2,:where(body.home) h3,:where(body.home) h4{
font-weight:400;letter-spacing:normal;margin:0}
:where(body.home) p{margin:0}
:where(body.home) img,:where(body.home) svg{display:block;max-width:100%}
:where(body.home) a{color:inherit;text-decoration:none}
body.home .wrap{width:var(--sx-w);max-width:100%;margin:0 auto;padding:0}
body.home a:focus-visible,body.home button:focus-visible{
outline:3px solid var(--g700);outline-offset:2px}
.sx-con{width:var(--sx-w);max-width:100%;margin:0 auto}
/* 라운드 0 — 전 요소 */
body.home *,body.home *::before,body.home *::after{border-radius:0}
/* ================================================================ 헤더
2단 : 유틸 띠 h37(다크그린) + 본 띠 h71(흰) = 108 · 대메뉴 4개
★HTML 은 한 글자도 안 고쳤다. 7개 대메뉴 중 뒤 3개를 CSS grid 로
위 유틸 띠에 올려 «대메뉴 4개» 를 만든다. 링크는 하나도 안 없앴다. */
body.home .hd{
position:fixed;top:0;left:0;right:0;z-index:120;
height:var(--sx-hd108);background:var(--white);border-bottom:0;
/* ★구분선을 border 로 그으면 헤더가 109 가 된다(실측). box-shadow 로 그어 108 을 지킨다 */
box-shadow:0 1px 0 #E9E9E9;
backdrop-filter:none}
body.home .hd::before{
content:"";position:absolute;top:0;left:0;right:0;height:37px;
background:var(--g900)}
body.home .hd__in{
position:relative;display:block;height:var(--sx-hd108);min-height:0;
width:var(--sx-w);max-width:100%;margin:0 auto;padding:0;gap:0}
body.home .hd__logo{
position:absolute;left:0;top:37px;height:71px;
display:flex;align-items:center;gap:11px;z-index:3}
body.home .hd__mark{
width:40px;height:40px;background:var(--g700);color:#fff;
font-size:15px;font-weight:400;letter-spacing:.06em}
body.home .hd__nm b{font-size:17px;font-weight:400;letter-spacing:.05em;color:var(--ink)}
body.home .hd__nm i{font-size:11px;color:var(--body)}
body.home .gnb{
position:absolute;left:0;right:0;top:0;height:var(--sx-hd108);
margin:0;pointer-events:none;z-index:2}
body.home .gnb>ul{
display:grid;height:var(--sx-hd108);gap:0;
grid-template-columns:214px auto auto auto auto 1fr auto auto auto 104px;
grid-template-rows:37px 71px;align-items:stretch}
body.home .gnb__i{pointer-events:auto;position:relative}
/* 본 띠 : 대메뉴 4개 */
body.home .gnb__i:nth-child(1){grid-column:2;grid-row:2}
body.home .gnb__i:nth-child(2){grid-column:3;grid-row:2}
body.home .gnb__i:nth-child(3){grid-column:4;grid-row:2}
body.home .gnb__i:nth-child(4){grid-column:5;grid-row:2}
body.home .gnb__i:nth-child(-n+4)>a{
display:flex;align-items:center;justify-content:center;height:71px;
padding:0 25px;font-size:20px;font-weight:400;color:var(--ink);
letter-spacing:normal;box-shadow:none;white-space:nowrap}
body.home .gnb__i:nth-child(-n+4):hover>a,
body.home .gnb__i:nth-child(-n+4):focus-within>a{color:var(--g700)}
/* 유틸 띠 : 나머지 3개 */
body.home .gnb__i:nth-child(5){grid-column:7;grid-row:1}
body.home .gnb__i:nth-child(6){grid-column:8;grid-row:1}
body.home .gnb__i:nth-child(7){grid-column:9;grid-row:1}
body.home .gnb__i:nth-child(n+5)>a{
display:flex;align-items:center;height:37px;padding:0 13px;
font-size:12px;font-weight:400;color:#fff;box-shadow:none;white-space:nowrap}
body.home .gnb__i:nth-child(n+5)>a:hover{color:var(--lime)}
body.home .gnb__i:nth-child(n+6)::before{
content:"";position:absolute;left:0;top:12px;width:1px;height:13px;
background:rgba(255,255,255,.34)}
/* 드롭다운 */
body.home .gnb__sub{
left:0;transform:translateY(6px);min-width:200px;
background:#fff;border:1px solid var(--line);padding:6px;box-shadow:0 14px 30px rgba(0,0,0,.10)}
body.home .gnb__i:hover .gnb__sub,body.home .gnb__i:focus-within .gnb__sub{
transform:translateY(0)}
body.home .gnb__i:nth-child(n+5) .gnb__sub{top:37px}
body.home .gnb__sub a{padding:9px 14px;font-size:14px;color:var(--body)}
body.home .gnb__sub a:hover{background:#F4F8F6;color:var(--g700)}
/* 문의하기 = 유틸 띠 오른쪽 끝 */
body.home .hd__cta{
position:absolute;right:0;top:0;height:37px;display:flex;align-items:center;
padding:0 0 0 13px;background:none;color:#fff;font-size:12px;font-weight:400;z-index:3}
body.home .hd__cta::before{
content:"";position:absolute;left:0;top:12px;width:1px;height:13px;
background:rgba(255,255,255,.34)}
body.home .hd__cta:hover{background:none;color:var(--lime)}
/* 전체메뉴 □ + 검색 □ (각 40×40 · 1px · 라운드 0) */
body.home .hd__burger{
display:block;position:absolute;right:48px;top:52px;width:40px;height:40px;
margin:0;border:1px solid #DDD;background:#fff;cursor:pointer;z-index:3}
body.home .hd__burger span{left:11px;width:18px;height:1px;background:var(--ink)}
body.home .hd__burger span:nth-child(1){top:13px}
body.home .hd__burger span:nth-child(2){top:19px}
body.home .hd__burger span:nth-child(3){top:25px}
body.home .hd__burger[aria-expanded="true"] span:nth-child(1){top:19px}
body.home .hd__burger[aria-expanded="true"] span:nth-child(3){top:19px}
body.home .hd__in::after{
content:"";position:absolute;right:0;top:52px;width:40px;height:40px;
border:1px solid #DDD;background:#fff center/17px no-repeat;
background-image:url("data:image/svg+xml;utf8,");
pointer-events:none;z-index:2}
body.home .mnav{
position:absolute;left:0;right:0;top:var(--sx-hd108);
background:#fff;border-top:1px solid var(--line);box-shadow:0 18px 30px rgba(0,0,0,.10)}
body.home .mnav>.wrap{padding:12px 0 28px}
body.home .mnav ul ul a{background:#F4F8F6}
/* ================================================================ 패널 */
.sx-p{
position:relative;min-height:var(--sx-panel);
padding:var(--sx-pad) 0;
display:flex;flex-direction:column;justify-content:center;
background:var(--white)}
.sx-p--mint{background:var(--g100)}
.sx-p--soft{background:#F7F9F8}
.sx-p--dark{background:#0A1712;color:#fff}
/* 패널 머리 — 가운데 정렬 56px + 부제 15px */
.sx-hd{text-align:center;margin:0 0 60px}
.sx-h2{
font-size:56px;line-height:1.15;font-weight:400;letter-spacing:normal;
color:var(--g700)}
.sx-p--dark .sx-h2{color:#fff}
.sx-sub{margin:24px 0 0;font-size:15px;line-height:1.7;color:var(--body)}
.sx-p--dark .sx-sub{color:rgba(255,255,255,.92)}
.sx-kick{
margin:0 0 18px;font-size:12px;line-height:1;letter-spacing:.18em;
text-transform:uppercase;color:var(--g700)}
.sx-p--dark .sx-kick{color:var(--g500)}
/* 사진 블록 공통 — 오버레이는 «단색» 만 */
.sx-ph{position:relative;overflow:hidden;background:#0A1712}
.sx-ph>img{width:100%;height:100%;object-fit:cover}
.sx-ph--ov::after{
content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--ov,.30))}
/* 전폭 사진 띠 (980) — S-OIL 서브 ① 이 980×364 다. 그 근처로 올려 «띠» 답게 만든다 */
.sx-band{margin:0 0 40px;height:272px}
.sx-band--tall{height:340px}
.sx-band--mid{height:304px}
.sx-cap{margin:12px 0 0;font-size:12px;color:#737373;text-align:right}
/* ---------------------------------------------------------------- 히어로 */
.sx-hero{
position:relative;height:calc(100vh - var(--sx-hd108));min-height:var(--sx-panel);
overflow:hidden;background:#0A1712;color:#fff}
.sx-hero__bg{position:absolute;inset:0}
.sx-hero__bg li{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.sx-hero__bg li.on{opacity:1}
.sx-hero__bg img{width:100%;height:100%;object-fit:cover}
.sx-hero__bg li::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--ov,.42))}
/* ★α 는 감이 아니라 «글자 영역 95백분위 휘도» 로 계산했다(1578×902 cover 크롭 후 재측정).
흰 글자 4.5:1 조건 = 합성 휘도 p95 ≤ 0.1833. 아래 (필요) 는 그 최소값이다. */
.sx-hero__bg li:nth-child(1){--ov:.58} /* hero2.jpg p95 .8342 → 필요 .50 */
.sx-hero__bg li:nth-child(2){--ov:.38} /* road.jpg p95 .1626 → 필요 .00, 하한 .30 규칙 */
.sx-hero__bg li:nth-child(3){--ov:.44} /* card5.jpg p95 .3396 → 필요 .25 */
/* ★슬라이드 1 배경 영상 (hero-co2.mp4 · EV 생산라인) — 사진 위에 얹고 playing 때만 보인다.
영상 글자영역 최악 p95 .6520 → a .50 이면 5.45:1. 아래 .54 = 6.2:1 로 여유를 뒀다.
★영상은 사진보다 어두워서 «사진용 .58» 보다 옅게 덮어도 AA 를 넘는다. */
.sx-hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .9s ease}
.sx-hero__bg video.on{opacity:1}
.sx-hero__bg li.has-video{--ov:.54}
@media (prefers-reduced-motion:reduce){.sx-hero__bg video{display:none}}
.sx-hero__in{
position:relative;height:100%;display:flex;flex-direction:column;justify-content:center}
.sx-hero__t{padding-left:42px} /* 컨테이너 좌단 +42 = x341 */
.sx-hero__eb{
margin:0 0 0;font-size:32px;line-height:1.2;font-weight:400;color:var(--g500);
letter-spacing:normal}
.sx-hero__rule{display:block;width:28px;height:2px;background:#fff;margin:27px 0 0}
.sx-hero__h{margin:33px 0 0;color:#fff;font-weight:400;letter-spacing:normal}
.sx-hero__h .l1{display:block;font-size:43px;line-height:1.2}
.sx-hero__h .l2{display:block;font-size:52px;line-height:1.15;margin-top:9px}
.sx-hero__h em{font-style:normal;color:var(--g500)}
.sx-hero__lead{
margin:28px 0 0;max-width:620px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.94)}
.sx-hero__cta{display:flex;gap:10px;margin:34px 0 0}
.sx-hero__dots{
position:absolute;left:0;right:0;bottom:118px;display:flex;justify-content:center;
align-items:center;gap:12px;z-index:4}
/* ★명시도 자기 충돌 — 여기가 실제 결함이었다.
`.sx-hero__dots button` 는 (0,1,1) 이라 `.sx-hero__pause` (0,1,0) 를 «이긴다».
그래서 일시정지 버튼이 9×9 흰 사각형으로 눌리고
"배경 사진 넘김 멈춤" 글자가 점 옆으로 새어 나와 있었다.
→ 점 규칙을 [data-go] 로 한정해 두 부품이 서로 안 겹치게 만든다. */
/* 비활성 = 1px 흰 테두리만 · 활성 = 흰 면. 사진 위에서도 «어느 것이 현재인지» 가 분명해야 한다
(반투명 흰색 대 흰색은 밝은 사진 위에서 구분이 안 됐다) */
.sx-hero__dots button[data-go]{
flex:0 0 auto;width:9px;height:9px;padding:0;border:0;
background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
cursor:pointer;transition:background .2s}
.sx-hero__dots button[data-go][aria-current="true"],
.sx-hero__dots button[data-go]:hover{background:#fff}
/* 일시정지 = ▮▮ 아이콘 한 개(S-OIL 과 같다).
★글자는 한 자도 안 지웠다 — 화면 밖으로 밀어냈을 뿐이라 스크린리더는 그대로 읽는다.
(JS 가 textContent 를 갈아 끼우므로 span 으로 감싸면 클릭 한 번에 날아간다) */
/* ★글자는 font-size:0 으로 «폭 0» 을 만들어 감춘다.
text-indent:-999em 으로 밀면 scrollWidth 가 7,561px 이 되어
반응형 검사가 «글자 잘림» 으로 잡는다(실제로 그렇게 잡혔다).
font-size:0 이면 폭이 0 이라 검사도 깨끗하고, 글자는 그대로 남아 스크린리더가 읽는다. */
.sx-hero__pause{
position:relative;flex:0 0 auto;margin-left:8px;
width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;
font-size:0;line-height:0;color:transparent;white-space:nowrap}
.sx-hero__pause::before,.sx-hero__pause::after{
content:"";position:absolute;top:6px;width:3px;height:11px;background:#fff;text-indent:0}
.sx-hero__pause::before{left:7px}
.sx-hero__pause::after{left:12px}
.sx-hero__pause:hover::before,.sx-hero__pause:hover::after{background:var(--g500)}
/* 멈춘 상태 = ▶ */
.sx-hero__pause[aria-pressed="true"]::before{
left:8px;top:5px;width:0;height:0;background:none;
border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.sx-hero__pause[aria-pressed="true"]:hover::before{border-left-color:var(--g500)}
.sx-hero__pause[aria-pressed="true"]::after{display:none}
.sx-hero__down{
position:absolute;left:50%;transform:translateX(-50%);bottom:44px;z-index:4;
width:60px;height:34px;display:grid;place-items:center;color:#fff}
.sx-hero__down svg{width:52px;height:26px}
/* ---------------------------------------------------------------- 버튼
S-OIL 은 «채운 버튼» 이 거의 없다. 1px 테두리 190×40 12px 한 종류. */
.sx-btn{
display:inline-flex;align-items:center;justify-content:center;
min-width:190px;height:40px;padding:0 22px;border:1px solid var(--g700);
background:none;color:var(--g700);font-size:12px;font-weight:700;
letter-spacing:.02em;transition:.2s}
.sx-btn:hover{background:var(--g700);color:#fff}
.sx-btn--on-photo{border-color:rgba(255,255,255,.8);color:#fff}
.sx-btn--on-photo:hover{background:#fff;color:var(--ink)}
/* ---------------------------------------------------------------- 타일 ①
Company : 4장 · 489×249 · gap 2 · radius 0 → 2×2 (489·2+2 = 980) */
.sx-t1{display:grid;grid-template-columns:repeat(2,minmax(0,489px));gap:2px;justify-content:center}
.sx-t1 a{position:relative;display:block;height:249px;overflow:hidden;background:#0A1712}
.sx-t1 img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.sx-t1 a::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--ov,.60))}
.sx-t1 a:hover img{transform:scale(1.04)}
.sx-t1 .b{position:absolute;left:26px;right:26px;bottom:26px;z-index:2}
.sx-t1 h3{font-size:30px;line-height:1.2;font-weight:400;color:#fff}
.sx-t1 h3 i{font-style:normal;margin-left:12px;font-size:22px;color:#fff}
.sx-t1 p{margin:9px 0 0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.92)}
/* ---------------------------------------------------------------- 타일 ②
Business : 4장 · 226×500 · gap 25 → 4열 세로 (226·4+25·3 = 979) */
.sx-t2{display:grid;grid-template-columns:repeat(4,minmax(0,226px));gap:25px;justify-content:center}
.sx-t2 a{position:relative;display:block;height:500px;overflow:hidden;background:#0A1712}
.sx-t2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sx-t2 a::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--ov,.70))}
.sx-t2 .h{position:absolute;left:22px;right:22px;top:26px;z-index:2}
.sx-t2 .lb{font-size:18px;line-height:1.3;color:#fff}
.sx-t2 .nm{
display:block;margin:6px 0 0;font-size:40px;line-height:1.1;letter-spacing:-2px;color:#fff}
.sx-t2 .nm u{text-decoration:none;font-size:18px;letter-spacing:normal;margin-left:4px}
.sx-t2 p{margin:14px 0 0;font-size:13px;line-height:1.65;color:rgba(255,255,255,.93)}
.sx-t2 h3{
position:absolute;left:22px;right:22px;bottom:22px;z-index:2;
font-size:18px;line-height:1.35;font-weight:400;color:#fff}
.sx-t2 h3 span{display:block;font-size:13px;color:rgba(255,255,255,.8);margin-top:4px}
/* ---------------------------------------------------------------- 타일 ③
Sustainability : 4장 · 246×320 · gap 0 → 4열 «표» (246·4 = 984, 1px 공유) */
.sx-t3{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
border:1px solid var(--line);background:#fff}
.sx-t3>*{
padding:44px 22px;text-align:center;min-height:320px;
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
border-left:1px solid var(--line)}
.sx-t3>*:first-child{border-left:0}
.sx-t3 .ic{width:56px;height:56px;color:var(--g700);margin:0 0 22px}
.sx-t3 .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3}
.sx-t3 .bar{display:block;width:26px;height:1px;background:var(--g700);margin:0 0 20px}
.sx-t3 h3{font-size:18px;line-height:1.4;font-weight:400;color:var(--ink)}
.sx-t3 p{margin:14px 0 0;font-size:13px;line-height:1.7;color:var(--body);text-align:left}
/* ★숫자 칸을 flex 로 짜면 «106조 8,000» 과 억 원 이 서로 다른 flex 아이템이 되어
단위가 «다음 줄» 로 뚝 떨어지고 baseline 도 어긋난다(실제 결함).
인라인 흐름으로 되돌리면 baseline 은 브라우저가 알아서 맞춘다. */
.sx-t3 .num{
display:block;font-size:40px;line-height:1.18;letter-spacing:-2px;color:var(--g700);
margin:0 0 16px}
.sx-t3 .num u{
text-decoration:none;font-size:15px;letter-spacing:normal;margin-left:4px;
color:var(--body);white-space:nowrap}
.sx-t3 .lb{font-size:13px;color:var(--body);margin:0 0 10px}
.sx-t3 .note{margin:16px 0 0;font-size:12px;line-height:1.6;color:#737373;text-align:center}
/* Numbers 는 «106조 8,000억 원» 같은 긴 값이 있어 4열 246px 칸에 애초에 안 들어간다.
→ 타일①(489×249) 과 같은 2×2 로 짠다. 둘 다 S-OIL 문법 안이다. */
.sx-t3--num{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-t3--num>*{justify-content:center;min-height:224px;padding:38px 30px;
border-top:1px solid var(--line)}
.sx-t3--num>*:nth-child(-n+2){border-top:0}
.sx-t3--num>*:nth-child(2n+1){border-left:0}
.sx-t3--num>*:nth-child(2n){border-left:1px solid var(--line)}
.sx-p--mint .sx-t3{background:#fff}
/* ---------------------------------------------------------------- 2단 조판 (490/490) */
.sx-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.sx-2col p{font-size:15px;line-height:1.7;color:var(--body)}
.sx-2col p+p{margin-top:1.1em}
.sx-2col p.sx-lead,.sx-lead{font-size:16px;line-height:1.7;color:var(--g700);font-weight:700}
/* 숫자 스트립 — 4열 */
.sx-nums{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
margin:34px 0 0;border-top:1px solid var(--line);padding-top:22px}
.sx-nums>div{padding:0 18px;border-left:1px solid var(--line)}
.sx-nums>div:first-child{border-left:0;padding-left:0}
.sx-nums dt{font-size:13px;color:var(--body);margin:0 0 8px}
.sx-nums dd{margin:0;display:flex;align-items:baseline;gap:4px}
.sx-nums b{font-size:40px;line-height:1;font-weight:400;letter-spacing:-2px;color:var(--g700)}
.sx-nums span{font-size:15px;color:var(--body)}
/* 체크 목록 */
.sx-ticks{display:grid;gap:11px;margin:22px 0 0}
.sx-ticks li{position:relative;padding-left:22px;font-size:15px;line-height:1.7;color:var(--body)}
.sx-ticks li::before{
content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;background:var(--g700)}
/* ---------------------------------------------------------------- Relation
좌 653 / 우 326 2분할 (980 흰 카드 안) */
.sx-rel{display:grid;grid-template-columns:minmax(0,653px) minmax(0,326px);
gap:0;background:#fff;border:1px solid var(--line);justify-content:center}
.sx-rel__l{padding:24px;border-right:1px solid var(--line)}
.sx-rel__r{display:grid;grid-template-rows:auto auto;gap:0}
.sx-relhd{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px}
.sx-relhd h3{font-size:18px;font-weight:400;color:var(--ink)}
.sx-relhd a{font-size:20px;color:var(--g700);line-height:1}
.sx-news{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sx-news article{display:block}
.sx-news .th{display:block;height:132px;overflow:hidden;position:relative;background:#eee}
.sx-news .th img{width:100%;height:100%;object-fit:cover}
.sx-news .cat{
position:absolute;left:0;top:0;z-index:2;display:block;padding:6px 9px;
background:var(--g700);color:#fff;font-size:11px;line-height:1.2}
.sx-news h4{margin:15px 0 0;font-size:15px;font-weight:700;color:var(--g700);line-height:1.45}
.sx-news p{margin:9px 0 0;font-size:13px;line-height:1.65;color:var(--body)}
.sx-news time{
display:block;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
font-size:13px;color:#737373}
.sx-relbox{padding:20px 26px;border-bottom:1px solid var(--line)}
.sx-relbox:last-child{border-bottom:0}
.sx-relbox .sx-relhd{margin-bottom:12px}
.sx-relbox ul{margin:0;padding:0}
.sx-relbox li{padding:0}
.sx-relbox li a{
display:flex;gap:9px;align-items:center;padding:6px 0;font-size:13px;line-height:1.6;
color:var(--body)}
.sx-relbox li a::before{
content:"";flex:0 0 auto;width:3px;height:3px;background:var(--g700)}
.sx-relbox li a:hover{color:var(--g700);text-decoration:underline}
/* 나머지 소식 — 제목 + 본문 + 날짜 한 줄 */
.sx-nlist{margin:26px 0 0;border-top:1px solid var(--line)}
.sx-nlist li{
display:grid;grid-template-columns:74px minmax(0,1fr) 84px;gap:16px;align-items:start;
padding:12px 0;border-bottom:1px solid var(--line)}
.sx-nlist li:last-child{border-bottom:0}
.sx-nlist .c{
display:block;padding:3px 0;border:1px solid var(--g700);color:var(--g700);
font-size:11px;text-align:center;line-height:1.5}
.sx-nlist .d b{display:block;font-size:15px;font-weight:400;color:var(--ink);line-height:1.4}
.sx-nlist .d em{
display:block;margin-top:5px;font-style:normal;font-size:13px;line-height:1.6;color:var(--body)}
.sx-nlist time{font-size:12px;color:#737373;text-align:right;padding-top:3px}
.sx-foot{margin:22px 0 0;font-size:12px;color:#5E5E5E;text-align:center}
/* Contact 패널 */
.sx-contact{text-align:center}
.sx-contact p{font-size:15px;line-height:1.7;color:var(--body)}
.sx-contact__b{justify-content:center;margin-top:34px !important}
.sx-links--con{margin-top:52px;background:#fff}
/* ---------------------------------------------------------------- 링크 표 */
.sx-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
border:1px solid var(--line);margin:36px 0 0}
.sx-links a{display:block;padding:26px 22px;border-left:1px solid var(--line);background:#fff}
.sx-links a:first-child{border-left:0}
.sx-links a:hover{background:#F4F8F6}
.sx-links b{display:block;font-size:18px;font-weight:400;color:var(--ink)}
.sx-links span{display:block;margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--body)}
.sx-links i{display:block;margin:14px 0 0;font-style:normal;font-size:15px;color:var(--g700)}
/* ---------------------------------------------------------------- 우측 세로 페이저 */
.sx-pager{
position:fixed;top:50%;transform:translateY(-50%);left:calc(50% + 533px);
z-index:60;width:120px;
opacity:0;visibility:hidden;transition:opacity .3s}
.sx-pager.on{opacity:1;visibility:visible}
.sx-pager__up{
display:grid;place-items:center;width:24px;height:24px;border-radius:999px !important;
background:var(--g700);color:#fff;margin:0 0 22px}
.sx-pager__up svg{width:12px;height:12px}
.sx-pager ol{margin:0;padding:0}
.sx-pager li{margin:0 0 12px}
.sx-pager a{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--mute);
padding-bottom:5px;border-bottom:1px solid var(--line);width:22px;transition:width .25s}
.sx-pager a span{opacity:0;white-space:nowrap;transition:opacity .25s}
.sx-pager a[aria-current="true"]{color:var(--g700);width:112px;border-bottom-color:var(--g700)}
.sx-pager a[aria-current="true"] span{opacity:1}
.sx-pager a:hover{color:var(--g700);width:112px}
.sx-pager a:hover span{opacity:1}
/* 어두운 패널 위에서는 흰색으로 뒤집는다 */
.sx-pager--dark a{color:rgba(255,255,255,.72);border-bottom-color:rgba(255,255,255,.34)}
.sx-pager--dark a[aria-current="true"],.sx-pager--dark a:hover{
color:#fff;border-bottom-color:#fff}
.sx-pager--dark .sx-pager__up{background:#fff;color:var(--g900)}
/* ---------------------------------------------------------------- 푸터 */
body.home .ft{
background:#fff;color:var(--body);padding:56px 0 46px;
border-top:1px solid var(--line)}
body.home .ft__top{
grid-template-columns:220px minmax(0,1fr);gap:44px;padding-bottom:34px;
border-bottom:1px solid var(--line)}
body.home .ft__brand .hd__mark{
width:44px;height:44px;background:var(--g700);color:#fff;
display:inline-flex;align-items:center;justify-content:center;font-size:15px}
body.home .ft__slogan{font-size:13px;line-height:1.8;color:var(--body)}
body.home .ft__cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
body.home .ft__c h2{font-size:13px;color:var(--ink);font-weight:700;margin:0 0 14px}
body.home .ft__c a{font-size:12px;color:var(--body)}
body.home .ft__c a:hover{color:var(--g700);text-decoration:underline}
body.home .ft__legal{padding-top:26px}
body.home .ft__links{font-size:12px}
body.home .ft__links a{color:var(--g700);font-weight:700}
body.home .ft__addr{font-size:12px;line-height:1.9;color:#737373}
body.home .ft__copy{font-size:12px;color:#737373}
body.home .ft__sample{font-size:12px;color:var(--g700);font-weight:700}
body.home .totop{
right:22px;bottom:22px;width:44px;height:44px;background:var(--g700);
border:0;display:grid;place-items:center}
body.home .totop svg{width:18px;height:18px}
body.home .skip{background:var(--g700);color:#fff}
/* ================================================================ 반응형
컨테이너 980 은 «데스크톱만». 모바일은 100% − 좌우 20 (SPEC §4) */
@media (max-width:1360px){
.sx-pager{display:none}
}
@media (max-width:1100px){
body.home{padding-top:60px}
body.home .hd::before{display:none}
body.home .hd__in{height:60px;padding:0 20px;width:100%}
body.home .hd__logo{position:static;height:60px}
body.home .gnb,body.home .hd__cta,body.home .hd__in::after{display:none}
body.home .hd__burger{right:20px;top:10px;display:block}
body.home .mnav{top:60px;max-height:76vh;overflow:auto}
body.home .mnav>.wrap{padding:12px 20px 28px}
body.home .wrap,.sx-con{width:100%;padding:0 20px}
.sx-p{min-height:0;padding:76px 0}
.sx-hero{height:auto;min-height:0;padding:0}
/* ★좌우를 0 으로 쓰면 안 된다 — 바로 위 `.sx-con{padding:0 20px}` 과 «같은 명시도» 라
뒤에 온 이 규칙이 이겨서 히어로 글자가 화면 왼쪽 끝에 붙는다(390 에서 실제로 그랬다). */
.sx-hero__in{height:auto;padding:110px 20px 190px}
.sx-hero__t{padding-left:0}
/* 점·일시정지가 CTA 버튼 위로 겹쳐 앉던 것을 아래로 내린다 */
.sx-hero__dots{bottom:116px}
.sx-hero__down{bottom:48px}
.sx-h2{font-size:42px}
.sx-hd{margin-bottom:40px}
.sx-t1{grid-template-columns:minmax(0,1fr)}
.sx-t2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sx-t2 a{height:420px}
.sx-t3{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-t3>*{border-left:0;border-top:1px solid var(--line);min-height:0}
.sx-t3>*:nth-child(2n){border-left:1px solid var(--line)}
.sx-t3>*:nth-child(-n+2){border-top:0}
.sx-rel{grid-template-columns:minmax(0,1fr)}
.sx-rel__l{border-right:0;border-bottom:1px solid var(--line)}
.sx-links{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-links a:nth-child(-n+2){border-top:0}
.sx-links a{border-top:1px solid var(--line)}
.sx-links a:nth-child(2n+1){border-left:0}
.sx-nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0}
.sx-nums>div:nth-child(2n+1){border-left:0;padding-left:0}
body.home .ft__top{grid-template-columns:minmax(0,1fr)}
body.home .ft__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
.sx-p{padding:60px 0}
.sx-h2{font-size:34px}
.sx-hero__eb{font-size:24px}
.sx-hero__h .l1{font-size:28px}
.sx-hero__h .l2{font-size:33px}
.sx-hero__in{padding:84px 20px 196px}
.sx-hero__cta{flex-direction:column;align-items:stretch}
.sx-btn{min-width:0;width:100%}
.sx-2col{grid-template-columns:minmax(0,1fr);gap:0}
.sx-2col p+p,.sx-2col>div+div p:first-child{margin-top:1.1em}
.sx-t2{grid-template-columns:minmax(0,1fr)}
.sx-t2 a{height:360px}
.sx-t3,.sx-links{grid-template-columns:minmax(0,1fr)}
.sx-t3>*{border-left:0 !important;border-top:1px solid var(--line)}
.sx-t3>*:first-child{border-top:0}
.sx-links a{border-left:0 !important}
.sx-news{grid-template-columns:minmax(0,1fr)}
.sx-nums{grid-template-columns:minmax(0,1fr)}
.sx-nums>div{border-left:0;padding-left:0}
.sx-band{height:180px}
.sx-band--tall,.sx-band--mid{height:200px}
body.home .ft__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
.sx-h2{font-size:30px}
.sx-hero__h .l1{font-size:25px}
.sx-hero__h .l2{font-size:29px}
.sx-t1 h3{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
.sx-hero__bg li{transition:none}
.sx-t1 img{transition:none}
}