@charset "UTF-8";
/* ==========================================================================
   TBI 全球傳動集團首頁|トヨコー版 客製樣式
   原站 _astro/*.css 一行不動,全部在這裡蓋。
   尺寸單位:原站整站跟著視窗寬縮放(1rem = 視窗寬 ÷ 1366 × 16;手機 1rem = 視窗寬 × 8.53%),
            自寫元件一律沿用 rem,才會跟原站一起縮放;閱讀字用 max(16px, …) 保底。
   ========================================================================== */

/* ---------- 0. 色票與共用值(新值先查這裡,沒有才加) ---------- */
:root {
  --tbi-blue: #006db8;        /* CI 藍 = 全站點綴色(按鈕、膠囊、可按的線、滑過、小標籤)*/
  --tbi-red: #e83e2d;         /* CI 紅:40 週年圖、游標 */
  --tbi-dark: #1a1c22;        /* 對標深底 */
  --tbi-light: #f8f9fa;       /* 對標淺底 */
  --tbi-panel: #ecedf0;       /* 對標灰卡/灰區 */
  --tbi-sub: #505050;         /* 淺底次要字 */
  --tbi-sub-d: #8d8e91;       /* 深底次要字 */
  /* 灰線只兩階:靜態(框、分隔線)/可按(按鈕外框) */
  --tbi-line: rgba(0, 0, 0, .2);          /* 對標新聞列表分隔線 */
  --tbi-line-press: var(--tbi-blue);      /* 可按的東西的外框(第一輪:黑 → logo 藍) */
  --tbi-line-d: rgba(255, 255, 255, .2);  /* 深底靜態線 */
  --tbi-line-press-d: #fff;               /* 深底可按外框 */
  --tbi-ease: cubic-bezier(.85, 0, .15, 1);   /* 對標主要緩動 */
  --tbi-ease-out: cubic-bezier(0, .55, .45, 1); /* 對標按鈕滑過 */
  --ff-en: "Inter Tight", "Noto Sans TC", sans-serif; /* 2026-10-16 換 Google 字體(設計 DNA:只用 Google Fonts) */
  --ff-zh: "Noto Sans TC", sans-serif;
  --fs-read: max(16px, .875rem);  /* 閱讀字:原站 .875rem,保底 16px */
}
@media screen and (max-width: 820.98px) {
  :root { --fs-read: max(16px, .5rem); }
}

/* ---------- 1. 字體:日文黑體換成思源黑體 TC;英文用 Inter Tight(原站 Cabinet Grotesk 的 26 個選擇器全部蓋掉) ---------- */
body.tbi { font-family: var(--ff-zh); }
.tbi :is(.About-lead, .About-title, .Business-number, .Business-title, .FillButton-text, .Footer-copyRight,
  .Footer-navListItem, .Footer-navTitle, .Footer-privacyLink, .Header-menuButtonText, .Introduction-title,
  .Kv-scroll, .Menu-navItemLink, .MouseStalker-text, .News-title, .NewsItem-date, .SectionLead,
  .TopLoader-progress, .TouchDeviceLink-text, .Contact-lead, .Contact-linkText, .Header-navItemLink,
  .LanguageButton-langText, .NewsItem-tagText, .Recruit-lead, .Recruit-title) { font-family: var(--ff-en); }

/* ---------- 2. 瀏覽器預設內外距歸零(改善清單 B36)---------- */
.tbi figure, .tbi dl, .tbi dd, .tbi dt, .tbi ol, .tbi ul, .tbi menu { margin: 0; padding: 0; }
.tbi ul, .tbi ol { list-style: none; }
:where(.tbi) button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; } /* :where = 不加權重,元件自己的字級才蓋得過 */
:where(.tbi) input { font: inherit; }
.tbi .tbi-ico { display: block; flex: none; width: max(18px, 1.125rem); height: max(18px, 1.125rem); }

/* ---------- 3. 進場動畫「捲過都重播」:收回時不錯開、一起收 ---------- */
.tbi [data-mask-text]:not(.-show) *,
.tbi [data-mask-text]:not(.-show) { transition-delay: 0s !important; }

/* ==========================================================================
   4. 頁首(第一輪改成カネックス版的排法與尺寸;數字 2026-10-16 量 site-kanex 1280/1440/1920)
   首屏上:白字+白色全名 logo;往下捲(is-sticky):logo 換三色標誌、右側整排墊霧面膠囊、字變黑;
   經過深色段(is-dark):膠囊改深色半透明、字變白(カネックス原站的 -white2 做法)
   對標頁首的「反相混色」「往下捲就收起」都關掉
   ========================================================================== */
:root { --hd-gap: 48px; --hd-t: 250ms cubic-bezier(.215, .61, .355, 1); }      /* 1024–1440:48 */
@media screen and (min-width: 1441px) { :root { --hd-gap: 60px; } }               /* 1441 以上:60 */
@media screen and (min-width: 821px) and (max-width: 1099px) { :root { --hd-gap: 32px; } }
@media screen and (max-width: 820.98px) { :root { --hd-gap: 20px; } }

.tbi .Header.tbi-header {
  display: block; height: auto; padding: var(--hd-gap) var(--hd-gap) 0;
  color: #fff; mix-blend-mode: normal; background-blend-mode: normal;
  transform: none !important; pointer-events: none;
  transition: padding var(--hd-t), color var(--hd-t), background-color var(--hd-t), translate .45s cubic-bezier(.33, 1, .68, 1);
}
/* 10-21 客戶:「首頁選單欄位要固定」→ 本案不做 Headroom(全站預設的例外,客戶要求),頁首一直留在上面 */
.tbi .Header.tbi-header.is-sticky { padding-top: 36px; color: #000; }   /* 捲動後頁首離頂 36px(10-16 Eric:20px 太擠)*/
.tbi .Header.tbi-header.is-sticky.is-dark { color: #fff; }
.tbi-hd { position: relative; display: flex; align-items: flex-start; justify-content: space-between; }

/* logo:全名白色版 ↔ 三色標誌 */
/* logo(第三輪):一律是完整 logo(標誌+文字),標誌四形狀維持 CI 原色;
   壓在深色上(首屏、40 週年、產品、頁尾)用「白字版」,淺色上用原檔「深灰字版」,兩張疊在一起交叉淡換。
   往下捲縮成高 40px(= カネックス小標誌的高度),放在原本小標誌的位置 */
.tbi-hdLogo { position: relative; flex: none; width: 200px; pointer-events: auto; transition: width var(--hd-t), margin-top var(--hd-t); }
.tbi-hdLogo__link { position: relative; display: block; }
.tbi-hdLogo__img { display: block; width: 100%; height: auto; transition: opacity var(--hd-t); }
.tbi-hdLogo__img.-onlight { position: absolute; top: 0; left: 0; opacity: 0; }
.tbi-header.is-sticky:not(.is-dark) .tbi-hdLogo__img.-ondark { opacity: 0; }
.tbi-header.is-sticky:not(.is-dark) .tbi-hdLogo__img.-onlight { opacity: 1; }
.tbi-header.is-sticky .tbi-hdLogo { width: 168px; margin-top: -5px; }   /* 168×40,中線對齊右邊的膠囊 */

/* 右側一整排(選單+ESG+搜尋+會員+語系) */
.tbi-hdBar { position: relative; z-index: 0; display: flex; align-items: center; pointer-events: auto; }
.tbi-hdBar::before {   /* 吸附後的霧面膠囊底:比內容左右各寬 20、上下各高 10 */
  content: ""; position: absolute; top: 50%; left: 50%; z-index: -1;
  width: calc(100% + 40px); height: calc(100% + 20px); transform: translate(-50%, -50%);
  border-radius: 999px; background-color: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  opacity: 0; transition: opacity var(--hd-t), background-color var(--hd-t);
}
.tbi-header.is-sticky .tbi-hdBar::before { opacity: 1; }
.tbi-header.is-sticky.is-dark .tbi-hdBar::before { background-color: rgba(0, 0, 0, .1); }
.tbi-hdNav__list { display: flex; align-items: center; }
.tbi-hdNav__item { position: relative; transition: margin-left var(--hd-t); }
.tbi-hdNav__item + .tbi-hdNav__item { margin-left: 24px; }
.tbi-hdNav__item.is-current::after {  /* 大選單開著的那一項:底下一條短線 */
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background-color: currentColor;
}
.tbi-hdNav__link { display: block; padding: 8px 0; margin: -8px 0; font-size: 16px; font-weight: 400; line-height: 1.45; white-space: nowrap; }

/* 文字滑過:原字往上滑走、同一行字從下面補上(カネックス原站 hover-y-out / hover-y-in,600ms) */
.tbi-roll { position: relative; display: block; overflow: hidden; }
.tbi-roll__a, .tbi-roll__b { display: block; }
.tbi-roll__b { position: absolute; left: 0; bottom: 0; width: 100%; transform: translateY(100%); }
a:hover > .tbi-roll .tbi-roll__a, a:hover .tbi-hdUtil__label .tbi-roll__a { animation: tbi-y-out .6s cubic-bezier(.215, .61, .355, 1) forwards; }
a:hover > .tbi-roll .tbi-roll__b, a:hover .tbi-hdUtil__label .tbi-roll__b { animation: tbi-y-in .6s cubic-bezier(.215, .61, .355, 1) forwards; }
@keyframes tbi-y-out { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes tbi-y-in { from { transform: translateY(100%); } to { transform: translateY(0); } }

.tbi-hdEsg {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 110px; height: 30px; margin-left: 24px; border-radius: 999px;
  background-color: var(--tbi-blue); color: #fff; font-size: 16px; line-height: 1.5; white-space: nowrap;
  transition: margin-left var(--hd-t), width var(--hd-t);
}
.tbi-hdEsg .tbi-roll { text-align: center; }
.tbi-hdUtil { display: flex; align-items: center; flex: none; height: 30px; margin-left: 24px; font-size: 16px; line-height: 1.5; white-space: nowrap; transition: margin-left var(--hd-t); }
.tbi-hdUtil .tbi-ico { width: 20px; height: 20px; }
.tbi-hdUtil--member { margin-left: 16px; }
.tbi-hdUtil--member .tbi-ico { margin-right: 8px; }
.tbi-hdLang { position: relative; display: flex; align-items: center; flex: none; height: 30px; margin-left: 24px; transition: margin-left var(--hd-t); }
.tbi-hdLang__cur { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0; border: 0; background: none; color: inherit; font-family: inherit; font-size: 16px; line-height: 1.5; letter-spacing: .05em; cursor: pointer; }
.tbi-hdLang .tbi-plus { width: 10px; height: 10px; }
.tbi-hdLang.is-open .tbi-plus::after { transform: rotate(0deg); }   /* 打開時「+」收成「−」(同公司介紹展開鈕) */
/* 語系下拉(10-17 Eric:原生選單點開是作業系統的樣子)→ 外觀同大選單面板:白 94% 霧面、圓角 16、黑字、滑過品牌藍;
   目前語系藍字;進出場同大選單(短淡入)。右緣對齊「繁中」右緣(面板內距 16 → right -16px) */
.tbi-hdLang__list {
  position: absolute; top: calc(100% + 16px); right: -16px; z-index: 5; min-width: 128px; margin: 0; padding: 8px 0; list-style: none;
  border-radius: 16px; background-color: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); color: #000;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, visibility .2s;   /* 同大選單:10-21 拿掉落下動畫 */
}
.tbi-hdLang.is-open .tbi-hdLang__list { visibility: visible; opacity: 1; pointer-events: auto; }
.tbi-hdLang__opt { display: block; padding: 8px 16px; font-size: 16px; line-height: 1.5; letter-spacing: .05em; white-space: nowrap; transition: color .3s; }
.tbi-hdLang__opt:hover, .tbi-hdLang__opt[aria-current] { color: var(--tbi-blue); }
.tbi-hdLang__opt[aria-current] { font-weight: 500; }
.tbi-header .Header-menuButton { pointer-events: auto; }
.tbi-header .Header-menuButtonIcon, .tbi-header .Header-menuButtonIcon::before { border-color: currentColor; }
.tbi-header .Header-menuButtonText { color: currentColor; }

@media screen and (min-width: 1441px) {
  .tbi-hdLogo { width: 240px; }
  .tbi-hdNav__item + .tbi-hdNav__item { margin-left: 40px; }
  .tbi-hdEsg { width: 141px; margin-left: 40px; }
  .tbi-hdUtil, .tbi-hdLang { margin-left: 40px; }
  .tbi-hdUtil--member { margin-left: 24px; }
  .tbi-header.is-sticky .tbi-hdNav__item + .tbi-hdNav__item { margin-left: 32px; }
  .tbi-header.is-sticky .tbi-hdEsg { width: 130px; margin-left: 32px; }
  .tbi-header.is-sticky .tbi-hdUtil, .tbi-header.is-sticky .tbi-hdLang { margin-left: 32px; }
  .tbi-header.is-sticky .tbi-hdUtil--member { margin-left: 24px; }
}
/* 較窄的桌機:照カネックス先收「會員登入」字、再收間距。
   1099 以下:頁首放不下搜尋、會員登入、語系 → 收進漢堡選單(第三輪,Eric:放進漢堡選單);1023 以下主選單也收進去 */
@media screen and (min-width: 821px) and (max-width: 1280px) {
  .tbi-hdLogo, .tbi-header.is-sticky .tbi-hdLogo { width: 160px; }
  .tbi-hdUtil__label { display: none; }
  .tbi-hdUtil--member .tbi-ico { margin-right: 0; }
}
@media screen and (min-width: 821px) and (max-width: 1199px) {
  .tbi-hdNav__item + .tbi-hdNav__item, .tbi-hdEsg, .tbi-hdUtil, .tbi-hdUtil--member, .tbi-hdLang { margin-left: 16px; }
}
@media screen and (min-width: 821px) and (max-width: 1099px) {
  .tbi-hdLogo, .tbi-header.is-sticky .tbi-hdLogo { width: 140px; }
  .tbi-header.is-sticky .tbi-hdLogo { margin-top: -2px; }
  .tbi-hdUtil--search, .tbi-hdUtil--member, .tbi-hdLang { display: none; }
  .tbi-hd { justify-content: flex-start; }
  .tbi-hdBar { margin-left: auto; }   /* 頁首右側(選單/ESG)跟漢堡鈕靠在一起,不要被平均分散到中間 */
  /* 漢堡鈕:原站只在手機出現,這段寬度也叫出來;尺寸改成固定 px(原站是照手機寬度算的,桌機會變很小) */
  .tbi-header .Header-menuButton._sp { display: flex !important; align-items: center; gap: 8px; height: 30px; margin-left: 16px; padding: 0 4px; }
  .tbi-header .Header-menuButtonIcon { width: 16px; height: 16px; }
  .tbi-header .Header-menuButtonIcon::before { width: 10px; height: 10px; }
  .tbi-header .Header-menuButtonTextWrapper { height: 16px; margin-top: 0; }
  .tbi-header .Header-menuButtonText { font-size: 16px; line-height: 1; }
  .tbi .Menu._sp { display: block !important; }
}
@media screen and (min-width: 821px) and (max-width: 1023px) {
  .tbi-hdNav { display: none; }
}
@media screen and (max-width: 820.98px) {
  .tbi .Header.tbi-header { padding: 12px var(--hd-gap); }
  .tbi .Header.tbi-header.is-sticky { padding-top: 12px; background-color: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
  .tbi .Header.tbi-header.is-sticky.is-dark { background-color: rgba(26, 28, 34, .6); }
  .tbi-hd { align-items: center; }
  .tbi-hdLogo, .tbi-header.is-sticky .tbi-hdLogo { width: 140px; margin-top: 0; }
}

/* 大選單(カネックス版:頁首下 24px、白霧面圓角面板、左標題 455/1540、右三欄) */
.tbi-mega {
  position: absolute; top: calc(100% + 24px); left: 0; right: 0; color: #000; pointer-events: none;
  visibility: hidden; opacity: 0;
  transition: opacity .2s ease, visibility .2s;   /* 10-21 客戶:下拉選單不要閃跳 → 拿掉往下落 8px,只留很短的淡入 */
}
.tbi-header.is-mega-open .tbi-mega { visibility: visible; opacity: 1; pointer-events: auto; }
.tbi-mega__panel {
  display: none; grid-template-columns: calc(455 / 1540 * 100%) minmax(0, 1fr); column-gap: var(--hd-gap);
  padding: 48px; border-radius: 16px; background-color: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.tbi-mega__panel.is-active { display: grid; }
.tbi-mega__en { font-family: var(--ff-en); font-size: 40px; font-weight: 400; line-height: 1; }
.tbi-mega__zh { margin-top: 16px; font-size: 16px; font-weight: 500; line-height: 1.5; }
.tbi-mega__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--hd-gap); align-content: start; align-items: start; }
.tbi-mega__link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--tbi-line); font-size: 16px; line-height: 1.5;
  transition: color .3s cubic-bezier(.215, .61, .355, 1);
}
.tbi-mega__link .tbi-ico { width: 18px; height: 18px; transition: transform .6s var(--tbi-ease); }
.tbi-mega__link:hover { color: var(--tbi-blue); }
.tbi-mega__link:hover .tbi-ico { transform: translateX(4px); }
.tbi-mega__group { grid-row: span 3; }
.tbi-mega__group > .tbi-mega__link { font-weight: 500; }
.tbi-mega__group ul { padding: 8px 0 !important; }
.tbi-mega__sub { display: block; padding: 8px 0 8px 16px; color: var(--tbi-sub); font-size: 16px; line-height: 1.5; transition: color .3s; }
.tbi-mega__sub::before { content: "— "; }
.tbi-mega__sub:hover { color: var(--tbi-blue); }
.tbi-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; }
.tbi-search__input { width: 100%; height: 64px; border: 0; border-bottom: 1px solid var(--tbi-line-press); outline: 0; background: none; font-size: 24px; line-height: 1.5; }
.tbi-search__btn { display: flex; align-items: center; justify-content: center; width: 100px; height: 40px; border-radius: 999px; background-color: var(--tbi-blue); color: #fff; }
.tbi-search__btn .tbi-ico { width: 20px; height: 20px; }

/* 側邊浮動:圖面下載/聯絡我們 —— 平常只有圖示小圓鈕,滑過時說明文字從按鈕往左滑出來 */
.tbi-side { position: fixed; z-index: 1100; display: flex; transition: opacity .3s cubic-bezier(.215, .61, .355, 1), visibility .3s, transform .3s; }
.tbi-side.-hide { opacity: 0; visibility: hidden; }
.tbi-side__btn { position: relative; display: flex; align-items: center; justify-content: flex-end; font-size: 16px; line-height: 1; }
.tbi-side__icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: none; border-radius: 999px; }
.tbi-side__icon .tbi-ico { width: 20px; height: 20px; }
.tbi-side__btn.-light .tbi-side__icon, .tbi-side__btn.-light .tbi-side__label { background-color: #fff; color: var(--tbi-blue); border: 1px solid var(--tbi-blue); }
.tbi-side__btn.-main .tbi-side__icon, .tbi-side__btn.-main .tbi-side__label { background-color: var(--tbi-blue); color: #fff; border: 1px solid var(--tbi-blue); }
.tbi-side__label { white-space: nowrap; letter-spacing: .05em; }

@media screen and (min-width: 821px) {
  .tbi-side { right: 24px; bottom: 24px; flex-direction: column; gap: 8px; }   /* 第三輪:移到右下角(到頁尾時由原站頁尾程式加 -hide 收起) */
  .tbi-side__icon { width: 48px; height: 48px; }
  .tbi-side__label {
    position: absolute; top: 0; right: 0; display: flex; align-items: center;
    height: 48px; padding: 0 64px 0 20px; border-radius: 999px;
    clip-path: inset(0 0 0 calc(100% - 48px) round 999px);   /* 收起時只剩跟圓鈕一樣大的一塊(藏在圓鈕底下) */
    transition: clip-path .5s cubic-bezier(.215, .61, .355, 1);
  }
  .tbi-side__btn:hover .tbi-side__label, .tbi-side__btn:focus-visible .tbi-side__label { clip-path: inset(0 0 0 0 round 999px); }
}
@media screen and (max-width: 820.98px) {
  .tbi-side { left: 0; right: 0; bottom: 0; }
  .tbi-side.-hide { transform: translateY(100%); }
  .tbi-side__btn { flex: 1; flex-direction: row-reverse; justify-content: center; gap: 6px; height: 48px; }
  .tbi-side__btn.-light { background-color: #fff; color: var(--tbi-blue); border-top: 1px solid var(--tbi-blue); }
  .tbi-side__btn.-main { background-color: var(--tbi-blue); color: #fff; }
  .tbi-side__btn .tbi-side__icon, .tbi-side__btn .tbi-side__label { border: 0; background: none; color: inherit; }
  .tbi-menu .Menu-navItemLink { font-family: var(--ff-zh); font-size: max(16px, .625rem); font-weight: 500; }
  .tbi-menu__tools { display: flex; flex-direction: column; gap: .375rem; margin-top: .75rem; font-size: var(--fs-read); }
  .tbi-menu__tools a { display: flex; align-items: center; gap: .25rem; }
}
/* 漢堡選單在 821–1099 的樣子:原站選單是照手機寬度算的,這裡改成固定 px 的深色面板,靠右掛在頁首下方 */
@media screen and (min-width: 821px) and (max-width: 1099px) {
  .tbi-menu .Menu-content { top: 88px; left: auto; right: var(--hd-gap); width: 360px; height: auto; margin: 0; padding: 40px 32px; border-radius: 16px; background-color: var(--tbi-dark); }
  .tbi-menu .Menu-textWrapper { gap: 32px; }
  .tbi-menu .Menu-navList { align-items: flex-start; gap: 12px; }
  .tbi-menu .Menu-navItemLink { font-family: var(--ff-zh); font-size: 18px; font-weight: 500; padding: 4px 0; }
  .tbi-menu__tools { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--tbi-line-d); font-size: 16px; }
  .tbi-menu__tools a { display: flex; align-items: center; gap: 8px; }
  .tbi-menu__tools .tbi-ico { width: 18px; height: 18px; }
}

/* ==========================================================================
   5. 首屏 Banner(カネックス版):實景交叉淡入+慢推近+暗化層;左下客戶標準字+標語
   10-21 客戶:「首圖一直捲會縮小」「Banner 捲到下一段太多步驟」→ 拿掉釘住、字淡出、縮到 0.8,首屏就是一屏高,照常捲走
   ========================================================================== */
.tbi-kv { position: relative; z-index: 1; height: 100vh; background-color: var(--tbi-dark); color: #fff; }   /* 舊版:400vh + 1150px 釘住縮小(備份 tbi.css-bak-r55) */
.tbi-kv__body { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.tbi-kv__pv { position: absolute; inset: 0; background-color: #000; will-change: transform; }
.tbi-kv__slides { position: absolute; inset: 0; overflow: hidden; }
.tbi-kv__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s cubic-bezier(.215, .61, .355, 1); }
.tbi-kv__img.is-active, .tbi-kv__img.is-leaving { animation: tbi-kenburns 9s linear forwards; }
.tbi-kv__img.is-active { opacity: 1; }
@keyframes tbi-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.tbi-kv__pv::after {   /* 實景是日光照,加暗化層讓白字讀得到(同カネックス版)
     10-17:原本掛在 .tbi-kv__slides 裡、跟圖片一起被裁在同一條邊上;首屏縮小時最外圈那排像素遮罩蓋不滿 → 底部一條細亮線一直閃。
     改掛在外層、往外多罩 2px(外層不裁切),圖片的邊整個被蓋住 */
  content: ""; position: absolute; inset: -2px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 12, 20, .35) 0%, rgba(8, 12, 20, .15) 30%, rgba(8, 12, 20, .3) 58%, rgba(8, 12, 20, .62) 100%);   /* 10-21 客戶「背景色太深」→ 調淡(原 .5/.3/.55/.8);上緣留給頁首白字、下緣留給標語 */
}
.tbi-kv__contents { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--hd-gap); }
/* 分頁標記(照曼克的細線;10-17 Eric:放左下角、目前那張跑成進度條)
   位置:左緣對齊大字(--hd-gap);線的高度對齊右下角圓鈕的中心(24 + 48/2 = 48px)→ 按鈕盒 20px、bottom 38px。
   大字往上讓出位置:內容區底部留白 = 38 + 20 + 40(線到英文標語的距離)。
   進度條長度 = 輪播間隔,由 tbi.js 寫進 --kv-dur */
.tbi-kv__contents { padding-bottom: 98px; }
.tbi-kv__dots { position: absolute; left: var(--hd-gap); bottom: 38px; display: flex; gap: 8px; opacity: 0; transition: opacity .8s .6s; }
.tbi-kv__contents.-show .tbi-kv__dots { opacity: 1; }
.tbi-kv__dots button { position: relative; width: 34px; height: 20px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.tbi-kv__dots button::before, .tbi-kv__dots button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }   /* 10-17 Eric:1px 不明顯 → 3px → 定 2px */
.tbi-kv__dots button::before { opacity: .4; transition: opacity .3s; }
.tbi-kv__dots button:hover::before { opacity: .7; }
.tbi-kv__dots button::after { transform: scaleX(0); transform-origin: left center; }
.tbi-kv__dots button.on::after { animation: tbi-kv-progress var(--kv-dur, 6s) linear forwards; }
@keyframes tbi-kv-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media screen and (max-width: 820.98px) {   /* 手機底部有整排浮動按鈕(高 48),線放在它上方 16px */
  .tbi-kv__contents { padding-bottom: 124px; }
  .tbi-kv__dots { bottom: 64px; }
}
/* 大字標 = 客戶標準字 SVG(10-17 Eric:從 Inter Tight 細體換成標準字)。寬度沿用原本字墨寬:內容寬 × 880/1540、上限 880px(同カネックス);
   viewBox 貼齊字墨,左緣直接對齊內容邊。進場 = 字母依序從下方滑上來(同頁尾大字),跟著標語一起捲過重播(.-show 由 tbi.js 1b 控制) */
.tbi-kv__word { --kvw: min(880px, (100vw - var(--hd-gap) * 2) * 880 / 1540); width: var(--kvw); overflow: hidden;
  margin-bottom: calc(var(--kvw) * .0437); }   /* 補回打字版字底下的行距(字墨底→標語維持原距離:舊字級 = 寬 ÷ 5.408,基線下 .2365em) */
.tbi-kv__word svg { display: block; width: 100%; height: auto; fill: currentColor; overflow: visible; }
.tbi-kvl { transform-box: fill-box; transform: translateY(115%); transition: transform .6s var(--rv-ease); }
.tbi-kv__contents.-show .tbi-kvl { transform: none; transition: transform 1.1s cubic-bezier(.2, .85, .3, 1) calc(var(--i) * .05s); }
@media (prefers-reduced-motion: reduce) { .tbi-kvl { transform: none; transition: none; } }
.tbi-kv__ja { font-family: var(--ff-zh); font-size: 60px; font-weight: 500; line-height: 1.45; margin-top: 20px; }
.tbi-kv__en { font-family: var(--ff-en); font-size: 20px; font-weight: 400; line-height: 1.4; margin-top: 20px; }
.tbi-kv__ja .MaskText-line { transition-delay: .15s; }
.tbi-kv__ja .MaskText-lineWrapper + .MaskText-lineWrapper .MaskText-line { transition-delay: .25s; }
.tbi-kv__en .MaskText-line { transition-delay: .4s; }
@media screen and (max-width: 1023px) {
  .tbi-kv__word { --kvw: 243px; }
  .tbi-kv__ja { font-size: 24px; margin-top: 10px; }
  .tbi-kv__en { font-size: 16px; margin-top: 10px; }
}

/* 原站大字小字都跟視窗寬縮放,窄螢幕會小於 16px:導言類文字保底 16px */
@media screen and (min-width: 821px) {
  .tbi .Introduction-lead, .tbi .About-leadJa { font-size: max(16px, 1.25rem); }
}
@media screen and (max-width: 820.98px) {
  .tbi .Introduction-lead, .tbi .About-leadJa, .tbi .About-description { font-size: max(16px, .5rem); }
}

/* ==========================================================================
   4b. 點綴色:原本用黑色當強調的地方一律改 logo 藍(Eric 第一輪)
   ========================================================================== */
/* 對標黑膠囊按鈕(查看全部、集團沿革)→ 藍底;滑過變白底藍字藍框 */
.tbi .FillButton-link { background-color: var(--tbi-blue); }
.tbi .FillButton-link::before, .tbi .FillButton-line { border-color: var(--tbi-blue); }
[data-whatintent=mouse] .tbi .FillButton-link:hover .FillButton-text { color: var(--tbi-blue); }
[data-whatintent=mouse] .tbi .FillButton-link:hover::before, [data-whatintent=mouse] .tbi .FillButton-link:hover .FillButton-line { border-color: var(--tbi-blue); }
/* 淺底上的小標籤與編號 */
.tbi .tbi-news .News-title, .tbi .tbi-esg__title, .tbi .tbi-co__no, .tbi .tbi-products .Business-number, .tbi .tbi-productName__en { color: var(--tbi-blue); }
/* 新聞列:滑過的圓點與標題 */
.tbi .tbi-news .NewsItem-circle { background-color: var(--tbi-blue); }
.tbi .tbi-news .NewsItem:hover .NewsItem-title { color: var(--tbi-blue); }
.tbi .tbi-news .NewsItem-title { transition: color .6s var(--tbi-ease-out); }

/* ==========================================================================
   4c. 滑鼠游標:10-21 客戶「游標不要動畫(三個圈)」→ 原站游標跟隨圈整個關掉,回系統游標
   (元素留著:原站其他程式會找它,拔掉可能報錯;三色橢圓外觀備份在 tbi.css-bak-r55)
   ========================================================================== */
.tbi .MouseStalker { display: none !important; }

/* ==========================================================================
   6. 公司介紹(對標 Introduction 段):兩間公司、各一顆按鈕展開說明
   ========================================================================== */
.tbi .Introduction-lead { letter-spacing: .05em; }
.tbi .Introduction-title { color: var(--tbi-blue); }   /* TBI MOTION GROUP 大字 = CI 藍(10-16 Eric 試看) */
.tbi-co__no { font-family: var(--ff-en); font-weight: 700; }
.tbi-co__name { font-weight: 500; line-height: 1.4; }
.tbi-co__sub { color: var(--tbi-sub); font-size: var(--fs-read); line-height: 1.75; }
.tbi-co__toggle {
  display: inline-flex; align-items: center;
  border: 1px solid var(--tbi-line-press); border-radius: 999px;
  font-size: var(--fs-read); font-weight: 500; line-height: 1;
  transition: background-color .6s var(--tbi-ease-out), color .6s var(--tbi-ease-out);
}
.tbi-co__toggle { background-color: var(--tbi-blue); color: #fff; }   /* 預設藍底白字、滑過反白(10-16 Eric 對調) */
.tbi-co__toggle:hover { background-color: transparent; color: var(--tbi-blue); }
.tbi-plus { position: relative; display: block; flex: none; }
.tbi-plus::before, .tbi-plus::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; margin-top: -.5px; background-color: currentColor; transition: transform .6s var(--tbi-ease); }
.tbi-plus::after { transform: rotate(90deg); }
.tbi-co.is-open .tbi-plus::after { transform: rotate(0deg); }
.tbi-co__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--tbi-ease); }
.tbi-co.is-open .tbi-co__panel { grid-template-rows: 1fr; }
.tbi-co__panelInner { min-height: 0; overflow: hidden; }
.tbi-co__body { font-size: var(--fs-read); line-height: 2; letter-spacing: .05em; opacity: 0; transition: opacity .6s var(--tbi-ease-out); }
.tbi-co.is-open .tbi-co__body { opacity: 1; transition-delay: .2s; }

/* 10-21 Eric 改版:②③照片拿掉;上排「標題|大樓照」、下排兩間公司左右兩欄,不要排得太規則 ——
   大樓照上緣錯一階,對齊標題第二行 MOTION 的字頂,往下跨進公司那一排的右側(排版憲法 層次律);這張不做視差(會把對齊飄掉)。
   三欄:公司一 | 公司二 | 照片 24.625rem;左右對齊 ESG/頁尾那條線 5.875rem。舊版(右欄上下排+三張絕對定位照片)備份 tbi.css-bak-r56 */
@media screen and (min-width: 821px) {
  .tbi .tbi-company { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24.625rem; column-gap: 4rem; padding: 11.25rem 5.875rem 9rem; }
  .tbi-coHead { grid-column: 1 / 3; grid-row: 1; }
  .tbi .tbi-coHead .Introduction-title, .tbi .tbi-coHead .Introduction-lead { margin-left: 0; }
  .tbi .tbi-company .tbi-coPhoto { position: relative; inset: auto; grid-column: 3; grid-row: 1 / span 2; align-self: start; width: 100%; margin-top: 6.48rem; }   /* 6.15 = 第二行行框頂;+0.33 = 行框頂到 M 字墨頂(10-21 用畫布量字墨)→ 照片上緣齊 MOTION 的字頂 */
  .tbi-cos { grid-column: 1 / 3; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4rem; align-items: start; margin-top: 5rem; }
  .tbi-co { padding-top: 2rem; border-top: 1px solid var(--tbi-line); }
  .tbi-co__no { font-size: 1rem; }
  .tbi-co__name { margin-top: .75rem; font-size: 1.75rem; }
  .tbi-co__sub { margin-top: .25rem; }
  .tbi-co__toggle { gap: .75rem; height: 2.5rem; margin-top: 1.5rem; padding-inline: 1.5rem 1.25rem; }
  .tbi-plus { width: max(12px, .75rem); height: max(12px, .75rem); }
  .tbi-co__body { padding-top: 1.5rem; }
}
@media screen and (max-width: 820.98px) {
  .tbi .tbi-company .tbi-coPhoto { position: relative; inset: auto; width: 70%; margin: 1.5rem 0 0 auto; }   /* 手機:照片靠右、不滿版(同樣不排死) */
  .tbi-cos { margin-top: 1.5rem; }
  .tbi-co + .tbi-co { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--tbi-line); }
  .tbi-co__no { font-size: max(16px, .5rem); }
  .tbi-co__name { margin-top: .25rem; font-size: .75rem; }
  .tbi-co__toggle { gap: .375rem; height: max(44px, 1.375rem); margin-top: .5rem; padding-inline: .625rem .5rem; }
  .tbi-plus { width: 12px; height: 12px; }
  .tbi-co__body { padding-top: .5rem; }
}

/* ==========================================================================
   7. 40 週年(10-21 客戶回饋後重做;Eric 嫌只有小字+緞帶太空 → 選 A+E)
   A:照客戶 40 週年主視覺排法 —— 左上小標+中文標題、右上 40th 標誌、中間緞帶、黑色粗大字 FUSION(左)/POWERS EVOLUTION(右下);
      緞帶疊兩層跟字前後穿插:後層(z 0)在字後面,字 z 1,前層(z 2)只露上半段 → 緞帶壓在 FUSION 前面、躲在 EVOLUTION 後面。
   E:下排四個數字(原 ESG 段數字牆搬來),數字用客戶的幾何數字元素(SVG),不跑數字。
   不釘住、淺藍灰底;緞帶進畫面 30% 長出一次(tbi.js 3b)。左右對齊 ESG/頁尾那條線 5.875rem。舊版備份 tbi.css-bak-r57
   ========================================================================== */
.tbi-40 { position: relative; background-color: #e8eef4; color: var(--tbi-dark); }
.tbi .tbi-40 .News-title { color: var(--tbi-blue); }
.tbi-40__stage { position: relative; z-index: 0; }   /* 自成一層:緞帶兩層與大字在這層裡排前後 */
.tbi-40__sub { font-weight: 500; line-height: 1.4; letter-spacing: .05em; }
.tbi-40__icon { display: block; }
.tbi-40__icon svg { display: block; width: 100%; height: auto; overflow: visible; }
/* 40th 標誌進場(10-21 Eric):紅圓外圍的藍色弧帶+th Anniversary 字,繞紅圓圓心轉一圈歸位(圓心寫在 SVG 的 transform-origin,單位 = SVG 座標) */
.tbi-40i__rot { transform-box: view-box; transform: rotate(-360deg); opacity: 0; }
.tbi-40__icon.is-in .tbi-40i__rot { transform: none; opacity: 1; transition: transform 2s cubic-bezier(.6, 0, .2, 1) .2s, opacity .5s linear .2s; }
@media (prefers-reduced-motion: reduce) { .tbi-40i__rot { transform: none; opacity: 1; } }
.tbi-40__w { position: relative; z-index: 1; margin: 0; font-family: var(--ff-en); font-weight: 700; line-height: .92; letter-spacing: -.02em; color: var(--tbi-dark); white-space: nowrap; }
.tbi-40__w > span { display: block; }
.tbi-40__rb svg { display: block; width: auto; overflow: visible; }
/* 緞帶待機動畫(10-21 Eric:一直浮動;配方同鍶藝首頁主視覺「手遊角色待機」):上下浮動+呼吸+微擺,三種週期互不整除 → 不會規律重複。
   用 transform / scale / rotate 三個不同屬性疊;視差另外寫在 translate 屬性(tbi.js 7b),四者不打架。
   動的是兩層 SVG 本身、外框不動 → 前後穿插的分界留在原位。離開畫面暫停(.tbi-40 沒有 .is-live) */
.tbi-40__rb svg { transform-origin: 50% 62%; animation: tbi-rb-bob 6.4s ease-in-out infinite alternate, tbi-rb-breath 3.97s ease-in-out infinite alternate, tbi-rb-sway 10.9s ease-in-out infinite alternate; }
.tbi-40:not(.is-live) .tbi-40__rb svg { animation-play-state: paused; }
@keyframes tbi-rb-bob { from { transform: translateY(-.38rem); } to { transform: translateY(.38rem); } }
@keyframes tbi-rb-breath { from { scale: 1; } to { scale: 1.012; } }
@keyframes tbi-rb-sway { from { rotate: -.8deg; } to { rotate: .8deg; } }
@media (prefers-reduced-motion: reduce) { .tbi-40__rb svg { animation: none; } }
.tbi-40__rb.-back { position: relative; z-index: 0; }
.tbi-40__rb.-front { position: absolute; inset: 0; z-index: 2; clip-path: inset(-20rem -20rem 40% -20rem); }   /* 上左右放寬:緞帶視差/輕飄超出框時不被切,只有下緣這條分界有作用 */   /* 前層只露上 60%:緞帶上段壓在 FUSION 前面,下段被 EVOLUTION 蓋過 */
.tbi-40__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tbi-40num { border-top: 1px solid var(--tbi-line); }
.tbi-40num__n { display: flex; align-items: flex-end; margin: 0; }
.tbi-dg { display: block; width: auto; flex: none; }
/* 數字進場「爆炸圖組裝」(10-21 Eric:「轉進來」不明顯也不好看 → 換):每塊色塊先從數字中心往外推開(位移 --tx/--ty 由 tbi.js 3c 依各塊位置算)、透明,
   再一起收回拼成數字(像零件爆炸圖組裝)。數字那排進畫面才播,且等緞帶長完;離開畫面收回、回來重播。舊的轉進來備份 tbi.css-bak-r59 */
.tbi-dg { overflow: visible; }
.tbi-dg > * { transform: translate(var(--tx, 0), var(--ty, 0)); opacity: 0; transition: transform .2s, opacity .2s; }
.tbi-40__nums.is-on .tbi-dg > * { transform: none; opacity: 1; transition: transform 1s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), opacity .3s linear var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .tbi-dg > * { transform: none; opacity: 1; transition: none; } }
.tbi-40num__u { font-family: var(--ff-zh); font-weight: 500; line-height: 1; }
.tbi-40num__t { color: var(--tbi-sub); line-height: 1.6; letter-spacing: .05em; }
@media screen and (min-width: 821px) {
  .tbi-40 { padding: 7.5rem 5.875rem; }
  .tbi-40__stage { height: 38rem; }
  .tbi-40__head { position: absolute; top: 0; left: 0; z-index: 3; }
  .tbi-40__sub { margin-top: .75rem; font-size: 1.75rem; }
  .tbi-40__icon { position: absolute; top: 0; right: 0; z-index: 3; width: 10rem; }
  .tbi-40__ribbon { position: absolute; top: 0; left: calc(42% - 11.85rem); }   /* 緞帶 38rem 高 ≈ 29.7rem 寬,中心放在 42%(同客戶主視覺偏左);10-21 Eric:往右 3rem,讓 FUSION 的 N 多露出來 */
  .tbi-40__rb svg { height: 38rem; }
  .tbi-40__rb.-front { clip-path: inset(-20rem -20rem 8.7rem -20rem); }   /* 10-21 Eric:P 壓在緞帶下 → 前層露到 29.3rem(POWERS 字底 28.5 與 EVOLUTION 字頂 30.1 之間):緞帶蓋過 FUSION 和 POWERS、躲在 EVOLUTION 後面 */
  .tbi-40__w { position: absolute; font-size: 8.5rem; }
  .tbi-40__w.-fusion { left: 0; top: 12rem; }
  .tbi-40__w.-pe { right: 0; top: 21.5rem; text-align: right; }
  .tbi-40__nums { column-gap: 4rem; margin-top: 5rem; }
  .tbi-40num { padding-top: 1.75rem; }
  .tbi-dg { height: 4.5rem; }
  .tbi-dg + .tbi-dg { margin-left: .25rem; }
  .tbi-40num__u { margin-left: .5rem; font-size: 1.25rem; }
  .tbi-40num__t { margin-top: 1rem; font-size: var(--fs-read); }
}
@media screen and (max-width: 820.98px) {
  .tbi-40 { padding: 2.5rem var(--hd-gap); }
  .tbi-40__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .75rem; }
  .tbi-40__head { grid-column: 1; grid-row: 1; }
  .tbi-40__sub { margin-top: .25rem; font-size: .75rem; }
  .tbi-40__icon { grid-column: 2; grid-row: 1; width: 2.75rem; }
  .tbi-40__ribbon { grid-column: 1 / 3; grid-row: 2 / 5; justify-self: center; position: relative; }
  .tbi-40__rb svg { height: min(40vh, 90vw); }
  .tbi-40__w { grid-column: 1 / 3; font-size: 1.9rem; }   /* EVOLUTION 字寬 5.39em,手機內容寬 10.5rem 放得下 */
  .tbi-40__w.-fusion { grid-row: 2; align-self: center; }
  .tbi-40__w.-pe { grid-row: 4; align-self: end; text-align: right; }
  .tbi-40__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .75rem; margin-top: 1.5rem; }
  .tbi-40num { padding-top: .5rem; }
  .tbi-dg { height: 1.5rem; }
  .tbi-dg + .tbi-dg { margin-left: .1rem; }
  .tbi-40num__u { margin-left: .2rem; font-size: .5rem; }
  .tbi-40num__t { margin-top: .25rem; font-size: max(13px, .4rem); }
}

/* ==========================================================================
   8. 產品(10-17 Eric:換成 カネックス版 8793 的版型,外觀套本版設計系統)
   淺藍灰底(10-21 客戶「背景色太深」,原深底);小標 (PRODUCTS)+中文標題+細線;分類連結+全部產品;
   捲到這裡「分類列+白色卡片」釘住、卡片橫向滑過(tbi.js 第 3 段:往下捲 1px = 卡片往左 1px),標題照常捲走。
   卡片圖進場 = 進場動畫池 01 照片版(共用 .tbi-fadeimg / .tbi-rv)。手機版不釘住,卡片直排。
   ========================================================================== */
.tbi-prod { position: relative; background-color: #e8eef4; color: var(--tbi-dark); }
/* 標題照本版系統:小標 (PRODUCTS) 用原站 News-title(同 (NEWS)),淺底上品牌藍 */
.tbi .tbi-prod .News-title { color: var(--tbi-blue); }
.tbi-prod__sub { font-weight: 500; line-height: 1.4; letter-spacing: .05em; }   /* 中文標題,尺寸同公司介紹的公司名 */
.tbi-prod__cats { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
/* 分類 = 膠囊按鈕(10-17 Eric:純文字不像按鈕)→ 同新聞分類標籤 .tbi-tab:可按的框線色、藍字,滑過藍底白字(10-21 改淺底版) */
.tbi-prod__cat {
  display: inline-flex; align-items: center;
  border: 1px solid var(--tbi-line-press); border-radius: 999px; color: var(--tbi-blue);
  font-weight: 500; line-height: 1; letter-spacing: .05em; white-space: nowrap;
  transition: background-color .6s var(--tbi-ease-out), color .6s var(--tbi-ease-out), border-color .6s var(--tbi-ease-out);
}
.tbi-prod__cat:hover { background-color: var(--tbi-blue); border-color: var(--tbi-blue); color: #fff; }
/* 產品資訊下方細線(10-17 Eric):左右對齊內容區(右端 = 全部產品按鈕右緣),進場從左往右畫出來,捲過重播(跟標題同一個 -show) */
.tbi-prod__line { display: block; height: 1px; background-color: var(--tbi-line); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--rv-ease); }
.tbi-prod__head.-show .tbi-prod__line { transform: none; transition: transform 1.2s var(--rv-ease) .2s; }
/* 全部產品:淺底後直接用全站藍色按鈕(第 4b 段);深底專用的白框覆寫 10-21 拿掉 */
.tbi-prod__scroll { position: relative; }
.tbi-prod__track { display: flex; padding-inline: var(--hd-gap); will-change: transform; }
.tbi-pcard { position: relative; flex: none; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--tbi-line); border-radius: 8px; background-color: #fff; color: var(--tbi-dark); }   /* 10-21 淺底:加靜態淡框線 */
.tbi-pcard__link { position: absolute; inset: 0; z-index: 2; }
.tbi-pcard__img { position: relative; flex: 1 1 auto; min-height: 0; }
.tbi-pcard__img .tbi-rv img { object-fit: contain; }   /* 白底產品照:完整呈現不裁切 */
.tbi-pcard__body { display: flex; align-items: flex-end; justify-content: space-between; }
.tbi-pcard__no { font-family: var(--ff-en); font-weight: 700; color: var(--tbi-blue); }
.tbi-pcard__en { font-family: var(--ff-en); font-weight: 300; line-height: 1.1; letter-spacing: -.01em; }
.tbi-pcard__zh { font-weight: 500; letter-spacing: .05em; }
.tbi-pcard__desc { color: var(--tbi-sub); font-size: var(--fs-read); line-height: 1.75; letter-spacing: .05em; }
.tbi-pcard__arrow {
  flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--tbi-blue); border-radius: 999px; color: var(--tbi-blue);
  transition: background-color .6s var(--tbi-ease-out), color .6s var(--tbi-ease-out);
}
.tbi-pcard:hover .tbi-pcard__arrow { background-color: var(--tbi-blue); color: #fff; }
@media screen and (min-width: 821px) {
  .tbi-prod__head { padding: 9rem 5.875rem 0; }   /* 10-21 客戶「圖面介紹區再縮窄」→ 左右對齊 ESG/頁尾那條線(原 --hd-gap) */
  .tbi-prod__sub { margin-top: .75rem; font-size: 1.75rem; }
  .tbi-prod__line { margin-top: 1.5rem; }
  .tbi-prod__nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
  .tbi-prod__cats { gap: .5rem; font-size: var(--fs-read); }
  .tbi-prod__cat { height: 2.1875rem; padding-inline: 1.25rem; }   /* 高度 = 右邊「全部產品」按鈕(原站 FillButton 約 2.19rem),同一排要完全一樣高 */
  /* 10-17 Eric 選 B 版:標題(PRODUCTS/產品資訊/細線)照常捲走,只釘「分類列+卡片」(A 版左圖右文備份在 tbi.css-bak-r45)
     釘住層 top 2.5rem:釘住時分類列離頂 2.5 + 2 = 4.5rem,上方露出的是本段深底 */
  .tbi-prod__pin { position: sticky; top: 2.5rem; display: flex; flex-direction: column; height: calc(100vh - 2.5rem); overflow: hidden; }
  .tbi-prod__navbar { flex: none; padding: 2rem 5.875rem 2.5rem; }
  .tbi-prod__track { flex: 1 1 auto; min-height: 0; align-items: flex-start; gap: var(--hd-gap); padding-inline: 5.875rem; padding-bottom: var(--hd-gap); }
  /* 卡片直式(上圖下文)48×42rem,整張用 zoom 等比縮小塞進「畫面扣掉分類列」的高度(tbi.js 第 3 段算 --card-z,最大 1) */
  .tbi-pcard { width: 48rem; height: 42rem; zoom: var(--card-z, 1); }
  .tbi-pcard__img { margin: 2rem 2rem 0; }
  .tbi-pcard__body { gap: 2rem; padding: 1.5rem 2rem 2rem; }
  .tbi-pcard__no { font-size: 1rem; }
  .tbi-pcard__en { margin-top: .5rem; font-size: 3.5rem; }
  .tbi-pcard__zh { margin-top: .5rem; font-size: 1.375rem; }
  .tbi-pcard__desc { margin-top: .75rem; max-width: 30em; }
  .tbi-pcard__arrow { width: 3rem; height: 3rem; }
  .tbi-pcard__arrow .tbi-ico { width: 1.25rem; height: 1.25rem; }
}
@media screen and (max-width: 820.98px) {   /* 手機 1rem ≈ 視窗寬 8.5%,數字要小 */
  .tbi-prod__head { padding: 2.5rem var(--hd-gap) 0; }
  .tbi-prod__sub { margin-top: .25rem; font-size: .75rem; }
  .tbi-prod__line { margin-top: .5rem; }
  .tbi-prod__navbar { padding: .75rem var(--hd-gap) 1.25rem; }
  .tbi-prod__cats { gap: .25rem; font-size: var(--fs-read); }
  .tbi-prod__cat { height: max(44px, 1.375rem); padding-inline: .5rem; }
  .tbi-prod__all { margin-top: .75rem; }
  .tbi-prod__track { flex-direction: column; gap: .5rem; padding-bottom: 2.5rem; }
  .tbi-pcard__img { flex: none; aspect-ratio: 16 / 10; margin: .5rem .5rem 0; }
  .tbi-pcard__body { gap: .4rem; padding: .4rem .5rem .6rem; }
  .tbi-pcard__no { font-size: max(12px, .4rem); }
  .tbi-pcard__en { margin-top: .15rem; font-size: 1rem; }
  .tbi-pcard__zh { margin-top: .15rem; font-size: .55rem; }
  .tbi-pcard__desc { margin-top: .25rem; }
  .tbi-pcard__arrow { width: 40px; height: 40px; }
  .tbi-pcard__arrow .tbi-ico { width: 18px; height: 18px; }
}

/* ==========================================================================
   9. 最新消息:三個分類切換,只放日期+標題
   ========================================================================== */
.tbi-tabs .MaskText-block { display: flex; flex-wrap: wrap; }
.tbi-tab {
  display: inline-flex; align-items: center;
  border: 1px solid var(--tbi-line-press); border-radius: 999px;
  font-size: var(--fs-read); font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background-color .6s var(--tbi-ease-out), color .6s var(--tbi-ease-out);
}
.tbi-tab { color: var(--tbi-blue); }
.tbi-tab:hover, .tbi-tab.is-active { background-color: var(--tbi-blue); color: #fff; }
.tbi-news .NewsItem-title { font-size: var(--fs-read); letter-spacing: .05em; }
.tbi-news .News-button .FillButton-text { letter-spacing: .05em; }
.tbi .tbi-news .News-button { margin-inline: 0; justify-content: flex-start; }   /* 10-17 Eric:查看全部對齊表格左緣(原站置中) */
@media screen and (min-width: 821px) {
  .tbi-tabs .MaskText-block { gap: .5rem; }
  .tbi-tab { height: 2.5rem; padding-inline: 1.5rem; }
  .tbi-news .NewsItem-date { width: 6.5rem; font-size: 1rem; }
  .tbi .tbi-news { padding-top: 7.5rem; }   /* 10-17 Eric:新聞段上方留白對齊永續段(數字牆標題上方 7.5rem);原站約 11.7rem。手機原本就一樣 */
  .tbi .tbi-news .NewsItem-link { padding-block: 1.125rem 1.0625rem; }   /* 10-17 Eric:列文字和上下分隔線太鬆 → 原站 1.875/1.75rem(約 32px)收到約 19px */
}
@media screen and (max-width: 820.98px) {
  .tbi-tabs .MaskText-block { gap: .25rem; }
  .tbi-tab { height: max(44px, 1.375rem); padding-inline: .5rem; }
  .tbi-news .NewsItem-date { width: auto; font-size: max(16px, .5rem); }
}

/* 共用:中文按鈕字(對標按鈕原本是 13px 英文大寫) */
.tbi .FillButton-text { font-size: var(--fs-read); }

/* ==========================================================================
   10. ESG / 投資人專區(對標 Contact 段的位置與灰底;客戶要求小區塊)
   ========================================================================== */
.tbi-esg { position: relative; background-color: var(--tbi-panel); }
.tbi-esg__title { display: flex; align-items: center; font-family: var(--ff-en); font-weight: 700; }
.tbi-esg__titleText { text-transform: uppercase; }
.tbi-esg__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tbi-esg__col { grid-column: span 3; }
.tbi-esg__en { font-family: var(--ff-en); font-weight: 500; line-height: 1; }
.tbi-esg__name { font-weight: 500; line-height: 1.5; }
.tbi-esg__links li { border-top: 1px solid var(--tbi-line); }
.tbi-esg__links li:last-child { border-bottom: 1px solid var(--tbi-line); }
.tbi-esg__link { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-read); font-weight: 500; transition: color .6s var(--tbi-ease-out); }
.tbi-esg__link .tbi-ico { transition: transform .6s var(--tbi-ease); }
.tbi-esg__link:hover { color: var(--tbi-blue); }
.tbi-esg__link:hover .tbi-ico { transform: translateX(.25rem); }
.tbi-esg__awards { grid-column: 1 / span 3; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tbi-award__img { display: block; aspect-ratio: 3 / 4; background-color: #fff; border-radius: 8px; overflow: hidden; }
.tbi-award__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tbi-award__name { position: absolute; font-size: var(--fs-read); width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media screen and (min-width: 821px) {
  .tbi-esg { padding: 7.5rem 5.875rem 8rem; }
  .tbi-esg__title { font-size: 1rem; }
  .tbi-esg__titleText { padding-inline: .75rem; }
  .tbi-esg__grid { column-gap: 4.5rem; margin-top: 2.6875rem; }   /* 10-17 Eric:ESG 和 IR 兩欄太近 → 1.5 → 4.5rem(數字牆同步,Investors 左緣才會對齊數字牆第三欄) */
  .tbi-esg__en { font-size: 2.5rem; }
  .tbi-esg__name { margin-top: .75rem; font-size: max(16px, 1.25rem); }
  .tbi .tbi-esg__col .tbi-esg__links { margin-top: 2.5rem; }   /* 10-17 Eric:標題到第一條線 = 連結上下內距(1.25rem)的 2 倍;原本 2rem 被別的規則蓋掉、實際是 0 */
  .tbi-esg__link { padding-block: 1.25rem; }
  .tbi-esg__awards { gap: .5rem; margin-top: 1.5rem; }
}
@media screen and (max-width: 820.98px) {
  .tbi-esg { padding: 3.6875rem .625rem 4.0625rem; }
  .tbi-esg__title { font-size: .4375rem; }
  .tbi-esg__titleText { padding-inline: .375rem; }
  .tbi-esg__grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; margin-top: .75rem; }
  .tbi-esg__col, .tbi-esg__awards { grid-column: 1 / -1; }
  .tbi-esg__en { font-size: 1rem; }
  .tbi-esg__name { margin-top: .25rem; font-size: .625rem; }
  .tbi .tbi-esg__col .tbi-esg__links { margin-top: .75rem; }   /* 同上:= 連結上下內距 .375rem × 2 */
  .tbi-esg__link { min-height: 44px; padding-block: .375rem; }
  .tbi-esg__awards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
}

/* ==========================================================================
   11. 頁尾:兩間公司資訊+同主選單的網站地圖+社群
   ========================================================================== */
.tbi-footer .Footer-top { display: grid; align-items: start; }
.tbi-ftLogo img { display: block; width: 100%; height: auto; }   /* 10-17 Eric:頁尾 logo 要有顏色 → 改用深底版(標誌 CI 原色、字白),拿掉全白濾鏡 */
.tbi-ftCo p { color: var(--tbi-sub-d); font-size: var(--fs-read); line-height: 1.75; }
.tbi-ftCo .tbi-ftCo__name { color: #fff; font-weight: 500; }
.tbi-ftCo a { transition: color .6s var(--tbi-ease-out); }
.tbi-ftCo a:hover { color: #fff; }
.tbi-footer { --fs-read: 16px; }   /* 10-17 Eric:頁尾文字一律 16px(閱讀字原本隨螢幕放大,大螢幕會到 17–18px);版權/隱私權維持 12px */
/* 社群 = 圓形按鈕(10-17 Eric:icon 沒有留白、要拉開):同產品分類膠囊的深底系統 —— 白 35% 框線、滑過白底藍字;
   桌機直徑 = 全部產品按鈕高 2.1875rem,間距同膠囊 .5rem;清單預設內縮歸零,左緣對齊上面的 logo */
.tbi-social { display: flex; list-style: none; }   /* 留白歸零由 .tbi ul 重設負責;上方間距要寫 .tbi .tbi-social 才蓋得過它(10-17 被吃成 0,icon 黏在地址下面) */
.tbi-social__link {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; color: #fff;
  transition: background-color .6s var(--tbi-ease-out), color .6s var(--tbi-ease-out), border-color .6s var(--tbi-ease-out);
}
.tbi-social__link:hover { background-color: #fff; border-color: #fff; color: var(--tbi-blue); }
.tbi-social__link svg { display: block; fill: currentColor; }
/* 頁尾品牌大字(10-17 Eric:像 MaoKing/睿見的頁尾大字):客戶 logo 的 TBI MOTION 字形撐滿內容寬,白字;
   字母依序從下方滑上來,捲過重播(tbi.js 第 10 段;手法同 MaoKing 頁尾 MAO KING 大字) */
.tbi-ftWord { overflow: hidden; }   /* 10-17 Eric:上面的分隔線拿掉 */
.tbi-ftWord svg { display: block; width: 100%; height: auto; fill: #e7e8ed; overflow: visible; }   /* 白字(10-17 試過品牌藍,Eric:不好看 → 改回)*/
.tbi-ftl { transform-box: fill-box; transform: translateY(115%); transition: transform .95s cubic-bezier(.2, .85, .3, 1) calc(var(--i) * .06s); }
.tbi-ftWord.is-in .tbi-ftl { transform: none; }
@media (prefers-reduced-motion: reduce) { .tbi-ftl { transform: none; transition: none; } }
.tbi-footer .Footer-nav.tbi-ftNav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) max-content; }   /* 10-17 Eric:欄等寬(原本欄寬跟內容、間隔 101–245px 不平均);最後一欄「聯絡我們」只包住自己的字,前五欄平分剩下的寬 → 每欄起頭間隔仍一樣;太長的項目折兩行 */
.tbi-footer .Footer-navSection { flex-direction: column; margin-left: 0 !important; }
.tbi-footer .Footer-navTitle { color: var(--tbi-sub-d); font-size: var(--fs-read); font-weight: 500; line-height: 1.5; text-transform: none; }
.tbi-footer .Footer-navList { margin: 0; }
.tbi-footer .Footer-navListItem { font-size: var(--fs-read); font-weight: 400; line-height: 1.5; text-transform: none; }
.tbi-footer .Footer-navListItemLink { padding-inline: 0; }
.tbi-footer .Footer-navListItemLink::after { left: 0; width: 100%; }
.tbi-footer .Footer-copyRight, .tbi-footer .Footer-privacyLink { font-size: 12px; } /* 版權/法律字一律 12 或 14;鄰居 16 → 12 */
.tbi-ftLang { display: flex; color: var(--tbi-sub-d); font-size: var(--fs-read); }
.tbi-ftLang a { transition: color .6s var(--tbi-ease-out); }
.tbi-ftLang a:hover, .tbi-ftLang a[aria-current] { color: #fff; }
@media screen and (min-width: 821px) {
  .tbi-footer .Footer-top { grid-template-columns: 18rem minmax(0, 1fr); column-gap: 5rem; }   /* logo 欄 ↔ 選單:維持原本拉開的距離(10-17 試過收窄 3rem 被退回);選單六欄等寬見上 */
  .tbi-ftLogo { width: 13rem; }
  .tbi-ftCos { display: grid; row-gap: 1.5rem; margin-top: 2.5rem; }
  .tbi .tbi-social { gap: .5rem; margin-top: 2.5rem; }
  .tbi-social__link { width: 2.1875rem; height: 2.1875rem; }
  .tbi-social__link svg { width: max(18px, 1rem); height: max(18px, 1rem); }
  .tbi-ftWord { margin-top: 4.5rem; padding-top: 2.5rem; }
  .tbi-footer .Footer-bottom { margin-top: 2.5rem; padding-top: 0; }   /* 字→版權列 2.5rem(上方 4.5 + 2.5rem 維持原位置) */
  .tbi-footer .Footer-nav.tbi-ftNav { column-gap: 1rem; }
  .tbi-footer .Footer-navSection { gap: 1rem; }
  .tbi-footer .Footer-navList { gap: .25rem; }
  .tbi-footer .Footer-navListItemLink { padding-block: .25rem; }
  .tbi-footer .Footer-navListItemLink::after { bottom: .125rem; }
  .tbi-ftLang { gap: 1.5rem; }
}
@media screen and (max-width: 820.98px) {
  .tbi-footer .Footer-top { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .tbi-ftLogo { width: 5.3125rem; margin-inline: 0; }
  .tbi-ftCos { display: grid; row-gap: .75rem; margin-top: 1rem; }
  .tbi .tbi-social { gap: .25rem; margin-top: 1rem; }
  .tbi-social__link { width: 44px; height: 44px; }
  .tbi-social__link svg { width: 20px; height: 20px; }
  .tbi-ftWord { margin-top: 2rem; padding-top: 1rem; }
  .tbi-footer .Footer-bottom { margin-top: 1rem; padding-top: 0; }
  .tbi-footer .Footer-nav.tbi-ftNav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .5rem; }
  .tbi-footer .Footer-navSection { gap: .25rem; }
  .tbi-footer .Footer-navTitle { width: auto; }
  .tbi-footer .Footer-navListItemLink { padding-block: .125rem; }
  .tbi-ftLang { gap: .5rem; }
  .tbi-footer .Footer-bottom { padding-bottom: 1.5rem; } /* 讓出手機底部的浮動按鈕 */
}

/* ==========================================================================
   圖片進場:進場動畫池 01「遮罩上滑」照片版(10-17 Eric:淡入不明顯 → 六張改 01;參數照搬 進場動畫池/01-遮罩上滑/reveal.css)
   框(.tbi-fadeimg)不動、拿來給 tbi.js 第 6 段偵測;裡面多包一層 .tbi-rv 從底邊往上揭開,內圖從偏下、放大 1.12 倍歸位。
   遮罩不能加在被偵測的框上(IntersectionObserver 會把自身 clip-path 算進去 → 永遠判定看不見)。
   捲過重播:離開畫面 0.6 秒收回、不錯開。
   ========================================================================== */
:root { --rv-ease: cubic-bezier(.22, 1, .36, 1); }
.tbi-fadeimg { overflow: hidden; border-radius: 8px; }
.tbi-fadeimg .tbi-rv { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .6s var(--rv-ease); }
.tbi-fadeimg .tbi-rv img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateY(10%) scale(1.12); transition: transform .6s var(--rv-ease); }
.tbi-fadeimg.is-in .tbi-rv { clip-path: inset(0); transition: clip-path 1.2s var(--rv-ease) var(--rvd, 0s); }
.tbi-fadeimg.is-in .tbi-rv img { transform: none; transition: transform 1.4s var(--rv-ease) var(--rvd, 0s); }
/* (公司介紹②產品小圖、③右上廠區滑入圖 10-21 拿掉;規則備份在 tbi.css-bak-r56) */

/* ==========================================================================
   10-17 試作頁併回主頁:新聞段右下工程網格+兩張產品線稿;永續段淺藍灰底+最上面數字牆+最下面台灣總部空拍淡出
   ========================================================================== */
/* 11 工程網格:只留右下角(10-17 Eric:滿版的網格跟新聞列表的分隔線打架)→ 網格放在 ::before,用遮罩從右下角往外淡出成白;
   大格 6rem、小格 1.5rem,CI 藍很淡;工程圖疊在右下,跟著第 7 段視差慢慢移 */
.tbi .tbi-news { position: relative; overflow: hidden; }
.tbi .tbi-news::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 109, 184, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 109, 184, .08) 1px, transparent 1px),
    linear-gradient(rgba(0, 109, 184, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 109, 184, .04) 1px, transparent 1px);
  background-size: 6rem 6rem, 6rem 6rem, 1.5rem 1.5rem, 1.5rem 1.5rem;
  background-position: right -1px bottom -1px;
  -webkit-mask-image: radial-gradient(ellipse 48% 75% at 100% 100%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 75% at 100% 100%, #000 25%, transparent 100%);
}
.tbi .tbi-news > :not(.tbi-lineart) { position: relative; z-index: 1; }
/* 右側兩張藍色漸層產品線稿(10-17):新聞列表收窄到左邊,右欄放線稿;白底用色彩相乘融進淺底,只剩線條。
   兩張視差速度一慢一快(tbi.js 第 7 段),捲動時上下錯開。手機版先不放 */
.tbi-lineart { position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: multiply; }   /* 相乘要加在外層:外層有 z-index 會自成一層,加在圖上只會跟透明的外層相乘,白底蓋住網格 */
.tbi-lineart__img { position: absolute; display: block; height: auto; mix-blend-mode: multiply; }   /* 兩張之間也要相乘:不然下面那張的白底會蓋掉上面那張的下半(10-17 Eric 看到「被切掉」) */
@media screen and (min-width: 821px) {
  .tbi .tbi-news .News-resultsWrapper { width: 58%; }
  .tbi-lineart { top: 15.8125rem; right: 5.875rem; width: 34%; }   /* 10-21 收窄:右緣對齊 ESG/頁尾那條線(原 --hd-gap、寬 36%) */   /* 10-17 Eric:離分類按鈕太近 16 → 20rem;同日新聞段上方留白縮 4.1875rem(11.6875 → 7.5)、文字整段上移 → 線稿跟著上移同量,維持跟按鈕的距離(Eric:「一起往上移一點」) */   /* 10-17 Eric:離分類按鈕太近 → 16 → 20rem */
  /* 10-17 Eric:兩張離太遠 → 不再一上一下貼齊整欄頭尾,改成螺桿接在滑軌下面、稍微交疊(視差再讓它們錯開) */
  .tbi-lineart__img { position: relative; }
  .tbi-lineart__img.-guide { width: 74%; margin-left: auto; }
  .tbi-lineart__img.-screw { width: 82%; margin-top: -4rem; }   /* 10-17 Eric:再拉近 → −2 → −5rem,再「往下一點點」→ −4rem(兩張彼此相乘,交疊也不會互蓋);視差 ±0.05:兩張一快一慢,錯開幅度約 ±100px;往上收 2rem,捲到底也不會被新聞段底邊切到 */
}
/* 進場 = 進場動畫池 01(同全站圖片):從底邊往上揭開、從偏下放大 1.06 倍歸位;螺桿晚 .15 秒。偵測外框(tbi.js 第 6 段 data-tbi-fade) */
.tbi-lineart__img { clip-path: inset(100% 0 0 0); transform: translateY(8%) scale(1.06); transition: clip-path .6s var(--rv-ease), transform .6s var(--rv-ease); }
.tbi-lineart.is-in .tbi-lineart__img { clip-path: inset(0); transform: none; transition: clip-path 1.2s var(--rv-ease) var(--rvd, 0s), transform 1.4s var(--rv-ease) var(--rvd, 0s); }
.tbi-lineart__img.-screw { --rvd: .15s; }
@media screen and (max-width: 820.98px) { .tbi-lineart { display: none; } }

/* 永續段(10-17 Eric 選):淺藍灰底(帶一點 CI 藍)+ 最下方壓台灣總部空拍(屋頂太陽能板),上緣淡出、半透明不擋字 */
.tbi .tbi-esg { --esg-bg: #e8eef4; --esg-fg: var(--tbi-dark); --esg-sub: var(--tbi-sub); --esg-line: rgba(0, 0, 0, .14); --esg-accent: var(--tbi-blue); background-color: var(--esg-bg); color: var(--esg-fg); }
.tbi .tbi-esg > * { position: relative; z-index: 1; }
.tbi .tbi-esg::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  background: url("/assets/tbi/img/esg-aerial.webp") center 72% / cover no-repeat;
  opacity: .5;   /* 10-17 Eric:擋到字 → 半透明,淡出拉長到 75% */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 75%); mask-image: linear-gradient(to bottom, transparent 0, #000 75%);
}
@media screen and (min-width: 821px) {
  .tbi .tbi-esg { padding-bottom: 19rem; }   /* 原本 8rem;10-17 Eric 嫌 26rem 留太多 → 19rem */
  .tbi .tbi-esg::before { height: 28rem; }
}
@media screen and (max-width: 820.98px) {
  .tbi .tbi-esg { padding-bottom: 9rem; }
  .tbi .tbi-esg::before { height: 11rem; }
}
.tbi .tbi-esg__title { color: var(--esg-accent); }
.tbi .tbi-esg__links li, .tbi .tbi-esg__links li:last-child { border-color: var(--esg-line); }
.tbi .tbi-esg .tbi-award__name { color: var(--esg-sub); }

/* (原 ESG 段數字牆 10-21 搬到 40 週年段,改用幾何數字;舊樣式備份 tbi.css-bak-r57) */