@charset "utf-8";
/* ============================================================
   SANGGODAE theme for EMENC  —  sanggodae.co.kr 디자인 이식
   원본 토큰: brand #00589d / sub #3085c8 / ink #181818
   서체: Play(영문 디스플레이) + Noto Sans KR(국문) + Montserrat
   ============================================================ */

:root{
  --sgd-brand:#00589d;
  --sgd-brand-d:#004077;
  --sgd-sub:#3085c8;
  --sgd-ink:#181818;
  --sgd-ink2:#222;
  --sgd-txt:#333;
  --sgd-muted:#666;
  --sgd-line:#ddd;
  --sgd-line2:#eee;
  --sgd-bg:#fff;
  --sgd-bg2:#f7f8fa;
  --sgd-head-h:90px;
  --sgd-top-h:36px;
  --sgd-max:1400px;
  /* 원본 전역 스택 그대로: Play(영문) + Noto Sans KR(국문) */
  --sgd-ko:'Noto Sans KR';
  --sgd-font:Play,var(--sgd-ko),sans-serif;
  --sgd-disp:Play,var(--sgd-ko),sans-serif;
  --sgd-h3:Play;              /* 원본 .h3-main 은 Play 단독(국문은 시스템 고딕) */
  --sgd-input:var(--sgd-ko),sans-serif;   /* 원본 input 은 Noto Sans KR 단독 */
}
/* 일본어 — 현지 웹 표준 고딕 스택 (var() 는 정의된 곳에서 치환되므로 전부 재정의) */
body.sgd.lang-jp{
  --sgd-ko:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic Medium','Yu Gothic',Meiryo;
  --sgd-font:Play,'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic Medium','Yu Gothic',Meiryo,sans-serif;
  --sgd-disp:Play,'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic Medium','Yu Gothic',Meiryo,sans-serif;
  --sgd-h3:Play,'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  --sgd-input:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
}
/* 중국어(간체) — 현지 웹 표준 흑체 스택 */
body.sgd.lang-cn{
  --sgd-ko:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei';
  --sgd-font:Play,'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --sgd-disp:Play,'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --sgd-h3:Play,'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --sgd-input:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}

/* ---------- base ---------- */
/* main.css 의 body.lang-* (특이도 0,1,1) 를 덮어야 하므로 body.sgd 로 지정 */
body.sgd{font-family:var(--sgd-font);color:var(--sgd-txt);background:var(--sgd-bg);-webkit-font-smoothing:antialiased}
body.sgd input,body.sgd select,body.sgd textarea,body.sgd button{font-family:var(--sgd-font)}
/* main.css 의 a:hover{text-decoration:underline} 를 덮는다 (동일 특이도 + 후순위) */
a{color:inherit;text-decoration:none}
a:hover,a:focus,a:active{text-decoration:none}
.sgd a,.sgd a:hover,.sgd a:focus{text-decoration:none}
.sgd-wrap{max-width:var(--sgd-max);margin:0 auto;padding:0 30px}

/* ---------- top utility bar ---------- */
.sgd-top{height:var(--sgd-top-h);background:var(--sgd-ink);color:#cfd6de;font-size:12px}
.sgd-top .sgd-wrap{display:flex;align-items:center;justify-content:flex-end;gap:18px;height:100%}
.sgd-top a{color:#cfd6de;letter-spacing:.02em}
.sgd-top a:hover{color:#fff}
.sgd-top .sgd-tel{font-family:var(--sgd-disp);font-weight:700;color:#fff;letter-spacing:.04em}

/* ---------- header ---------- */
.sgd-header{position:sticky;top:0;z-index:900;background:#fff;border-bottom:1px solid var(--sgd-line)}
/* 원본 #header: h90 / 로고영역 x80 w197 / gnb 277~1445 / head_info w155 (우측 끝) */
.sgd-header .sgd-wrap{display:flex;align-items:center;height:var(--sgd-head-h);gap:0;max-width:100%;padding:0 0 0 80px}
/* 원본 .top_logo a : 197×90 영역에 background-size:auto 60px / position 50% 50%
   → 로고 이미지 높이 60px, 영역 안에서 가운데 정렬 */
.sgd-logo{flex:0 0 197px;display:flex;align-items:center;justify-content:center;height:100%}
.sgd-logo img{height:60px;width:auto;display:block}
/* 기본(서브페이지)은 다크 로고만. 흰 로고는 홈 비주얼 위에서만 쓴다.
   이 규칙이 없으면 서브페이지에서 두 장이 겹쳐 보인다. */
.sgd-logo .lg-white{display:none}
.sgd-logo .sgd-logo-txt{font-family:var(--sgd-disp);font-weight:700;font-size:26px;color:var(--sgd-brand);letter-spacing:.06em}

/* ---------- GNB ---------- */
/* 원본 gnb — #cont_area{width:840px;margin:0 auto} 안에 1차메뉴 6개 균등분할(=140px)
   글자 19px/500/-0.25px/line-height 90px. 폭·글자 크기는 아래 미디어쿼리에서 단계별로 줄어든다. */
.sgd-gnb{flex:1 1 auto;display:flex;justify-content:center;align-items:center;height:100%}
.sgd-gnb>ul{display:flex;gap:0;width:1050px;max-width:100%;height:100%;margin:0 auto;padding:0;list-style:none}   /* 원본은 6칸 840px. 글로벌 파트너십이 대메뉴로 추가돼 7칸이 되면서 980px 로 넓혔다(칸당 150px) */
.sgd-gnb>ul>li{position:relative;height:100%;flex:1 1 0;min-width:0;display:flex;align-items:center}
.sgd-gnb>ul>li>a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:19px;font-weight:500;color:#333;letter-spacing:-.25px;white-space:nowrap;position:relative;text-decoration:none}
/* 원본 a.tit::after : 3px #3889ca, bottom:-3px, width 0 → hover 시 100% */
.sgd-gnb>ul>li>a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:#3889ca;transition:width .3s}
.sgd-gnb>ul>li:hover>a::after,.sgd-gnb>ul>li.is-on>a::after{width:100%}
.sgd-mlang{display:none}   /* 모바일 전용 언어 선택 */
.sgd-gnb a,.sgd-sub a,.sgd-top a,.sgd-f-links a,.sgd-logo{text-decoration:none}
.sgd-gnb a:hover,.sgd-sub a:hover,.sgd-top a:hover,.sgd-f-links a:hover{text-decoration:none}

/* ── 메가메뉴 ─────────────────────────────────────────
   원본: 한 메뉴에 올려도 6개 컬럼이 동시에 열린다.
   각 .gnb_2 = 1차메뉴와 같은 x, width 185, border-left 1px #e2e2e2
   (마지막 컬럼만 border-right 도) / 항목 184×35, 14px 400 #333 가운데
   헤더 아래 전체폭 흰 패널 + 호버 메뉴에 파란 밑줄            */
.sgd-header{--mega-h:0px}
/* 원본 #header.drop2 : 열리면 흰 배경 + 아래 1px #e6e6e6
   → 대메뉴와 하위메뉴를 나누는 가로선 */
.sgd-header.is-mega{border-bottom:1px solid #e6e6e6}
/* 원본 #gnb2_back : fixed top:90px / width:100% / 흰배경 / border-bottom 1px #e2e2e2
   / opacity 0→1 / transition .25s ease-in-out  → 드롭다운 패널과 그 아래 가로선 */
.sgd-header::after{content:"";position:absolute;left:0;right:0;top:calc(100% + 1px);height:var(--mega-h);
  background:#fff;border-bottom:1px solid #e2e2e2;opacity:0;
  transition:height .25s ease-in-out,opacity .25s ease-in-out;z-index:1;pointer-events:none}
.sgd-header.is-mega::after{opacity:1}
/* 원본 .gnb_2 : width:100%(=1차메뉴 폭), top:91px, border-left 1px #e2e2e2 */
.sgd-sub{position:absolute;top:calc(100% + 1px);left:0;width:100%;min-width:0;height:0;overflow:hidden;
  background:transparent;border-left:1px solid #e2e2e2;padding:0;margin:0;list-style:none;
  transition:height .25s ease-in-out;z-index:2}
.sgd-gnb>ul>li:last-child .sgd-sub{border-right:1px solid #e2e2e2}
.sgd-header.is-mega .sgd-sub{height:var(--mega-h)}
/* 원본 .gnb_2_area a : 16px / line-height 30px (≤1620 에서 14px / 35px) */
.sgd-sub li a{display:block;height:30px;line-height:30px;padding:0;font-size:16px;font-weight:400;color:#000;
  letter-spacing:-.25px;text-align:center;white-space:normal;overflow:visible;text-overflow:clip}
.sgd-sub li a:hover{color:#3889ca}

/* ---------- header right ---------- */
/* 원본 .head_info : padding-right:80px (≤1280 은 0) */
.sgd-hd-right{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding-right:80px}
.sgd-lang{position:relative}
.sgd-lang-btn{display:flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 18px;
  border:1px solid var(--sgd-line);border-radius:999px;
  background:#fff;color:var(--sgd-ink);font-family:var(--sgd-disp);font-size:13px;font-weight:700;letter-spacing:.08em;cursor:pointer;
  transition:.25s}
.sgd-lang-btn:hover{border-color:var(--sgd-brand);color:var(--sgd-brand)}
.sgd-lang>ul{position:absolute;top:calc(100% + 8px);right:0;min-width:140px;background:#fff;border:1px solid var(--sgd-line);
  border-radius:18px;overflow:hidden;
  margin:0;padding:6px 0;list-style:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s;
  box-shadow:0 12px 28px rgba(0,0,0,.09);z-index:20}
.sgd-lang:hover>ul,.sgd-lang.is-open>ul{opacity:1;visibility:visible;transform:translateY(0)}
.sgd-lang>ul a{display:block;padding:8px 16px;font-size:13px;color:var(--sgd-muted)}
.sgd-lang>ul a:hover,.sgd-lang>ul a.is-active{color:var(--sgd-brand);background:var(--sgd-bg2);font-weight:500}

.sgd-btn-quote{display:inline-flex;align-items:center;height:36px;padding:0 18px;background:var(--sgd-brand);color:#fff;
  font-size:13px;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.sgd-btn-quote:hover{background:var(--sgd-brand-d)}

/* ---------- mobile toggle ---------- */
.sgd-burger{display:none;width:38px;height:38px;border:0;background:none;cursor:pointer;padding:0;position:relative}
.sgd-burger span{position:absolute;left:8px;right:8px;height:2px;background:var(--sgd-ink);transition:.25s}
.sgd-burger span:nth-child(1){top:12px}
.sgd-burger span:nth-child(2){top:18px}
.sgd-burger span:nth-child(3){top:24px}
.sgd-burger.is-on span:nth-child(1){top:18px;transform:rotate(45deg)}
.sgd-burger.is-on span:nth-child(2){opacity:0}
.sgd-burger.is-on span:nth-child(3){top:18px;transform:rotate(-45deg)}

/* ---------- sub page head ---------- */
.sgd-phead{position:relative;height:260px;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--sgd-brand) center/cover no-repeat;color:#fff}
.sgd-phead::after{content:"";position:absolute;inset:0;background:rgba(0,32,62,.45)}
.sgd-phead>*{position:relative;z-index:1}
.sgd-phead h1{font-size:40px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.sgd-phead p{font-family:var(--sgd-disp);font-size:14px;letter-spacing:.22em;text-transform:uppercase;opacity:.85;margin:0}

/* ---------- footer ---------- */
.sgd-footer{background:var(--sgd-ink);color:#9aa3ad;font-size:13px;line-height:1.9;padding:46px 0 54px;margin-top:0}
.sgd-footer .sgd-wrap{display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start}
.sgd-f-logo{flex:0 0 auto}
.sgd-f-logo img{height:90px;width:auto;opacity:.9}   /* 원본 footer .logo img = 197x90 원본 크기 */
.sgd-f-body{flex:1 1 420px;min-width:280px}
.sgd-f-links{display:flex;gap:16px;margin:0 0 14px;padding:0;list-style:none;font-size:13px}
.sgd-f-links a{color:#c8cfd7}
.sgd-f-links a:hover{color:#fff}
.sgd-f-info{margin:0}
.sgd-f-info span{display:inline-block;margin-right:14px;white-space:nowrap}
.sgd-copy{margin:16px 0 0;font-family:var(--sgd-disp);font-size:12px;letter-spacing:.04em;color:#6d7783}

/* ---------- 반응형 ---------- */
/* ── 헤더 반응형 : 원본 단계 그대로 ──────────────────────
   ≥1621  : #cont_area 840px / 1차 19px / 2차 16px·lh30
   ≤1620  : #cont_area 95%   / 1차 15px / 2차 14px·lh35
   ≤1520  : 1차 13.5px
   ≤1280  : head_info padding-right 0
   ≤1024  : 1차 13px (모바일 메뉴로 전환)                    */
@media (min-width:1025px) and (max-width:1620px){
  .sgd-gnb>ul{width:95%}
  .sgd-gnb>ul>li>a{font-size:15px}
  .sgd-sub li a{height:35px;line-height:35px;font-size:14px;word-break:keep-all}
}
@media (min-width:1025px) and (max-width:1520px){
  .sgd-gnb>ul>li>a{font-size:13.5px}
}
@media (max-width:1280px){
  .sgd-hd-right{padding-right:0}
}
@media (max-width:1200px){
  :root{--sgd-head-h:76px}
  .sgd-logo{flex:0 0 160px}
  .sgd-logo img{height:48px}
  .sgd-header .sgd-wrap{padding-left:30px}
}
/* ── 모바일 : 원본 375 실측 그대로 ───────────────────────
   헤더 90px 투명 / 로고 x20 197×90 / 햄버거 x295 80×90 #00589d
   .gnb 는 숨기고 슬라이드 메뉴 / .sgd-top 숨김                 */
@media (max-width:1024px){
  :root{--sgd-head-h:90px}
  /* 어느 언어에서든 가로 넘침이 헤더를 밀어내지 않도록 (영문 라벨이 길 때 햄버거가 화면 밖으로 나갔음) */
  html,body.sgd{overflow-x:hidden;max-width:100%}
  .sgd-top{display:none}
  .sgd-wrap{padding:0 20px}
  .sgd-header{background:transparent;border-bottom:0}
  .sgd-header .sgd-wrap{max-width:100%;padding:0}
  .sgd-logo{flex:0 0 197px;margin-left:20px;justify-content:flex-start}
  .sgd-logo img{width:197px;height:auto;max-height:90px}
  .sgd-hd-right{margin-left:auto;padding:0;gap:0}
  .sgd-btn-quote{display:none}
  /* 원본처럼 헤더에는 언어 버튼을 두지 않고, 슬라이드 메뉴 맨 아래로 옮긴다 */
  .sgd-lang{display:none}
  /* 원본 .menu_area : x295 / 80×90 / 배경 #00589d */
  .sgd-burger{display:block;width:80px;height:var(--sgd-head-h);background:#00589d;border-radius:0}
  .sgd-burger span{left:26px;right:26px;height:2px;background:#fff}
  .sgd-burger span:nth-child(1){top:calc(50% - 8px)}
  .sgd-burger span:nth-child(2){top:50%}
  .sgd-burger span:nth-child(3){top:calc(50% + 8px)}
  .sgd-burger.is-on span:nth-child(1),.sgd-burger.is-on span:nth-child(3){top:50%}
  /* 원본: 메뉴가 열리면 X 아이콘이 흰 원형 테두리 안에 들어간다 */
  .sgd-burger.is-on::before{content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;
    margin:-21px 0 0 -21px;border:1.5px solid #fff;border-radius:50%}
  .sgd-burger.is-on span{left:32px;right:32px}   /* X 획을 원 안에 맞게 짧게 */
  /* 원본 .mobile_gnb .gnb_areas : height 0 → 콘텐츠 높이로 "펼쳐진다"(위에서 미끄러져 내려오지 않음).
     헤더(로고) 바로 아래에서 아래 방향으로 열리도록 height 전환을 쓴다. 높이는 JS 가 지정. */
  .sgd-gnb{position:fixed;left:0;right:0;top:var(--sgd-head-h);bottom:auto;
    height:0;max-height:calc(100vh - var(--sgd-head-h));background:#fff;
    display:block;padding:0;overflow:hidden;transition:height .3s ease;z-index:899}
  .sgd-gnb.is-open{overflow-y:auto}
  .sgd-gnb>ul{display:block;width:auto;height:auto;margin:0;padding:0}
  .sgd-gnb>ul>li{display:block;width:auto;height:auto;border:0}
  /* 원본 .mg_title : 14px bold / 배경 #f7f7f7 / padding 16px 35px */
  .sgd-gnb>ul>li>a,
  body.sgd-home .sgd-header .sgd-gnb>ul>li>a,
  body.sgd-home .sgd-header.is-mega .sgd-gnb>ul>li>a{display:block;padding:16px 35px;font-size:14px;font-weight:700;
    letter-spacing:-.2px;color:var(--sgd-ink);background:#f7f7f7}
  .sgd-gnb>ul>li>a::after{display:none}
  .sgd-header::after{display:none}
  /* 원본 .mg_2 : 기본 display:none (아코디언) / padding 16px 35px / 항목 13px, margin 14px 0 */
  .sgd-sub,.sgd-header.is-mega .sgd-sub{position:static;display:none;width:auto;height:auto;overflow:visible;
    border:0;box-shadow:none;padding:16px 35px;background:transparent}
  .sgd-gnb>ul>li.is-open>.sgd-sub{display:block}
  .sgd-sub li{margin:14px 0}
  .sgd-sub li a{height:auto;line-height:1.5;padding:0;font-size:13px;text-align:left;color:var(--sgd-ink)}
  /* 언어 선택 — 메뉴 맨 아래 우측, 약어(KR/EN/JP/CN) 알약 버튼
     (PC 헤더 언어 버튼과 같은 알약 스타일로 통일) */
  .sgd-mlang{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:25px 35px}
  .sgd-mlang a{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:32px;padding:0 14px;
    border:1px solid var(--sgd-line);border-radius:999px;background:#fff;
    font-family:var(--sgd-disp);font-size:13px;font-weight:700;letter-spacing:.08em;color:#666;transition:.25s}
  .sgd-mlang a.is-active{background:#3085c8;border-color:#3085c8;color:#fff}
  .sgd-phead{height:190px}
  .sgd-phead h1{font-size:28px}
  .sgd-footer .sgd-wrap{gap:20px}
  .sgd-f-logo img{height:30px}          /* 원본은 1024 이하에서 66x30 */
}
@media (max-width:640px){
  .sgd-f-info span{display:block;margin:0}
}
/* ============================================================
   SANGGODAE 메인 — 원본 sanggodae.co.kr 실측값 이식 (1600×900 기준)
   S1 비주얼 / S2 PRODUCT / S3 snow flakes / S4 간편 상담문의 / S5 VOD
   ※ 모든 수치는 원본 DOM 실측. 임의 각색 금지.
   ============================================================ */

/* ---------- 공통: 풀스크린 섹션 ---------- */
/* 원본 .main-inner = max-width:1300px + padding-left:20px (본문 x=170, 1600 기준) */
.sgd-sec{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.sgd-sec .sgd-wrap{position:relative;z-index:3;width:100%;max-width:1300px;padding:0 20px}

/* 원본 h2.h2-main / h3.h3-main — 모든 섹션 공통 제목 */
.sgd-sec .phead{margin-bottom:60px}          /* 원본 h3-main{margin-bottom:60px} */
.sgd-sec .phead .en{display:inline-block;position:relative;font-family:var(--sgd-disp);
  font-size:35px;font-weight:900;color:#f00;line-height:normal}
.sgd-sec .phead h2{font-family:var(--sgd-h3);font-size:62px;font-weight:700;color:#000;
  line-height:normal;margin:0}

/* ---------- S1 비주얼 ---------- */
.sgd-v{background:#0d1622}
.sgd-v .bgs{position:absolute;inset:0;z-index:0}
.sgd-v .bg{position:absolute;inset:0;background-image:var(--bgd);
  background-position:50% 50%;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.2s ease}
.sgd-v .bg.is-on{opacity:1}
/* 원본: h2(70px/500/lh98) > span(30px/700/lh42) + br + img(450×270) */
.sgd-v .vtxt h2{font-family:var(--sgd-disp);font-size:70px;font-weight:500;line-height:98px;color:#fff;margin:0}
.sgd-v .vtxt h2 span{font-family:var(--sgd-disp);font-size:30px;font-weight:700;line-height:42px}
.sgd-v .vmark{display:inline-block;width:450px;height:270px;vertical-align:top}

/* 좌하단 페이지네이션 — 원본 .page-box{position:absolute;left:170px;bottom:240px;width:470px;display:flex;align-items:center} */
.sgd-pagewrap{position:absolute;left:0;right:0;bottom:240px;z-index:4}
.sgd-pagebox{display:flex;align-items:center;width:470px;max-width:100%}
.sgd-bullets{display:flex;align-items:center}
/* 원본 bullet: 78×4 흰색, margin-right:10px, ::before 로 #59b6ff 진행 채움 */
.sgd-bullets button{position:relative;width:78px;height:4px;margin:0 10px 0 0;padding:0;border:0;border-radius:0;
  background:#fff;cursor:pointer;overflow:hidden;font-size:0}
.sgd-bullets button i{position:absolute;left:0;top:0;height:100%;width:0;background:#59b6ff}
.sgd-bullets button.is-done i{width:100%}
/* 원본 .btn-play 30×30, 배경/테두리 없음 */
.sgd-play{width:30px;height:30px;padding:0;border:0;background:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sgd-play svg{width:26px;height:26px;display:block;fill:none;stroke:#fff;stroke-width:1.4}
.sgd-play .ic-pause{display:block}
.sgd-play .ic-play{display:none}
.sgd-play.is-paused .ic-pause{display:none}
.sgd-play.is-paused .ic-play{display:block}

/* ---------- 좌측 세로 섹션 네비 (원본 fullpage .fp-left) ----------
   원본: position:fixed; left:77px; 도트 7×7 원형 간격12
         활성 #78c4ff / 비활성 rgba(255,255,255,.7)
         ::before content:"Scroll" 18px #ccc, 도트 위 50px, rotate(90deg) */
.sgd-snav{position:fixed;left:77px;top:auto;bottom:75px;z-index:60;transition:opacity .3s}
.sgd-snav::before{content:"Scroll";position:absolute;left:-5px;top:-50px;width:44px;height:21px;
  font-family:var(--sgd-disp);font-size:18px;color:#ccc;line-height:21px;transform:rotate(90deg);transform-origin:0 0;
  white-space:nowrap;pointer-events:none}
.sgd-snav ul{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.sgd-snav button{display:block;width:7px;height:7px;padding:0;border:0;border-radius:100%;
  background:rgba(255,255,255,.7);cursor:pointer;font-size:0;transition:background .25s}
.sgd-snav button.is-on{background:#78c4ff}
.sgd-snav.on-light button{background:rgba(0,0,0,.25)}
.sgd-snav.on-light button.is-on{background:#78c4ff}
.sgd-snav.on-light::before{color:#bbb}

/* ---------- S2 PRODUCT ---------- */
.sgd-prod{background:#fff}
/* 원본 PRODUCT 의 h2 strong 은 700 (문의·VOD 는 900) + 빨간 * */
.sgd-prod .phead .en{font-weight:700}
.sgd-prod .phead .en::before{content:"*";position:absolute;top:-10px;right:-20px;font-size:27px;color:#f00;line-height:1}
/* 인증마크(NSF·FCC·CE·KC)는 제품 이미지 안에 포함돼 있어 별도 요소를 두지 않는다 */
.sgd-prod .pbody{display:flex;gap:0;align-items:center}
/* 좌측 모델 탭 — 원본: 250×48 알약, 호버 시 #3085c8 채움 */
/* 원본 .menu ul{margin-left:-20px} → 탭 박스는 본문보다 20px 왼쪽(=탭 텍스트가 제목과 정렬) */
.sgd-ptabs{flex:0 0 40%;margin:0 0 0 -20px;padding:0;list-style:none;position:relative;z-index:100;
  display:flex;flex-direction:column;gap:10px}
.sgd-ptabs li{margin:0}
.sgd-ptabs button{display:inline-block;width:250px;max-width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  padding:0 20px;height:48px;line-height:48px;border-radius:50px;
  font-family:var(--sgd-font);font-size:20px;font-weight:400;letter-spacing:-.01em;color:#a4a4a4;
  transition:.5s;white-space:nowrap}
.sgd-ptabs button.is-on{color:#181818;font-weight:500}
.sgd-ptabs button:hover,.sgd-ptabs button.is-on:hover{color:#fff;background:#3085c8}

/* 우측 제품컷 — 원본 .product-slider = inset:0 + width:90% (실질 left:0), flex 세로중앙/우측정렬 */
.sgd-pstage{position:absolute;left:0;top:0;bottom:0;width:90%;display:flex;align-items:center;justify-content:flex-end;
  pointer-events:none}
/* 원본 .item 은 고정폭이 아니라 슬라이더의 55% (1440→792 / 1728→950), 높이 670 고정.
   이미지 자체는 772×670 고정이라 item 좌측에 붙는다. */
.sgd-pitem{position:relative;width:55%;max-width:100%;height:670px}
.sgd-pitem img{position:absolute;left:0;top:0;width:772px;max-width:100%;height:100%;object-fit:contain;object-position:left center;
  opacity:0;transition:opacity .5s ease}
.sgd-pitem img.is-on{opacity:1}
.sgd-pmore{position:absolute;right:90px;bottom:30px;z-index:200;width:130px;height:130px;border-radius:100%;
  background:#3085c8;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--sgd-disp);font-size:18px;font-weight:400;letter-spacing:.06em;line-height:1.25;text-align:center;
  transition:.3s;pointer-events:auto;box-shadow:33px 33px 46px 0 rgba(48,133,200,.3)}
.sgd-pmore:hover{background:#0969b5;box-shadow:31px 31px 49px rgba(48,133,200,.5)}
.sgd-pmore .ar{display:block;width:25px;height:10px;margin:0 auto 10px;
  background:url(/assets/img/main/ico_btn1.png) no-repeat 50%/contain;font-size:0}

/* ---------- S3 snow flakes ---------- */
/* 원본 .section3{padding-top:90px}, 안쪽 콘텐츠는 세로 중앙 */
.sgd-flake{color:#fff;padding-top:90px}
.sgd-flake .bg{position:absolute;inset:0;z-index:0;background-position:50% 50%;background-size:cover}
.sgd-flake h3{font-family:var(--sgd-h3);font-size:45px;font-weight:700;line-height:58.5px;margin:0 0 40px}
.sgd-flake .t2{font-size:25px;font-weight:400;line-height:37.5px;margin:0 0 120px;max-width:none;word-break:keep-all}
/* 원본 .btns a : 240×60 / border 2px #fff / radius 60 / 18px 400 / lh54 / ::after 25×10 ml10 */
.sgd-more{display:inline-block;width:240px;height:60px;padding:0;text-align:center;line-height:54px;
  border:2px solid #fff;border-radius:60px;background:transparent;color:#fff;
  font-family:var(--sgd-disp);font-size:18px;font-weight:400;transition:.3s}
.sgd-more::after{content:"";display:inline-block;width:25px;height:10px;margin-left:10px;vertical-align:middle;
  background:url(/assets/img/main/ico_btn1.png) no-repeat 50%/contain}
.sgd-more:hover{background:#fff;color:#111}
.sgd-more:hover::after{background-image:url(/assets/img/main/ico_btn1_black.png)}

/* ---------- S4 간편 상담문의 ---------- */
/* 원본 .section4{padding-top:90px}, .main-inner 는 block(상단 정렬) */
.sgd-inq{align-items:flex-start;padding-top:90px}
.sgd-inq .bg{position:absolute;inset:0;z-index:0;background-position:50% 50%;background-size:cover}
/* 원본 폼: 라벨 x=180(본문+17) 폭115 / 입력 x=295 폭478 h40 / 행간 62 / 2열 간격 54 */
.sgd-form{padding-left:17px}
.sgd-row{display:flex;flex-wrap:wrap;gap:22px 54px;margin:0 0 22px}
.sgd-fld{flex:0 0 593px;max-width:100%;display:flex;align-items:center;gap:0}
.sgd-fld.full{flex:1 1 100%;align-items:flex-start}
.sgd-fld>label{flex:0 0 115px;font-family:var(--sgd-font);font-size:17px;font-weight:400;color:#666;line-height:25px}
.sgd-fld>label em{font-style:normal;color:#f00;margin-left:3px}
.sgd-fld input[type=text],.sgd-fld input[type=email],.sgd-fld input[type=tel],.sgd-fld select,.sgd-fld textarea{
  flex:1 1 auto;width:100%;min-width:0;height:40px;padding:0 30px 0 8px;
  border:0;border-bottom:1px solid #ddd;border-radius:0;background:#fff;
  font-family:var(--sgd-input);font-size:17px;color:#111}
.sgd-fld select{background:#fff url(/assets/img/common/bu_select2.png) no-repeat right 8px center;
  -webkit-appearance:none;appearance:none}
.sgd-fld textarea{height:140px;padding:10px 30px 10px 8px;resize:vertical;line-height:1.6}
.sgd-fld input:focus,.sgd-fld select:focus,.sgd-fld textarea:focus{outline:0;border-bottom-color:#3085c8}
/* 개인정보 동의 — 원본 라벨 20px #666 */
.sgd-agree{display:flex;align-items:center;gap:0 34px;margin:26px 0 0;font-size:20px;color:#666}
.sgd-agree>span{margin-right:4px}
.sgd-agree label{display:inline-flex;align-items:center;gap:6px;font-size:17px;color:#000;cursor:pointer}
.sgd-agree a{color:#666}
/* 원본 제출버튼 187×55 / #3085c8 / radius55 / 21px 400 흰색 / 가운데 */
.sgd-submit{display:block;margin:46px auto 0;width:187px;height:55px;border:0;border-radius:55px;background:#3085c8;
  color:#fff;font-family:var(--sgd-font);font-size:21px;font-weight:400;cursor:pointer;transition:.25s}
.sgd-submit:hover{background:#0969b5}
.sgd-msg{margin:0 0 20px;padding:13px 18px;font-size:15px;border:1px solid}
.sgd-msg.ok{background:#eef7f0;border-color:#bcdfc6;color:#1e7b4f}
.sgd-msg.err{background:#fdeeee;border-color:#f2c4c4;color:#c0392b}

/* ---------- S5 VOD ---------- */
/* 원본 .section5{padding-top:90px}, .main-inner block(상단 정렬) */
.sgd-vod{background:#fff;align-items:flex-start;padding-top:90px}
/* 원본 h3 옆 + 아이콘 40×40 */
.sgd-vod .phead h2 .plus{display:inline-block;width:40px;height:40px;margin-left:20px;vertical-align:middle;
  position:relative;font-size:0}
.sgd-vod .phead h2 .plus::before,.sgd-vod .phead h2 .plus::after{content:"";position:absolute;background:#000}
.sgd-vod .phead h2 .plus::before{left:50%;top:8px;bottom:8px;width:2px;transform:translateX(-50%)}
.sgd-vod .phead h2 .plus::after{top:50%;left:8px;right:8px;height:2px;transform:translateY(-50%)}
/* 원본 .row 1260 / .col-lg-4 420 padding15 / .well 390×232 흰배경 1px #d7d7d7 padding15 / iframe h200 */
.sgd-vodgrid{display:grid;grid-template-columns:repeat(3,1fr);margin:0}
.sgd-vodgrid .vitem{padding:15px}
.sgd-vodgrid .vitem>div{background:#fff;border:1px solid #d7d7d7;padding:15px}
.sgd-vodgrid .vitem iframe{display:block;width:100%;height:200px;border:0}

/* ---------- 우하단 플로팅 바 ---------- */
/* 원본 .main_slider_box 그대로: QR·인증마크는 배경 없는 이미지, 전화/CTA만 180×80 radius 12px */
.sgd-float a,.sgd-float a:hover{text-decoration:none}
.sgd-float{position:fixed;right:0;bottom:0;z-index:50;display:flex;flex-wrap:nowrap;align-items:center;
  justify-content:center;transition:.7s}
.sgd-float.is-hidden{right:-120%}
.sgd-float .qr,.sgd-float .cert{display:block;background:none;padding:0;border:0;font-size:0;line-height:0}
.sgd-float .qr img{width:80px;height:80px;display:block}
.sgd-float .cert img{width:160px;height:80px;display:block}
.sgd-float .tel{width:180px;height:80px;background:#ebebeb;padding:15px 20px;border-radius:12px;display:block}
.sgd-float .tel b{display:block;font-family:var(--sgd-font);font-size:21px;font-weight:500;color:#000;
  letter-spacing:-.25px;line-height:1.4}
.sgd-float .tel span{display:block;font-size:14px;font-weight:400;color:#666;letter-spacing:-.25px;line-height:1.4}
.sgd-float .cta{width:180px;height:80px;background:#444680;padding:15px 20px;border-radius:12px;display:block;transition:.25s}
.sgd-float .cta b{display:block;font-family:var(--sgd-font);font-size:22px;font-weight:600;color:#fff;
  letter-spacing:-.25px;line-height:1.4}
.sgd-float .cta span{display:block;font-size:14px;font-weight:400;color:#fff;letter-spacing:-.25px;line-height:1.4}
.sgd-float .cta:hover{background:#363868}

/* ---------- 서브페이지 : 원본과 동일하게 상단 유틸바 없음 + 헤더가 sub-head 위에 겹침 ---------- */
.sgd-top{display:none}          /* 원본에 없는 요소 */
.sgd-btn-quote{display:none}    /* 원본 헤더에 견적문의 버튼 없음 */
body.sgd-subpage .sgd-header{position:fixed;left:0;right:0;top:0;background:#fff;border-bottom:0}
/* 메가메뉴가 열렸을 때는 대메뉴와 하위메뉴를 나누는 가로선이 보여야 한다.
   위 규칙(border-bottom:0)이 .sgd-header.is-mega 보다 특이도가 높아 선이 사라졌었다. */
body.sgd-subpage .sgd-header.is-mega{border-bottom:1px solid #e6e6e6}
body.sgd-subpage .site-main{padding-top:0}
body.sgd-subpage .sub-container{position:relative;z-index:1}

/* ---------- 영문 서브페이지 제목 폰트 ----------
   sgd-reset.css 의 `h1~h6 { font-size:1em }` 을 영문에서만 0.95em 으로 낮춘다.
   본문(.about) 안에만 적용한다 — .sub-head 배너 제목까지 줄면 안 된다.
   .h3 / .h3-main 처럼 px 로 크기가 지정된 큰 제목은 영향을 받지 않는다. */
body.lang-en .sub-container .about h1,
body.lang-en .sub-container .about h2,
body.lang-en .sub-container .about h3,
body.lang-en .sub-container .about h4,
body.lang-en .sub-container .about h5,
body.lang-en .sub-container .about h6{font-size:.95em}   /* .sub-head 배너 제목은 제외 */

/* ---------- 일문·중문 줄바꿈 ----------
   원본 front.css 의 `.sub-container * { word-break: keep-all }` 는 한국어 기준 규칙이다.
   일본어·중국어는 단어 사이 공백이 없어 keep-all 이면 문장 전체가 한 덩어리가 되고,
   min-content 폭이 부풀어 flex 칸(.col-lg-6)이 밀려 2열 격자가 무너진다
   (예: jp 장점 페이지 .about 1325 → 1847px). CJK 는 문자 사이에서 끊어야 하므로 normal 로 되돌린다. */
body.lang-jp .sub-container *,
body.lang-cn .sub-container *{word-break:normal}


/* ---------- 고객문의 폼 — 모바일 글자 축소 ----------
   원본 front.css 는 1024 이하에서 라벨 14px / 라벨칸 80px 고정.
   일문 'メールアドレス', 'お問い合わせ製品' 처럼 라벨이 길면 * 가 다음 줄로 떨어진다.
   글자를 한 단계 줄인다(라벨·입력 14→13, 동의 15→14). */
@media (max-width:1024px){
  .sub-container .board-write .section_inquiry .article .tit{font-size:13px}
  .sub-container .board-write .section_inquiry .inp,
  .sub-container .board-write .section_inquiry .select,
  .sub-container .board-write .section_inquiry .textarea{font-size:13px}
  .sub-container .board-write .agree-box .tit{font-size:13px}
  .sub-container .board-write .agree-box label{font-size:14px}
}
/* ---------- 고객문의 개인정보 수집동의 — 모바일에서 '동의 / 미동의' 를 한 줄에 ----------
   원본 front.css 는 .tit 과 label 을 모두 inline 으로 흘려보내서, 폭이 좁아지면
   '동의' 는 제목 줄에 붙고 '미동의' 만 다음 줄로 떨어진다(기기 폭·글꼴에 따라 갈림).
   제목을 한 줄 통째로 쓰게 하고 두 라벨을 그 아래 나란히 고정한다 — 영문판과 같은 모양.
   4개 언어 공통. */
@media (max-width:1024px){
  .sub-container .board-write .agree-box{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
  }
  .sub-container .board-write .agree-box .tit{
    flex:0 0 100%;
    margin-right:0;
    margin-bottom:10px;
  }
  .sub-container .board-write .agree-box label{
    flex:0 0 auto;
    margin-right:28px;
    white-space:nowrap;      /* 라벨 안에서 줄이 갈리지 않게 */
  }
  .sub-container .board-write .agree-box label:last-of-type{margin-right:0}
}

/* ---------- 공지사항 게시판 — 모바일에서도 원본처럼 5칸 모두 보인다 ----------
   mobile.css 의 `.board-table .meta-col:nth-child(n+5){display:none}` 이 '날짜' 를 숨기는데,
   원본(gnuboard) 은 375px 에서도 번호/제목/글쓴이/조회/날짜 5칸을 모두 보여준다.
   서브 골격이 붙은 게시판(현재 공지사항)에만 되돌리고, 좁은 폭에서 넘치지 않게 글자를 줄인다. */
@media (max-width:768px){
  body.sgd-subpage .board-table .meta-col:nth-child(n+5){display:table-cell}
  body.sgd-subpage .board-table th,
  body.sgd-subpage .board-table td{font-size:13px;padding-left:6px;padding-right:6px}
  body.sgd-subpage .board-table .subj{white-space:normal;word-break:break-all}
}

/* ---------- 상고대의 특징(sub0301) 라벨 목록 — C안: 라벨 블록 분리 ----------
   원본은 라벨을 하늘색 <font color="#0099ff"> 로만 표시해 라벨 길이에 따라
   설명 시작점이 들쭉날쭉했다. 라벨 칸을 고정폭 블록으로 분리해 세로 정렬을 맞추고
   색은 브랜드 컬러(#00589d) 로 통일한다.
   - 같은 .well.txt1 을 sub0302(이미지+본문) 도 쓰므로 :has() 로 이 구조만 골라낸다.
   - 국문은 <font> + <span>, 영문은 <font> + <font> 로 마크업이 다르다(원본 그대로).
   - span/font 의 인라인 style(margin-left, display, vertical-align) 을 눌러야 해 !important 를 쓴다. */
.sub-container .well.txt1:has(> h6 > font[color="#0099ff"]){
  --sgd-lbl-w:128px;
  padding:0;
  border:1px solid #e3e8ee;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:16px;
}

/* 9개 라벨 행이 왼쪽 이미지의 아래끝에 정확히 맞도록 간격을 자동 분배한다.
   고정 margin-bottom 16px 이면 언어마다 글자 수가 달라 총 높이가 어긋난다
   (국문 +1px, 영문 +7px, 일문 +29px 넘침). 남는 높이를 행 사이 여백으로 나눠 주면
   내용 길이와 무관하게 항상 이미지와 같은 높이에서 끝난다.
   원본 구조: .rabc > .row > [.col-lg-5(이미지), .col-lg-7 > .row > .col-lg-12 > .well×9]
   .col-lg-7 이 block 이라 안쪽 .row 가 늘어나지 않으므로 flex 사슬을 이어 준다. */
.sub-container .rabc > .row > [class^="col-"]:has(.well.txt1 > h6 > font[color="#0099ff"]){
  display:flex;
  flex-direction:column;
}
.sub-container .rabc > .row > [class^="col-"]:has(.well.txt1 > h6 > font[color="#0099ff"]) > .row{
  flex:1 1 auto;
}
/* 목록 칸 — 남는 높이를 행 사이로 분배 */
.sub-container [class^="col-"]:has(> .well.txt1 > h6 > font[color="#0099ff"]){
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.sub-container [class^="col-"]:has(> .well.txt1 > h6 > font[color="#0099ff"]) > .well.txt1{
  margin-bottom:0;
}
.sub-container .well.txt1 > h6:has(> font[color="#0099ff"]){
  display:flex;
  align-items:stretch;
  line-height:1.5em;
}
/* 라벨 칸 */
.sub-container .well.txt1 > h6 > font[color="#0099ff"]{
  flex:0 0 var(--sgd-lbl-w);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 8px;
  background:#eef4fa;
  color:#00589d;
  font-weight:700;
  text-align:center;
  word-break:keep-all;
  vertical-align:baseline !important;   /* 원본 인라인 vertical-align:top 무력화 */
}
/* 설명 칸 — 국문은 <span>, 영문은 <font color="#5f5f5f"> */
.sub-container .well.txt1 > h6 > font[color="#0099ff"] ~ span,
.sub-container .well.txt1 > h6 > font[color="#0099ff"] ~ font{
  flex:1 1 auto;
  display:block !important;
  margin-left:0 !important;
  padding:14px 20px;
  font-weight:400;                      /* h6 상속(700)을 풀어 설명문을 가늘게 */
  color:#000 !important;                /* 원본 인라인 style="color:#5f5f5f" 를 눌러야 해 !important */
}
/* 영문 라벨은 'Refrigerating capacity' 처럼 길어 칸을 넓게 잡는다 */
body.lang-en .sub-container .well.txt1:has(> h6 > font[color="#0099ff"]){ --sgd-lbl-w:210px }

@media (max-width:768px){
  /* 좁은 폭에서는 라벨을 위로 쌓는다 */
  .sub-container .well.txt1 > h6:has(> font[color="#0099ff"]){ flex-direction:column }
  .sub-container .well.txt1 > h6 > font[color="#0099ff"]{
    flex:0 0 auto;justify-content:flex-start;padding:10px 14px;text-align:left}
  .sub-container .well.txt1 > h6 > font[color="#0099ff"] ~ span,
  .sub-container .well.txt1 > h6 > font[color="#0099ff"] ~ font{padding:12px 14px}
}

/* ---------- 눈꽃빙수기의 장점(sub0302) 카드 — A안: 카드 정리 ----------
   원본은 흰 배경 사진 + 흰 카드 + 19px/700/#5f5f5f 본문이라 사진 경계도 없고 무거웠다.
   사진 칸은 흰 바탕 그대로 두고 본문 칸에 연한 파란 바탕을 깔아 두 칸을 나눈다.
   본문은 17px/400/검정으로 낮춘다. 문구는 원본 그대로 둔다.
   - 같은 .well.txt1 을 sub0301(라벨 목록) 도 쓰므로 `<center><img>` 를 가진 카드만 고른다.
     sub0103 / sub0303 의 .well 은 txt1 이 없어 애초에 걸리지 않는다. */
.sub-container .row > [class^="col-"]:has(> .well.txt1 > center > img){ display:flex }
.sub-container .well.txt1:has(> center > img){
  width:100%;
  display:flex;
  flex-direction:column;
  padding:0;
  background:#fff;
  border:1px solid #e3e8ee;
  border-radius:10px;
  overflow:hidden;
}
/* 사진 칸 — 흰 바탕 */
.sub-container .well.txt1:has(> center > img) > center{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#fff;
}
.sub-container .well.txt1:has(> center > img) > center > img{
  width:auto;                           /* 원본 자연 크기 300px 유지 */
  max-width:100%;
  height:auto;
}
/* 본문 칸 — 연한 파란 바탕 */
.sub-container .well.txt1:has(> center > img) > h6{
  flex:1 1 auto;                        /* 같은 행 카드 높이를 맞춘다 */
  margin:0;
  padding:22px 24px;
  background:#eef4fa;
  border-top:1px solid #dde7f2;
  font-size:17px;
  font-weight:400;                      /* h6 상속(700) 해제 */
  line-height:1.7;
  color:#000;
}
.sub-container .well.txt1:has(> center > img) > h6 font{ color:#000 !important }

@media (max-width:768px){
  .sub-container .well.txt1:has(> center > img) > center{ padding:20px }
  .sub-container .well.txt1:has(> center > img) > h6{ padding:18px }
}

/* ---------- ODM 파트너십 — 시장별 라인업 카드 ----------
   4장의 제품 렌더링이 원본 비율·크기가 제각각(600x600 ~ 800x567)이라
   그대로 두면 카드마다 사진 크기가 달라 보인다. 사진 영역 높이를 고정하고
   가운데 맞춤으로 축소해 4칸이 같은 리듬으로 보이게 한다. */
.sub-container .well.txt1:has(> center > img[src^="/images/odm/"]) > center{
  height:230px;
  padding:20px;
  background:#fff;
}
.sub-container .well.txt1:has(> center > img[src^="/images/odm/"]) > center > img{
  width:auto;
  max-width:100%;
  max-height:100%;
  height:auto;
  object-fit:contain;
}
@media (max-width:1024px){
  .sub-container .well.txt1:has(> center > img[src^="/images/odm/"]) > center{height:260px}
}

/* ---------- 헤더: 비주얼 위 투명 ---------- */
body.sgd-home .sgd-header{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom:0;transition:background .3s,border-color .3s}
body.sgd-home .sgd-header.is-solid,
body.sgd-home .sgd-header.is-mega{background:#fff;border-bottom:1px solid #e6e6e6}
/* 메가메뉴가 열리면 홈에서도 헤더가 흰색으로 (원본 동작) */
body.sgd-home .sgd-header.is-mega .sgd-gnb>ul>li>a{color:#333}
body.sgd-home .sgd-header.is-mega .sgd-logo .lg-dark{display:block}
body.sgd-home .sgd-header.is-mega .sgd-logo .lg-white{display:none}
body.sgd-home .sgd-header.is-mega .sgd-lang-btn{color:var(--sgd-ink);background:#fff;border-color:var(--sgd-line)}
body.sgd-home .sgd-top{display:none}
body.sgd-home .sgd-header .sgd-gnb>ul>li>a{color:#fff}
body.sgd-home .sgd-header .sgd-lang-btn{color:#fff;background:transparent;border-color:rgba(255,255,255,.55);border-radius:999px}
body.sgd-home .sgd-header .sgd-lang-btn:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
body.sgd-home .sgd-header.is-solid .sgd-gnb>ul>li>a{color:var(--sgd-ink)}
body.sgd-home .sgd-header.is-solid .sgd-lang-btn{color:var(--sgd-ink);background:#fff;border-color:var(--sgd-line)}
/* 홈 비주얼 위(투명 헤더)에서만 흰 로고, 스크롤·메가메뉴로 흰 배경이 되면 다크 로고 */
body.sgd-home .sgd-header .sgd-logo .lg-dark{display:none}
body.sgd-home .sgd-header .sgd-logo .lg-white{display:block}
body.sgd-home .sgd-header.is-solid .sgd-logo .lg-dark{display:block}
body.sgd-home .sgd-header.is-solid .sgd-logo .lg-white{display:none}
body.sgd-home .sgd-btn-quote{display:none}
body.sgd-home .site-main{padding-top:0}

/* ---------- 반응형 ---------- */
@media (max-width:1400px){
  .sgd-sec .sgd-wrap{max-width:100%;padding:0 40px}
  .sgd-pmore{right:70px;bottom:24px}
  .sgd-fld{flex:1 1 calc(50% - 27px)}
}
@media (max-width:1200px){
  .sgd-sec .phead .en{font-size:28px}
  .sgd-sec .phead h2{font-size:48px}
  .sgd-v .vtxt h2{font-size:56px;line-height:78px}
  .sgd-v .vtxt h2 span{font-size:24px;line-height:34px}
  .sgd-v .vmark{width:360px;height:216px}
  .sgd-ptabs button{width:220px;font-size:18px}
  .sgd-pmore{width:104px;height:104px;right:60px;font-size:14px}
  .sgd-flake h3{font-size:36px;line-height:1.3} .sgd-flake .t2{font-size:20px;line-height:1.5;margin-bottom:80px}
}
/* ── 모바일 : 원본 375 실측 그대로 ───────────────────────
   섹션 padding-top 70px(VOD 90) / .main-inner padding 0 20px / 높이 auto
   제목 20px(빨강) + 35px(검정) / 비주얼만 100vh                */
@media (max-width:1024px){
  /* 모바일 슬라이드 메뉴는 흰 패널이므로 홈 전용 흰 글씨 규칙을 되돌린다
     (sanggodae.css 가 먼저 병합되어 같은 특이도로는 덮이지 않는다) */
  body.sgd-home .sgd-header .sgd-gnb>ul>li>a,
  body.sgd-home .sgd-header.is-mega .sgd-gnb>ul>li>a{color:var(--sgd-ink);background:#f7f7f7}
  /* 원본: 메뉴가 열리면 헤더 바탕이 흰색이 되고 로고도 다크로 바뀐다
     (우측 햄버거 박스는 자체 배경 #00589d 라 파란색 그대로) */
  body.sgd-home .sgd-header.is-menu,
  .sgd-header.is-menu{background:#fff}
  body.sgd-home .sgd-header.is-menu .sgd-logo .lg-dark{display:block}
  body.sgd-home .sgd-header.is-menu .sgd-logo .lg-white{display:none}

  .sgd-sec{min-height:auto;padding:70px 0 70px;align-items:stretch}
  .sgd-sec .sgd-wrap{max-width:100%;padding:0 20px}
  .sgd-sec .phead{margin-bottom:30px}
  .sgd-sec .phead .en{font-size:20px}
  .sgd-sec .phead .en::before{font-size:16px;top:-6px;right:-14px}
  .sgd-sec .phead h2{font-size:35px}

  /* 비주얼 — 원본: 섹션 100vh / h2 35px lh49 / span 18px lh25.2 / 로고 250×150 / 페이지네이션 숨김
     배경은 원본과 같이 세로형 모바일 전용 이미지(m_img_visual*.jpg)로 교체 */
  .sgd-v{min-height:100vh;padding:0;align-items:center}
  .sgd-v .bg{background-image:var(--bgm,var(--bgd))}
  .sgd-v .vtxt h2{font-size:35px;line-height:49px;margin-bottom:270px}  /* 원본 모바일 h2 margin-bottom:270px */
  .sgd-v .vtxt h2 span{font-size:18px;line-height:25.2px}
  .sgd-v .vmark{width:250px;height:150px}
  .sgd-pagewrap{display:none}
  .sgd-snav{display:none}

  /* PRODUCT — 원본: 슬라이더는 모바일에서도 absolute(탭 위에 겹침)
     item 100%×228 / img 262.5px 우측 / VIEW MORE 60×60 right:20 */
  .sgd-prod{padding:70px 0 70px}
  .sgd-prod .pbody{display:block}
  .sgd-ptabs{flex:none;margin:0 0 0 -10px;flex-direction:column;gap:10px;width:180px}
  .sgd-ptabs button{width:180px;height:34px;line-height:34px;padding:0 10px;font-size:15px;border:0;border-radius:34px}
  /* 모바일은 알약(파란 배경) 대신 글자 색으로만 선택 상태를 표시한다.
     터치에서 남는 sticky hover 도 배경이 생기지 않도록 함께 해제. */
  .sgd-ptabs button,
  .sgd-ptabs button:hover,
  .sgd-ptabs button:focus,
  .sgd-ptabs button.is-on,
  .sgd-ptabs button.is-on:hover{background:transparent}
  .sgd-ptabs button,.sgd-ptabs button:hover{color:#a4a4a4;font-weight:400}
  .sgd-ptabs button.is-on,.sgd-ptabs button.is-on:hover{color:#111;font-weight:600}
  .sgd-pstage{position:absolute;left:0;top:0;bottom:0;width:100%;justify-content:flex-end;z-index:1}
  .sgd-pitem{width:100%;max-width:100%;height:228px}
  .sgd-pitem img{width:262.5px;max-width:70%;height:100%;left:auto;right:0;object-position:right center}
  /* 모바일 VIEW MORE — 제품 이미지 위에 겹치지 않도록 이미지 아래로 내린다 */
  .sgd-pmore{position:absolute;right:20px;bottom:auto;top:calc(100% - 20px);width:60px;height:60px;font-size:10px;
    letter-spacing:0;box-shadow:12px 12px 20px 0 rgba(48,133,200,.3)}
  .sgd-pmore .ar{width:14px;height:6px;margin-bottom:4px}

  /* snow flakes — 원본 h3 26px */
  .sgd-flake{padding:70px 0 70px}
  .sgd-flake h3{font-size:26px;line-height:1.3;margin-bottom:24px}
  .sgd-flake .t2{font-size:16px;line-height:1.6;margin-bottom:40px}
  .sgd-more{width:200px;height:52px;line-height:46px;font-size:16px}

  /* 문의 — 원본: 라벨 80px / 입력 215px, 한 줄에 라벨+입력 */
  .sgd-inq{padding:70px 0 70px}
  .sgd-form{padding:0 20px}
  .sgd-row{display:block;margin:0}
  .sgd-fld{display:flex;width:100%;margin-bottom:22px}
  .sgd-fld>label{flex:0 0 80px;font-size:15px;line-height:20px}
  .sgd-fld input[type=text],.sgd-fld input[type=email],.sgd-fld input[type=tel],.sgd-fld select,.sgd-fld textarea{
    flex:1 1 auto;width:auto;font-size:15px}
  .sgd-fld textarea{height:120px}
  .sgd-agree{flex-wrap:wrap;gap:8px 16px;margin-top:10px;font-size:15px}
  .sgd-agree label{font-size:15px}
  .sgd-submit{margin-top:30px}

  /* VOD — 원본: padding-top 90 / 1열 */
  .sgd-vod{padding:90px 0 70px}
  .sgd-vodgrid{grid-template-columns:1fr;margin:0}
  .sgd-vodgrid .vitem{padding:12px}
  .sgd-vodgrid .vitem iframe{height:156px}

  /* 플로팅 — 원본 .main_slider_box : 화면 폭 100%, 좌우 절반씩 80px, QR·인증마크 숨김 */
  .sgd-float{left:0;right:0;width:100%;max-width:100%;justify-content:stretch}
  .sgd-float.is-hidden{right:0;transform:translateY(100%)}
  .sgd-float .qr,.sgd-float .cert{display:none}
  /* 영문·일문 라벨이 길어도 가로로 넘치지 않게 (넘치면 문서 폭이 늘어나 헤더 햄버거가 화면 밖으로 밀린다) */
  .sgd-float .tel,.sgd-float .cta{flex:1 1 0;width:auto;min-width:0;height:80px;padding:16px 16px;border-radius:0;overflow:hidden}
  .sgd-float .tel b,.sgd-float .cta b{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sgd-float .tel span,.sgd-float .cta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* 원본은 375 에서도 제목 35px · flake 26px 을 유지하므로 추가 축소 규칙을 두지 않는다.
   플로팅 글자만 좁은 폭에 맞춰 줄인다. */
@media (max-width:640px){
  .sgd-float .tel b,.sgd-float .cta b{font-size:17px}
  .sgd-float .tel span,.sgd-float .cta span{font-size:12px}
}

/* ---------- ODM 파트너십 페이지 전용 레이아웃 (A안 — 임팩트형) ----------
   짙은 히어로 패널 → 좌우 대비 → 원형 스텝 → 4카드 → 숫자 스트립 → CTA 밴드.
   색·폰트는 사이트 공통 토큰(#00589d / #eef4fa / #e3e8ee)을 그대로 쓴다.
   솔루션 제안 페이지도 같은 클래스를 공유한다. */
.sub-container .odm{max-width:1300px;margin:0 auto;padding:0 20px;counter-reset:odmsec}

/* 히어로 — 페이지를 여는 선언 */
.sub-container .odm-hero{
  position:relative;overflow:hidden;
  background:#00365f;border-radius:16px;padding:56px 56px 52px;color:#fff;margin-top:30px;
}
/* 우측 상고대 마크 워터마크 — 메인 비주얼과 같은 흰색 마크를 흐리게 깔아 준다 */
.sub-container .odm-hero::after{
  content:"";position:absolute;right:40px;top:50%;transform:translateY(-50%);
  width:330px;height:198px;
  background:url(/assets/img/main_logo_w.png) no-repeat center/contain;
  opacity:.08;pointer-events:none;
}
.sub-container .odm-hero>*{position:relative;z-index:1}
.sub-container .odm-hero .kick{font-family:Play,sans-serif;font-size:13px;font-weight:700;letter-spacing:.18em;color:#7fb3e0;margin:0 0 18px}
.sub-container .odm-hero h2{font-size:42px;font-weight:700;line-height:1.4;letter-spacing:-.03em;margin:0 0 26px;color:#fff}
.sub-container .odm-hero h2 em{font-style:normal;color:#7fd0ff}
.sub-container .odm-hero p{font-size:18px;line-height:2.1;color:#c5d8ea;margin:0;max-width:940px}

/* 소제목 — 큰 숫자 워터마크. 번호는 CSS counter 로 매긴다 */
/* 소제목 — 큰 숫자 워터마크 + 진한 제목 (여백만 이전보다 넉넉히) */
/* 소제목 — 번호 대신 좌측 상단에 작은 빨간 정사각형 */
.sub-container .odm-h{
  position:relative;
  display:block;padding-left:.62em;
  font-size:35px;font-weight:700;color:#181818;line-height:1.25;letter-spacing:-.035em;
  margin:100px 0 30px;
}
.sub-container .odm-h::before{
  content:"";position:absolute;left:0;top:-.1em;
  width:13px;height:13px;background:#ff0000;
}

/* 역할 분담 — 좌우 대비 */
.sub-container .odm-split{display:grid;grid-template-columns:1fr 64px 1fr;border:1px solid #e3e8ee;border-radius:14px;overflow:hidden}
/* 가운데 연결 칸(+) 없이 두 칸만 쓰는 변형 — 솔루션 제안의 사양/차별점 */
.sub-container .odm-split.duo{grid-template-columns:1fr 1fr}
/* 두 칸 split 등장 — 연한 칸이 진한 칸 뒤에서 밀려 나와 제자리에 선다.
   .anim 은 JS 가 붙인다(스크립트가 없으면 정적으로 그대로 보인다). */
.sub-container .odm-split.duo>.l{position:relative;z-index:2}
.sub-container .odm-split.duo>.r{position:relative;z-index:1}
.sub-container .odm-split.duo.anim>.r{
  transform:translateX(-100%);
  transition:transform .9s cubic-bezier(.16,.84,.24,1);
}
.sub-container .odm-split.duo.anim.is-in>.r{transform:none}
/* 3칸 split(역할 분담) — 양쪽 칸이 좌·우 밖에서 들어와 제자리에 서고, 가운데 +가 뒤이어 나타난다.
   컨테이너에 overflow:hidden 이 있어 들어오기 전에는 화면에 보이지 않는다. */
.sub-container .odm-split.anim>.l,
.sub-container .odm-split.anim>.r,
.sub-container .odm-split.anim>.mid{transition:transform .9s cubic-bezier(.16,.84,.24,1),opacity .5s ease}
.sub-container .odm-split:not(.duo).anim>.l{transform:translateX(-102%)}
.sub-container .odm-split:not(.duo).anim>.r{transform:translateX(102%)}
.sub-container .odm-split:not(.duo).anim>.mid{opacity:0;transition-delay:0s}
.sub-container .odm-split:not(.duo).anim.is-in>.l,
.sub-container .odm-split:not(.duo).anim.is-in>.r{transform:none}
.sub-container .odm-split:not(.duo).anim.is-in>.mid{opacity:1;transition-delay:.55s}
@media (prefers-reduced-motion:reduce){
  .sub-container .odm-split.anim>.l,
  .sub-container .odm-split.anim>.r,
  .sub-container .odm-split.anim>.mid{transform:none;opacity:1;transition:none}
}
@media (prefers-reduced-motion:reduce){
  .sub-container .odm-split.duo.anim>.r{transform:none;transition:none}
}
.sub-container .odm-split>div{padding:28px 32px}
.sub-container .odm-split .l{background:#00589d;color:#fff}
.sub-container .odm-split .r{background:#eef4fa}
.sub-container .odm-split .mid{background:#fff;display:flex;align-items:center;justify-content:center;padding:0;font-size:28px;color:#00589d;font-weight:700}
.sub-container .odm-split .lb{
  font-family:Play,sans-serif;font-size:27px;font-weight:700;letter-spacing:.16em;line-height:1.3;
  margin-bottom:20px;padding-bottom:16px;opacity:.9;
  border-bottom:1px solid rgba(255,255,255,.35);   /* 가는 가로 구분선 */
}
.sub-container .odm-split .r .lb{color:#00589d;border-bottom-color:rgba(0,88,157,.25)}
.sub-container .odm-split ul{margin:0;padding-left:20px;list-style:disc}
.sub-container .odm-split li{font-size:18px;line-height:2;list-style:disc}

/* 협력 단계 — 계단형(A안). 카드 높이는 동일하게 두고, 오른쪽으로 갈수록 색이 진해진다.
   본문 마크업(.n/.t/.d)은 4개 언어 공용이라 그대로 두고 CSS 로만 형태를 바꾼다.
   진행 바는 .n 의 배경 그라디언트 2겹(채움/트랙)으로 그린다 — 가상요소는 "STEP" 접두어에 쓴다. */
.sub-container .odm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;position:relative}
.sub-container .odm-steps::before{display:none}
.sub-container .odm-steps>div{
  min-height:250px;
  text-align:left;padding:30px 28px 32px;border:0;border-radius:12px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.sub-container .odm-steps>div:nth-child(1){background:#eef4fa;color:#181818}
.sub-container .odm-steps>div:nth-child(2){background:#0f6fb8;color:#fff}
.sub-container .odm-steps>div:nth-child(3){background:#00365f;color:#fff}
.sub-container .odm-steps .n{
  width:auto;height:auto;margin:0 0 26px;border:0;border-radius:0;background:none;
  display:block;padding-bottom:26px;
  font-family:Play,sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;line-height:1.2;
  background-image:linear-gradient(#fff,#fff),linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28));
  background-repeat:no-repeat;background-position:left bottom,left bottom;background-size:33% 4px,100% 4px;
}
.sub-container .odm-steps .n::before{content:"STEP "}
.sub-container .odm-steps>div:nth-child(1) .n{
  color:#00589d;
  background-image:linear-gradient(#00589d,#00589d),linear-gradient(rgba(0,88,157,.18),rgba(0,88,157,.18));
}
.sub-container .odm-steps>div:nth-child(2) .n{background-size:66% 4px,100% 4px}
.sub-container .odm-steps>div:nth-child(3) .n{background-size:100% 4px,100% 4px}
.sub-container .odm-steps .t{font-size:24px;font-weight:700;color:inherit;margin:0 0 12px;letter-spacing:-.02em}
.sub-container .odm-steps .d{font-size:16.5px;line-height:1.9;color:inherit;opacity:.86}
.sub-container .odm-steps>div:nth-child(1) .d{color:#5f5f5f;opacity:1}

/* 진입 경로 — 이미지 카드 3단(제안서 콘셉트 이미지). 순서가 아니라 병렬 선택지다. */
.sub-container .odm-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sub-container .odm-routes .r{border:1px solid #e3e8ee;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.sub-container .odm-routes .ph{height:220px;overflow:hidden;background:#eef4fa}
.sub-container .odm-routes .ph img{width:100%;height:100%;object-fit:cover;display:block}
.sub-container .odm-routes .bd{flex:1 1 auto;padding:24px 26px 28px;background:#eef4fa}
.sub-container .odm-routes .n{font-family:Play,sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;color:#00589d;margin-bottom:12px}
.sub-container .odm-routes .t{font-size:22px;font-weight:700;color:#181818;margin-bottom:10px;letter-spacing:-.02em}
.sub-container .odm-routes .d{font-size:16.5px;line-height:1.9;color:#5f5f5f}

/* 넓은 콘셉트 사진 한 장 */
.sub-container .odm-shot{border-radius:14px;overflow:hidden;margin-bottom:24px}
.sub-container .odm-shot img{width:100%;height:auto;display:block}
/* 로드맵 — 시간 축. 협력 단계(관계의 깊이)와 겹치지 않도록 점·선 타임라인으로 구분한다. */
/* 로드맵 — 화살표가 맞물린 띠. 기간 밴드가 오른쪽으로 갈수록 짙어진다.
   협력 단계(계단형 패널)와 형태가 겹치지 않도록 리본형으로 잡았다. */
.sub-container .odm-road{display:grid;grid-template-columns:repeat(4,1fr);gap:0 6px}
.sub-container .odm-road>div{position:relative}
.sub-container .odm-road .p{
  display:block;position:relative;margin:0;
  padding:16px 22px 16px 42px;
  font-family:Play,sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;line-height:1.3;
  color:#fff;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%,20px 50%);
}
.sub-container .odm-road>div:first-child .p{
  padding-left:26px;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%);
}
.sub-container .odm-road>div:last-child .p{
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,20px 50%);
}
.sub-container .odm-road>div:nth-child(1) .p{background:#9dc2df;color:#00365f}
.sub-container .odm-road>div:nth-child(2) .p{background:#5b9bcd}
.sub-container .odm-road>div:nth-child(3) .p{background:#1a6cab}
.sub-container .odm-road>div:nth-child(4) .p{background:#00365f}
.sub-container .odm-road .t{
  font-size:22px;font-weight:700;color:#181818;letter-spacing:-.02em;
  margin:26px 0 10px;padding:0 18px 0 42px;
}
.sub-container .odm-road .d{font-size:16.5px;line-height:1.9;color:#5f5f5f;padding:0 18px 0 42px}
.sub-container .odm-road>div:first-child .t,
.sub-container .odm-road>div:first-child .d{padding-left:26px}

/* 시장별 라인업 — 4카드 */
.sub-container .odm-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sub-container .odm-tiers .tier{border:1px solid #e3e8ee;border-radius:12px;overflow:hidden;background:#fff}
.sub-container .odm-tiers .ph{height:400px;display:flex;align-items:center;justify-content:center;background:#fff;padding:24px}
.sub-container .odm-tiers .ph img{max-width:100%;max-height:100%;width:auto;height:auto}
.sub-container .odm-tiers .cap{background:#eef4fa;padding:20px 50px;display:flex;align-items:center}
.sub-container .odm-tiers .cap b{
  flex:0 0 auto;display:block;font-size:26px;color:#00589d;margin:0 22px 0 0;padding-right:22px;
  border-right:1px solid rgba(0,88,157,.25);letter-spacing:-.02em;line-height:1.3;
}
.sub-container .odm-tiers .cap span{flex:1 1 auto;font-size:17px;color:#5f5f5f;line-height:1.6}

/* 기반 — 숫자 스트립 + 상세 */
.sub-container .odm-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #e3e8ee;border-radius:14px;overflow:hidden;background:#f7f9fc}
.sub-container .odm-stats>div{padding:26px 20px;text-align:center;border-right:1px solid #e3e8ee}
.sub-container .odm-stats>div:last-child{border-right:0}
.sub-container .odm-stats .n{font-family:Play,sans-serif;font-size:30px;font-weight:700;color:#00589d;line-height:1.2}
.sub-container .odm-stats .n i{font-style:normal;font-size:16px}
.sub-container .odm-stats .l{font-size:16px;color:#5f5f5f;margin-top:8px;line-height:1.5}
.sub-container .odm-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.sub-container .odm-facts>div{display:flex;border:1px solid #e3e8ee;border-radius:8px;overflow:hidden}
.sub-container .odm-facts .k{flex:0 0 132px;background:#eef4fa;color:#00589d;font-weight:700;font-size:17px;
  display:flex;align-items:center;justify-content:center;padding:12px 8px;text-align:center;word-break:keep-all}
.sub-container .odm-facts .v{flex:1;padding:15px 18px;font-size:17px;line-height:1.8;color:#000}

/* 문의 — CTA 밴드 */
.sub-container .odm-cta{background:#00589d;border-radius:14px;padding:38px 44px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sub-container .odm-cta .t{font-size:24px;font-weight:700;line-height:1.5;color:#fff}
.sub-container .odm-cta .m{font-size:17px;color:#cfe4f6;margin-top:8px}
.sub-container .odm-cta a{background:#fff;color:#00589d;font-weight:700;font-size:16px;
  padding:15px 30px;border-radius:999px;text-decoration:none;white-space:nowrap}

/* 소제목 바로 아래 한 줄 설명 — 성격이 비슷해 보이는 섹션을 구분해 준다 */
.sub-container .odm-lede{margin:-14px 0 26px;font-size:17px;line-height:1.8;color:#5f5f5f}
.sub-container .odm-note{margin:30px 0 0;text-align:center;font-size:18px;line-height:1.9;color:#5f5f5f}
/* 강조 문구 — 페이지에서 한 번만 쓴다(진입 경로 결론) */
.sub-container .odm-note.hl{
  margin-top:38px;
  font-size:24px;line-height:1.7;font-weight:700;color:#00365f;letter-spacing:-.02em;
}

@media (max-width:1024px){
  .sub-container .odm-hero{padding:32px 24px;border-radius:12px}
  .sub-container .odm-hero::after{width:170px;height:102px;right:18px;opacity:.06}
  .sub-container .odm-hero h2{font-size:26px;margin-bottom:20px}
  .sub-container .odm-h{font-size:22px;margin:72px 0 22px}
  .sub-container .odm-h::before{width:11px;height:11px}
  .sub-container .odm-split,
  .sub-container .odm-split.duo{grid-template-columns:1fr}
  .sub-container .odm-split .mid{padding:14px 0}
  .sub-container .odm-split li{font-size:17px}
  .sub-container .odm-split .lb{font-size:19px;letter-spacing:.12em;margin-bottom:16px;padding-bottom:13px}
  .sub-container .odm-steps{grid-template-columns:1fr;gap:14px;align-items:stretch}
  .sub-container .odm-steps>div{padding:24px 22px 26px}
  .sub-container .odm-steps>div:nth-child(1),
  .sub-container .odm-steps>div:nth-child(2),
  .sub-container .odm-steps>div:nth-child(3){min-height:0}
  .sub-container .odm-steps .n{margin-bottom:20px;padding-bottom:20px;font-size:12px}
  .sub-container .odm-steps .t{font-size:20px;margin-bottom:10px}
  .sub-container .odm-steps .d{font-size:16px}
  .sub-container .odm-routes{grid-template-columns:1fr;gap:14px}
  .sub-container .odm-routes .ph{height:200px}
  .sub-container .odm-routes .bd{padding:20px 22px 24px}
  .sub-container .odm-routes .t{font-size:20px}
  .sub-container .odm-routes .d{font-size:16px}
  .sub-container .odm-shot{border-radius:12px;margin-bottom:18px}
  .sub-container .odm-lede{margin:-10px 0 20px;font-size:16px}
  .sub-container .odm-note.hl{font-size:19px;margin-top:28px}
  .sub-container .odm-road{grid-template-columns:1fr;gap:24px}
  .sub-container .odm-road .p,
  .sub-container .odm-road>div:first-child .p,
  .sub-container .odm-road>div:last-child .p{
    clip-path:none;display:inline-block;border-radius:999px;
    padding:9px 18px;font-size:12px;letter-spacing:.06em;
  }
  .sub-container .odm-road .t{font-size:19px;margin:14px 0 8px;padding:0}
  .sub-container .odm-road .d{font-size:16px;padding:0}
  .sub-container .odm-road>div:first-child .t,
  .sub-container .odm-road>div:first-child .d{padding-left:0}
  .sub-container .odm-tiers{grid-template-columns:1fr;gap:16px}
  .sub-container .odm-tiers .ph{height:260px;padding:18px}
  .sub-container .odm-tiers .cap{padding:16px 18px}
  .sub-container .odm-tiers .cap b{font-size:21px;margin-right:16px;padding-right:16px}
  .sub-container .odm-tiers .cap span{font-size:15.5px}
  .sub-container .odm-stats{grid-template-columns:1fr 1fr}
  .sub-container .odm-stats>div:nth-child(2){border-right:0}
  .sub-container .odm-facts{grid-template-columns:1fr}
  .sub-container .odm-facts .k{flex:0 0 108px;font-size:15px}
  .sub-container .odm-cta{padding:26px 22px;flex-direction:column;align-items:flex-start}
  .sub-container .odm-cta .t{font-size:21px}
}

/* ── 자주 묻는 질문 ─────────────────────────────────────────────
   details/summary 로 만들어 자바스크립트 없이 접히고, 접힌 상태에서도
   답변 텍스트가 DOM 에 그대로 있어 검색엔진·AI 가 읽을 수 있다. */
.sub-container .faq{max-width:1300px;margin:0 auto;padding:0 20px}
.sub-container .faq-item{border-bottom:1px solid #e3e8ee}
.sub-container .faq-item:first-of-type{border-top:2px solid #00589d}
.sub-container .faq-item>summary{
  list-style:none;cursor:pointer;position:relative;
  padding:26px 56px 26px 46px;
  font-size:20px;font-weight:700;color:#181818;line-height:1.6;letter-spacing:-.02em;
}
.sub-container .faq-item>summary::-webkit-details-marker{display:none}
.sub-container .faq-item>summary::before{
  content:"Q";position:absolute;left:6px;top:24px;
  font-family:Play,sans-serif;font-size:20px;font-weight:700;color:#00589d;
}
.sub-container .faq-item>summary::after{
  content:"";position:absolute;right:16px;top:34px;
  width:11px;height:11px;border-right:2px solid #8a9bb0;border-bottom:2px solid #8a9bb0;
  transform:rotate(45deg);transition:transform .25s ease;
}
.sub-container .faq-item[open]>summary{color:#00589d}
.sub-container .faq-item[open]>summary::after{transform:rotate(-135deg);border-color:#00589d}
.sub-container .faq-a{
  position:relative;padding:0 40px 30px 46px;
  font-size:17px;line-height:2;color:#5f5f5f;
}
.sub-container .faq-a::before{
  content:"A";position:absolute;left:6px;top:0;
  font-family:Play,sans-serif;font-size:20px;font-weight:700;color:#b9c6d4;
}
.sub-container .faq-a a{color:#00589d;text-decoration:underline}
.sub-container .faq-a ul{margin:10px 0 0;padding-left:18px;list-style:disc}
.sub-container .faq-a li{list-style:disc;margin-bottom:4px}
.sub-container .faq-more{
  margin-top:44px;background:#eef4fa;border-radius:12px;padding:30px 34px;
  font-size:17px;line-height:1.9;color:#00365f;
}
.sub-container .faq-more b{display:block;font-size:20px;margin-bottom:8px}
.sub-container .faq-more a{color:#00589d;font-weight:700;text-decoration:underline}

@media (max-width:1024px){
  .sub-container .faq{padding:0 16px}
  .sub-container .faq-item>summary{padding:20px 40px 20px 34px;font-size:17px}
  .sub-container .faq-item>summary::before{font-size:17px;top:19px;left:2px}
  .sub-container .faq-item>summary::after{right:10px;top:26px;width:9px;height:9px}
  .sub-container .faq-a{padding:0 8px 24px 34px;font-size:16px;line-height:1.9}
  .sub-container .faq-a::before{font-size:17px;left:2px}
  .sub-container .faq-more{padding:22px 20px;font-size:16px}
  .sub-container .faq-more b{font-size:18px}
}

/* 2단 구조(상단 정책줄 + 본문줄)로 바뀌면서 각 줄이 자체 여백을 갖는다.
   바깥 padding(46/54px)이 남아 있으면 정책줄 위가 크게 비어 보인다. */
.sgd-footer{padding:0}
/* ── 푸터 — 상단 정책줄(관리자 버튼) + 본문줄(로고·회사정보·상담전화) ────── */
.sgd-footer .sgd-f-top{border-bottom:1px solid rgba(255,255,255,.10)}
.sgd-footer .sgd-f-top .sgd-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:62px;padding-top:0;padding-bottom:0;
}
.sgd-footer .sgd-f-links{display:flex;flex-wrap:wrap;gap:26px;margin:0;padding:0;list-style:none;font-size:14px}
.sgd-footer .sgd-f-links a{color:#c8cfd7}
.sgd-footer .sgd-f-links a:hover{color:#fff}
.sgd-f-admin{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  height:34px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);color:#e6ebf1;font-size:13px;line-height:1;
  text-decoration:none;transition:background .2s,border-color .2s,color .2s;
}
.sgd-f-admin:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.6);color:#fff}
.sgd-f-admin svg{flex:0 0 auto;opacity:.9}

.sgd-footer .sgd-f-main .sgd-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding-top:38px;padding-bottom:44px}
.sgd-footer .sgd-f-body{flex:1 1 420px;min-width:280px;position:relative;padding-left:40px}
.sgd-footer .sgd-f-body::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.12);
}
.sgd-f-call{flex:0 0 auto;margin-left:auto;text-align:right}
.sgd-f-call .lb{display:block;font-size:18px;font-weight:700;color:#e6ebf1;margin-bottom:12px}
.sgd-f-call a{
  display:block;font-family:var(--sgd-disp),sans-serif;font-size:42px;font-weight:700;
  letter-spacing:-.01em;color:#fff;text-decoration:none;line-height:1.1;transition:color .2s;
}
.sgd-f-call a:hover{color:#e8342f}   /* 로고 마크의 빨강 계열, 어두운 배경에서 보이도록 조금 밝게 */

@media (max-width:1024px){
  .sgd-footer .sgd-f-top .sgd-wrap{min-height:0;padding-top:16px;padding-bottom:16px;flex-wrap:wrap;gap:12px}
  .sgd-footer .sgd-f-links{gap:16px;font-size:13px}
  .sgd-f-admin{height:30px;padding:0 14px;font-size:12px}
  .sgd-footer .sgd-f-main .sgd-wrap{gap:20px;padding-top:26px;padding-bottom:30px}
  .sgd-footer .sgd-f-body{padding-left:0;flex-basis:100%}
  .sgd-footer .sgd-f-body::before{display:none}
  .sgd-f-call{margin-left:0;text-align:left;flex-basis:100%}
  .sgd-f-call a{font-size:32px}
  .sgd-f-call .lb{font-size:16px;margin-bottom:8px}
}