@charset "UTF-8";
/* ==========================================================================
   TBI 全球傳動集團首頁|各區塊樣式(蓋在 base.css 之上)
   尺寸單位:整站跟著視窗寬縮放 —— 桌機 1rem = 視窗寬 ÷ 1366 × 16;手機 1rem = 視窗寬 × 8.53%(見 base.css 的 html font-size)。
            元件一律用 rem 才會跟著整站縮放;閱讀字用 max(16px, …) 保底。
   ========================================================================== */

/* ---------- 0. 色票與共用值(新值先查這裡,沒有才加) ---------- */
:root {
  --tbi-blue: #006db8;        /* CI 藍 = 全站點綴色(按鈕、膠囊、可按的線、滑過、小標籤)*/
  --tbi-red: #e83e2d;         /* CI 紅:40 週年圖 */
  --tbi-dark: #1a1c22;
  --tbi-panel: #ecedf0;
  --tbi-sub: #505050;         /* 淺底次要字 */
  --tbi-sub-d: #8d8e91;       /* 深底次要字 */
  /* 灰線只兩階:靜態(框、分隔線)/可按(按鈕外框) */
  --tbi-line: rgba(0, 0, 0, .2);
  --tbi-line-press: var(--tbi-blue);      /* 可按的東西的外框*/
  --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;
  --ff-zh: "Noto Sans TC", sans-serif;
  --fs-read: max(16px, .875rem);  /* 閱讀字:保底 16px */
}
@media screen and (max-width: 820.98px) {
  :root { --fs-read: max(16px, .5rem); }
}

/* ---------- 2. 瀏覽器預設內外距歸零 ---------- */
.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. 頁首
 首屏上:白字+白色全名 logo;往下捲(is-sticky):logo 換三色標誌、右側整排墊霧面膠囊、字變黑
 經過深色段(is-dark):膠囊改深色半透明、字變白

 ==========================================================================*/
: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 .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);
}
/* 頁首常駐(不做往下捲隱藏) */
.tbi .tbi-header.is-sticky { padding-top: 36px; color: #000; }   /* 捲動後頁首離頂 36px*/
.tbi .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 原色。
   壓在深色上(首屏、頁尾)用白字版,淺色上用深灰字版,兩張疊在一起交叉淡換;往下捲縮成高 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; }

/* 文字滑過:原字往上滑走、同一行字從下面補上*/
.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); }   /* 打開時「+」收成「−」(同公司介紹展開鈕) */
/* 語系下拉→ 外觀同大選單面板:白 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;
}
.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 .tbi-burger { pointer-events: auto; }

@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 以下:頁首放不下搜尋、會員登入、語系 → 收進漢堡選單;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)跟漢堡鈕靠在一起,不要被平均分散到中間 */
  /* 漢堡鈕:821–1099 也顯示(樣式見「手機/平板選單」) */
  .tbi-header .tbi-burger.tbi-spOnly { display: block !important; margin-left: 16px; }
  .tbi .tbi-menu.tbi-spOnly { 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 .tbi-header { padding: 12px var(--hd-gap); }
  .tbi .tbi-header.is-sticky { padding-top: 12px; background-color: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
  .tbi .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; }
}

/* 大選單*/
.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;   /*只留很短的淡入*/
}
.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; 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__input:focus { box-shadow: inset 0 -1px 0 var(--tbi-line-press); }   /* 聚焦時底線加粗一倍,看得出焦點在這裡 */
.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; }
  .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 .tbi-side__btn .tbi-side__icon, .tbi-side .tbi-side__btn .tbi-side__label { border: 0; background: none; color: inherit; }   /* 手機底部那排按鈕不要外框(選擇器要從 .tbi-side 寫起,權重才蓋得過上面 .-light 那條) */
}
/* 手機/平板選單:白底藍字全屏;右上兩條線漢堡鈕,打開變叉
   - 開關:白色整片由上往下拉開(tbi-core.js 第 5 段);選項逐列從下面遮罩上滑
   - 列表同桌機大選單的連結列:字+右側符號+底線;第一列上方留白(頁首下 64px)明顯大於列與列之間(32px)
   - 選單開著時頁首換淺色版(三色 logo+藍色叉叉):等白幕蓋過頁首(.15s)才換;關到底(.tbi-menu 拿掉 -open)才換回來 */
.tbi-burger { position: relative; width: 44px; height: 44px; margin-right: -10px; }
.tbi-burger__line { position: absolute; left: 10px; right: 10px; height: 1.5px; background-color: currentColor; transition: transform .5s var(--tbi-ease); }
.tbi-burger__line:first-child { top: 18px; }
.tbi-burger__line:last-child { top: 25px; }
[data-open-modal=menu] .tbi-burger__line:first-child { transform: translateY(3.5px) rotate(45deg); }
[data-open-modal=menu] .tbi-burger__line:last-child { transform: translateY(-3.5px) rotate(-45deg); }
body.tbi:has(.tbi-menu.-open) .tbi-header { color: var(--tbi-blue); background-color: transparent; transition-delay: .15s; }
body.tbi:has(.tbi-menu.-open) .tbi-hdLogo__img.-ondark { opacity: 0; transition-delay: .15s; }
body.tbi:has(.tbi-menu.-open) .tbi-hdLogo__img.-onlight { opacity: 1; transition-delay: .15s; }
@media screen and (max-width: 1099px) {
  .tbi-menu .tbi-menu__content { top: 0; left: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; background-color: #fff; color: var(--tbi-blue); }
  .tbi-menu .tbi-menu__inner { flex-direction: column; justify-content: flex-start; align-items: stretch; min-height: 100%; padding: 104px var(--hd-gap) 80px; }
  .tbi-menu__item { overflow: hidden; }
  .tbi-menu__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--tbi-line); color: inherit; font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: .05em; text-align: left; }
  .tbi-menu__link .tbi-plus { width: 14px; height: 14px; }
  .tbi-menu__item.is-open .tbi-plus::after { transform: rotate(0deg); }   /* 打開時「+」收成「−」(同公司介紹) */
  /* 子選單收合容器(同公司介紹的展開:高度 0fr ↔ 1fr);排法照大選單:群組名在線下、子項目在後 */
  .tbi-menu__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--tbi-ease); }
  .tbi-menu__item.is-open .tbi-menu__panel { grid-template-rows: 1fr; }
  .tbi-menu__panelInner { min-height: 0; overflow: hidden; }
  .tbi .tbi-menu__subs { padding: 8px 0 16px; opacity: 0; transition: opacity .3s; }
  .tbi-menu__item.is-open .tbi-menu__subs { opacity: 1; transition: opacity .5s var(--tbi-ease-out) .15s; }
  .tbi-menu__sub { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; color: var(--tbi-dark); font-size: 18px; line-height: 1.5; letter-spacing: .05em; }
  .tbi-menu__sub .tbi-ico { width: 16px; height: 16px; color: var(--tbi-blue); }
  .tbi .tbi-menu__subs2 { padding: 0 0 8px; }
  .tbi-menu__sub2 { display: block; padding: 6px 0 6px 16px; color: var(--tbi-dark); font-size: 18px; line-height: 1.5; letter-spacing: .05em; }
  .tbi-menu__sub2::before { content: "— "; }   /* 同大選單第三層;顏色跟上一層一樣(灰字看起來細、難讀)*/
  .tbi-menu__esg { align-self: flex-start; display: flex; align-items: center; height: 40px; margin-top: 32px; padding: 0 24px; border-radius: 999px; background-color: var(--tbi-blue); color: #fff; font-size: 16px; letter-spacing: .05em; }
  .tbi-menu__search { margin-top: 40px; column-gap: 16px; }
  .tbi-menu__search .tbi-search__input { height: 48px; font-size: 16px; color: var(--tbi-dark); }
  .tbi-menu__search .tbi-search__btn { width: 64px; }
  .tbi-menu__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 40px; font-size: 16px; line-height: 1.5; letter-spacing: .05em; }
  .tbi-menu__member { display: flex; align-items: center; gap: 8px; }
  .tbi-menu__member .tbi-ico { width: 20px; height: 20px; }
  .tbi .tbi-menu__langs { display: flex; gap: 16px; }
  .tbi-menu__langs a { color: var(--tbi-sub); }
  .tbi-menu__langs a[aria-current] { color: var(--tbi-blue); }   /* 目前語系只用藍色標示(字重統一 regular) */
  /* 進場:列表逐列遮罩上滑,其他淡入;關的時候直接收(不等) */
  .tbi-menu__item > .tbi-menu__link { transform: translateY(101%); transition: transform .3s; }
  .tbi-menu.-show .tbi-menu__item > .tbi-menu__link { transform: none; transition: transform .8s var(--tbi-ease-out) calc(.35s + var(--i) * .05s); }
  .tbi-menu__esg, .tbi-menu__search, .tbi-menu__foot { opacity: 0; transition: opacity .3s; }
  .tbi-menu.-show :is(.tbi-menu__esg, .tbi-menu__search, .tbi-menu__foot) { opacity: 1; transition: opacity .6s .7s; }
}
@media screen and (min-width: 821px) and (max-width: 1099px) {
  .tbi-menu .tbi-menu__inner { padding-top: 128px; }
  body.tbi:has(.tbi-menu.-open) .tbi-side { opacity: 0; visibility: hidden; }   /* 平板右下兩顆圓鈕會壓到選單底部的語系,選單開著先藏 */
}
@media (prefers-reduced-motion: reduce) {
  .tbi-menu__link, .tbi-menu.-show .tbi-menu__link { transform: none; transition: none; }
  .tbi-menu__esg, .tbi-menu__search, .tbi-menu__foot { opacity: 1; }
}

/* ==========================================================================
   5. 首屏:實景交叉淡入+慢推近+暗化層;左下品牌標準字+標語。首屏一屏高,照常捲走
   ========================================================================== */
.tbi-kv { position: relative; z-index: 1; height: 100vh; background-color: var(--tbi-dark); color: #fff; }
.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; }
html:not(.is-loaded) .tbi-kv__img { animation-play-state: paused; }   /* 載入畫面還蓋著時先不推近,收起後才開始 */
@keyframes tbi-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.tbi-kv__pv::after {   /* 實景是日光照,加暗化層讓白字讀得到;暗化層掛在外層、往外多罩 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%);   /* 上緣留給頁首白字、下緣留給標語 */
}
.tbi-kv__contents { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--hd-gap); }
/* 分頁標記
 位置:左緣對齊大字(--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; }
.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 (prefers-reduced-motion: reduce) {   /* 減少動態效果:不推近、不自動輪播,目前那張的分頁線直接整條亮 */
  .tbi-kv__img.is-active, .tbi-kv__img.is-leaving { animation: none; }
  .tbi-kv__dots button.on::after { animation: none; transform: none; }
}
@media screen and (max-width: 820.98px) {   /* 手機底部有整排浮動按鈕(高 48),線放在它上方 16px */
  .tbi-kv__contents { padding-bottom: 124px; }
  .tbi-kv__dots { bottom: 64px; }
}
/* 大字 = 品牌標準字 SVG。寬度 = 內容寬 × 880/1540、上限 880px;viewBox 貼齊字墨,左緣直接對齊內容邊。
   進場 = 字母依序從下方滑上來(同頁尾大字),跟著標語一起捲過重播(.-show 由 tbi.js 第 5 段控制) */
.tbi-kv__word { --kvw: min(880px, (100vw - var(--hd-gap) * 2) * 880 / 1540); width: var(--kvw); overflow: hidden;
  margin-bottom: calc(var(--kvw) * .0437); }   /* 標準字字墨底到標語的距離 */
.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__tagline { font-family: var(--ff-zh); font-size: 60px; font-weight: 500; line-height: 1.45; margin-top: 20px; }
.tbi-kv__taglineEn { font-family: var(--ff-en); font-size: 20px; font-weight: 400; line-height: 1.4; margin-top: 20px; }
.tbi-kv__tagline .tbi-mask__line { transition-delay: .15s; }
.tbi-kv__tagline .tbi-mask__lineWrap + .tbi-mask__lineWrap .tbi-mask__line { transition-delay: .25s; }
.tbi-kv__taglineEn .tbi-mask__line { transition-delay: .4s; }
@media screen and (max-width: 1023px) {
  .tbi-kv__word { --kvw: 243px; }
  .tbi-kv__tagline { font-size: 24px; margin-top: 10px; }
  .tbi-kv__taglineEn { font-size: 16px; margin-top: 10px; }
}

/* 導言類文字保底 16px */
@media screen and (min-width: 821px) {
  .tbi .tbi-company__lead { font-size: max(16px, 1.25rem); }
}
@media screen and (max-width: 820.98px) {
  .tbi .tbi-company__lead { font-size: max(16px, .5rem); }
}

/* ==========================================================================
   5b. 點綴色:強調色一律用品牌藍
   ========================================================================== */
/* 滑過變白底藍字藍框 */
.tbi .tbi-btn__link { background-color: var(--tbi-blue); }
.tbi .tbi-btn__link::before, .tbi .tbi-btn__line { border-color: var(--tbi-blue); }
@media (hover: hover) {
  .tbi .tbi-btn__link:hover .tbi-btn__text { color: var(--tbi-blue); }
  .tbi .tbi-btn__link:hover::before, .tbi .tbi-btn__link:hover .tbi-btn__line { border-color: var(--tbi-blue); }
}
/* 淺底上的小標籤與編號 */
.tbi .tbi-news .tbi-label, .tbi .tbi-esg__title, .tbi .tbi-co__no { color: var(--tbi-blue); }
/* 新聞列:滑過的圓點與標題 */
.tbi .tbi-news .tbi-newsItem__circle { background-color: var(--tbi-blue); }
.tbi .tbi-news .tbi-newsItem:hover .tbi-newsItem__title { color: var(--tbi-blue); }
.tbi .tbi-news .tbi-newsItem__title { transition: color .6s var(--tbi-ease-out); }

/* ==========================================================================
 6. 公司介紹:兩間公司、各一顆按鈕展開說明
 ==========================================================================*/
.tbi .tbi-company__lead { letter-spacing: .05em; }
.tbi .tbi-company__title { color: var(--tbi-blue); }   /* TBI MOTION GROUP 大字 = CI 藍 */
.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; }   /* 預設藍底白字、滑過反白 */
.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; }

/*上排「標題|大樓照」、下排兩間公司左右兩欄,不要排得太規則 ——
 大樓照上緣錯一階,對齊標題第二行 MOTION 的字頂,往下跨進公司那一排的右側;這張不做視差(會把對齊飄掉)。
 三欄:公司一 | 公司二 | 照片 24.625rem;左右對齊 ESG/頁尾那條線 5.875rem。*/
@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 .tbi-company__title, .tbi .tbi-coHead .tbi-company__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 字墨頂 → 照片上緣齊 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); }
  /* 一列版(10-30 詩耕):大字 TBI MOTION GROUP 一行、導言一行,兩間公司貼在下面,看到照片就看得到兩家公司介紹。
     整區至少一屏高:大字與導言在上,兩間公司貼底,中間的空自動撐開(最少 3rem);上 4.5rem 讓過頁首(頁首不跟 rem 縮放,最少 88px)、下 3rem。
     字級 = min(3.75rem, 6.8vh):寬度照全站 rem 放大,螢幕越扁越跟著高度縮。
     兩間公司的說明都先佔好位置(收起的那間只是看不見),滑過切換時整區高度不跳。
     照片不做圓角框,當右半背景:從文字右緣起貼齊右邊與上下,左邊用 S 曲線(慢進慢出)淡出到框寬 48%(10-30 晚 Eric:原本欄線起 35% 直線漸層過渡太硬;原照片版、AI 版一樣) */
  .tbi .tbi-company.-row { --co-title: min(3.75rem, 6.8vh); position: relative; min-height: 100vh; padding-top: max(4.5rem, 88px); padding-bottom: 3rem; grid-template-rows: auto 1fr; }
  .tbi .tbi-company.-row .tbi-coHead, .tbi .tbi-company.-row .tbi-cos { position: relative; z-index: 1; }
  .tbi .tbi-company.-row .tbi-company__title { display: flex; column-gap: .28em; font-size: var(--co-title); line-height: .82; }
  .tbi .tbi-company.-row .tbi-bigTitle__row:first-child { margin-left: -.058em; }   /* T 的左側留白補回去,字墨左緣對齊下面的線 */
  .tbi .tbi-company.-row .tbi-company__lead { margin-top: 1.25rem; white-space: nowrap; }
  .tbi .tbi-company.-row .tbi-cos { margin-top: 3rem; align-self: end; }
  .tbi .tbi-company.-row .tbi-co__panel { grid-template-rows: 1fr; }
  .tbi .tbi-company.-row .tbi-coPhoto { position: absolute; z-index: 0; grid-area: auto; align-self: stretch; margin: 0; aspect-ratio: auto; border-radius: 0; clip-path: none; }   /* grid-area: auto → 以整個區塊為定位範圍,不是第三欄;stretch → 上下都貼齊(舊的 start 會讓框高變 0) */
  .tbi .tbi-company.-photobg .tbi-coPhoto { top: 0; right: 0; bottom: 0; left: calc(100% - 34.5rem); width: auto;   /* 34.5rem = 第三欄 24.625 + 欄距 4 + 右版邊 5.875 → 文字右緣 */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.03) 4.8%, rgba(0,0,0,0.1) 9.6%, rgba(0,0,0,0.22) 14.4%, rgba(0,0,0,0.35) 19.2%, rgba(0,0,0,0.5) 24%, rgba(0,0,0,0.65) 28.8%, rgba(0,0,0,0.78) 33.6%, rgba(0,0,0,0.9) 38.4%, rgba(0,0,0,0.97) 43.2%, rgba(0,0,0,1) 48%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.03) 4.8%, rgba(0,0,0,0.1) 9.6%, rgba(0,0,0,0.22) 14.4%, rgba(0,0,0,0.35) 19.2%, rgba(0,0,0,0.5) 24%, rgba(0,0,0,0.65) 28.8%, rgba(0,0,0,0.78) 33.6%, rgba(0,0,0,0.9) 38.4%, rgba(0,0,0,0.97) 43.2%, rgba(0,0,0,1) 48%); }
  .tbi .tbi-company.-photobg .tbi-coPhoto img { object-position: 0% 50%; }   /* 原照片版:主樓 logo 在原圖寬 24%,靠左對齊 → logo 落在框寬約一半(淡出外),主樓右側與右邊廠房超出螢幕 */
  /* AI 版:圖片(正方形)照框高鋪滿、靠右,左半是大樓左邊的真實場景(馬路、棕櫚樹綠地、遠山),框左緣一定有圖。
     logo 在圖裡離右緣 0.437 個圖高 → 圖往右推出螢幕 max(0, 43.7cqh − 50cqw),logo 就落在框寬 50%(淡出外),大樓右側超出螢幕 */
  .tbi .tbi-company.-ai .tbi-coPhoto { container-type: size; }
  .tbi .tbi-company.-ai .tbi-coPhoto img { position: absolute; top: 0; right: calc(-1 * max(0px, 43.7cqh - 50cqw)); width: auto; height: 100%; max-width: none; }
  .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 .tbi-company.-row .tbi-company__title { display: flex; column-gap: .28em; font-size: 1rem; line-height: .82; }   /* 大字一行 */
  .tbi .tbi-company.-row .tbi-coPhoto { width: auto; margin: 1.5rem calc(var(--hd-gap) * -1) 0; border-radius: 0; clip-path: none; }   /* 照片滿版、不加框 */
  .tbi .tbi-company.-photobg .tbi-coPhoto { aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%); }
  .tbi .tbi-company.-ai .tbi-coPhoto { aspect-ratio: 1 / 1; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15%); mask-image: linear-gradient(to bottom, transparent 0, #000 15%); }   /* 手機:正方形整張露出(左邊綠地遠山是真的場景),上緣淡出縮成 15% 才不吃到招牌(圖高 24%) */
  .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 週年:左上小標+中文標題、右上 40th 標誌、中間緞帶、黑色粗大字 FUSION(左)/POWERS EVOLUTION(右下)
   緞帶疊兩層跟字前後穿插:後層(z 0)在字後面,字 z 1,前層(z 2)只露上半段 → 緞帶壓在 FUSION 前面、躲在 EVOLUTION 後面。
   不釘住、淺藍灰底;緞帶與大字的動畫在 tbi.js 第 9–11 段。左右對齊 ESG/頁尾那條線 5.875rem。
   ========================================================================== */
.tbi-40 { position: relative; background-color: #e8eef4; color: var(--tbi-dark); }
.tbi .tbi-40 .tbi-label { 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 標誌進場:紅圓外圍的藍色弧帶+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; }
/* 緞帶待機動畫:上下浮動+呼吸+微擺,三種週期互不整除 → 不會規律重複。
   用 transform / scale / rotate 三個不同屬性疊;視差另外寫在 translate 屬性(tbi.js 第 10 段),四者不打架。
   動的是兩層 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 { overflow-x: clip; }
/* 大字的外框路徑版(.tbi-40__svgw):工程線稿動畫(data-anim="line")顯示路徑,文字留著但視覺隱藏(搜尋與讀屏照樣讀得到)。
   上下 −.145em:路徑框 = 字體上下緣 1.21em,置中在 .92em 的行高裡(同瀏覽器排字),所以位置跟文字版一樣 */
.tbi-40__svgw { display: none; height: auto; overflow: visible; fill: currentColor; }
.tbi-40[data-anim="line"] .tbi-40__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tbi-40[data-anim="line"] .tbi-40__svgw { display: block; margin: -.145em 0; }
.tbi-40[data-anim="line"] .tbi-40__w.-pe .tbi-40__svgw { margin-left: auto; }
/* 工程線稿動畫:大字先只有外框線(1.5px),從左往右描出來;描完填滿黑色。FUSION → POWERS → EVOLUTION 依序 */
.tbi .tbi-40[data-anim="line"] .tbi-40__w .tbi-mask__block { transform: none; color: transparent; -webkit-text-stroke: 1.5px var(--tbi-dark); clip-path: inset(-10% 100% -10% 0); }
.tbi .tbi-40[data-anim="line"] .tbi-40__w.-show .tbi-mask__block { color: var(--tbi-dark); clip-path: inset(-10% 0 -10% 0); transition: clip-path 1.6s cubic-bezier(.65, 0, .35, 1) var(--ld, 0s), color .8s ease calc(var(--ld, 0s) + 1.7s); }
.tbi .tbi-40[data-anim="line"] .tbi-40__svgw path { fill: transparent; stroke: var(--tbi-dark); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.tbi .tbi-40[data-anim="line"] .tbi-40__w.-show .tbi-40__svgw path { fill: var(--tbi-dark); transition: fill .8s ease calc(var(--ld, 0s) + 1.7s); }
.tbi-40[data-anim="line"] .tbi-40__w.-pe > span:nth-child(1) .tbi-mask__block { --ld: .3s; }
.tbi-40[data-anim="line"] .tbi-40__w.-pe > span:nth-child(2) .tbi-mask__block { --ld: .6s; }
@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%(同 40 週年主視覺偏左),讓 FUSION 的 N 露出來 */
  .tbi-40__rb svg { height: 38rem; }
  .tbi-40__rb.-front { clip-path: inset(-20rem -20rem 8.7rem -20rem); }
  .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; }
}
@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; }
}

/* ==========================================================================
   8. 產品:淺藍灰底;小標 (PRODUCTS)+中文標題+細線;分類連結+全部產品
   捲到這裡「分類列+白色卡片」釘住、卡片橫向滑過(tbi.js 第 8 段:往下捲 1px = 卡片往左 1px),標題照常捲走。
   手機版不釘住,卡片直排。
   ========================================================================== */
.tbi-prod { position: relative; background-color: #e8eef4; color: var(--tbi-dark); }
/* 淺底上品牌藍 */
.tbi .tbi-prod .tbi-label { 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; }
/* 分類 = 膠囊按鈕→ 同新聞分類標籤 .tbi-tab:可按的框線色、藍字,滑過藍底白字*/
.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; }
/* 產品資訊下方細線:左右對齊內容區(右端 = 全部產品按鈕右緣),進場從左往右畫出來,捲過重播(跟標題同一個 -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; }
/* 全部產品:全站藍色按鈕(第 5b 段) */
.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); }
.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; }
  .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; }   /* 高度 = 右邊「全部產品」按鈕,同一排要完全一樣高 */
  /* 只釘「分類列+卡片」;釘住層 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 第 8 段算 --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 .tbi-mask__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 .tbi-newsItem__title { font-size: var(--fs-read); letter-spacing: .05em; }
.tbi-news .tbi-news__more .tbi-btn__text { letter-spacing: .05em; }
.tbi .tbi-news .tbi-news__more { margin-inline: 0; justify-content: flex-start; }
@media screen and (min-width: 821px) {
  .tbi-tabs .tbi-mask__block { gap: .5rem; }
  .tbi-tab { height: 2.5rem; padding-inline: 1.5rem; }
  .tbi-news .tbi-newsItem__date { width: 6.5rem; font-size: 1rem; }
  .tbi .tbi-news { padding-top: 7.5rem; }
  .tbi .tbi-news .tbi-newsItem__link { padding-block: 1.125rem 1.0625rem; }
}
@media screen and (max-width: 820.98px) {
  .tbi-tabs .tbi-mask__block { gap: .25rem; }
  .tbi-tab { height: max(44px, 1.375rem); padding-inline: .5rem; }
  .tbi-news .tbi-newsItem__date { width: auto; font-size: max(16px, .5rem); }
}

/* 共用:中文按鈕字*/
.tbi .tbi-btn__text { font-size: var(--fs-read); }

/* ==========================================================================
 10. ESG / 投資人專區
 ==========================================================================*/
.tbi-esg { position: relative; }
.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); }
@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; }
  .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; }   /* 標題到第一條線 = 連結上下內距(1.25rem)的 2 倍 */
  .tbi-esg__link { padding-block: 1.25rem; }
}
@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 { 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; }
}

/* ==========================================================================
   11. 頁尾:兩間公司資訊+同主選單的網站地圖+社群
   ========================================================================== */
.tbi-footer .tbi-footer__top { display: grid; align-items: start; }
.tbi-ftLogo img { display: block; width: 100%; height: auto; }
.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; }   /* 頁尾字一律 16px;版權/隱私權 12px */
/* 社群 = 圓形按鈕:同產品分類膠囊的深底系統 —— 白 35% 框線、滑過白底藍字
 桌機直徑 = 全部產品按鈕高 2.1875rem,間距同膠囊 .5rem;清單預設內縮歸零,左緣對齊上面的 logo*/
.tbi-social { display: flex; list-style: none; }   /* 留白歸零由 .tbi ul 重設負責;上方間距要寫 .tbi .tbi-social 才蓋得過它*/
.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; }
/* 頁尾品牌大字:品牌標準字 TBI MOTION 撐滿內容寬,白字;字母依序從下方滑上來,捲過重播(tbi.js 第 16 段) */
.tbi-ftWord { overflow: hidden; }
.tbi-ftWord svg { display: block; width: 100%; height: auto; fill: #e7e8ed; overflow: visible; }   /* 白字*/
.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 .tbi-ftNav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) max-content; }   /*最後一欄「聯絡我們」只包住自己的字,前五欄平分剩下的寬 → 每欄起頭間隔仍一樣;太長的項目折兩行*/
.tbi-footer .tbi-ftNav__section { flex-direction: column; margin-left: 0 !important; }
.tbi-footer .tbi-ftNav__title { color: var(--tbi-sub-d); font-size: var(--fs-read); font-weight: 500; line-height: 1.5; text-transform: none; }
.tbi-footer .tbi-ftNav__list { margin: 0; }
.tbi-footer .tbi-ftNav__item { font-size: var(--fs-read); font-weight: 400; line-height: 1.5; text-transform: none; }
.tbi-footer .tbi-ftNav__link { padding-inline: 0; }
.tbi-footer .tbi-ftNav__link::after { left: 0; width: 100%; }
.tbi-footer .tbi-footer__copy, .tbi-footer .tbi-footer__privacy { 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 .tbi-footer__top { grid-template-columns: 18rem minmax(0, 1fr); column-gap: 5rem; }   /* logo 欄 ↔ 選單的距離;選單六欄等寬見上 */
  .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 .tbi-footer__bottom { margin-top: 2.5rem; padding-top: 0; }   /* 字 → 版權列 2.5rem */
  .tbi-footer .tbi-ftNav { column-gap: 1rem; }
  .tbi-footer .tbi-ftNav__section { gap: 1rem; }
  .tbi-footer .tbi-ftNav__list { gap: .25rem; }
  .tbi-footer .tbi-ftNav__link { padding-block: .25rem; }
  .tbi-footer .tbi-ftNav__link::after { bottom: .125rem; }
  .tbi-ftLang { gap: 1.5rem; }
}
@media screen and (max-width: 820.98px) {
  .tbi-footer .tbi-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 .tbi-footer__bottom { margin-top: 1rem; padding-top: 0; }
  .tbi-footer .tbi-ftNav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .5rem; }
  .tbi-footer .tbi-ftNav__section { gap: .25rem; }
  .tbi-footer .tbi-ftNav__title { width: auto; }
  .tbi-footer .tbi-ftNav__link { padding-block: .125rem; }
  .tbi-ftLang { gap: .5rem; }
  .tbi-footer .tbi-footer__bottom { padding-bottom: 1.5rem; } /* 讓出手機底部的浮動按鈕 */
}

/* ==========================================================================
   12. 圖片進場:照片從底邊往上揭開
   框(.tbi-fadeimg)不動、拿來給 tbi.js 第 14 段偵測;裡面多包一層 .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); }

/* ==========================================================================
   13. 最新消息與永續段的背景:工程網格、產品線稿、台灣總部空拍
   ========================================================================== */
/* 工程網格:只留右下角 —— 網格放在 ::before,用遮罩從右下角往外淡出成白;大格 6rem、小格 1.5rem,CI 藍很淡 */
.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; }
/* 右側兩張藍色漸層產品線稿:新聞列表收窄到左邊,右欄放線稿;白底用色彩相乘融進淺底,只剩線條。
   兩張視差速度一慢一快(tbi.js 第 15 段),捲動時上下錯開。手機版不放 */
.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; }   /* 兩張之間也要相乘:不然下面那張的白底會蓋掉上面那張的下半*/
@media screen and (min-width: 821px) {
  .tbi .tbi-news .tbi-news__results { width: 58%; }
  .tbi-lineart { top: 15.8125rem; right: 5.875rem; width: 34%; }      /* 線稿跟新聞段文字一起往上,維持跟分類按鈕的距離 */
  /* 螺桿接在滑軌下面、稍微交疊(視差再讓它們錯開) */
  .tbi-lineart__img { position: relative; }
  .tbi-lineart__img.-guide { width: 74%; margin-left: auto; }
  .tbi-lineart__img.-screw { width: 82%; margin-top: -4rem; }   /* 兩張彼此相乘,交疊也不會互蓋;視差錯開幅度約 ±100px,捲到底也不會被新聞段底邊切到 */
}
/* 螺桿晚 .15 秒進場;偵測外框(tbi.js 第 14 段 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; } }

/* 永續段:淺藍灰底(帶一點 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("../img/esg-aerial.webp") center 72% / cover no-repeat;
  opacity: .5;   /* 上緣淡出到 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; }
  .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-core.js 第 5 段加/拿掉 .-show):開 0.9 秒、關 0.5 秒,由上往下拉開 */
.tbi-menu .tbi-menu__content { transition: clip-path .5s cubic-bezier(.645, .045, .355, 1); }
.tbi-menu.-show .tbi-menu__content { clip-path: inset(0); transition-duration: .9s; }
/* 載入畫面收起後才放開橫向(載入中鎖住,避免載入畫面撐出橫向捲軸) */
.is-loaded body { overflow-x: visible; }

/* 選單開著時鎖住背景捲動(有平滑捲動時 Lenis 也會鎖;這條給減少動態效果、沒有 Lenis 的情況) */
.is-menuOpen { overflow: hidden; }