/* =====================================================================
   金和興三頁樣式（首頁 / 公司簡介 / 製造能力）— 「大器」改版
   參考 Chicony ESG / Dong Fang Offshore 風格：大圖、大字、留白、
   柔和進場顯現 + 視差。色系沿用主題藍 #0082C8 + 深藍 #152332，
   並以銅色 #b9772e 點綴呼應「銅鍛造」。jhx- 前綴避免污染其他頁面。
   ===================================================================== */
:root{
  --jhx-primary: var(--color-primary,  #0082C8);
  --jhx-hover:   var(--color-hover,    #006DA8);
  --jhx-dark:    #131c28;
  --jhx-dark2:   #1d2a3a;
  --jhx-accent:  #b9772e;      /* 銅色 */
  --jhx-ink:     #14202e;
  --jhx-body:    #5f6b78;
  --jhx-line:    #e8ecf1;
  --jhx-soft:    #f4f7fa;
  --jhx-pad:     120px;        /* 區段上下留白（大器）*/
  /* 字級系統（rem，root 16px）：同功能用同一變數，維持全站一致 */
  --fs-eyebrow:  .8125rem;     /* 13px 眉標／英文小標籤（大寫間距）*/
  --fs-meta:     1rem;          /* 16px 標籤／圖說／表格／時間軸／數據標籤 */
  --fs-body:     1.125rem;     /* 18px 內文／段落／說明（全站統一）*/
  --fs-lead:     1.25rem;      /* 20px 區段前言／導言 */
}

/* ---------- 進場顯現（僅在 JS 可用時隱藏；無 JS 照常顯示）---------- */
.jhx-js .jhx-reveal{ opacity:0; transform:translateY(46px);
  transition:opacity 1s cubic-bezier(.16,.7,.2,1), transform 1s cubic-bezier(.16,.7,.2,1);
  transition-delay:var(--d,0s); will-change:opacity,transform; }
.jhx-js .jhx-reveal.from-left{  transform:translateX(-56px); }
.jhx-js .jhx-reveal.from-right{ transform:translateX(56px); }
.jhx-js .jhx-reveal.zoom{ transform:scale(.93); }
.jhx-js .jhx-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .jhx-js .jhx-reveal{ opacity:1; transform:none; } }

/* ---------- 區段與標題系統（放大留白與字級）---------- */
.jhx-sec{ padding:var(--jhx-pad) 0; position:relative; }
.jhx-sec--tight{ padding:84px 0; }
.jhx-sec.bg-soft{ background:var(--jhx-soft); }
.jhx-container{ max-width:1200px; margin:0 auto; padding:0 24px; }

.jhx-eyebrow{ display:inline-block; font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:4px;
  text-transform:uppercase; color:var(--jhx-primary); margin:0 0 18px; }
.jhx-eyebrow::before{ content:""; display:inline-block; width:30px; height:2px; vertical-align:middle;
  background:var(--jhx-accent); margin-right:14px; }

.jhx-head{ margin-bottom:64px; }
.jhx-head.center{ text-align:center; }
.jhx-title{ font-size:clamp(2rem, 3.4vw, 2.9rem); font-weight:800; line-height:1.2;
  letter-spacing:.5px; color:var(--jhx-ink); margin:0; }
.jhx-head.center .jhx-title{ position:relative; padding-bottom:26px; }
.jhx-head.center .jhx-title::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:64px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--jhx-primary),var(--jhx-accent)); }
.jhx-sub{ max-width:720px; margin:22px auto 0; color:var(--jhx-body); font-size:var(--fs-lead); line-height:1.95; }
.jhx-text{ color:var(--jhx-body); font-size:var(--fs-body); line-height:2.05; }

/* 文字在深底時 */
.jhx-on-dark .jhx-title, .jhx-on-dark h2, .jhx-on-dark h3{ color:#fff; }
.jhx-on-dark .jhx-text, .jhx-on-dark p{ color:#cfd8e3; }

/* ---------- HERO（高級感：左大字排版 + 右展示框 + Blueprint）---------- */
.jhx-hero{ position:relative; min-height:94vh; display:flex; align-items:center; overflow:hidden;
  background:radial-gradient(120% 120% at 82% 8%, #16263c 0%, #0c1726 55%, #0a121e 100%); }
/* Blueprint 細線格 */
.jhx-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; z-index:1;
  background-image:linear-gradient(rgba(120,180,235,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,180,235,.07) 1px,transparent 1px);
  background-size:46px 46px; }
.jhx-hero .jhx-container{ position:relative; z-index:3; width:100%; }
.jhx-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.jhx-hero-left{ padding:70px 0; }
.jhx-hero-kicker{ display:inline-flex; align-items:center; gap:12px; color:#8fc7ef; font-size:var(--fs-eyebrow); font-weight:700;
  letter-spacing:3px; text-transform:uppercase; margin-bottom:26px; }
.jhx-hero-kicker::before{ content:""; width:34px; height:2px; background:var(--jhx-accent); }
.jhx-hero-en{ margin:0 0 24px; }
.jhx-hero-en span{ display:block; font-weight:800; line-height:.98; letter-spacing:1px; text-transform:uppercase;
  font-size:clamp(2.6rem,6vw,5.2rem); color:#fff; }
.jhx-hero-en span:nth-child(2){ color:transparent; -webkit-text-stroke:1.5px rgba(143,199,239,.85); }
.jhx-hero-en span:nth-child(3){ font-size:clamp(1rem,2vw,1.5rem); font-weight:600; letter-spacing:5px; color:#8fc7ef; margin-top:12px; }
.jhx-hero-divider{ width:64px; height:3px; background:linear-gradient(90deg,var(--jhx-primary),var(--jhx-accent)); margin:6px 0 22px; }
.jhx-hero-zh{ color:#fff; font-size:clamp(1.3rem,2.6vw,2rem); font-weight:700; line-height:1.55; margin:0; }
.jhx-hero-zh .em{ color:#8fc7ef; }
.jhx-hero-desc{ color:#c2cedd; font-size:var(--fs-body); line-height:1.9; max-width:470px; margin:16px 0 32px; }
.jhx-hero-cta .site-button{ margin:0 14px 12px 0; box-shadow:0 12px 30px rgba(0,0,0,.3); }
/* 右：展示框 + 漂浮零件 + CAD */
.jhx-hero-visual{ position:relative; aspect-ratio:1/1; max-width:520px; margin-left:auto; }
.jhx-hero-glow{ position:absolute; inset:-8%; border-radius:50%; z-index:1; filter:blur(12px);
  background:radial-gradient(circle at 55% 45%, rgba(47,140,237,.5), transparent 62%); }
.jhx-hero-photo{ position:absolute; inset:8%; border-radius:18px; overflow:hidden; z-index:2;
  box-shadow:0 40px 90px rgba(0,0,0,.5); border:1px solid rgba(143,199,239,.25); }
.jhx-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; animation:jhxHeroKen 16s ease-out forwards; }
@keyframes jhxHeroKen{ from{ transform:scale(1.1); } to{ transform:scale(1); } }
.jhx-hero-frame{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.jhx-hero-frame::before,.jhx-hero-frame::after{ content:""; position:absolute; width:56px; height:56px; border:2px solid rgba(143,199,239,.6); }
.jhx-hero-frame::before{ left:0; top:0; border-right:0; border-bottom:0; }
.jhx-hero-frame::after{ right:0; bottom:0; border-left:0; border-top:0; }
.jhx-hero-ring{ position:absolute; right:-5%; top:-5%; width:118px; height:118px; border:1px dashed rgba(143,199,239,.5);
  border-radius:50%; z-index:3; animation:jhxSpin 26s linear infinite; }
.jhx-hero-ring::after{ content:""; position:absolute; left:50%; top:-5px; width:9px; height:9px; margin-left:-4px;
  background:var(--jhx-accent); border-radius:50%; }
@keyframes jhxSpin{ to{ transform:rotate(360deg); } }
.jhx-hero-float{ position:absolute; z-index:4; width:34%; border-radius:14px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.15); }
.jhx-hero-float img{ width:100%; height:100%; object-fit:cover; display:block; }
.jhx-hero-float.f1{ left:-8%; top:12%; animation:jhxFloat 6s ease-in-out infinite; }
.jhx-hero-float.f2{ right:-6%; bottom:8%; width:28%; animation:jhxFloat 7.5s ease-in-out infinite reverse; }
@keyframes jhxFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
/* 捲動提示 */
.jhx-scroll-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:4;
  width:26px; height:44px; border:2px solid rgba(255,255,255,.45); border-radius:14px; }
.jhx-scroll-cue::before{ content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px;
  background:#fff; border-radius:2px; animation:jhxCue 1.8s infinite; }
@keyframes jhxCue{ 0%{opacity:0;transform:translateY(0);} 40%{opacity:1;} 80%{opacity:0;transform:translateY(13px);} 100%{opacity:0;} }
@media (max-width:991px){
  .jhx-hero{ min-height:auto; padding:118px 0 70px; }
  .jhx-hero-grid{ grid-template-columns:1fr; gap:44px; }
  .jhx-hero-left{ padding:0; text-align:center; }
  .jhx-hero-kicker{ justify-content:center; }
  .jhx-hero-divider{ margin-left:auto; margin-right:auto; }
  .jhx-hero-desc{ margin-left:auto; margin-right:auto; }
  .jhx-hero-cta{ justify-content:center; }
  .jhx-hero-visual{ margin:0 auto; max-width:400px; }
  .jhx-scroll-cue{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .jhx-hero-float,.jhx-hero-ring,.jhx-hero-photo img{ animation:none !important; } }

/* ---------- HERO 主視覺：Jin 風格背景大圖（影片收起後顯示，取代左字+右框版型）---------- */
.jhx-hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.jhx-hero-bg img{ width:100%; height:100%; object-fit:cover; display:block; animation:jhxHeroKen 18s ease-out forwards; }
/* 左濃右淡的暗色漸層罩，確保左側文字可讀、右側露出大圖 */
.jhx-hero-bg::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,18,28,.86) 0%, rgba(8,18,28,.62) 44%, rgba(8,18,28,.30) 80%, rgba(8,18,28,.14) 100%),
             linear-gradient(0deg, rgba(8,18,28,.55) 0%, rgba(8,18,28,0) 40%); }
/* 文字疊層（單欄，靠左）*/
.jhx-hero-cap{ max-width:680px; padding:70px 0; }
@media (max-width:991px){
  .jhx-hero-cap{ max-width:none; padding:0; text-align:center; }
  .jhx-hero-cap .jhx-hero-kicker{ justify-content:center; }
  .jhx-hero-cap .jhx-hero-divider{ margin-left:auto; margin-right:auto; }
  .jhx-hero-cap .jhx-hero-desc{ margin-left:auto; margin-right:auto; }
  .jhx-hero-cap .jhx-hero-cta{ justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ .jhx-hero-bg img{ animation:none !important; } }

/* ---------- Hero 開場影片（YouTube 自動播放 → 點按鈕收起，顯示主視覺）---------- */
.jhx-hero-video{ position:absolute; inset:0; z-index:5; overflow:hidden; background:#0a1722 center/cover no-repeat;
  opacity:1; visibility:visible; transition:opacity .6s ease, visibility 0s linear 0s; }
/* 影片以 16:9 等比放大鋪滿整個 Hero（cover） */
.jhx-hero-video-stage{ position:absolute; top:50%; left:50%; width:100vw; height:56.25vw;
  min-width:177.78vh; min-height:100%; transform:translate(-50%,-50%); pointer-events:none; }
.jhx-hero-video-stage iframe,.jhx-hero-video-stage > div{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
/* 罩層攔截所有滑鼠事件：YouTube 原生控制列／資訊列／分享鈕等都不會被叫出來，
   也避免播放中誤點到底下主視覺的連結 */
.jhx-hero-video-veil{ position:absolute; inset:0; pointer-events:auto;
  background:radial-gradient(120% 120% at 50% 28%, rgba(8,18,28,.08), rgba(8,18,28,.55) 100%); }
/* 收起後：淡出並停用互動，露出底下的主視覺 */
.jhx-hero:not(.is-video) .jhx-hero-video{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .6s ease, visibility 0s linear .6s; }
.jhx-hero:not(.is-video) .jhx-hero-video-veil{ pointer-events:none; }
/* 無 JS 時不建立影片，直接顯示主視覺，避免被靜態縮圖永久蓋住；控制鈕無 JS 也無作用故一併隱藏 */
html:not(.jhx-js) .jhx-hero-video,
html:not(.jhx-js) .jhx-hero-toggle{ display:none; }
/* 播放中先隱藏捲動提示，避免與控制鈕重疊 */
.jhx-hero.is-video .jhx-scroll-cue{ opacity:0; pointer-events:none; }
/* 自動播放被擋／影片失敗：隱藏 iframe 露出縮圖，搭配中央「播放影片」鍵（不開天窗）*/
.jhx-hero.needs-play .jhx-hero-video-stage{ opacity:0; visibility:hidden; }

/* 控制鈕（基底＝播放中的「置中大圓鈕」，剛好蓋住 YouTube 置中播放鍵；文字置於圓鈕下方，不擋字幕）*/
.jhx-hero-toggle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:0; border:0; cursor:pointer;
  background:transparent; color:#fff; font-weight:700; font-size:1rem; letter-spacing:1px; line-height:1; }
.jhx-hero-toggle i{ display:inline-flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%;
  background:var(--jhx-primary,#0082C8); color:#fff; font-size:1.7rem; box-shadow:0 16px 40px rgba(0,0,0,.45);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease; }
.jhx-hero-toggle:hover i{ transform:scale(1.07); background:var(--jhx-accent,#00a0e9); box-shadow:0 22px 54px rgba(0,0,0,.55); }
.jhx-hero-toggle-txt{ white-space:nowrap; text-shadow:0 2px 10px rgba(0,0,0,.65); }
.jhx-hero-toggle:focus-visible{ outline:none; }
.jhx-hero-toggle:focus-visible i{ outline:3px solid #8fc7ef; outline-offset:4px; }
/* 收起影片後＝小圓鈕收到右下角當「重看」，不擋主視覺與捲動提示 */
.jhx-hero:not(.is-video) .jhx-hero-toggle{ top:auto; left:auto; right:26px; bottom:26px; transform:none;
  flex-direction:row; gap:8px; font-size:.82rem; letter-spacing:.5px; color:#cdd9e6; }
.jhx-hero:not(.is-video) .jhx-hero-toggle i{ width:38px; height:38px; font-size:.9rem;
  background:rgba(255,255,255,.9); color:var(--jhx-primary,#0082C8); box-shadow:0 8px 20px rgba(0,0,0,.3); }
.jhx-hero:not(.is-video) .jhx-hero-toggle:hover i{ transform:scale(1.06); background:#fff; }
.jhx-hero:not(.is-video) .jhx-hero-toggle-txt{ text-shadow:none; }
@media (max-width:640px){
  .jhx-hero-toggle{ font-size:.92rem; gap:12px; }
  .jhx-hero-toggle i{ width:72px; height:72px; font-size:1.4rem; }
  .jhx-hero:not(.is-video) .jhx-hero-toggle{ right:16px; bottom:16px; }
  .jhx-hero:not(.is-video) .jhx-hero-toggle i{ width:34px; height:34px; font-size:.85rem; }
}
@media (prefers-reduced-motion: reduce){ .jhx-hero-video,.jhx-hero-toggle{ transition:none; } }

/* ---------- 數據信任帶（懸浮白卡，與 Hero 交疊）---------- */
.jhx-stats-wrap{ position:relative; z-index:6; }
.jhx-stats-wrap.is-float{ margin-top:-80px; }
.jhx-stats{ display:flex; flex-wrap:wrap; background:#fff; border-radius:14px;
  box-shadow:0 36px 80px rgba(16,28,48,.16); overflow:hidden; }
.jhx-stats li{ list-style:none; flex:1 1 16.66%; min-width:150px; text-align:center; padding:42px 18px; position:relative; }
.jhx-stats li + li::before{ content:""; position:absolute; left:0; top:26%; height:48%; width:1px; background:var(--jhx-line); }
.jhx-stat-num{ display:block; font-size:2.4rem; font-weight:800; line-height:1; color:var(--jhx-primary); letter-spacing:.5px; }
.jhx-stat-label{ display:block; font-size:var(--fs-meta); color:var(--jhx-body); margin-top:10px; }
@media (max-width:767px){
  .jhx-stats-wrap.is-float{ margin-top:-48px; }
  .jhx-stats li{ flex:1 1 50%; padding:30px 12px; }
  .jhx-stats li:nth-child(even)::before{ display:none; }
  .jhx-stats li:nth-child(n+3){ border-top:1px solid var(--jhx-line); }
  .jhx-stat-num{ font-size:1.9rem; }
}
/* 深色實底版本（製造能力數據條）*/
.jhx-stats.jhx-stats--solid{ background:linear-gradient(120deg,var(--jhx-primary),var(--jhx-hover)); box-shadow:0 24px 56px rgba(0,110,168,.28); }
.jhx-stats--solid li + li::before{ background:rgba(255,255,255,.2); }
.jhx-stats--solid .jhx-stat-num{ color:#fff; }
.jhx-stats--solid .jhx-stat-label{ color:rgba(255,255,255,.9); }

/* ---------- 卡片（核心能力 / 理念 / 為什麼 / 材料 / 八大能力）---------- */
.jhx-grid{ display:grid; gap:28px; }
.jhx-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.jhx-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.jhx-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:991px){ .jhx-grid.cols-4{ grid-template-columns:repeat(2,1fr); } .jhx-grid.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575px){ .jhx-grid{ grid-template-columns:1fr !important; } }

.jhx-card{ position:relative; height:100%; background:#fff; border:1px solid var(--jhx-line);
  border-radius:14px; padding:44px 34px; overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; }
.jhx-card::before{ content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:linear-gradient(90deg,var(--jhx-primary),var(--jhx-accent)); transform:scaleX(0); transform-origin:left; transition:transform .45s ease; }
.jhx-card:hover{ transform:translateY(-10px); box-shadow:0 30px 64px rgba(16,28,48,.14); border-color:transparent; }
.jhx-card:hover::before{ transform:scaleX(1); }
.jhx-card-ico{ display:inline-flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:50%;
  font-size:38px; line-height:1; margin-bottom:26px; color:var(--jhx-primary); background:rgba(0,130,200,.09);
  transition:.4s cubic-bezier(.2,.7,.2,1); }
.jhx-card:hover .jhx-card-ico{ background:var(--jhx-primary); color:#fff; transform:translateY(-2px) rotate(-6deg); }
.jhx-card h3{ font-size:1.3rem; margin:0 0 14px; color:var(--jhx-ink); }
.jhx-card p{ color:var(--jhx-body); margin:0; line-height:1.95; font-size:var(--fs-body); }
.jhx-card.center{ text-align:center; }
.jhx-card.center .jhx-card-ico{ display:flex; margin-left:auto; margin-right:auto; }
.jhx-mat-en{ font-size:var(--fs-eyebrow); letter-spacing:2px; color:#9aa6b4; text-transform:uppercase; display:block; margin-top:6px; }
/* 理念卡序號水印 */
.jhx-val{ counter-increment:jhxval; }
.jhx-val::after{ content:counter(jhxval,decimal-leading-zero); position:absolute; right:22px; bottom:6px;
  font-size:4rem; font-weight:800; color:rgba(0,130,200,.06); line-height:1; }

/* ---------- 圖文左右（關於 / 故事 / 願景）---------- */
.jhx-split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.jhx-split.media-right{ direction:ltr; }
.jhx-split-media{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 30px 70px rgba(16,28,48,.16); }
.jhx-split-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.jhx-split-media:hover img{ transform:scale(1.05); }
.jhx-split-media::after{ content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.4); border-radius:16px; pointer-events:none; }
@media (max-width:991px){ .jhx-split{ grid-template-columns:1fr; gap:36px; } .jhx-split-media{ order:-1; } }

/* ---------- 產品網格 ---------- */
.jhx-prod{ position:relative; display:block; overflow:hidden; border-radius:14px; background:var(--jhx-dark); }
.jhx-prod img{ width:100%; height:300px; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .4s; opacity:.96; }
.jhx-prod:hover img{ transform:scale(1.1); opacity:.55; }
.jhx-prod-cap{ position:absolute; left:0; right:0; bottom:0; padding:34px 30px 26px; color:#fff;
  background:linear-gradient(transparent, rgba(8,14,22,.9)); }
.jhx-prod-cap .zh{ display:block; font-size:1.32rem; font-weight:700; }
.jhx-prod-cap .zh::after{ content:""; display:block; width:34px; height:2px; background:var(--jhx-accent); margin-top:12px; transition:width .4s ease; }
.jhx-prod:hover .jhx-prod-cap .zh::after{ width:70px; }
.jhx-prod-cap .en{ display:block; font-size:var(--fs-eyebrow); letter-spacing:1.5px; opacity:.85; margin-top:10px; text-transform:uppercase; }

/* ---------- 全幅壓圖帶（ESG / CTA）---------- */
.jhx-band{ position:relative; overflow:hidden; color:#fff; }
.jhx-band .jhx-parallax-bg{ position:absolute; inset:-8% 0; background:center/cover no-repeat; transform:scale(1.12); will-change:transform; }
/* 深色遮罩只在「有底圖（視差）」時出現，確保白字可讀 */
.jhx-band.jhx-parallax::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,19,28,.9), rgba(12,19,28,.6)); }
.jhx-band > .jhx-container{ position:relative; z-index:2; }
/* 修正：band 內同時掛 .jhx-container + .jhx-sec 時，padding 簡寫互蓋使上下內距變 0，
   導致 ESG／立足台灣 區塊被壓扁。補回上下內距（並略加高，更有份量）。 */
.jhx-band > .jhx-container.jhx-sec{ padding-top:calc(var(--jhx-pad) + 20px); padding-bottom:calc(var(--jhx-pad) + 20px); }
@media (max-width:767px){ .jhx-band > .jhx-container.jhx-sec{ padding-top:72px; padding-bottom:72px; } }

.jhx-esg .jhx-eyebrow{ color:#9bd29b; }
.jhx-esg-stats{ display:flex; gap:30px; margin-top:32px; flex-wrap:wrap; }
.jhx-esg-stats .n{ display:block; font-size:2.1rem; font-weight:800; color:#fff; }
.jhx-esg-stats .l{ display:block; font-size:.9rem; color:#aebccd; margin-top:6px; }
.jhx-esg-figure img{ width:100%; border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.4); }

/* CTA */
.jhx-cta{ text-align:center; padding:130px 16px; }
/* 科技雷達背景（未上傳圖時的預設）：藍色漸層 + 同心圓環 + 藍圖點陣 */
.jhx-cta:not(.has-bg){ position:relative; overflow:hidden;
  background:radial-gradient(130% 105% at 50% 24%, #56adea 0%, #2f86d0 46%, #1c69bd 100%); }
.jhx-cta:not(.has-bg)::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-radial-gradient(circle at 50% 46%, rgba(255,255,255,.11) 0 1px, transparent 1px 66px),
    radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.6px);
  background-size:100% 100%, 26px 26px;
  -webkit-mask-image:radial-gradient(78% 78% at 50% 46%, #000 52%, transparent 100%);
          mask-image:radial-gradient(78% 78% at 50% 46%, #000 52%, transparent 100%); }
.jhx-cta:not(.has-bg)::after{ content:""; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(560px,84vw); aspect-ratio:1; border:1px dashed rgba(255,255,255,.30); border-radius:50%;
  z-index:0; pointer-events:none; }
.jhx-cta > .jhx-container{ position:relative; z-index:2; }
.jhx-cta h2{ color:#fff; margin:0 0 30px; font-size:clamp(1.5rem,3vw,2.4rem); font-weight:800; letter-spacing:.5px; text-shadow:0 2px 18px rgba(8,40,80,.25); }
.jhx-cta .jhx-cta-phone{ display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:1.15rem; font-weight:600; margin:0 0 26px; }
.jhx-cta .jhx-cta-phone i{ font-size:1.1rem; opacity:.9; }
.jhx-cta .jhx-cta-phone a{ color:#fff; }
.jhx-cta .site-button{ margin:0 9px 12px; box-shadow:0 14px 30px rgba(8,40,80,.25); }

/* ---------- FAQ ---------- */
.jhx-faq{ max-width:920px; margin:0 auto; }
.jhx-faq details{ background:#fff; border:1px solid var(--jhx-line); border-radius:14px; margin-bottom:16px;
  overflow:hidden; transition:box-shadow .3s, border-color .3s; }
.jhx-faq details[open]{ box-shadow:0 20px 46px rgba(16,28,48,.09); border-color:transparent; }
.jhx-faq summary{ list-style:none; cursor:pointer; padding:26px 64px 26px 30px; font-size:1.12rem; font-weight:700;
  color:var(--jhx-ink); position:relative; transition:color .2s; }
.jhx-faq summary:hover{ color:var(--jhx-primary); }
.jhx-faq summary::-webkit-details-marker{ display:none; }
.jhx-faq summary::after{ content:""; position:absolute; right:30px; top:50%; width:16px; height:16px; margin-top:-8px;
  background:linear-gradient(var(--jhx-primary),var(--jhx-primary)) center/16px 2px no-repeat,
            linear-gradient(var(--jhx-primary),var(--jhx-primary)) center/2px 16px no-repeat;
  transition:transform .3s ease; }
.jhx-faq details[open] summary::after{ transform:rotate(90deg);
  background:linear-gradient(var(--jhx-primary),var(--jhx-primary)) center/16px 2px no-repeat; }
.jhx-faq-a{ padding:0 30px 28px; color:var(--jhx-body); line-height:2; font-size:var(--fs-body); }

/* ---------- 答案優先導言 ---------- */
.jhx-lead{ max-width:980px; margin:0 auto; text-align:center; }
.jhx-lead p{ font-size:clamp(1.1rem,1.7vw,1.32rem); line-height:2.1; color:#3a4655; }
.jhx-lead strong{ color:var(--jhx-primary); font-weight:700; }

/* ---------- 公司基本資料表 ---------- */
.jhx-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:14px;
  overflow:hidden; box-shadow:0 22px 56px rgba(16,28,48,.08); }
.jhx-table th, .jhx-table td{ padding:20px 28px; border-bottom:1px solid var(--jhx-line); text-align:left; vertical-align:top; }
.jhx-table th{ width:28%; background:#f2f6fa; font-weight:700; color:var(--jhx-ink); white-space:nowrap; border-right:3px solid var(--jhx-primary); }
.jhx-table td{ color:#3a4655; }
.jhx-table tr:last-child th, .jhx-table tr:last-child td{ border-bottom:0; }
@media (max-width:575px){ .jhx-table th{ width:38%; } .jhx-table th,.jhx-table td{ padding:14px 14px; font-size:.92rem; } }

/* ---------- 歷史沿革時間軸 ---------- */
.jhx-timeline{ position:relative; max-width:900px; margin:0 auto; }
.jhx-timeline::before{ content:""; position:absolute; left:104px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(var(--jhx-primary),var(--jhx-accent)); }
.jhx-tl-item{ position:relative; display:flex; align-items:flex-start; padding:13px 0; }
.jhx-tl-year{ flex:0 0 104px; font-size:1.5rem; font-weight:800; color:var(--jhx-primary); line-height:1.5; }
.jhx-tl-item::after{ content:""; position:absolute; left:96px; top:20px; width:18px; height:18px; border-radius:50%;
  background:#fff; border:3px solid var(--jhx-primary); box-shadow:0 0 0 5px rgba(0,130,200,.12); }
.jhx-tl-desc{ flex:1; padding:18px 26px; margin-left:46px; color:#3a4655; line-height:1.85;
  background:#fff; border:1px solid var(--jhx-line); border-radius:12px; transition:.35s cubic-bezier(.2,.7,.2,1); }
.jhx-tl-item:hover .jhx-tl-desc{ box-shadow:0 18px 40px rgba(16,28,48,.1); border-color:transparent; transform:translateX(6px); }
@media (max-width:575px){
  .jhx-timeline::before{ left:66px; } .jhx-tl-item::after{ left:58px; }
  .jhx-tl-year{ flex-basis:66px; font-size:1.1rem; } .jhx-tl-desc{ margin-left:34px; padding:13px 15px; font-size:.92rem; }
}

/* ---------- 製程流程 ---------- */
.jhx-flow{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.jhx-flow-step{ display:inline-flex; align-items:center; }
.jhx-flow-step span{ display:inline-block; background:#fff; border:1px solid var(--jhx-line); border-radius:40px;
  padding:13px 24px; font-weight:600; color:var(--jhx-ink); font-size:.98rem; transition:.25s; }
.jhx-flow-step:hover span{ background:var(--jhx-primary); color:#fff; border-color:var(--jhx-primary); transform:translateY(-2px); }
.jhx-flow-step::after{ content:"\2192"; color:var(--jhx-accent); font-size:1.25rem; margin-left:12px; font-weight:700; }
.jhx-flow-step:last-child::after{ display:none; }
.jhx-flow-note{ text-align:center; color:var(--jhx-body); max-width:780px; margin:34px auto 0; line-height:1.95; }

/* ---------- 設備 / 儀器清單 ---------- */
.jhx-list-box{ background:#fff; border:1px solid var(--jhx-line); border-radius:14px; padding:36px 38px; height:100%;
  box-shadow:0 16px 44px rgba(16,28,48,.06); }
.jhx-list-box h3{ font-size:1.25rem; margin:0 0 22px; padding-bottom:14px; color:var(--jhx-ink);
  border-bottom:2px solid var(--jhx-primary); display:inline-block; }
.jhx-list-box ul{ list-style:none; margin:0; padding:0; }
.jhx-list-box li{ padding:11px 0 11px 30px; position:relative; color:#3a4655; line-height:1.6; border-bottom:1px dashed var(--jhx-line); }
.jhx-list-box li:last-child{ border-bottom:0; }
.jhx-list-box li::before{ content:"\2713"; position:absolute; left:0; top:11px; color:var(--jhx-primary); font-weight:700; }

/* ---------- 三階段品質 ---------- */
.jhx-qc-flow{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.jhx-qc-step{ flex:1; min-width:140px; border-radius:14px; padding:26px 18px; text-align:center; color:#fff;
  background:linear-gradient(135deg,var(--jhx-primary),var(--jhx-hover)); box-shadow:0 16px 36px rgba(0,110,168,.24); }
.jhx-qc-step strong{ display:block; font-size:1.4rem; letter-spacing:1px; }
.jhx-qc-step span{ font-size:var(--fs-meta); opacity:.92; }
.jhx-qc-arrow{ color:var(--jhx-accent); font-size:1.7rem; font-weight:700; }
@media (max-width:767px){ .jhx-qc-arrow{ display:none; } .jhx-qc-step{ flex-basis:100%; } }

/* ---------- 應用領域標籤 ---------- */
.jhx-app-grid{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.jhx-app-tag{ background:#fff; border:1px solid var(--jhx-line); border-radius:10px; padding:22px 36px;
  font-weight:700; font-size:1.05rem; color:var(--jhx-ink); transition:.28s cubic-bezier(.2,.7,.2,1); }
.jhx-app-tag:hover{ background:var(--jhx-primary); color:#fff; border-color:var(--jhx-primary); transform:translateY(-5px); box-shadow:0 18px 38px rgba(0,110,168,.22); }

/* ---------- 內頁 Banner（全站統一：標題字級＋高度一致，不分 #page-banner）---------- */
.page-content .dlab-bnr-inr{ height:460px; }
@media (max-width:767px){ .page-content .dlab-bnr-inr{ height:300px; } }
.dlab-bnr-inr .dlab-bnr-inr-entry h1{ font-size:clamp(2rem,4.5vw,3.4rem); font-weight:800; letter-spacing:1px; line-height:1.2; }

/* =====================================================================
   公司簡介頁 專屬區塊（依參考設計）
   ===================================================================== */

/* --- 形象橫幅（破版壓底色塊，左右交錯）--- */
.jhx-feat-section{ padding:var(--jhx-pad) 0; }
.jhx-feat-section .jhx-container{ display:flex; flex-direction:column; gap:130px; }
.jhx-feat-row{ position:relative; display:flex; align-items:center; gap:64px; }
.jhx-feat-row.is-reverse{ flex-direction:row-reverse; }
.jhx-feat-panel{ position:absolute; top:-32px; bottom:-32px; width:64%; background:#eef4fb; border-radius:16px; z-index:0; }
.jhx-feat-row.is-normal .jhx-feat-panel{ left:-4%; }
.jhx-feat-row.is-reverse .jhx-feat-panel{ right:-4%; }
.jhx-feat-imgcol,.jhx-feat-textcol{ flex:1; position:relative; z-index:2; }
.jhx-feat-textcol{ padding:20px 44px; }
.jhx-feat-title{ font-size:clamp(1.6rem,2.6vw,2.1rem); color:var(--jhx-ink); font-weight:800; margin:0 0 14px; letter-spacing:.5px; }
.jhx-feat-sub{ font-size:1.15rem; color:var(--jhx-primary); font-weight:700; margin:0 0 22px; }
.jhx-feat-desc{ font-size:var(--fs-body); color:var(--jhx-body); line-height:2; margin:0 0 16px; }
.jhx-feat-imgwrap{ position:relative; border-radius:12px; overflow:hidden; box-shadow:0 30px 60px rgba(16,28,48,.18); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.jhx-feat-imgwrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.jhx-feat-row.is-normal .jhx-feat-imgwrap{ transform:translate(18px,26px); }
.jhx-feat-row.is-reverse .jhx-feat-imgwrap{ transform:translate(-18px,-26px); }
.jhx-feat-imgwrap:hover{ transform:translate(0,0); }
@media (max-width:991px){
  .jhx-feat-section .jhx-container{ gap:80px; }
  .jhx-feat-row,.jhx-feat-row.is-reverse{ flex-direction:column; gap:28px; }
  .jhx-feat-panel{ width:100%; left:0!important; right:0!important; top:auto; bottom:-14px; height:58%; }
  .jhx-feat-row .jhx-feat-imgwrap{ transform:none!important; }
  .jhx-feat-textcol{ padding:0 6px; text-align:center; }
  .jhx-feat-textcol .jhx-feat-desc{ text-align:left; }  /* 內文維持靠左好讀 */
}

/* --- 經營理念：環形互動 --- */
.jhx-values{ position:relative; overflow:hidden; padding:var(--jhx-pad) 0; }
.jhx-values .jhx-parallax-bg{ position:absolute; inset:-8% 0; background:center/cover no-repeat; transform:scale(1.12); will-change:transform; }
.jhx-values-veil{ position:absolute; inset:0; background:linear-gradient(to right, rgba(238,244,251,.97), rgba(238,244,251,.80)); }
.jhx-values-inner{ position:relative; z-index:2; display:flex; align-items:center; gap:50px; }
.jhx-values-text{ flex:1; max-width:560px; }
.jhx-values-title{ font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:var(--jhx-ink); margin:6px 0 22px; }
.jhx-values-sub{ font-size:1.2rem; color:var(--jhx-primary); font-weight:700; line-height:1.6; margin:0 0 20px; min-height:1.6em; }
.jhx-values-sub,.jhx-values-desc{ transition:opacity .4s ease, transform .4s ease; }
.jhx-values-desc p{ color:var(--jhx-body); line-height:2; font-size:var(--fs-body); margin:0 0 14px; }
.jhx-values-text.is-swapping .jhx-values-sub,.jhx-values-text.is-swapping .jhx-values-desc{ opacity:0; transform:translateX(-14px); }
.jhx-values-circle{ flex:1; position:relative; width:500px; height:500px; max-width:100%; }
.jhx-ring{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; }
.jhx-ring-inner{ width:320px; height:320px; border:1px dashed var(--jhx-primary); opacity:.4; }
.jhx-ring-middle{ width:420px; height:420px; border:2px solid rgba(255,255,255,.7); box-shadow:inset 0 0 24px rgba(0,130,200,.06); }
.jhx-ring-outer{ width:500px; height:500px; border:2px solid transparent; border-right-color:var(--jhx-primary); border-bottom-color:var(--jhx-primary); transform:translate(-50%,-50%) rotate(-45deg); }
.jhx-values-center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:280px; height:280px; border-radius:50%; overflow:hidden; border:8px solid #fff; box-shadow:0 18px 40px rgba(0,0,0,.12); z-index:5; }
.jhx-values-center img{ width:100%; height:100%; object-fit:cover; transition:opacity .5s ease, transform .5s ease; }
.jhx-values-center.is-swapping img{ opacity:0; transform:scale(1.06); }
.jhx-orbit{ position:absolute; width:104px; height:104px; background:#fff; border:none; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; cursor:pointer; box-shadow:0 12px 26px rgba(0,0,0,.10); transition:all .3s ease; z-index:10; }
.jhx-orbit i{ font-size:25px; color:var(--jhx-primary); transition:.3s; }
.jhx-orbit span{ font-size:var(--fs-eyebrow); font-weight:700; color:var(--jhx-primary); transition:.3s; }
.jhx-orbit:hover{ transform:scale(1.06); box-shadow:0 16px 30px rgba(0,110,168,.22); }
.jhx-orbit.active{ background:var(--jhx-primary); transform:scale(1.1); }
.jhx-orbit.active i,.jhx-orbit.active span{ color:#fff; }
.jhx-orbit.pos-1{ top:2%; right:14%; }
.jhx-orbit.pos-2{ top:30%; right:-4%; }
.jhx-orbit.pos-3{ top:62%; right:-4%; }
.jhx-orbit.pos-4{ top:88%; right:14%; }
@media (max-width:1024px){
  .jhx-values-inner{ flex-direction:column; text-align:center; }
  .jhx-values-text{ max-width:680px; }
  /* 環形改為堆疊：正圓中央圖在上、按鈕在下方排成 2 欄（拆掉絕對定位與裝飾圓環，避免疊到文字）*/
  .jhx-values-circle{ width:100%; max-width:440px; height:auto; transform:none; margin:24px auto 0;
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; justify-items:stretch; }
  .jhx-values-circle .jhx-ring{ display:none; }
  .jhx-values-center{ grid-column:1 / -1; justify-self:center; position:static; transform:none;
    width:210px; height:210px; margin:0 auto 6px; }   /* 維持正圓（寬高相等）*/
  .jhx-values-center.is-swapping img{ transform:scale(1.05); }
  .jhx-orbit{ position:static !important; inset:auto !important; width:100%; height:auto;
    flex-direction:row; justify-content:center; gap:9px; padding:15px 16px; border-radius:14px; }
  .jhx-orbit i{ font-size:20px; }
}

/* --- 歷史沿革：互動時間軸 --- */
.jhx-history-inner{ display:flex; align-items:center; gap:6%; }
.jhx-history-media{ flex:0 0 44%; border-radius:20px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.12); }
.jhx-history-media img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.05) saturate(.92); transition:opacity .3s ease, transform .3s ease; }
.jhx-history-media.is-swapping img{ opacity:0; transform:scale(1.06); }
.jhx-history-main{ flex:1; display:flex; flex-direction:column; gap:32px; min-width:0; }
.jhx-history-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.jhx-history-title{ color:var(--jhx-primary); font-size:clamp(2rem,3.6vw,3rem); line-height:1.05; margin:6px 0 0; font-weight:800; }
.jhx-history-nav{ display:flex; gap:10px; flex-shrink:0; }
.jhx-history-nav button{ width:46px; height:46px; border-radius:50%; border:2px solid var(--jhx-primary); background:transparent; color:var(--jhx-primary); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.3s; }
.jhx-history-nav button:hover{ background:var(--jhx-primary); color:#fff; }
.jhx-history-track{ position:relative; padding-bottom:22px; overflow-x:auto; }
.jhx-history-line{ position:absolute; left:0; right:0; bottom:28px; height:2px; background:var(--jhx-line); }
.jhx-history-points{ list-style:none; margin:0; padding:0 4px; display:flex; gap:34px; position:relative; min-width:max-content; }
.jhx-history-points li{ color:var(--jhx-body); font-size:var(--fs-meta); position:relative; cursor:pointer; padding-bottom:22px; white-space:nowrap; transition:color .3s; }
.jhx-history-points li::after{ content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:#fff; border:2px solid var(--jhx-line); transition:.3s; }
.jhx-history-points li.active{ color:var(--jhx-primary); font-weight:800; }
.jhx-history-points li.active::after{ border-color:var(--jhx-primary); width:15px; height:15px; bottom:-8px; box-shadow:0 0 0 4px rgba(0,130,200,.12); }
.jhx-history-content{ position:relative; min-height:150px; }
.jhx-history-year{ color:var(--jhx-primary); font-size:1.7rem; font-weight:800; margin:0 0 12px; }
.jhx-history-desc{ color:var(--jhx-ink); font-size:1.1rem; line-height:1.85; margin:0; max-width:90%; position:relative; z-index:2; }
.jhx-history-watermark{ position:absolute; top:-54px; right:0; font-size:120px; font-weight:800; color:transparent; -webkit-text-stroke:1px #e9edf2; z-index:1; letter-spacing:-2px; line-height:1; pointer-events:none; }
.jhx-history-year,.jhx-history-desc{ transition:opacity .45s ease, transform .45s ease; }
.jhx-history-content.is-swapping .jhx-history-year,.jhx-history-content.is-swapping .jhx-history-desc{ opacity:0; transform:translateX(10px); }
@media (max-width:991px){
  .jhx-history-inner{ flex-direction:column; gap:34px; }
  .jhx-history-media{ flex-basis:auto; width:100%; }
  .jhx-history-watermark{ font-size:84px; top:-38px; }
}

/* --- 立足台灣（壓底置中）：沿用 .jhx-band/.jhx-parallax，僅微調 --- */
.jhx-vision-band .jhx-text p{ color:#dbe3ee; }

/* --- 認證 / 組織 卡片 --- */
.jhx-vm-wrap{ display:flex; gap:50px; max-width:1000px; margin:0 auto; }
.jhx-vm-card{ flex:1; position:relative; margin-bottom:44px; }
.jhx-vm-title{ position:absolute; top:26px; left:28px; color:#fff; font-size:1.5rem; font-weight:800; margin:0; z-index:3; text-shadow:0 2px 10px rgba(0,0,0,.55); }
.jhx-vm-img{ position:relative; width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden; box-shadow:0 16px 36px rgba(0,0,0,.12); }
.jhx-vm-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.jhx-vm-card:hover .jhx-vm-img img{ transform:scale(1.06); }
.jhx-vm-box{ position:absolute; bottom:-38px; left:6%; width:88%; background:linear-gradient(135deg,var(--jhx-primary),var(--jhx-hover)); border-radius:14px; padding:24px 28px; box-shadow:0 14px 30px rgba(0,110,168,.3); z-index:4; transition:transform .4s ease, box-shadow .4s ease; }
.jhx-vm-card:hover .jhx-vm-box{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,110,168,.42); }
.jhx-vm-box ul{ list-style:disc; margin:0; padding-left:20px; color:#fff; }
.jhx-vm-box li{ font-size:var(--fs-body); line-height:1.7; margin-bottom:8px; }
.jhx-vm-box li:last-child{ margin-bottom:0; }
@media (max-width:900px){ .jhx-vm-wrap{ flex-direction:column; gap:72px; } }

/* --- 環形互動：3 顆按鈕版（製造能力・可加工材質）--- */
.jhx-values-circle.is-3 .jhx-orbit.pos-1{ top:6%;  right:8%; }
.jhx-values-circle.is-3 .jhx-orbit.pos-2{ top:43%; right:-5%; }
.jhx-values-circle.is-3 .jhx-orbit.pos-3{ top:80%; right:8%; }

/* =====================================================================
   製造能力頁：STEP 流程卡 + 深色材質展示
   ===================================================================== */
/* 手寫／英文副標 */
.jhx-script{ display:block; font-style:italic; font-weight:600; font-size:clamp(1.3rem,2.2vw,1.8rem);
  color:var(--jhx-accent); letter-spacing:.5px; margin:6px 0 0; }

/* --- STEP 流程卡 --- */
.jhx-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; row-gap:24px; }
.jhx-step{ position:relative; padding:30px 20px; border-radius:14px; background:transparent; transition:all .3s ease; z-index:1; }
.jhx-step:hover{ background:#fff; box-shadow:0 18px 40px rgba(16,28,48,.09); transform:translateY(-6px); z-index:2; }
.jhx-step-marker{ position:relative; height:74px; display:flex; justify-content:center; align-items:center; margin-bottom:26px; }
.jhx-step-marker::after{ content:""; position:absolute; top:50%; left:50%; width:100%; height:2px; background:var(--jhx-line); z-index:-1; }
.jhx-steps .jhx-step:nth-child(4n) .jhx-step-marker::after{ display:none; }
.jhx-step-circle{ width:74px; height:74px; border-radius:50%; border:2px solid var(--jhx-primary); background:var(--jhx-soft);
  display:flex; align-items:center; justify-content:center; transition:all .3s ease; z-index:2; }
.jhx-step:hover .jhx-step-circle{ background:var(--jhx-primary); }
.jhx-step-num{ text-align:center; line-height:1.05; color:var(--jhx-ink); transition:color .3s; }
.jhx-step-num span{ display:block; font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:1.5px; color:var(--jhx-primary); transition:color .3s; }
.jhx-step-num strong{ font-size:22px; font-weight:600; }
.jhx-step:hover .jhx-step-num, .jhx-step:hover .jhx-step-num span{ color:#fff; }
.jhx-step-title{ font-size:1rem; font-weight:700; color:var(--jhx-ink); margin:0 0 10px; line-height:1.45; text-align:center; }
.jhx-step-desc{ font-size:.9rem; color:var(--jhx-body); line-height:1.7; margin:0; text-align:center; }
@media (max-width:991px){
  .jhx-steps{ grid-template-columns:repeat(2,1fr); }
  .jhx-steps .jhx-step:nth-child(4n) .jhx-step-marker::after{ display:block; }
  .jhx-steps .jhx-step:nth-child(2n) .jhx-step-marker::after{ display:none; }
}
@media (max-width:575px){
  .jhx-steps{ grid-template-columns:1fr; }
  .jhx-step-marker::after{ display:none; }
  .jhx-step{ padding:18px; }
}

/* --- 深色材質展示 --- */
.jhx-matshow{ position:relative; background:#0a1930; color:#fff; padding:var(--jhx-pad) 0; }
.jhx-matshow .jhx-container{ max-width:1340px; }
.jhx-matshow-intro{ text-align:center; max-width:880px; margin:0 auto 80px; }
.jhx-matshow-intro img{ width:100%; max-width:420px; height:auto; border-radius:14px; margin-bottom:30px; box-shadow:0 24px 50px rgba(0,0,0,.4); }
.jhx-matshow-eyebrow{ color:#7fc4ef; }
.jhx-matshow-title{ color:#fff; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; margin:0 0 18px; }
.jhx-matshow-introtext p{ color:#cdd8e6; font-size:var(--fs-body); line-height:1.9; margin:0 0 10px; }
.jhx-matshow-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:54px; position:relative; }
.jhx-matshow-grid::before,.jhx-matshow-grid::after{ content:""; position:absolute; top:6%; bottom:6%; width:1px; background:rgba(255,255,255,.1); }
.jhx-matshow-grid::before{ left:33.333%; } .jhx-matshow-grid::after{ left:66.666%; }
.jhx-matcard{ display:flex; flex-direction:column; }
.jhx-matcard-img{ position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; margin-bottom:26px; background:#0f213d; }
.jhx-matcard-img > img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.jhx-matcard:hover .jhx-matcard-img > img{ transform:scale(1.05); }
.jhx-matcard-zoom{ position:absolute; bottom:12px; left:12px; width:84px; height:84px; border-radius:50%;
  border:2px solid rgba(255,255,255,.55); overflow:hidden; box-shadow:0 10px 22px rgba(0,0,0,.35); }
.jhx-matcard-zoom img{ width:100%; height:100%; object-fit:cover; transform:scale(1.6); }
.jhx-matcard-title{ font-size:1.5rem; font-weight:700; margin:0 0 4px; color:#fff; }
.jhx-matcard-en{ font-size:var(--fs-eyebrow); color:#9fb0c4; letter-spacing:1px; margin:0 0 18px; }
.jhx-matcard-desc{ font-size:var(--fs-body); color:#a9b7c8; line-height:1.85; margin:0; text-align:justify; }
@media (max-width:991px){
  .jhx-matshow-grid{ grid-template-columns:repeat(2,1fr); gap:40px; }
  .jhx-matshow-grid::before{ left:50%; } .jhx-matshow-grid::after{ display:none; }
}
@media (max-width:575px){
  .jhx-matshow-grid{ grid-template-columns:1fr; gap:50px; }
  .jhx-matshow-grid::before,.jhx-matshow-grid::after{ display:none; }
}

/* STEP 卡：最後一張不畫連接線（避免延伸到空白） */
.jhx-steps .jhx-step:last-child .jhx-step-marker::after{ display:none; }

/* =====================================================================
   聯絡我們：左表單 + 右地圖
   ===================================================================== */
.jhx-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:stretch; }
.jhx-contact-form{ margin-top:22px; }
.jhx-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.jhx-field{ margin-bottom:18px; }
.jhx-field input, .jhx-field textarea{ width:100%; box-sizing:border-box; padding:14px 16px; border:1px solid var(--jhx-line);
  border-radius:8px; font-size:1rem; font-family:inherit; color:var(--jhx-ink); background:#fff; transition:border-color .2s, box-shadow .2s; }
.jhx-field input:focus, .jhx-field textarea:focus{ outline:none; border-color:var(--jhx-primary); box-shadow:0 0 0 3px rgba(0,130,200,.12); }
.jhx-field textarea{ resize:vertical; min-height:130px; }
.jhx-contact-form .site-button{ margin-top:6px; }
.jhx-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.jhx-form-msg{ padding:14px 18px; border-radius:8px; margin:6px 0 22px; font-weight:600; }
.jhx-form-msg.ok{ background:#e7f6ec; color:#1b7a3d; border:1px solid #b6e3c5; }
.jhx-form-msg.err{ background:#fdeaea; color:#b3261e; border:1px solid #f3c2c0; }
.jhx-contact-map{ min-height:440px; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(16,28,48,.14); }
.jhx-contact-map iframe{ width:100%; height:100%; min-height:440px; border:0; display:block; }
@media (max-width:991px){
  .jhx-contact-grid{ grid-template-columns:1fr; gap:36px; }
  .jhx-contact-map, .jhx-contact-map iframe{ min-height:340px; }
}
@media (max-width:575px){ .jhx-form-row{ grid-template-columns:1fr; } }

/* =====================================================================
   首頁：最新消息 / 知識專欄（The Latest 風格清單）
   ===================================================================== */
.jhx-news{ position:relative; overflow:hidden; background:#f5f9fd;
  background-image:radial-gradient(rgba(0,130,200,.05) 1px, transparent 1px); background-size:22px 22px; }
.jhx-news.is-alt{ background:#fff; }
.jhx-news-watermark{ position:absolute; top:60px; left:-18px; font-size:clamp(90px,15vw,180px); font-weight:900;
  color:rgba(0,130,200,.045); writing-mode:vertical-lr; transform:rotate(180deg); letter-spacing:10px; pointer-events:none; z-index:0; }
.jhx-news .jhx-container{ position:relative; z-index:2; }
.jhx-news-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; }
.jhx-news-en{ margin:8px 0 0; font-size:clamp(2rem,4vw,2.8rem); line-height:1.1; font-weight:900; }
.jhx-news-en .dark{ color:var(--jhx-dark); margin-right:14px; }
.jhx-news-en .light{ color:var(--jhx-primary); font-weight:700; display:inline-flex; align-items:center; gap:14px; }
.jhx-news-en .light i{ display:inline-block; width:40px; height:2px; background:var(--jhx-dark); }
.jhx-news-more{ flex-shrink:0; display:inline-flex; align-items:center; height:46px; padding:0 26px; border-radius:30px;
  color:#fff; font-weight:600; letter-spacing:1px; text-decoration:none;
  background:linear-gradient(135deg,#56CCF2 0%, var(--jhx-primary) 100%); box-shadow:0 6px 16px rgba(0,130,200,.3); transition:.3s; }
.jhx-news-more:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,130,200,.4); color:#fff; }
.jhx-news-list{ border-top:1px solid var(--jhx-line); }
.jhx-news-item{ position:relative; display:flex; align-items:stretch; padding:32px 0; text-decoration:none;
  border-bottom:1px solid var(--jhx-line); transition:background-color .3s ease; }
.jhx-news-item:hover{ background:rgba(255,255,255,.65); }
.jhx-news-date{ flex:0 0 100px; display:flex; flex-direction:column; align-items:center; color:var(--jhx-primary);
  font-weight:800; padding-right:20px; }
.jhx-news-date .d{ font-size:36px; line-height:1; }
.jhx-news-date .s{ font-size:16px; margin:2px 0; opacity:.55; }
.jhx-news-date .my{ font-size:var(--fs-eyebrow); text-align:center; line-height:1.3; font-weight:700; }
.jhx-news-body{ flex:1; padding-right:30px; min-width:0; }
.jhx-news-badge{ display:inline-block; background:linear-gradient(to right,var(--jhx-primary),#56CCF2); color:#fff;
  font-size:var(--fs-eyebrow); font-weight:600; padding:4px 16px; border-radius:20px; margin-bottom:12px; }
.jhx-news-title{ display:block; font-size:1.25rem; font-weight:700; color:var(--jhx-dark); margin-bottom:8px; transition:color .3s; }
.jhx-news-item:hover .jhx-news-title{ color:var(--jhx-primary); }
.jhx-news-excerpt{ display:block; font-size:var(--fs-body); color:var(--jhx-body); line-height:1.7; max-width:82%; }
.jhx-news-plus{ flex:0 0 60px; display:flex; align-items:center; justify-content:center; }
.jhx-news-plus::before{ content:"+"; width:42px; height:42px; border-radius:50%; border:1px solid var(--jhx-line);
  display:flex; align-items:center; justify-content:center; color:var(--jhx-primary); font-size:20px; transition:.3s; }
.jhx-news-item:hover .jhx-news-plus::before{ background:var(--jhx-primary); border-color:var(--jhx-primary); color:#fff; transform:rotate(90deg); }
.jhx-news-hover{ position:absolute; right:120px; top:50%; transform:translateY(-50%) scale(.94); width:240px; height:150px;
  object-fit:cover; border-radius:12px; box-shadow:0 16px 36px rgba(0,0,0,.18); opacity:0; visibility:hidden; pointer-events:none;
  transition:all .4s cubic-bezier(.175,.885,.32,1.275); z-index:6; }
.jhx-news-item:hover .jhx-news-hover{ opacity:1; visibility:visible; transform:translateY(-50%) scale(1); }
.jhx-news-empty{ padding:46px 0; color:var(--jhx-body); text-align:center; border-bottom:1px solid var(--jhx-line); }
@media (max-width:900px){
  .jhx-news-head{ flex-direction:column; align-items:flex-start; gap:22px; }
  .jhx-news-hover{ display:none !important; }
  .jhx-news-excerpt{ max-width:100%; }
}
@media (max-width:600px){
  .jhx-news-item{ flex-wrap:wrap; padding:24px 0; }
  .jhx-news-date{ flex:0 0 auto; flex-direction:row; align-items:baseline; gap:8px; padding-right:0; margin-bottom:12px; }
  .jhx-news-date .s{ display:none; } .jhx-news-date .my{ text-align:left; }
  .jhx-news-body{ flex:1 1 100%; padding-right:0; }
  .jhx-news-plus{ position:absolute; right:0; top:22px; flex-basis:auto; }
}

/* 關於我們：副標下方的 3 塊數據（含 ICON，精簡內嵌，不做白卡）*/
.jhx-stats.jhx-stats--about{ background:transparent; box-shadow:none; border-radius:0;
  border-top:1px solid var(--jhx-line); border-bottom:1px solid var(--jhx-line); margin:24px 0 28px; }
.jhx-stat-ico{ display:block; font-size:24px; line-height:1; color:var(--jhx-primary); margin-bottom:10px; }
.jhx-stats.jhx-stats--about li{ flex:1 1 0; min-width:0; border-top:0; padding:22px 8px; text-align:center; }
.jhx-stats.jhx-stats--about .jhx-stat-num{ font-size:1.65rem; }
.jhx-stats.jhx-stats--about .jhx-stat-label{ font-size:var(--fs-meta); margin-top:6px; }
.jhx-stats.jhx-stats--about li + li::before{ top:22%; height:56%; }
@media (max-width:520px){
  .jhx-stats.jhx-stats--about li{ padding:18px 6px; }
  .jhx-stats.jhx-stats--about .jhx-stat-num{ font-size:1.4rem; }
}

/* =====================================================================
   首頁：背景深淺節奏 + 工業裝飾（照片底 / 方形波點 / 藍圖細線）
   ===================================================================== */
/* 內容置於裝飾之上 */
.jhx-sec > .jhx-container, .jhx-feat-section > .jhx-container{ position:relative; z-index:1; }

/* 照片背景區段（核心製造能力）：深色壓底 + 藍圖點綴，卡片浮於其上 */
.jhx-sec--photo{ position:relative; overflow:hidden; background:var(--jhx-dark) center/cover no-repeat; background-attachment:fixed; }
.jhx-sec--photo::before{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(11,18,28,.88), rgba(11,18,28,.8)); }
.jhx-sec--photo::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-image:linear-gradient(rgba(143,199,239,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(143,199,239,.06) 1px,transparent 1px);
  background-size:46px 46px; }
@media (max-width:991px){ .jhx-sec--photo{ background-attachment:scroll; } }

/* 深底區段的眉標 / 副標可讀性 */
.jhx-on-dark .jhx-eyebrow{ color:#8fc7ef; }
.jhx-on-dark .jhx-sub{ color:#cdd8e6; }

/* 方形波點裝飾（角落）*/
.jhx-dots-tr, .jhx-dots-bl{ position:relative; overflow:hidden; }
.jhx-dots-tr::after, .jhx-dots-bl::before{ content:""; position:absolute; z-index:0; pointer-events:none;
  width:210px; height:210px;
  background-image:radial-gradient(var(--jhx-primary) 2.2px, transparent 2.2px);
  background-size:20px 20px; opacity:.13; }
.jhx-dots-tr::after{ top:46px; right:40px; }
.jhx-dots-bl::before{ bottom:46px; left:40px; }
@media (max-width:767px){ .jhx-dots-tr::after, .jhx-dots-bl::before{ width:120px; height:120px; opacity:.09; } }

/* 藍圖細線底紋（淡）*/
.jhx-grid{ background-image:
  linear-gradient(rgba(16,40,70,.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(16,40,70,.05) 1px, transparent 1px);
  background-size:48px 48px; }

/* =====================================================================
   製造能力：一站式製程 — 中央固定無限輪播 + 連動時間軸
   .is-carousel 由 JS 加上；未加（無 JS / 減少動態）時＝水平捲動圖卡後援
   ===================================================================== */
.jhx-proc{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; }
.jhx-proc-item{ position:relative; flex:0 0 240px; height:320px; border-radius:6px; overflow:hidden; }
.jhx-proc-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.jhx-proc-shade{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 50%); pointer-events:none; }
.jhx-proc-num{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:42px; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.4); z-index:2; pointer-events:none; }
.jhx-proc-title{ position:absolute; bottom:24px; left:24px; right:16px; color:#fff; font-size:1.25rem; font-weight:700; letter-spacing:.5px; z-index:2; }
.jhx-proc-tl{ display:none; }

/* ── JS 啟動：中央固定輪播 ── */
.jhx-proc-wrap.is-carousel .jhx-proc{ display:block; position:relative; width:100%; height:400px; overflow:hidden; padding:0; gap:0; }
.jhx-proc-wrap.is-carousel .jhx-proc-item{ position:absolute; top:50%; left:50%; flex:none; width:180px; height:300px; cursor:pointer; opacity:0;
  transform:translate(-50%,-50%); filter:grayscale(80%) brightness(.6);
  transition:transform .6s cubic-bezier(.25,1,.5,1), width .6s cubic-bezier(.25,1,.5,1), height .6s cubic-bezier(.25,1,.5,1), opacity .5s ease, filter .6s ease; }
.jhx-proc-wrap.is-carousel .jhx-proc-item.active{ width:600px; height:380px; filter:none; box-shadow:0 24px 50px rgba(16,28,48,.22); z-index:20 !important; }
.jhx-proc-wrap.is-carousel .jhx-proc-shade{ opacity:0; transition:opacity .6s ease; }
.jhx-proc-wrap.is-carousel .jhx-proc-item.active .jhx-proc-shade{ opacity:1; }
.jhx-proc-wrap.is-carousel .jhx-proc-num{ transition:all .6s cubic-bezier(.25,1,.5,1); }
.jhx-proc-wrap.is-carousel .jhx-proc-item.active .jhx-proc-num{ top:auto; left:auto; bottom:-8px; right:24px; transform:none; font-size:110px; opacity:.32; text-shadow:none; }
.jhx-proc-wrap.is-carousel .jhx-proc-title{ opacity:0; transform:translateY(20px); transition:all .6s ease .1s; left:36px; right:auto; bottom:30px; font-size:1.5rem; }
.jhx-proc-wrap.is-carousel .jhx-proc-item.active .jhx-proc-title{ opacity:1; transform:translateY(0); }

/* ── JS 啟動：連動時間軸 ── */
.jhx-proc-wrap.is-carousel .jhx-proc-tl{ display:block; position:relative; width:100%; height:120px; overflow:hidden; margin-top:30px; }
.jhx-proc-tl-line{ position:absolute; top:34px; left:0; width:100%; height:1px; background:var(--jhx-line); z-index:0; }
.jhx-proc-tl-item{ position:absolute; top:0; left:50%; width:150px; display:flex; flex-direction:column; align-items:center; cursor:pointer;
  transform:translateX(-50%); transition:transform .6s cubic-bezier(.25,1,.5,1), opacity .6s ease; z-index:1; }
.jhx-proc-tl-num{ font-size:var(--fs-meta); font-weight:700; color:#aab4c0; margin-bottom:10px; transition:color .3s, font-size .3s; }
.jhx-proc-tl-dot{ width:11px; height:11px; background:#fff; border:2px solid #ccd3db; border-radius:50%; margin-bottom:14px; transition:all .3s; }
.jhx-proc-tl-text{ font-size:var(--fs-meta); color:var(--jhx-body); text-align:center; line-height:1.5; transition:color .3s; max-width:140px; }
.jhx-proc-tl-item.active .jhx-proc-tl-num{ color:var(--jhx-primary); font-size:1.1rem; }
.jhx-proc-tl-item.active .jhx-proc-tl-dot{ border-color:var(--jhx-primary); background:var(--jhx-primary); box-shadow:0 0 0 4px rgba(0,130,200,.18); }
.jhx-proc-tl-item.active .jhx-proc-tl-text{ color:var(--jhx-ink); font-weight:700; }

@media (max-width:900px){
  .jhx-proc-wrap.is-carousel .jhx-proc{ height:350px; }
  .jhx-proc-wrap.is-carousel .jhx-proc-item{ width:140px; height:260px; }
  .jhx-proc-wrap.is-carousel .jhx-proc-item.active{ width:450px; height:320px; }
  .jhx-proc-wrap.is-carousel .jhx-proc-num{ font-size:32px; }
  .jhx-proc-wrap.is-carousel .jhx-proc-item.active .jhx-proc-num{ font-size:80px; right:14px; }
  .jhx-proc-wrap.is-carousel .jhx-proc-title{ font-size:1.15rem; left:20px; bottom:20px; }
}
@media (max-width:600px){
  .jhx-proc-wrap.is-carousel .jhx-proc{ height:300px; }
  .jhx-proc-wrap.is-carousel .jhx-proc-item{ width:104px; height:210px; }
  .jhx-proc-wrap.is-carousel .jhx-proc-item.active{ width:300px; height:260px; }
  .jhx-proc-wrap.is-carousel .jhx-proc-item.active .jhx-proc-num{ font-size:60px; }
  .jhx-proc-wrap.is-carousel .jhx-proc-title{ font-size:1rem; left:15px; bottom:15px; }
  .jhx-proc-tl-text{ font-size:var(--fs-eyebrow); }
}

/* 選單右側：翻譯（語言）按鈕與搜尋按鈕之間留點間距 */
.extra-nav .jhx-lang-btn{ margin-right:4px; }

/* 語言切換：乾淨的地球按鈕 + 下拉（語言/網址由 TranslatePress 提供）*/
.extra-nav .jhx-lang{ position:relative; display:inline-block; vertical-align:middle; margin-right:4px; }
.jhx-lang-menu{ position:absolute; top:100%; right:0; min-width:150px; margin:8px 0 0; padding:8px; list-style:none;
  background:#fff; border:1px solid var(--jhx-line,#e8ecf1); border-radius:10px; box-shadow:0 18px 40px rgba(16,28,48,.16);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:9999; }
.jhx-lang.is-open .jhx-lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.jhx-lang-menu li{ margin:0; }
.jhx-lang-menu a{ display:block; padding:9px 14px; border-radius:7px; color:var(--jhx-ink,#14202e);
  font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; transition:background-color .2s, color .2s; }
.jhx-lang-menu a:hover{ background:var(--jhx-soft,#f4f7fa); color:var(--jhx-primary,#0082C8); }
.jhx-lang-menu a.is-current{ color:var(--jhx-primary,#0082C8); }
/* 退路：TP 短碼樣式對齊 */
.extra-nav .jhx-lang-switch{ display:inline-block; vertical-align:middle; margin-right:6px; }
/* 下拉不被選單列裁切 */
.sticky-header .main-bar, .main-bar .container, .extra-nav, .extra-cell{ overflow:visible; }

/* ============================================================
   全站字體統一 + 適度放大（客群中年，提升可讀性）
   單一字體堆疊：中文用 Noto Sans TC，英數沿用 Poppins 字形
   ============================================================ */
:root{ --jhx-font:"Poppins","Noto Sans TC","PingFang TC","Microsoft JhengHei","Helvetica Neue",Arial,sans-serif; }
body{ font-family:var(--jhx-font); font-size:var(--fs-body); line-height:1.85; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
input,select,textarea,button,.site-button,.btn,
.dlab-tilte,.footer-title,.item-title,.post-title,.widget-title,.title,.dlab-title{ font-family:var(--jhx-font); }
p{ line-height:1.9; }
.footer-title{ font-size:20px; }

/* ============================================================
   產品卡片懸浮：圖片放大 + 置中圓形「檢視」鈕淡入
   （取代原本由下往上的半透明列；眼睛圖示改用 Font Awesome）
   ============================================================ */
.item-img{ overflow:hidden; position:relative; }
.item-img img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.item-box:hover .item-img img{ transform:scale(1.08); }
.item-info-in{ top:0; left:0; right:0; bottom:0; width:100%; height:100%; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,34,51,.42); opacity:0; transition:opacity .35s ease; }
.item-box:hover .item-info-in{ opacity:1; bottom:0; }
.item-info-in ul{ margin:0; padding:0; list-style:none; }
.item-info-in ul li{ display:inline-block; }
.item-info-in ul li a{ width:54px; height:54px; padding:0; border-radius:50%; background:#fff;
  color:var(--jhx-primary,#0082C8); display:flex; align-items:center; justify-content:center; font-size:19px;
  transform:scale(.5); opacity:0; transition:transform .35s ease, opacity .35s ease, background .25s ease, color .25s ease; }
.item-box:hover .item-info-in ul li a{ transform:scale(1); opacity:1; }
.item-info-in ul li a:hover{ background:var(--jhx-primary,#0082C8); color:#fff; }

/* ============================================================
   捲動式縮起頁首：到頂顯示完整頁首；往下捲時 Top Bar＋聯絡列隨頁面捲走，
   只留精簡選單列「貼頂固定」＋滑入動畫（桌機／平板／手機通用）
   改用自家 .jhx-nav-fixed（由 jhx-pages.js 自行偵測捲動切換），不依賴主題 custom.js
   ============================================================ */
.is-fixed .main-bar{ position:static; }     /* 中和主題 custom.js 的 is-fixed 定位，避免雙重觸發／跳動 */
.jhx-nav-fixed .main-bar{ position:fixed; top:0; left:0; right:0; width:100%; z-index:1030;
  box-shadow:0 6px 22px rgba(0,0,0,.14); animation:jhxNavDrop .4s cubic-bezier(.2,.7,.2,1); }
@keyframes jhxNavDrop{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }
.admin-bar .jhx-nav-fixed .main-bar{ top:32px; }
@media (max-width:782px){ .admin-bar .jhx-nav-fixed .main-bar{ top:46px; } }
.jhx-nav-spacer{ width:100%; }              /* 固定時補位，避免內容上跳（高度由 JS 設定） */
@media (prefers-reduced-motion: reduce){ .jhx-nav-fixed .main-bar{ animation:none; } }

/* ============================================================
   手機選單：About Us／Privacy Policy／洽詢按鈕並排，移到選單最底部
   ============================================================ */
.jhx-mobile-utility{ display:none; }          /* 桌機隱藏（沿用上方 Top Bar） */
@media (max-width:991px){
  .top-bar{ display:none; }                   /* 內容已移到手機選單底部，避免重複 */
  .mo-left .header-nav.show{ display:flex !important; flex-direction:column; }
  .jhx-mobile-utility{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:10px 12px; padding:16px 14px; border-top:1px solid rgba(0,0,0,.10); }
  .jhx-mobile-utility .jhx-mu-links{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:6px 16px; margin:0; padding:0; list-style:none; }
  .jhx-mobile-utility .jhx-mu-links li{ display:inline-block; }
  .jhx-mobile-utility .jhx-mu-links a{ color:#333; font-size:14px; font-weight:600; white-space:nowrap; }
  .jhx-mobile-utility .jhx-mu-quote{ margin:0; padding:8px 18px; font-size:13px; white-space:nowrap; }
}

/* ============================================================
   滿版影片（about CTA 上方）：自動播放、預設靜音、循環，保留 YouTube 控制列
   顯示完整 16:9（控制列才不會被裁掉），置中於滿版深色帶中，高度上限沿用先前帶狀
   捲到可見才載入（省流量）；減少動態則保留靜態縮圖
   ============================================================ */
.jhx-fullvideo{ width:100%; background:#0a1722; line-height:0; text-align:center; }
.jhx-fullvideo-frame{ position:relative; display:inline-block; width:100%;
  max-width:min(calc(56vh * 16 / 9), 1066px); aspect-ratio:16/9; overflow:hidden;
  background:#0a1722 center/cover no-repeat; }
.jhx-fullvideo-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@media (max-width:640px){ .jhx-fullvideo-frame{ max-width:100%; } }

/* ============================================================
   頁尾三欄（公司簡介／快速連結／最新文章）：無 H 標籤、桌機/平板/手機響應式
   ============================================================ */
/* 移除舊版 style2 頁尾左側 1/3 灰底裝飾（原為滿版欄設計，會蓋住新版置中的公司簡介欄）*/
.site-footer.style2 .footer-top::after{ content:none; }
.jhx-footer{ padding:70px 0 70px; }
.jhx-foot-grid{ display:grid; grid-template-columns:1.25fr 1fr 1.45fr; gap:50px; align-items:start; }
.jhx-foot-col{ min-width:0; }
.jhx-foot-logo img{ max-width:210px; height:auto; margin:0 0 20px; }
.jhx-foot-desc{ color:var(--jhx-body); font-size:var(--fs-meta); line-height:1.9; margin:0 0 22px; }
.jhx-foot-social{ display:flex; flex-wrap:wrap; gap:10px; }
.jhx-foot-soc{ width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--jhx-soft); color:var(--jhx-primary); font-size:1rem; transition:transform .25s ease, background .25s ease, color .25s ease; }
.jhx-foot-soc:hover{ background:var(--jhx-primary); color:#fff; transform:translateY(-2px); }
/* 區塊標題（非 H 標籤，但維持標題視覺）*/
.jhx-foot-title{ font-size:1.2rem; font-weight:800; color:var(--jhx-ink); margin:0 0 24px; padding-bottom:14px; position:relative; }
.jhx-foot-title::after{ content:""; position:absolute; left:0; bottom:0; width:42px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--jhx-primary),var(--jhx-accent)); }
/* 快速連結 */
.jhx-foot-linklist{ list-style:none; margin:0; padding:0; columns:2; column-gap:20px; }
.jhx-foot-linklist li{ margin:0 0 14px; break-inside:avoid; }
.jhx-foot-linklist a{ display:inline-block; color:var(--jhx-ink); font-weight:500; font-size:var(--fs-meta); position:relative; padding-left:18px;
  transition:color .25s ease, padding-left .25s ease; }
.jhx-foot-linklist a::before{ content:"\f105"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.85em;
  position:absolute; left:0; top:1px; color:var(--jhx-primary); transition:transform .25s ease; }
.jhx-foot-linklist a:hover{ color:var(--jhx-primary); padding-left:23px; }
/* 最新文章 */
.jhx-foot-posts{ display:flex; flex-direction:column; gap:18px; }
.jhx-foot-post{ display:flex; gap:14px; align-items:flex-start; }
.jhx-foot-post-thumb{ flex:0 0 80px; width:80px; height:64px; border-radius:8px; overflow:hidden; background:var(--jhx-soft); }
.jhx-foot-post-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.jhx-foot-post:hover .jhx-foot-post-thumb img{ transform:scale(1.07); }
.jhx-foot-post-body{ flex:1; min-width:0; }
.jhx-foot-post-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--jhx-ink); font-size:var(--fs-meta); font-weight:600; line-height:1.5; transition:color .25s ease; }
.jhx-foot-post:hover .jhx-foot-post-title{ color:var(--jhx-primary); }
.jhx-foot-post-excerpt{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--jhx-body); font-size:.875rem; line-height:1.6; margin-top:5px; }
/* 平板：公司簡介佔整列，下面兩欄並排 */
@media (max-width:991px){
  .jhx-foot-grid{ grid-template-columns:1fr 1fr; gap:40px 36px; }
  .jhx-foot-about{ grid-column:1 / -1; }
}
/* 手機：單欄堆疊 */
@media (max-width:600px){
  .jhx-footer{ padding:48px 0 22px; }
  .jhx-foot-grid{ grid-template-columns:1fr; gap:34px; }
}

/* 隱藏 main bar 搜尋按鈕（桌機／平板／手機全裝置；語言切換鈕保留）*/
#quik-search-btn{ display:none !important; }

/* 電腦版 main bar 選單字體 18px（含產品型錄 mega-menu 下拉選單放大）*/
@media (min-width:992px){
  .header-nav .nav > li > a{ font-size:18px; }
  .header-nav .nav > li .mega-menu > li > a{ font-size:18px; }
  .header-nav .nav > li .mega-menu > li ul a{ font-size:16px; }
}