/* ============================================================
   力軒科技 Maxtrans — 首頁 C 版(骨架:T1 Energy)統一版 v2 客製樣式
   原則:閱讀層(寬度、留白、字級比例、模組順序)照原站;
        只換字型、字級地板、圓角、色票,加上兩個品牌時刻。
   1. 色票與尺寸(覆寫原站 CSS 變數)
   2. 全站基礎(字型、字距、按鈕、眉標)
   3. 頁首(Headroom、下拉、搜尋、語系、詢價車)
   4. 首屏
   5. Company
   6. Products(型號清單 + 產品線圖解舞台)
   7. 品牌時刻 1:區塊底部流動波形線
   8. 品牌時刻 2:原理小圖解
   9. Applications
   10. News
   11. 頁尾
   12. 手機全屏選單、平板/手機
   ============================================================ */

/* 1. 色票與尺寸 --------------------------------------------- */
:root {
  /* 品牌色(logo 方塊漸層三點) */
  --mx-blue-d: #1E3F78;
  --mx-blue: #2F5CAC;
  --mx-blue-l: #3A6FCD;
  /* 字色兩階 + 深底 */
  --mx-ink: #111111;
  --mx-ink-2: #4A4F57;
  --mx-night: #0B1630;
  /* 底:白、淺灰帶 */
  --mx-band: #F3F5F8;
  /* 灰線兩階:不動的框 / 可以按的外框 */
  --mx-line: #E1E4EA;
  --mx-line-press: #B4BAC4;
  /* 深色玻璃(頁首、切換鈕) */
  --mx-glass: rgba(11, 22, 48, .55);
  --mx-split: 72px;   /* 左右兩欄中間的縫寬(10-28 Eric:48 太近)。縫以畫面中線置中:左欄停在中線前 36、右欄從中線後 36 開始
                        (10-29 Eric:兩欄中間的縫一定要置中;原站的縫 8px 也是左右各 4) */
  --mx-half: calc(var(--mx-split) / 2);

  /* 原站變數換成力軒的值 */
  --font-primary: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-secondary: "IBM Plex Mono", "Courier New", monospace;
  --color-text: var(--mx-ink);
  --color-grey1: var(--mx-ink);
  --color-grey2: var(--mx-ink-2);
  --color-grey3: var(--mx-line-press);
  --color-grey4: var(--mx-band);
  --color-black: var(--mx-night);
  --color-white-off: var(--mx-band);
  --color-bg-blur-dark: var(--mx-glass);
  --radius-large: 16px;
  --radius-large-inside: 16px;
  --radius-medium: 16px;
  --radius-button: 16px;
  --container-max-width: 1680px;   /* 原站 1400:1920 寬時左右空 260 → 改成跟首屏標題同一條 120 線 */
  /* 字級表:16 / 24 / 32 / 52(相鄰 ≥1.33 倍) */
  --size-caption: 16px;
  --size-body: 16px;
  --size-heading-sm: 24px;
  --size-heading-md: 32px;
  --size-heading-lg: 52px;
  --mx-ease: cubic-bezier(.42, 0, 0, 1);
}
@media (max-width: 1179.98px) {
  :root { --size-heading-sm: 20px; --size-heading-md: 28px; --size-heading-lg: 40px; --radius-large: 16px; --radius-large-inside: 16px; }
}
@media (max-width: 767px) {
  :root { --size-heading-md: 24px; --size-heading-lg: 36px; }
}

/* 2. 全站基礎 ----------------------------------------------- */
html.mx body { font-family: var(--font-primary); color: var(--mx-ink); font-size: 16px; }
html.mx body, html.mx body * { letter-spacing: 0 !important; }  /* 字距只准 0 或 .05em;原站 .01em 全歸零 */
/* 預設內外距歸零;用 :where 讓權重為 0,原站與元件規則一律優先 */
:where(html.mx) :where(h1, h2, h3, p, ul) { margin: 0; padding: 0; }
:where(html.mx) ul { list-style: none; }
:where(html.mx) a { color: inherit; text-decoration: none; }
:where(html.mx) button { font: inherit; color: inherit; }
:where(html.mx) img { max-width: 100%; }

/* 眉標(原站寫在 h1 上,我們改用 h2,樣式照抄:等寬大寫 + 小方塊) */
.module-text-eyebrow > .mx-eyebrow,
.module-stats-eyebrow > .mx-eyebrow,
.module-news-eyebrow > .mx-eyebrow,
.mx-chipsec__eyebrow > .mx-eyebrow,
.mx-apps__eye-m > .mx-eyebrow {
  display: flex; align-items: baseline; position: relative;
  font-family: var(--font-secondary); font-size: 16px; font-weight: 400; line-height: 1.3; text-transform: uppercase;
}
.module-text-eyebrow > .mx-eyebrow::before,
.module-stats-eyebrow > .mx-eyebrow::before,
.module-news-eyebrow > .mx-eyebrow::before,
.mx-chipsec__eyebrow > .mx-eyebrow::before,
.mx-apps__eye-m > .mx-eyebrow::before {
  content: ""; display: block; width: .6667em; height: .6667em; margin-right: .6667em; margin-top: -.05em; background-color: currentColor;
}
/* 各段標題前的小方塊一律品牌藍(10-28 Eric 定;Products、Applications 的方塊是原站樣式畫的,一起蓋) */
html.mx .mx-eyebrow::before,
html.mx .module-carousel .module-carousel-inner .module-carousel-content .module-carousel-heading::before,
html.mx .module-materialsAccordion .module-materialsAccordion-inner .module-materialsAccordion-content .module-materialsAccordion-heading::before { background-color: var(--mx-blue); }

/* 按鈕:原站 14px 字 + em 內距 → 16px 字、高 48、內距 4/8 倍數 */
.module-text .module-text-inner .module-text-content .module-text-cta,
.module-stats .module-stats-inner .module-stats-content .module-stats-cta,
.module-news .module-news-inner .module-news-content .module-news-cta,
.module-hero .module-hero-inner .module-hero-content .module-hero-content-left .module-hero-cta,
.mx-cta {
  height: 48px; padding: 0 24px; font-size: 16px; line-height: 1; border-radius: 16px;
}
/* Products 的按鈕原站沒有這個位置 → 照原站 Learn More 鈕的樣子自建 */
.mx-cta { display: inline-flex; align-items: center; justify-content: center; border: 1px solid; border-radius: 16px; font-family: var(--font-primary); transition: background-color .25s, color .25s, border-color .25s; }
/* 全站按鈕:藍底白字,滑過加深(10-28 Eric 定;首屏那顆也一樣,不再用玻璃) */
.module-text .module-text-inner .module-text-content .module-text-cta,
.module-stats .module-stats-inner .module-stats-content .module-stats-cta,
.module-news .module-news-inner .module-news-content .module-news-cta,
.module-hero .module-hero-inner .module-hero-content .module-hero-content-left .module-hero-cta,
.mx-cta { border-color: var(--mx-blue); background-color: var(--mx-blue); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (hover: hover) {
  .module-text .module-text-inner .module-text-content .module-text-cta:hover,
  .module-stats .module-stats-inner .module-stats-content .module-stats-cta:hover,
  .module-news .module-news-inner .module-news-content .module-news-cta:hover,
  .module-hero .module-hero-inner .module-hero-content .module-hero-content-left .module-hero-cta:hover,
  .mx-cta:hover { background-color: var(--mx-blue-d); border-color: var(--mx-blue-d); color: #fff; }
}

/* 3. 頁首 --------------------------------------------------- */
.mx-hd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 36px 36px 0; pointer-events: none;
  transition: transform .6s var(--mx-ease);
}
.mx-hd > * { pointer-events: auto; }
.mx-hd.is-hidden { transform: translateY(-120px); }
.mx-hd__logo { display: block; flex: none; transition: opacity .25s ease; }
.mx-hd__logo img { display: block; width: auto; height: 48px; }
.mx-hd.is-scrolled .mx-hd__logo { opacity: 0; pointer-events: none; }

/* 選單列的毛玻璃畫在 ::before 上,不畫在選單列本身:選單列一旦自己有 backdrop-filter,
   裡面的下拉面板、搜尋建議、語系清單的模糊就只看得到選單列裡面,後面的頁面完全沒模糊(瀏覽器規則) */
.mx-hd__bar {
  position: relative; display: flex; align-items: center; gap: 40px; isolation: isolate;
  min-height: 48px; padding: 4px 4px 4px 24px; border-radius: 16px; color: #fff;
}
.mx-hd__bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-color: var(--mx-glass); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
}
.mx-hd__mark { display: block; flex: none; width: 0; margin-right: -40px; opacity: 0; overflow: hidden; transition: width .5s var(--mx-ease), margin .5s var(--mx-ease), opacity .3s ease; }
.mx-hd__mark img { display: block; width: 32px; height: 32px; }
.mx-hd.is-scrolled .mx-hd__mark { width: 32px; margin-right: 0; opacity: 1; }
/* 平板手機的藍方塊(10-29 Eric:照桌機只留藍方塊):白字 logo 捲下去在白底看不到,捲動後換成這顆;
   捲動後左右連成一條毛玻璃長條(同桌機選單列:高 48、圓角 16),藍方塊在左(離邊 16,跟右邊 Menu 字離邊一樣),選單鈕在右、本身的玻璃底拿掉;桌機不出現 */
.mx-hd__mmark { display: none; }

.mx-hd__nav { display: flex; align-items: center; gap: 40px; }
.mx-hd__nav > li { position: relative; flex: none; transition: color .5s; }
.mx-hd__nav > li > a { display: flex; align-items: center; gap: 4px; height: 40px; font-size: 16px; line-height: 1; white-space: nowrap; }
.mx-hd__nav > li > a svg { width: 16px; height: 16px; transition: transform .4s var(--mx-ease); }
.mx-hd__nav:hover > li:not(:hover), .mx-hd__bar.is-open .mx-hd__nav > li:not(.is-hot) { color: rgba(255, 255, 255, .72); }
.mx-hd__bar.is-open .mx-hd__nav > li.is-hot > a svg { transform: rotate(180deg); }

.mx-hd__tools { display: flex; align-items: center; gap: 8px; }

/* 搜尋:能打型號,打字即出建議 */
.mx-search { position: relative; display: flex; align-items: center; }
.mx-search > svg { position: absolute; left: 12px; width: 20px; height: 20px; pointer-events: none; color: rgba(255, 255, 255, .72); }
.mx-search input {
  width: clamp(208px, 14vw, 256px); height: 40px; padding: 0 16px 0 40px;
  border: 0; border-radius: 12px; outline: 0;
  background: rgba(255, 255, 255, .12); color: #fff; font: 400 16px/1 var(--font-primary);
  transition: background-color .25s;
}
.mx-search input::placeholder { color: rgba(255, 255, 255, .72); }
.mx-search input:focus { background: rgba(255, 255, 255, .2); }
.mx-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* 頁首的搜尋:平常只有一顆放大鏡(跟 EN、Inquiry 一樣高 40);點了往左展開,蓋住主選單那一段,放大鏡換成關閉 ×(10-28 Eric 定) */
.mx-search--pop { width: 40px; height: 40px; }
.mx-search__toggle { position: relative; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: none; color: #fff; cursor: pointer; transition: background-color .25s; }
@media (hover: hover) { .mx-search__toggle:hover { background: rgba(255, 255, 255, .12); } }
.mx-search__toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity .25s, transform .4s var(--mx-ease); }
.mx-search__toggle .mx-i-close { opacity: 0; transform: rotate(-90deg); }
.mx-search--pop.is-open .mx-search__toggle svg:first-child { opacity: 0; transform: rotate(90deg); }
.mx-search--pop.is-open .mx-search__toggle .mx-i-close { opacity: 1; transform: none; }
.mx-search--pop input { position: absolute; top: 0; right: 0; width: 40px; padding: 0 48px 0 44px; opacity: 0; pointer-events: none; transition: width .5s var(--mx-ease), opacity .25s ease; }
.mx-search--pop.is-open input { width: var(--search-w, 320px); opacity: 1; pointer-events: auto; }
/* 展開後框的左邊留一個放大鏡(跟著框的左緣一起滑過去),右邊是關閉 × */
.mx-search__lead { position: absolute; top: 10px; right: 8px; z-index: 1; display: block; width: 20px; height: 20px; color: rgba(255, 255, 255, .72); opacity: 0; pointer-events: none; transition: right .5s var(--mx-ease), opacity .25s ease; }
.mx-search__lead svg { display: block; width: 20px; height: 20px; }
.mx-search--pop.is-open .mx-search__lead { right: calc(var(--search-w, 320px) - 32px); opacity: 1; }
.mx-hd__nav { transition: opacity .25s ease; }
.mx-hd__bar.is-searching .mx-hd__nav { opacity: 0; pointer-events: none; }
.mx-search__results {
  position: absolute; top: calc(100% + 8px); right: 0; width: 360px; padding: 8px;
  border-radius: 16px; background: rgba(11, 22, 48, .92); color: #fff;
  -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
}
.mx-search__results a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 12px 16px; border-radius: 12px; font-size: 16px; line-height: 1.5; }
.mx-search__results a b { font-family: var(--font-secondary); font-weight: 400; }
.mx-search__results a span { color: rgba(255, 255, 255, .72); }
.mx-search__results a:hover, .mx-search__results a.is-focus { background: rgba(255, 255, 255, .12); }
.mx-search__results p { padding: 12px 16px; color: rgba(255, 255, 255, .72); font-size: 16px; }

/* 語系:地球 + EN 下拉 */
.mx-lang { position: relative; }
.mx-lang__btn { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 8px; border: 0; border-radius: 12px; background: none; cursor: pointer; font-size: 16px; }
.mx-lang__btn svg { width: 20px; height: 20px; }
.mx-lang__btn svg + span { margin-left: 4px; }
.mx-lang__btn span + svg { width: 16px; height: 16px; transition: transform .4s var(--mx-ease); }
.mx-lang__btn[aria-expanded="true"] span + svg { transform: rotate(180deg); }
/* 語系選項放在下拉面板裡(mx-hd__col[data-for=lang]),目前的語言白字、另一個 72% */
.mx-hd .mx-hd__col[data-for="lang"] a { color: rgba(255, 255, 255, .72); }
.mx-hd .mx-hd__col[data-for="lang"] a.is-current, .mx-hd .mx-hd__col[data-for="lang"] a:hover { color: #fff; }

/* 詢價單:只有詢價、不顯示價格 → 品牌藍小鈕(詢價單圖示 + Inquiry + 件數;手機只留圖示和件數) */
.mx-cart { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 12px; background: var(--mx-blue); color: #fff; font: 400 16px/1 var(--font-secondary); transition: background-color .25s; }
.mx-cart svg { width: 20px; height: 20px; }
.mx-cart:hover { background: var(--mx-blue-l); }
.mx-cart__n { display: inline-block; min-width: 1ch; }
.mx-cart__t { font-family: var(--font-primary); }
.mx-cart.is-bump .mx-cart__n { animation: mx-bump .5s var(--mx-ease); }
@keyframes mx-bump { 0% { transform: translateY(0); } 35% { transform: translateY(-6px); } 100% { transform: translateY(0); } }

/* 下拉:跟原站一樣是一整塊深色玻璃,子選單各自排在母項正下方 */
.mx-hd__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); height: 0; overflow: hidden;
  border-radius: 16px; background-color: var(--mx-glass); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
  transition: height .5s var(--mx-ease);
}
.mx-hd__bar.is-open .mx-hd__panel { height: var(--panel-h, 200px); }
.mx-hd__col { position: absolute; top: 24px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translate3d(0, -24px, 0); transition: opacity .4s ease, transform .5s var(--mx-ease); }
.mx-hd__bar.is-open .mx-hd__col { opacity: 1; transform: none; }
.mx-hd__col a { display: block; color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.5; white-space: nowrap; transition: color .3s; }
.mx-hd__col.is-hot a, .mx-hd__col a:hover { color: #fff; }

.mx-hd__mob { display: none; align-items: center; gap: 8px; }
.mx-hd__menu {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 12px; border: 0; border-radius: 16px;
  background-color: var(--mx-glass); color: #fff; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); cursor: pointer; font-size: 16px;
}
.mx-hd__menu .x, .mx-menu__close .grid { display: none; }
.mx-hd__mob .mx-cart { height: 48px; border-radius: 16px; }
/* 手機的詢價放進選單(10-29 Eric:頁首只留 logo 和選單鈕):搜尋框正下方一條同高的藍鈕,件數靠右;平板以上不出現 */
.mx-cart--menu { display: none; }

/* 4. 首屏 --------------------------------------------------- */
.module-hero .module-hero-bg { background: var(--mx-night); }
.module-hero .module-hero-bg .media img { display: block; }
.module-hero .module-hero-inner .module-hero-content .module-hero-content-left .module-hero-headline { max-width: 11em; }
.mx-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.mx-hero-sub { max-width: 22em; color: rgba(255, 255, 255, .72); font-size: 24px; font-weight: 300; line-height: 1.3; }
/* 首屏輪播(Banner 清單在 build.py 的 BANNERS;mx.js 第 10 段)----------------------------------- */
/* 背景:幾張圖疊在一起交叉淡入,新的那張從 1.14 慢慢縮回 1(10-29 Eric:原本 1.06 太小看不出來,加強);上面一層深藍漸層保字看得清(淺色照片也一樣)。
   縮放跟著 is-zoom(mx.js 第 10 段換張時加上),不綁 is-active:第一張載入時本來就是 is-active,綁它的話第一張不會動 */
.mx-hero-bgi { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.mx-hero-bgi:first-child { position: relative; inset: auto; }   /* 第一張留在版面裡撐出首屏高度(原站規則:data-module-index=0 的圖至少一屏高),其他疊在上面 */
.mx-hero-bgi.is-active { opacity: 1; z-index: 1; }
.module-hero .module-hero-bg .mx-hero-bgi img { transform: scale(1.14); transition: transform 8s linear; }
.module-hero .module-hero-bg .mx-hero-bgi:not(:first-child) img { height: 100%; }
.module-hero .module-hero-bg .mx-hero-bgi.is-zoom img { transform: none; }
@media (prefers-reduced-motion: reduce) { .module-hero .module-hero-bg .mx-hero-bgi img { transform: none; transition: none; } }
@media (max-width: 1179.98px) { .module-hero .module-hero-bg .mx-hero-bgi img { object-position: var(--focus, 50% 50%); transform-origin: var(--focus, 50% 50%); } }   /* 直式螢幕裁掉左右時,以主角(晶片)為中心;縮放也從主角開始 */
.mx-hero-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 22, 48, .8) 0%, rgba(11, 22, 48, .45) 45%, rgba(11, 22, 48, 0) 75%),
              linear-gradient(to right, rgba(11, 22, 48, .75) 0%, rgba(11, 22, 48, .4) 40%, rgba(11, 22, 48, 0) 65%); }
/* 文字:幾張疊在同一格、底對齊(按鈕永遠在同一條線上,字多的往上長);換張時舊的淡出,新的標題→說明→按鈕一拍一拍上來 */
@media (max-width: 767px) {   /* 手機上字蓋住大半張圖,漸層從下往上拉高、加深 */
  .mx-hero-shade { background: linear-gradient(to top, rgba(11, 22, 48, .9) 0%, rgba(11, 22, 48, .65) 55%, rgba(11, 22, 48, 0) 85%); }
}
.mx-hero-slides { display: grid; }
.mx-hero-slide { grid-area: 1 / 1; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 48px; visibility: hidden; transition: visibility 0s .4s; }   /* 文字到按鈕 48(同改輪播前),手機 24 */
@media (max-width: 767px) { .mx-hero-slide { gap: 24px; } }
.mx-hero-slide.is-active { visibility: visible; transition-delay: 0s; }
.mx-hero-slide .mx-hero-copy > *, .mx-hero-slide .module-hero-cta { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .3s ease, transform .3s ease; }
.mx-hero-slide.is-active .mx-hero-copy > *, .mx-hero-slide.is-active .module-hero-cta { opacity: 1; transform: none; transition: opacity .6s ease, transform .75s cubic-bezier(.16, 1, .3, 1); }
.mx-hero-slide.is-active .mx-hero-copy > :nth-child(2) { transition-delay: .1s; }
.mx-hero-slide.is-active .module-hero-cta { transition-delay: .2s; }
.mx-hero-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mx-hero-list li { display: flex; align-items: flex-start; gap: 12px; }
.mx-hero-list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .47em; background: var(--mx-blue-l); }   /* 同標題前的方塊語言;方塊中心=第一行大寫字高的中心(字頂到基線的正中,像素量;10-29 Eric:原本貼基線偏低) */
/* 切換:‹ 01 ── 03 ›,線條=這張還剩多久換下一張 */
.mx-hero-nav { display: flex; align-items: center; gap: 16px; margin-top: 24px; color: #fff; }   /* 切換列是另一組:離按鈕 72(文字→按鈕 48 的 1.5 倍),手機 40 */
@media (max-width: 767px) { .mx-hero-nav { margin-top: 16px; } }
.mx-hero-arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: none; color: #fff; cursor: pointer; transition: background-color .25s, border-color .25s; }
.mx-hero-arrow svg { width: 16px; height: 16px; }
.mx-hero-arrow--prev svg { transform: rotate(180deg); }
@media (hover: hover) { .mx-hero-arrow:hover { border-color: #fff; background: rgba(255, 255, 255, .12); } }
.mx-hero-count { display: flex; align-items: center; gap: 12px; font: 400 16px/1 var(--font-secondary); color: rgba(255, 255, 255, .72); }
.mx-hero-count b { font-weight: 400; color: #fff; }
.mx-hero-bar { position: relative; width: 80px; height: 1px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.mx-hero-bar i { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.mx-hero-bar.is-run i { animation: mx-hero-bar var(--hero-dur, 7s) linear forwards; }
.mx-hero-nav.is-paused .mx-hero-bar i { animation-play-state: paused; }
@keyframes mx-hero-bar { to { transform: scaleX(1); } }

/* 5. Company(原站「公司數據」模組:右欄大字段+按鈕+三條大字事實,左下配圖)------ */
.module-stats.mx-company { padding-top: calc(var(--mx-gap) - 11px); }   /* 首屏圖底 → 眉標方塊頂 = --mx-gap,跟電流線上下同一個值(10-29 Eric;首屏和這段中間原站留 8、眉標方塊在字框裡往下 3,像素量) */
.mx-company .module-stats-inner .module-stats-content .module-stats-cta { margin-top: 48px; }
.mx-company .module-stats-inner .module-stats-content .module-stats-stats:not(:first-child) { margin-top: 96px; }
.mx-company .module-stats-inner .module-stats-content .module-stats-stats { gap: 64px; }
.mx-company .module-stats-inner .module-stats-content .module-stats-stats .module-stats-stat .stat-wrapper { font-size: var(--size-heading-lg); }   /* 原站 96px 數字;我們是字詞,降一階 */
.mx-company .module-stats-inner .module-stats-content .module-stats-stats .module-stats-stat .stat-caption { margin-top: 12px; max-width: 34em; font-size: 16px; line-height: 1.5; text-transform: none; }   /* 說明用一般大小寫(10-28 Eric:不要全大寫) */
.mx-company .module-stats-inner .module-stats-content .module-stats-stats .module-stats-stat .stat-wrapper { color: var(--mx-blue); }   /* 三條大字用品牌藍(10-28 Eric 定) */
/* 原站左下一張方圖 → 兩張(大樓、實驗室)並排,間距照原站 8px */
.mx-company .module-stats-inner .mx-co-media.module-stats-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: calc(50% - var(--mx-half)); }
@media (min-width: 1180px) { .mx-company .module-stats-inner .module-stats-content { padding-left: var(--mx-half); } }   /* 右欄從中線後 36 開始(縫置中) */
.mx-co-media .media img { display: block; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
/* Why Maxtrans:上排眉標+三個頁籤(eFuse / Ideal Diode / TVS & ESD),下排左欄爆炸圖黏住、右欄那條線的對照表(客戶簡報原表);
   表格捲過去的比例=圖拆開的進度(mx.js 第 11 段);圖三個頁籤共用一顆,不換。
   Products 之後、Applications 灰帶之前:上接 Products 的電流線,下面直接接灰帶(不放線,底 96 同 Products 原本接灰帶) */
/* 左右邊距、最寬都讀全站共用設定(10-29 Eric:跟其他區塊統一):桌機 120 / 平板 48 / 手機 12,內容最寬 1680 */
.mx-chipsec { padding: calc(var(--mx-gap) - 36px) var(--margin-6xl, 120px) var(--mx-gap); }   /* 上接 Products 的電流線:方塊底→眉標的墨 124(眉標的墨在字框裡往下 5,像素量);下:表格淡藍底的底→灰帶 124(10-29 Eric:96 時淡藍底太貼灰帶,看起來擠) */
.mx-chipsec__inner {
  max-width: var(--container-max-width); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "eye head" "fig why";
  container-type: inline-size;   /* 讓下面算圖的高度:圖寬 = 半欄 − 中縫 */
}
.mx-chipsec__eyebrow { grid-area: eye; align-self: baseline; }
/* 頁籤在標題下方、表格上方,置中(10-28 Eric);下面一條灰線把頁籤和表格隔開(10-28 Eric:「加一條灰線看看」)。
   標題+頁籤是一組、灰線以下是表格:標題墨底→膠囊頂 39,膠囊底→灰線 64(組間 > 組內 1.5 倍;10-29 Eric:原本 32 比標題那邊還近,標題和頁籤成不了一組);灰線→表格淡藍欄頂 32 */
.mx-chipsec__tabs { align-self: center; margin-bottom: 64px; }
/* 切換鈕:跟 Products 那顆同一個樣子(膠囊、白色滑塊彈過去、圓角 16/12、內距 4、字 16)。
   顏色照 Products 那顆(10-28 Eric:「頁籤樣式應該是這個版本」=灰):那顆是半透明深色疊在淺灰舞台上,看起來是 #737A8A;
   這裡在白底上直接用這個實色,兩顆看起來一模一樣 */
.mx-seg { position: relative; z-index: 0; display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px; background: #737A8A; }
.mx-seg__item { padding: 12px 16px; border: 0; border-radius: 12px; background: transparent; color: #fff; font-size: 16px; line-height: 1; white-space: nowrap; cursor: pointer; transition: color .25s; }
.mx-seg__item.is-active { color: var(--mx-ink); }
.mx-seg__item:focus-visible { outline: 2px solid var(--mx-blue-l); outline-offset: 2px; }
.mx-seg__marker { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; border-radius: 12px; background: #fff; }
/* 平板手機:捲進比較表、原本的頁籤滑出畫面後,底部浮出同一顆切換鈕(mx.js 第 11 段;10-29 Eric 選)。
   離底 16(iPhone 再加底部安全區);在頁首(100)、選單(200)之下;一點陰影讓它浮在表格上 */
.mx-why-float { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; opacity: 0; transform: translate(-50%, 24px); pointer-events: none; transition: opacity .3s ease, transform .4s var(--mx-ease); }
.mx-why-float.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mx-why-float .mx-seg { box-shadow: 0 8px 24px rgba(11, 22, 48, .2); }
@media (min-width: 1180px) { .mx-why-float { display: none; } }
/* 圖:黏在左欄(停在中線前 --mx-split),右欄表格多長,它就黏多久。
   框只有圖本身那麼高(圖說 21+24 + 圖 寬÷1.2 + 圖例 72),黏住時用 top 放到畫面正中;
   這樣捲到最後一屏放開時,左右兩欄的最後一行字對齊(10-28 Eric:左右欄最下緣要對齊)。
   上方 46:圖說的字頂跟右欄頁籤的字頂同一條線(像素量;右欄=標題下 32 + 膠囊內距 4 + 按鈕內距 12);
   下方 32(=表格每列下內距):對齊標準是文字(10-28 Eric:不對淡藍底這類元件)→ 放開時圖例的字底=表格最後一行字的字底(像素量)*/
.mx-chipsec__fig {
  --fig-h: calc(20.8px + 24px + (50cqw - var(--mx-half)) / 1.2 + var(--fig-leg, 72px));
  grid-area: fig; align-self: start; position: sticky; top: max(0px, calc((100vh - var(--fig-h)) / 2));
  margin: 46px 0 32px; padding-right: var(--mx-half);
}
.mx-chipsec__cap { margin-bottom: 24px; text-align: center; font-family: var(--font-secondary); font-size: 16px; line-height: 1.3; text-transform: uppercase; color: var(--mx-ink-2); }
.mx-chipbox { container-type: inline-size; }
/* 高度=圖(寬 1.2:1)+圖例約兩行;一開始就是最後的高度,不等裡面回報,頁面不會事後變長(事後變長會讓捲動動畫的位置算錯、內容被藏住) */
.mx-chip-frame { display: block; width: 100%; height: calc(100cqw / 1.2 + 72px); border: 0; background: transparent; }
@container (max-width: 449.98px) { .mx-chip-frame { height: calc(100cqw / 1.2 + 100px); } }
@container (max-width: 971.98px) { .mx-chipsec__fig { --fig-leg: 100px; } }   /* 桌機 1180–1211 寬:左欄的圖框窄於 450,圖例 3 列,黏住置中的高度跟著算 */   /* 框窄於 450(圖例色塊加了號碼變寬):圖例改 2 欄 × 3 列,多留一列的高度(跟 anim-chip 裡圖例切換同一個寬度) */
/* 對照表:一般對照表的排法(10-28 Eric:我們的產品放第一欄、要像傳統比較表一樣清楚;再改:看起來 no design、太擠)。
   每個頁籤=標題(客戶原表標題)+表格。欄寬固定比例:項目 34% / 我們 24% / 其他各 21%(兩欄的表=其他 42%),
   三個頁籤的淡藍欄同一個位置,切換時不跳;每列第一行字底對齊。
   層次:欄頭=產品名大字 24(我們藍),列標題 16 粗一階、好處 16 灰;Yes/NA 畫成勾與短橫線,整片字牆變少;每列上下 32。
   淡藍整欄畫在表格本身(不畫在每格:每列各自進場,畫在格子上會一段一段跳);欄頭捲動時黏在畫面頂 */
.mx-why { grid-area: why; margin-top: 32px; display: flex; flex-direction: column; }   /* 標題 → 頁籤 32 */
/* 表格一律緊接在頁籤下面。表格比左邊的圖矮時(TVS 只有 4 列)不硬對圖例:
   空撐在頁籤和表格中間會把同一組拆開(10-28 Eric:「上面一大截空白,表格比較短就不用對齊下緣」),短表就讓空留在表格下面 */
.mx-why__panel { border-top: 1px solid var(--mx-line); padding-top: 32px; }
.mx-why__panel[hidden] { display: none; }
@media (min-width: 1180px) { .mx-why__h, .mx-why { padding-left: var(--mx-half); } }   /* 右欄從中線後 36 開始(縫置中) */
/* 標題:上排右欄,置中;換頁籤時換成那張表的原標題(mx.js 第 11 段);跟左邊眉標同一條字底線 */
.mx-why__h { grid-area: head; align-self: baseline; text-align: center; font-size: var(--size-heading-md); font-weight: 300; line-height: 1.2; text-wrap: balance; }   /* 同 Company 那段大字 */
.mx-why__tbl { --why-cols: 34% 24% 21% 21%; --why-tint: #E6EBF5; position: relative; }
.mx-why__tbl--2 { --why-cols: 34% 24% 42%; }
.mx-why__tbl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 34%; width: 24%; border-radius: 16px; background: var(--why-tint); }
.mx-why__hd, .mx-why__row { position: relative; display: grid; grid-template-columns: var(--why-cols); align-items: baseline; }
.mx-why__hd { position: sticky; top: 0; z-index: 1; background: #fff; border-bottom: 1px solid var(--mx-line); }
.mx-why__hd > * { align-self: stretch; padding-top: 32px; padding-bottom: 24px; }
.mx-why__hd .mx-why__k { font-family: var(--font-secondary); font-size: 16px; line-height: 1.3; text-transform: uppercase; color: var(--mx-ink-2); }
.mx-why__hd .mx-why__c { font-size: var(--size-heading-sm); font-weight: 400; line-height: 1.2; color: var(--mx-ink-2); }
.mx-why__hd .is-us { border-radius: 16px 16px 0 0; background: var(--why-tint); color: var(--mx-blue); }
.mx-why__row > * { padding-top: 32px; padding-bottom: 32px; }
.mx-why__row + .mx-why__row { border-top: 1px solid var(--mx-line); }
.mx-why__k { padding-right: 32px; }
.mx-why__c { padding-left: 16px; padding-right: 16px; text-align: center; }   /* 欄頭、值、勾都置中;左邊項目欄維持靠左(多行字置中難讀) */
.mx-why__t { font-size: 16px; font-weight: 500; line-height: 1.5; }
.mx-why__b { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--mx-ink-2); }
.mx-why__row .mx-why__c { font-size: 16px; line-height: 1.5; color: var(--mx-ink-2); }
.mx-why__row .is-us { color: var(--mx-ink); }
.mx-why__c.is-mark svg { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; color: var(--mx-line-press); }   /* 圖示中心約在字的中段 */
.mx-why__c.is-us.is-mark svg { color: var(--mx-blue); }
.mx-why__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mx-why__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 欄名:桌機看欄頭就好,只給讀屏;手機才露出來 */
@media (max-width: 1179.98px) {
  .mx-chipsec { padding-left: var(--margin-3xl, 48px); padding-right: var(--margin-3xl, 48px); }
  .mx-chipsec__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eye" "fig" "head" "why"; }
  .mx-chipsec__fig { position: static; padding-right: 0; margin: 48px 0 0; }
  .mx-why__h { margin-top: 48px; }
}
/* 手機:四欄太窄 → 每列=項目(+好處),下面一行一個對照(欄名在左),我們那行淡藍底;欄頭與整欄底色不用 */
@media (max-width: 767px) {
  .mx-why__tbl::before, .mx-why__hd { display: none; }
  .mx-why__panel { padding-top: 2px; }   /* 沒有欄頭:線下=2+第一列上內距 24+字框上緣到字頂約 6 → 字頂離線 32,跟線上面一樣(像素量) */
  .mx-why__row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 24px 0; }
  .mx-why__row > * { padding: 0; }
  .mx-why__k { padding-right: 0; margin-bottom: 8px; }
  .mx-chipsec { padding-left: var(--pwx, 12px); padding-right: var(--pwx, 12px); }
  /* 手機邊距只剩 12:我們那行的淡藍底不再往外凸(會碰到畫面邊),改成每行對照都縮進 12、淡藍底停在內容邊,項目名在最左當標題 */
  .mx-why__c { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 16px; padding: 0 12px; text-align: left; }
  .mx-why__row .is-us { padding: 8px 12px; border-radius: 8px; background: var(--why-tint); }
  .mx-why__l { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-family: var(--font-secondary); text-transform: uppercase; color: var(--mx-ink-2); }
  .mx-why__row .is-us .mx-why__l { color: var(--mx-blue); }
  .mx-seg__item { padding: 12px; }
}

/* 6. Products ----------------------------------------------- */
.mx-products .module-carousel-inner { align-items: stretch; }
.mx-products .module-carousel-inner .module-carousel-content { gap: 48px; padding-top: 48px; padding-right: var(--mx-half); }   /* 上內距 48:PRODUCTS 跟右邊輪播裡的小標(TVS & ESD…)同一條線(10-28 Eric) */
.mx-products .module-carousel-inner .module-carousel-content .module-carousel-text { max-width: none; }
.mx-products .module-carousel-inner .module-carousel-content .module-carousel-text > p { position: static; max-width: 16em; }

/* 熱門型號三張卡:排在全頁版邊線之內(跟首屏標題、各段眉標同一條線),三欄間距 24 同 News */
.mx-pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: var(--container-max-width); margin: 64px auto 0; }
.mx-pcard { display: flex; flex-direction: column; gap: 24px; }
.mx-pcard__media {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; width: 100%; padding: 0;
  border: 0; border-radius: 16px; background: var(--mx-band); cursor: pointer;
}
.mx-pcard__media img { display: block; width: auto; height: 120px; mix-blend-mode: multiply; transition: transform .66s var(--mx-ease); }   /* 三張封裝圖同高;白底用 multiply 吃進灰框 */
@media (hover: hover) { .mx-pcard__media:hover img { transform: scale(1.05); } }
.mx-pcard__body { display: flex; flex-direction: column; align-items: flex-start; }
.mx-pcard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; font: 400 16px/1.5 var(--font-secondary); color: var(--mx-ink-2); }
.mx-pcard__line { display: flex; align-items: baseline; color: var(--mx-ink); }
.mx-pcard__line::before { content: ""; display: block; flex: none; width: .6667em; height: .6667em; margin-right: .6667em; background: var(--mx-blue); }   /* 三張都藍(10-28 Eric:卡片跟圖表不在同一屏,就不做跟切換鈕連動變色) */
.mx-pcard__no { margin-top: 16px; font-size: 24px; font-weight: 300; line-height: 1.3; }
.mx-pcard__fn { margin-top: 4px; font-size: 16px; line-height: 1.5; }
.mx-pcard__spec { margin-top: 0; color: var(--mx-ink-2); font-size: 16px; line-height: 1.5; }
.mx-pcard .mx-add { margin-top: 24px; }
.mx-pcard.is-flash .mx-pcard__media { background: var(--mx-line); }
.mx-pcard__media { transition: background-color .6s ease; }
.mx-add {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px;
  border: 1px solid var(--mx-blue); border-radius: 12px; background: var(--mx-blue); color: #fff; cursor: pointer;
  font-size: 16px; line-height: 1; white-space: nowrap; transition: background-color .25s, border-color .25s, color .25s;
}
.mx-add svg { width: 20px; height: 20px; flex: none; }
.mx-add__ok { display: none; }
/* 詢價鈕:平常跟全站按鈕一樣藍底白字、滑過加深;加入後反過來變白底藍字+勾,一眼分得出加過沒 */
@media (hover: hover) { .mx-add:hover { border-color: var(--mx-blue-d); background: var(--mx-blue-d); } }
.mx-add.is-added { border-color: var(--mx-blue); background: #fff; color: var(--mx-blue); }
@media (hover: hover) { .mx-add.is-added:hover { border-color: var(--mx-blue-d); background: #fff; color: var(--mx-blue-d); } }
.mx-add.is-added .mx-add__plus { display: none; }
.mx-add.is-added .mx-add__ok { display: block; }

/* 右邊舞台:原站放產品照的灰底方塊 → 放產品線原理圖解;切換鈕照原站 */
/* 舞台從中線後 36 開始(縫置中),右邊照舊出血到畫面邊(原站最小寬 50vw − 8,扣掉往右讓的 36) */
@media (min-width: 1180px) {
  .mx-products .module-carousel-inner > .module-carousel-carousel { padding-left: var(--mx-half); }
  .mx-products .module-carousel-inner > .module-carousel-carousel .part-carousel { min-width: calc(50vw - 8px - var(--mx-half)); }
}
/* 高度跟著內容走(10-28 Eric:圖表卡變矮,讓下面的產品卡露出來一些):三個項目疊在同一格,舞台=最高那個,切換不跳;
   原站是正方形(1440 寬時 712 高),現在約 600 */
.mx-lines .part-carousel-media { display: grid; background-color: var(--mx-band); }
.mx-lines.part-carousel .part-carousel-media .part-carousel-item,
.mx-lines.part-carousel .part-carousel-media .part-carousel-item:first-child { position: relative; grid-area: 1 / 1; height: auto; }
.mx-lines .part-carousel-nav .part-carousel-nav-inner { border-radius: 16px; background-color: var(--mx-glass); font-size: 16px; }
.mx-lines .part-carousel-nav .part-carousel-nav-inner .part-carousel-nav-item { padding: 12px 16px; border: 0; border-radius: 12px; background: transparent; font-size: 16px; line-height: 1; white-space: nowrap; }
.mx-lines .part-carousel-nav .part-carousel-nav-inner .part-carousel-nav-item.is-active { color: var(--mx-ink); }
.mx-lines .part-carousel-nav .part-carousel-nav-inner span.marker { min-width: 0; border-radius: 12px; }
.mx-line { display: flex; flex-direction: column; height: 100%; padding: 48px 48px 120px; }
.mx-line__label {
  display: flex; align-items: baseline; font: 400 16px/1.3 var(--font-secondary); color: var(--mx-ink);   /* 產品線名保留原本大小寫(eFuse) */
}
.mx-line__label::before { content: ""; display: block; width: .6667em; height: .6667em; margin-right: .6667em; margin-top: -.05em; background: var(--mx-blue); }
/* 圖與說明都從上往下排、不撐開:說明行數不同(eFuse 2 行、另外兩個 3 行)時,圖和說明的位置三個頁籤都一樣,多的空留在說明下面 */
.mx-line__dg { flex: none; display: flex; justify-content: center; padding: 24px 0; }
/* 圖解:字固定約 12.8px(10-28 Eric:字很大、不夠精緻;原本跟著螢幕放大,1440 寬時 17.6、1875 寬時 23.8)。
   寬度撐滿舞台,線和波形往左右拉長、字和元件不變大(mx.js 第 4 段;10-28 Eric:圖表做寬度 RWD) */
.mx-line__dg svg { display: block; width: 100%; height: auto; }
.mx-line__desc { max-width: 36em; color: var(--mx-ink-2); font-size: 16px; line-height: 1.5; }
/* 舞台灰底照原站往右出血到畫面邊,但裡面的內容(圖、說明、切換鈕)右緣停在全頁版邊線,跟下面三張產品卡的右緣同一條線
   (10-28 Eric:「圖表切齊那條線」)。出血量=畫面右邊到版邊的距離 − 原站留的 8 */
@media (min-width: 1180px) {
  .mx-products { --mx-bleed: calc(max(120px, (100vw - var(--container-max-width)) / 2) - 8px); }
  .mx-line { padding-right: var(--mx-bleed); }
  .mx-lines .part-carousel-nav { padding-right: var(--mx-bleed); }   /* 切換鈕跟著置中在內容那一欄 */
}

/* 7. 品牌時刻 1:區塊底部電流線(線由 mx.js 第 8 段畫) -------------------------- */
/* 細線貼在區塊最底、左右滿版(掛在區塊本身,不受內距影響);區塊底部預留 內容↔線 64 + 線高 80 */
.mx-has-wave { position: relative; }
/* 電流線上下的空白要一樣(10-28 Eric):上=內容底到線,下=線到下一段第一個看得到的東西(量看得到的線,不量框)。
   10-29 換成單線+方塊;上下都用全站區塊留白 --mx-gap */
/* 10-29 Eric:電流線連接的兩段太擠 → 全站電流線上下都 124(內容底→方塊頂、方塊底→下一段第一個看得到的東西,像素量)。
   線框 80 高、方塊上緣在框內 39、下緣在 49:本段下內距 = 124 + 80 − 39;下一段上內距 = 124 − (80 − 49) */
:root { --mx-gap: 128px; }   /* 全站區塊之間的留白(上一段最後一個看得到的東西 → 下一段第一個看得到的東西;10-29 Eric:全站 128,News 那邊的 128 看起來最舒服) */
.module-text.mx-has-wave, .module-stats.mx-has-wave, .module-carousel.mx-has-wave { padding-bottom: calc(var(--mx-gap) + 41px); }
.module-carousel.mx-products { padding-top: calc(var(--mx-gap) - 31px); }   /* 桌機:方塊底 → 灰色舞台頂 124 */
@media (max-width: 1179.98px) { .module-carousel.mx-products { padding-top: calc(var(--mx-gap) - 34px); } }   /* 平板手機第一個是眉標,墨在字框裡往下 3 */
@media (max-width: 1179.98px) { .mx-chipsec { padding-top: calc(var(--mx-gap) - 34px); } }   /* Why 也一樣:平板手機第一個是眉標(桌機第一個是右上的大標題,墨往下 5) */
/* 電流線只放在兩個白底區塊之間:Products 後面接白底的 Why eFuse → 有線(底 152);Why eFuse 接灰帶不放線 */
/* Applications:項目只有四條,圖從正方形改 4:3,整段矮一些(10-28 Eric) */
.mx-apps .module-materialsAccordion-inner .module-materialsAccordion-media { aspect-ratio: 4 / 3; }
.mx-wave { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; overflow: hidden; pointer-events: none; }
.mx-wave__svg { display: block; width: 100%; height: 80px; overflow: visible; }
.mx-wave__p { fill: none; stroke: var(--mx-blue); stroke-width: 1.25; stroke-linecap: round; }
.mx-wave__p--base { opacity: .25; }
.mx-wave__svg { color: var(--mx-blue); }
.mx-wave__drop { stroke: none; }   /* 水滴脈衝:填色是 mx.js 裡的漸層(尾巴透明 → 頭實色) */
.mx-wave__sq { fill: var(--mx-blue); }   /* logo 方塊:實色、直角 */
.mx-wave__ring { fill: none; stroke: var(--mx-blue); stroke-width: 1.25; opacity: 0; }

/* 7b. 品牌時刻 3:菱形格子(新聞和頁尾之間;SVG 由 mx.js 第 9 段畫) ---- */
/* 一格=寬 1/22 螢幕的扁菱形(寬:高 3:2),但不超過畫面高的 7.5%(矮筆電不會佔掉半個畫面);上下錯半格排 12 列,
   區塊高 = 6 格高 ≈ 畫面高的三成;JS 由這個高度反推格子大小 */
.mx-dia { --w: min(calc(100vw / 22), 7.5vh); --h: calc(var(--w) * 2 / 3); position: relative; height: calc(var(--h) * 6); overflow: hidden; }
.mx-dia__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
@media (max-width: 1023px) { .mx-dia { --w: calc(100vw / 9.5); } }

/* 8. 品牌時刻 2:原理小圖解(單色:品牌藍線 + 灰字) ------------- */
.mx-dg { overflow: visible; }
.mx-dg__t { font: 400 16px var(--font-secondary); fill: var(--mx-ink-2); }   /* 圖內單位;1440 寬時約 17.6px */
.mx-dg__t--ghost { fill: var(--mx-blue); opacity: .55; }
.mx-dg__zone { fill: var(--mx-blue); opacity: .06; }   /* TVS 的 SAFE ZONE 安全區(客戶 p119 用語) */
.mx-dg__w { stroke: var(--mx-blue); stroke-width: 2; }
.mx-dg__box { fill: #fff; stroke: var(--mx-blue); stroke-width: 2; }
.mx-dg__node { fill: #fff; stroke: var(--mx-blue); stroke-width: 2; }
.mx-dg__joint, .mx-dg__pin { fill: var(--mx-blue); }
.mx-dg__blade { stroke: var(--mx-blue); stroke-width: 3; stroke-linecap: round; transform-origin: 228px 72px; transform-box: view-box; transition: transform .25s var(--mx-ease); }
.mx-dg.is-open .mx-dg__blade { transform: rotate(-30deg); }
.mx-dg__dot { fill: var(--mx-blue); }
.mx-dg__diode { fill: #fff; stroke: var(--mx-blue); stroke-width: 2; stroke-linejoin: round; }
.mx-dg__bar { fill: none; stroke: var(--mx-blue); stroke-width: 3; }
.mx-dg__ring { fill: none; stroke: var(--mx-blue); stroke-width: 2; opacity: 0; }
.mx-dg__pulse { fill: var(--mx-blue); opacity: 0; }
.mx-dg__axis { stroke: var(--mx-ink); stroke-opacity: .12; stroke-width: 1; }
.mx-dg__limit { stroke: var(--mx-blue); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: .6; }
.mx-dg__tr { fill: none; stroke: var(--mx-blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mx-dg__ghost { fill: none; stroke: var(--mx-blue); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: .45; }
.mx-dg__head { fill: var(--mx-blue); opacity: 0; }
.mx-dg__lbls text { transition: opacity .4s ease; }
.mx-dg.is-anim .mx-dg__lbls text { opacity: 0; }
.mx-dg.is-anim .mx-dg__lbls text.is-on { opacity: 1; }

/* 9. Applications ------------------------------------------- */
.mx-apps .module-materialsAccordion-inner .module-materialsAccordion-media > .media { border-radius: 16px; background: var(--mx-night); }
.mx-apps .module-materialsAccordion-inner .module-materialsAccordion-content .module-materialsAccordion-accordions { max-width: 400px; }
.mx-apps .module-materialsAccordion-inner .module-materialsAccordion-content .module-materialsAccordion-heading { font-size: 16px; }
.mx-apps .module-materialsAccordion-heading h2 { font: inherit; }
.mx-apps .part-dropdown { border-radius: 16px; }
.mx-apps .part-dropdown header { cursor: pointer; }
.mx-apps .part-dropdown header:focus-visible { outline: 2px solid var(--mx-blue); outline-offset: 4px; border-radius: 8px; }
.module-materialsAccordion .module-materialsAccordion-inner .module-materialsAccordion-content .module-materialsAccordion-accordions > .part-dropdown .part-dropdown-inner .part-dropdown-content .part-dropdown-content-inner {
  max-width: none; padding-top: 12px; padding-right: 0; font-family: var(--font-primary); font-size: 16px; line-height: 1.6; text-transform: none; color: var(--mx-ink-2);
}
.mx-apps .part-dropdown header .toggle { flex: none; }
/* 我們自己的 +/-:兩條 1.5 細線;手風琴展開時直線轉 90 度疊成 -(詢價鈕的 + 也是這顆) */
.mx-pm path { fill: none; stroke: currentColor; stroke-width: 1.5; }
.mx-pm__v { transform-box: fill-box; transform-origin: center; transition: transform .4s var(--mx-ease); }
.toggle.is-open .mx-pm__v { transform: rotate(90deg); }
/* 手風琴那顆再細一級 1.5 → 1(10-28 Eric:「收合容器的 +- 線條細一級」;詢價鈕的 + 維持 1.5) */
.mx-apps .toggle .mx-pm path { stroke-width: 1; }

/* 10. News(只有日期+標題:原站新聞卡拿掉圖,三欄排在內容寬裡,上緣一條細線)------ */
.mx-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: var(--container-max-width); margin: 48px auto 0; }
.mx-news__item a { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; border-top: 1px solid var(--mx-line); }
.mx-news__meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 400 16px/1.3 var(--font-secondary); color: var(--mx-ink-2); }   /* 分類左、日期右 */
/* 分類=淡灰底圓角標籤(10-29 Eric:藍方塊是段落標題的記號,分類用它權重跟標題一樣;比過外框、純文字,定案淡灰底);每則同位置重複,可以用標籤(精華第 15 條) */
.mx-news__cat { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--mx-band); color: var(--mx-ink); text-transform: uppercase; }
.mx-news__date { color: var(--mx-ink-2); }
.mx-news__t { max-width: 15em; padding-right: 1em; font-size: 24px; font-weight: 300; line-height: 1.3; transition: color .25s ease; }
@media (hover: hover) { .mx-news__item a:hover .mx-news__t { color: var(--mx-blue); } }
.module-news { padding-top: calc(var(--mx-gap) - 8px); padding-bottom: calc(var(--mx-gap) - 10px); }   /* 灰帶底→NEWS 眉標、最後一則→菱形格子都 = --mx-gap(像素量;原站 120+區塊之間 8) */
@media (max-width: 767px) { .module-news { padding-bottom: calc(var(--mx-gap) - 11px); } }
/* 標題列:左邊 NEWS 眉標、右邊 All News(右緣對齊第三則的右緣),上下置中;手機也同一列(10-29 Eric:原本按鈕停在畫面中線,跟下面三則都沒對齊) */
.module-news .module-news-inner { flex-direction: row; align-items: center; gap: 24px; }
.module-news .module-news-inner .module-news-eyebrow, .module-news .module-news-inner .module-news-content { width: auto; }
.module-news .module-news-inner .module-news-content { align-items: flex-end; }

/* 11. 頁尾(10-28 Eric 選 A:左 logo+聯絡、右三欄選單、細線下版權列) ------ */
/* 深藍底;左右邊距同各段 120;上 96、下 120 的呼吸;字 16(標題=等寬大寫 72%,連結=白);版權列 12 */
.mx-ft { background: var(--mx-night); color: #fff; font: 400 16px/1.5 var(--font-primary); }
.mx-ft__in { padding: 96px 120px 120px; }
.mx-ft a { color: inherit; text-decoration: none; transition: color .2s ease; }
@media (hover: hover) { .mx-ft a:hover { color: #8db0ee; } }
.mx-ft p { margin: 0; }
.mx-ft .mx-ft__h { margin-bottom: 24px; font: 400 16px/1.5 var(--font-secondary); text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.mx-ft__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mx-ft__list--info { color: rgba(255, 255, 255, .72); }
.mx-ft__addr { display: block; max-width: 20em; color: rgba(255, 255, 255, .72); }
.mx-ft__list--info li:last-child { margin-top: 1.5em; }   /* LinkedIn 跟上面的聯絡資料空一行(10-29 Eric) */
.mx-ft__logo { display: block; width: 172px; height: auto; }   /* 跟頁首 logo 同大小 */
.mx-ft__copy, .mx-ft__up { font: 400 12px/1.5 var(--font-secondary); text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.mx-ft__up { display: inline-flex; align-items: center; gap: 8px; }
.mx-ft__up svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.mx-ft__bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 120px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); }
/* 十二欄格線:左 4 欄放 logo+聯絡,右 7 欄放三欄選單(跟各段同一組欄距 24) */
.mx-ft__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.mx-ft__brand { grid-column: 1 / span 4; }
.mx-ft__brand .mx-ft__list { margin-top: 40px; }
.mx-ft__grid .mx-ft__nav { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }

/* 12. 手機全屏選單、平板/手機 ------------------------------------ */
.mx-menu {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; gap: 32px;
  padding: 24px 24px 32px; overflow-y: auto; background: var(--mx-night); color: #fff;
}
.mx-menu[hidden] { display: none; }
.mx-menu__top { display: flex; align-items: center; justify-content: space-between; }
.mx-menu__top img { height: 40px; width: auto; }
.mx-menu__close { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 12px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .12); cursor: pointer; font-size: 16px; }
.mx-menu__close .x { display: block; }
.mx-search--menu input { width: 100%; height: 48px; }
.mx-search--menu .mx-search__results { left: 0; right: 0; width: auto; }
.mx-menu__list > li { border-top: 1px solid rgba(255, 255, 255, .2); padding: 16px 0; }
.mx-menu__a { display: block; font-size: 28px; font-weight: 300; line-height: 1.3; }
.mx-menu__sub { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }
.mx-menu__sub a { color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.5; }
.mx-menu__foot { display: flex; gap: 24px; margin-top: auto; font-size: 16px; }
.mx-menu__foot a { color: rgba(255, 255, 255, .72); }
.mx-menu__foot a.is-current { color: #fff; }
html.mx-lock, html.mx-lock body { overflow: hidden; }

@media (max-width: 1365px) {
  .mx-hd__bar, .mx-hd__nav { gap: 32px; }
  .mx-hd__mark { margin-right: -32px; }
}
@media (max-width: 1179.98px) {
  .mx-hd { padding: 16px 16px 0; align-items: center; }
  .mx-hd.is-hidden { transform: translateY(-96px); }
  .mx-hd__logo img { height: 40px; }
  .mx-hd::before {
    content: ""; position: absolute; top: 16px; left: 16px; right: 16px; z-index: -1; height: 48px; border-radius: 16px;
    background-color: var(--mx-glass); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
    opacity: 0; transition: opacity .25s ease;
  }
  .mx-hd.is-scrolled::before { opacity: 1; }
  .mx-hd__mmark {
    position: absolute; top: 16px; left: 24px; display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .mx-hd__mmark img { display: block; width: 32px; height: 32px; }
  .mx-hd.is-scrolled .mx-hd__mmark { opacity: 1; pointer-events: auto; }
  .mx-hd__menu { transition: background-color .25s ease; }
  .mx-hd.is-scrolled .mx-hd__menu { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mx-hd.is-scrolled .mx-hd__mob .mx-cart { height: 40px; border-radius: 12px; }   /* 長條裡的詢價鈕同桌機:高 40、離邊 4、圓角 16−4 */
  .mx-hd__bar { display: none; }
  .mx-hd__mob { display: flex; }

  .mx-products .module-carousel-inner { flex-direction: column; gap: 48px; }
  .mx-products .module-carousel-inner .module-carousel-content { width: 100%; padding-top: 0; padding-right: 0; }   /* 手機:上面已有段落上內距 80,這裡歸 0(線到小標約 96) */
  .mx-products .module-carousel-inner > .module-carousel-carousel { width: 100%; }
  .mx-products .module-carousel-inner > .module-carousel-carousel .part-carousel { min-width: 0; }
  .mx-pcards { margin: 48px 0 0; }
  .mx-news { grid-template-columns: minmax(0, 1fr); }
  .mx-line { padding: 24px 24px 104px; }
  .mx-lines .part-carousel-nav { padding: 0 16px 24px; }


  .mx-ft__in { padding: 64px 24px 96px; }
  .mx-ft__grid { display: block; }
  .mx-ft__grid .mx-ft__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-top: 64px; }
  .mx-ft__bar { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 64px; }
}
@media (max-width: 767px) {
  .mx-pcards { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mx-company .module-stats-inner .mx-co-media.module-stats-media { width: 100%; }
  .mx-lines .part-carousel-media { aspect-ratio: 3 / 4; }
  .mx-line__desc { display: none; }
  .mx-line__dg { flex: 1; align-items: center; }   /* 手機:舞台照舊 3:4、沒有說明,圖在中間 */
  .mx-lines .part-carousel-nav .part-carousel-nav-inner .part-carousel-nav-item { min-width: 0; padding: 12px; }
}


/* 補:切換鈕滑塊的定位基準、錨點捲動 */
.mx-lines .part-carousel-nav .part-carousel-nav-inner { position: relative; }
html.mx { scroll-behavior: smooth; }
html.mx .modules-wrapper > .module, html.mx footer { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html.mx { scroll-behavior: auto; } }

/* ===== 平板、手機(10-29 Eric:桌機算完成,開始優化 RWD) ===== */
.mx-apps__eye-m { display: none; }
@media (max-width: 1179.98px) {
  /* Company:平板也改成一欄(原本左欄只有眉標、右欄字擠在半邊,一行只有十幾個字);照片排在最後,同手機 */
  .mx-company .module-stats-inner { flex-direction: column; gap: 48px; }
  .mx-company .module-stats-inner .module-stats-eyebrow, .mx-company .module-stats-inner .module-stats-content { width: 100%; }
  .mx-company .module-stats-inner .module-stats-content { padding-left: 0; }
  .mx-company .module-stats-inner .mx-co-media.module-stats-media { position: relative; bottom: auto; left: auto; width: 100%; margin-top: 0; }
  /* 頁尾連結:觸控時點擊範圍上下各加 11(排版不動,用負邊界抵掉),點得到的高度 40 */
  .mx-ft a { display: inline-block; padding-block: 11px; margin-block: -11px; }
}
@media (max-width: 767px) {
  .mx-hd__mob .mx-cart { display: none; }
  .mx-cart--menu { display: flex; height: 48px; margin-top: -16px; border-radius: 16px; }   /* 跟搜尋框隔 16(選單本身各段隔 32) */
  .mx-cart--menu .mx-cart__n { margin-left: auto; }
  /* 比較表欄名:桌機版只給讀屏時設了不換行,手機露出來要能換行(10-29 Eric:P-MOSFET + DISCRETE CIRCUIT 疊到右邊的字) */
  .mx-why__l { white-space: normal; overflow-wrap: anywhere; }
  /* 首屏:大標用大一階(36),跟下面 24 的副標拉開(原本兩個都 24,分不出主次) */
  .module-hero .module-hero-inner .module-hero-content .module-hero-content-left .module-hero-headline { font-size: var(--size-heading-lg); }
  /* Applications:眉標先、圖片、再手風琴;灰帶上下內距一樣(原本上 12、下 120) */
  .mx-apps__eye-m { display: block; }
  .mx-apps .module-materialsAccordion-inner .module-materialsAccordion-content .module-materialsAccordion-heading { display: none; }
  .module-materialsAccordion.mx-apps { padding-top: 45px; padding-bottom: 48px; }   /* 灰帶頂→眉標的墨、最後一項→灰帶底都是 48(眉標的墨在字框裡往下 3,像素量) */
  .mx-apps .module-materialsAccordion-inner { gap: 32px; }
  /* Why:手機沒有淡藍整欄,最下面是最後一列的字(列下內距 24+字框到墨約 5)→ 下內距 124−29,最後一列的墨→灰帶 124,同桌機 */
  .mx-chipsec { padding-bottom: calc(var(--mx-gap) - 29px); }
}