@charset "utf-8";
/* ===========================================================
   MYUNGSUNG CORP. — 메인 페이지 스타일
   색: #FFFFFF / #F3F0ED(베이지) / #111315(텍스트) / #DCD8D4(선)
   =========================================================== */

:root{
  color-scheme:light;        /* 브라우저 자동 다크모드 반전 방지 */
  /* ===== 컬러 테마 토큰 (theme-*.css 로 교체 가능) ===== */
  --ink:#111315; --sub:#6E6E6E; --body:#3C3C3C;
  --bg:#FFFFFF;
  --beige:#F3F0ED; --beige-2:#E8E4E0; --beige-3:#EFEBE7; --beige-4:#DEDAD5;
  --line:#DCD8D4; --line-2:#C9C3BC; --cap:#9A948D; --ph-note:#B5B0AA;
  --accent:#111315; --accent-2:#6E6E6E; --accent-strong:#111315;
  --scrim:255,255,255;      /* 배너 위 반투명 막 색 (R,G,B) */
  --ink-rgb:17,19,21;
  --pad:120px;                 /* 좌우 여백 */
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.en{font-family:'Poppins','Noto Sans KR',sans-serif}
.wrap{padding:0 var(--pad)}
.beige{background:var(--beige)}
.sect{padding:112px 0}
.rule{height:1px;background:var(--line)}

/* ---------- 타이포 ---------- */
.h1{font-family:'Poppins',sans-serif;font-weight:600;font-size:88px;line-height:1.2;letter-spacing:-.02em}
.h2{font-family:'Poppins',sans-serif;font-weight:600;font-size:64px;line-height:1.2;letter-spacing:-.015em}
.h3{font-family:'Poppins',sans-serif;font-weight:300;font-size:32px;line-height:1.3;letter-spacing:-.01em}
.kr-h{font-weight:300;font-size:26px;letter-spacing:-.02em;line-height:1.4}
.lbl{font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.body-t{font-weight:300;font-size:15px;line-height:1.95;color:var(--body);white-space:pre-line}
.col-r{width:420px;flex:none;padding-left:48px;border-left:1px solid var(--line)}
/* 왼쪽 큰 제목과 오른쪽 설명 단을 세로 가운데로 맞춥니다 */
.split{display:flex;gap:80px;align-items:center;margin-bottom:72px}
/* 제목 폭만큼만 차지해 오른쪽 설명 단이 가운데로 붙습니다.
   min-width 는 제목이 짧은 섹션에서 구분선이 너무 왼쪽으로 쏠리지 않게 하는 최소 폭입니다. */
.split .left{flex:0 1 auto;min-width:min(440px,42%)}
.split .lbl{display:block;margin-bottom:40px}

/* ---------- 링크 ---------- */
.link{display:inline-flex;align-items:center;gap:14px;font-family:'Poppins',sans-serif;font-weight:500;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:8px;position:relative}
.link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);
  transform-origin:right;transition:transform .5s var(--ease)}
.link:hover::after{transform:scaleX(0);transform-origin:left}
.link i{font-style:normal;transition:transform .4s var(--ease)}
.link:hover i{transform:translateX(8px)}

/* ---------- 헤더 ---------- */
.hdr{position:fixed;left:0;top:0;width:100%;height:104px;display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--pad);z-index:100;
  transition:transform .5s var(--ease),background-color .4s,height .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent}
.hdr.scrolled{background:rgba(var(--scrim),.92);backdrop-filter:blur(8px);height:84px;border-color:var(--line)}
.hdr.hide{transform:translateY(-100%)}
.logo{display:flex;align-items:center;gap:12px}
.logo b{font-family:'Poppins',sans-serif;font-weight:500;font-size:22px;letter-spacing:.08em}
.logo i{width:15px;height:15px;border-radius:50%;background:var(--accent);display:block}
.gnb{display:flex;align-items:center;gap:38px;font-size:14px;letter-spacing:.02em}
.gnb a{position:relative;padding:6px 0}
.gnb a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.gnb a:hover::after{transform:scaleX(1)}
.hdr-right{display:flex;align-items:center;gap:28px}
.btn-line{border:1px solid var(--ink);border-radius:999px;padding:10px 22px;font-size:13px;letter-spacing:.06em;
  transition:background-color .35s,color .35s}
.btn-line:hover{background:var(--accent-strong);color:var(--bg);border-color:var(--accent-strong)}
/* 언어 선택 (한국어 / English) */
.lang{display:flex;align-items:center;gap:9px;font-family:'Poppins',sans-serif;font-size:12px;
  letter-spacing:.12em;color:var(--sub)}
.lang a,.lang button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;
  padding:0;cursor:pointer;transition:color .3s}
.lang a:hover,.lang button:hover{color:var(--ink)}
.lang a.on,.lang button.on{color:var(--ink);font-weight:600}
.lang-sep{color:var(--line-2)}
.m-lang{margin-top:40px;font-size:14px;gap:12px}
.burger{display:none;flex-direction:column;gap:5px;width:26px}
.burger span{height:1px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}

/* 모바일 메뉴 */
.m-menu{position:fixed;inset:0;width:100%;height:100%;background:var(--bg,#FFFFFF);z-index:99;
  padding:140px var(--pad) 60px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(-100%);transition:transform .6s var(--ease),opacity .35s,visibility .35s;
  display:none;visibility:hidden;opacity:0;pointer-events:none}
.m-menu.open{transform:translateY(0);visibility:visible;opacity:1;pointer-events:auto}
.m-menu a{display:block;font-family:'Poppins',sans-serif;font-weight:300;font-size:30px;padding:18px 0;
  border-bottom:1px solid var(--line)}

/* ---------- 히어로 (롤링 배너) ---------- */
.hero{position:relative;height:100vh;min-height:720px;overflow:hidden;background:var(--bg)}
.hero .deco{position:absolute;right:-60px;top:-140px;width:720px;height:720px;border:1px solid var(--line);
  border-radius:50%;animation:floaty 14s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(34px)}}
.hero-inner{position:relative;height:100%;display:flex;align-items:center;gap:80px;padding:0 var(--pad)}
.slides{flex:1;display:grid;min-width:0}
.slide{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .9s var(--ease)}
.slide.on{opacity:1;pointer-events:auto}
.slide .lbl{display:block;margin-bottom:40px;opacity:0;transform:translateY(16px)}
.slide .h1{opacity:0;transform:translateY(26px)}
.slide.on .lbl{animation:up .9s var(--ease) .1s forwards}
.slide.on .h1{animation:up 1s var(--ease) .22s forwards}
@keyframes up{to{opacity:1;transform:translateY(0)}}
.hero .col-r{opacity:0;transform:translateY(20px)}
.hero.ready .col-r{animation:up 1s var(--ease) .5s forwards}
.hero-txt{display:grid}
.hero-txt .body-t{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
.hero-txt .body-t.on{opacity:1;pointer-events:auto}
.hero-bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:72px}
.hero-bottom .inner{display:flex;justify-content:space-between;align-items:center;padding-top:26px}
.scroll-hint{font-family:'Poppins',sans-serif;font-size:13px;letter-spacing:.14em;color:var(--sub);
  display:flex;align-items:center;gap:12px}
.scroll-hint::after{content:"";width:46px;height:1px;background:var(--line-2);position:relative;
  animation:slideline 2.2s var(--ease) infinite}
@keyframes slideline{0%{transform:scaleX(.2);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}
  51%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(.2);transform-origin:right}}
.pager{display:flex;align-items:center;gap:16px;font-family:'Poppins',sans-serif;font-size:13px;letter-spacing:.1em}
.pager button{width:46px;height:12px;display:flex;align-items:center}
.pager button i{display:block;width:100%;height:1px;background:var(--line);position:relative;overflow:hidden}
.pager button i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.pager button.on i::after{animation:fill 6s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}

/* ---------- 공통 컴포넌트 ---------- */
.ph{position:relative;overflow:hidden;background:var(--beige-2)}
.ph img{width:100%;height:100%;object-fit:cover;opacity:0;transition:transform 1.2s var(--ease),opacity .6s ease}
.ph.filled img{opacity:1}
.ph:hover img{transform:scale(1.05)}
.ph .cap{position:absolute;left:20px;bottom:16px;font-size:12px;letter-spacing:.08em;color:var(--cap)}
.ph.filled .cap{display:none}
.row{display:flex;gap:40px;padding:34px 0;border-top:1px solid var(--line);align-items:flex-start;
  transition:background-color .4s,padding-left .4s var(--ease)}
.row:hover{background:rgba(var(--ink-rgb),.03);padding-left:12px}
.num{font-family:'Poppins',sans-serif;font-weight:300;font-size:13px;letter-spacing:.1em;color:var(--accent-2);
  width:62px;flex:none;padding-top:6px}
.ic{display:block;flex:none}
.cols{display:flex;gap:40px}
.cols>*{flex:1}
.list-line>div{padding:16px 0;border-top:1px solid var(--line);font-size:16px;font-weight:300}
/* 번호가 앞에 붙는 목록은 글이 길어져도 번호 아래로 흐르지 않게 */
#odm .list-line>div{display:flex;align-items:baseline}
#odm .list-line>div>.en{flex:none}
/* OUR OFFER 2단 */
.offer-2{gap:56px}
.offer-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:26px}
.num-s{font-size:13px;color:var(--sub);flex:none}
.offer-en{font-size:13px;letter-spacing:.08em;color:var(--sub);margin-top:8px}
.offer-card .body-t{max-width:460px}
/* 카드 안 외부 링크 버튼 */
.card-btn{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:13px 26px}
.card-btn i{font-style:normal;transition:transform .4s var(--ease)}
.card-btn:hover i{transform:translateX(5px)}

/* 펼침 블록 맨 아래 링크 */
.block-cta{margin-top:64px;display:flex;justify-content:flex-end}
@media (max-width:860px){.block-cta{margin-top:44px;justify-content:flex-start}}
/* 사진 아래쪽(로고·문구)이 잘리지 않도록 아래를 기준으로 맞추고 확대 연출을 끕니다 */
.ph-low img{object-position:50% 88%;transform:none!important}
/* 브랜드 성과 목록 */
.fact{list-style:none;display:grid;gap:22px;max-width:460px}
.fact li{display:grid;gap:7px}
.fact strong{font-weight:500;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.fact span{font-size:13.5px;line-height:1.7;color:var(--sub)}
@media (max-width:640px){.fact{gap:18px;max-width:none}.fact strong{font-size:15px}}

.half{width:50%;padding-right:60px}
.third{width:33.333%}

/* ---------- 더보기(More) 펼침 블록 ---------- */
.more{margin-top:72px}
.more-sum{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:20px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);
  transition:border-color .35s}
.more-sum::-webkit-details-marker{display:none}
.more-sum::marker{content:''}
.more-sum:hover{border-bottom-color:var(--accent)}
.more-sum .lbl{margin:0}
.more-cta{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.16em;
  color:var(--sub);white-space:nowrap;transition:color .3s}
.more-cta::before{content:'MORE'}
.more[open] .more-cta::before{content:'CLOSE'}
.more-sum:hover .more-cta{color:var(--ink)}
.more-cta i{width:30px;height:30px;flex:none;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-size:13px;line-height:1;
  transition:transform .4s var(--ease),background-color .3s,color .3s,border-color .3s}
.more-sum:hover .more-cta i{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.more[open] .more-cta i{transform:rotate(180deg)}
.more-body{padding-top:44px;animation:moreIn .55s var(--ease) both}
.more-body>:first-child{margin-top:0!important}
@keyframes moreIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .more{margin-top:52px}
  .more-sum{gap:14px;padding:16px 0}
  .more-cta{font-size:0;gap:0}
  .more-cta::before{display:none}
  .more-body{padding-top:32px}
}
@media (prefers-reduced-motion:reduce){.more-body{animation:none}}

/* ---------- 문의 폼 상태 메시지 / 스팸 방지 ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{display:none;width:100%;margin:0;font-size:15px;line-height:1.6;color:var(--body)}
.form-msg.on{display:block;animation:moreIn .45s var(--ease) both}
.form-msg.err{color:#B4241F}
.form.sending{opacity:.55;pointer-events:none}

/* ---------- 인사이트(중간 배너) ---------- */
.insight{display:flex;gap:48px;background:var(--beige);padding:56px;align-items:flex-start}
.insight .tabs{width:260px;flex:none}
.insight .tab{display:flex;gap:14px;align-items:center;padding:20px 0;border-top:1px solid var(--line);
  color:var(--sub);font-weight:300;font-size:18px;width:100%;text-align:left;transition:color .35s,padding-left .35s var(--ease)}
.insight .tab:hover{padding-left:8px;color:var(--ink)}
.insight .tab.on{color:var(--ink);font-weight:400;border-top-color:var(--line-2)}
.insight .tab span{font-family:'Poppins',sans-serif;font-size:12px;letter-spacing:.1em}
.insight .panel-wrap{flex:1;min-width:0;padding-left:48px;border-left:1px solid var(--line);display:grid}
.insight .panel{grid-area:1/1;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.insight .panel.on{opacity:1;transform:none;pointer-events:auto}

/* ---------- 폼 ---------- */
.form{display:flex;flex-wrap:wrap;gap:60px 80px;margin-top:120px}
.field{width:calc(50% - 40px)}
.field.full{width:100%}
.field label{font-family:'Poppins',sans-serif;font-size:12px;letter-spacing:.12em;color:var(--sub);display:block}
.field input,.field textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:none;
  padding:18px 0;font-size:16px;font-weight:300;font-family:inherit;transition:border-color .35s}
.field textarea{resize:vertical;min-height:90px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.agree{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:300;color:var(--body)}

/* ---------- 푸터 ---------- */
.ftr{background:var(--beige);padding:72px var(--pad) 56px;position:relative;overflow:hidden}
.ftr .deco{position:absolute;right:-120px;top:-60px;width:420px;height:420px;border:1px solid var(--line);border-radius:50%}
.ftr-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;gap:40px;flex-wrap:wrap}
.ftr-menu{display:flex;gap:26px;font-size:13px;letter-spacing:.08em;color:var(--body);flex-wrap:wrap;justify-content:flex-end}
.sns{display:flex;gap:14px;justify-content:flex-end}
.sns a{width:36px;height:36px;border:1px solid var(--line-2);border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;letter-spacing:.04em;color:var(--body);transition:background-color .35s,color .35s}
.sns a:hover{background:var(--accent-strong);color:var(--bg);border-color:var(--accent-strong)}
.ftr-bottom{display:flex;justify-content:space-between;font-size:13px;color:var(--sub);flex-wrap:wrap;gap:16px}

/* ---------- 스크롤 등장 ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* 맨 위로 */
.top-btn{position:fixed;right:40px;bottom:40px;width:52px;height:52px;border:1px solid var(--line-2);
  border-radius:50%;background:rgba(var(--scrim),.9);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .4s,background-color .35s,color .35s;z-index:90}
.top-btn.on{opacity:1;pointer-events:auto}
.top-btn:hover{background:var(--accent-strong);color:var(--bg);border-color:var(--accent-strong)}

/* ===================== 반응형 ===================== */
@media (max-width:1440px){
  :root{--pad:72px}
  .h1{font-size:72px}.h2{font-size:54px}
}
@media (max-width:1180px){
  .sect{padding:88px 0}
  .split{flex-direction:column;align-items:flex-start;gap:36px;margin-bottom:56px}
  .col-r{width:100%;padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:32px}
  .hero{height:auto;min-height:0;padding:150px 0 90px}
  .hero-inner{flex-direction:column;align-items:flex-start;gap:40px;height:auto}
  .hero .col-r{width:100%}
  .slides{width:100%;min-height:200px}
  .hero-bottom{position:static;margin-top:76px;padding:0 var(--pad)}
  .hero .deco{width:460px;height:460px;right:-90px;top:30px;opacity:.75}
  .split .left,.split>div{min-width:0!important;width:100%}
  .cols{flex-wrap:wrap}
  .cols>*{flex:1 1 calc(50% - 20px)}
  .offer-2{gap:40px}
  .offer-2>*{flex:1 1 calc(50% - 20px)}
  .half,.third{width:100%;padding-right:0}
  .insight{flex-direction:column;gap:48px;padding:64px}
  .insight .tabs{width:100%}
  .insight .panel-wrap{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:40px;width:100%}
}
@media (max-width:860px){
  :root{--pad:28px}
  .gnb,.hdr .btn-line{display:none}
  .burger{display:flex}
  .m-menu{display:block}
  .hdr{height:72px}.hdr.scrolled{height:64px}
  .hero{padding:120px 0 72px}
  .hero .deco{width:360px;height:360px;right:-120px;top:60px;opacity:.7}
  .h1{font-size:44px}.h2{font-size:36px}.h3{font-size:24px}.kr-h{font-size:21px}
  .sect{padding:64px 0}
  .cols{flex-direction:column;gap:32px}
  .cols>*{flex:1 1 100%}
  .offer-2{gap:44px}
  .offer-card .body-t{max-width:none}
  .row{flex-wrap:wrap;gap:16px;padding:24px 0}
  .num{width:auto}
  .field,.field.full{width:100%}
  .form{gap:36px;margin-top:64px}
  .ftr-menu,.sns{justify-content:flex-start}
  .top-btn{right:20px;bottom:20px}
}
@media print{.hdr,.top-btn,.m-menu{display:none}.reveal{opacity:1;transform:none}}

/* ---------- 로고 ---------- */
.logo-img{height:34px;width:auto;display:block}
@media (max-width:860px){.logo-img{height:26px}}

/* ---------- 인증 ---------- */
.certs figure{flex:1;margin:0}
.certs .ph.cert{height:520px;background:var(--beige);display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line)}
.certs .ph.cert img{width:100%;height:100%;object-fit:contain;padding:28px;background:var(--bg)}
.certs figcaption{margin-top:20px;font-size:16px;font-weight:300;display:flex;flex-direction:column;gap:6px}
.certs figcaption span{font-size:13px;color:var(--sub)}
@media (max-width:860px){.certs .ph.cert{height:420px}}

/* ---------- 좁은 화면 보정 ---------- */
@media (max-width:1180px){
  .hero-inner{align-items:flex-start}
  .row>[style*="width:520px"],.row>[style*="width:420px"]{width:auto!important;min-width:0}
}
@media (max-width:700px){
  .hero-bottom .inner{flex-direction:column;align-items:flex-start;gap:16px}
  .pager{flex-wrap:wrap;gap:10px}
  .pager button{width:34px}
  .insight .tab{font-size:16px}
}
@media (max-width:480px){
  .h1{font-size:38px}.h2{font-size:32px}
  .pager button{width:26px}
  .insight{padding:48px 24px}
  .certs .ph.cert{height:340px}
  .certs .ph.cert img{padding:14px}
  .hero{padding-top:120px}
}
/* 텍스트가 상자를 넘지 않도록 */
.body-t,.kr-h,.h1,.h2,.h3,.lbl{overflow-wrap:break-word;word-break:keep-all}
.row>*{min-width:0}

@media (max-width:360px){
  :root{--pad:20px}
  .insight{padding:36px 18px}
  .h1{font-size:34px}.h2{font-size:29px}
}
.insight .panel-wrap,.insight .tabs{min-width:0}
/* 제목 단의 최소 폭(위 .split .left 규칙)을 유지합니다 */
@media (min-width:1181px){.split .left{min-width:min(440px,42%)}}
/* 겹침 쌓기 영역은 컬럼 폭을 컨테이너에 고정 (좁은 화면 넘침 방지) */
.slides,.hero-txt,.insight .panel-wrap{grid-template-columns:minmax(0,1fr)}
.slide,.hero-txt .body-t,.insight .panel{min-width:0}

/* =========================================================
   스크롤 연출 (effects.js 와 함께 동작)
   ========================================================= */
/* 상단 진행 바 */
.fx-progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);
  transform-origin:left;z-index:120;opacity:.85}

/* 이미지: 확대 → 원래 크기 + 시차 */
.ph img{transform:scale(var(--s,1)) translateY(var(--py,0px));transition:transform .15s linear,opacity .6s ease}
.ph:hover img{transform:scale(calc(var(--s,1) + .04)) translateY(var(--py,0px));transition:transform .9s var(--ease)}

/* 가로선 그리기 */
.fx-line{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.fx-line.in{transform:scaleX(1)}
.fx-row{border-top-color:transparent!important;position:relative}
.fx-row::after{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--line);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.fx-row.in::after{transform:scaleX(1)}

/* 세로선 그리기 */
.fx-vline{border-left-color:transparent!important;position:relative}
.fx-vline::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--line);
  transform:scaleY(0);transform-origin:top;transition:transform 1.2s var(--ease)}
.fx-vline.in::after{transform:scaleY(1)}
@media (max-width:1180px){
  .col-r.fx-vline{border-top-color:transparent!important}
  .col-r.fx-vline::after,.insight .panel-wrap.fx-vline::after{width:100%;height:1px;
    transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
  .col-r.fx-vline.in::after,.insight .panel-wrap.fx-vline.in::after{transform:scaleX(1)}
}

/* 제목 와이프 등장 (아래에서 밀려 올라옴) */
/* overflow:hidden 로 g·y 같은 글자의 아래 획이 잘리지 않도록 여유를 둡니다 */
.fx-wipe{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.fx-wipe-in{display:block;transform:translateY(106%);transition:transform 1.1s var(--ease)}
.fx-wipe.in .fx-wipe-in{transform:none}

/* 배경 도형 */
.sect{position:relative;overflow:hidden}
.fx-art{position:absolute;right:-120px;top:14%;width:640px;height:640px;pointer-events:none;z-index:0;opacity:.75}
.fx-art svg{width:100%;height:100%;overflow:visible;transform-origin:50% 50%;
  animation:artSpin 120s linear infinite}
/* 섹션마다 다른 속도·방향으로 천천히 돌고 숨 쉬듯 커졌다 작아집니다 */
.fx-a-beauty svg{animation:artSpin 150s linear infinite,artBreath 16s ease-in-out infinite alternate}
.fx-a-odm svg{animation:artSpinR 110s linear infinite}
.fx-a-software svg{animation:artSpin 180s linear infinite,artBreath 20s ease-in-out infinite alternate}
.fx-a-marketing svg{animation:artSpinR 140s linear infinite,artBreath 14s ease-in-out infinite alternate}
.fx-a-team svg{animation:artSpin 200s linear infinite}
.fx-a-video svg{animation:artSpinR 160s linear infinite,artBreath 18s ease-in-out infinite alternate}
.fx-a-design svg{animation:artSpin 130s linear infinite}
.fx-a-cert svg{animation:artSpinR 170s linear infinite,artBreath 15s ease-in-out infinite alternate}
@keyframes artSpin{from{rotate:0deg}to{rotate:360deg}}
@keyframes artSpinR{from{rotate:0deg}to{rotate:-360deg}}
@keyframes artBreath{from{scale:1}to{scale:1.07}}
/* 상단 배너 원형 오브제 */
.hero .deco{animation:decoFloat 22s ease-in-out infinite alternate}
@keyframes decoFloat{
  from{scale:1;translate:0 0}
  to{scale:1.07;translate:-22px 16px}
}
.fx-art svg *{fill:none;stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke}
#odm .fx-art,#team .fx-art,#design .fx-art{right:auto;left:-180px;top:30%;width:560px;height:560px}
#video .fx-art{top:6%;width:520px;height:520px}
.sect .wrap{position:relative;z-index:1}
@media (max-width:860px){.fx-art{width:360px;height:360px;right:-140px;opacity:.6}
  #odm .fx-art,#team .fx-art,#design .fx-art{left:-150px;width:340px;height:340px}}

/* 동작 줄이기 설정 시 전부 정지 */
.fx-off .fx-line,.fx-off .fx-wipe{transform:none;clip-path:none}
.fx-off .fx-row::after,.fx-off .fx-vline::after{transform:none}
@media (prefers-reduced-motion:reduce){
  .fx-line,.fx-wipe{transform:none!important;clip-path:none!important}
  .fx-art svg,.hero .deco{animation:none!important}
  .fx-row::after,.fx-vline::after{transform:none!important}
  .ph img{transform:none!important}
  .fx-progress{display:none}
}

/* 3단 목록 좌우 간격 (라벨이 옆 칸과 붙지 않도록) */
.third{padding-right:48px}
.third:last-child{padding-right:0}
#software .list-line>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
#software .list-line>div .en{float:none!important;flex:none}
@media (max-width:1180px){.third{padding-right:0}}

/* =========================================================
   히어로 비주얼 — 배너 배경 이미지 (텍스트 뒤에 깔림)
   ========================================================= */
.hero-visual{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:0;background:var(--beige)}
.hero-visual::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--scrim),.52) 0%,rgba(var(--scrim),.12) 20%,
      rgba(var(--scrim),0) 48%,rgba(var(--scrim),.1) 88%,rgba(var(--scrim),.24) 100%),
    linear-gradient(100deg,rgba(var(--scrim),.64) 0%,rgba(var(--scrim),.46) 38%,
      rgba(var(--scrim),.24) 66%,rgba(var(--scrim),.1) 100%)}
.hv{position:absolute;inset:0;margin:0;opacity:0;clip-path:inset(0 0 100% 0);
  transition:opacity 1.1s var(--ease),clip-path 1.2s var(--ease)}
.hv img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hv.on{opacity:1;clip-path:inset(0 0 0 0)}
.hv.on img{animation:kenburns 9s linear forwards}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.16)}}
.hero-inner{position:relative;z-index:2}
/* 글 영역 전체에 깔리는 흰색 반투명 판 */
.hero-panel{display:flex;gap:72px;align-items:flex-start;width:100%;
  background:rgba(var(--scrim),.82);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  padding:56px 60px;border:1px solid rgba(var(--scrim),.6)}
.hero-bottom{z-index:2}
.hero .body-t{color:var(--body);text-shadow:none}
.hero .col-r{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:0 0 0 48px;border-left-color:rgba(var(--ink-rgb),.18)}
.hero .h1,.hero .lbl{text-shadow:none}
.scroll-hint,.pager{text-shadow:0 1px 2px rgba(var(--scrim),.7)}
.hero .deco{z-index:1;transform:translate(var(--dx,0px),var(--dy,0px));transition:transform 1.2s var(--ease)}
.hero-bottom .rule{background:rgba(var(--ink-rgb),.22)}

@media (max-width:1180px){
  .hero-visual::after{background:linear-gradient(180deg,rgba(var(--scrim),.72) 0%,rgba(var(--scrim),.58) 50%,
    rgba(var(--scrim),.34) 76%,rgba(var(--scrim),.2) 100%)}
  .hero .col-r{background:none;backdrop-filter:none;padding:28px 0 0;
    border-top-color:rgba(var(--ink-rgb),.18)}
  .hero-panel{flex-direction:column;gap:32px;padding:40px 32px}
}
@media (prefers-reduced-motion:reduce){
  .hv{transition:none;clip-path:none}
  .hv.on img{animation:none}
}

/* 중간 폭 헤더 정리: 메뉴 간격 축소 → 1040px 이하는 햄버거 메뉴 */
@media (max-width:1180px){
  .gnb{gap:20px;font-size:13px}
  .gnb a{white-space:nowrap}
  .btn-line{padding:9px 16px;font-size:12px;white-space:nowrap}
  .hdr-right{gap:18px}
  .logo-img{height:30px}
}
@media (max-width:1040px){
  .gnb,.hdr-right .btn-line{display:none}
  .burger{display:flex}
  .m-menu{display:block}
}

.hero .col-r>p:last-of-type{margin-bottom:10px}

/* 배경 이미지를 밝게 둔 만큼 하단 표시만 또렷하게 */
.hero .scroll-hint{color:var(--ink)}
.hero .pager span{color:var(--ink)}
.hero .pager span:last-child{color:var(--sub)}
.hero-bottom .rule{background:rgba(var(--ink-rgb),.3)}

/* 테마 강조색이 드러나는 지점 */
.insight .tab.on span{color:var(--accent)}
.insight{background:var(--beige-2)}
.sect .lbl::after{content:"";display:inline-block;width:22px;height:1px;background:var(--accent);
  vertical-align:middle;margin-left:12px;opacity:.9}
.link i{color:var(--accent)}
.fx-art svg *{stroke:var(--line-2)}
.step .top{color:var(--accent)}

/* =========================================================
   ODM · OEM 진행 프로세스 도표
   ========================================================= */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.flow-cell{position:relative;background:var(--bg);padding:40px 36px 44px;min-height:210px;
  display:flex;flex-direction:column;gap:14px;transition:background-color .45s var(--ease)}
.flow-cell:hover{background:var(--beige-3)}
.flow-no{font-size:12px;letter-spacing:.16em;color:var(--accent);font-weight:500}
.flow-title{font-size:24px;font-weight:300;letter-spacing:-.01em;line-height:1.35}
.flow-desc{font-size:15px;font-weight:300;line-height:1.8;color:var(--body)}
/* 진행 방향 화살표 */
.flow-cell::after{content:"";position:absolute;right:-7px;top:50%;width:13px;height:13px;
  border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);
  transform:translateY(-50%) rotate(45deg);background:var(--bg);z-index:2}
.flow-cell:nth-child(3n)::after,.flow-cell.is-last::after{display:none}
.flow-cell.is-last{background:var(--beige-2)}
.flow-cell.is-last .flow-no{color:var(--accent-strong)}
@media (max-width:1024px){
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow-cell::after{display:none}
  .flow-cell:nth-child(3n)::after{display:none}
  .flow-cell:nth-child(2n)::after{display:none}
}
@media (max-width:640px){
  .flow{grid-template-columns:1fr}
  .flow-cell{min-height:0;padding:30px 24px 32px}
}

@media (max-width:480px){.hero-panel{padding:28px 20px;gap:24px}}

/* =========================================================
   인사이트 패널 이미지
   ========================================================= */
.insight .panel{display:flex;gap:40px;align-items:flex-start}
.panel-text{flex:1;min-width:0}
.panel-img{width:clamp(220px,22vw,320px);flex:none;aspect-ratio:4/3;background:var(--beige-3)}
.panel-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:1180px){
  .insight .panel{flex-direction:column;gap:32px}
  .panel-img{width:100%;aspect-ratio:16/7}
}

/* =========================================================
   마케팅 전략 도표
   ========================================================= */
.grid-table{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cell{background:var(--bg);padding:36px 32px 40px;display:flex;flex-direction:column;gap:12px;
  transition:background-color .45s var(--ease)}
.cell:hover{background:var(--beige-3)}
.cell-top{display:flex;justify-content:space-between;align-items:center;color:var(--accent);margin-bottom:6px}
.cell-no{font-size:13px;letter-spacing:.14em;font-weight:500}
.cell-ic{display:block;flex:none}
.cell-title{font-size:23px;font-weight:300;letter-spacing:-.01em;line-height:1.35}
.cell-en{font-size:13px;letter-spacing:.06em;color:var(--sub)}
.cell-list{list-style:none;margin-top:12px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px}
.cell-list li{font-size:15px;font-weight:300;color:var(--body);line-height:1.6;padding-left:14px;position:relative}
.cell-list li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:1px;background:var(--accent)}
@media (max-width:1024px){.grid-table{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-table{grid-template-columns:1fr}.cell{padding:28px 24px 32px}}

.insight .panel .h2{font-size:clamp(32px,3vw,46px)}
.insight .panel .body-t{font-size:15px}
@media (max-width:1180px){.insight{padding:48px 40px;gap:36px}}

/* =========================================================
   브랜드 필름 (롤링 배너 아래 영상 밴드)
   ========================================================= */
.film{position:relative;height:clamp(360px,62vh,660px);overflow:hidden;background:var(--beige-2)}
.film-video{width:100%;height:100%;object-fit:cover;display:block}
.film::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.18) 0%,rgba(var(--ink-rgb),0) 35%,
    rgba(var(--ink-rgb),0) 55%,rgba(var(--ink-rgb),.42) 100%)}
.film-cap{position:absolute;left:var(--pad);bottom:48px;z-index:2;color:#fff}
.film-cap .lbl{display:block;color:#fff;opacity:.85;margin-bottom:14px}
.film-line{font-size:clamp(20px,2vw,30px);font-weight:300;letter-spacing:-.01em;line-height:1.45;
  text-shadow:0 1px 14px rgba(0,0,0,.35)}
.film-btn{position:absolute;right:var(--pad);bottom:48px;z-index:2;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);backdrop-filter:blur(6px);transition:background-color .35s}
.film-btn:hover{background:rgba(255,255,255,.26)}
.film-ic{display:block;position:relative;width:14px;height:14px}
.film-pause::before,.film-pause::after{content:"";position:absolute;top:0;width:3px;height:14px;background:#fff}
.film-pause::before{left:2px}.film-pause::after{right:2px}
.film-play::before{content:"";position:absolute;left:4px;top:0;border-left:11px solid #fff;
  border-top:7px solid transparent;border-bottom:7px solid transparent}
@media (max-width:860px){
  .film{height:clamp(260px,46vh,420px)}
  .film-cap{bottom:28px}.film-btn{bottom:28px;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.film-video{display:none}
  .film{background:var(--beige-2) center/cover no-repeat}}
@media (max-width:860px){
  .film-cap{right:calc(var(--pad) + 56px);max-width:none}
  .film-line{font-size:17px;line-height:1.5}
}