/* ============================================================
   hexa-spa.css — Bexon 디자인 오버레이
   원본 IA/구조(페이지 전환 SPA)는 그대로 두고, 원본 인라인 <style>
   '뒤'에서 변수와 컴포넌트를 Bexon 디자인 언어로 재정의한다.
   - 라이트 코퍼레이트: 화이트/옅은 그레이 + 단일 틸 액센트 + 딥 네이비
   - eyebrow 점선 라벨 · sec-title weight 500 · 알약 버튼 · 라운드 카드
   - Pretendard(한/영 본문·제목) · DM Mono(라벨)
   ============================================================ */

/* ---------- 1. 토큰 리맵 (원본 변수명을 Bexon 값으로) ---------- */
:root{
  --blue:#0c1e21;       /* 딥 네이비(헤딩·다크 섹션·히어로) */
  --blue-deep:#06151a;
  --teal:#1e8a8a;       /* 단일 액센트 */
  --teal-deep:#15706e;
  --amber:#1e8a8a;      /* 보조 강조도 단일 틸로 통일 */
  --paper:#ffffff;
  --paper-2:#f1f5f5;    /* 옅은 그레이 교차 섹션 */
  --ink:#0c1e21;
  --muted:#5f7175;
  --line:rgba(12,30,33,.12);
  --line-soft:rgba(12,30,33,.07);
  --serif:'Pretendard','Apple SD Gothic Neo',sans-serif;
  --sans:'Pretendard','Apple SD Gothic Neo',sans-serif;
  --mono:'DM Mono',monospace;
}

body{ background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:clip; word-break:keep-all; overflow-wrap:break-word; }
/* 한국어 줄바꿈: 단어(어절) 중간에서 끊기지 않도록 */
h1,h2,h3,h4,h5,h6,p,span,div,li,td,th,a,button,.shead h2,.h8-hero-title,.statement,.lead,.lead2{ word-break:keep-all; }
/* overflow-x:hidden 이 body를 스크롤 컨테이너로 만드는 것 방지(window 스크롤 복원) */
html{ overflow-x:hidden; }

/* ---------- 2. eyebrow (Bexon sub-title 점선 라벨) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--teal); font-weight:500;
  border:1px dashed rgba(30,138,138,.45); border-radius:4px;
  padding:6px 12px 6px 11px; line-height:1;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--teal); transform:rotate(45deg); display:inline-block; }
.dark .eyebrow, .hero .eyebrow, .pagehero .eyebrow{
  color:#fff; border-color:rgba(255,255,255,.35);
}
.dark .eyebrow::before, .hero .eyebrow::before, .pagehero .eyebrow::before{ background:var(--teal); }
.shead .num, .bsub{ /* 번호형 라벨도 동일 톤 */ color:var(--teal); }

/* ---------- 3. 타이포 (Pretendard·타이트 자간) ---------- */
.serif{ font-family:var(--sans)!important; }
.shead h2, .statement, .pagehero h1, .hero h1, .ct-h, .vmote h3,
.ceo-body .big, .pullquote .q, .biz-card h3{
  font-family:var(--sans); letter-spacing:-.025em; font-weight:600;
}
.hero h1{ font-weight:500; }
.hero h1 b, .shead h2 b{ font-weight:700; }
.hero .en{ font-family:var(--sans); font-style:normal; letter-spacing:.18em; text-transform:uppercase; font-size:14px; color:var(--teal); }

/* ---------- 4. 버튼 (알약 + 호버 리프트) ---------- */
.btn{ border-radius:50px; font-weight:600; padding:15px 30px; transition:.32s cubic-bezier(.2,.7,.2,1); }
.btn-amber{ background:var(--teal); color:#fff; }
.btn-amber:hover{ background:var(--teal-deep); transform:translateY(-3px); box-shadow:0 16px 30px -14px rgba(30,138,138,.6); }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:#0f3a3d; transform:translateY(-3px); }
.btn-ghost{ border-color:rgba(255,255,255,.45); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.prameno-btn{ border-radius:50px; border-color:var(--teal); color:var(--teal); font-family:var(--mono); }
.prameno-btn:hover{ background:var(--teal); color:#fff; }

/* ---------- 5. 헤더 ---------- */
header{ border-bottom:1px solid var(--line-soft); }
/* 클릭 가능한 메뉴 요소 손가락 커서 */
.gnb-link, .dropdown a, .dropdown a *, .mobile-menu a, .mobile-menu .mm-grp>span, .logo, .prameno-btn, .lang button{ cursor:pointer; }
.logo .mark{ font-family:var(--sans); font-weight:800; letter-spacing:.01em; color:var(--blue); font-size:23px; }
.logo .mark .accent, .logo .mark em{ color:var(--teal); font-style:normal; }
.gnb-link{ font-weight:600; }
.gnb-link:hover{ color:var(--teal); }
.dropdown{ border-radius:12px; border-color:var(--line-soft); }
.dropdown a:hover{ background:var(--paper-2); color:var(--teal); }
.dropdown a .ext{ color:var(--teal); }
.lang{ border-radius:50px; border-color:var(--line); }
.lang button.on{ background:var(--teal); }

/* ---------- 6. 히어로 / 페이지히어로 (틸-다크 그라데이션) ---------- */
.hero{ background:linear-gradient(150deg,#0c1e21 0%,#103a3d 58%,#15706e 100%); }
.pagehero{ background:linear-gradient(150deg,#0c1e21 0%,#0f3539 60%,#155f5f 100%); }
.hero .blob.b1{ background:radial-gradient(circle,#1e8a8a,transparent 70%); }
.hero .blob.b2{ background:radial-gradient(circle,#0c4a4d,transparent 70%); }
.pagehero h1{ font-weight:600; }
.pagehero .ph-num{ font-family:var(--mono); color:rgba(255,255,255,.5); }

/* ---------- 7. 섹션 / 헤딩 ---------- */
.blk.alt{ background:var(--paper-2); }
.blk.dark{ background:var(--blue); }
.blk.dark.deep, .pullquote{ background:var(--blue-deep); }
.shead h2{ font-weight:600; }
.shead .num{ font-family:var(--mono); letter-spacing:.1em; }

/* ---------- 8. 카드류 (라운드 12px·보더·호버 리프트) ---------- */
.biz-card,.panel,.val,.kp,.bitem,.ci-card,.gcard,.metric,.map-mock,.ct-form-card,.cinfo,.story-text,.vmote{
  border-radius:12px;
}
.biz-card,.val,.kp,.bitem,.ci-card{
  border:1px solid var(--line-soft);
  box-shadow:0 18px 40px -34px rgba(12,30,33,.4);
  transition:.32s cubic-bezier(.2,.7,.2,1);
}
.biz-card:hover,.val:hover,.kp:hover,.bitem:hover,.ci-card:hover{
  transform:translateY(-5px); border-color:var(--teal);
  box-shadow:0 30px 56px -34px rgba(30,138,138,.4);
}
.biz-card.feat{ background:linear-gradient(135deg,#0c1e21,#10474a); border:none; }
.biz-card .ci,.kp .kn,.val .vn,.bitem .bi-n,.ci-lab{ color:var(--teal); }
.biz-card.feat .ci{ color:#fff; opacity:.85; }
.biz-card .go,.biz-card.feat .go{ color:var(--teal); font-family:var(--mono); }
.biz-card.feat .go{ color:#fff; }

/* 아이콘 타일(연락처 등) */
.ci-ico{ background:var(--teal); border-radius:12px; }

/* ---------- 9. 지표(metrics) ---------- */
.metrics{ border-radius:16px; border-color:var(--line); background:var(--line-soft); }
.metric{ background:var(--paper); }
.metric .v{ font-family:var(--sans); font-weight:700; color:var(--blue); letter-spacing:-.02em; }
.metric .l{ color:var(--ink); font-weight:600; }
.blk.alt .metric{ background:var(--paper); }

/* ---------- 10. 서브내비 탭 ---------- */
.subnav{ background:rgba(255,255,255,.92); border-bottom:1px solid var(--line-soft); }
.subnav button{ font-weight:600; border-radius:50px; }
.subnav button.on{ background:var(--teal); color:#fff; }

/* ---------- 11. CEO / 표 / 타임라인 ---------- */
.ceo-photo{ background:linear-gradient(160deg,#0c1e21,#1e8a8a); border-radius:16px; }
.ceo-body .big{ color:var(--teal); font-weight:600; }
.sign{ font-family:var(--sans); color:var(--blue); font-weight:600; text-align:right; }
.ovtable{ border-top-color:var(--teal); }
.ovtable th{ color:var(--blue); background:var(--paper-2); }
.tl::before{ background:linear-gradient(var(--teal),var(--teal-deep)); }
.tl-item::before{ border-color:var(--teal); }
.tl-item.hi::before{ border-color:var(--teal); background:var(--teal); }
.tl-yr,.tl-item.hi .tl-yr{ color:var(--teal); font-family:var(--mono); }

/* 스토리(연혁) */
.simg{ background:linear-gradient(150deg,#0c1e21,#10474a); border-radius:14px; }
.simg2{ background:linear-gradient(150deg,#1e8a8a,#0c1e21); }
.story-item.hi .simg{ background:linear-gradient(150deg,#103a3d,#06151a); }
.story-item.hi .simg2{ background:linear-gradient(150deg,#1e8a8a,#15706e); }
.story-yr{ font-family:var(--sans); color:var(--blue); font-weight:700; }
.story-num{ color:var(--teal); font-family:var(--mono); }
.story-item.hi .story-num{ color:var(--teal); }

/* ---------- 12. 경영이념 / 가치 ---------- */
.vmote{ background:var(--blue); border-radius:14px; }
.vmote .lab{ color:#fff; opacity:.7; font-family:var(--mono); }
.vmote h3{ font-family:var(--sans); font-weight:600; }
.val h4,.kp h4,.bitem h5{ font-weight:600; }

/* ---------- 13. 조직도 ---------- */
.org .box{ border-radius:50px; border-color:var(--line); font-weight:600; }
.org .ceo-box{ background:var(--blue); }
.org-head{ background:var(--teal); border-radius:12px 12px 0 0; }
.org-head.amber{ background:var(--blue); color:#fff; }
.org-sub{ border-color:var(--line-soft); border-radius:0 0 12px 12px; }

/* ---------- 14. 콜아웃 / 비즈 디테일 ---------- */
.callout{ background:linear-gradient(135deg,#0c1e21,#10474a); border-radius:14px; }
.callout .lab{ color:#fff; opacity:.75; font-family:var(--mono); }
.callout .q{ font-family:var(--sans); font-weight:600; }
.tag-amber{ border-radius:50px; color:var(--teal); border-color:var(--teal); font-family:var(--mono); }
.bsub{ font-family:var(--mono); color:var(--teal); }
.dark .bsub,.dark .kp .kn,.dark .bitem .bi-n{ color:#fff; opacity:.85; }

/* ---------- 15. 문의 (연락처/폼/지도) ---------- */
.ct-h{ font-family:var(--sans); color:var(--blue); font-weight:600; }
.ci-card{ box-shadow:0 22px 44px -34px rgba(12,30,33,.32); }
.field input,.field select,.field textarea{ border-radius:10px; background:var(--paper-2); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(30,138,138,.12); background:#fff; }
.field label .req{ color:var(--teal); }
.toast{ background:var(--teal); border-radius:10px; }
.map-mock{ background:linear-gradient(135deg,#dfeaea,#cdd9d9); border-radius:14px; }
.ct-map{ border-radius:0; }
.cinfo .row .k{ color:var(--teal); font-family:var(--mono); }

/* ---------- 16. 푸터 ---------- */
footer{ background:var(--blue-deep); }
.fbrand .mk{ font-family:var(--sans); font-weight:800; color:#fff; }
.fbrand .mk .accent{ color:var(--teal); }
.fbrand .sl{ font-family:var(--sans); font-style:normal; letter-spacing:.16em; text-transform:uppercase; font-size:12px; color:var(--teal); }
.fcol a:hover{ color:var(--teal); }
.partner-link:hover{ color:var(--teal)!important; }
.fbot a:hover{ color:#fff; }

/* ---------- 17. 모달 ---------- */
.modal-box{ border-radius:16px; }
.modal-box .lock{ color:var(--teal); font-family:var(--mono); }
.modal-box input{ border-radius:10px; font-family:var(--mono); }

/* ---------- 18. 마니페스토 / 풀쿼트 ---------- */
.statement{ color:var(--blue); font-weight:600; }
.mtext p .hl{ color:var(--teal); font-weight:600; }
.pullquote .q{ color:#fff; }
.pullquote .q .am{ color:var(--teal); }
.pullquote .by{ font-family:var(--mono); }

/* ---------- 19. 리빌 모션 ---------- */
.rv{ transition:.7s cubic-bezier(.2,.7,.2,1); }

/* ---------- 20. 모바일 메뉴 ---------- */
.mobile-menu .mm-grp>span{ color:var(--blue); }
.mobile-menu .mm-grp a:active{ color:var(--teal); }

/* ============================================================
   21. Bexon "Our History" 타임라인 (연혁 페이지에 그대로 이식)
   - 중앙 점선축 + 좌우 교차 카드 + 큰 연도 + 번호/제목/본문 + 비주얼 2장
   - 동적: .rv 스태거 페이드업(스크롤 진입 시)
   ============================================================ */
#about-history .timeline{ position:relative; width:100%; max-width:1000px; margin:8px auto 0; }
#about-history .timeline::after{ content:""; position:absolute; width:0; border-left:1px dashed var(--line); top:0; bottom:0; left:50%; margin-left:-1px; }
.timeline-inner{ position:relative; background:inherit; width:50%; margin-bottom:46px; }
.timeline-inner:last-child{ margin-bottom:0; }
.timeline-inner:nth-child(odd){ left:0; padding-right:90px; }
.timeline-inner:nth-child(even){ left:50%; padding-left:90px; }
.timeline-inner::after{ content:""; position:absolute; width:16px; height:16px; top:calc(50% - 8px); right:-8px; background:#fff; border:4px solid var(--teal); border-radius:50%; z-index:2; }
.timeline-inner:nth-child(even)::after{ left:-8px; right:auto; }
.timeline-inner.hi::after{ background:var(--teal); box-shadow:0 0 0 5px rgba(30,138,138,.16); }
.timeline-inner .date{ position:absolute; display:inline-block; top:calc(50% - 24px); font-family:var(--sans); font-size:46px; line-height:1; font-weight:800; color:var(--muted); letter-spacing:-.02em; z-index:1; }
.timeline-inner.hi .date{ color:var(--teal); }
.timeline-inner:nth-child(odd) .date{ right:-160px; text-align:left; }
.timeline-inner:nth-child(even) .date{ left:-160px; text-align:right; }
.timeline-inner .content{ padding:30px; background:#fff; border:1px solid var(--line-soft); border-radius:12px; box-shadow:0 22px 50px -36px rgba(12,30,33,.4); position:relative; transition:.32s cubic-bezier(.2,.7,.2,1); }
.timeline-inner .content:hover{ transform:translateY(-4px); border-color:var(--teal); box-shadow:0 34px 60px -36px rgba(30,138,138,.35); }
.timeline-inner .content .top{ padding-left:44px; position:relative; }
.timeline-inner .content .top span{ position:absolute; top:1px; left:0; font-family:var(--mono); font-size:20px; line-height:1.1; font-weight:500; color:var(--teal); }
.timeline-inner .content .top .title{ font-size:20px; font-weight:600; color:var(--ink); margin-bottom:12px; letter-spacing:-.01em; }
.timeline-inner .content .top p{ margin:0; font-size:14.5px; color:var(--muted); font-weight:300; line-height:1.72; }
.timeline-inner .content .bottom{ margin-top:24px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.hx-tl-img{ border-radius:10px; aspect-ratio:4/3; display:flex; align-items:flex-end; padding:14px; position:relative; overflow:hidden; background:linear-gradient(150deg,#0c1e21,#15706e); }
.hx-tl-img.alt{ background:linear-gradient(150deg,#13343a,#1e8a8a); }
.hx-tl-img::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 78% 10%,rgba(255,255,255,.16),transparent 60%); }
.timeline-inner.hi .hx-tl-img{ background:linear-gradient(150deg,#0f3a3d,#06151a); }
.timeline-inner.hi .hx-tl-img.alt{ background:linear-gradient(150deg,#1e8a8a,#15706e); }
.hx-tl-img span{ position:relative; z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.92); }
@media(max-width:767px){
  #about-history .timeline{ display:flex; flex-direction:column; gap:8px; padding-top:6px; }
  #about-history .timeline::after{ left:9px; }
  .timeline-inner{ width:100%!important; left:0!important; padding:0 0 0 38px!important; margin-bottom:40px; }
  .timeline-inner::after{ left:1px!important; right:auto!important; top:4px; }
  .timeline-inner .date{ position:static!important; display:block; font-size:28px; margin-bottom:12px; text-align:left!important; left:auto!important; right:auto!important; }
}

/* ============================================================
   22. Bexon "Contact Us" 디자인 (크고 시원하게 · Bexon 아이콘)
   - 상단 4개 아이콘 카드(88px 원형) + 하단 밑줄 입력 폼 / 지도
   ============================================================ */
#page-contact .hx-contact-area{ padding-top:96px; }
#page-contact .hx-sec-head{ text-align:center; max-width:620px; margin:0 auto 60px; }
#page-contact .hx-sec-head .eyebrow{ margin-bottom:18px; }
#page-contact .hx-sec-head h2{ font-family:var(--sans); font-size:clamp(30px,4vw,46px); font-weight:600; color:var(--blue); letter-spacing:-.025em; line-height:1.18; }

.hx-ci-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.contact-item.style-2{ padding:42px 28px 46px; background:#fff; text-align:center; border-radius:12px; border:1px solid var(--line-soft); box-shadow:0 24px 50px -38px rgba(12,30,33,.34); transition:.34s cubic-bezier(.2,.7,.2,1); }
.contact-item.style-2:hover{ transform:translateY(-8px); box-shadow:0 36px 64px -38px rgba(30,138,138,.4); }
.contact-item.style-2 .contact-icon{ width:88px; height:88px; display:inline-flex; align-items:center; justify-content:center; background:#e6f1f1; border-radius:50%; margin-bottom:26px; transition:.32s ease; }
.contact-item.style-2:hover .contact-icon{ background:var(--teal); transform:translateY(-2px); }
.contact-item.style-2 .contact-icon i{ font-size:36px; color:var(--teal); transition:.32s ease; line-height:1; }
.contact-item.style-2:hover .contact-icon i{ color:#fff; }
.contact-item.style-2 .contact-title{ font-size:23px; font-weight:600; color:var(--ink); margin-bottom:16px; letter-spacing:-.01em; }
.contact-item.style-2 p{ font-size:15px; color:var(--muted); line-height:1.7; max-width:230px; margin:0 auto; font-weight:300; }
.contact-item.style-2 .contact-list{ list-style:none; padding:0; margin:0; }
.contact-item.style-2 .contact-list li{ margin:2px 0; }
.contact-item.style-2 .contact-list li a{ font-size:15.5px; color:var(--body); transition:.2s; }
.contact-item.style-2 .contact-list li a:hover{ color:var(--teal); }

#page-contact .hx-contact-form-sec{ padding:104px 0; }
.hx-contact-grid2{ display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:stretch; }
.contact-form{ background:#fff; padding:58px 52px; border-radius:12px; border:1px solid var(--line-soft); box-shadow:0 34px 64px -44px rgba(12,30,33,.32); }
.contact-form .title{ font-family:var(--sans); font-size:clamp(24px,2.7vw,33px); font-weight:600; color:var(--blue); line-height:1.3; margin-bottom:36px; letter-spacing:-.02em; }
.contact-form .hx-form-row2{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.contact-form .form-input{ margin-bottom:28px; position:relative; }
.contact-form .form-input input,
.contact-form .form-input select,
.contact-form .form-input textarea{ width:100%; background:transparent; color:var(--ink); font-family:var(--sans); font-size:16px; padding:13px 0; border:0; border-bottom:1px dashed rgba(12,30,33,.26); transition:.3s; }
.contact-form .form-input input::placeholder,
.contact-form .form-input textarea::placeholder{ color:var(--muted); }
.contact-form .form-input select{ color:var(--muted); -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; padding-right:24px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%231e8a8a' stroke-width='1.6' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 2px center; }
.contact-form .form-input select.filled{ color:var(--ink); }
.contact-form .form-input input:focus,
.contact-form .form-input select:focus,
.contact-form .form-input textarea:focus{ outline:none; border-bottom-color:var(--teal); border-bottom-style:solid; color:var(--ink); }
.contact-form .form-input.message-input textarea{ min-height:120px; resize:vertical; }
.contact-form .consent{ margin:6px 0 26px; }
.contact-form .submit-btn{ margin-top:4px; }
.contact-form .toast{ margin-bottom:22px; }
#page-contact .map-area{ width:100%; border-radius:12px; overflow:hidden; min-height:440px; box-shadow:0 34px 64px -44px rgba(12,30,33,.3); }
#page-contact .map-area iframe{ width:100%; height:100%; min-height:440px; border:0; display:block; filter:grayscale(.22) contrast(.96); }

@media(max-width:991px){
  .hx-ci-grid{ grid-template-columns:1fr 1fr; }
  .hx-contact-grid2{ grid-template-columns:1fr; }
  #page-contact .map-area, #page-contact .map-area iframe{ min-height:340px; }
}
@media(max-width:575px){
  .hx-ci-grid{ grid-template-columns:1fr; }
  .contact-form{ padding:34px 24px; }
  .contact-form .hx-form-row2{ grid-template-columns:1fr; gap:0; }
  #page-contact .hx-contact-form-sec{ padding:64px 0; }
}

/* ============================================================
   23. Bexon Service 카드 (style-1) — 사업영역 개요
   - 이미지 카드 + 아이콘 → 호버 시 설명·자세히 슬라이드업 (순수 CSS 동적)
   ============================================================ */
.hx-srv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.service-item.style-1{ position:relative; overflow:hidden; height:440px; border-radius:14px; background:var(--blue); cursor:pointer; }
.service-item.style-1 .service-img{ position:absolute; inset:0; }
.service-item.style-1 .hx-srv-bg{ width:100%; height:100%; transform:scale(1.02); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.service-item.style-1:hover .hx-srv-bg{ transform:scale(1.1); }
.hx-srv-1{ background:url('../images/service/global-trading.webp') center/cover no-repeat; }
.hx-srv-2{ background:url('../images/service/material-export.webp') center/cover no-repeat; }
.hx-srv-3{ background:url('../images/service/cosmetics-business.webp') center/cover no-repeat; }
.service-item.style-1::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,17,20,.82) 0%,rgba(6,17,20,.28) 55%,rgba(6,17,20,.12) 100%); z-index:2; transition:.3s; }
.service-item.style-1:hover::before{ background:linear-gradient(to top,rgba(6,17,20,.9) 0%,rgba(6,17,20,.5) 70%,rgba(6,17,20,.3) 100%); }
.service-item.style-1 .service-icon{ position:absolute; top:30px; left:30px; z-index:3; width:64px; height:64px; border-radius:14px; background:rgba(255,255,255,.14); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; transition:.35s ease; }
.service-item.style-1 .service-icon i{ font-size:30px; color:#fff; line-height:1; }
.service-item.style-1:hover .service-icon{ transform:scale(0); opacity:0; }
.service-item.style-1 .service-content{ position:absolute; left:0; bottom:0; width:100%; padding:34px 30px 30px; z-index:3; transition:.3s; }
.service-item.style-1 .hx-srv-no{ display:inline-block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--teal); margin-bottom:12px; }
.service-item.style-1 .hx-srv-no-am{ color:#ffd34d; }
.service-item.style-1 .service-content .title{ font-size:22px; font-weight:600; margin:0 0 0; letter-spacing:-.01em; line-height:1.25; }
.service-item.style-1 .service-content .title a{ color:#fff; }
.service-item.style-1 .service-content .title a:hover{ color:var(--teal); }
.service-item.style-1 .desc{ color:rgba(255,255,255,.8); font-size:14.5px; font-weight:300; line-height:1.65; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease,opacity .4s ease,margin .4s ease; margin-top:0; }
.service-item.style-1:hover .desc{ max-height:170px; opacity:1; margin-top:14px; }
.service-item.style-1 .text-btn{ display:inline-flex; align-items:center; gap:10px; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease,opacity .4s ease,margin .4s ease; }
.service-item.style-1:hover .text-btn{ max-height:48px; opacity:1; margin-top:18px; }
.service-item.style-1 .text-btn .btn-text span{ color:#fff; font-family:var(--mono); font-size:13px; letter-spacing:.05em; }
.service-item.style-1 .text-btn .btn-icon{ width:34px; height:34px; border-radius:50%; background:var(--teal); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; transition:.3s; }
.service-item.style-1:hover .text-btn .btn-icon{ transform:rotate(-45deg); }
@media(hover:none){
  .service-item.style-1 .desc{ max-height:170px; opacity:1; margin-top:14px; }
  .service-item.style-1 .text-btn{ max-height:48px; opacity:1; margin-top:16px; }
  .service-item.style-1 .service-icon{ display:none; }
}
@media(max-width:991px){ .hx-srv-grid{ grid-template-columns:1fr; } .service-item.style-1{ height:340px; } }

/* ============================================================
   24. Bexon Choose 카드 (인재채용 Why Join Us)
   ============================================================ */
.hx-choose-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:18px; }
.hx-choose{ background:#fff; border:1px solid var(--line-soft); border-radius:14px; padding:36px 28px; transition:.32s cubic-bezier(.2,.7,.2,1); }
.hx-choose:hover{ transform:translateY(-7px); border-color:var(--teal); box-shadow:0 30px 56px -36px rgba(30,138,138,.34); }
.hx-choose .ic{ width:62px; height:62px; border-radius:15px; background:#e6f1f1; display:flex; align-items:center; justify-content:center; margin-bottom:24px; transition:.3s ease; }
.hx-choose:hover .ic{ background:var(--teal); }
.hx-choose .ic i{ font-size:28px; color:var(--teal); transition:.3s ease; line-height:1; }
.hx-choose:hover .ic i{ color:#fff; }
.hx-choose .kn{ font-family:var(--mono); font-size:12px; color:var(--teal); letter-spacing:.12em; display:block; margin-bottom:8px; }
.hx-choose h4{ font-size:19px; font-weight:600; color:var(--ink); margin-bottom:11px; letter-spacing:-.01em; }
.hx-choose p{ font-size:14px; color:var(--muted); font-weight:300; line-height:1.66; }
@media(max-width:991px){ .hx-choose-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:575px){ .hx-choose-grid{ grid-template-columns:1fr; } }

/* ============================================================
   25. Bexon Countup (회사개요 펀팩트 스트립)
   ============================================================ */
.hx-funfact{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; margin:36px 0 46px; box-shadow:0 22px 50px -40px rgba(12,30,33,.4); }
.hx-funfact .ff{ background:#fff; padding:38px 20px; text-align:center; }
.hx-funfact .ff-v{ font-family:var(--sans); font-size:clamp(34px,4.2vw,52px); font-weight:800; color:var(--blue); letter-spacing:-.025em; line-height:1; }
.hx-funfact .ff-v small{ font-size:20px; font-weight:700; color:var(--teal); }
.hx-funfact .ff-l{ font-size:13.5px; color:var(--muted); margin-top:14px; }
@media(max-width:767px){ .hx-funfact{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   26. Bexon "Our Solutions" 행 리스트 (style-3) — 07/Values
   - 전체 폭 행 · 좌 아이콘+제목 / 우 설명 · 호버 시 틸 채움 + 중앙 이미지 리빌
   ============================================================ */
.hx-solutions{ margin-top:40px; }
/* 각 행 = 흰 카드(테두리·갭) — Bexon 원본 */
.service-item.style-3{ position:relative; background:#fff; border:1px solid var(--line-soft); border-radius:16px; padding:32px 50px 32px 34px; margin-bottom:18px; transition:background .34s ease,border-color .34s ease,box-shadow .34s ease; }
.service-item.style-3:last-child{ margin-bottom:0; }
.service-item.style-3:hover{ background:var(--teal); border-color:var(--teal); z-index:5; box-shadow:0 34px 64px -34px rgba(30,138,138,.5); }
.service-item.style-3 .service-content-wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; position:relative; z-index:6; }
.service-item.style-3 .service-title{ display:flex; align-items:center; gap:24px; max-width:440px; width:100%; }
/* 아이콘: 원형 80px + 틸 대각선 그라데이션 배지 (Bexon 그대로) */
.service-item.style-3 .service-icon{ width:80px; height:80px; flex:0 0 auto; border-radius:50%; background:linear-gradient(-45deg,rgba(30,138,138,.3) 0%,rgba(30,138,138,0) 50%,rgba(30,138,138,.3) 100%); border:1px solid rgba(30,138,138,.15); display:inline-flex; align-items:center; justify-content:center; line-height:1; transition:all .45s ease; }
.service-item.style-3 .service-icon i{ font-size:42px; color:var(--teal); line-height:1; transition:color .4s ease; }
.service-item.style-3 .service-title .title{ font-size:23px; font-weight:600; color:var(--ink); margin:0; letter-spacing:-.01em; transition:color .3s; }
.service-item.style-3 .service-content{ max-width:400px; width:100%; }
.service-item.style-3 .desc{ font-size:15px; color:var(--muted); font-weight:300; line-height:1.66; margin:0; transition:color .3s; }
.service-item.style-3:hover .service-icon{ background:linear-gradient(-45deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,.32) 100%); border-color:rgba(255,255,255,.2); }
.service-item.style-3:hover .service-icon i{ color:#fff; }
.service-item.style-3:hover .service-title .title{ color:#fff; }
.service-item.style-3:hover .desc{ color:rgba(255,255,255,.9); }
/* 호버 시 중앙에 오버사이즈 이미지 리빌 (행 위아래로 넘침) */
.service-reveal-bg{ position:absolute; top:50%; left:44%; width:226px; height:248px; border-radius:14px; opacity:0; pointer-events:none; box-shadow:0 32px 64px -26px rgba(0,0,0,.5); transform:translate(-50%,-50%) scale(.7); transition:opacity .55s,transform .55s cubic-bezier(.215,.61,.355,1); z-index:4; background-size:cover; background-position:center; }
.service-item.style-3:hover .service-reveal-bg{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.hx-rv-1{ background:url('../images/values/four-ways-01.webp') center/cover no-repeat; }
.hx-rv-2{ background:url('../images/values/four-ways-02.webp') center/cover no-repeat; }
.hx-rv-3{ background:url('../images/values/four-ways-03.webp') center/cover no-repeat; }
.hx-rv-4{ background:url('../images/values/four-ways-04.webp') center/cover no-repeat; }
@media(max-width:1100px){
  .service-reveal-bg{ display:none; }
  .service-item.style-3{ padding:28px 26px; }
  .service-item.style-3 .service-content-wrap{ gap:10px; }
  .service-item.style-3 .service-title,
  .service-item.style-3 .service-content{ max-width:none; }
  .service-item.style-3 .service-content{ padding-left:104px; }
}
@media(max-width:575px){
  .service-item.style-3{ padding:24px 20px; }
  .service-item.style-3 .service-content{ padding-left:0; }
  .service-item.style-3 .service-icon{ width:64px; height:64px; }
  .service-item.style-3 .service-icon i{ font-size:34px; }
}

/* ============================================================
   27. Funfact 다크 밴드 (홈 02 At a Glance)
   ============================================================ */
.blk.dark.hx-funfact-sec{ background:linear-gradient(150deg,#0c1e21 0%,#0f3a3d 60%,#15706e 100%); }
.hx-ff-band{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(255,255,255,.14); border-radius:16px; overflow:hidden; }
.hx-ff{ padding:50px 24px; text-align:center; border-right:1px solid rgba(255,255,255,.12); }
.hx-ff:last-child{ border-right:0; }
.hx-ff-v{ font-family:var(--sans); font-size:clamp(40px,5vw,62px); font-weight:800; color:#fff; letter-spacing:-.03em; line-height:1; }
.hx-ff-v small{ font-size:22px; font-weight:700; color:#ffd34d; margin-left:3px; }
.hx-ff-l{ font-size:14px; color:rgba(255,255,255,.74); margin-top:16px; }
@media(max-width:767px){ .hx-ff-band{ grid-template-columns:1fr 1fr; } .hx-ff{ border-bottom:1px solid rgba(255,255,255,.12); } .hx-ff:nth-child(2n){ border-right:0; } }

/* ============================================================
   28. Working Process (홈) — 좌 스텝 리스트 / 우 비주얼
   ============================================================ */
.hx-process-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; margin-top:46px; }
.hx-process-list{ display:flex; flex-direction:column; gap:14px; }
.hx-step{ display:flex; gap:24px; padding:28px 30px; border:1px solid var(--line-soft); border-radius:14px; background:#fff; transition:.32s cubic-bezier(.2,.7,.2,1); }
.hx-step-no{ font-family:var(--mono); font-size:22px; font-weight:500; color:var(--teal); flex:none; line-height:1.2; transition:color .3s; }
.hx-step-c h4{ font-size:20px; font-weight:600; color:var(--ink); margin-bottom:8px; letter-spacing:-.01em; transition:color .3s; }
.hx-step-c p{ font-size:14.5px; color:var(--muted); font-weight:300; line-height:1.62; transition:color .3s; }
.hx-step.active, .hx-step:hover{ background:var(--blue); border-color:var(--blue); box-shadow:0 28px 56px -36px rgba(12,30,33,.5); }
.hx-step.active .hx-step-no, .hx-step:hover .hx-step-no{ color:#ffd34d; }
.hx-step.active .hx-step-c h4, .hx-step:hover .hx-step-c h4{ color:#fff; }
.hx-step.active .hx-step-c p, .hx-step:hover .hx-step-c p{ color:rgba(255,255,255,.78); }
.hx-process-list:hover .hx-step.active:not(:hover){ background:#fff; border-color:var(--line-soft); box-shadow:none; }
.hx-process-list:hover .hx-step.active:not(:hover) .hx-step-no{ color:var(--teal); }
.hx-process-list:hover .hx-step.active:not(:hover) .hx-step-c h4{ color:var(--ink); }
.hx-process-list:hover .hx-step.active:not(:hover) .hx-step-c p{ color:var(--muted); }
.hx-process-media{ position:sticky; top:120px; }
.hx-process-bg{ aspect-ratio:1/1; border-radius:18px; background:url('../images/process/creation-from-discovery.webp') center/cover no-repeat, linear-gradient(150deg,#0c1e21,#15706e); box-shadow:0 34px 66px -38px rgba(12,30,33,.5); }
.hx-process-tag{ margin-top:-44px; position:relative; left:50%; transform:translateX(-50%); display:inline-block; background:#fff; border:1px solid var(--line-soft); border-radius:50px; padding:12px 26px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--teal); box-shadow:0 18px 40px -24px rgba(12,30,33,.4); }
@media(max-width:900px){ .hx-process-grid{ grid-template-columns:1fr; gap:30px; } .hx-process-media{ position:static; order:-1; } }

/* ============================================================
   29. About-section-2 (회사개요) — 이미지+경력배지+통계
   ============================================================ */
.hx-about2{ display:grid; grid-template-columns:.82fr 1.18fr; gap:50px; align-items:center; margin:34px 0 48px; }
.hx-about2-media{ position:relative; }
.hx-about2-bg{ aspect-ratio:4/5; border-radius:18px; background:url('../images/about/company-overview.webp') center/cover no-repeat, linear-gradient(150deg,#0c1e21,#15706e); box-shadow:0 32px 64px -38px rgba(12,30,33,.5); }
.hx-about2-badge{ position:absolute; right:-20px; bottom:34px; width:132px; height:132px; border-radius:50%; background:var(--teal); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 24px 46px -18px rgba(30,138,138,.6); }
.hx-about2-badge .bn{ font-family:var(--sans); font-size:46px; font-weight:800; line-height:1; }
.hx-about2-badge .bn small{ font-size:17px; font-weight:700; }
.hx-about2-badge .bt{ font-size:12px; margin-top:7px; opacity:.94; line-height:1.35; }
.hx-about2-body .eyebrow{ margin-bottom:16px; }
.hx-about2-body h3{ font-family:var(--sans); font-size:clamp(24px,2.7vw,33px); font-weight:600; color:var(--blue); line-height:1.32; letter-spacing:-.02em; }
.hx-about2-body > p{ font-size:16px; color:var(--muted); line-height:1.8; font-weight:300; margin-top:16px; }
.hx-about2-stats{ display:flex; gap:40px; margin-top:32px; flex-wrap:wrap; }
.hx-about2-stats .v{ font-family:var(--sans); font-size:34px; font-weight:800; color:var(--blue); line-height:1; letter-spacing:-.02em; }
.hx-about2-stats .v small{ font-size:16px; color:var(--teal); }
.hx-about2-stats .l{ font-size:13px; color:var(--muted); margin-top:7px; }
@media(max-width:900px){ .hx-about2{ grid-template-columns:1fr; gap:30px; } .hx-about2-badge{ right:24px; width:112px; height:112px; } .hx-about2-badge .bn{ font-size:38px; } }

/* ============================================================
   30. Project 쇼케이스 (브랜드) — 호버 줌 카드
   ============================================================ */
.hx-project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
.hx-proj{ position:relative; aspect-ratio:3/4; border-radius:16px; overflow:hidden; cursor:pointer; }
.hx-proj-img{ position:absolute; inset:0; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.hx-pj-1{ background:url('../images/brands/prameno-01.webp') center/cover no-repeat; }
.hx-pj-2{ background:url('../images/brands/ez-water-tech.webp') center/cover no-repeat; }
.hx-pj-3{ background:url('../images/brands/prameno-homepage.webp') center/cover no-repeat; }
.hx-proj:hover .hx-proj-img{ transform:scale(1.09); }
.hx-proj::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,17,20,.88),transparent 58%); transition:.35s; }
.hx-proj:hover::after{ background:linear-gradient(to top,rgba(6,17,20,.92),rgba(30,138,138,.28) 72%); }
.hx-proj-meta{ position:absolute; left:0; right:0; bottom:0; padding:30px; z-index:2; display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; }
.hx-proj-meta .cat{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:#ffd34d; display:block; width:100%; margin-bottom:2px; }
.hx-proj-meta h3{ font-size:22px; font-weight:600; color:#fff; flex:1; letter-spacing:-.01em; }
.hx-proj-go{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:#fff; transition:.35s; flex:none; }
.hx-proj:hover .hx-proj-go{ background:var(--teal); transform:rotate(-45deg); }
@media(max-width:900px){ .hx-project-grid{ grid-template-columns:1fr; } .hx-proj{ aspect-ratio:16/10; } }

/* ============================================================
   31. Award/Credential 스트립 (회사개요)
   ============================================================ */
.hx-awards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:30px; }
.hx-award{ display:flex; gap:16px; align-items:center; background:var(--paper-2); border:1px solid var(--line-soft); border-radius:14px; padding:22px 22px; transition:.3s ease; }
.hx-award:hover{ border-color:var(--teal); transform:translateY(-4px); box-shadow:0 24px 46px -36px rgba(30,138,138,.34); }
.hx-aw-ic{ width:48px; height:48px; flex:none; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; }
.hx-aw-ic i{ font-size:24px; color:var(--teal); }
.hx-award .v{ font-size:16px; font-weight:700; color:var(--blue); letter-spacing:-.01em; }
.hx-award .l{ font-size:12.5px; color:var(--muted); margin-top:3px; }
@media(max-width:900px){ .hx-awards{ grid-template-columns:1fr 1fr; } }
@media(max-width:575px){ .hx-awards{ grid-template-columns:1fr; } }

/* 32. FAQ 섹션 — .faq/.faq-item 스타일은 원본 인라인에 존재 */
.hx-faq-sec .shead{ margin-bottom:46px; }

/* ============================================================
   33. CEO 사진 (대표 인사말) — 정현 대표 실사
   ============================================================ */
.hx-ceo-photo{
  background:
    linear-gradient(to top, rgba(8,21,24,.82) 0%, rgba(8,21,24,.12) 42%, rgba(8,21,24,0) 70%),
    url("../images/ceo/jung-hyeon.webp");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.hx-ceo-photo .nm{ color:#fff; }
.hx-ceo-photo .ti{ color:rgba(255,255,255,.85); }

/* ============================================================
   34. 박스형 카드 전면 재설계 (Bexon Homepage 참고)
   - 마크업 유지, CSS만 오버라이드 → 전 인스턴스 일괄 업그레이드
   ============================================================ */

/* (A) .kp → Bexon Homepage-2 "OUR PROCESS" : 큰 그라데이션 숫자 + 연결 화살표 */
.kpgrid{ display:flex!important; flex-wrap:wrap; gap:16px; }
.kpgrid .kp{ flex:1 1 280px; max-width:none; background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:30px 30px 40px; position:relative; text-align:center; transition:.32s cubic-bezier(.2,.7,.2,1); z-index:1; }
.kpgrid .kp:hover{ transform:translateY(-5px); border-color:var(--teal); box-shadow:0 30px 58px -36px rgba(12,30,33,.34); z-index:4; }
.kp .kn{ display:inline-flex; font-family:var(--sans); font-size:clamp(74px,7.2vw,116px); font-weight:600; line-height:1; letter-spacing:-.02em; margin-bottom:6px; background:linear-gradient(180deg,var(--teal) 0%,#ffffff 90%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.kp h4{ font-size:19px; font-weight:600; color:var(--ink); margin:0 0 12px; letter-spacing:-.01em; }
.kp p{ font-size:14px; color:var(--muted); font-weight:300; line-height:1.66; }
.kpgrid .kp:not(:last-child)::after{
  content:"\e916"; font-family:"bexon-icons"!important; font-weight:normal; font-size:22px; color:var(--teal);
  width:58px; height:58px; border-radius:50%; background:#fff; border:6px solid var(--paper-2);
  position:absolute; top:50%; right:-37px; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center; z-index:6;
}
@media(max-width:900px){
  .kpgrid{ flex-direction:column; }
  .kpgrid .kp:not(:last-child)::after{ top:auto; right:auto; bottom:-37px; left:50%; transform:translate(-50%,0) rotate(90deg); }
}

/* (B) .bitem → Bexon 피처 카드 : 코드 배지 + 호버 채움/리프트 */
.brow .bitem{ background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:34px 28px; text-align:center; transition:.32s cubic-bezier(.2,.7,.2,1); }
.brow .bitem:hover{ transform:translateY(-6px); border-color:var(--teal); box-shadow:0 28px 54px -36px rgba(30,138,138,.32); }
.bitem .bi-n{ display:inline-flex; align-items:center; justify-content:center; min-width:54px; height:54px; padding:0 16px; border-radius:15px; background:#e6f1f1; color:var(--teal); font-family:var(--mono); font-size:20px; font-weight:500; line-height:1; margin:0 auto 18px; transition:.3s ease; }
.brow .bitem:hover .bi-n{ background:var(--teal); color:#fff; }
.bitem h5{ font-size:17px; font-weight:600; color:var(--ink); margin-bottom:9px; letter-spacing:-.01em; }
.bitem p{ font-size:14px; color:var(--muted); font-weight:300; line-height:1.66; }

/* (C) .val → Bexon 카드 : 점선 태그 + 호버 리프트 + 상단 액센트 */
.vals .val{ background:#fff; border:1px solid var(--line-soft); border-radius:14px; padding:36px 30px; text-align:center; position:relative; overflow:hidden; transition:.32s cubic-bezier(.2,.7,.2,1); }
.vals .val::before{ content:""; position:absolute; left:50%; top:0; width:0; height:3px; background:var(--teal); transform:translateX(-50%); transition:width .4s ease; }
.vals .val:hover::before{ width:100%; }
.vals .val:hover{ transform:translateY(-6px); border-color:var(--teal); box-shadow:0 30px 56px -36px rgba(30,138,138,.3); }
.val .vn{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--teal); border:1px dashed rgba(30,138,138,.4); border-radius:20px; padding:5px 13px; margin-bottom:18px; }
.val h4{ font-size:20px; font-weight:600; color:var(--ink); margin-bottom:11px; letter-spacing:-.01em; }
.val p{ font-size:14px; color:var(--muted); font-weight:300; line-height:1.66; }

/* ============================================================
   35. Bexon Homepage-8 헤더(플로팅 알약) + 히어로
   ============================================================ */
/* --- 플로팅 라운드 사각형 헤더 (Homepage-8) --- */
#hdr{ position:fixed; top:15px; left:50%; transform:translateX(-50%); right:auto;
  width:calc(100% - 30px); max-width:1382px; background:#fff;
  border:1px solid var(--line-soft); border-radius:16px;
  box-shadow:0 24px 54px -32px rgba(12,30,33,.3); border-bottom:1px solid var(--line-soft);
  transition:transform .42s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; will-change:transform; }
#hdr::before{ display:none!important; }
#hdr.scrolled{ box-shadow:0 26px 58px -30px rgba(12,30,33,.36); }
/* 방향 감지: 아래로 스크롤 시 위로 숨김 */
#hdr.hide-up{ transform:translateX(-50%) translateY(calc(-100% - 30px)); }

/* ===== 섹션 배경 대비 반전 헤더 ===== */
#hdr{ transition:transform .42s cubic-bezier(.2,.7,.2,1), background-color .35s ease, border-color .35s ease, box-shadow .3s ease; }
#hdr .logo .mark, #hdr .logo .mark .accent, #hdr .gnb-link, #hdr .lang button, #hdr .burger span{ transition:color .3s ease, background-color .3s ease; }
/* 밝은 섹션 위 → 헤더 어둡게 */
#hdr.hdr-dark{ background:rgba(12,30,33,.94); border-color:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
#hdr.hdr-dark .logo .mark{ color:#fff; }
#hdr.hdr-dark .logo .mark .accent{ color:#5fd3c6; }
#hdr.hdr-dark .gnb-link{ color:rgba(255,255,255,.92); }
#hdr.hdr-dark .gnb-link:hover{ color:#5fd3c6; }
#hdr.hdr-dark .lang{ border-color:rgba(255,255,255,.28); }
#hdr.hdr-dark .lang button{ color:rgba(255,255,255,.78); }
#hdr.hdr-dark .lang button.on{ background:var(--teal); color:#fff; }
#hdr.hdr-dark .dropdown{ background:#0c1e21; border-color:rgba(255,255,255,.12); }
#hdr.hdr-dark .dropdown a{ color:rgba(255,255,255,.72); }
#hdr.hdr-dark .dropdown a:hover{ background:rgba(255,255,255,.07); color:#fff; }
#hdr.hdr-dark .burger span{ background:#fff; }
#hdr .wrap.nav{ height:70px; padding:0 16px 0 30px; }
.subnav{ top:100px!important; }
/* 드롭다운 캐럿 */
.gnb-item:has(.dropdown) .gnb-link::after{ content:""; display:inline-block; width:6px; height:6px;
  border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor;
  transform:rotate(45deg) translateY(-2px); margin-left:8px; opacity:.55; }
/* "Let's Talk"식 버튼 (PRAMENO) */
.hx-talk-btn{ display:inline-flex!important; align-items:center; gap:0!important;
  background:var(--teal)!important; color:#fff!important; border:none!important;
  padding:6px 6px 6px 22px!important; border-radius:50px!important; font-family:var(--sans)!important;
  font-weight:600; font-size:14px; letter-spacing:0; transition:.3s; }
.hx-talk-btn:hover{ background:var(--teal-deep)!important; color:#fff!important; transform:translateY(-2px); }
.hx-talk-btn .pbtn-ic{ width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; margin-left:12px; font-size:12px; transition:.35s; }
.hx-talk-btn .pbtn-ic i{ display:inline-block; transform:rotate(-45deg); }
.hx-talk-btn:hover .pbtn-ic i{ transform:rotate(0); }
@media(max-width:600px){ #hdr{ top:10px; width:calc(100% - 20px); border-radius:14px; } #hdr::before{ display:none; } #hdr .wrap.nav{ padding:0 10px 0 18px; height:62px; } .subnav{ top:86px!important; } }

/* --- 히어로 (Homepage-8) --- */
.h8-hero{ position:relative; margin:0 14px; border-radius:16px 16px 0 0; overflow:hidden; }
.h8-hero-inner{ position:relative; background:#cfe1e0; }
.h8-hero-bg-image{ position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(135deg, rgba(12,30,33,.035) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(45deg, rgba(12,30,33,.028) 0 1px, transparent 1px 70px);
}
.h8-hero-item-wrapper{ position:relative; padding:196px 0 44px; min-height:730px; }
.h8-hero-content{ position:relative; z-index:10; }
.h8-hero-title{ font-family:var(--sans); font-size:clamp(54px,10vw,134px); line-height:1.0; letter-spacing:-.035em; font-weight:700; color:var(--blue); margin:0; position:relative; }
.h8-hero-title span{ display:block; white-space:nowrap; width:100%; }
.h8-hero-title span:first-child{ text-align:left; }
.h8-hero-title span:nth-child(2){ text-align:center; }
.h8-hero-title span:nth-child(3){ text-align:right; }
.h8-hero-title .title-year{ font-family:var(--mono); font-size:16px; font-weight:500; letter-spacing:.04em; position:absolute; right:0; top:100%; margin-top:16px; color:var(--blue); white-space:nowrap; }
.h8-hero-banner{ position:absolute; left:50%; transform:translateX(-50%); bottom:0; z-index:6; max-width:392px; width:34%; pointer-events:none; }
.h8-hero-banner img{ width:100%; display:block; -webkit-mask-image:radial-gradient(125% 115% at 50% 32%, #000 58%, transparent 100%); mask-image:radial-gradient(125% 115% at 50% 32%, #000 58%, transparent 100%); }
.h8-hero-box{ position:absolute; left:0; bottom:64px; display:flex; flex-direction:column; gap:118px; z-index:20; }
.h8-hero-box .customers ul{ display:flex; list-style:none; padding:0; margin:0; }
.h8-hero-box .customers li{ margin-left:-14px; }
.h8-hero-box .customers li:first-child{ margin-left:0; }
.h8-hero-box .customers li img, .h8-hero-box .customers li span{ width:54px; height:54px; border-radius:50%; border:3px solid #fff; object-fit:cover; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -8px rgba(12,30,33,.4); }
.h8-hero-box .customers li span{ background:var(--teal); color:#fff; font-size:14px; }
.h8-hero-box-content{ max-width:340px; }
.h8-hero-box-icon{ font-size:24px; color:var(--blue); margin-bottom:14px; line-height:1; }
.h8-hero-box-content .desc{ font-size:15px; color:#36474e; line-height:1.62; font-weight:300; }
.h8-hero .circle-text-wrap{ position:absolute; right:0; bottom:58px; width:152px; height:152px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; z-index:20; cursor:pointer; transition:background .4s ease, transform .4s ease; }
.h8-hero .circle-text-wrap:hover{ background:var(--teal); transform:translateY(-4px); }
.h8-hero .circle-text-wrap .desc{ max-width:96px; font-size:14.5px; font-weight:600; line-height:1.35; }
.h8-hero .circle-text-wrap .desc i{ display:inline-block; font-size:18px; transform:rotate(-45deg) translateY(2px); transition:transform .4s ease; }
.h8-hero .circle-text-wrap:hover .desc i{ transform:rotate(0) translateY(3px); }

@media(max-width:991px){
  .h8-hero-item-wrapper{ padding:150px 0 60px; min-height:auto; }
  .h8-hero-title{ font-size:clamp(48px,12vw,92px); line-height:1.04; }
  .h8-hero-title span:first-child,
  .h8-hero-title span:nth-child(2),
  .h8-hero-title span:nth-child(3){ width:auto; text-align:left; margin:0; display:inline; }
  .h8-hero-title .title-year{ position:static; display:block; margin-top:14px; }
  .h8-hero-banner{ position:relative; left:auto; transform:none; max-width:440px; width:100%; margin:36px auto 0; display:block; }
  .h8-hero-box{ position:static; flex-direction:row; flex-wrap:wrap; align-items:center; gap:28px; margin-top:30px; }
  .h8-hero .circle-text-wrap{ position:absolute; right:8px; bottom:auto; top:150px; width:118px; height:118px; }
}
@media(max-width:600px){
  .h8-hero{ margin:0 8px; }
  .h8-hero .circle-text-wrap{ display:none; }
  .h8-hero-box{ gap:20px; }
}

/* ============================================================
   36. Homepage-8 히어로 — 풀스크린 / 풀블리드 민트 패턴 / 초대형 한글 타이포
   ============================================================ */
.h8-hero-ko{ margin:0!important; border-radius:0!important; }
.h8-hero-ko .h8-hero-inner{ background:#cfe1e0; min-height:82vh; display:flex; }
.h8-hero-ko .wrap{ width:100%; max-width:1640px; padding:0 52px; align-self:stretch; display:flex; }
.h8-hero-ko .h8-hero-item-wrapper{ min-height:82vh; padding:170px 0 70px; display:flex; flex-direction:column; justify-content:center; width:100%; }
.h8-hero-ko .h8-hero-content{ max-width:none; width:100%; }
.h8-hero-ko .h8-hero-title{ color:var(--blue); font-size:clamp(40px,6.9vw,106px); line-height:1.08; letter-spacing:-.035em; font-weight:700; }
.h8-hero-ko .h8-hero-title .ht1{ display:block; width:100%; text-align:left; white-space:nowrap; }
.h8-hero-ko .h8-hero-title .ht2{ display:block; width:100%; text-align:right; white-space:nowrap; margin-top:14px; color:var(--blue); }
@media(max-width:1199px){ .h8-hero-ko .h8-hero-title{ font-size:clamp(36px,6.6vw,78px); } .h8-hero-ko .wrap{ padding:0 32px; } }
@media(max-width:991px){
  .h8-hero-ko .h8-hero-inner, .h8-hero-ko .h8-hero-item-wrapper{ min-height:88vh; }
  .h8-hero-ko .h8-hero-item-wrapper{ padding:150px 0 70px; }
  .h8-hero-ko .h8-hero-title{ font-size:clamp(34px,7vw,56px); white-space:normal; }
  .h8-hero-ko .h8-hero-title .ht1, .h8-hero-ko .h8-hero-title .ht2{ text-align:left; white-space:normal; }
}

/* ============================================================
   37. [메인] 사업영역 카드 — 디자인 C (대형 아이콘 + 호버 틸 채움 + 동적)
   ============================================================ */
.hx-bizc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; }
.hx-bizc{ position:relative; overflow:hidden; text-align:left!important; background:#fff; border:1px solid var(--line-soft); border-radius:18px; padding:42px 34px 36px; cursor:pointer; transform:none;
  transition:background .5s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s, opacity .7s ease; }
.hx-bizc::after{ content:""; position:absolute; right:-40%; top:-40%; width:90%; height:90%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%); opacity:0; transition:.5s; pointer-events:none; }
.hx-bizc:hover{ background:var(--teal); border-color:var(--teal); transform:translateY(-10px); box-shadow:0 44px 76px -42px rgba(30,138,138,.55); }
.hx-bizc:hover::after{ opacity:1; }
.hx-bizc-ic{ position:relative; z-index:2; width:88px; height:88px; border-radius:22px; background:#e6f1f1; display:flex; align-items:center; justify-content:center; margin-bottom:46px; transition:.5s cubic-bezier(.2,.7,.2,1); }
.hx-bizc-ic i{ font-size:40px; color:var(--teal); line-height:1; transition:.5s; }
.hx-bizc:hover .hx-bizc-ic{ background:#fff; transform:translateY(-4px) rotate(-8deg) scale(1.06); }
.hx-bizc.feat .hx-bizc-ic{ background:var(--teal); }
.hx-bizc.feat .hx-bizc-ic i{ color:#fff; }
.hx-bizc:hover.feat .hx-bizc-ic, .hx-bizc:hover .hx-bizc-ic{ background:#fff; }
.hx-bizc:hover .hx-bizc-ic i{ color:var(--teal); }
.hx-bizc .ci{ position:relative; z-index:2; display:block; font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--teal); margin-bottom:12px; transition:.4s; }
.hx-bizc h3{ position:relative; z-index:2; font-size:24px; font-weight:600; color:var(--ink); margin-bottom:14px; letter-spacing:-.01em; transition:.4s; }
.hx-bizc p{ position:relative; z-index:2; font-size:14.5px; color:var(--muted); font-weight:300; line-height:1.7; transition:.4s; }
.hx-bizc .go{ position:relative; z-index:2; display:inline-block; margin-top:22px; font-family:var(--mono); font-size:13px; color:var(--teal); transition:.4s; }
.hx-bizc:hover .ci{ color:rgba(255,255,255,.85); }
.hx-bizc:hover h3{ color:#fff; }
.hx-bizc:hover p{ color:rgba(255,255,255,.9); }
.hx-bizc:hover .go{ color:#fff; transform:translateX(4px); }
/* 동적 등장: 더 크게 슬라이드업 + 살짝 스케일 */
.hx-bizc.rv{ opacity:0; transform:translateY(48px) scale(.965); }
.hx-bizc.rv.in{ opacity:1; transform:none; }
@media(max-width:991px){ .hx-bizc-grid{ grid-template-columns:1fr; } .hx-bizc{ padding:34px 28px; } .hx-bizc-ic{ margin-bottom:30px; } }

/* ============================================================
   38. [회사소개] 경영이념 가치 카드 — 디자인 F (3D 스와이프 등장 + 아이콘)
   ============================================================ */
.hx-vf{ perspective:1500px; }
.hx-vf .val{ text-align:left!important; background:#fff; border:1px solid var(--line-soft); border-radius:16px; padding:34px 30px; overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s, opacity .8s ease; transform-style:preserve-3d; }
.hx-vf .val::before{ display:none!important; }
.hx-vf .val .hx-vf-ic{ width:62px; height:62px; border-radius:16px; background:#e6f1f1; display:flex; align-items:center; justify-content:center; margin-bottom:22px; transition:.45s ease; }
.hx-vf .val .hx-vf-ic i{ font-size:28px; color:var(--teal); line-height:1; transition:.45s ease; }
.hx-vf .val .vn{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--teal); border:0; padding:0; margin-bottom:12px; }
.hx-vf .val h4{ font-size:20px; font-weight:600; color:var(--ink); margin-bottom:11px; letter-spacing:-.01em; }
.hx-vf .val p{ font-size:14px; color:var(--muted); font-weight:300; line-height:1.66; }
.hx-vf .val:hover{ transform:translateY(-8px); border-color:var(--teal); box-shadow:0 36px 62px -36px rgba(30,138,138,.36); }
.hx-vf .val:hover .hx-vf-ic{ background:var(--teal); transform:rotate(-6deg) scale(1.05); }
.hx-vf .val:hover .hx-vf-ic i{ color:#fff; }
/* 3D 스와이프 등장 */
.hx-vf .val.rv{ opacity:0; transform:perspective(1300px) rotateY(-40deg) translateX(-46px) scale(.94); }
.hx-vf .val.rv.in{ opacity:1; transform:perspective(1300px) rotateY(0) translateX(0) scale(1); }

/* ============================================================
   39. [브랜드] 카드 — 디자인 B (전폭 행 + 호버 틸 채움/화살표 리빌 + 슬라이드 등장)
   #page-brand 로 스코프하여 사업영역의 프로세스 숫자 카드와 분리
   ============================================================ */
#page-brand .kpgrid{ display:flex!important; flex-direction:column; gap:16px; }
#page-brand .brow.two{ display:flex!important; flex-direction:column; gap:16px; }
#page-brand .kp, #page-brand .brow .bitem{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:30px; text-align:left!important;
  background:#fff; border:1px solid var(--line-soft); border-radius:16px; padding:28px 70px 28px 34px;
  transition:background .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s, opacity .7s ease; }
#page-brand .kp::before, #page-brand .brow .bitem::before{ display:none!important; }
#page-brand .kp .kn, #page-brand .brow .bitem .bi-n{
  flex:0 0 auto; min-width:60px; width:auto; height:auto; margin:0; padding:0; border:0; background:none;
  -webkit-text-fill-color:initial; font-family:var(--mono); font-size:42px; font-weight:700; color:var(--teal); opacity:.45; line-height:1; transition:.5s; }
#page-brand .kp h4, #page-brand .brow .bitem h5{ flex:0 0 190px; font-size:19px; font-weight:600; color:var(--ink); margin:0; letter-spacing:-.01em; transition:.4s; }
#page-brand .kp p, #page-brand .brow .bitem p{ flex:1 1 auto; font-size:14.5px; color:var(--muted); font-weight:300; line-height:1.62; margin:0; transition:.4s; }
#page-brand .kp::after, #page-brand .brow .bitem::after{
  content:"\e916"; font-family:"bexon-icons"; position:absolute; right:30px; top:50%; transform:translateY(-50%) translateX(28px);
  opacity:0; font-size:24px; color:#fff; line-height:1; transition:.55s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
#page-brand .kp:hover, #page-brand .brow .bitem:hover{ background:var(--teal); border-color:var(--teal); transform:translateX(10px); box-shadow:0 30px 58px -34px rgba(30,138,138,.5); }
#page-brand .kp:hover .kn, #page-brand .brow .bitem:hover .bi-n{ color:#fff; opacity:.92; }
#page-brand .kp:hover h4, #page-brand .brow .bitem:hover h5{ color:#fff; }
#page-brand .kp:hover p, #page-brand .brow .bitem:hover p{ color:rgba(255,255,255,.9); }
#page-brand .kp:hover::after, #page-brand .brow .bitem:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); }
#page-brand .kp.rv, #page-brand .brow .bitem.rv{ opacity:0; transform:translateX(-46px); }
#page-brand .kp.rv.in, #page-brand .brow .bitem.rv.in{ opacity:1; transform:none; }
@media(max-width:720px){
  #page-brand .kp, #page-brand .brow .bitem{ flex-direction:column; align-items:flex-start; gap:8px; padding:26px 26px; }
  #page-brand .kp .kn, #page-brand .brow .bitem .bi-n{ font-size:34px; min-width:0; margin-bottom:4px; }
  #page-brand .kp h4, #page-brand .brow .bitem h5{ flex:none; width:auto; }
  #page-brand .kp p, #page-brand .brow .bitem p{ flex:none; width:100%; }
  #page-brand .kp::after, #page-brand .brow .bitem::after{ display:none; }
  #page-brand .kp:hover, #page-brand .brow .bitem:hover{ transform:none; }
}

/* ============================================================
   40. [인재채용] 인재상 카드 — 디자인 A (세로 다크 카드 + 호버 설명 리빌)
   #careers-talent 로 스코프 (회사소개 3D 카드와 분리)
   ============================================================ */
#careers-talent .vals{ display:grid!important; grid-template-columns:repeat(4,1fr); gap:20px; }
#careers-talent .vals .val{
  position:relative; overflow:hidden; min-height:320px; display:flex; flex-direction:column; justify-content:flex-end;
  background:#0c1e21; border:0; border-radius:18px; padding:34px 28px; text-align:left!important;
  transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s, opacity .7s ease; }
#careers-talent .vals .val::before{ display:none!important; }
/* 다이아몬드 패턴 + 틸 스윕 (호버 시 차오름) */
#careers-talent .vals .val::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, transparent 38%, rgba(30,138,138,.92));
  background-size:auto,auto,100% 220%; background-position:0 0,0 0,0 100%; transition:background-position .6s cubic-bezier(.2,.7,.2,1), opacity .5s; opacity:.85; }
#careers-talent .vals .val:hover::after{ background-position:0 0,0 0,0 0; opacity:1; }
#careers-talent .vals .val .vn{ position:relative; z-index:2; display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:#7fd0d0; border:0; padding:0; margin:0 0 auto; }
#careers-talent .vals .val h4{ position:relative; z-index:2; font-size:22px; font-weight:600; color:#fff; margin:0; letter-spacing:-.01em; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
#careers-talent .vals .val p{ position:relative; z-index:2; font-size:13.5px; color:rgba(255,255,255,.92); font-weight:300; line-height:1.6;
  max-height:0; opacity:0; overflow:hidden; transform:translateY(8px); margin:0; transition:max-height .55s ease, opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1), margin-top .45s ease; }
#careers-talent .vals .val:hover{ transform:translateY(-10px); box-shadow:0 44px 76px -42px rgba(0,0,0,.55); }
#careers-talent .vals .val:hover p{ max-height:240px; opacity:1; transform:none; margin-top:12px; }
@media(max-width:991px){ #careers-talent .vals{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ #careers-talent .vals{ grid-template-columns:1fr; } #careers-talent .vals .val{ min-height:240px; } }

/* ============================================================
   41. [오시는 길] 지도 임베드 — 문의하기와 동일 톤
   ============================================================ */
#about-location .map-area{ width:100%; height:100%; min-height:380px; border-radius:12px; overflow:hidden; box-shadow:0 30px 58px -44px rgba(12,30,33,.3); }
#about-location .map-area iframe{ width:100%; height:100%; min-height:380px; border:0; display:block; filter:grayscale(.22) contrast(.96); }
@media(max-width:768px){ #about-location .map-area, #about-location .map-area iframe{ min-height:300px; } }

/* ============================================================
   42. 모바일 헤더 재구성
   - 버거 메뉴: 좌측 / 로고: 가운데 / 언어 토글: 우측(반대 언어 버튼만)
   - PRAMENO 바로가기: 모바일 숨김
   ============================================================ */
@media(max-width:900px){
  #hdr .wrap.nav{ position:relative; justify-content:flex-end; }
  #hdr .gnb{ display:none!important; }
  #hdr .util .prameno-btn, #hdr .util .hx-talk-btn{ display:none!important; }
  #hdr .burger{ display:flex!important; position:absolute; left:16px; top:50%; transform:translateY(-50%); margin:0; padding:6px 4px; }
  #hdr .logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; }
  #hdr .util{ display:flex!important; gap:0; margin:0; }
  #hdr .util .lang{ display:flex!important; border:1px solid var(--line); border-radius:50px; overflow:hidden; }
  #hdr .util .lang button{ padding:7px 16px; font-size:12.5px; font-weight:700; color:var(--blue); letter-spacing:.06em; background:transparent; }
  /* 현재 언어의 '반대' 버튼만 노출 (KO→EN만, EN→KO만) */
  html[lang="ko"] #hdr .util .lang #lk{ display:none!important; }
  html[lang="en"] #hdr .util .lang #le{ display:none!important; }
  #hdr .util .lang button.on{ background:transparent; color:var(--blue); }
  /* 다크 헤더(어두운 섹션 위) 대응 */
  #hdr.hdr-dark .util .lang{ border-color:rgba(255,255,255,.3); }
  #hdr.hdr-dark .util .lang button, #hdr.hdr-dark .util .lang button.on{ color:#fff; background:transparent; }
}
@media(max-width:480px){
  #hdr .logo .mark{ font-size:19px; }
  #hdr .burger{ left:13px; }
  #hdr .util .lang button{ padding:6px 13px; }
}

/* 인재채용 다크 카드 — 터치 기기(호버 불가)에서는 설명을 항상 노출 */
@media(hover:none){
  #careers-talent .vals .val::after{ background-position:0 0,0 0,0 0; opacity:1; }
  #careers-talent .vals .val p{ max-height:300px; opacity:1; transform:none; margin-top:12px; }
}

/* ============================================================
   43. 모바일 메뉴 — 좁은 좌측 드로어 + 우측 플라이아웃 서브메뉴 (PRAMENO 패턴)
   기본: 좁은 드로어에 메인메뉴 + PRAMENO 버튼만 / ">" 클릭 시 우측에 서브메뉴 팝업
   ============================================================ */
.mobile-menu{ top:78px!important; left:0; right:auto!important; bottom:auto!important; height:auto;
  width:70%; max-width:212px; background:#fff; padding:6px 0 16px!important; border-radius:0 0 16px 0;
  overflow:visible!important; box-shadow:14px 18px 54px -18px rgba(8,18,20,.34); z-index:95; }
.mm-backdrop{ position:fixed; inset:0; background:rgba(8,18,20,.42); z-index:88; display:none; opacity:0; transition:opacity .3s ease; }
.mobile-menu.open ~ .mm-backdrop{ display:block; opacity:1; }
.mobile-menu .mm-grp{ position:relative; border-bottom:1px solid var(--line); margin:0 18px; padding:0!important; }
.mobile-menu .mm-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.mobile-menu .mm-title{ flex:1 1 auto; font-weight:600!important; font-size:16px!important; color:var(--blue)!important; cursor:pointer; padding:11px 0; margin:0!important; display:block; }
.mobile-menu .mm-toggle{ flex:0 0 auto; width:42px; height:40px; border:0; background:none; cursor:pointer; position:relative; padding:0; }
.mobile-menu .mm-toggle::before{ content:""; position:absolute; top:50%; left:50%; width:8px; height:8px;
  border-top:2px solid var(--muted); border-right:2px solid var(--muted);
  transform:translate(-65%,-50%) rotate(45deg); transition:border-color .25s ease; }
.mobile-menu .mm-grp.open .mm-toggle::before{ border-color:var(--teal); }
/* 우측 고정 플라이아웃 카드 (JS가 top 위치 지정) */
.mobile-menu .mm-sub{ position:fixed; right:12px; width:min(244px, calc(100vw - 122px));
  background:#fff; border:1px solid var(--line-soft); border-radius:14px; padding:8px;
  box-shadow:0 26px 58px -18px rgba(8,18,20,.4); z-index:96;
  opacity:0; visibility:hidden; transform:translateX(10px) scale(.97); transform-origin:left center;
  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.7,.2,1), visibility .24s; pointer-events:none; }
.mobile-menu .mm-grp.open .mm-sub{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.mobile-menu .mm-sub::before{ content:""; position:absolute; left:-7px; top:20px; width:13px; height:13px; background:#fff; border-left:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); transform:rotate(45deg); }
.mobile-menu .mm-sub a{ display:block!important; padding:11px 14px!important; color:var(--muted)!important; font-size:14px!important; border-radius:8px; white-space:nowrap; transition:.18s; }
.mobile-menu .mm-sub a:hover{ background:var(--paper); color:var(--blue)!important; }
.mobile-menu .mm-grp.no-sub .mm-title{ padding:11px 0; }
.mobile-menu .mm-cta{ margin:16px 18px 0; }
.mobile-menu .mm-prameno{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; background:var(--teal); color:#fff!important; border-radius:10px; font-weight:600; font-size:14px; transition:.25s; }
.mobile-menu .mm-prameno:hover{ background:var(--teal-deep); }
.mobile-menu .mm-prameno .mp-ic{ font-size:12px; }

/* ============================================================
   44. 글자 분해 타이틀 (Bexon SplitText text-anim 대체)
   - hx-w: 어절 래퍼(줄바꿈 보존) / hx-c: 글자(상승+페이드, 스태거)
   ============================================================ */
.hx-split .hx-w{ display:inline-block; white-space:nowrap; }
/* 히어로 타이틀의 span{display:block;width:100%} 규칙이 분해 스팬에 적용되는 것 차단 */
.h8-hero-title .hx-w, .pagehero h1 .hx-w, .shead h2 .hx-w{ display:inline-block!important; width:auto!important; white-space:nowrap!important; }
.h8-hero-title .hx-c, .pagehero h1 .hx-c, .shead h2 .hx-c{ display:inline-block!important; width:auto!important; white-space:normal!important; }
.hx-split .hx-c{ display:inline-block; transform:translateY(1.1em) rotate(4deg); opacity:0;
  transition:transform .62s cubic-bezier(.22,.85,.28,1), opacity .38s ease; will-change:transform; }
.hx-split.chars-in .hx-c{ transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hx-split .hx-c{ transition:none; transform:none; opacity:1; }
}

/* ============================================================
   45. 스크롤 카드 스택 — 홈 07/Values (Bexon service-stack 대체)
   - 데스크톱(≥768px)에서 sticky로 쌓이고, JS가 덮이는 비율만큼 scale 다운
   ============================================================ */
@media(min-width:768px){
  .hx-solutions .service-item.style-3{ position:sticky; transform-origin:center top; }
  .hx-solutions .service-item.style-3:nth-child(1){ top:106px; }
  .hx-solutions .service-item.style-3:nth-child(2){ top:122px; }
  .hx-solutions .service-item.style-3:nth-child(3){ top:138px; }
  .hx-solutions .service-item.style-3:nth-child(4){ top:154px; }
}
.hx-solutions .service-item.style-3.hx-stacked{
  transition:background .34s ease, border-color .34s ease, box-shadow .34s ease!important;
  transition-delay:0s!important; }

/* ============================================================
   46. 마퀴 — 대형 아웃라인 텍스트 무한 흐름 밴드 (Bexon marquee 대체)
   ============================================================ */
.hx-marquee{ overflow:hidden; background:#e9f5ee; padding:29px 0; border-top:0; }
.hx-marquee-track{ display:flex; width:max-content; animation:hx-mq 30s linear infinite; }
.hx-marquee:hover .hx-marquee-track{ animation-play-state:paused; }
.hx-mq-group{ display:flex; align-items:center; gap:42px; padding-right:42px; }
.hx-mq{ font-family:var(--sans); font-size:clamp(44px,6vw,84px); font-weight:800; letter-spacing:-.02em;
  line-height:1.1; white-space:nowrap; color:transparent; -webkit-text-stroke:1.5px rgba(12,30,33,.5); }
.hx-mq.fill{ color:var(--teal); -webkit-text-stroke:0; }
.hx-mq-dot{ color:var(--teal); font-size:24px; line-height:1; }
@keyframes hx-mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .hx-marquee-track{ animation:none; } }
@media(max-width:600px){ .hx-marquee{ padding:18px 0; } }

/* ============================================================
   47. [메인] 03/Business 재배치 — 좌:트레이딩 / 중앙:문장 / 우:부품소재 / 하단 전폭:화장품
   ============================================================ */
.hx-bizc-mid{ display:flex; align-items:center; justify-content:center; padding:10px 18px; }
.hx-bizc-mid .lead{ margin:0; text-align:center; font-size:17.5px; line-height:1.85; font-weight:600; }
.hx-bizc-grid .hx-bizc.feat{ grid-column:1 / -1; }
@media(max-width:991px){
  .hx-bizc-mid{ order:-1; padding:0 4px 6px; }
  .hx-bizc-grid .hx-bizc.feat{ grid-column:auto; }
}

/* ============================================================
   48. [메인] 03/Business 화장품 피처 배너 — Bexon 다크 CTA 문법
   - 좌: 대형 화이트 타이포 / 우: 아웃라인 고스트 "PRAMENO" + 태그 배지
   ============================================================ */
.hx-bizc.hx-feat-banner{ display:flex; align-items:center; justify-content:space-between; gap:48px;
  padding:56px 64px; border:0;
  background:linear-gradient(135deg,#0c1e21 0%,#14474a 58%,#1e8a8a 135%); }
/* 다이아몬드 패턴 오버레이 (기존 radial ::after 재정의) */
.hx-bizc.hx-feat-banner::after{ content:""; position:absolute; inset:0; width:auto; height:auto; right:auto; top:auto;
  border-radius:0; opacity:1; background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 26px); }
.hx-bizc.hx-feat-banner:hover{ background:linear-gradient(135deg,#0e2629 0%,#1a6a6c 58%,#25a3a3 135%);
  border:0; transform:translateY(-8px); box-shadow:0 48px 84px -44px rgba(12,30,33,.6); }
.hx-feat-main{ flex:0 1 58%; min-width:0; position:relative; z-index:2; }
.hx-bizc.hx-feat-banner .ci{ color:#5fd3c6; font-size:12.5px; }
.hx-bizc.hx-feat-banner h3{ color:#fff; font-size:clamp(30px,3.6vw,48px); font-weight:700; letter-spacing:-.02em; line-height:1.16; margin:16px 0 18px; }
.hx-bizc.hx-feat-banner p{ color:rgba(255,255,255,.88); font-size:16.5px; line-height:1.78; max-width:58ch; }
.hx-bizc.hx-feat-banner .go{ color:#5fd3c6; font-size:14px; margin-top:26px; }
.hx-bizc.hx-feat-banner:hover .ci{ color:#7fe4d8; }
.hx-bizc.hx-feat-banner:hover .go{ color:#fff; transform:translateX(6px); }
.hx-feat-side{ flex:0 1 38%; position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-end; gap:24px; text-align:right; }
.hx-feat-ghost{ font-family:var(--sans); font-weight:800; font-size:clamp(40px,4.8vw,68px); line-height:1; letter-spacing:.01em;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.34); transition:.5s ease; white-space:nowrap; }
.hx-bizc.hx-feat-banner:hover .hx-feat-ghost{ -webkit-text-stroke-color:#5fd3c6; color:rgba(95,211,198,.14); }
.hx-feat-tags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.hx-feat-tags span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.26); padding:8px 15px; border-radius:50px; transition:.3s; }
.hx-bizc.hx-feat-banner:hover .hx-feat-tags span{ border-color:rgba(127,228,216,.5); color:#fff; }
@media(max-width:991px){
  .hx-bizc.hx-feat-banner{ flex-direction:column; align-items:flex-start; gap:30px; padding:38px 28px; }
  .hx-feat-side{ align-items:flex-start; text-align:left; }
  .hx-feat-tags{ justify-content:flex-start; }
  .hx-feat-ghost{ font-size:clamp(34px,9vw,52px); }
}

/* ============================================================
   49. 전 사이트 텍스트 가독성 표준 (피처 배너 기준으로 일괄 상향)
   - 카드 본문: 16px · weight 400 · 진한 색(#4c5e64) · 행간 1.72+
   - 카드 제목: +2~3px / eyebrow: 12~13px
   ============================================================ */
/* --- 본문 상향 --- */
.timeline-inner .content .top p,
.hx-choose p,
.service-item.style-3 .desc,
.hx-step-c p,
.kp p, .bitem p, .val p,
.hx-bizc p,
.hx-vf .val p,
#page-brand .kp p, #page-brand .brow .bitem p{
  font-size:16px; font-weight:400; color:#4c5e64; line-height:1.74; }
.contact-item.style-2 p{ font-size:16px; font-weight:400; color:#4c5e64; max-width:250px; }
.contact-item.style-2 .contact-list li a{ font-size:17px; }
.service-item.style-1 .desc{ font-size:15.5px; font-weight:400; color:rgba(255,255,255,.88); }
#careers-talent .vals .val p{ font-size:15.5px; font-weight:400; color:rgba(255,255,255,.95); line-height:1.66; }
#careers-talent .vals .val:hover p{ max-height:280px; }
.h8-hero-box-content .desc{ font-size:16px; font-weight:400; }
.lead2{ font-size:17px!important; }
.dark .lead{ color:rgba(255,255,255,.88)!important; }
.dark .lead2{ color:rgba(255,255,255,.85)!important; }
/* 호버 시 흰 글자 유지 (틸 채움 카드) */
.hx-bizc:hover p{ color:rgba(255,255,255,.92); }
#page-brand .kp:hover p, #page-brand .brow .bitem:hover p{ color:rgba(255,255,255,.92); }
.service-item.style-3:hover .desc{ color:rgba(255,255,255,.92); }
/* --- 제목 상향 --- */
.timeline-inner .content .top .title{ font-size:22px; }
.contact-item.style-2 .contact-title{ font-size:24px; }
.service-item.style-1 .service-content .title{ font-size:24px; }
.hx-choose h4{ font-size:22px; }
.service-item.style-3 .service-title .title{ font-size:25px; }
.hx-step-c h4{ font-size:22px; }
.kp h4{ font-size:22px; }
.bitem h5{ font-size:20px; }
.val h4{ font-size:22px; }
.hx-bizc h3{ font-size:26px; }
.hx-vf .val h4{ font-size:22px; }
#page-brand .kp h4, #page-brand .brow .bitem h5{ font-size:21px; flex-basis:212px; }
#careers-talent .vals .val h4{ font-size:24px; }
/* --- eyebrow/라벨 상향 --- */
.hx-bizc .ci{ font-size:13px; }
.hx-vf .val .vn{ font-size:12px; }
#careers-talent .vals .val .vn{ font-size:12px; }
.hx-srv-no{ font-size:12.5px!important; }
@media(max-width:720px){
  #page-brand .kp h4, #page-brand .brow .bitem h5{ flex-basis:auto; }
}

/* ============================================================
   50. [메인] CEO 인용구 섹션 배경 분리 — 04/Signature(딥 네이비)와 차별화
   .hx-quote-sec 로만 스코프 — 다른 .blk.dark 섹션에는 영향 없음
   ============================================================ */
.blk.dark.hx-quote-sec{ position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0d3537 0%,#155c5c 62%,#1d7f7f 145%); }
.hx-quote-sec::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 1px, transparent 1px 30px); }
.hx-quote-sec .wrap{ position:relative; z-index:2; }
/* 틸 배경 위 하이라이트는 더 밝은 민트로 (대비 확보) */
.hx-quote-sec .pullquote .q .am{ color:#8ef0e2; }
.hx-quote-sec .pullquote .by{ color:rgba(255,255,255,.78); }
/* 인용구 박스 자체의 네이비 배경 제거 (이 섹션 한정 — 그라데이션이 보이도록) */
.hx-quote-sec .pullquote{ background:transparent; }

/* ============================================================
   51. [메인] 05/Global Footprint 카드 재설계
   - 아이콘 배지 + 그라데이션 국가코드 + 가독성 표준 타이포
   - 진입: 좌측 2장은 왼쪽에서, 우측 2장은 오른쪽에서 중앙으로
   ============================================================ */
.metrics.hx-gf{ gap:20px; background:transparent; border:0; overflow:visible; }
.hx-gf .metric{ background:#fff; border:1px solid var(--line-soft); border-radius:18px; padding:44px 28px 40px;
  transition:transform .65s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease, opacity .75s ease; }
.hx-gf .metric:hover{ transform:translateY(-8px); border-color:var(--teal); box-shadow:0 36px 62px -36px rgba(30,138,138,.35); transition-delay:0s!important; }
.hx-gf .metric .v{ font-family:var(--sans); font-weight:800; font-size:clamp(44px,4.6vw,64px); line-height:1;
  background:linear-gradient(135deg,var(--teal) 10%,#0c1e21 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hx-gf .metric .l{ font-size:20px; font-weight:600; color:var(--ink); margin-top:14px; letter-spacing:-.01em; }
.hx-gf .metric .ctx{ font-size:16px; font-weight:400; color:#4c5e64; line-height:1.7; margin-top:10px; }
/* 양방향 롤 진입/이탈 — 화면 중심 진입 시 좌우에서 굴러 들어오고,
   중심을 벗어나면 다시 좌우로 갈라지며 사라짐 (.hx-roll-in 토글은 JS) */
.hx-gf .metric{ opacity:0; will-change:transform,opacity;
  transition:transform .85s cubic-bezier(.22,.75,.25,1), opacity .55s ease, box-shadow .45s ease, border-color .45s ease; }
.hx-gf .metric:nth-child(1){ transform:translateX(-170px) rotate(-22deg) scale(.9); }
.hx-gf .metric:nth-child(2){ transform:translateX(-170px) rotate(-22deg) scale(.9); transition-delay:.14s; }
.hx-gf .metric:nth-child(3){ transform:translateX(170px) rotate(22deg) scale(.9);  transition-delay:.14s; }
.hx-gf .metric:nth-child(4){ transform:translateX(170px) rotate(22deg) scale(.9); }
.hx-gf.hx-roll-in .metric{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .hx-gf .metric{ opacity:1!important; transform:none!important; transition:none; }
}
@media(max-width:575px){ .hx-gf .metric{ padding:34px 24px 30px; } }

/* ============================================================
   52. [메인] 02/At a Glance — 글래스 카드 + 플립 진입 + 카운트업 강화
       + 호버 확대 + 배경 펄스
   ============================================================ */
.hx-ff-band{ gap:18px; border:0!important; overflow:visible; perspective:1100px; }
.hx-ff{ position:relative; border:1px solid rgba(127,228,216,.18)!important; border-radius:16px; padding:46px 24px 40px;
  background:rgba(255,255,255,.055); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .6s ease, background .45s ease, border-color .45s ease, box-shadow .45s ease; }
.hx-ff-n{ position:absolute; top:16px; left:18px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:#5fd3c6; opacity:.85; }
.hx-ff-v{ transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.hx-ff-v small{ color:#5fd3c6; }
.hx-ff-l{ font-size:16px; margin-top:14px; color:rgba(255,255,255,.78); }
.hx-ff:hover{ background:linear-gradient(180deg, rgba(30,138,138,.3), rgba(30,138,138,.12));
  border-color:rgba(127,228,216,.55)!important; transform:translateY(-6px);
  box-shadow:0 32px 60px -30px rgba(0,0,0,.5); transition-delay:0s!important; }
.hx-ff:hover .hx-ff-v{ transform:scale(1.06); }
/* 플립 진입 (아래에서 일어서며 스태거) */
.hx-ff.rv{ opacity:0; transform:rotateX(-56deg) translateY(34px); transform-origin:center bottom; }
.hx-ff.rv:nth-child(2){ transition-delay:.12s; }
.hx-ff.rv:nth-child(3){ transition-delay:.24s; }
.hx-ff.rv:nth-child(4){ transition-delay:.36s; }
.hx-ff.rv.in{ opacity:1; transform:none; }
/* KR·EU·US 글자 스태거 */
.hx-ff-seq .sq{ display:inline-block; opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.hx-ff.in .hx-ff-seq .sq{ opacity:1; transform:none; }
.hx-ff.in .hx-ff-seq .sq:nth-child(1){ transition-delay:.5s; }
.hx-ff.in .hx-ff-seq .sq:nth-child(2){ transition-delay:.62s; }
.hx-ff.in .hx-ff-seq .sq:nth-child(3){ transition-delay:.74s; }
.hx-ff.in .hx-ff-seq .sq:nth-child(4){ transition-delay:.86s; }
.hx-ff.in .hx-ff-seq .sq:nth-child(5){ transition-delay:.98s; }
/* 배경: 틸 glow 펄스 + 미세 다이아몬드 패턴 */
.blk.dark.hx-funfact-sec{ position:relative; overflow:hidden; }
.hx-funfact-sec::before{ content:""; position:absolute; right:-14%; top:-34%; width:62%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(30,138,138,.42), transparent 64%);
  animation:hx-glow 6s ease-in-out infinite; pointer-events:none; }
.hx-funfact-sec::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.024) 0 1px, transparent 1px 30px); }
.hx-funfact-sec .wrap{ position:relative; z-index:2; }
@keyframes hx-glow{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.16); } }
@media (prefers-reduced-motion: reduce){
  .hx-funfact-sec::before{ animation:none; }
  .hx-ff.rv{ opacity:1; transform:none; }
  .hx-ff-seq .sq{ opacity:1!important; transform:none!important; }
}

/* ============================================================
   53. [메인] 06/Our Journey — 타임라인(라인+원형 마커) + 좌측 순환 캐러셀
   ============================================================ */
.hx-jr-clip{ position:relative; overflow:hidden; margin-top:26px; }
/* 가로 라인 (원 중심 높이) */
.hx-jr-clip::before{ content:""; position:absolute; left:0; right:0; top:17px; height:1px; background:var(--line); z-index:1; }
.hx-jr-clip .jrow{ display:flex!important; border-top:0!important; margin-top:0!important; will-change:transform; }
.hx-jr-clip .jstep{ flex:0 0 25%; min-width:25%; box-sizing:border-box; position:relative; z-index:2;
  padding:60px 30px 16px!important; border:0!important; text-align:center; }
/* 연도 위 원형 마커 (라인 위에 얹힘) */
.hx-jr-clip .jstep::before{ content:attr(data-n); position:absolute; top:2px; left:50%; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid var(--teal); z-index:3;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13.5px; font-weight:700; color:var(--teal); line-height:1;
  transition:.3s ease; }
.hx-jr-clip .jstep:hover::before{ color:#fff; }
.hx-jr-clip .jstep:hover::before{ background:var(--teal); box-shadow:0 0 0 6px rgba(30,138,138,.15); }
.hx-jr-clip .jstep .jy{ font-size:15px; }
.hx-jr-clip .jstep h4{ font-size:18px; }
.hx-jr-clip .jstep p{ font-size:14.5px; }
@media(max-width:900px){
  .hx-jr-clip .jstep{ flex-basis:50%; min-width:50%; }
}
@media(max-width:575px){
  .hx-jr-clip .jstep{ flex-basis:100%; min-width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .hx-jr-clip .jrow{ transform:none!important; }
}

/* ============================================================
   54. 개인정보처리방침 페이지 (#page-privacy)
   ============================================================ */
#page-privacy .pv{ max-width:860px; margin:0 auto; }
.pv h3{ font-size:21px; font-weight:600; color:var(--ink); margin:46px 0 14px; padding-left:14px; border-left:3px solid var(--teal); letter-spacing:-.01em; }
.pv p{ font-size:16px; color:#4c5e64; line-height:1.8; font-weight:400; margin:0 0 10px; }
.pv ul{ list-style:none; padding:0; margin:4px 0 0; }
.pv li{ position:relative; padding-left:18px; font-size:16px; color:#4c5e64; line-height:1.85; font-weight:400; }
.pv li::before{ content:""; position:absolute; left:2px; top:14px; width:6px; height:6px; border-radius:50%; background:var(--teal); }
.pv p:last-child{ margin-top:42px; font-family:var(--mono); font-size:13.5px; color:var(--muted); }
footer .fbot a[onclick]{ cursor:pointer; }

/* ============================================================
   55. 푸터 타이포 상향 — Bexon 푸터 규격 (크고 직관적으로)
   ============================================================ */
footer{ padding:88px 0 0!important; }
footer .fgrid{ gap:56px 48px; }
/* 컬럼 헤딩: mono 점자 라벨 → Bexon식 큰 세미볼드 화이트 */
footer .fcol h5{ font-family:var(--sans); font-size:19px; font-weight:600; letter-spacing:-.01em;
  text-transform:none; color:#fff; margin-bottom:26px; }
/* 링크·본문: 14px 라이트 → 16px 레귤러 */
footer .fcol a, footer .fcol p{ font-size:16px; font-weight:400; color:rgba(255,255,255,.74); margin-bottom:16px; line-height:1.6; }
footer .fcol a:hover{ color:#5fd3c6; }
/* 브랜드 컬럼 */
footer .fbrand .mk{ font-family:var(--sans); font-size:30px; font-weight:800; letter-spacing:.01em; }
footer .fbrand .sl{ font-family:var(--sans); font-style:normal; font-size:16px; letter-spacing:.14em; text-transform:uppercase; color:#5fd3c6; margin-top:12px; }
/* 하단 바 */
footer .fbot{ padding:28px 0; font-size:14px; color:rgba(255,255,255,.55); }
footer .fbot a{ font-size:14px; color:rgba(255,255,255,.6); }
footer .fbot a:hover{ color:#5fd3c6; }
@media(max-width:767px){
  footer{ padding:64px 0 0!important; }
  footer .fgrid{ gap:40px 32px; }
  footer .fcol h5{ font-size:18px; margin-bottom:18px; }
}
/* 회사 정보 컬럼은 5줄이라 살짝 타이트하게 */
footer .fcol.finfo p{ font-size:15px; margin-bottom:9px; }

/* ============================================================
   56. [메인] CTA(Get in Touch) 배경 분리 — 푸터(딥 네이비)와 구분되는 딥 틸
   .hx-cta-sec 로만 스코프 — 다른 .blk.dark 영향 없음 / 화이트 텍스트 가시성 유지
   ============================================================ */
.blk.dark.hx-cta-sec{ position:relative; overflow:hidden;
  background:linear-gradient(150deg,#11494b 0%,#177273 55%,#1e8a8a 130%); }
.blk.dark.hx-cta-sec::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 1px, transparent 1px 30px); }
.blk.dark.hx-cta-sec .wrap{ position:relative; z-index:2; }
/* 틸 배경 위 eyebrow는 더 밝은 민트로 (인라인 amber 색 대체) */
.hx-cta-sec .eyebrow{ color:#8ef0e2!important; }

/* ============================================================
   57. [연혁] 항목별 실사 이미지 — 2021 원천을 찾던 시간
   ============================================================ */
.hx-tl-img.hx-h21a{ background:url('../images/history/source-time-01.webp') center/cover no-repeat; }
.hx-tl-img.hx-h21b{ background:url('../images/history/source-time-02.webp') center/cover no-repeat; }
/* 사진 위 라벨 가독용 하단 그라데이션 (기존 radial 하이라이트 대체) */
.hx-tl-img.hx-h21a::before, .hx-tl-img.hx-h21b::before{ background:linear-gradient(to top, rgba(6,17,20,.5), transparent 55%); }
/* [연혁] 2022 흐름을 거꾸로 돌리다 */
.hx-tl-img.hx-h22a{ background:url('../images/history/flow-turn-01.webp') center/cover no-repeat; }
.hx-tl-img.hx-h22b{ background:url('../images/history/flow-turn-02.webp') center/cover no-repeat; }
.hx-tl-img.hx-h22a::before, .hx-tl-img.hx-h22b::before{ background:linear-gradient(to top, rgba(6,17,20,.5), transparent 55%); }
/* [연혁] 2024 헥사 클로버 설립 */
.hx-tl-img.hx-h24a{ background:url('../images/history/establishment-01.webp') center/cover no-repeat; }
.hx-tl-img.hx-h24b{ background:url('../images/history/establishment-02.webp') center/cover no-repeat; }
.hx-tl-img.hx-h24a::before, .hx-tl-img.hx-h24b::before{ background:linear-gradient(to top, rgba(6,17,20,.5), transparent 55%); }
/* [연혁] 2025 부품·소재 수출로 고도화 */
.hx-tl-img.hx-h25a{ background:url('../images/history/advanced-01.webp') center/cover no-repeat; }
.hx-tl-img.hx-h25b{ background:url('../images/history/advanced-02.webp') center/cover no-repeat; }
.hx-tl-img.hx-h25a::before, .hx-tl-img.hx-h25b::before{ background:linear-gradient(to top, rgba(6,17,20,.5), transparent 55%); }
/* [연혁] 2026 글로벌 역량을 증명하다 (.hi 항목 — 강한 선택자 필요) */
.timeline-inner .hx-tl-img.hx-h26a{ background:url('../images/history/global-01.webp') center/cover no-repeat!important; }
.timeline-inner .hx-tl-img.hx-h26b{ background:url('../images/history/global-02.webp') center/cover no-repeat!important; }
.hx-tl-img.hx-h26a::before, .hx-tl-img.hx-h26b::before{ background:linear-gradient(to top, rgba(6,17,20,.5), transparent 55%); }
/* [연혁] 2026 EZ Water, 그리고 PRAMENO */
.timeline-inner .hx-tl-img.hx-h26pa{ background:url('../images/history/ezwater-prameno-01.webp') center/cover no-repeat!important; }
.timeline-inner .hx-tl-img.hx-h26pb{ background:url('../images/history/ezwater-prameno-02.webp') center/cover no-repeat!important; }
.hx-tl-img.hx-h26pa::before, .hx-tl-img.hx-h26pb::before{ background:linear-gradient(to top, rgba(6,17,20,.5), transparent 55%); }
/* [연혁] NEXT 끊임없이 도전하는 기업으로 */
.timeline-inner .hx-tl-img.hx-h27a{ background:url('../images/history/challenge-01.webp') center/cover no-repeat!important; }
.timeline-inner .hx-tl-img.hx-h27b{ background:url('../images/history/challenge-02.webp') center/cover no-repeat!important; }
.hx-tl-img.hx-h27a::before, .hx-tl-img.hx-h27b::before{ background:linear-gradient(to top, rgba(6,17,20,.5), transparent 55%); }

/* [연혁] 텍스트 박스 호버 확대 1.3배 (이탈 시 원복) */
.timeline-inner .content{ position:relative; transition:transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease; }
.timeline-inner .content:hover{ transform:scale(1.3); z-index:30; box-shadow:0 44px 88px -44px rgba(12,30,33,.5); }
@media(hover:none){ .timeline-inner .content:hover{ transform:none; box-shadow:none; } }

/* [연혁] 텍스트 박스 확대 시 연도·원형 마커도 함께 1.3배 */
.timeline-inner .date{ transition:transform .38s cubic-bezier(.2,.7,.2,1), color .3s ease; }
.timeline-inner::after{ transition:transform .38s cubic-bezier(.2,.7,.2,1); }
.timeline-inner:nth-child(odd) .date{ transform-origin:left center; }
.timeline-inner:nth-child(even) .date{ transform-origin:right center; }
.timeline-inner:has(.content:hover) .date{ transform:scale(1.3); color:var(--teal); }
.timeline-inner:has(.content:hover)::after{ transform:scale(1.3); }
@media(hover:none){
  .timeline-inner:has(.content:hover) .date{ transform:none; }
  .timeline-inner:has(.content:hover)::after{ transform:none; }
}

/* ============================================================
   58. [메인] 히어로 풀블리드 배경 이미지 (섹션 전체 채움)
   ============================================================ */
.h8-hero-ko .h8-hero-inner{ background:#0c1e21; }
/* 다이아몬드 패턴 레이어 → 타이틀 가독용 스크림으로 전환 */
.h8-hero-ko .h8-hero-bg-image{ background:linear-gradient(180deg, rgba(6,17,20,.55) 0%, rgba(6,17,20,.16) 46%, rgba(6,17,20,.42) 100%); }
.h8-hero-ko .h8-hero-title{ color:#fff; text-shadow:0 4px 28px rgba(6,17,20,.45); }
.h8-hero-ko .h8-hero-title .ht1, .h8-hero-ko .h8-hero-title .ht2{ color:#fff; }

/* ============================================================
   59. [회사개요] 핵심 지표 3종 — 개별 텍스트 박스(카드)로 분리
   ============================================================ */
.hx-about2-stats{ display:grid!important; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; }
.hx-about2-stats .s{ background:#fff; border:1px solid var(--line-soft); border-radius:14px; padding:22px 18px 20px; text-align:center;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease; }
.hx-about2-stats .s:hover{ transform:translateY(-6px); border-color:var(--teal); box-shadow:0 26px 48px -28px rgba(30,138,138,.35); }
.hx-about2-stats .v{ font-size:32px; }
.hx-about2-stats .l{ font-size:14.5px; font-weight:400; color:#4c5e64; margin-top:9px; }
@media(max-width:575px){ .hx-about2-stats{ grid-template-columns:1fr; } .hx-about2-stats .s{ padding:18px; } }

/* ============================================================
   60. [회사소개] 페이지 히어로 배경 이미지 (Possibility)
   ============================================================ */
#page-about .pagehero{ background:#0c1e21 url('../images/about/possibility.webp') center/cover no-repeat; }
#page-about .pagehero::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(160deg, rgba(8,22,25,.72) 0%, rgba(10,42,45,.5) 60%, rgba(8,22,25,.62) 100%); }

/* [사업영역] 페이지 히어로 배경 이미지 (World. Value) */
#page-business .pagehero{ background:#0c1e21 url('../images/service/world-value.webp') center/cover no-repeat; }
#page-business .pagehero::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(160deg, rgba(8,22,25,.72) 0%, rgba(10,42,45,.5) 60%, rgba(8,22,25,.62) 100%); }

/* [브랜드] 페이지 히어로 배경 이미지 (Company makes) */
#page-brand .pagehero{ background:#0c1e21 url('../images/brands/company-makes.webp') center/cover no-repeat; }
#page-brand .pagehero::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(160deg, rgba(8,22,25,.72) 0%, rgba(10,42,45,.5) 60%, rgba(8,22,25,.62) 100%); }

/* [인재채용] 페이지 히어로 배경 이미지 (Next chapter) */
#page-careers .pagehero{ background:#0c1e21 url('../images/careers/next-chapter.webp') center/cover no-repeat; }
#page-careers .pagehero::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(160deg, rgba(8,22,25,.72) 0%, rgba(10,42,45,.5) 60%, rgba(8,22,25,.62) 100%); }

/* [문의하기] 페이지 히어로 배경 이미지 (Business Inquiry) */
#page-contact .pagehero{ background:#0c1e21 url('../images/contact/business-inquiry.webp') center/cover no-repeat; }
#page-contact .pagehero::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(160deg, rgba(8,22,25,.72) 0%, rgba(10,42,45,.5) 60%, rgba(8,22,25,.62) 100%); }

/* ============================================================
   61. 모바일 최적화 보정 (전체 점검 결과)
   ============================================================ */
@media(max-width:767px){
  /* 홈 히어로: 모바일 크롭에서 밝은 영역 위 타이틀 가독 — 스크림+섀도 강화 */
  .h8-hero-ko .h8-hero-bg-image{
    background:linear-gradient(180deg, rgba(6,17,20,.68) 0%, rgba(6,17,20,.56) 50%, rgba(6,17,20,.62) 100%); }
  .h8-hero-ko .h8-hero-title{ text-shadow:0 2px 10px rgba(4,12,14,.85), 0 10px 44px rgba(4,12,14,.7); }
  /* 타이틀: 히어로 세로 중앙 + 가로 중앙 (4줄 배치) */
  .h8-hero-ko .h8-hero-item-wrapper{ justify-content:center; padding-top:0; padding-bottom:40px; }
  .h8-hero-ko .h8-hero-title .ht1, .h8-hero-ko .h8-hero-title .ht2{ text-align:center!important; }
  /* 글자 키우고 / 히어로 높이 축소 */
  .h8-hero-ko .h8-hero-title{ font-size:clamp(44px,12vw,64px); line-height:1.12; }
  .h8-hero-ko .h8-hero-title .ht2{ margin-top:10px; }
  .h8-hero-ko .h8-hero-inner, .h8-hero-ko .h8-hero-item-wrapper{ min-height:72vh!important; }
  /* At a Glance: KR·EU·US 한 줄 유지 (4번 카드 값만 축소) */
  .hx-ff:nth-child(4) .hx-ff-v{ font-size:clamp(24px,7.2vw,32px); letter-spacing:-.01em; white-space:nowrap; }
}

/* ============================================================
   62. [메인] At a Glance A안 — 화이트 카드 반전 + 스포트라이트 순환
   ============================================================ */
.hx-ff{ background:#fff!important; border:1px solid rgba(255,255,255,.85)!important;
  -webkit-backdrop-filter:none; backdrop-filter:none; }
.hx-ff-n{ color:var(--teal); opacity:.9; }
.hx-ff-v{ background:linear-gradient(135deg,var(--teal) 10%,#0c1e21 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.hx-ff-v small{ -webkit-text-fill-color:var(--teal); color:var(--teal); }
.hx-ff-l{ color:#4c5e64; }
/* KR·EU·US 한 줄 유지 (전 해상도) */
.hx-ff:nth-child(4) .hx-ff-v{ font-size:clamp(26px,2.7vw,46px); white-space:nowrap; letter-spacing:-.015em; }
/* 스포트라이트 활성 (순환 .hx-ff-on / 호버 동일) */
.hx-ff.hx-ff-on, .hx-ff:hover{ background:linear-gradient(160deg,#177273 0%,#1e8a8a 100%)!important;
  border-color:rgba(127,228,216,.6)!important; transform:translateY(-8px);
  box-shadow:0 34px 64px -30px rgba(0,0,0,.5); transition-delay:0s!important; }
.hx-ff.hx-ff-on .hx-ff-v, .hx-ff:hover .hx-ff-v{ background:none; color:#fff; -webkit-text-fill-color:#fff; transform:scale(1.06); }
.hx-ff.hx-ff-on .hx-ff-v small, .hx-ff:hover .hx-ff-v small{ color:#aef3e8; -webkit-text-fill-color:#aef3e8; }
.hx-ff.hx-ff-on .hx-ff-n, .hx-ff:hover .hx-ff-n{ color:#aef3e8; }
.hx-ff.hx-ff-on .hx-ff-l, .hx-ff:hover .hx-ff-l{ color:rgba(255,255,255,.88); }
@media(max-width:767px){
  .hx-ff:nth-child(4) .hx-ff-v{ font-size:clamp(24px,7.2vw,32px); }
}

/* ============================================================
   63. [메인] Global Footprint 카드 배경 분리 — 흰 섹션 위 연민트 카드
   (동적 환경(롤 진입·호버)은 변경하지 않음 — 배경/보더만)
   ============================================================ */
.hx-gf .metric{ background:linear-gradient(180deg,#f2faf6 0%,#e7f3ee 100%);
  border-color:rgba(30,138,138,.18); }
.hx-gf .metric:hover{ background:#fff; }

/* ============================================================
   64. [메인] 03/Business 양방향 모임/흩어짐 (스크롤 연동 — .hx-biz-in 토글)
   진입: 좌/우/아래에서 가운데로 모임 · 이탈: 다시 밖으로 던져짐
   ============================================================ */
.hx-bizc-grid > *{ will-change:transform,opacity;
  transition:transform .8s cubic-bezier(.22,.75,.25,1), opacity .55s ease,
    background .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .5s ease; }
.hx-bizc-grid > *:nth-child(1){ opacity:0; transform:translateX(-170px) rotate(-7deg) scale(.94); }
.hx-bizc-grid > *:nth-child(2){ opacity:0; transform:scale(.72); transition-delay:.08s; }
.hx-bizc-grid > *:nth-child(3){ opacity:0; transform:translateX(170px) rotate(7deg) scale(.94); }
.hx-bizc-grid > *:nth-child(4){ opacity:0; transform:translateY(140px) scale(.97); transition-delay:.1s; }
.hx-bizc-grid.hx-biz-in > *{ opacity:1; }
.hx-bizc-grid.hx-biz-in > *:not(:hover){ transform:none; } /* 호버 리프트 보존 */
.hx-bizc-grid.hx-biz-in > *:hover{ transition-delay:0s!important; }
.hx-bizc-grid.hx-biz-in > .hx-bizc:hover{ transform:translateY(-10px); }
.hx-bizc-grid.hx-biz-in > .hx-feat-banner:hover{ transform:translateY(-8px); }
@media (prefers-reduced-motion: reduce){
  .hx-bizc-grid > *{ opacity:1!important; transform:none!important; transition:none; }
}

/* ============================================================
   65. [인재채용] 인재상 카드 배경 이미지 (find/Connection/make/challenge)
   기존 ::after 패턴+틸 스윕 오버레이가 텍스트 가독을 유지
   ============================================================ */
#careers-talent .vals .val:nth-child(1){ background:#0c1e21 url('../images/careers/talent-find.webp') center/cover no-repeat; }
#careers-talent .vals .val:nth-child(2){ background:#0c1e21 url('../images/careers/talent-connection.webp') center/cover no-repeat; }
#careers-talent .vals .val:nth-child(3){ background:#0c1e21 url('../images/careers/talent-make.webp') center/cover no-repeat; }
#careers-talent .vals .val:nth-child(4){ background:#0c1e21 url('../images/careers/talent-challenge.webp') center/cover no-repeat; }
/* 사진 위 라벨·제목 가독 보강: 하단 그라데이션을 살짝 더 진하게 */
#careers-talent .vals .val::after{
  background:
    linear-gradient(180deg, rgba(6,17,20,.35) 0%, transparent 30%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, transparent 30%, rgba(8,30,32,.55) 60%, rgba(30,138,138,.95) 100%);
  background-size:auto, auto, 100% 220%; background-position:0 0,0 0,0 100%; }

/* ============================================================
   66. [인재채용] 함께하고 싶은 동료 — 카드 배경 변경 + 맞춤 아이콘
   ============================================================ */
#careers-talent .brow .bitem{ background:linear-gradient(180deg,#f2faf6 0%,#e7f3ee 100%);
  border-color:rgba(30,138,138,.18); }
#careers-talent .brow .bitem:hover{ background:#fff; }
#careers-talent .brow .bi-n{ width:58px; min-width:58px; height:58px; padding:0; border-radius:50%; background:#fff;
  border:1px solid rgba(30,138,138,.22); }
#careers-talent .brow .bi-n i{ font-size:26px; line-height:1; }
#careers-talent .brow .bitem:hover .bi-n{ background:var(--teal); border-color:var(--teal); }

/* [인재채용] 채용공고 — 채용 부문 카드 배경 변경 (동료 카드와 동일 톤) */
#careers-jobs .brow .bitem{ background:linear-gradient(180deg,#f2faf6 0%,#e7f3ee 100%);
  border-color:rgba(30,138,138,.18); }
#careers-jobs .brow .bitem:hover{ background:#fff; }

/* [사업영역] 글로벌 트레이딩·부품소재 수출·화장품 신사업 — 카드 배경 변경 */
#business-trading .kp, #business-trading .brow .bitem,
#business-components .kp, #business-components .brow .bitem,
#business-cosmetics .kp, #business-cosmetics .brow .bitem{
  background:linear-gradient(180deg,#f2faf6 0%,#e7f3ee 100%);
  border-color:rgba(30,138,138,.18); }
#business-trading .kp:hover, #business-trading .brow .bitem:hover,
#business-components .kp:hover, #business-components .brow .bitem:hover,
#business-cosmetics .kp:hover, #business-cosmetics .brow .bitem:hover{ background:#fff; }

/* ============================================================
   67. [경영이념] 가치 카드 — 배경 분리 + 양방향 3D 스와이프 (.hx-vf-in 토글)
   진입: 좌/우 열에서 회전하며 모임 · 이탈: 다시 회전하며 흩어짐
   ============================================================ */
.hx-vf .val{ background:linear-gradient(180deg,#f2faf6 0%,#e7f3ee 100%)!important;
  border-color:rgba(30,138,138,.18)!important;
  transition:transform .8s cubic-bezier(.22,.75,.25,1), opacity .55s ease,
    border-color .45s ease, box-shadow .45s ease, background .45s ease; }
.hx-vf .val:hover{ background:#fff!important; }
.hx-vf .val .hx-vf-ic{ background:#fff; border:1px solid rgba(30,138,138,.2); }
/* 흩어진 기본 상태: 좌측 열(1·3)은 왼쪽에서, 우측 열(2·4)은 오른쪽에서 */
.hx-vf .val:nth-child(odd){ opacity:0; transform:perspective(1300px) rotateY(-45deg) translateX(-90px) scale(.94); }
.hx-vf .val:nth-child(even){ opacity:0; transform:perspective(1300px) rotateY(45deg) translateX(90px) scale(.94); transition-delay:.1s; }
.hx-vf .val:nth-child(3){ transition-delay:.1s; }
.hx-vf .val:nth-child(4){ transition-delay:.2s; }
/* 진입(모임) 상태 */
.hx-vf.hx-vf-in .val{ opacity:1; }
.hx-vf.hx-vf-in .val:not(:hover){ transform:none; }
.hx-vf.hx-vf-in .val:hover{ transform:translateY(-8px); transition-delay:0s!important; }
@media (prefers-reduced-motion: reduce){
  .hx-vf .val{ opacity:1!important; transform:none!important; transition:none; }
}

/* ============================================================
   68. [브랜드] 행 박스 재설계 — 높이 정상화 + 화살표 칩 통일 + 가시성
   원인: ① column 레이아웃에서 flex-basis 280px가 '높이'로 적용
        ② 프로세스 연결원(58px 흰 원) 스타일이 1·2번 행 ::after에 누수
   ============================================================ */
/* ① 높이 정상화: 내용에 맞는 컴팩트 행 */
#page-brand .kpgrid .kp{ flex:0 0 auto; max-width:none; text-align:left; padding:26px 96px 26px 32px; }
/* ② 호버 화살표를 일관된 '원형 칩 + 화살표'로 재설계 (3개 행 동일) */
#page-brand .kp::after, #page-brand .brow .bitem::after{
  content:"\e916"; font-family:"bexon-icons"!important; font-weight:normal; font-size:17px; color:#fff;
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.5); box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  position:absolute; right:24px; top:50%; transform:translateY(-50%) translateX(26px) scale(.7); opacity:0;
  transition:.45s cubic-bezier(.2,.7,.2,1); z-index:5; pointer-events:none; }
#page-brand .kp:hover::after, #page-brand .brow .bitem:hover::after{
  opacity:1; transform:translateY(-50%) translateX(0) scale(1); }
/* ③ 가시성: 번호 또렷하게 + 본문 진하게 (제목·본문은 가독성 표준 유지) */
#page-brand .kp .kn, #page-brand .brow .bitem .bi-n{ font-size:36px; min-width:54px; opacity:.8; }
#page-brand .kp:hover .kn, #page-brand .brow .bitem:hover .bi-n{ opacity:1; }
@media(max-width:720px){
  #page-brand .kpgrid .kp{ padding:24px 26px; }
  #page-brand .kp::after, #page-brand .brow .bitem::after{ display:none; }
}

/* ============================================================
   69. [조직도] 재설계 — 트리 커넥터 + 통일 카드 + 직관적 위계
   ============================================================ */
/* CEO 노드 */
#about-org .org .ceo-box{ position:relative; z-index:2; padding:18px 40px; font-size:17px;
  box-shadow:0 22px 44px -22px rgba(12,30,33,.5); }
/* CEO ↓ 수직선 */
#about-org .org-line{ width:2px; height:36px; background:rgba(30,138,138,.5); margin:0 auto; }
/* 가로 분기선 + 본부별 수직 스텁 */
#about-org .org-row{ position:relative; margin-top:0; padding-top:36px; gap:28px; align-items:stretch; }
#about-org .org-row::before{ content:""; position:absolute; top:0; left:16.7%; right:16.7%; height:2px;
  background:rgba(30,138,138,.5); }
#about-org .org-col{ position:relative; display:flex; flex-direction:column; }
#about-org .org-col::before{ content:""; position:absolute; top:-36px; left:50%; transform:translateX(-50%);
  width:2px; height:36px; background:rgba(30,138,138,.5); }
/* 접점 마커 (분기선 위 작은 원) */
#about-org .org-col::after{ content:""; position:absolute; top:-41px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--teal); z-index:2; }
/* 본부 카드 통일 */
#about-org .org-head{ padding:16px 14px; font-size:17px; letter-spacing:-.01em; border-radius:14px 14px 0 0; position:relative; }
#about-org .org-head.amber{ background:linear-gradient(135deg,#0c1e21 0%,#14474a 100%); }
#about-org .org-head.amber::after{ content:"핵심 신사업"; position:absolute; top:-12px; right:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:#fff;
  background:var(--teal); border-radius:50px; padding:4px 10px; box-shadow:0 8px 16px -8px rgba(30,138,138,.6); }
#about-org .org-sub{ flex:1; background:#fff; border-radius:0 0 14px 14px; padding:12px 14px 14px;
  font-size:15px; color:#4c5e64; box-shadow:0 24px 44px -34px rgba(12,30,33,.3); }
/* 부서 항목: 불릿 + 구분선 + 호버 */
#about-org .org-sub div{ position:relative; text-align:left; padding:11px 8px 11px 28px;
  border-bottom:1px dashed rgba(12,30,33,.1); border-radius:8px; transition:.2s ease; }
#about-org .org-sub div:last-child{ border-bottom:0; }
#about-org .org-sub div::before{ content:""; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--teal); }
#about-org .org-sub div:hover{ background:#f2faf6; color:var(--ink); }
/* 모바일: 세로 스택 시 커넥터 정리 */
@media(max-width:760px){
  #about-org .org-row{ padding-top:0; margin-top:26px; gap:20px; }
  #about-org .org-row::before, #about-org .org-col::before, #about-org .org-col::after{ display:none; }
  #about-org .org-line{ height:26px; }
}

/* ============================================================
   70. [메인] 히어로 이미지 슬라이드 — 3장 크로스페이드 + 켄번즈 줌
   ============================================================ */
.hx-hero-slides{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.hx-hero-slide{ position:absolute; inset:0; background-position:center; background-size:cover;
  opacity:0; transition:opacity 1.2s ease; will-change:opacity,transform; }
.hx-hero-slide.on{ opacity:1; animation:hx-kb 6.5s ease-out forwards; }
@keyframes hx-kb{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
/* 스크림·콘텐츠 적층 순서 보장 */
.h8-hero-ko .h8-hero-bg-image{ z-index:1; }
.h8-hero-ko .wrap{ position:relative; z-index:2; }
@media (prefers-reduced-motion: reduce){
  .hx-hero-slide.on{ animation:none; }
}

/* [헤더] 로고 워드마크 — 데스크톱 1.5배(34.5px), 모바일 단계별 최적화 */
#hdr .logo .mark{ font-size:34.5px; }
@media(max-width:900px){ #hdr .logo .mark{ font-size:29px; } }
@media(max-width:480px){ #hdr .logo .mark{ font-size:24px; } }
@media(max-width:360px){ #hdr .logo .mark{ font-size:21px; } }

/* ============================================================
   71. [푸터] 모바일 재배치 — 브랜드·Company 중앙, Menu·Brand 병렬
   ============================================================ */
@media(max-width:767px){
  footer .fgrid{ grid-template-columns:1fr 1fr!important; gap:38px 20px; }
  /* 로고 + 슬로건: 전폭 중앙 */
  footer .fcol.fbrand{ grid-column:1 / -1; text-align:center; }
  /* Menu · Brand: 나란히 병렬 + 각 칸 중앙 정렬 */
  footer .fgrid > .fcol:nth-child(2){ grid-column:1; text-align:center; }
  footer .fgrid > .fcol:nth-child(3){ grid-column:2; text-align:center; }
  /* Company: 전폭 중앙 */
  footer .fcol.finfo{ grid-column:1 / -1; text-align:center; }
  footer .fcol.finfo p{ margin-left:auto; margin-right:auto; }
  /* 하단 바도 중앙 정렬로 정돈 */
  footer .fbot{ justify-content:center; text-align:center; }
}

/* [히어로] 줄 단위 스팬 — 데스크톱은 인라인(기존 2줄 유지) */
.h8-hero-title .mln{ display:inline; }
@media(max-width:767px){ .h8-hero-title .mln{ display:block!important; text-align:center!important; } }

/* [메인] 모바일: 03/Business 카드 데이터 중앙 정렬 */
@media(max-width:767px){
  .hx-bizc:not(.hx-feat-banner){ text-align:center!important; }
  .hx-bizc:not(.hx-feat-banner) .hx-bizc-ic{ margin-left:auto; margin-right:auto; }
}

/* [메인] 모바일: 화장품 신사업 피처 배너 중앙 정렬 + 태그 한 줄 */
@media(max-width:767px){
  .hx-bizc.hx-feat-banner{ align-items:center; text-align:center; }
  .hx-feat-main{ text-align:center; }
  .hx-bizc.hx-feat-banner p{ margin-left:auto; margin-right:auto; }
  .hx-feat-side{ align-items:center; text-align:center; width:100%; }
  .hx-feat-tags{ justify-content:center; flex-wrap:nowrap; gap:8px; }
  .hx-feat-tags span{ padding:7px 11px; font-size:10.5px; letter-spacing:.05em; white-space:nowrap; }
}

/* [회사소개] 모바일: CEO 인사말 사진 중앙 정렬 */
@media(max-width:900px){
  #about-ceo .ceo-photo{ width:min(260px,78%); justify-self:center; margin-left:auto; margin-right:auto; }
}

/* [회사소개] 모바일: CEO 인사말 — 소제목·제목 중앙 / 본문 양쪽맞춤 */
@media(max-width:900px){
  #about-ceo .ceo-body{ text-align:center; }
  #about-ceo .ceo-body p{ text-align:justify; }
}

/* [회사개요] 모바일: 인증 카드 중앙 정렬 (아이콘 위 / 텍스트 아래) */
@media(max-width:767px){
  #about-overview .hx-award{ flex-direction:column; align-items:center; text-align:center; gap:12px; padding:24px 18px; }
}

/* [회사소개] 모바일: 경영이념 가치 카드 내용 중앙 정렬 */
@media(max-width:767px){
  #about-philosophy .hx-vf .val{ text-align:center!important; }
  #about-philosophy .hx-vf .val .hx-vf-ic{ margin-left:auto; margin-right:auto; }
  #about-philosophy .hx-vf .val .vn{ display:block; }
}

/* ============================================================
   72. [인재채용] Why Join Us 카드 — 배경 분리 + 양방향 플립 (.hx-choose-in 토글)
   ============================================================ */
#careers-overview .hx-choose{ background:linear-gradient(180deg,#f2faf6 0%,#e7f3ee 100%); border-color:rgba(30,138,138,.18); }
#careers-overview .hx-choose:hover{ background:#fff; }
#careers-overview .hx-choose .ic{ background:#fff; border:1px solid rgba(30,138,138,.2); }
#careers-overview .hx-choose:hover .ic{ background:var(--teal); border-color:var(--teal); }
/* 양방향 플립: 진입 시 아래에서 세워지고, 이탈 시 다시 눕는다 */
#careers-overview .hx-choose-grid{ perspective:1300px; }
#careers-overview .hx-choose{ transform-origin:center bottom; opacity:0; transform:rotateX(-74deg) translateY(30px);
  transition:transform .8s cubic-bezier(.2,.75,.25,1), opacity .55s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease; }
#careers-overview .hx-choose:nth-child(2){ transition-delay:.1s; }
#careers-overview .hx-choose:nth-child(3){ transition-delay:.2s; }
#careers-overview .hx-choose:nth-child(4){ transition-delay:.3s; }
#careers-overview .hx-choose-grid.hx-choose-in .hx-choose{ opacity:1; transform:none; }
#careers-overview .hx-choose-grid.hx-choose-in .hx-choose:hover{ transform:translateY(-7px); transition-delay:0s!important; }
@media (prefers-reduced-motion: reduce){
  #careers-overview .hx-choose{ opacity:1!important; transform:none!important; transition:none; }
}