/* 회사소개 화면의 규칙 — 2026-09-28 에 템플릿 안에서 밖으로 뺐다.

   중문판(/zh/company)이 같은 뼈대를 쓰기 때문이다. 템플릿 안에 박아 두면
   두 페이지가 조금씩 갈라지고, 한쪽만 고치는 일이 반드시 생긴다.
   한글판(/company)과 중문판이 이 파일 하나를 같이 본다.

   한글판은 고객(설비를 찾는 쪽)의 말로, 중문판은 공급사(설비를 만드는
   쪽)의 말로 쓴다 — 뼈대는 같고 주어가 뒤집힌다. */

:root{
  --w:#fff; --g:#eceef0; --g2:#ffffff; --ink:#1a2128; --sub:#5f6b75; --dim:#8c979f;
  --ac:#1f6feb; --ac-d:#23897f; --ac-l:#9dc2f0;
  --hot:#0d1116;
  --brand:#14a89a;      /* 회사색 — 로고 민트 조각 */
  --sh:0 6px 30px rgba(20,30,40,.055), 0 1px 3px rgba(20,30,40,.04);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --lg:300px;          /* 갤러리 왼쪽 여백 — 화면 왼쪽 끝 기준 */
  --sg:160px;          /* 섹션 사이 여백 (레일 아래 40 과 합쳐 200) */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--g2); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo",sans-serif;
  font-size:17px; line-height:1.72; letter-spacing:-.018em; -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:break-word}
.w{max-width:1180px; margin:0 auto; padding:0 24px}

/* 상단 */
.nav{background:rgba(245,247,248,.85); position:sticky; top:0; z-index:9;
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px)}
.nav .w{display:flex; align-items:center; justify-content:space-between; height:58px; gap:12px}
.nav b{font-size:15px; font-weight:800; letter-spacing:.01em}
.nav .cn{font-size:12px; color:var(--dim); margin-left:8px}
/* 머리 메뉴 — 회사소개만 다른 화면으로 못 가고 있었다(2026-09-25).
   날짜는 본문 맨 아래 「조사분」에 이미 있어 여기서 뺀다. */
.nmenu{display:flex; align-items:center; gap:22px; margin-left:auto}
.nmenu a{font-size:14.5px; font-weight:700; letter-spacing:-.02em; color:var(--dim);
  text-decoration:none; white-space:nowrap; transition:.14s}
.nmenu a:hover{color:var(--hot)}
.nmenu a.go2{color:#fff; background:var(--hot); padding:9px 16px; border-radius:999px}
.nmenu a.go2:hover{background:#000}
@media(max-width:720px){
  .nmenu{gap:14px}
  .nmenu a{font-size:13px}
  .nmenu a.go2{padding:8px 13px}
}
@media(max-width:480px){ .nmenu a:not(.go2){display:none} }
.nav .dt{font-size:12px; color:var(--dim); font-family:var(--mono)}
.lg{display:flex; align-items:center; gap:9px}
.nmark{width:26px; height:26px; display:block}

/* 히어로 */
.herowrap{position:relative; overflow:hidden; border-bottom:1px solid #e2e9f2;
  background:
    radial-gradient(880px 520px at 16% 10%, rgba(20,168,154,.13), transparent 62%),
    radial-gradient(1020px 640px at 86% 24%, rgba(31,111,235,.15), transparent 64%),
    linear-gradient(180deg,#ffffff 0%,#eef3fb 54%,#ffffff 100%)}
.hero{position:relative}
/* 서비스 사다리 — 어디까지 그냥 드리고 어디서부터 계약인가.
   칸은 누적이다(위 칸은 아래 칸을 품는다). 요금은 적지 않는다. */
.svsec{padding:150px 0 0}
.svhead{text-align:center}
.svhead .eb{margin:0 0 16px; font-size:12.5px; font-weight:800; letter-spacing:.14em;
  color:var(--ac-d)}
.svhead h2{margin:0; font-size:clamp(23px,2.6vw,32px); line-height:1.3; font-weight:800;
  letter-spacing:-.044em; color:var(--hot)}
.svhead p{margin:14px auto 0; max-width:46ch; font-size:15px; line-height:1.72; color:var(--dim)}
.svfold{max-width:900px; margin:0 auto; border-top:1px solid rgba(15,22,28,.10);
  border-bottom:1px solid rgba(15,22,28,.10)}
.svfold>summary{list-style:none; cursor:pointer; position:relative;
  padding:30px 46px 30px 2px; display:block}
.svfold>summary::-webkit-details-marker{display:none}
.svfold>summary .eb{display:block; font-size:12.5px; font-weight:800; letter-spacing:.14em;
  color:var(--ac-d)}
/* 다른 섹션 제목(.svhead h2)과 같은 위계로 둔다 — 여기도 중요한 내용이다
   (2026-10-01 사장님 "여기도 중요한 내용이니 타이틀 위계로 맞춰줘"). */
.svfold>summary b{display:block; margin-top:11px; font-size:clamp(23px,2.6vw,32px);
  font-weight:800; letter-spacing:-.04em; color:var(--hot); line-height:1.3}
.svhint{display:block; margin-top:12px; font-size:15.5px; line-height:1.7; color:var(--dim)}
.svchev{position:absolute; right:8px; top:50%; width:11px; height:11px; margin-top:-9px;
  border-right:2px solid #9aa5ad; border-bottom:2px solid #9aa5ad;
  transform:rotate(45deg); transition:transform .22s ease, border-color .22s}
.svfold[open] .svchev{transform:rotate(-135deg); margin-top:-3px}
.svfold>summary:hover .svchev{border-color:var(--ac)}
.svfold>summary:focus-visible{outline:3px solid var(--ac); outline-offset:4px; border-radius:10px}
.svladder{max-width:780px; margin:4px auto 34px; background:#fff;
  border:1px solid rgba(15,22,28,.09); border-radius:16px; overflow:hidden}
.svrung{display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:start;
  padding:20px 24px 18px; border-top:1px solid rgba(15,22,28,.07)}
.svrung:first-child{border-top:0}
.svrung>*{min-width:0}
.svno{width:34px; height:34px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:14px; font-weight:800; letter-spacing:-.02em;
  background:#eef2f7; color:#7e8891}
.svt{margin:2px 0 0; font-size:17px; font-weight:800; letter-spacing:-.03em;
  color:var(--hot); line-height:1.3}
.svq{margin:8px 0 0; font-size:14.5px; line-height:1.66; color:#6c757d; font-weight:700}
.svd{margin:6px 0 0; font-size:14.5px; line-height:1.74; color:var(--dim)}
/* 계약 구간 — 먹으로 갈라 보인다 */
.svsplit{display:flex; align-items:center; gap:16px; margin:0; padding:11px 24px;
  background:#f6f8fa; border-top:1px solid rgba(15,22,28,.07)}
.svsplit span{flex:1; height:1px; background:rgba(15,22,28,.12)}
.svsplit b{font-size:11.5px; font-weight:800; letter-spacing:.09em; color:#9aa5ad}
.svrung.deal{background:#f6f8fa}
.svrung.deal .svno{background:#e4e9f0; color:#6c757d}
@media (max-width:820px){
  .svsec{padding-top:104px}
  .svrung{grid-template-columns:30px 1fr; gap:13px; padding:17px 18px 15px}
  .svsplit{padding:10px 18px}
  .svno{width:30px; height:30px; border-radius:9px; font-size:13px}
}

/* 히어로 공급사 띠 — 왼쪽에서 오른쪽으로 끝없이 흐른다. 양옆은 흐려 사라진다 */
.hsup{width:100vw; margin-left:calc(50% - 50vw); margin-top:46px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.htrack{display:flex; gap:14px; width:max-content; padding:6px 0 10px;
  animation:hslide 150s linear infinite; will-change:transform}
@keyframes hslide{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.hsup:hover .htrack{animation-play-state:paused}
.hcard{flex:none; display:flex; align-items:center; gap:12px; padding:11px 15px 11px 11px;
  background:rgba(255,255,255,.58); border:1px solid rgba(15,22,28,.07); border-radius:16px;
  box-shadow:0 1px 2px rgba(15,22,28,.04), 0 8px 18px rgba(15,22,28,.055)}
.hcard>img{width:42px; height:42px; border-radius:11px; object-fit:cover; flex:none}
.hcb{text-align:left; min-width:0; max-width:208px}
.hcb>span{display:block}
.hcname{font-size:13.5px; font-weight:700; color:#39424a; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hceq{margin-top:3px; font-size:11.5px; color:#98a3ab;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hcsc{margin-left:4px; font-size:20px; font-weight:800; letter-spacing:-.03em;
  color:var(--hot); font-variant-numeric:tabular-nums; white-space:nowrap}
.hcsc em{font-style:normal; font-size:.55em; color:#9aa5ad; margin-left:1px}
.hcsc.mid{color:#6c757d}
.hcsc.low{color:#c07818}
.hbadge{flex:none; font-size:11px; font-weight:800; color:#0b7a6e; letter-spacing:-.01em;
  background:rgba(20,168,154,.14); padding:5px 10px; border-radius:999px; white-space:nowrap}
@media (prefers-reduced-motion: reduce){ .htrack{animation:none} }

/* 히어로 증거 ② 쥐고 있는 것 — 지어낸 값이 아니라 조사분이다 */
.hxnums{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  max-width:820px; margin:46px auto 0}
.hxn{background:#fff; border:1px solid rgba(15,22,28,.05); border-radius:18px;
  padding:26px 14px 22px;
  box-shadow:0 1px 2px rgba(15,22,28,.05), 0 10px 22px rgba(15,22,28,.075),
             0 26px 50px rgba(15,22,28,.06)}
.hxn b{display:block; font-size:clamp(21px,3.5vw,42px); font-weight:800;
  letter-spacing:-.045em; color:var(--hot); line-height:1.06; font-variant-numeric:tabular-nums}
.hxn b i{font-style:normal; font-size:.5em; margin-left:2px; color:var(--ac-d)}
.hxn span{display:block; margin-top:11px; font-size:clamp(13.5px,1.35vw,17px);
  font-weight:700; color:var(--sub); letter-spacing:-.025em}
.hxasof{margin:20px 0 0; font-size:12.5px; color:#9aa5ad}
/* 2026-10-02 — 데스크톱 1440×900 에서 「설비 문의하기」가 첫 화면 아래 끝에 걸려
   잘렸다(y≈893, 화면 점검표 1). 위 여백과 마크를 줄여 첫 화면 안으로 올린다. */
.hero{text-align:center; padding:52px 0 70px}
.hmark{display:block; width:132px; height:132px; margin:0 auto 18px}
@media (min-width:901px) and (max-height:820px){
  .hero{padding-top:36px}
  .hmark{width:104px; height:104px}
}
.hero h1{font-size:clamp(46px,8vw,96px); line-height:1.02; margin:0;
  font-weight:800; letter-spacing:-.05em; color:var(--brand)}
.hslogan{margin:32px auto 0; font-size:clamp(23px,3.1vw,36px); color:var(--hot);
  max-width:22ch; line-height:1.38; letter-spacing:-.04em; font-weight:750}
.go{display:inline-block; margin-top:32px; font-size:15.5px; font-weight:700;
  color:#fff; background:var(--hot); text-decoration:none; letter-spacing:-.02em;
  padding:14px 28px; border-radius:999px; transition:.16s}
.go:hover{background:#000; transform:translateY(-1px)}
.go.ghost{background:none; color:var(--hot); padding:0 0 4px; border-radius:0;
  border-bottom:2px solid var(--hot); margin-top:26px; font-size:15px}
.go.ghost:hover{background:none; border-color:var(--ac); color:var(--ac-d)}

/* 카드 색 — 무채색 실버. 표준 사양서 한 장만 먹.
   카드 밖 캡션은 흰 바탕용 변수를 그대로 쓰므로 카드에만 덮는다. */
.slide{--ac:#1f6feb; --ac-d:#1558c0; --ac-l:#9dc2f0; --ac-bg:#eef1f4}
#rl,#r2,#r4,#r7{--ac-bg:#e4e8ed}
/* 맡기신 뒤(r8) — 누구에게 맡길까 카드(c3)와 같은 먹. 2026-10-03 */
#r8 .card{--ac:#5fa0f8; --ac-d:#9dc2f0; --ac-l:rgba(255,255,255,.3);
  --hot:#fff; --ink:#fff; --sub:#b9c1c8; --dim:#7e878f;
  background:#1a2026; color:#fff}
#r5 .card{--ac:#5fa0f8; --ac-d:#9dc2f0; --ac-l:rgba(255,255,255,.3);
  --hot:#fff; --ink:#fff; --sub:#b9c1c8; --dim:#7e878f;
  background:#1a2026; color:#fff}

/* 먹 카드(표준 사양서) 안쪽 */
#r5 .sp .top{border-bottom-color:rgba(255,255,255,.13)}
#r5 .sp .foot{border-top-color:rgba(255,255,255,.13)}
#r5 .sp .zh{background:rgba(255,255,255,.09); color:#dfe4e8}
#r5 .sp .tag.ask{background:rgba(255,255,255,.1); color:#9dc2f0}
#r5 .sp .tag.give{background:rgba(255,255,255,.1); color:#b8c0c7}
#r5 .sp .why:before{color:#9dc2f0}
#r5 .ticks i{background:rgba(255,255,255,.14)}
#r5 .ticks i.on{background:#5fa0f8}
#r5 .sp .dots i{background:rgba(255,255,255,.2)}
#r5 .sp .dots i.a{background:#9dc2f0}



/* 히어로 → 섹션 다리 */
.bridge{padding:96px 0 0}
.bhead{max-width:none; text-align:center}
.bridge h2{white-space:nowrap}
.bridge .eb{margin:0 0 16px; font-size:12.5px; font-weight:800; letter-spacing:.14em;
  color:var(--ac-d)}
.bridge h2{font-size:clamp(28px,3.8vw,46px); line-height:1.24; margin:0;
  font-weight:800; letter-spacing:-.044em; color:var(--hot)}
.bcards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px}
.bcard{border-radius:24px; padding:46px 30px 40px; min-height:376px;
  display:flex; flex-direction:column; text-align:center; color:#fff;
  /* 사파리는 <button> 에 display:flex 를 걸면 자식을 늘이지 않고 왼쪽에 붙인다.
     크롬에서는 안 보이는 차이다 — 아이폰에서 아이콘·글자가 왼쪽으로 몰렸다
     (2026-09-25). align-items 를 못박아 둔다. */
  align-items:stretch}
.bcard > *{width:100%}
.bcard .ic{flex:1; display:flex; align-items:center; justify-content:center}
.bcard .ic svg{width:126px; height:126px}
.bcard b{display:block; font-size:clamp(26px,3vw,36px); font-weight:800;
  letter-spacing:-.04em; margin-top:28px; line-height:1.24}
.bcard span{display:block; margin-top:13px; font-size:16px; color:rgba(255,255,255,.75)}
.bcard.c1{background:#1f6feb}
.bcard.c2{background:var(--brand)}
.bcard.c3{background:#1a2026}
/* 카드 입구 — 모달이 있는데 누를 수 있다는 표시가 없었다(2026-10-03 사장님 「입구가 없어」).
   카드 전체가 단추이고, 아래에 보이는 입구 하나(손가락 44px 이상). */
.bcard .bgo{display:inline-flex; align-items:center; justify-content:center; gap:7px; width:auto;
  align-self:center; min-height:44px; margin-top:22px; padding:0 20px; border-radius:999px;
  font-style:normal; font-size:15px; font-weight:800; letter-spacing:-.02em; color:#fff;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34); transition:background .18s}
.bcard .bgo i{font-style:normal; transition:transform .18s}
.bcard:hover .bgo,.bcard:focus-visible .bgo{background:rgba(255,255,255,.28)}
.bcard:hover .bgo i{transform:translateX(3px)}
.mcta .mdown{display:inline-block; font:inherit; font-size:15.5px; font-weight:700; color:#fff;
  background:var(--hot); border:0; cursor:pointer; letter-spacing:-.02em; min-height:44px;
  padding:12px 26px; border-radius:999px; transition:.16s}
.mcta .mdown:hover{background:#000}
.gal h2[tabindex]:focus{outline:none}
/* 흐름도 다섯 칸 입구 — 위 세 카드와 같은 말 · 같은 모양(밝은 판은 파랑 테, 짙은 판은 흰 테) */
.fs .fgo{display:inline-flex; align-items:center; gap:7px; min-height:44px; margin-top:auto; padding:0 18px;
  border-radius:999px; font-style:normal; font-size:14.5px; font-weight:800; letter-spacing:-.02em;
  color:#1f6feb; border:1px solid rgba(31,111,235,.35); background:rgba(31,111,235,.05); transition:background .18s}
.fs .fgo i{font-style:normal; transition:transform .18s}
.fs .ln{margin-bottom:16px}  /* 입구는 칸 바닥에 맞춘다 */
.fs:hover .fgo,.fs:focus-visible .fgo{background:rgba(31,111,235,.12)}
.fs:hover .fgo i{transform:translateX(3px)}
.fl5g.deal .fs .fgo{color:#fff; border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.08)}
.fl5g.deal .fs:hover .fgo{background:rgba(255,255,255,.18)}

/* 갤러리 카드를 누르면 CTA 가 뜬다 */
.slide .card{cursor:pointer; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s}
.slide .card:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(15,22,28,.10), 0 16px 30px rgba(15,22,28,.16),
             0 40px 74px rgba(15,22,28,.18)}
.scap .sgo{display:inline-block; margin-top:12px; font-size:15px; font-weight:800;
  color:var(--ac-d); background:none; border:0; padding:0 0 3px; cursor:pointer;
  font-family:inherit; letter-spacing:-.02em; border-bottom:2px solid var(--ac-l)}
.scap .sgo:hover{color:var(--ac); border-color:var(--ac)}
.scap .sgo:focus-visible{outline:3px solid var(--ac); outline-offset:3px}
.mcta{margin:30px 0 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.mcta a{display:inline-block; font-size:15.5px; font-weight:700; color:#fff;
  background:var(--hot); text-decoration:none; letter-spacing:-.02em;
  padding:14px 28px; border-radius:999px; transition:.16s}
.mcta a:hover{background:#000; transform:translateY(-1px)}
.mcta em{font-style:normal; font-size:13.5px; color:var(--dim)}

/* 모달 */
.bcard{border:none; cursor:pointer; font:inherit; transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s}
.bcard:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(15,22,28,.18)}
.bcard:focus-visible{outline:3px solid var(--ac); outline-offset:3px}
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:60; display:flex; align-items:center;
  justify-content:center; padding:24px}
.mbg{position:absolute; inset:0; background:rgba(12,18,24,.55);
  backdrop-filter:blur(3px); animation:mfade .2s ease}
.mpanel{position:relative; width:min(620px,100%); max-height:86vh; overflow:auto;
  background:#fff; border-radius:24px; box-shadow:0 30px 80px rgba(10,16,22,.4);
  animation:mrise .28s cubic-bezier(.16,1,.3,1)}
@keyframes mfade{from{opacity:0}}
@keyframes mrise{from{opacity:0; transform:translateY(16px) scale(.98)}}
.mtop{position:relative; padding:38px 34px; display:flex; align-items:center;
  justify-content:center; border-radius:24px 24px 0 0}
.mic{display:block; width:84px; height:84px}
.mtop.noic{padding:14px; min-height:64px}
.mtop.noic .mic{display:none}
.mic svg{width:100%; height:100%; display:block}
.mx{position:absolute; top:16px; right:18px; width:36px; height:36px; border:none;
  border-radius:50%; background:rgba(255,255,255,.2); color:#fff; font-size:22px;
  line-height:1; cursor:pointer; transition:.15s}
.mx:hover{background:rgba(255,255,255,.34)}
.mbody{padding:34px 38px 40px}
.mbody h3{margin:0 0 22px; font-size:clamp(24px,3vw,31px); font-weight:800;
  letter-spacing:-.04em; color:var(--hot)}
.mbody p{margin:0 0 16px; font-size:17px; line-height:1.82; color:var(--sub);
  letter-spacing:-.016em}
.mbody p:last-child{margin-bottom:0}
.mbody b{color:var(--hot); font-weight:750}
@media(max-width:600px){
  .mtop{padding:30px 24px}
  .mic{width:66px; height:66px}
  .mbody{padding:26px 24px 32px}
  .mbody p{font-size:16px}
}

/* 갤러리 */
.gal{padding:var(--sg) 0 0; margin-left:calc(var(--lg) - (50vw - 50%))}
.w > .bridge:first-child{padding-top:84px}
.gal h2{font-size:clamp(32px,4.6vw,58px); line-height:1.2; margin:0;
  font-weight:800; letter-spacing:-.046em; max-width:18ch; color:var(--hot)}
.gsub{margin:22px 0 0; font-size:17px; line-height:1.76; color:var(--dim);
  max-width:44ch; letter-spacing:-.015em}

/* 레일은 오른쪽으로 흘러나간다 — 왼쪽은 본문 여백에 맞춘다 */
/* 가로 스크롤 안내 — 레일이 있는지 모르겠다는 말을 들었다(2026-09-25).
   글자로 한 번 말하고, 레일 오른쪽 끝을 흐리게 해서 「더 있다」를 보인다. */
.gswipe{display:flex; align-items:center; gap:10px; margin:18px 0 0;
  font-size:14.5px; font-weight:700; letter-spacing:-.02em; color:var(--ac-d)}
.gswipe i{width:26px; height:1.5px; background:currentColor; border-radius:2px;
  position:relative; opacity:.55; animation:gsw 1.8s ease-in-out infinite}
.gswipe i:after{content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px; border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor; transform:rotate(45deg)}
@keyframes gsw{0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)}}
@media(prefers-reduced-motion:reduce){.gswipe i{animation:none}}
/* 레일 오른쪽 끝을 흐리게 — 잘린 게 아니라 더 있다는 뜻으로 읽힌다.
   넓은 화면에서만 쓴다. 좁은 화면에서는 카드 폭이 작아 흐림이 내용을
   지워 버린다(2026-09-25 — 값이 안 보인다는 지적). 거기선 글자 안내로 간다. */
@media(min-width:901px){
  .grail{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 90px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 calc(100% - 90px),transparent 100%)}
}
.grail{width:100vw; margin-left:calc(50% - 50vw);
  padding:34px 0 40px var(--lg);
  display:flex; gap:60px; align-items:stretch; overflow-x:auto;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  scroll-padding-left:var(--lg); overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none}
.grail::-webkit-scrollbar{display:none}
.grail:after{content:""; flex:none; width:24px}
.slide{flex:none; width:min(720px,64vw); scroll-snap-align:start;
  display:flex; flex-direction:column}
.slide .card{flex:1; background:var(--ac-bg); border-radius:24px;
  box-shadow:0 2px 4px rgba(15,22,28,.10), 0 12px 24px rgba(15,22,28,.14),
             0 34px 64px rgba(15,22,28,.16);
  padding:26px 30px 20px; display:flex; flex-direction:column}
.slide .card .viz{background:none; box-shadow:none; border-radius:0; padding:0;
  min-height:0; width:100%; margin:0}
.slide .scap{margin:30px 4px 0; font-size:17px; line-height:1.74; color:var(--dim);
  letter-spacing:-.016em; max-width:50ch}
.slide .scap b{color:var(--ac-d); font-weight:800; margin-right:7px}

/* 꺾은선 */
.lc{display:block; width:100%; height:auto; overflow:visible}
.lc .g{stroke:#eceef0; stroke-width:1}
.lc .yl{font-family:var(--mono); font-size:12.5px; fill:var(--dim); text-anchor:end}
.lc .xl{font-family:var(--mono); font-size:12.5px; fill:var(--dim)}
.lc .band{fill:url(#bd)}
.lc .edge{fill:none; stroke:var(--ac-l); stroke-width:1.3}
.lc .mid{fill:none; stroke:var(--ac); stroke-width:3.4; stroke-linejoin:round; stroke-linecap:round}
.lc .cur{stroke:var(--ink); stroke-width:1; opacity:0; pointer-events:none;
  transition:x1 .55s cubic-bezier(.16,1,.3,1), x2 .55s cubic-bezier(.16,1,.3,1), opacity .3s}
.lc .cdot{fill:var(--ac); stroke:#fff; stroke-width:2.5; opacity:0; pointer-events:none;
  transition:cx .55s cubic-bezier(.16,1,.3,1), cy .55s cubic-bezier(.16,1,.3,1), opacity .3s}
.lc .hit{fill:transparent; cursor:crosshair}
#swr{transform:scaleX(0); transform-origin:62px 0; transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.on #swr{transform:scaleX(1)}
.rd{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:20px;
  padding-top:18px; border-top:1px solid #eceef0}
.rd{transition:opacity .26s}
.rd.sw{opacity:.25}
.rd .nm{font-size:19px; font-weight:750; letter-spacing:-.025em}
.rd .pv{font-family:var(--mono); font-size:14.5px; color:var(--sub)}
.rd .pv b{color:var(--ink); font-weight:700}
.rd .rx{font-family:var(--mono); font-size:16px; font-weight:800; color:var(--ac-d); margin-left:auto}

/* 값 곡선 */
.qz{padding:0}
.qhead{display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding-bottom:12px; margin-bottom:8px; border-bottom:1px solid rgba(0,0,0,.07)}
.qn{font-size:clamp(18px,2.1vw,23px); font-weight:800; letter-spacing:-.035em;
  margin:0; line-height:1.24; color:var(--hot); transition:opacity .26s}
.qs{margin:6px 0 0; font-size:13.5px; color:var(--dim); font-family:var(--mono);
  transition:opacity .26s}
.qs b{color:var(--sub); font-weight:700}
.qr{flex:none; text-align:right}
.qr b{font-family:var(--mono); font-size:26px; font-weight:800; letter-spacing:-.045em;
  color:var(--ac-d); display:block; line-height:1}
.qr em{font-style:normal; font-size:12px; color:var(--dim)}
.qz.sw .qn,.qz.sw .qs{opacity:.25}
.qc{display:block; width:100%; height:auto; overflow:visible}
.qc .g{stroke:rgba(0,0,0,.07); stroke-width:1}
.qc .yl{font-family:var(--mono); font-size:12px; fill:var(--dim); text-anchor:end}
.qc .xl{font-family:var(--mono); font-size:11.5px; fill:#b3bcc3}
.qc .zone{fill:#fff; fill-opacity:.62}
.qc .qarea{fill:url(#qg)}
.qc .qline{fill:none; stroke:var(--ac); stroke-width:3.4;
  stroke-linejoin:round; stroke-linecap:round}
.qc .qdot{fill:#fff; stroke:var(--ac); stroke-width:3}
.qfoot{display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:14px; padding-top:13px; border-top:1px solid rgba(0,0,0,.07)}
.qfoot em{font-style:normal; font-size:12.5px; color:var(--dim); font-family:var(--mono)}
.qz .dots{display:flex; gap:6px}
.qz .dots i{width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,.12);
  transition:.3s; cursor:pointer}
.qz .dots i.a{background:var(--ac); width:18px; border-radius:3px}

/* 이름 바꾸기 */
.nmz{padding:0}
.nmz .cap{font-size:13.5px; font-weight:800; letter-spacing:.02em; color:var(--sub);
  margin:0 0 14px}
.nmz .cap2{font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--dim);
  margin:0 0 7px}
.nmz .raw{font-size:17px; line-height:1.78; color:#9aa5ad; font-family:var(--mono);
  min-height:4.7em; letter-spacing:-.01em;
  transition:opacity .28s ease, filter .28s ease}
.nmz .arw{display:flex; align-items:center; gap:14px; margin:22px 0 18px}
.nmz .arw span{flex:1; height:1px; background:rgba(0,0,0,.1)}
.nmz .arw b{font-size:12px; color:var(--ac-d); font-weight:800; letter-spacing:.06em}
.nmz .ko{font-size:17px; font-weight:800; letter-spacing:-.02em;
  line-height:1.45; color:var(--hot); min-height:1.5em;
  transition:opacity .42s ease .1s, transform .42s cubic-bezier(.16,1,.3,1) .1s}
.lenbars{margin-top:20px; display:grid; gap:9px}
.lb{display:grid; grid-template-columns:44px 1fr 46px; gap:11px; align-items:center}
.lb .l{font-size:12px; color:var(--dim)}
.lb .t{height:9px; border-radius:5px; background:rgba(0,0,0,.09); overflow:hidden}
.lb .t i{display:block; height:100%; border-radius:5px; background:rgba(0,0,0,.22);
  width:0; transition:width .7s cubic-bezier(.16,1,.3,1)}
.lb .t i.on{background:var(--ac)}
.lb .n{font-family:var(--mono); font-size:12px; text-align:right; color:var(--dim)}
.nmz .meta{margin-top:16px; padding-top:13px; border-top:1px solid rgba(0,0,0,.07);
  display:flex; justify-content:space-between; align-items:center; gap:12px}
.nmz .meta em{font-style:normal; font-size:13px; color:var(--dim); font-family:var(--mono)}
.nmz .dots{display:flex; gap:6px}
.nmz .dots i{width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,.12); transition:.3s}
.nmz .dots i.a{background:var(--ac); width:18px; border-radius:3px}
.nmz.sw .raw{opacity:.18; filter:blur(1.5px)}
.nmz.sw .ko{opacity:0; transform:translateY(10px)}
.nmz .arw b{transition:color .3s}
.nmz.sw .arw b{color:var(--ac)}
.nmz .dots i{cursor:pointer}
.nmz .dots i:hover{background:#b9c2c9}
.nmz .dots i.a:hover{background:var(--ac)}

/* 공급사 평가 카드 */
.ev{padding:0}
.ev .who{display:flex; align-items:center; gap:14px; min-width:0; padding-bottom:16px;
  border-bottom:1px solid rgba(0,0,0,.07); margin-bottom:4px}
.ev .lo{width:52px; height:52px; border-radius:11px; flex:none; object-fit:cover;
  background:#fff; filter:blur(1.6px); user-select:none;
  -webkit-user-drag:none; pointer-events:none}
.ev .who .id{flex:1; min-width:0}
.ev .mask{display:block; font-size:16.5px; font-weight:750; color:var(--sub);
  letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ev .eq{display:block; font-size:13px; color:var(--dim); margin-top:7px}
.ev .tot{text-align:right; flex:none; white-space:nowrap}
.ev .tot b{font-family:var(--mono); font-size:27px; font-weight:800; letter-spacing:-.04em;
  display:block; line-height:1; color:var(--hot)}
.ev .tot em{font-style:normal; font-size:11px; color:var(--dim); letter-spacing:.04em}
.ev .ax{display:grid; grid-template-columns:1fr 46px 58px; gap:8px 14px;
  align-items:center; padding:11px 0 0}
.ev .ax .l{font-size:14.5px; color:var(--sub)}
.ev .ax .n{font-family:var(--mono); font-size:14px; font-weight:700; text-align:right}
.ev .ax .gd{font-size:11.5px; font-weight:700; text-align:right}
.ev .ax .tr{grid-column:1/-1; height:7px; border-radius:3px; background:#fff; overflow:hidden}
.ev .ax .fl{display:block; height:100%; border-radius:3px; background:var(--ac-l);
  width:0; transition:width .7s cubic-bezier(.16,1,.3,1)}
.ev .ax.good .fl{background:var(--ac)} .ev .ax.good .gd{color:var(--ac-d)}
.ev .ax.mid  .gd{color:var(--dim)}
.ev .ax.low  .fl{background:#e0a878} .ev .ax.low .gd{color:#b4712f}
.ev .foot{margin-top:16px; padding-top:13px; border-top:1px solid rgba(0,0,0,.07);
  display:flex; justify-content:space-between; align-items:center; gap:10px}
.ev .foot em{font-style:normal; font-size:12.5px; color:var(--dim)}
.ev .dots{display:flex; gap:6px}
.ev .dots i{width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,.12); transition:.3s; cursor:pointer}
.ev .dots i.a{background:var(--ac); width:18px; border-radius:3px}
.ev.sw .who,.ev.sw .ax{opacity:.2}
.ev .who,.ev .ax{transition:opacity .26s}

/* 표준 공정도 */
.fz{padding:0}
.fz .top,.lz .top{display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; padding-bottom:20px; border-bottom:1px solid rgba(0,0,0,.07)}
.fz .top b,.lz .top b{font-size:15px; font-weight:750; min-width:0}
.fz .top em,.lz .top em{flex:none; white-space:nowrap}
.fz .top em,.lz .top em{font-style:normal; font-size:12.5px; color:var(--dim); font-family:var(--mono)}
.fz .steps{padding:18px 0 6px; transition:opacity .26s;
  display:flex; flex-wrap:wrap; align-items:center; gap:9px 0}
.fz.sw .steps{opacity:.2}
.fz .st{display:inline-flex; align-items:center; gap:7px; background:#fff;
  border-radius:9px; padding:9px 13px; box-shadow:0 1px 3px rgba(20,30,40,.08)}
.fz .st .no{font-family:var(--mono); font-size:11px; font-weight:800;
  color:var(--ac-d); opacity:.68}
.fz .st .nm{font-size:14.5px; font-weight:650; white-space:nowrap}
.fz .st.end{background:var(--ac); box-shadow:none}
.fz .st.end .no{color:#fff; opacity:.6}
.fz .st.end .nm{color:#fff}
.fz .ar{flex:none; width:17px; text-align:center; color:rgba(0,0,0,.25);
  font-size:12px; line-height:1; font-style:normal}
.fz .foot,.lz .foot{display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(0,0,0,.07)}
.fz .foot em,.lz .foot em{font-style:normal; font-size:12.5px; color:var(--dim)}
.fz .dots,.lz .dots{display:flex; gap:6px}
.fz .dots i,.lz .dots i{width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,.12);
  transition:.3s; cursor:pointer}
.fz .dots i.a,.lz .dots i.a{background:var(--ac); width:18px; border-radius:3px}

/* 표준 견적 사양 */
.lz{padding:0}
.lz .rungs{padding:10px 0 2px; transition:opacity .26s}
.lz.sw .rungs{opacity:.2}
.lz .rg{padding:9px 0 11px; border-bottom:1px solid rgba(0,0,0,.05)}
.lz .rg:last-child{border-bottom:none}
.lz .rg .hd{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.lz .rg .t{font-size:16px; font-weight:750; letter-spacing:-.02em}
.lz .rg .t u{text-decoration:none; color:var(--ac); margin-right:5px}
.lz .rg .p{font-family:var(--mono); font-size:15.5px; font-weight:800; white-space:nowrap}
.lz .rg .p em{font-style:normal; font-size:.72em; color:var(--dim); margin-left:1px; font-weight:600}
.lz .rg .c{font-size:13px; color:var(--ac-d); margin:4px 0 0}
.lz .rg .bar{display:block; height:5px; border-radius:3px; background:#fff;
  margin-top:7px; overflow:hidden}
.lz .rg .fl{display:block; height:100%; border-radius:3px; background:var(--ac-l); width:0;
  transition:width .8s cubic-bezier(.16,1,.3,1)}
.lz .rg:last-child .fl{background:var(--ac)}
.lz.on .rg .fl{width:var(--p)}

/* 표준 사양서 */
.sp{padding:0}
.sp .top{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding-bottom:20px; border-bottom:1px solid rgba(0,0,0,.07)}
.sp .top b{font-size:15px; font-weight:750}
.sp .top em{font-style:normal; font-size:12.5px; color:var(--dim); font-family:var(--mono)}
.sp .body{padding:18px 0 4px; min-height:168px; transition:opacity .26s}
.sp.sw .body{opacity:.2}
.sp .tag{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.04em;
  padding:5px 11px; border-radius:100px; margin-bottom:16px}
.sp .tag.give{background:#fff; color:#5b656d}
.sp .tag.ask{background:#fff; color:var(--ac-d)}
.sp .ko{font-size:clamp(20px,2.4vw,26px); font-weight:800; letter-spacing:-.03em;
  color:var(--hot); margin:0 0 14px; line-height:1.3}
.sp .zh{font-size:15.5px; line-height:1.72; color:var(--sub); margin:0;
  padding:14px 16px; background:#fff; border-radius:10px;
  font-family:-apple-system,"PingFang SC","Noto Sans SC",sans-serif}
.sp .why{margin:16px 0 0; font-size:14.5px; color:var(--dim); line-height:1.7;
  padding-left:17px; position:relative}
.sp .why:before{content:"↳"; position:absolute; left:0; color:var(--ac)}
.ticks{display:flex; gap:4px; margin-top:16px}
.ticks i{flex:1; height:6px; border-radius:3px; background:rgba(0,0,0,.1); transition:.3s}
.ticks i.on{background:var(--ac)}
.sp .foot{display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:12px; padding-top:13px; border-top:1px solid rgba(0,0,0,.07)}
.sp .foot em{font-style:normal; font-size:12.5px; color:var(--dim)}
.sp .dots{display:flex; gap:6px}
.sp .dots i{width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,.12); transition:.3s; cursor:pointer}
.sp .dots i.a{background:var(--ac); width:18px; border-radius:3px}

/* 같은 표 */
.bz{padding:0}
.bz .side{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:750}
.bz .side.up{color:var(--hot); justify-content:center; margin-bottom:6px}
.bz .side.dn{color:var(--ac-d); justify-content:center; margin-top:6px}
.bz .side i{font-style:normal; font-size:15px; line-height:1}
.bz .band{position:relative; height:74px; margin:4px 0}
.bz .rail{position:absolute; left:6%; right:6%; top:35px; height:8px; border-radius:4px;
  background:linear-gradient(90deg,#fff,var(--ac-l))}
.bz .cap{position:absolute; top:28px; width:2px; height:22px; background:#c2cdd4; border-radius:1px}
.bz .cap.l{left:6%} .bz .cap.r{right:6%}
.bz .pin{position:absolute; top:24px; width:16px; height:30px; margin-left:-8px;
  transition:left .6s cubic-bezier(.16,1,.3,1)}
.bz .pin b{display:block; width:16px; height:16px; border-radius:50%;
  background:var(--ac); border:3px solid #fff; box-shadow:0 2px 8px rgba(20,30,40,.18);
  margin:7px 0 0}
.bz .vtop,.bz .vbot{position:absolute; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:12.5px; color:var(--dim)}
.bz .vtop{top:4px} .bz .vbot{bottom:0}
.bz .vnum{position:absolute; top:-2px; transform:translateX(-50%); font-family:var(--mono);
  font-size:15px; font-weight:800; color:var(--hot); white-space:nowrap;
  transition:left .6s cubic-bezier(.16,1,.3,1)}
.bz .ends{display:flex; justify-content:space-between; padding:0 4%;
  font-family:var(--mono); font-size:12px; color:var(--dim); margin-top:2px}
.bz .meta{margin-top:16px; padding-top:13px; border-top:1px solid rgba(0,0,0,.07);
  display:flex; justify-content:space-between; align-items:center; gap:12px}
.bz .meta b{font-size:15px; font-weight:750}
.bz .meta em{font-style:normal; font-size:12.5px; color:var(--dim); font-family:var(--mono)}
.bz .dots{display:flex; gap:6px}
.bz .dots i{width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,.12); transition:.3s; cursor:pointer}
.bz .dots i.a{background:var(--ac); width:18px; border-radius:3px}
.bz.sw .meta b,.bz.sw .vnum{opacity:.25}
.bz .meta b,.bz .vnum{transition:opacity .26s, left .6s cubic-bezier(.16,1,.3,1)}

/* 2026-10-03 「설비를 들일 때 정해야 할 것 세 가지」 재배치 — 새 그림 셋.
   받으신 견적 짚어 드리기(.qk) · 대화 기록(.tk) · 맡기신 뒤(.af).
   옛 .bz 규칙은 한글·중문 모두 그림을 뺐지만(10/03) 지우기는 따로 — 남겨 둔다. */
.qk,.tk,.af{padding:0}
.qk .top,.tk .top,.af .top{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding-bottom:13px; border-bottom:1px solid rgba(0,0,0,.07)}
.qk .top b,.tk .top b,.af .top b{font-size:15px; font-weight:750; min-width:0}
.qk .top em,.tk .top em,.af .top em{flex:none; font-style:normal; font-size:12.5px; color:var(--dim)}
.qk .foot,.tk .foot,.af .foot{margin-top:auto; padding-top:13px; border-top:1px solid rgba(0,0,0,.07);
  display:flex; justify-content:space-between; align-items:center; gap:12px}
.qk .foot em,.tk .foot em,.af .foot em{font-style:normal; font-size:12.5px; color:var(--dim)}
.qk .dots,.tk .dots,.af .dots{display:flex; gap:6px; flex:none}
.qk .dots i,.tk .dots i,.af .dots i{width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,.12);
  transition:.3s; cursor:pointer}
.qk .dots i.a,.tk .dots i.a,.af .dots i.a{background:var(--ac); width:18px; border-radius:3px}
.slide .card .qk,.slide .card .tk,.slide .card .af{flex:1; display:flex; flex-direction:column}

/* 받으신 견적 짚어 드리기 — 시세 띠(열에 여덟) 위에 받으신 견적 핀. 핀에는 숫자 없음 */
.qk .band{position:relative; margin:30px 0 0; padding-top:40px}
.qk .zones{display:grid; grid-template-columns:repeat(3,1fr); font-size:12.5px; font-weight:700;
  color:var(--dim); text-align:center; margin-top:9px}
.qk .rail{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; height:12px}
.qk .rail i{border-radius:3px; background:#fff}
.qk .rail i:nth-child(2){background:var(--ac-l)}
.qk .pin{position:absolute; top:0; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; transition:left .6s cubic-bezier(.16,1,.3,1)}
.qk .pin span{font-size:12.5px; font-weight:800; color:#fff; background:var(--hot);
  padding:4px 10px; border-radius:999px; white-space:nowrap}
.qk .pin b{display:block; width:2px; height:22px; background:var(--hot); margin-top:0}
.qk .ends{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:10px;
  font-family:var(--mono); font-size:12.5px; color:var(--dim)}
.qk .ends em{font-style:normal; font-family:inherit}
.qk .say{flex:1; display:flex; align-items:center; margin:22px 0 18px; font-size:clamp(17px,2vw,21px);
  font-weight:800; letter-spacing:-.03em; color:var(--hot); transition:opacity .26s}
.qk.sw .say,.qk.sw .top b{opacity:.25}
.qk .top b{transition:opacity .26s}

/* 대화 기록 — 물은 것(원문 중문) · 답이 왔는지 */
.tk .log{padding:10px 0 12px; transition:opacity .26s}
.tk.sw .log,.tk.sw .top b{opacity:.25}
.tk .top b{transition:opacity .26s}
.tk .q{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px dashed rgba(0,0,0,.09)}
.tk .q:last-child{border-bottom:0}
.tk .tx{min-width:0}
.tk .tx b{display:block; font-size:15px; font-weight:750; color:var(--hot)}
.tk .tx .zh{display:block; margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tk .ans{flex:none; font-size:12.5px; font-weight:750; padding:5px 11px; border-radius:999px;
  background:#fff; white-space:nowrap}
.tk .ans.ok{color:var(--ac-d)}
.tk .ans.ok:before{content:"●"; margin-right:6px; font-size:8px; vertical-align:2px; color:var(--ac)}
.tk .ans.late{color:var(--sub)}
.tk .ans.none{color:#b4712f; background:#fbf1e7}

/* 맡기신 뒤 — 가운데 SHIFT, 다섯 일 */
.af .top{border-bottom-color:rgba(255,255,255,.13)}
.af .foot{border-top-color:rgba(255,255,255,.13)}
.af .dots i{background:rgba(255,255,255,.2)} .af .dots i.a{background:#9dc2f0}
.af .who3{display:flex; align-items:center; gap:10px; padding:20px 0 6px}
.af .who3 span{flex:none; font-size:13px; font-weight:700; color:var(--sub);
  padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.2)}
.af .who3 b{flex:none; font-size:13.5px; font-weight:800; letter-spacing:.02em; color:#1a2026;
  background:#fff; padding:7px 16px; border-radius:999px}
.af .who3 i{flex:1; height:1.5px; background:rgba(255,255,255,.25)}
.af .st{list-style:none; margin:0; padding:10px 0 12px; counter-reset:af}
.af .st li{counter-increment:af; display:grid; grid-template-columns:28px 104px 1fr; align-items:baseline;
  gap:0 10px; padding:8px 0; color:var(--dim); transition:color .3s}
.af .st li:before{content:counter(af); font-family:var(--mono); font-size:12px; font-weight:800;
  width:22px; height:22px; line-height:22px; text-align:center; border-radius:50%;
  background:rgba(255,255,255,.08); align-self:center}
.af .st li b{font-size:15.5px; font-weight:800; color:var(--sub); transition:color .3s}
.af .st li span{font-size:14px; transition:color .3s}
.af .st li.done b{color:#dfe4e8}
.af .st li.on b{color:#fff}
.af .st li.on span{color:#dfe4e8}
.af .st li.on:before{background:var(--ac); color:#fff}
@media(max-width:600px){
  .af .st li{grid-template-columns:28px 1fr; gap:2px 10px}
  .af .st li span{grid-column:2}
  .af .st li:before{grid-row:1 / span 2; align-self:start}
  .tk .tx .zh{white-space:normal}
}

/* 두 갈래 카드 */
.wide{display:grid; grid-template-columns:1fr; gap:34px; padding:70px 0 10px}
.wc{background:var(--w); border-radius:26px; padding:62px 58px;
  display:grid; grid-template-columns:minmax(0,17fr) minmax(0,22fr); gap:60px; align-items:start;
  box-shadow:0 2px 4px rgba(15,22,28,.08), 0 12px 24px rgba(15,22,28,.10),
             0 34px 64px rgba(15,22,28,.12)}
.wc .eb{font-size:13px; font-weight:800; letter-spacing:.08em; color:var(--dim);
  margin:0 0 18px}
.wc h3{font-size:clamp(26px,3.1vw,38px); margin:0; font-weight:800;
  letter-spacing:-.042em; line-height:1.28; color:var(--hot)}
.wl{position:sticky; top:0}
.wc .wr p{margin:0 0 18px; color:var(--sub); font-size:17.5px; max-width:46ch;
  line-height:1.85; letter-spacing:-.016em}
.wc .wr p:last-of-type{margin-bottom:0}
.wc .wr b{color:var(--hot); font-weight:700}
.wc.dark .wr b{color:#dde4ea}
.wc p:last-of-type{margin-bottom:0}
.wc .go{margin-top:30px; font-size:16.5px; padding:15px 30px}
.wc .fig{font-family:var(--mono); color:var(--ac-d); font-weight:700}

.wc.dark{background:#141b21; box-shadow:0 10px 40px rgba(10,16,22,.22)}
.wc.dark .eb{color:var(--ac-l)}
.wc.dark h3{color:#fff}
.wc.dark p{color:#a6b2bc}
.wc.dark .fig{color:#7fb3f5}
.wc.dark .go{background:#fff; color:var(--hot)}
.wc.dark .go:hover{background:#e3eefc}

/* 마무리 */
.end{text-align:center; padding:96px 0 132px}
.end h2{font-size:clamp(36px,7.2vw,84px); line-height:1.22; margin:0 auto;
  font-weight:800; letter-spacing:-.05em; max-width:16ch; color:var(--hot)}
.end h2 em{font-style:normal; color:var(--ac)}
.end p{margin:38px auto 0; color:var(--dim); font-size:clamp(16px,1.9vw,19px);
  max-width:46ch; line-height:1.85; letter-spacing:-.018em}
.end p b{color:var(--sub); font-weight:700}
/* 페이지의 본 CTA — 여기서 전환된다. 히어로 버튼보다 크게 간다. */
.end .go{margin-top:52px; font-size:19px; font-weight:750; letter-spacing:-.025em;
  color:#fff; background:var(--hot); padding:22px 46px; border-radius:999px;
  box-shadow:0 2px 4px rgba(15,22,28,.10), 0 14px 30px rgba(15,22,28,.20),
             0 34px 64px rgba(15,22,28,.16)}
.end .go:hover{background:#000; color:#fff; transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(15,22,28,.12), 0 20px 40px rgba(15,22,28,.26),
             0 44px 80px rgba(15,22,28,.20)}
@media (max-width:680px){
  .end .go{font-size:17px; padding:19px 36px; margin-top:42px}
}
footer{padding:40px 0 60px; text-align:center; font-size:12.5px; color:var(--dim); line-height:2}
footer b{color:var(--sub); font-weight:600}

@media(max-width:1500px){ :root{--lg:150px} }
@media(max-width:1100px){ :root{--lg:80px; --sg:120px} }
@media(max-width:900px){
  :root{--lg:24px; --sg:84px}
  .gal{padding:var(--sg) 0 0; margin-left:0}
  .grail{gap:28px; padding:22px 0 24px var(--lg)}
  .slide{width:min(420px,86vw)}
  .slide .card{padding:22px 20px 18px; border-radius:20px}
  .slide .scap{margin-top:22px; font-size:15.5px}
  .hero{padding:68px 0 40px}
  .w > .bridge:first-child{padding-top:58px}
  .bridge h2{white-space:normal}
  .bcards{grid-template-columns:1fr; gap:16px; margin-top:36px}
  .bcard{min-height:0; padding:34px 26px 30px}
  .bcard .ic svg{width:88px; height:88px}
  .end{padding:110px 0 88px}
  .viz{padding:30px 24px 24px; border-radius:20px}
  .qz,.nmz,.ev,.fz,.lz,.sp,.bz{padding:30px 24px 24px}
  .wc{padding:44px 26px; border-radius:20px; grid-template-columns:1fr; gap:26px}
  .wl{position:static}
  .wide{gap:22px; padding-top:50px}
  .wide{grid-template-columns:1fr}
  .end{padding:60px 0 48px}
  .txt h2,.txt p{max-width:none}
}
/* 모바일 히어로 — 2026-09-25(실사용 지시 "로고가 공백이 많고 너무 크게
   보여.. 반이상을 차지하고 있어. 로고를 없애거나 줄이고 kpi가 돋보이게").
   168px 기어 + 큰 SHIFT + 슬로건이 첫 화면을 다 먹어 KPI 가 접혀 있었다.
   기어는 머리 막대에도 있으니(.nmark) 여기서는 작게만 남기고, 아낀 자리를
   KPI 에 준다 — 숫자를 키우고 위로 끌어올린다. */
@media(max-width:620px){
  .hero{padding:26px 18px 34px}   /* .hero 가 .w 의 좌우 24px 을 덮는다 — 여기서 되살린다 */
  .hmark{width:64px; height:64px; margin:0 auto 10px}
  .hero h1{font-size:40px; letter-spacing:-.045em}
  .hslogan{margin-top:14px; font-size:20px; max-width:19ch; line-height:1.34}
  .hxnums{margin-top:26px; gap:8px}
  .hxn{padding:17px 5px 14px; border-radius:14px;
    box-shadow:0 1px 2px rgba(15,22,28,.05), 0 8px 18px rgba(15,22,28,.08)}
  .hxn b{font-size:25px; letter-spacing:-.05em}
  .hxn b i{font-size:.44em; margin-left:1px}
  .hxn span{margin-top:7px; font-size:12px; letter-spacing:-.04em}
  .hxasof{margin-top:15px; font-size:11.5px}
  .go{margin-top:24px}
}

@media(max-width:560px){
  .nav .cn{display:none}
  .nav b{font-size:14px}
  .hero p br,.end p br{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── 중문판(/zh/company) 전용 ────────────────────────────────────────
   2026-09-28. 한글판과 뼈대·색·여백을 같이 쓰되, 공급사에게만 필요한
   칸(지금 찾고 있는 설비 타일)이 여기서 붙는다. 클래스에 zh- 를 붙여
   한글판에 영향이 가지 않게 한다.

   타일은 설비·생산라인 목록의 카드 문법 그대로다 — 흰 면이 그림자로
   떠 있고, 사진이 카드를 채우고, 글자는 사진 아래에 온다
   (사장님 "검은색 안돼 .. 우린 설비 페이지와 생산라인페이지처럼"). */
.zh-tiles{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:38px}
.zh-tile{display:block;text-decoration:none;color:inherit}
.zh-shot{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;
  background:#fff;border:1px solid #e6e9ee;
  box-shadow:0 1px 2px rgba(16,20,24,.05), 0 12px 28px -14px rgba(16,20,24,.18)}
.zh-shot img{width:100%;height:100%;object-fit:cover;display:block}
.zh-badge{position:absolute;left:16px;top:16px;padding:7px 14px;border-radius:999px;
  font-size:13px;font-weight:800;background:var(--brand);color:#04211e}
.zh-tile.is-soon .zh-shot img{filter:grayscale(.85) brightness(1.06) opacity(.5)}
.zh-tile.is-soon .zh-badge{background:#fff;color:var(--dim);border:1px solid var(--g)}
.zh-info{padding:18px 4px 0}
.zh-info b{display:block;font-size:23px;font-weight:800;letter-spacing:-.01em}
.zh-info i{display:block;font-style:normal;margin-top:8px;font-size:15.5px;color:var(--sub);line-height:1.6}
@media (max-width:820px){.zh-tiles{grid-template-columns:1fr}}


/* ── 네 갈래 허브 — cn 「从这里开始」을 **그대로** 옮긴다(2026-10-01).
   영문 머리말 · 크림 바탕 · 색 있는 밑줄 링크 · 본문 속 파란 숫자까지 같다.
   한 번 우리말 머리말로 바꿨다가 되돌렸다 — 사장님 "디자인이 같아?".

   `.go` 를 쓰면 안 된다. 이 화면에 이미 있는 클래스라 검은 알약을 뒤집어쓴다.
   `.lnk` 로 따로 둔다. ──────────────────────────────────────────── */
.hub4{background:#faf7f0;margin:0 -9999px;padding:96px 9999px 100px}
.hub4-eb{margin:0 0 16px;font-size:12.5px;font-weight:800;letter-spacing:.16em;
  color:#14a89a;text-align:center}
.hub4-h{margin:0;font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-.045em;
  line-height:1.14;color:#101418;text-align:center}
.hub4-sub{margin:22px auto 0;max-width:62ch;font-size:clamp(15px,1.3vw,17px);
  font-weight:500;line-height:1.76;color:#5b6472;text-align:center;word-break:keep-all}
/* 간격·그림자는 cn 값 그대로 — --gut:40px, --sh-card / --sh-card-h */
.hub4-grid{max-width:1180px;margin:52px auto 0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:40px}
.h4{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;
  border-radius:22px;padding:36px 34px 32px;
  box-shadow:0 1px 2px rgba(16,20,24,.05), 0 12px 28px -14px rgba(16,20,24,.18);
  transition:transform .25s ease, box-shadow .25s ease}
.h4:hover{transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(16,20,24,.06), 0 22px 40px -16px rgba(16,20,24,.26)}
.h4.a{background:#ecedf3;color:#101418}
.h4.b{background:#131a24;color:#fff}
.h4.c{background:#e3f5ec;color:#101418}
.h4 .eb{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.16em;color:#9aa3ad}
.h4.b .eb{color:#8d99a6}
.h4 h3{margin:12px 0 0;font-size:clamp(24px,2.4vw,32px);font-weight:800;
  letter-spacing:-.04em;line-height:1.2}
.h4 .d{margin:14px 0 0;font-size:15.5px;font-weight:500;line-height:1.68;
  letter-spacing:-.012em;color:#5b6472;word-break:keep-all}
.h4.b .d{color:#aab4bf}
.h4 .d b{font-weight:700;color:#2563eb}      /* cn 은 본문 숫자를 파랗게 굵게 쓴다 */
.h4.b .d b{color:#fff}
.h4.c .d b{color:#0e8878}
/* 버튼이 아니라 **색 있는 밑줄 링크**다 — cn 과 같다 */
.h4 .lnk{margin-top:auto;padding-top:20px;font-size:15px;font-weight:700;
  letter-spacing:-.015em;color:#2563eb}
.h4 .lnk i{font-style:normal;display:inline-block;margin-left:4px;
  transition:transform .2s ease}
.h4:hover .lnk i{transform:translateX(3px)}
.h4.b .lnk{color:#fff}
.h4.c .lnk{color:#0e8878}
.h4 .lnk{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
@media(max-width:1100px){.hub4-grid{gap:32px}}
@media(max-width:860px){
  .hub4{padding:62px 9999px 68px}
  .hub4-grid{grid-template-columns:1fr;gap:24px;margin-top:38px}
  .h4{padding:30px 24px 26px;border-radius:18px}
}

/* ── 일하는 방식 흐름도(2026-10-01) — 다섯 칸 한 줄, ③과 ④ 사이 계약선.
   앞 셋 밝은 판(계약 없이) · 뒤 둘 짙은 판(계약 후 한 번). 칸에는 번호 · 이름 · 한 줄, 설명은 모달. ── */
.fl5sec{padding-top:150px}
.fl5{max-width:1180px;margin:52px auto 0;display:grid;grid-template-columns:3fr 2fr;gap:44px;position:relative}
.fl5c{display:grid;gap:16px}
.fl5g.free .fl5c{grid-template-columns:repeat(3,1fr)}
.fl5g.deal .fl5c{grid-template-columns:repeat(2,1fr)}
.fl5g.deal{position:relative}
.fl5g.deal::before{content:"";position:absolute;left:-22px;top:-10px;bottom:-6px;width:0;
  border-left:2px dashed rgba(15,22,28,.22)}
.fs{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  min-height:196px;padding:26px 24px 24px;border:0;border-radius:20px;cursor:pointer;font:inherit;
  background:#eef1f4;color:#101418;
  box-shadow:0 1px 2px rgba(16,20,24,.05),0 14px 30px -14px rgba(16,20,24,.2);
  transition:transform .22s ease,box-shadow .22s ease}
.fs:hover{transform:translateY(-5px);box-shadow:0 2px 4px rgba(16,20,24,.07),0 26px 46px -18px rgba(16,20,24,.3)}
.fs:focus-visible{outline:3px solid var(--ac);outline-offset:3px}
.fs .no{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  font-size:14px;font-weight:800;background:#fff;color:#1f6feb}
.fs b{display:block;margin-top:auto;padding-top:34px;font-size:clamp(20px,1.7vw,24px);font-weight:800;letter-spacing:-.035em}
.fs .ln{display:block;margin-top:8px;font-size:14.5px;line-height:1.6;color:#5f6b75;letter-spacing:-.012em}
.fl5g.deal .fs{background:#1a2026;color:#fff}
.fl5g.deal .fs .no{background:rgba(255,255,255,.12);color:#fff}
.fl5g.deal .fs .ln{color:#aab4bf}
.fl5b{margin:20px 0 0;padding-top:12px;border-top:2px solid #1f6feb;text-align:center;
  font-size:13.5px;font-weight:800;letter-spacing:.04em;color:#1f6feb}
.fl5g.deal .fl5b{border-top-color:#1a2026;color:#1a2026}
.mbody p b{color:var(--ink)}
@media(max-width:1000px){
  .fl5sec{padding-top:104px}
  .fl5{grid-template-columns:1fr;gap:34px;margin-top:38px}
  .fl5g.deal::before{display:none}
  .fl5g{display:flex;flex-direction:column}
  .fl5b{order:-1;margin:0 0 14px;padding:0;border:0;text-align:left}
  .fl5g.free .fl5c,.fl5g.deal .fl5c{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;margin:0 -24px;padding:4px 24px 18px;scrollbar-width:none}
  .fl5c::-webkit-scrollbar{display:none}
  .fs{flex:0 0 min(72vw,280px);min-height:170px;scroll-snap-align:start}
}

/* 흐름도 손질(2026-10-01 사장님 「타이틀 텍스트는 위계에 맞게 키워줘. 그리고 카드높이가 조금 틀린데」).
   ① 머리는 위 「여기서 시작하세요」(.hub4-h)와 같은 위계 — 꼬리표 가운데, 제목 크기 같게.
   ② 칸 높이를 하나로 묶는다. 한 줄 설명이 두 줄로 넘어간 칸(④)만 길어졌고, 제목을 바닥에 붙여 두어
      제목 자리까지 칸마다 달랐다. 높이를 고정하고 제목은 번호 아래 같은 자리에 둔다. */
.fl5sec .svhead .eb{text-align:center;max-width:none;margin:0 auto 16px;font-size:12.5px;font-weight:800;letter-spacing:.16em}
.fl5sec .svhead h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.045em;line-height:1.16}
.fl5sec .svhead p{margin-top:22px;max-width:62ch;font-size:clamp(15px,1.3vw,17px)}
.fs{height:auto;min-height:232px}  /* 입구(자세히 보기) 자리 — 높이를 고정하지 않는다(2026-10-03) */
.fs b{margin-top:0;padding-top:44px}
.fs .ln{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1000px){.fs{min-height:200px}.fs b{padding-top:32px}}
/* 계약선 띠에 존재감을(2026-10-01 「계약없이 계약후 텍스트가 존재감없어」) — 이 흐름도의 요점이 이 두 말이다.
   선을 굵게, 말은 칸 제목급으로, 아래 한 줄로 뜻을 붙인다. */
.fl5b{margin-top:22px;padding-top:16px;border-top-width:4px;font-size:clamp(20px,1.7vw,24px);
  font-weight:800;letter-spacing:-.03em;line-height:1.2}
.fl5b span{display:block;margin-top:6px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:#5f6b75}
@media(max-width:1000px){.fl5b{font-size:19px;padding:0;border:0}.fl5b span{font-size:13.5px}}
/* 번호 동그라미 → 선 아이콘(2026-10-01 「숫자도 이모콘으로 변경」). 글이 주인이라 아이콘은 작게 · 외곽선 상자 없이. */
.fs .no.ic{width:auto;height:auto;border-radius:0;background:none;color:#1f6feb}
.fs .no.ic svg{width:30px;height:30px;display:block}
.fl5g.deal .fs .no.ic{background:none;color:#fff}

/* ── 휴대폰 가로 넘김(2026-10-01 사장님 「한국 회사소개도 가로스크롤 바꿀것들 바꿔줘. 중국이 잘되있어」).
   세로로 쌓이던 이유 카드 셋 · 「여기서 시작하세요」 넷을 cn 처럼 옆으로 넘긴다(줄은 화면 끝에서 끝까지, 첫 칸은 글 선).
   흐름도 다섯 칸은 줄이 화면보다 넓게 늘어나(886px) 넘김이 안 됐다 — 칸을 화면 폭 안에 묶는다. ── */
@media(max-width:760px){
  .bcards,.hub4-grid{display:flex !important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:-24px;margin-right:-24px;padding:6px 24px 22px;scrollbar-width:none}
  .bcards::-webkit-scrollbar,.hub4-grid::-webkit-scrollbar{display:none}
  .bcards>.bcard{flex:0 0 76vw;scroll-snap-align:start}
  .hub4-grid>.h4{flex:0 0 80vw;scroll-snap-align:start}
}
@media(max-width:1000px){
  .fl5{grid-template-columns:minmax(0,1fr)}
  .fl5g{min-width:0}
}
html,body{overflow-x:clip}
/* 왼쪽에 붙던 것(2026-10-01 「설비를 들일때…들어오시면 이렇게 갑니다. 두개섹션은 왼쪽으로 너무 붙어있어」).
   ① 넘김 줄이 칸을 화면 끝(0)에 스냅시켰다 — scroll-padding 으로 첫 칸을 글 선(24px)에 세운다.
   ② 흐름도 섹션은 .svsec{padding:150px 0 0} 가 .w 의 좌우 24px 를 지워 제목까지 붙어 있었다. */
@media(max-width:1000px){
  .w.fl5sec{padding-left:24px;padding-right:24px}
  .fl5g.free .fl5c,.fl5g.deal .fl5c{scroll-padding-inline:24px}
}
@media(max-width:760px){
  .bcards,.hub4-grid{scroll-padding-inline:24px}
}

/* ── 2026-10-02 「무엇을 놓을까」 밑 생산라인 줄 · 우리가 내는 곳 카드(cn 첫 화면 ①의 한국판) ──
   라인 줄은 위 넘김 줄(.grail)과 같은 레일. 카드 = 사진 자리 + 카드 밖 글(태그 · 이름 · 공정 수). */
.lnhead{display:flex;align-items:baseline;gap:8px;margin-top:34px}
.lnhead b{font-family:var(--mono);font-size:34px;font-weight:800;letter-spacing:-.04em;color:#1558c0;line-height:1}
.lnhead i{font-style:normal;font-size:15px;font-weight:700;color:#4b5563}
.grail.lnrow{gap:26px;padding-top:16px;padding-bottom:30px}
.lnc{flex:0 0 280px;scroll-snap-align:start}
.lnc .ph{aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#dfe4ea;
  box-shadow:0 1px 2px rgba(15,22,28,.06),0 10px 24px -10px rgba(15,22,28,.22)}
.lnc .ph img{width:100%;height:100%;object-fit:cover;display:block}
.lnc .bd{padding:18px 4px 0}
.lnc .tg{display:inline-block;font-size:11.5px;font-weight:700;color:#4b5563;background:#eef1f4;padding:3px 10px;border-radius:99px}
.lnc b{display:block;margin-top:9px;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.4}
.lnc i{display:block;margin-top:5px;font-style:normal;font-size:13px;color:#8c979f}
@media(max-width:760px){.lnc{flex-basis:72vw}.lnhead{margin-top:26px}}

#r6{--ac-bg:#fff}
.mcz .top{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:13px;border-bottom:1px solid rgba(0,0,0,.07)}
.mcz .top b{font-size:15px;font-weight:750}
.mcz .top em{font-style:normal;font-size:12.5px;color:var(--dim)}
.mcz .foot{display:flex;justify-content:flex-end;margin-top:14px}
.mcz .dots{display:flex;gap:6px}
.mcz .dots i{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.12);cursor:pointer}
.mcz .dots i.a{background:#1f6feb;width:18px;border-radius:3px}
.mc{display:flex;flex-direction:column;margin-top:14px;transition:opacity .25s ease}
.mc .vis{height:230px;border-radius:14px;overflow:hidden;position:relative;background:#f6f7f9;box-shadow:0 1px 3px rgba(15,22,28,.08)}
.mc .vis img{width:100%;height:100%;object-fit:cover;display:block}
.mc .cap{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.mc .cap b{font-family:var(--mono);font-size:34px;font-weight:800;letter-spacing:-.04em;color:#1558c0;line-height:1}
.mc .cap span{font-size:16px;font-weight:800}
.mc p{margin:6px 0 0;font-size:13.5px;color:#6b7280;line-height:1.6}
.mc .ln{height:7px;border-radius:4px;background:#e3e7eb;margin-top:7px}
.mc .ln.h{height:10px;width:70%;background:#c9d0d7}
.mc .ln.s{width:55%}
.v-web .bar{height:22px;background:#f1f3f5;display:flex;align-items:center;gap:5px;padding:0 10px}
.v-web .bar i{width:7px;height:7px;border-radius:50%;background:#d0d5da}
.v-web .bar u{margin-left:8px;flex:1;height:10px;border-radius:5px;background:#e3e7eb;text-decoration:none;font-size:8px;color:#8c979f;line-height:10px;padding-left:6px}
.v-web .bd{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;padding:12px;height:calc(100% - 22px);box-sizing:border-box}
.v-web .bd img{border-radius:8px}
.v-doc{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;box-sizing:border-box}
.v-doc .pg{background:#fff;border:1px solid #eef0f2;border-radius:10px;padding:10px;overflow:hidden}
.v-doc .pg img{height:62px;border-radius:6px;margin-bottom:9px}
.v-vid img{filter:brightness(.72)}
.v-vid .pl{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.v-vid .pl:after{content:"";border-left:20px solid #1558c0;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.v-vid .pr{position:absolute;left:14px;right:14px;bottom:14px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.v-vid .pr:before{content:"";display:block;width:38%;height:100%;border-radius:2px;background:#fff}
.v-blog{display:grid;place-items:center;background:linear-gradient(135deg,#e9f5ee,#f4f8f5) !important}
.v-blog .ph{width:150px;height:206px;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(15,22,28,.14);overflow:hidden;border:5px solid #1f2933}
.v-blog .top{height:26px;background:#03c75a;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;padding-left:9px}
.v-blog .ph img{height:76px}
.v-blog .ph .in{padding:8px}
@media(max-width:760px){.mc .vis{height:200px}}
.lnhead{margin-left:calc(var(--lg) - (50vw - 50%))}
@media(max-width:760px){.lnhead{margin-left:0}}