@charset "UTF-8";
/* ==========================================================================
   全傳 ESG 官網首頁|ESG 才有的區塊(蓋在主站 base.css + tbi.css 之上)
   主站的色票、字級、按鈕、圖片進場、頁首頁尾一律沿用(tbi.css 第 0 段);這支只寫主站沒有的東西。
   單位同主站:桌機 1rem = 視窗寬 ÷ 1366 × 16;手機 1rem = 視窗寬 × 8.53%。
   左右版邊 = 主站 5.875rem(桌機)/ var(--hd-gap)(手機);區塊上下留白一律 7.5rem(手機 2.5rem)。
   ========================================================================== */
:root { --esg-pad: 5.875rem; --esg-sec: 7.5rem; --esg-bg: #e8eef4; --esg-green: #487830;
  --esg-hover: linear-gradient(135deg, var(--tbi-blue) 0%, var(--esg-green) 100%); }   /* 綠 = 報告書封面圖草地取樣(白底對比 5.2);卡片滑過 = CI 藍斜向漸層到綠(11-03 Eric) */
@media screen and (max-width: 820.98px) { :root { --esg-pad: var(--hd-gap); --esg-sec: 2.5rem; } }

/* ---------- 1. 頁首:主站頁首拿掉會員登入與 ESG 膠囊,換成社群連結+中/EN ---------- */
.tbi .esg-hdSocial { display: flex; align-items: center; gap: 14px; margin-top: 0; margin-left: 24px; }   /* 要寫 .tbi 起頭:主站頁尾的 .tbi .tbi-social 有 margin-top 2.5rem,權重 0,2,0 會把頁首這排往下推 */
.esg-hdSocial .tbi-social__link { width: 20px; height: 20px; border: 0; border-radius: 0; color: inherit; background: none; }
.esg-hdSocial .tbi-social__link svg { width: 16px; height: 16px; }
.esg-hdSocial .tbi-social__link:hover { background: none; color: var(--tbi-blue); }
/* 語系 = 主站的「+ 繁中」下拉(樣式全在 tbi.css,這裡不另寫) */
@media screen and (min-width: 1441px) {
  .tbi .esg-hdSocial { margin-left: 40px; }
  .tbi-header.is-sticky .esg-hdSocial { margin-left: 32px; }
}
/* 主選單六項字比主站長:放不下社群時先收社群(頁尾、手機選單裡還有),再窄收主選單(漢堡選單) */
@media screen and (max-width: 1599px) { .tbi .esg-hdSocial { display: none; } }
@media screen and (min-width: 821px) and (max-width: 1199px) {
  .esg-header .tbi-hdNav { display: none; }
  .esg-header .tbi-hdUtil--search, .esg-header .tbi-hdLang { display: none; }
  .esg-header .tbi-burger.tbi-spOnly { display: block !important; margin-left: 16px; }
  .esg .tbi-menu.tbi-spOnly { display: block !important; }
  .esg-header .tbi-hd { justify-content: space-between; }
}
/* 手機選單底部:社群(主站同款圓鈕,藍框)+ 語系(主站那排字) */
.esg .tbi-menu__foot { align-items: center; }
.tbi .esg-menuSocial { display: flex; gap: 8px; margin-top: 0; }   /* 同上,蓋掉頁尾社群的上距 */
.esg-menuSocial .tbi-social__link { width: 40px; height: 40px; border-color: var(--tbi-line-press); color: var(--tbi-blue); }
.esg-menuSocial .tbi-social__link svg { width: 18px; height: 18px; }

/* ---------- 2. 首屏:影片(主站首屏的輪播換成影片)---------- */
.esg-kv__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.esg-kv .tbi-kv__pv::after { background: linear-gradient(180deg, rgba(8, 12, 20, .4) 0%, rgba(8, 12, 20, .12) 30%, rgba(8, 12, 20, .25) 58%, rgba(8, 12, 20, .6) 100%); }
.esg-kv__label { color: #fff; margin-bottom: 1.25rem; }
.esg-kv__label .tbi-label__text { padding-inline: .75rem; }
/* 左下:影片進度線(同主站分頁線的位置與線寬)= 暫停/播放鈕 */
.esg-kv__play { position: absolute; left: var(--hd-gap); bottom: 30px; display: flex; align-items: center; gap: 14px; height: 36px; color: #fff; opacity: 0; transition: opacity .8s .6s; }   /* 中線維持在離底 48px(= 右下圓鈕中心) */
/* 11-03 Eric:暫停/播放鈕加圓圈外框 → 36px 圓、白 35% 框(同主站深底圓鈕),滑過框變白 */
.esg-kv__ring { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; transition: border-color .4s var(--tbi-ease-out); }
.esg-kv__play:hover .esg-kv__ring, .esg-kv__play:focus-visible .esg-kv__ring { border-color: #fff; }
.esg-kv__icon.-play { margin-left: 2px; }   /* 三角形看起來偏左,往右推一點才像置中 */
.tbi-kv__contents.-show .esg-kv__play { opacity: 1; }
.esg-kv__bar { position: relative; width: 160px; height: 2px; background-color: rgba(255, 255, 255, .4); }
.esg-kv__bar::after { content: ""; position: absolute; inset: 0; background-color: #fff; transform: scaleX(var(--p, 0)); transform-origin: left center; }
.esg-kv__play .esg-kv__icon { width: 14px; height: 14px; }
.esg-kv__icon.-play { display: none; }
.esg-kv__play.is-paused .esg-kv__icon.-pause { display: none; }
.esg-kv__play.is-paused .esg-kv__icon.-play { display: block; }
.esg-kv__play:hover .esg-kv__bar { background-color: rgba(255, 255, 255, .6); }
@media screen and (max-width: 820.98px) {
  .esg-kv__play { bottom: 56px; }
  .esg-kv__bar { width: 120px; }
  .esg-kv__label { margin-bottom: .375rem; }
}

/* ---------- 3. 區塊標題:小標 (EN) + 中文標題 + 細線(= 主站產品段);右側放「查看全部」或左右鈕 ---------- */
.esg-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 2rem; }
.tbi .esg-head__label { color: var(--tbi-blue); }   /* 11-03 試過綠色,Eric:有點奇怪 → 維持藍 */
.esg-head__sub { font-weight: 500; line-height: 1.4; letter-spacing: .05em; color: var(--tbi-dark); }
.esg-head__more { justify-self: end; }
.esg-head__line { grid-column: 1 / -1; display: block; height: 1px; background-color: var(--tbi-line); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--rv-ease); }
.esg-head.-show .esg-head__line { transform: none; transition: transform 1.2s var(--rv-ease) .2s; }
@media screen and (min-width: 821px) {
  .esg-head__sub { margin-top: .75rem; font-size: 1.75rem; }
  .esg-head__line { margin-top: 1.5rem; }
}
@media screen and (max-width: 820.98px) {
  .esg-head__sub { margin-top: .25rem; font-size: .75rem; }
  .esg-head__line { margin-top: .5rem; }
}

/* ---------- 4. 最新消息:圖+日期+標題,四則一排(不分類、不放簡述)---------- */
.esg-news { position: relative; padding: var(--esg-sec) var(--esg-pad); background-color: #fff; color: var(--tbi-dark); }
.tbi .esg-news__more { margin: 0; }
.esg-newsGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.esg-ncard { position: relative; }
.esg-ncard__link { position: absolute; inset: 0; z-index: 2; border-radius: 8px; }
.esg-ncard__img { position: relative; aspect-ratio: 4 / 3; }
.esg-ncard__img img { transition: transform .6s var(--rv-ease), scale .8s var(--tbi-ease-out); mix-blend-mode: multiply; }
/* 11-03 Eric:白底的消息圖(產品去背照、獎項圖卡)跟白色區塊黏在一起看不到邊 → 圖下面墊淺藍灰底、圖用色彩相乘:
   白底變成淺底、照片幾乎不變(只暗約 5%)。底色鋪在跟著揭開的那層(.tbi-rv),進場時跟圖一起出現,不會先冒出一塊灰 */
.esg-ncard__img .tbi-rv { background-color: var(--esg-bg); }
.esg-ncard:hover .esg-ncard__img img { scale: 1.04; }
.esg-ncard__date { font-family: var(--ff-en); color: var(--tbi-sub); line-height: 1.5; }
.esg-ncard__title { font-size: var(--fs-read); font-weight: 500; line-height: 1.75; letter-spacing: .05em; transition: color .6s var(--tbi-ease-out); }
.esg-ncard:hover .esg-ncard__title { color: var(--tbi-blue); }
.esg-ncard:nth-child(2) { --rvd: .1s; }
.esg-ncard:nth-child(3) { --rvd: .2s; }
.esg-ncard:nth-child(4) { --rvd: .3s; }
.esg-ncard:has(.esg-ncard__link:focus-visible) .esg-ncard__title { color: var(--tbi-blue); }
@media screen and (min-width: 821px) {
  .esg-newsGrid { column-gap: 2rem; margin-top: 2.5rem; }
  .esg-ncard__date { margin-top: 1.25rem; font-size: 1rem; }
  .esg-ncard__title { margin-top: .375rem; }
}
@media screen and (max-width: 820.98px) {   /* 手機:一則一列,圖左字右 */
  .esg-newsGrid { grid-template-columns: minmax(0, 1fr); row-gap: .75rem; margin-top: 1rem; }
  .esg-ncard { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: .5rem; align-items: start; }   /* 第二列吃掉多出來的高度 → 列被拉高時標題仍緊接在日期下面(11-03) */
  .esg-ncard__img { grid-row: 1 / 3; }
  .esg-ncard__date { font-size: max(14px, .4375rem); }
  .esg-ncard__title { margin-top: .125rem; line-height: 1.6; }
  /* 11-03 Eric:手機消息每列看起來一樣高、四張照片均分 → 每列都等於最高的那列(標題最長那則),
     照片間距固定;日期上緣仍扣掉半格行高,跟照片上緣對齊 */
  .esg-ncard__date { margin-top: calc((1em - 1lh) / 2); }
  .esg-newsGrid { grid-auto-rows: 1fr; row-gap: 1rem; }
  .esg-news .esg-head { grid-template-columns: minmax(0, 1fr); }
  .esg-news .esg-head__more { grid-row: 3; justify-self: start; margin-top: 1rem; }
  .esg-news .esg-head__line { grid-row: 2; }
}

/* ---------- 5. 永續亮點:同一版型卡片 3–12 張(今年 6 張),不分 E/S/G ----------
   卡片四個元素:第一排「圖示+主題標籤 … 箭頭」、大數字(由 0 跑上去,esg.js)、說明;整張可點。
   11-03 Eric:「字卡可能會被說太大了,整個區塊有可能塞進一屏嘛」→ 卡片內的尺寸改用 --hl-u(= 1rem,但螢幕扁時跟著高度縮,上限 2.1vh),
   標題到最後一排卡片在 1440×790、1536×740 扣掉頁首後一屏看得完;說明文字照樣保底 16px。
   右上背景 = 報告書封面圖(風格表「延伸這張圖」):左邊 S 曲線淡出(同主站公司介紹照片)、下緣淡進底色,卡片壓在它前面 */
.esg-hl { --hl-u: min(1rem, 2.1vh); position: relative; padding: var(--esg-sec) var(--esg-pad); background-color: var(--esg-bg); color: var(--tbi-dark); overflow: hidden; }
.esg-hl > :not(.esg-hl__photo) { position: relative; z-index: 1; }
.esg-hl__photo { position: absolute; top: 0; right: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 4.8%, rgba(0,0,0,.1) 9.6%, rgba(0,0,0,.22) 14.4%, rgba(0,0,0,.35) 19.2%, rgba(0,0,0,.5) 24%, rgba(0,0,0,.65) 28.8%, rgba(0,0,0,.78) 33.6%, rgba(0,0,0,.9) 38.4%, rgba(0,0,0,.97) 43.2%, #000 48%), linear-gradient(to bottom, #000 45%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 4.8%, rgba(0,0,0,.1) 9.6%, rgba(0,0,0,.22) 14.4%, rgba(0,0,0,.35) 19.2%, rgba(0,0,0,.5) 24%, rgba(0,0,0,.65) 28.8%, rgba(0,0,0,.78) 33.6%, rgba(0,0,0,.9) 38.4%, rgba(0,0,0,.97) 43.2%, #000 48%), linear-gradient(to bottom, #000 45%, rgba(0,0,0,0) 100%);
  mask-composite: intersect; }
.esg-hl__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.esg-hlGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 11-03 Eric:平常白卡不加灰框;滑過整張藍底白字(箭頭圓鈕反過來 = 白底藍箭頭,同主站深底按鈕滑過);說明字用白 72%(深底次要字) */
.esg-hcard { position: relative; display: flex; flex-direction: column; border-radius: 8px; background-color: #fff;
  transition: background-color .5s var(--tbi-ease-out), color .5s var(--tbi-ease-out); }
.esg-hcard__link { position: absolute; inset: 0; z-index: 2; border-radius: 8px; }
.esg-hcard__link:focus-visible { outline: 2px solid var(--tbi-blue); outline-offset: 3px; }
.esg-hcard :is(.esg-hcard__icon, .esg-hcard__tag, .esg-hcard__desc) { transition: color .5s var(--tbi-ease-out); }
/* 滑過:藍→綠斜向漸層。漸層不能直接做淡入,所以鋪在 ::before 上、用透明度淡入(isolation 讓它排在卡片內容後面、白底前面) */
.esg-hcard, .esg-ccard { isolation: isolate; }
.esg-hcard::before, .esg-ccard::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--esg-hover); opacity: 0; transition: opacity .5s var(--tbi-ease-out); }
.esg-hcard:is(:hover, :has(.esg-hcard__link:focus-visible))::before, .esg-ccard:is(:hover, :has(.esg-ccard__link:focus-visible))::before { opacity: 1; }
.esg-hcard:is(:hover, :has(.esg-hcard__link:focus-visible)) { color: #fff; }
.esg-hcard:is(:hover, :has(.esg-hcard__link:focus-visible)) :is(.esg-hcard__icon, .esg-hcard__tag) { color: #fff; }
.esg-hcard:is(:hover, :has(.esg-hcard__link:focus-visible)) .esg-hcard__desc { color: rgba(255, 255, 255, .72); }
.esg-hcard__top { display: flex; align-items: center; }
.esg-hcard__arrow { margin-left: auto; }
/* 圖示 = Flaticon 的 SVG 當遮罩、底色用文字色(平常藍、滑過白)。
   遮罩圖的網址寫在 HTML 的 style 上(寫在這支 CSS 或 CSS 變數裡,相對路徑會從 assets/css/ 算起而找不到檔)*/
.esg-hcard__icon { display: block; flex: none; color: var(--tbi-blue); background-color: currentColor;   /* 11-03 試過綠色圖示,Eric:綠色不好看 → 回藍 */
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.esg-hcard__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 .5s var(--tbi-ease-out), color .5s var(--tbi-ease-out), border-color .5s var(--tbi-ease-out); }
.esg-hcard:is(:hover, :has(.esg-hcard__link:focus-visible)) .esg-hcard__arrow { border-color: #fff; background-color: #fff; color: var(--tbi-blue); }
.esg-hcard__num { display: flex; align-items: baseline; flex-wrap: wrap; }
.esg-hcard__val { font-family: var(--ff-en); font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.esg-hcard__unit { font-weight: 500; letter-spacing: .05em; }
.esg-hcard__tag { min-width: 0; color: var(--tbi-blue); font-size: var(--fs-read); font-weight: 500; line-height: 1.5; letter-spacing: .05em; }   /* 需求說明:長文字要正常換行、不截斷不溢出 → 不鎖一行 */   /* 跟圖示同一排,不再加膠囊框(右邊已有可按的圓框箭頭,一排一個框就夠) */
.esg-hcard__desc { color: var(--tbi-sub); font-size: var(--fs-read); line-height: 1.75; letter-spacing: .05em; }
@media screen and (min-width: 821px) {
  .esg-hl__photo { left: 36%; height: calc(var(--esg-sec) + 12rem); }   /* 蓋到標題右側,下緣淡進第一排卡片上方 */
  .esg-hlGrid { gap: var(--hl-u); margin-top: 2.5rem; }
  .esg-hcard { padding: calc(var(--hl-u) * 1.5); }
  .esg-hcard .esg-hcard__icon { width: calc(var(--hl-u) * 2.25); height: calc(var(--hl-u) * 2.25); }
  .esg-hcard__tag { margin-left: calc(var(--hl-u) * .625); }
  .esg-hcard__arrow { width: calc(var(--hl-u) * 2.5); height: calc(var(--hl-u) * 2.5); }
  .esg-hcard__arrow .tbi-ico { width: calc(var(--hl-u) * 1.125); height: calc(var(--hl-u) * 1.125); }
  .esg-hcard__num { margin-top: calc(var(--hl-u) * 1.25); column-gap: calc(var(--hl-u) * .375); }
  .esg-hcard__val { font-size: calc(var(--hl-u) * 3); }
  .esg-hcard__unit { font-size: max(16px, calc(var(--hl-u) * 1.125)); }
  .esg-hcard__desc { margin-top: calc(var(--hl-u) * .375); }
}
@media screen and (max-width: 820.98px) {
  .esg-hl__photo { left: 0; height: 9rem; }
  .esg-hl .esg-head { margin-top: 4.5rem; }   /* 手機:標題放到封面圖淡出的下半段,不壓在地球上(11-03) */
  .esg-hlGrid { grid-template-columns: minmax(0, 1fr); gap: .375rem; margin-top: 1rem; }
  .esg-hcard { padding: .75rem; }
  .esg-hcard .esg-hcard__icon { width: 1rem; height: 1rem; }
  .esg-hcard__arrow { width: 40px; height: 40px; }
  .esg-hcard__arrow .tbi-ico { width: 18px; height: 18px; }   /* 11-03 Eric:手機箭頭太大(全站預設 1.125rem 在手機 = 36px) */
  .esg-hcard__num { margin-top: .5rem; column-gap: .125rem; }
  .esg-hcard__val { font-size: 1.5rem; }
  .esg-hcard__unit { font-size: max(16px, .5rem); }
  .esg-hcard__tag { margin-left: .25rem; }
  .esg-hcard__desc { margin-top: .125rem; }
}

/* ---------- 6. 榮耀:證書/獎座照片+獲認證的標題,橫向一排可滑(右上左右鈕)---------- */
.esg-honor { position: relative; padding: var(--esg-sec) 0; background-color: #fff; color: var(--tbi-dark); }
.esg-honor .esg-head { padding-inline: var(--esg-pad); }
.esg-ctrl .tbi-mask__block { display: flex; gap: .5rem; }   /* 進場動畫會把兩顆鈕包進 .tbi-mask__block,並排要排在這一層(同主站 .tbi-tabs) */
/* 控制鈕:淡灰框、深色箭頭,不用實心藍;到頭那顆變淡 */
.esg-ctrl__btn { display: flex; align-items: center; justify-content: center; border: 1px solid var(--tbi-line); border-radius: 999px; color: var(--tbi-dark);
  transition: border-color .4s var(--tbi-ease-out), color .4s var(--tbi-ease-out), opacity .4s; }
.esg-ctrl__btn:hover:not(:disabled) { border-color: var(--tbi-blue); color: var(--tbi-blue); }
.esg-ctrl__btn:disabled { opacity: .3; cursor: default; }
.esg-honor__strip { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--esg-pad); scrollbar-width: none; overscroll-behavior-x: contain; }
.esg-honor__strip::-webkit-scrollbar { display: none; }
.esg-honor__strip:focus-visible { outline: 2px solid var(--tbi-blue); outline-offset: -2px; }
.tbi .esg-honor__track { display: flex; width: max-content; padding-inline: var(--esg-pad); }
.esg-award { flex: none; scroll-snap-align: start; }
.esg-award__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; border-radius: 8px; background-color: var(--esg-bg); }
.esg-award__img img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; mix-blend-mode: multiply; }   /* 獎座照片的白底跟底色相乘後消失;證書的白紙變成很淡的底色 */
.esg-award__title { font-size: var(--fs-read); font-weight: 500; line-height: 1.6; letter-spacing: .05em; }
@media screen and (min-width: 821px) {
  .esg-ctrl__btn { width: 2.75rem; height: 2.75rem; }
  .esg-ctrl__btn .tbi-ico { width: 1.125rem; height: 1.125rem; }
  .esg-honor__strip { margin-top: 2.5rem; }
  .tbi .esg-honor__track { gap: 1rem; }
  .esg-award { width: 15rem; }
  .esg-award__img { padding: 1.5rem; }
  .esg-award__title { margin-top: 1rem; }
}
@media screen and (max-width: 820.98px) {
  .esg-ctrl__btn { width: 44px; height: 44px; }
  .esg-ctrl__btn .tbi-ico { width: 18px; height: 18px; }   /* 同上:手機箭頭太大 */
  .esg-honor__strip { margin-top: 1rem; }
  .tbi .esg-honor__track { gap: .375rem; }
  .esg-award { width: 6.5rem; }
  .esg-award__img { padding: .5rem; }
  .esg-award__title { margin-top: .375rem; }
}

/* ---------- 7. 與我聯繫/利害關係人/互動遊戲/影音媒體:四張卡,上面站著商標精靈 ----------
   精靈 = 標誌的四個形狀加上眼睛(客戶小精靈 .ai);站在卡片上緣,後面一條點點線把四隻串起來(客戶 2027 月曆的點點路徑)。
   進畫面時依序跳出來、會眨眼、眼睛跟著滑鼠(esg.js);滑過卡片時那隻跳一下。 */
.esg-connect { position: relative; padding: var(--esg-sec) var(--esg-pad); background-color: var(--esg-bg); color: var(--tbi-dark); }
.esg-connectGrid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.esg-connect__dots { position: absolute; left: 0; right: 0; height: 4px; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 109, 184, .45) 1.6px, transparent 2px); background-size: 14px 4px; background-repeat: repeat-x;
  clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--rv-ease); }
.esg-connectGrid.is-in .esg-connect__dots { clip-path: inset(0); transition: clip-path 1.6s var(--rv-ease) .1s; }
.esg-ccard { position: relative; display: flex; flex-direction: column; border-radius: 8px; background-color: #fff;
  transition: background-color .5s var(--tbi-ease-out), color .5s var(--tbi-ease-out); }
/* 11-03 Eric:滑過同永續亮點卡片 = 整張藍底白字、箭頭白底藍箭頭、說明白 72%(精靈站在卡片上緣外面,不受藍底影響) */
.esg-ccard :is(.esg-ccard__en, .esg-ccard__desc) { transition: color .5s var(--tbi-ease-out); }
.esg-ccard:is(:hover, :has(.esg-ccard__link:focus-visible)) { color: #fff; }   /* 漸層底在 ::before(見永續亮點卡片那段) */
.esg-ccard:is(:hover, :has(.esg-ccard__link:focus-visible)) .esg-ccard__en { color: #fff; }
.esg-ccard:is(:hover, :has(.esg-ccard__link:focus-visible)) .esg-ccard__desc { color: rgba(255, 255, 255, .72); }
.esg-ccard__link { position: absolute; inset: 0; z-index: 3; border-radius: 8px; }
.esg-ccard__link:focus-visible { outline: 2px solid var(--tbi-blue); outline-offset: 3px; }
/* 11-03 Eric:精靈出現時要從卡片後面跑出來 → 精靈框只切掉下緣(= 卡片上緣那條線,往卡片裡多 1px 免得露縫),
   平常整隻往下躲在線下(看不到),進場往上冒出來、衝過頭一點再落回;上方與左右不切,跳一下時不會被切到 */
.esg-ccard__spirit { position: absolute; bottom: 100%; z-index: 1; margin-bottom: -1px; pointer-events: none; clip-path: inset(-200% -100% 0 -100%); }
.esg-spirit { display: block; overflow: visible; }
.esg-spirit__body { transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(105%);
  transition: transform .45s cubic-bezier(.55, 0, .7, .2); }
.esg-connectGrid.is-in .esg-spirit__body { transform: none; transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) var(--sd, 0s); }
.esg-ccard:nth-of-type(2) { --sd: .12s; }
.esg-ccard:nth-of-type(3) { --sd: .24s; }
.esg-ccard:nth-of-type(4) { --sd: .36s; }
.esg-spirit svg, .esg-spirit { width: 100%; height: auto; }
/* 滑過卡片:精靈跳一下(落地稍微壓扁)。11-03 試過「電玩感」(一格一格踏步、隨機跳、張望、大豆子)→ Eric:不好看,退回這版 */
.esg-ccard__spirit .esg-spirit { transform-origin: 50% 100%; }
.esg-ccard__spirit .esg-spirit--circle { transform-origin: 50% 50%; }   /* 圓會滾:繞自己的圓心轉(走法在 esg.js 第 4 段) */
.esg-ccard:hover .esg-ccard__spirit .esg-spirit, .esg-ccard:has(.esg-ccard__link:focus-visible) .esg-ccard__spirit .esg-spirit { animation: esg-hop .7s cubic-bezier(.3, 0, .3, 1); }
@keyframes esg-hop {
  0% { transform: none; }
  18% { transform: scale(1.06, .9); }
  45% { transform: translateY(-22%) scale(.96, 1.06); }
  75% { transform: scale(1.05, .93); }
  100% { transform: none; }
}
.esg-spirit__eye { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .08s; }
.esg-spirit.is-blink .esg-spirit__eye { transform: scaleY(.12); }
.esg-ccard__en { font-family: var(--ff-en); font-weight: 700; color: var(--tbi-blue); text-transform: uppercase; line-height: 1; }
.esg-ccard__zh { font-weight: 500; line-height: 1.4; letter-spacing: .05em; }
.esg-ccard__desc { color: var(--tbi-sub); font-size: var(--fs-read); line-height: 1.75; letter-spacing: .05em; }
.esg-ccard__arrow { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid var(--tbi-blue); border-radius: 999px; color: var(--tbi-blue);
  transition: background-color .5s var(--tbi-ease-out), color .5s var(--tbi-ease-out), border-color .5s var(--tbi-ease-out); }
.esg-ccard:is(:hover, :has(.esg-ccard__link:focus-visible)) .esg-ccard__arrow { border-color: #fff; background-color: #fff; color: var(--tbi-blue); }
/* 精靈大小:1 個標誌單位 = .1rem(J 高 70 單位 = 7rem,其他三隻約 3rem);左緣對齊卡片內距 */
.esg-ccard[data-spirit="j"] .esg-ccard__spirit { width: 2.6rem; }
.esg-ccard[data-spirit="square"] .esg-ccard__spirit { width: 2.6rem; }
.esg-ccard[data-spirit="d"] .esg-ccard__spirit { width: 2.33rem; }
.esg-ccard[data-spirit="circle"] .esg-ccard__spirit { width: 3.09rem; }
@media screen and (min-width: 821px) {
  .esg-connectGrid { gap: 1rem; margin-top: 9.5rem; }
  .esg-connect__dots { top: -1.6rem; }
  .esg-ccard { min-height: 15rem; padding: 2rem 2rem 2rem; }
  .esg-ccard__spirit { left: 2rem; }
  .esg-ccard__zh { margin-top: .75rem; font-size: 1.75rem; }
  .esg-ccard__en { font-size: 1rem; }
  .esg-ccard__desc { margin-top: .5rem; padding-right: 3.5rem; }
  .esg-ccard__arrow { right: 2rem; bottom: 2rem; width: 3rem; height: 3rem; }
  .esg-ccard__arrow .tbi-ico { width: 1.25rem; height: 1.25rem; }
}
@media screen and (max-width: 820.98px) {
  .esg-connectGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.25rem .375rem; margin-top: 3.5rem; }
  .esg-connect__dots { display: none; }
  .esg-ccard { min-height: 6rem; padding: .625rem .625rem 1.75rem; }
  .esg-ccard__spirit { left: .625rem; zoom: .5; }
  .esg-ccard__en { font-size: max(14px, .4375rem); }   /* 同區塊小標 */
  .esg-ccard__zh { margin-top: .25rem; font-size: .625rem; }
  .esg-ccard__desc { margin-top: .125rem; font-size: max(14px, .4375rem); }
  .esg-ccard__arrow { right: .625rem; bottom: .625rem; width: 32px; height: 32px; }
  .esg-ccard__arrow .tbi-ico { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .esg-spirit__body, .esg-connectGrid.is-in .esg-spirit__body { transform: none; opacity: 1; transition: none; }
  .esg-connect__dots { clip-path: none; }
  .esg-ccard:hover .esg-ccard__spirit .esg-spirit { animation: none; }
}

/* ---------- 8. 頁尾:主站頁尾;選單換成 ESG 六欄(子項目字長,窄欄自動折行)---------- */
@media screen and (min-width: 821px) { .esg .tbi-footer .tbi-ftNav { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.esg .tbi-ftLang { flex: none; white-space: nowrap; }   /* 手機版權那排:語系不被擠成一字一行(11-03) */
@media screen and (max-width: 820.98px) {   /* 11-03 Eric:手機語系自己一段、全部靠左 → 語系一排在上,隱私權政策、版權在下 */
  .esg .tbi-footer .tbi-footer__bottom { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .esg .tbi-ftLang { order: -1; }
}   /* 只限桌機(11-03 手機被擠成六欄),手機照主站兩欄 */