@charset "utf-8";
@import url("reset.css");
@import url("fontawesome_all.css");
@import url("google_fonts_local.css");
@import url("aos.css");

/* ========================================================================
   基礎設定 / 無障礙 / 全域
   ======================================================================== */

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-size: 1rem;
  font-family: "Noto Sans TC", "文泉驛正黑", "Microsoft JhengHei", sans-serif;
  color: #333;
  background: #fff;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* 編輯器內容裡的自架影片（<video>）沒有這條的話會用原始寬度撐開，
   容器比較窄時就會被 body 的 overflow-x:hidden 裁掉、看起來像完全沒顯示 */
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

#wrapper {
  width: 100%;
}

.sr-only,
.guidebrick {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========== 無障礙 accesskey（Alt+U 上方 / Alt+C 中央 / Alt+Z 下方） ========== */
/* 一般「跳到主要內容」skip link：聚焦時固定於畫面左上角 */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10001;
  width: auto;
  height: auto;
  margin: 0;
  padding: 9px 18px;
  clip: auto;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  background: #632318;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(46, 16, 11, 0.32);
}

/* :::導盲磚：讓每個區塊成為定位基準，聚焦時 ::: 出現在該區塊左上角，
   並以自我錨點捲動到正確區塊（Alt+U→header、Alt+C→main、Alt+Z→footer） */
#header,
#main-content,
#footer {
  position: relative;
}

#main-content,
#footer {
  scroll-margin-top: 24px;
}

/* ========== 響應式隱藏（加 class 即可在指定寬度以下隱藏） ========== */
@media screen and (max-width: 1200px) {
  .hide-max-1200 {
    display: none !important;
  }
}

@media screen and (max-width: 1100px) {
  .hide-max-1100 {
    display: none !important;
  }
}

@media screen and (max-width: 900px) {
  .hide-max-900 {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .hide-max-768 {
    display: none !important;
  }
}

@media screen and (max-width: 560px) {
  .hide-max-560 {
    display: none !important;
  }
}

.guidebrick:focus,
.guidebrick:active {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10001;
  width: auto;
  height: auto;
  margin: 0;
  padding: 6px 14px;
  clip: auto;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  background: #632318;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(46, 16, 11, 0.32);
}

:focus-visible {
  outline: 2px solid #8a6510;
  outline-offset: 2px;
}

/* 頁首是深色酒紅漸層背景，深金色外框在上面對比不足（約 2.2:1），改用頁首本來就在用的淺色 #e2ceb1 */
#header :focus-visible {
  outline-color: #e2ceb1;
}

@media screen and (max-width: 900px) {
  #main-content,
  #footer {
    scroll-margin-top: calc(var(--site-topnav-h, 54px) + var(--site-quickbar-h, 36px) + 8px);
  }
}

.bg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 9998;
}

.bg-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* ========================================================================
   全站共用元件（.site-vtitle / .site-htitle / .btn-more）
   ======================================================================== */
/* ========================================================================
   全站共用元件
   1) .site-vtitle  中英直式標題
   2) .site-htitle  中英橫式標題（英上中下）
   3) .btn-more     更多按鈕（含箭頭）
   4) .text-left / .text-center / .text-right  文字對齊
   5) .w-*  常用欄寬（表格 th/td 可直接套用）
   ======================================================================== */

/* -------- 文字對齊（全站共用） -------- */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

/* -------- 常用欄寬（全站共用） -------- */
.w-60 {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
}

.w-80 {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.w-90 {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

.w-100 {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

.w-120 {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
}

.w-150 {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

.w-180 {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
}

.w-200 {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

.w-10 {
  width: 10%;
}

.w-12 {
  width: 12%;
}

.w-14 {
  width: 14%;
}

.w-16 {
  width: 16%;
}

.w-18 {
  width: 18%;
}

.w-20 {
  width: 20%;
}

.w-22 {
  width: 22%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-auto {
  width: auto;
}

/* ========================================================================
   Header
   ======================================================================== */
/* ========== Header（參考 drepungloseling 內頁版型，配色改為博物館深褐） ========== */

#header {
  position: relative;
  width: 100%;
  background-color: #632318;
  background-image:
    linear-gradient(180deg, #3d150f 0%, #4e1b13 22%, #572013 48%, #632318 72%, #734028 100%);
}

#header .wrap .logo {
  display: block;
  max-width: 220px;
  height: auto;
}

#header ul.site-main-nav {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 2px;
}

#header ul.site-main-nav > li {
  position: relative;
  font-size: 0.9375rem;
  padding: 0 0.25vw;
  color: #fff;
}

#header ul.site-main-nav > li > a {
  display: inline-block;
  padding: 6px 0.6vw;
  color: #e2ceb1;
  text-decoration: none;
  letter-spacing: 0;
  transition: color 0.15s ease;
}

#header ul.site-main-nav > li > a:hover,
#header ul.site-main-nav > li > a:focus-visible {
  color: #fff;
}

#header ul.site-main-nav .sticky-nav-logo-item {
  display: none;
}

#header ul.site-main-nav.on {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  margin: 0;
  padding: 10px max(20px, calc((100vw - 1400px) / 2));
  background: linear-gradient(180deg, #3d150f 0%, #4e1b13 28%, #572013 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;
  gap: 12px 18px;
}

#header ul.site-main-nav.on .sticky-nav-logo-item {
  display: inline-flex;
  align-items: center;
  margin: 0 auto 0 0;
  padding: 0;
}

#header ul.site-main-nav.on .sticky-nav-logo-item a {
  padding: 0;
}

#header ul.site-main-nav.on .sticky-nav-logo-item img {
  height: 45px;
  width: auto;
}

/* ========== 桌面版子選單（參考 drepungloseling） ========== */
#header ul.site-main-nav > li ul {
  display: block;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 12px;
  transform: translateX(-50%) translateY(-8px);
  transform-origin: top center;
  z-index: 99;
  width: 220px;
  padding: 0;
  line-height: 1.5;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.24s ease, visibility 0.24s ease;
}

#header ul.site-main-nav > li ul::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

#header ul.site-main-nav > li:hover > ul,
#header ul.site-main-nav > li:focus-within > ul {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

#header ul.site-main-nav > li ul li {
  position: relative;
  padding: 10px 20px 10px 35px;
  text-align: left;
  border-bottom: 1px solid #ebebeb;
}

#header ul.site-main-nav > li ul li:last-child {
  border: 0;
}

#header ul.site-main-nav > li ul li a {
  position: relative;
  display: block;
  padding: 0 0 0 18px;
  color: #5A5858 !important;
  letter-spacing: 0;
  font-weight: normal;
  text-decoration: none;
  text-align: left;
}

#header ul.site-main-nav > li ul li a::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f105";
  color: #0085D4;
}

#header ul.site-main-nav > li ul li:hover {
  background: #EAF6FC;
}

#header ul.site-main-nav > li ul li a:hover,
#header ul.site-main-nav > li ul li a:focus-visible {
  color: #0085D4 !important;
}

#header ul.site-main-nav.on > li ul {
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  #header ul.site-main-nav > li ul {
    transition: none;
    transform: translateX(-50%);
  }
}

#header .header-inner-mobile-toggle,
#header .wrap #mobileMenu {
  display: none;
}

/* ========== 手機版（與 drepungloseling 內頁一致） ========== */
@media screen and (max-width: 900px) {

  #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9997;
    background: rgba(99, 35, 24, 0.96);
    display: flex;
    flex-direction: column;
  }

  #header ul.site-main-nav,
  #header ul.site-main-nav.on {
    display: none !important;
  }

  #header .header-inner-mobile-toggle,
  #header .wrap #mobileMenu {
    display: flex !important;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.12);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
    z-index: 3;
  }

  #header .wrap #mobileMenu span {
    width: 20px;
    height: 2px;
    margin-top: 5px !important;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.92);
    display: block;
  }

  #header .wrap #mobileMenu span:first-child {
    margin-top: 0 !important;
  }

  #header.on {
    background: rgba(99, 35, 24, 0.96) !important;
  }
}

@media screen and (max-width: 1024px) {

  #header ul.site-main-nav > li {
    font-size: 0.875rem;
  }
}

/* ========================================================================
   Banner
   ======================================================================== */
/* ========== 首頁 Banner：左 90% bxslider 純圖 + 右 10% 控制列 ========== */

:root {
  --home-banner-height: clamp(480px, 78vh, 860px);
}

#home_banner {
  display: block;
  width: 100%;
  height: 100%;
  min-height: var(--home-banner-height);
  overflow: hidden;
  position: relative;
}

#home_banner ul.bxslider {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* bxslider 初始化前：鎖定高度，只顯示第一張，避免多張圖堆疊撐高 */
#home_banner.is-loading .bxslider {
  position: relative;
  overflow: hidden;
  height: var(--home-banner-height);
  min-height: var(--home-banner-height);
  max-height: var(--home-banner-height);
}

#home_banner.is-loading .bxslider > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0;
  float: none !important;
}

#home_banner.is-loading .bxslider > li:not(:first-child) {
  visibility: hidden;
  opacity: 0;
}

#home_banner.is-loading .bxslider > li:first-child {
  position: relative;
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

/* 可縮放的背景層：繼承 li 的 background-image，永遠 cover 鋪滿 */
#home_banner li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: scale(1.12);
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
}

@keyframes home-banner-zoom-in {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

/* 每張啟用時由 JS 在 li 加上 is-zooming，重播 zoom in */
#home_banner li.is-zooming::before {
  animation: home-banner-zoom-in 5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

#home_banner .bx-loading {
  display: none !important;
}

#home_banner .bx-wrapper {
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  height: 100% !important;
  min-height: var(--home-banner-height);
}

#home_banner .bx-viewport {
  height: var(--home-banner-height) !important;
  min-height: var(--home-banner-height) !important;
  background: #222;
}

#home_banner li {
  position: relative;
  width: 100% !important;
  height: var(--home-banner-height) !important;
  min-height: var(--home-banner-height) !important;
  top: 0 !important;
  left: 0 !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

#home_banner .bx-wrapper .bx-controls-direction,
#home_banner .bx-wrapper .bx-pager {
  display: none !important;
}

@media screen and (max-width: 900px) {
  :root {
    --home-banner-height: clamp(360px, 92vw, 620px);
  }

  #home_banner .bx-wrapper,
  #home_banner .bx-viewport,
  #home_banner li {
    height: var(--home-banner-height) !important;
    min-height: var(--home-banner-height) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home_banner .bx-wrapper * {
    transition: none !important;
  }

  #home_banner li::before {
    transform: none !important;
    animation: none !important;
  }
}

/* ========================================================================
   手機側欄（.sidenav）
   ======================================================================== */
/* ========== 手機側欄（參考 drepungloseling） ========== */
.sidenav {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  background: #fff;
  overflow: hidden;
  transition: width 0.2s ease;
  box-shadow: 0 4px 24px rgba(99, 35, 24, 0.12);
}

.sidenav .head {
  position: relative;
  padding: 15px 52px 15px 16px;
  border-top: 3px solid #0085D4;
  border-bottom: 1px solid #E3EEF5;
  background: #fff;
}

.sidenav .head .sidenav-logo-link {
  display: inline-block;
  max-width: calc(100% - 52px);
  vertical-align: middle;
}

.sidenav .closebtn {
  position: absolute;
  top: 18px;
  right: 12px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #5A5858;
  text-decoration: none;
  line-height: 1.5;
  transition: color 0.15s ease;
}

.sidenav .closebtn:hover,
.sidenav .closebtn:focus-visible {
  color: #0085D4;
}

.sidenav .closebtn i {
  position: static;
  pointer-events: none;
}

.sidenav-logo-img {
  max-width: 148px;
  max-height: 46px;
}

.sidenav .menu-top {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* 側欄底部版權區：flex 擠到最下方，不隨清單捲動 */
.sidenav-copyright {
  flex: 0 0 auto;
  padding: 14px 16px 18px;
  background: #3e3a39;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.6875rem;
  line-height: 1.65;
  text-align: center;
  letter-spacing: 0;
  border-top: 3px solid #008cd6;
}

.sidenav-copyright a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}

.sidenav-copyright a:hover,
.sidenav-copyright a:focus-visible {
  color: #fff;
}

.sidenav .menu-bottom {
  flex: 0 0 auto;
  padding: 14px 12px 16px;
  background: #f7f4f0;
  text-align: center;
  color: #777;
  font-size: 0.6875rem;
  line-height: 1.65;
  border-top: 1px solid #e8e0d6;
}

.sidenav .menu-bottom .copyright a {
  color: #632318;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sidenav .menu-bottom .copyright a:hover,
.sidenav .menu-bottom .copyright a:focus-visible {
  color: #0085D4;
}

#ajax-sidenav > div {
  position: relative;
  width: 100%;
  border-left: 5px solid #0085D4;
  border-bottom: 1px solid #ebebeb;
  padding: 15px 24px 12px 24px;
  line-height: 1.5;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.875rem;
  letter-spacing: 0;
  background: #fff;
  color: #222;
}

#ajax-sidenav > div a {
  color: #5A5858;
  text-decoration: none;
}

#ajax-sidenav > div.jq-submenu.nav {
  background: #EAF6FC;
  color: #0085D4;
  cursor: pointer;
  padding: 0;
}

/* ---------- 側欄功能列（登入／語言）——主選單上方雙卡 ----------
   跟「去哪一頁」的清單分開：放在 logo 下方、選單上方，兩顆並排卡片。
   登入用品牌藍實心、語言用線框，層級清楚、不跟主選單搶戲。 */
.sidenav-utility {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px 16px;
  background:
    linear-gradient(180deg, #f3f9fc 0%, #eef6fb 100%);
  border-bottom: 1px solid #d7e8f3;
}

.sidenav-util-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.sidenav-util-btn--account {
  background: #008cd6;
  border: 1px solid #008cd6;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 140, 214, 0.2);
}

.sidenav-util-btn--account:hover,
.sidenav-util-btn--account:focus-visible {
  background: #0077b8;
  border-color: #0077b8;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 140, 214, 0.26);
}

.sidenav-util-btn--lang {
  background: #fff;
  border: 1px solid #c5dce9;
  color: #3e3a39;
  box-shadow: 0 2px 8px rgba(0, 80, 120, 0.05);
}

.sidenav-util-btn--lang:hover,
.sidenav-util-btn--lang:focus-visible {
  border-color: #008cd6;
  color: #008cd6;
  box-shadow: 0 4px 12px rgba(0, 140, 214, 0.12);
}

.sidenav-util-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.8125rem;
  line-height: 1;
}

.sidenav-util-btn--account .sidenav-util-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.sidenav-util-btn--lang .sidenav-util-icon {
  background: #008cd6;
  color: #fff;
}

.sidenav-util-icon--en {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0;
  font-family: inherit;
}

.sidenav-util-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.25;
}

.sidenav-util-label {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
}

.sidenav-util-sub {
  font-size: 0.6875rem;
  letter-spacing: 0;
  opacity: 0.72;
  font-weight: 400;
}

.sidenav-util-btn--account .sidenav-util-sub {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

.sidenav-util-btn--lang .sidenav-util-sub {
  color: #7a8a94;
  opacity: 1;
}

#ajax-sidenav > div.jq-submenu.nav > a {
  display: block;
  padding: 15px 24px 12px 24px;
  color: #0085D4;
  text-decoration: none;
  line-height: 1.5;
}

#ajax-sidenav > div.jq-submenu.nav > a > i {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  width: 1.1em;
  text-align: center;
}

#ajax-sidenav > div.jq-submenu.nav > a:hover,
#ajax-sidenav > div.jq-submenu.nav > a:focus-visible {
  color: #0069A8;
}

/* ========== 手機側欄子選單（參考 drepungloseling） ========== */
#ajax-sidenav > div.jq-submenu:not(.srh):not(.nav) {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

#ajax-sidenav > div.jq-submenu.has-sub > a {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 52px;
  box-sizing: border-box;
}

#ajax-sidenav .jq-submenu-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(99, 35, 24, 0.08);
  background: transparent;
  color: #0085D4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

#ajax-sidenav .jq-submenu-toggle i {
  position: static;
  pointer-events: none;
  transition: transform 0.25s ease;
}

#ajax-sidenav .jq-submenu-toggle:hover,
#ajax-sidenav .jq-submenu-toggle:focus-visible {
  color: #0085D4;
  background: rgba(0, 133, 212, 0.08);
}

#ajax-sidenav > div.jq-submenu.is-open > .jq-submenu-toggle {
  color: #0085D4;
}

#ajax-sidenav > div.jq-submenu.is-open > .jq-submenu-toggle i {
  transform: rotate(180deg);
}

.submenu-nav {
  width: 100%;
  overflow: hidden;
  display: none;
  background-color: #fafafa;
}

.submenu-nav div {
  position: relative;
  font-size: 0.875rem;
  background: #fafafa;
  line-height: 1.5;
  border-left: 5px solid rgba(0, 133, 212, 0.35); /* 第二層較淡左邊線，避免展開時斷層 */
  border-bottom: 1px solid #ebebeb !important;
  padding: 15px 30px 15px 55px !important;
  cursor: pointer;
  box-sizing: border-box;
}

.submenu-nav div::before {
  position: absolute;
  left: 30px;
  top: 45%;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f111";
  font-size: 0.375rem;
  color: rgba(0, 133, 212, 0.3);
}

.submenu-nav div a {
  font-size: 0.875rem;
  color: #222 !important;
  text-decoration: none;
}

.submenu-nav div a:hover,
.submenu-nav div a:focus-visible {
  color: #0085D4 !important;
}

@media screen and (max-width: 900px) {
  :root {
    --site-topnav-h: 54px;
    --site-quickbar-h: 36px;
  }

  #wrapper:has(> #header) {
    padding-top: calc(var(--site-topnav-h) + var(--site-quickbar-h));
  }
}

/* ========================================================================
   Footer
   ======================================================================== */
/* ========================================================================
   footer 下方功能區塊
   左：logo + 聯絡資訊　　右下：copyright
   ======================================================================== */
#footer {
  position: relative;
  background: #2d2220;
  color: #e2ceb1;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0px 24px 28px;
  box-sizing: border-box;
}

/* ========================================================================
   RWD（僅手機版調整）
   ======================================================================== */
@media screen and (max-width: 900px) {
  .footer-inner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 28px;
    padding: 44px 24px 26px;
  }
}

@media screen and (max-width: 480px) {
  .footer-inner {
    padding: 36px 20px 22px;
    gap: 24px;
  }
}

/* ========================================================================
   Loading / Go Top
   ======================================================================== */
/* ==========================================================================
   首頁載入動畫 Page Preloader（半透明展廳風格，僅 index.php）
   ========================================================================== */
html.is-preloading,
html.is-preloading body {
  overflow: hidden !important;
}

.page-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(99, 35, 24, 0.12) 0%, transparent 58%),
    radial-gradient(ellipse at 82% 88%, rgba(166, 136, 91, 0.16) 0%, transparent 54%),
    rgba(247, 243, 236, 0.76);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.65s ease, visibility 0.65s ease;
  overflow: hidden;
}

.page-preloader::before,
.page-preloader::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.page-preloader::before {
  width: min(600px, 92vw);
  height: min(600px, 92vw);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(99, 35, 24, 0.22) 0%, rgba(99, 35, 24, 0.1) 38%, rgba(99, 35, 24, 0.03) 58%, transparent 78%);
  filter: blur(8px);
  animation: pp-ambient-pulse 4.8s ease-in-out infinite;
}

.page-preloader::after {
  width: min(780px, 98vw);
  height: min(780px, 98vw);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(226, 206, 177, 0.24) 0%, rgba(166, 136, 91, 0.12) 34%, rgba(226, 206, 177, 0.04) 56%, transparent 76%);
  filter: blur(16px);
  animation: pp-ambient-pulse-outer 6.2s ease-in-out infinite;
}

.page-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.page-preloader-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
}

.pp-exhibit {
  position: relative;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  animation: pp-exhibit-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.pp-exhibit::before,
.pp-exhibit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.pp-exhibit::before {
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(99, 35, 24, 0.52) 0%, rgba(99, 35, 24, 0.24) 32%, rgba(166, 136, 91, 0.12) 54%, transparent 82%);
  filter: blur(12px);
  animation: pp-halo-pulse 3.6s ease-in-out infinite;
}

.pp-exhibit::after {
  width: 300%;
  height: 300%;
  background: radial-gradient(circle at center, rgba(226, 206, 177, 0.34) 0%, rgba(226, 206, 177, 0.16) 28%, rgba(166, 136, 91, 0.08) 48%, rgba(99, 35, 24, 0.05) 62%, transparent 80%);
  filter: blur(26px);
  animation: pp-halo-pulse-outer 5.4s ease-in-out infinite;
}

.pp-exhibit-frame {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 236px;
  height: 236px;
  padding: 0;
  background:
    radial-gradient(circle at center, rgba(99, 35, 24, 0.54) 0%, rgba(122, 63, 44, 0.38) 32%, rgba(154, 96, 72, 0.24) 56%, rgba(186, 140, 112, 0.12) 76%, rgba(226, 206, 177, 0.03) 90%, rgba(226, 206, 177, 0) 100%);
  border: none;
  border-radius: 50%;
  box-shadow:
    0 0 48px rgba(99, 35, 24, 0.24),
    0 0 88px rgba(226, 206, 177, 0.26),
    0 10px 28px rgba(99, 35, 24, 0.12);
  overflow: visible;
}

.pp-exhibit-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 40%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}

.pp-exhibit-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 0%, transparent 58%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}

.pp-exhibit-track {
  position: absolute;
  inset: 10px;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 50%;
  overflow: visible;
  z-index: 3;
}

.pp-exhibit-track-bar {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  left: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #e2ceb1;
  border-right-color: rgba(226, 206, 177, 0.55);
  border-bottom-color: rgba(226, 206, 177, 0.12);
  border-left-color: rgba(226, 206, 177, 0.06);
  background: none;
  box-shadow: 0 0 12px rgba(226, 206, 177, 0.4);
  animation: pp-ring-spin 1.35s linear infinite;
}

.pp-exhibit-frame img {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  max-width: 168px;
  max-height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

@keyframes pp-exhibit-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pp-gold-sweep {
  0% {
    left: -38%;
  }
  100% {
    left: 100%;
  }
}

@keyframes pp-halo-pulse {
  0% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
  100% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(0.96);
  }
}

@keyframes pp-halo-pulse-outer {
  0% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.94);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.94);
  }
}

@keyframes pp-ambient-pulse {
  0% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(0.98);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(0.98);
  }
}

@keyframes pp-ambient-pulse-outer {
  0% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.07);
  }
  100% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(0.96);
  }
}

@keyframes pp-ring-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 480px) {
  .pp-exhibit-frame {
    width: 200px;
    height: 200px;
  }

  .pp-exhibit-track {
    inset: 8px;
  }

  .pp-exhibit-frame img {
    max-width: 142px;
    max-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-exhibit {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .pp-exhibit::before,
  .pp-exhibit::after,
  .page-preloader::before,
  .page-preloader::after {
    animation: none;
    opacity: 0.75;
  }

  .pp-exhibit-track-bar {
    animation: none;
    border-top-color: #e2ceb1;
    border-right-color: rgba(226, 206, 177, 0.45);
    border-bottom-color: rgba(226, 206, 177, 0.2);
    border-left-color: rgba(226, 206, 177, 0.1);
    transform: none;
    opacity: 0.85;
  }
}

/* ===== 回到頂端浮動按鈕 ===== */
.gotop {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 99;
  display: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.gotop img {
  display: block;
  width: 100%;
  height: 100%;
}

.gotop:hover {
  transform: translateY(-4px);
}

.gotop:focus-visible {
  outline: 2px solid #632318;
  outline-offset: 3px;
}

/* ========================================================================
   首頁 - 最新消息
   ======================================================================== */
/* ========================================================================
   首頁 - 最新消息區塊
   ======================================================================== */

.home-news {
  position: relative;
  background: #fffaf2;
  overflow: hidden;
  padding: 72px 0 80px;
}

@keyframes newsBgFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(10px, -14px, 0) scale(1.03);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.home-news-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 19px 4px;
  border-bottom: 1px solid rgba(99, 35, 24, 0.08);
}

.home-news-item:last-child {
  border-bottom: 0;
}

/* ========================================================================
   RWD
   ======================================================================== */
@media screen and (max-width: 900px) {
  .home-news {
    padding: 36px 0 40px;
  }
}

@media screen and (max-width: 560px) {
  .home-news {
    padding: 28px 0 32px;
  }

  .home-news-item {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 16px 2px;
  }
}

/* ========================================================================
   首頁 - 精選典藏
   ======================================================================== */
/* ========================================================================
   首頁 - 精選典藏區塊
   ======================================================================== */

.home-collection {
  position: relative;
  background: #e2ceb1;
  overflow: hidden;
  padding: 70px 0 84px;
}

@keyframes collectionBgFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-10px, 12px, 0) scale(1.03);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.home-collection-card {
  display: flex;
  flex-direction: column;
  background: #fffaf2;
  padding: 16px;
  box-shadow: 0 10px 26px rgba(40, 30, 20, 0.32);
}

/* -------- 卡片圖片 -------- */
.home-collection-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.home-collection-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-collection-thumb-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.home-collection-thumb-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.home-collection-thumb-media.aos-animate img {
  transform: scale(1);
}

.home-collection-thumb:hover .home-collection-thumb-media img,
.home-collection-card.is-hover .home-collection-thumb-media img,
.home-collection-thumb-media:focus-within img {
  transform: scale(1.08);
  transition-duration: 0.55s;
}

.home-collection-thumb:hover .home-collection-thumb-media:not(.aos-animate) img,
.home-collection-card.is-hover .home-collection-thumb-media:not(.aos-animate) img {
  transform: scale(1.22);
}

@media screen and (max-width: 900px) {
  .home-collection {
    padding: 36px 0 40px;
  }
}

@media screen and (max-width: 600px) {
  .home-collection {
    padding: 28px 0 32px;
  }

  .home-collection-thumb {
    aspect-ratio: 1 / 1;
  }
}

/* ========================================================================
   首頁 - 線上虛擬展覽館
   ======================================================================== */
/* ========================================================================
   首頁 - 線上虛擬展覽館區塊
   ======================================================================== */

.home-virtual {
  position: relative;
  background: #632318;
  overflow: hidden;
  padding: 70px 0 84px;
}

/* -------- 四欄卡片 -------- */
.home-virtual-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items: stretch;
}

.home-virtual-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  box-sizing: border-box;
}

/* 最短高度約 3:4；文字超過時由 .home-virtual-content 撐高同一格 */
.home-virtual-card::before {
  content: "";
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  padding-top: 133.333%;
  pointer-events: none;
  z-index: 0;
}

/* hover 內框 */
.home-virtual-card::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(245, 236, 220, 0.7);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  z-index: 2;
}

.home-virtual-card:hover::after,
.home-virtual-card.is-hover::after {
  opacity: 1;
}

/* ========================================================================
   內頁 - 虛擬展覽館
   ======================================================================== */
.inner-virtual {
  background: #fff;
}

.inner-virtual .container {
  background: #fff;
}

/* ========================================================================
   RWD
   ======================================================================== */
@media screen and (max-width: 980px) {
  .home-virtual-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  /* 兩欄時最短約 5:6 */
  .home-virtual-card::before {
    padding-top: 120%;
  }
}

@media screen and (max-width: 900px) {
  .home-virtual {
    padding: 36px 0 40px;
  }
}

@media screen and (max-width: 600px) {
  .home-virtual {
    padding: 28px 0 32px;
  }

  .home-virtual-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 單欄最短約正方形 */
  .home-virtual-card::before {
    padding-top: 100%;
  }
}

/* 卡片 */
.exh-card {
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 900px) {

  /* 平板以下：圖上文下不重疊，避免文字蓋住圖片 */
  .exh-card {
    display: flex;
    flex-direction: column;
    background: #632318;
  }
}

@keyframes bannerInnerBgPhotoSlide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-8%, 0, 0);
  }
}

@keyframes bannerInnerBgSlide {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bannerInnerEnIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    letter-spacing: 0;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    letter-spacing: 0;
  }
}

@keyframes bannerInnerCnIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bannerInnerLineJoin {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

/* ========================================================================
   內頁版型（全版 / 左選單）
   ======================================================================== */
.container {
  width: 100%;
  background: #fff;
}

/* ========================================================================
   編輯器文宣區塊（.editor）
   ======================================================================== */
.editor {
  position: relative;
  padding: 30px 0;
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: auto;
  color: #2d2220;
}

.editor p {
  margin: 0 0 18px;
}

.editor p:last-child {
  margin-bottom: 0;
}

.editor a {
  color: #632318;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.editor a:hover,
.editor a:focus-visible {
  color: #4a1a10;
}

.editor table {
  width: 100%;
  border-collapse: collapse;
}

.editor table th,
.editor table td {
  font-size: 0.875rem;
  padding: 8px 12px;
  border: 1px solid rgba(99, 35, 24, 0.15);
}

.editor img {
  max-width: 100%;
  height: auto;
}

/* 文宣：雙圖並列 */
.editor-photos {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}

.editor-photos--2 {
  grid-template-columns: repeat(2, 1fr);
}

.editor-photo {
  margin: 0;
  overflow: hidden;
}

.editor-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

.editor-photo--full {
  margin: 36px 0 40px;
}

.editor-photo--full img {
  aspect-ratio: 21 / 9;
}

/* 文宣：◆ 小標 */
.editor-heading {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  font-weight: normal;
  /* font-family: "Noto Serif TC", "Playfair Display", serif; */
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: #312c20;
}

.editor-heading-mark {
  flex: 0 0 auto;
  color: #7c6650;
  font-size: 0.6875rem;
  line-height: 2.6;
}

.editor-heading + p {
  margin-bottom: 32px;
}

/* 文宣：三大面向圓圈 */
.editor-aspects {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  margin: 8px 0 36px;
  padding: 0 10px;
  max-width: 600px;
  margin: 40px auto;
}

.editor-aspects::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: #e2ceb1;
  z-index: 0;
}

.editor-aspect-item {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  max-width: 150px;
  margin: 0 auto;
  padding: 0px 16px 22px;
  border-radius: 50%;
  background: #f7f5ef;
  text-align: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.editor-aspect-num {
  display: block;
  margin-bottom: 10px;
  font-family: "Playfair Display", "Noto Serif TC", serif;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  color: #632318;
}

.editor-aspect-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: #312c20;
}

@media screen and (max-width: 900px) {
  .editor-photos--2 {
    grid-template-columns: 1fr;
  }

  .editor-aspects {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0;
  }

  .editor-aspects::before {
    display: none;
  }

  .editor-aspect-item {
    width: min(220px, 72vw);
    max-width: none;
  }
}

@media screen and (max-width: 560px) {
  .editor {
    padding: 22px 0;
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .editor-heading + p {
    margin-bottom: 26px;
  }

  .editor-photo--full {
    margin: 28px 0 32px;
  }
}

/* ========================================================================
   內頁區塊間距
   ======================================================================== */
.inner-cate-block {
  margin-top: 48px;
  /* 桌機 sticky 主選單約 60~70px，預留間距避免錨點標題被蓋住 */
  scroll-margin-top: 88px;
}

@media screen and (max-width: 900px) {
  .inner-cate-block {
    scroll-margin-top: calc(var(--site-topnav-h, 54px) + var(--site-quickbar-h, 36px) + 20px);
  }
}

.inner-cate-block .editor {
  padding-top: 0;
}

@media screen and (max-width: 900px) {
  .inner-cate-block {
    margin-top: 36px;
  }
}

.photo-wall-item {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f7f5ef;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.photo-wall-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: zoom-in;
}

.photo-wall-item a:focus {
  outline: 2px solid #632318;
  outline-offset: 2px;
}

.photo-wall-item.is-landscape img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.photo-wall-item.is-portrait img,
.photo-wall-item.is-square img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

.photo-wall-item:not(.is-portrait):not(.is-landscape):not(.is-square) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ========================================================================
   內頁大標題（inner-page-heading）
   ======================================================================== */
.inner-page-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
  text-align: center;
}

@media screen and (max-width: 900px) {
  .inner-page-heading {
    margin-bottom: 28px;
  }
}

.inner-cate-block:first-of-type {
  margin-top: 0;
}

@media screen and (max-width: 900px) {

  .inner-cate-block {
    margin-top: 40px;
  }
}

#inner-exhibition-owl.owl-loaded {
  visibility: visible;
}

@keyframes exh-artifact-view-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.collection-cat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.collection-cat-card {
  margin: 0;
  padding: 0;
}

.collection-cat-visual {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 5 / 3;
}

.inner-collection-item-grid {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 1100px) {
  .collection-cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media screen and (max-width: 900px) {

  .collection-cat-grid {
    gap: 18px;
  }
}

@media screen and (max-width: 560px) {
  .collection-cat-grid {
    grid-template-columns: 1fr;
  }
.collection-cat-visual {
    aspect-ratio: 6 / 3;
  }
}

.collection-detail-gallery {
  min-width: 0;
}

.collection-detail-info {
  min-width: 0;
  padding-top: 8px;
}

/* ========================================================================
   典藏詳細頁 - 簡介（編輯器區）
   ======================================================================== */
.collection-detail-intro {
  background: #ffffff;
  padding: 0 0 72px;
  box-sizing: border-box;
}

.collection-detail-intro .editor {
  max-width: 900px;
  padding-top: 0;
}

@media screen and (max-width: 900px) {
  .collection-detail-intro {
    padding-bottom: 56px;
  }
}

/* ========================================================================
   內頁區塊標題（inner-section-heading）— 左選單 / 右欄共用
   ======================================================================== */
.inner-section-heading {
  margin-bottom: 24px;
  text-align: left;
}

.inner-section-heading-text {
  margin: 0 0 14px;
  font-family: "Noto Serif TC", "Playfair Display", serif;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  font-weight: 700;
  letter-spacing: 0;
  color: #312c20;
  line-height: 1.5;
}

.inner-section-heading-line {
  display: flex;
  width: 100%;
  height: 3px;
  overflow: hidden;
}

.inner-section-heading-line-left {
  flex: 0 0 100px;
  width: 100px;
  background: #632318;
}

.inner-section-heading-line-right {
  flex: 1 1 auto;
  background: #e2ceb1;
}

/* ========================================================================
   電子書列表（ebook-grid）
   ======================================================================== */
.ebook-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}

.ebook-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.ebook-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #f7f5ef;
}

.ebook-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.ebook-thumb.aos-animate img {
  transform: scale(1);
}

.ebook-thumb:hover.aos-animate img,
.ebook-card:focus-within .ebook-thumb.aos-animate img {
  transform: scale(1.08);
  transition-duration: 0.55s;
}

.ebook-thumb:hover:not(.aos-animate) img,
.ebook-card:focus-within .ebook-thumb:not(.aos-animate) img {
  transform: scale(1.22);
  transition-duration: 0.55s;
}

@media screen and (max-width: 900px) {
  .ebook-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 18px;
  }
}

@media screen and (max-width: 560px) {
  .ebook-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.download-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.download-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(99, 35, 24, 0.1);
}

.download-item:last-child {
  /* border-bottom: 0; */
}

/* ========================================================================
   分頁（showpage()，program/php_function.php；前台列表頁共用）
   showpage() 輸出的是舊版 table/font 排版，這裡只重設外觀，不動它的 HTML 結構。
   容器一律用 .pagination-wrapper，不要再加 prod-pager／xxx-pager 這類模組專屬 class。
   ======================================================================== */
.pagination-wrapper {
  max-width: 1300px;
  margin: 56px auto 0;
  padding: 0 30px;
  box-sizing: border-box;
}

.pagination-wrapper table {
  width: auto !important;
  height: auto !important;
  border: 0;
  border-collapse: collapse;
}

.pagination-wrapper td {
  padding: 0;
}

.pagination-wrapper form {
  margin: 0;
}

.pagination-wrapper p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: 0.875rem;
  color: #5A5858;
}

.pagination-wrapper a.pagelink,
.pagination-wrapper a.pagelink_no,
.pagination-wrapper a.pagelink_ch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #A1D9F0;
  border-radius: 2px;
  background: #fff;
  color: #5A5858;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pagination-wrapper a.pagelink:hover,
.pagination-wrapper a.pagelink:focus-visible,
.pagination-wrapper a.pagelink_no:hover,
.pagination-wrapper a.pagelink_no:focus-visible {
  border-color: #0085D4;
  background: #0085D4;
  color: #fff;
}

.pagination-wrapper a.pagelink_ch {
  border-color: #0085D4;
  background: #0085D4;
  color: #fff;
}

.pagination-wrapper select.pageselect {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #A1D9F0;
  border-radius: 2px;
  background: #fff;
  color: #5A5858;
  font-size: 0.875rem;
}

@media screen and (max-width: 900px) {
  .download-item {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0;
  }
}

@media screen and (max-width: 900px) {
  .news-list .download-item {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0;
  }
}

/* ========================================================================
   最新消息內頁（news.php）
   ======================================================================== */
.inner-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-detail-article {
  max-width: 900px;
  margin: 0 auto;
}

.collection-search-form {
  margin-top: 36px;
  padding: 25px 48px 44px;
  background: #f7f5ef;
  box-sizing: border-box;
}

@media screen and (max-width: 720px) {
  .collection-search-form {
    padding: 28px 20px 32px;
  }
}

/* ========================================================================
   聯絡我們（contact.php）——靜態切版
   區塊：大標＋slogan → 左表單／右圖＋社群 → 下方 TW／US（背景 contact-bg-1 不重覆）
   ======================================================================== */

.contact-page {
    width: 100%;
    /* 背景鋪整塊聯絡區（標題～TW/US），置底不重覆，避免只塞 offices 被裁切 */
    background: #fff url("../../images/contact-bg-1.png") no-repeat center bottom;
    background-size: 100% auto;
    padding-bottom: 40px;
    box-sizing: border-box;
}

/* ---------- 區塊一：大標靠左 + slogan ---------- */

.contact-head {
    max-width: 1300px;
    margin: 0 auto;
    padding: 46px 30px 36px;
    box-sizing: border-box;
}

.contact-page-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0 0 18px;
    line-height: 1.1;
}

.contact-page-title-en {
    color: #008cd6;
    font-size: clamp(2rem, 3.1vw, 3rem);
    font-weight: 700;
    letter-spacing: 0;
}

.contact-page-title-tw {
    color: #5A5858;
    font-size: clamp(1rem, 1.5vw, 1.4375rem);
    font-weight: 500;
    letter-spacing: 0;
}

.contact-slogan {
    margin: 0;
    color: #5A5858;
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    line-height: 1.85;
    letter-spacing: 0;
}

/* ---------- 區塊二：左表單、右圖＋社群 ---------- */

.contact-mid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px 48px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px 56px;
    box-sizing: border-box;
}

.contact-mid-form {
    flex: 1 1 0;
    min-width: 0;
    max-width: 620px;
}

.contact-form-row {
    margin-bottom: 18px;
}

.contact-form-row--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}

.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.contact-form-label {
    color: #5A5858;
    font-size: 0.9375rem;
    letter-spacing: 0;
}

.contact-req {
    margin-right: 2px;
    color: #008cd6;
}

.contact-form-input,
.contact-form-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cfd8dd;
    border-radius: 8px;
    background: #fff;
    color: #3e3a39;
    font-size: 0.9375rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form-textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.6;
}

.contact-form-input:focus,
.contact-form-textarea:focus {
    outline: none;
    border-color: #008cd6;
    box-shadow: 0 0 0 2px rgba(0, 140, 214, 0.2);
}

.contact-form-row--foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 0;
}

.contact-form-field--captcha {
    flex: 0 1 auto;
    max-width: 280px;
}

.contact-form-captcha {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-form-captcha .contact-form-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 120px;
}

.contact-form-captcha-img {
    flex: 0 0 auto;
    display: block;
    height: 30px;
    width: auto;
    max-width: 140px;
    border-radius: 4px;
    cursor: pointer;
}

.contact-form-submit-wrap {
    flex: 0 0 auto;
    margin-left: auto;
}

.contact-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    padding: 12px 36px;
    border: 0;
    border-radius: 8px;
    background: #008cd6;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.contact-form-submit:hover,
.contact-form-submit:focus-visible {
    background: #0077b8;
}

.contact-form-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 140, 214, 0.35);
}

.contact-mid-aside {
    flex: 0 0 42%;
    max-width: 520px;
}

.contact-aside-photo {
    overflow: hidden;
    background: #f2f6f8;
}

.contact-aside-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.contact-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #06c755;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
  /* 切版時是不能點的 <span>，接後台後改成 <a>，要自己拿掉底線並補 hover */
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.contact-social-btn:hover,
.contact-social-btn:focus-visible {
  background: #05a648;
  transform: translateY(-2px);
}

/* ---------- 區塊三：下方背景不重覆；TW／US 兩欄 ---------- */

.contact-offices {
    width: 100%;
    padding: 64px 0 80px;
    box-sizing: border-box;
}

.contact-offices-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 48px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
}

.contact-office {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.contact-office-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /* 上深下白 */
    background: linear-gradient(180deg, #008cd6 0%, #ffffff 100%);
}

.contact-office-badge span {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.contact-office-body {
    flex: 1 1 auto;
    min-width: 0;
}

.contact-office-body p {
    margin: 0 0 6px;
    color: #3e3a39;
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    line-height: 1.65;
    word-break: break-word;
}

.contact-office-body p:last-child {
    margin-bottom: 0;
}

/* ---------- 聯絡頁 RWD ---------- */

@media screen and (max-width: 1000px) {
    .contact-mid {
        flex-direction: column;
        gap: 36px;
    }

    .contact-mid-form {
        max-width: none;
        width: 100%;
    }

    .contact-mid-aside {
        flex: none;
        width: 100%;
        max-width: 520px;
    }

    .contact-offices-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media screen and (max-width: 900px) {
    .contact-head {
        padding: 32px 20px 28px;
    }

    .contact-mid {
        padding: 0 20px 40px;
    }

    .contact-form-row--2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .contact-form-row--foot {
        flex-wrap: nowrap;
        align-items: flex-end;
    }

    .contact-form-field--captcha {
        max-width: none;
        flex: 1 1 auto;
    }

    .contact-offices {
        padding: 48px 0 60px;
    }

    .contact-offices-inner {
        padding: 0 20px;
    }

    .contact-office-badge {
        width: 120px;
        height: 120px;
    }

    .contact-office-badge span {
        font-size: 2rem;
    }
}

/* ========================================================================
   會員登入（login.php）——靜態切版
   左圖貼螢幕左緣（about-img-2）、右登入表單；背景 contact-bg-2 置底不重覆
   ======================================================================== */

.login-page {
    width: 100%;
    background: #fff url("../../images/contact-bg-2.png") no-repeat center bottom;
    background-size: 100% auto;
    padding-top: 46px;
    padding-bottom: 10vw;
    box-sizing: border-box;
}

.login-layout {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 640px;
}

/* 左圖：貼齊視窗左緣，不要左右內距 */
.login-visual {
    flex: 0 0 46%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #f2f6f8;
    line-height: 0;
}

.login-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 640px;
    object-fit: cover;
    object-position: left center;
}

.login-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    max-width: 520px;
    margin: 0;
    padding: 56px 48px 80px 56px;
    box-sizing: border-box;
}

.login-page-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0 0 18px;
    line-height: 1.1;
}

.login-page-title-en {
    color: #008cd6;
    font-size: clamp(2rem, 3.1vw, 3rem);
    font-weight: 700;
    letter-spacing: 0;
}

.login-page-title-tw {
    color: #5A5858;
    font-size: clamp(1rem, 1.5vw, 1.4375rem);
    font-weight: 500;
    letter-spacing: 0;
}

.login-signup-hint {
    margin: 0 0 36px;
    color: #5A5858;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.login-link {
    color: #008cd6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-link:hover,
.login-link:focus-visible {
    color: #0077b8;
    text-decoration: underline;
}

.login-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.login-form-label {
    color: #5A5858;
    font-size: 0.9375rem;
    letter-spacing: 0;
}

.login-form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cfd8dd;
    border-radius: 8px;
    background: #fff;
    color: #3e3a39;
    font-size: 0.9375rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-form-input:focus {
    outline: none;
    border-color: #008cd6;
    box-shadow: 0 0 0 2px rgba(0, 140, 214, 0.2);
}

.login-form-captcha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.login-form-input--captcha {
    flex: 0 1 160px;
    width: 160px;
}

.login-form-captcha-img {
    flex: 0 0 auto;
    display: block;
    height: 30px;
    width: auto;
    max-width: 140px;
    border-radius: 4px;
    cursor: pointer;
}

.login-forgot {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.9375rem;
}

.login-form-submit-wrap {
    margin-top: 8px;
}

.login-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    padding: 12px 36px;
    border: 0;
    border-radius: 8px;
    background: #008cd6;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.login-form-submit:hover,
.login-form-submit:focus-visible {
    background: #0077b8;
}

.login-form-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 140, 214, 0.35);
}

@media screen and (max-width: 1000px) {
    .login-layout {
        flex-direction: column;
        min-height: 0;
    }

    .login-visual {
        flex: none;
        width: 100%;
        max-width: none;
    }

    .login-visual img {
        min-height: 280px;
        height: auto;
        max-height: 420px;
        object-fit: cover;
    }

    .login-panel {
        max-width: 560px;
        padding: 40px 24px 72px;
    }
}

@media screen and (max-width: 560px) {
    .login-panel {
        padding: 32px 20px 56px;
    }

    .login-form-input--captcha {
        flex: 1 1 120px;
        width: auto;
    }
}


/* ========================================================================
   全站 AOS 捲動動畫微調
   ======================================================================== */
[data-aos="home-zoom-in"] {
  opacity: 1;
  transform: none;
}

[data-aos="home-zoom-in"].aos-animate {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
.home-collection-thumb-media img,
.ebook-thumb img,
#home_banner li::before {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================================================
   Cookie 提示區塊
   ======================================================================== */
.cookie-notice {
  position: fixed;
  display: none; /* 預設隱藏，由 JS 依 cookie 狀態切換為 flex */
  align-items: center;
  gap: 24px;
  max-width: 1100px;
  width: calc(100% - 20px);
  margin: 0 auto;
  bottom: 24px;
  left: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #2d2220;
  font-size: 0.9rem;
  line-height: 1.7;
  padding: 22px 30px;
  text-align: left;
  border: 1px solid rgba(99, 35, 24, 0.18);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(46, 16, 11, 0.28);
  overflow: hidden;
  z-index: 999;
}

.cookie-notice-text {
  flex: 1 1 auto;
}

.cookie-notice-text a {
  color: #632318;
  text-decoration: underline;
}

.cookie-notice button {
  flex-shrink: 0;
  background: #632318;
  color: #fff;
  border: none;
  padding: 10px 30px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.cookie-notice button:hover,
.cookie-notice button:focus-visible {
  background: #4a1a10;
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .cookie-notice {
    flex-direction: column;
    align-items: stretch;
    padding: 20px 22px;
    bottom: 14px;
  }

  .cookie-notice button {
    width: 100%;
  }
}

.no-datas{text-align: center;margin-top:85px;}
/* ==========================================================================
   首頁與內頁共用的頁首元件（選單／登入鈕／語言切換）

   這幾個 class 叫 home-cover-*，但實際上首頁與內頁都在用——
   include/header.php 是一份檔案同時服務兩種版型（$header_is_cover 切換），
   選單 HTML 只有一份，所以樣式也必須是共用的，不能搬進 css_index.css。

   首頁專屬的版型（滿版形象圖、logo 與標語的位置）已經移到 webfile/css/css_index.css。
   ========================================================================== */

.site-main-nav.home-cover-nav {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}

.site-main-nav.home-cover-nav > li {
    margin: 0;
    padding: 0;
    /* 選單項之間的細直線，最後一項不畫 */
    border-right: 1px solid #B9C0C4;
    line-height: 1;
}

.site-main-nav.home-cover-nav > li:last-child {
    border-right: 0;
}

/* 選單文字有三種狀態：
     首頁（選單裡沒有任何一項是目前頁）  四項都是深灰 #5A5858
     內頁的目前頁                        黑色 #000
     內頁的其他項                        淺灰 #9A9A9A
     hover（不分頁面）                    黑色 #000
   「內頁其他項要變淡」靠的是 ul 上的 .has-current，由 header.php 判斷後加上。 */
#header .site-main-nav.home-cover-nav > li > a {
    display: block;
    padding: 0 18px;
    color: #5A5858;
    font-size: clamp(0.9375rem, 1.05vw, 1.125rem);
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

/* 內頁（ul 有 has-current）：非目前頁的項目調淡 */
#header .site-main-nav.home-cover-nav.has-current > li > a {
    color: #9A9A9A;
}

/* 目前所在的那一頁：黑色 */
#header .site-main-nav.home-cover-nav > li > a.is-current {
    color: #000;
}

/* hover 一律變黑。寫在最後面，優先級才蓋得過上面的 .is-current 與 .has-current。 */
#header .site-main-nav.home-cover-nav > li > a:hover,
#header .site-main-nav.home-cover-nav > li > a:focus-visible,
#header .site-main-nav.home-cover-nav.has-current > li > a:hover,
#header .site-main-nav.home-cover-nav.has-current > li > a:focus-visible {
    color: #000;
}

#header .home-cover-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 9px 22px;
    border-radius: 999px;
    background: #0085D4;
    color: #fff;
    font-size: clamp(0.9375rem, 1.05vw, 1.125rem);
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

#header .home-cover-login:hover,
#header .home-cover-login:focus-visible {
    background: #0069A8;
    color: #fff;
}

#header .home-cover-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5A5858;
    font-size: clamp(0.9375rem, 1.05vw, 1.125rem);
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

/* hover 跟主選單一致用黑色（登入鈕是實心按鈕，維持藍底不受影響） */
#header .home-cover-lang:hover,
#header .home-cover-lang:focus-visible {
    color: #000;
}

.home-cover-lang-arrow {
    font-size: 0.7em;
    line-height: 1;
}

/* ---------- 平板／手機 ---------- */

@media screen and (max-width: 900px) {
/* 漢堡按鈕
     *
     * 公版那組樣式是給「深色 header」設計的（半透明白框 + 黑色半透明底），而且三條 bar
     * 的樣式綁在 #header .wrap #mobileMenu span 這個選擇器上——封面式 header 沒有 .wrap
     * 這一層，所以 bar 會被算成 0x0，畫面上只剩一個灰色方塊。它又是 absolute 定位，
     * 會直接蓋在旁邊的 English 上。這裡整組重寫：回到 flex 排列裡跟登入、English 對齊，
     * 配色換成淺底用的深灰。
     *
     * 公版那幾條規則用了 !important，所以這裡也必須同級才蓋得過——不是偷懶。
     */
    #header .header-inner-mobile-toggle {
        display: inline-flex !important;
        position: static;
        right: auto;
        top: auto;
        transform: none;
        width: 26px;
        height: 26px;
        min-width: 0;
        min-height: 0;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 6px;
        box-sizing: border-box;
    }

#header .header-inner-mobile-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        margin: 0 !important;
        border-radius: 2px;
        background: #5A5858;
        transition: background 0.2s ease;
    }

#header .header-inner-mobile-toggle:hover span,
    #header .header-inner-mobile-toggle:focus-visible span {
        background: #0085D4;
    }

/* 手機版主選單、登入、語言切換都收進側邊抽屜（include/hide_menu.php），
       header 只留 logo + 漢堡，保持乾淨 */
    #header .site-main-nav.home-cover-nav {
        display: none;
    }

#header .home-cover-login {
        display: none;
    }

#header .home-cover-lang {
        display: none;
    }
}

/* ==========================================================================
   內頁頁首 + 內頁標題（.site-inner-top）
   ——頁首與「About Us／公司沿革」這種標題區共用同一片橫向漸層背景，
     所以背景鋪在最外層容器上，兩個 include 各自不畫背景。

   尺寸依設計稿（1500px 寬基準）換算：
     頁首高 110px、標題區到 230px、內容容器 1400px、logo 寬 225px
   ========================================================================== */

.site-inner-top {
    position: relative;
    width: 100%;
    /* 設計稿的漸層是左淺藍、右白的橫向漸層，圖只有 6.8KB，直接鋪滿即可 */
    background: #fff url("../../images/header-bg.png") no-repeat left top;
    background-size: 100% 100%;
}

/* ---------- 內頁頁首 ---------- */

#header.site-inner-header {
    position: relative;
    width: 100%;
    background: none;
    box-shadow: none;
    border: 0;
}

.site-inner-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* width:100% 不能省——少了它，容器寬度會由內容決定，
       手機版 tools 只剩一顆漢堡時整個容器會縮小，再被 margin:0 auto 居中，
       logo 與漢堡就會一起擠在畫面中間（2026-09-03 實際踩到）。 */
    width: 100%;
    max-width: 1300px;
    height: 110px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
}

.site-inner-logo {
    display: block;
    flex: none;
    line-height: 1;
}

.site-inner-logo img {
    display: block;
    width: 225px;
    max-width: 100%;
    height: auto;
}

/* 選單、登入、語言、漢堡的共同容器：封面式與內頁都用這一組 */
.site-header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
}

/* ---------- 內頁標題（英文大標 + 中文小標）---------- */

.site-inner-title {
    max-width: 1300px;
    margin: 0 auto;
    /* 上方留白讓大標跟頁首拉開距離，原本是 0、整個貼在選單下面 */
    padding: 46px 30px 52px;
    box-sizing: border-box;
}

.site-inner-title-h1 {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0;
    line-height: 1.1;
}

.site-inner-title-en {
    color: #0085D4;
    font-size: clamp(2rem, 3.1vw, 3rem);
    font-weight: 700;
    letter-spacing: 0;
}

.site-inner-title-tw {
    color: #5A5858;
    font-size: clamp(1rem, 1.5vw, 1.4375rem);
    font-weight: 500;
    letter-spacing: 0;
}

/* ==========================================================================
   頁尾（.site-footer）
   ——深灰底 #3e3a39、左彩色 logo（後台上傳）、右公司名＋聯絡資訊、
     公司名下方一條細分隔線、最底一條藍色細線 #008cd6。
   ========================================================================== */

#footer.site-footer {
    position: relative;
    width: 100%;
    /* 分隔線用負 margin 延伸到視窗右緣，這裡夾住避免多出水平滾動條 */
    overflow-x: hidden;
    background: #3e3a39;
    color: #fff;
}

.site-footer-inner {
    display: flex;
    align-items: center;
    gap: 5vw;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 30px 36px;
    box-sizing: border-box;
}

/* ---------- 左：logo ---------- */
/* 左側區塊寬度給 470px（再加大 150px），logo 在區塊內置中。
   頁尾那張素材是直式構圖、四周留白較多，區塊加寬後才跟右邊資訊區平衡。 */
.site-footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 470px;
    max-width: 470px;
    line-height: 1;
}

.site-footer-logo img {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
    /* 使用後台上傳的頁尾 logo 原色，不加 filter */
}

/* ---------- 右：資訊區 ---------- */
.site-footer-info {
    flex: 1 1 auto;
    min-width: 0;
}

/* 公司名一行：中文大 + 英文小 */
.site-footer-name {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 15px;
}

.site-footer-name-tw {
    color: #fff;
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
    /* font-weight: 600; */
    letter-spacing: 0;
}

.site-footer-name-en {
    color: #D0D0D0;
    font-size: clamp(0.75rem, 0.9vw, 0.9375rem);
    letter-spacing: 0;
}

/* 公司名下方分隔線
 *
 * 這條線要一路延伸到視窗最右邊。它在 .site-footer-inner（max-width 1400、居中）裡面，
 * 所以右邊會留下「(視窗寬 - 容器寬) / 2 ＋ 容器 padding-right」這麼多空白，
 * 用負的 margin-right 把那段補回去。
 *
 * max(0px, ...) 是必要的：視窗比容器窄時 (100vw - 1400px) / 2 會變負數，
 * 不夾住的話負負得正、線反而會縮短。
 *
 * footer 另外加了 overflow-x: hidden——100vw 是含垂直滾動條的寬度，
 * 沒有夾住的話這條線會超出可視範圍幾個 px，讓整頁多一條水平滾動條。
 */
.site-footer-divider {
    width: auto;
    height: 3px;
    background: #fff;
    margin: 0 0 10px;
    margin-right: calc(-1 * max(0px, (100vw - 1400px) / 2) - 30px);
}

.site-footer-addr,
.site-footer-tel {
    margin: 0 0 5px;
    color: #CCCCCC;
    font-size: clamp(0.75rem, 0.9vw, 0.9375rem);
    letter-spacing: 0;
    line-height: 1.7;
}

.site-footer-tel {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    margin-bottom: 0;
}

.site-footer-tel a {
    color: #CCCCCC;
    text-decoration: none;
}

.site-footer-tel a:hover,
.site-footer-tel a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* 頁尾最下方那條藍色細線 */
.site-footer-line {
    width: 100%;
    height: 22px;
    background: #008cd6;
}

/* ---------- 平板／手機 ---------- */

@media screen and (max-width: 900px) {

    .site-inner-header-inner {
        height: 64px;
        max-width: 100%;
        padding: 0 16px;
        gap: 0;
        /* logo 靠左、漢堡靠右，撐滿整個寬度 */
        justify-content: space-between;
    }

    .site-inner-logo img {
        width: 110px;
    }

    .site-header-tools {
        gap: 0;
    }

    .site-inner-title {
        /* 上方 32px 讓大標離開頁首，下方 24px 屬於「大標與它的內容」的組內距離 */
        padding: 32px 20px 24px;
    }

    .site-inner-title-h1 {
        /* 窄畫面英中兩段並排會擠，改成上下堆疊 */
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 28px 20px 24px;
    }

    .site-footer-logo {
        /* 手機版是上下堆疊，不需要桌機那個 320px 的固定寬 */
        flex: none;
        max-width: none;
    }

    .site-footer-info {
        /* column 排列時 flex:1 1 auto 管的是高度，寬度會退回由內容決定
           （量到只有 440px），分隔線就跟著只到一半。這裡明確給滿寬。 */
        width: 100%;
    }

    .site-footer-divider {
        /* 手機版不要拉到螢幕右緣：左右都吃容器的 20px 內距，才不會看起來歪一邊 */
        margin-right: 0;
    }

    .site-footer-logo img {
        width: 180px;
    }
}

/* ==========================================================================
   Cookie 提示（.cookie-notice）
   ========================================================================== */

.cookie-notice {
    position: fixed;
    display: none;
    align-items: center;
    gap: 24px;
    max-width: 1100px;
    width: calc(100% - 20px);
    margin: 0 auto;
    bottom: 24px;
    left: 10px;
    right: 10px;
    background: rgba(62, 58, 57, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #F0F0F0;
    font-size: 0.875rem;
    line-height: 1.7;
    padding: 20px 28px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 999;
}

.cookie-notice-text {
    flex: 1 1 auto;
}

.cookie-notice-text a {
    color: #008cd6;
    text-decoration: underline;
}

.cookie-notice button {
    flex-shrink: 0;
    background: #008cd6;
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.cookie-notice button:hover {
    background: #0070aa;
    transform: translateY(-2px);
}

@media (max-width: 640px) {
    .cookie-notice {
        flex-direction: column;
        align-items: stretch;
        padding: 18px 20px;
        bottom: 14px;
        gap: 14px;
    }

    .cookie-notice button {
        width: 100%;
    }
}


/* ==========================================================================
   讓頁尾貼底
   ——內容不足一個視窗高的頁面（例如內容還沒填的內頁），若不處理，頁尾下方
     會露出一片 body 底色。把 #wrapper 做成縱向 flex、讓 main 吃掉剩餘空間。
   ========================================================================== */

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#wrapper > main {
    flex: 1 0 auto;
}

#wrapper > #footer {
    flex: none;
}

/* ==========================================================================
   公司沿革（about）內容區

   尺寸依設計稿換算——設計稿原始 1500x3173，量測時看到的是縮到 945 寬的版本，
   所以圖上量到的座標都要 ×1.59 才是實際 px：
     展廳照片高 349px、左文字欄寬 875px、右時間軸欄寬 302px
   ========================================================================== */

/* ---------- 展廳照片（兩張並排、貼齊視窗左右緣）---------- */

.about-photos {
    display: flex;
    gap: 10px;
    width: 100%;
    /* 照片佔版面寬的 80%，靠齊畫面最左邊，右側留 20% 讓背景波浪露出來
       （設計稿的波浪就在照片右側）。用 padding 而不是 max-width，
       是為了讓背景圖仍然鋪滿整個寬度。 */
    padding: 0 20% 0 0;
    box-sizing: border-box;
    margin: 0 0 72px;
}

.about-photos-item {
    /* 兩張圖依原圖寬度比例分配（1000 : 1160），不硬切成一半，
       這樣兩邊的裁切量才平均 */
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.about-photos-item:first-child {
    flex-grow: 1000;
}

.about-photos-item:last-child {
    flex-grow: 1160;
}

.about-photos-item img {
    display: block;
    width: 100%;
    /* 照片寬度縮成版面的 80% 之後，高度也要等比例跟著縮（原本滿版是 23.3vw） */
    height: clamp(150px, 18.6vw, 340px);
    object-fit: cover;
    object-position: center center;
}

/* ---------- 主內容：左文字 ＋ 右時間軸 ---------- */

.about-main {
    width: 100%;
    padding-bottom: 90px;
    /* 這裡曾經加過 overflow-x: hidden，用來夾住時間軸 AOS fade-left 的水平位移。
       時間軸改成 fade-up（垂直位移）之後已經不需要，而且那行有副作用：
       CSS 規範規定兩軸其中一個不是 visible 時，visible 那軸會被算成 auto，
       所以 overflow-y 變成 auto——載入時 AOS 元素還停在位移狀態、內容暫時超出，
       這一區就會閃出一條垂直捲軸，動畫跑完才消失。 */
}

.about-main-wrap {
    display: flex;
    align-items: flex-start;
    /* 文字欄固定 875（設計稿量測值）、時間軸固定 302，中間的間距讓 space-between 撐開，
       時間軸右緣就會跟頁首的 English、頁尾資訊區的右緣對齊。
       設計稿上時間軸右緣是 1343、離容器右界還差 92px，那多半是我目視量測的誤差
       （設計稿是縮到 945 寬的圖，座標要 ×1.59 換算），對齊容器邊界視覺上更工整。 */
    justify-content: space-between;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
}

/* 左：文字（內容來自後台編輯器） */

.about-text {
    /* 設計稿的文字欄寬 875 */
    flex: 0 1 875px;
    max-width: 875px;
    min-width: 0;
    color: #595757;
    font-size: clamp(0.875rem, 1.02vw, 1rem);
    line-height: 2;
    letter-spacing: 0;
}

/* 編輯器內容的排版：標題（光芒淬煉 照亮征途）是內容裡的 h2 */
.about-text .editor h2 {
    margin: 0 0 26px;
    color: #4D4D4D;
    font-size: clamp(1.375rem, 2.1vw, 2rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5;
}

.about-text .editor p {
    margin: 0 0 20px;
}

.about-text .editor p:last-child {
    margin-bottom: 0;
}

/* 英文段落跟中文之間拉開一點距離，兩種語言才不會看起來是同一段 */
.about-text-en {
    /* margin-top: 32px; */
}

/* 編輯器裡若插了影片，寬度要跟著容器縮放，不要撐破版面 */
.about-text .editor iframe {
    display: block;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 0 0 20px;
    border: 0;
}

/* 右：時間軸（固定文字，不接後台） */

.about-timeline {
    flex: 0 0 302px;
    max-width: 302px;
    padding-top: 6px;
}

.about-timeline-list {
    position: relative;
    margin: 0;
    padding: 0 0 0 30px;
    list-style: none;
}

/* 貫穿各節點的垂直線：從第一顆圓點畫到最後一顆 */
.about-timeline-list::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 14px;
    left: 5px;
    width: 2px;
    background: #0085D4;
}

.about-timeline-item {
    position: relative;
    margin: 0 0 52px;
}

.about-timeline-item:last-child {
    margin-bottom: 0;
}

.about-timeline-dot {
    position: absolute;
    top: 12px;
    left: -30px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0085D4;
}

.about-timeline-title {
    margin: 0 0 4px;
    color: #0085D4;
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}

.about-timeline-title-sub {
    font-size: 0.82em;
}

.about-timeline-desc {
    margin: 0;
    color: #4D4D4D;
    font-size: clamp(0.875rem, 1.02vw, 1rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
}

/* ---------- 平板／手機 ---------- */

@media screen and (max-width: 900px) {

    .about-photos {
        gap: 6px;
        /* 照片區到內文是次級間距 */
        margin-bottom: 44px;
    }

    .about-photos-item img {
        /* 窄畫面兩張並排會太扁，稍微加高一點 */
        height: clamp(140px, 32vw, 260px);
    }

    .about-main {
        /* 這裡是「公司沿革」與「公司設備」的交界，整頁最大的間距 */
        padding-bottom: 64px;
    }

    .about-main-wrap {
        /* 左右並排改成上下堆疊：時間軸放在文字下面。
           這兩塊同屬「公司沿革」，用次級間距，要比下面的跨區塊間距小 */
        flex-direction: column;
        gap: 36px;
        padding: 0 20px;
    }

    /* 桌機的 flex: 0 1 875px 在直排時會變成「高度 875px」。
       中文欄有中＋英兩段幾乎填滿看不出來，英文欄只有一段就會空一大塊。 */
    .about-text {
        flex: none;
        max-width: none;
        width: 100%;
    }

    .about-timeline {
        flex: none;
        max-width: none;
        width: 100%;
        padding-top: 0;
    }

    .about-timeline-item {
        margin-bottom: 38px;
    }

    .about-text-en {
        margin-top: 26px;
    }

    .about-text-en:first-child {
        margin-top: 0;
    }
}

/* ==========================================================================
   取消內頁主選單的捲動吸頂

   公版在捲動超過門檻時會給 ul.site-main-nav 加上 .on 變成 fixed，那組樣式
   （css_main.css 第 615 行起）是 NCKU 的深褐色漸層——捲動 about 頁時畫面上方
   就會冒出一條深褐色橫條，跟本站的淺色系完全不搭。

   本案的設計稿沒有吸頂選單這個設計，所以直接讓 .on 不生效（JS 照樣加 class，
   只是不再改變外觀）。日後若要做吸頂，把這段改成本站配色的 fixed 樣式即可，
   不必回頭改 JS。
   ========================================================================== */

#header ul.site-main-nav.on {
    position: static;
    padding: 0;
    background: none;
    border-bottom: 0;
    box-shadow: none;
    justify-content: flex-end;
    gap: 0;
}

/* 手機版還有另一組：公版在捲動時把 .on 加在 #header 本身（不是主選單上），
   並用 !important 刷上 NCKU 的深褐色 rgba(99,35,24,.96)，
   捲動時畫面頂端就會冒出一條深褐橫條。
   本站的頁首背景是由外層 .site-inner-top 的漸層負責，header 本身要保持透明，
   所以這裡用同等優先級 + !important 蓋回去（公版那條有 !important，不加蓋不掉）。 */
@media screen and (max-width: 900px) {

    /* 公版捲動時會給 #header 加上 .on 並用 !important 刷上 NCKU 的深褐色。
       兩種版型要分開處理，不能一律清成透明——
       之前寫成 #header.on { background: none !important } 的結果是：
       內頁固定的頁首一捲動就變透明，文字跟下面的內容疊在一起。 */

    /* 首頁：封面版型的頁首浮在滿版形象圖上，捲動時要維持透明 */
    #header.home-cover-header.on {
        background: none !important;
    }

    /* 內頁：頁首固定在畫面最上方，捲動時漢堡選單一直都在。
       底色不能透明——固定之後下方的內容會從它底下捲過去，沒有底色會疊字。
       用跟頁首漸層同色系的淺藍白，加一點陰影跟內容區分開。
       .on 那一組也要一起指定，否則捲動後會被公版的 !important 蓋掉。 */
    #header.site-inner-header,
    #header.site-inner-header.on {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: #EFF7FC !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    }

    /* header 變成 fixed 之後脫離文件流，下面的內容要空出一個 header 的高度
       （手機版量到 64px），否則大標會被蓋住。 */
    .site-inner-top {
        padding-top: 64px;
    }
}

/* ==========================================================================
   about 頁的兩張波浪背景

   about-top-bg.png 與 about-bottom-bg.png 是同一張圖（檔案雜湊相同），
   2000x494。上面那張貼在公司沿革區的頂端、下面那張貼在設備區的底部。
   兩張都不影響版面高度（背景圖不佔位），內容照樣照原本的間距排。
   ========================================================================== */

/* 波浪背景鋪在「照片區」這一層：照片本身只佔版面 80% 寬並置中，
   左右各留 10% 讓背景的波浪露出來——設計稿上照片右側那片波浪就是這樣來的。
   （原本錯放在下方的文字區 .about-main，位置不對） */
.about-photos {
    background: url("../../images/about-top-bg.png") no-repeat center center;
    background-size: 100% auto;
}

.equipment {
    background: url("../../images/about-bottom-bg.png") no-repeat center bottom;
    background-size: 100% auto;
}

/* ==========================================================================
   公司設備（Equipment）

   版面依會議紀錄：「滿版顯示大圖(輪播)，下方排列小圖(不可點擊)」，
   不是 PDF 設計稿的「左大圖 + 右六宮格」。
   ========================================================================== */

.equipment {
    width: 100%;
    /* 下方留白要留夠：波浪背景圖是 2000x494，用 background-size:100% auto 鋪滿寬度後，
       在 1500px 的視窗下高度會是 370px。留白不足的話波浪會往上壓到小圖那幾列。 */
    padding: 0 0 250px;
}

.equipment-head {
    max-width: 1300px;
    margin: 0 auto 40px;
    padding: 0 30px;
    box-sizing: border-box;
    /* 設計稿的標題是靠右對齊 */
    text-align: right;
}

/* 設備大標跟內頁大標共用 .site-inner-title-* 的字級與顏色，
   這裡只處理它跟內頁大標唯一的差別：靠右對齊。
   （.site-inner-title-h1 是 flex 容器，父層的 text-align 對它沒作用，要用 justify-content） */
.equipment-head .site-inner-title-h1 {
    justify-content: flex-end;
}

/* ---------- 上方：滿版大圖輪播 ---------- */

.equipment-slider-wrap {
    max-width: 1300px;
    margin: 0 auto 30px;
    padding: 0 30px;
    box-sizing: border-box;
}

.equipment-slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* owl 的圓點：置中在輪播下方
   ——外觀完全自己寫，不依賴 owl.theme.default.css（那份的選擇器都需要 .owl-theme
   這個 class，我們沒加）。特別是 span 的 display：owl 核心 CSS 沒有設，
   預設的 inline 會讓 width/height 失效，圓點的寬度會變成 0（實測 0x24）。 */
/* 圓點疊在圖片上（視覺上位於 .owl-stage-outer 內的下緣），不佔額外的版面高度。
   owl 產生的 DOM 裡 .owl-dots 是 .owl-stage-outer 的兄弟節點，改不動結構，
   所以用絕對定位壓上去；外層 .owl-carousel 要有 position: relative 當定位基準。 */
.equipment-slider.owl-carousel {
    position: relative;
}

.equipment-slider.owl-carousel .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 2;
    margin-top: 0;
    text-align: center;
    line-height: 1;
}

.equipment-slider.owl-carousel .owl-dots .owl-dot {
    display: inline-block;
    vertical-align: middle;
    padding: 4px 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.equipment-slider.owl-carousel .owl-dots .owl-dot span {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    /* 壓在設備照片上，用白色系才不會被深色機器吃掉；
       加一點陰影，遇到淺色背景的照片也看得見 */
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease;
}

.equipment-slider.owl-carousel .owl-dots .owl-dot.active span,
.equipment-slider.owl-carousel .owl-dots .owl-dot:hover span {
    background: #fff;
}

/* ---------- 下方：小圖一覽（純展示，不可點）---------- */

.equipment-thumbs {
    display: grid;
    /* 一排 6 張，21 台設備排成 4 列 */
    grid-template-columns: repeat(6, 1fr);
    gap: 22px 16px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    list-style: none;
    box-sizing: border-box;
}

.equipment-thumb {
    margin: 0;
}

.equipment-thumb-img {
    overflow: hidden;
    background: #F2F6F8;
}

.equipment-thumb-img img {
    display: block;
    width: 100%;
    height: auto;
}

.equipment-thumb-name {
    margin: 8px 0 0;
    color: #5A5858;
    font-size: clamp(0.75rem, 0.86vw, 0.875rem);
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
}

/* ---------- 平板／手機 ---------- */

@media screen and (max-width: 1200px) {
    .equipment-thumbs {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 900px) {

    .equipment {
        padding-bottom: 70px;
    }

    .equipment-head {
        /* 大標與它下面的輪播是一組，用組內間距 */
        margin-bottom: 20px;
        padding: 0 20px;
        /* 窄畫面靠右會離內容太遠，改成靠左跟其他區塊一致 */
        text-align: left;
    }

    .equipment-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .equipment-slider-wrap {
        margin-bottom: 20px;
        padding: 0 20px;
    }

    /* 21 台設備 = 21 顆圓點，桌機的 10px + 左右各 5px 邊距在 414px 的畫面上
       總寬 420px 放不下，會擠成兩排。手機版縮成 8px + 3px 邊距（每顆 14px、
       總寬 294px）剛好一排排完。 */
    .equipment-slider.owl-carousel .owl-dots .owl-dot span {
        width: 8px;
        height: 8px;
        margin: 0 3px;
    }

    .equipment-thumbs {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 10px;
        padding: 0 20px;
    }
}

@media screen and (max-width: 560px) {
    .equipment-thumbs {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   內頁共用：內容區下方的波浪背景

   除了公司沿革（about）以外的內頁，內容下方都鋪 images/inner-bg.png。
   about 有自己的兩張波浪（照片區與設備區各一張），所以不套這一支。
   ========================================================================== */

.inner-main {
    width: 100%;
    background: url("../../images/inner-bg.png") no-repeat center bottom;
    background-size: 100% auto;
}

/* 產品分類頁（/product）專用背景；列表／內頁不要鋪底圖 */
.inner-main--product {
    background-image: url("../../images/product-bg.png");
    background-position: top;
}

.inner-main--plain {
    background: none;
}

/* 大標移到內容區的頁面（例如展覽消息、產品資訊），頁首這一區就只剩 header 本身，
   不需要 .site-inner-title 那段下方留白，也不鋪漸層背景（漸層只留給 about.php） */
.site-inner-top--header-only {
    padding-bottom: 0;
    background: #fff;
}

/* 大標在白底內容區時，上方要留出跟頁首的距離 */
.exh-list .site-inner-title {
    padding-top: 46px;
}

/* ==========================================================================
   展覽消息列表（最新展覽 / 展覽回顧共用）

   會議紀錄指定的版面：同一份資料兩種呈現——左邊文字列表、右邊卡片，
   卡片滑過去出現遮罩與 MORE（比照舊站的 .mask + more.png）。
   ========================================================================== */

.exh-list {
    width: 100%;
    padding-bottom: 200px;
}

.exh-list-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5%;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
}

/* ---------- 左：文字列表 ---------- */

.exh-text-list {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 8px 0 0;
    list-style: none;
}

.exh-text-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 22px;
    line-height: 1.6;
}

.exh-text-item:last-child {
    margin-bottom: 0;
}

.exh-text-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4D4D4D;
    /* 圓點跟中文字的基線對齊，不要浮在行首上方 */
    transform: translateY(-2px);
}

.exh-text-year {
    flex: none;
    color: #4D4D4D;
    font-size: clamp(0.875rem, 1.02vw, 1rem);
    letter-spacing: 0;
}

/* 年份與標題之間的細直線 */
.exh-text-sep {
    flex: none;
    width: 1px;
    height: 1em;
    background: #C9C9C9;
    transform: translateY(2px);
}

.exh-text-title {
    color: #221815;
    font-size: clamp(1rem, 1.2vw, 1.1875rem);
    line-height: 1.6;
    letter-spacing: 0;
    text-decoration: none;
}

.exh-text-title:hover,
.exh-text-title:focus-visible {
    color: #0085D4;
}

/* ---------- 右：卡片 ---------- */

.exh-card-grid {
    flex: 0 0 42%;
    max-width: 42%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 26px;
    margin: 0;
    /* 右邊／下邊留空間給卡片投影，避免被 AOS transform 的裁切吃掉 */
    padding: 6px 18px 22px 6px;
    list-style: none;
}

.exh-card {
    margin: 0;
    background: #fff;
    box-shadow: 10px 14px 22px rgba(0, 0, 0, 0.35);
}

.exh-card-link {
    position: relative;
    display: block;
    overflow: hidden;
    background: #F2F6F8;
    text-decoration: none;
}

.exh-card-img {
    display: block;
    width: 100%;
    /* 卡片統一比例，圖片再怎麼長寬不一都不會讓格子高低不齊 */
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.4s ease;
}

/* 滑過去：圖片微放大 + 深色遮罩浮出白色 MORE */
.exh-card-mask {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(62, 58, 57, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.exh-card-more {
    display: inline-block;
    color: #fff;
    font-size: clamp(1.25rem, 1.5vw, 1.625rem);
    font-weight: 700;
    letter-spacing: 0;
}

.exh-card-link:hover .exh-card-mask,
.exh-card-link:focus-visible .exh-card-mask {
    opacity: 1;
}

.exh-card-link:hover .exh-card-img,
.exh-card-link:focus-visible .exh-card-img {
    transform: scale(1.06);
}

/* ---------- 沒有資料時 ---------- */

.exh-empty {
    width: 100%;
    margin: 0;
    padding: 40px 0 60px;
    color: #5A5858;
    font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
    line-height: 1.9;
}

.exh-empty a {
    color: #0085D4;
    text-decoration: underline;
}

/* ---------- 平板／手機 ---------- */

@media screen and (max-width: 900px) {

    .exh-list {
        padding-bottom: 120px;
    }

    .exh-list-wrap {
        /* 左右並排改成上下堆疊：文字列表在上、卡片在下 */
        flex-direction: column;
        gap: 32px;
        padding: 0 20px;
    }

    .exh-text-list {
        width: 100%;
        padding-top: 0;
    }

    .exh-text-item {
        margin-bottom: 18px;
    }

    .exh-card-grid {
        flex: none;
        max-width: none;
        width: 100%;
        gap: 28px 14px;
    }

    /* 手機沒有 hover，遮罩改成一直顯示會擋住圖，所以直接不顯示 */
    .exh-card-mask {
        display: none;
    }
}

/* ==========================================================================
   展覽消息詳情頁

   版面：上方左右兩欄（左標題與內文、右封面）→ 活動照片輪播 → 影片兩欄 → BACK。
   相簿與影片沒有資料時整區不輸出（會議紀錄要求），CSS 這邊不必另外處理空狀態。
   ========================================================================== */

.exh-detail {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 56px 30px 200px;
    box-sizing: border-box;
}

/* ---------- 上：左文字 + 右封面 ---------- */

.exh-detail-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6%;
    margin-bottom: 60px;
}

.exh-detail-text {
    flex: 1 1 auto;
    min-width: 0;
}

.exh-detail-title {
    margin: 0 0 22px;
    color: #221815;
    font-size: clamp(1.5rem, 3.2vw, 3.25rem);
    font-weight: 700;
    /* 設計稿的展覽標題是粗斜體 */
    font-style: italic;
    letter-spacing: 0;
    line-height: 1.4;
}

.exh-detail-content {
    color: #4D4D4D;
    font-size: clamp(0.875rem, 1.02vw, 1rem);
    line-height: 1.95;
    letter-spacing: 0;
}

.exh-detail-content p {
    margin: 0 0 6px;
}

.exh-detail-content p:last-child {
    margin-bottom: 0;
}

/* 編輯器裡若插了圖或影片，寬度要跟著容器縮放 */
.exh-detail-content img,
.exh-detail-content iframe {
    max-width: 100%;
}

.exh-detail-cover {
    flex: 0 0 38%;
    max-width: 38%;
}

.exh-detail-cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- 中：活動照片輪播 ---------- */

.exh-photos {
    margin-bottom: 60px;
}

.exh-photo-item img {
    display: block;
    width: 100%;
    /* 相簿照片長寬不一，統一高度才不會每換一張版面就跳一次。
       這裡不用 aspect-ratio：輪播是滿版 1370px 寬，16:9 算出來是 771px 高，
       整個畫面都被一張照片佔滿。改成固定高度（設計稿約 520px）＋ cover 裁切。 */
    height: clamp(260px, 34vw, 520px);
    object-fit: cover;
    object-position: center center;
    background: #F2F6F8;
}

/* 輪播圓點：疊在照片下緣中央，跟公司設備那組（.equipment-slider）同一套視覺 */
.exh-photos-slider.owl-carousel {
    position: relative;
}

.exh-photos-slider.owl-carousel .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 2;
    text-align: center;
    line-height: 1;
}

.exh-photos-slider.owl-carousel .owl-dots .owl-dot {
    display: inline-block;
    vertical-align: middle;
    padding: 4px 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.exh-photos-slider.owl-carousel .owl-dots .owl-dot span {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease;
}

.exh-photos-slider.owl-carousel .owl-dots .owl-dot.active span,
.exh-photos-slider.owl-carousel .owl-dots .owl-dot:hover span {
    background: #fff;
}

/* ---------- 下：影片，兩欄一列 ---------- */

.exh-videos {
    margin-bottom: 50px;
}

.exh-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exh-video-item {
    margin: 0;
}

/* 16:9 的外框，iframe 撐滿它——YouTube 的 iframe 不給高度會塌成 150px */
.exh-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.exh-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.exh-video-title {
    margin: 12px 0 0;
    color: #4D4D4D;
    font-size: clamp(0.875rem, 1.02vw, 1rem);
    line-height: 1.6;
}

/* ---------- BACK（全站共用：容器 .site-back-foot + 連結 .site-back-btn） ---------- */

.site-back-foot {
    margin-top: 56px;
    text-align: center;
}

.site-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 26px;
    color: #5A5858;
    font-size: clamp(1.125rem, 1.4vw, 1.375rem);
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-back-btn:hover,
.site-back-btn:focus-visible {
    color: #008cd6;
}

/* ---------- 平板／手機 ---------- */

@media screen and (max-width: 900px) {

    .exh-detail {
        padding: 32px 20px 120px;
    }

    .exh-detail-top {
        /* 左右並排改成上下：封面放到文字上方，先看到圖再讀內容 */
        flex-direction: column-reverse;
        gap: 24px;
        margin-bottom: 40px;
    }

    .exh-detail-cover {
        flex: none;
        max-width: none;
        width: 100%;
    }

    .exh-photos {
        margin-bottom: 40px;
    }

    .exh-video-grid {
        /* 手機一列一支，兩欄的影片會小到看不清 */
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* ==========================================================================
   產品資訊
   ——product.php（分類頁／列表頁）與 product_detail.php（詳細資料頁）共用。
     內容寬度統一 1400px；中文站只顯示中文名稱。
     列表／內頁版頭：左 PRODUCTS、右麵包屑「產品資訊 > 分類」，下方分類膠囊鈕。
   ========================================================================== */

.prod-section {
    width: 100%;
    padding-bottom: 160px;
}

/* ---------- 版頭 ---------- */

.prod-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 46px 30px 0;
    box-sizing: border-box;
}

/* 分類頁仍用 banner_inner（PRODUCTS + 產品資訊） */
.prod-head--cate {
    gap: 0;
}

.prod-head .site-inner-title {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* 列表頁：左大標、右同列對齊（細節頁仍用 space-between 把分類鈕推到右側） */
.prod-head-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
}

/* 列表頁：麵包屑緊貼 PRODUCTS 右側，不要撐到最右邊 */
.prod-head-top--list {
    justify-content: flex-start;
    align-items: baseline;
    gap: 16px 20px;
}

.prod-page-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    flex: 0 1 auto;
    gap: 12px 16px;
    margin: 0;
    color: #008cd6;
    font-size: clamp(2rem, 3.1vw, 3rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
}

.prod-page-title-en {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.prod-page-title-tw {
    color: #5A5858;
    font-size: clamp(1rem, 1.5vw, 1.4375rem);
    font-weight: 500;
    letter-spacing: 0;
}

.prod-breadcrumb {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    color: #5A5858;
    font-size: clamp(1rem, 1.25vw, 1.1875rem);
    line-height: 1.4;
}

.prod-breadcrumb a {
    color: #3e3a39;
    text-decoration: none;
    transition: color 0.2s ease;
}

.prod-breadcrumb a:hover,
.prod-breadcrumb a:focus-visible {
    color: #008cd6;
}

.prod-breadcrumb-sep {
    color: #8a8786;
}

.prod-breadcrumb-current {
    color: #8a8786;
}

.prod-breadcrumb-en {
    margin-left: 4px;
}

.prod-cate-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.prod-cate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 8px 18px;
    border: 2px solid #008cd6;
    border-radius: 999px;
    background: #fff;
    color: #008cd6;
    font-size: 1rem;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.prod-cate-btn:hover,
.prod-cate-btn:focus-visible,
.prod-cate-btn.is-current {
    background: #008cd6;
    border-color: #008cd6;
    color: #fff;
}

/* ---------- 分類頁：六張卡片，兩欄 ---------- */

.prod-cate-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 40px;
    max-width: 1300px;
    margin: 44px auto 0;
    padding: 0 30px;
    list-style: none;
    box-sizing: border-box;
}

.prod-cate-item {
    margin: 0;
}

.prod-cate-card {
    display: flex;
    align-items: stretch;
    min-height: 200px;
    height: 100%;
    border: 0;
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(35, 24, 21, 0.1);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.prod-cate-card:hover,
.prod-cate-card:focus-visible {
    box-shadow: 0 12px 36px rgba(0, 140, 214, 0.2);
    transform: translateY(-2px);
}

.prod-cate-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 46%;
    padding: 18px 10px 18px 22px;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
}

.prod-cate-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 180px;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.prod-cate-card:hover .prod-cate-thumb img {
    transform: scale(1.04);
}

.prod-cate-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    /* 下方留白多一點，讓 MORE 離底邊遠一些（視覺上較高） */
    padding: 28px 28px 28px 12px;
    box-sizing: border-box;
}

/* 中文名稱垂直置中；MORE 固定右下 */
.prod-cate-name {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    color: #3e3a39;
    font-size: clamp(1.25rem, 1.6vw, 2.5rem);
    /* font-weight: 700; */
    line-height: 1.35;
    letter-spacing: 0;
}

.prod-cate-more {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    min-height: 36px;
    margin-top: 8px;
    padding: 10px 22px;
    border: 2px solid #008cd6;
    /* 設計稿是略圓角矩形，不是膠囊 */
    border-radius: 15px;
    background: #fff;
    color: #008cd6;
    font-size: 0.9825rem;
    /* font-weight: 600; */
    letter-spacing: 0;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* 設計稿第一張 MORE 實心藍是 hover 示意，不是第一張永遠不同 */
.prod-cate-card:hover .prod-cate-more,
.prod-cate-card:focus-visible .prod-cate-more {
    background: #008cd6;
    color: #fff;
}

/* ---------- 列表頁：產品格狀，一列四個 ---------- */

.prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 36px;
    max-width: 1300px;
    margin: 40px auto 0;
    padding: 0 30px;
    list-style: none;
    box-sizing: border-box;
}

.prod-item {
    margin: 0;
}

.prod-card {
    display: block;
    text-decoration: none;
}

/* 產品圖比例不一，固定正方形框 + contain，不裁切、不加邊框（對齊設計稿） */
.prod-card-thumb {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 100%;
    border: 0;
    background: #fff;
    overflow: hidden;
}

.prod-card-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.prod-card:hover .prod-card-thumb img,
.prod-card:focus-visible .prod-card-thumb img {
    transform: scale(1.05);
}

.prod-card-name {
    display: block;
    margin-top: 14px;
    color: #3e3a39;
    font-size: 0.9875rem;
    /* font-weight: 600; */
    line-height: 1.5;
    text-align: center;
    transition: color 0.2s ease;
}

.prod-card:hover .prod-card-name,
.prod-card:focus-visible .prod-card-name {
    color: #008cd6;
}

.prod-empty {
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 30px;
    box-sizing: border-box;
    color: #5A5858;
    text-align: center;
}

/* ---------- 詳細資料頁：分類名／輪播／編輯器 1000px 置中（比上方版頭窄） ---------- */

.prod-detail {
    max-width: 1000px;
    margin: 36px auto 0;
    padding: 0 30px;
    box-sizing: border-box;
}

.prod-detail .prod-cate-title {
    max-width: none;
    margin: 0 0 18px;
    padding: 0;
    font-weight: 400;
    line-height: 1.35;
}

.prod-detail .prod-cate-title-tw {
    color: #231815;
    font-size: 1.25rem;
    /* font-weight: 700; */
}

.prod-detail .prod-cate-title-en {
    margin-left: 8px;
    color: #231815;
    font-size: 1.125rem;
    font-weight: 400;
}

.prod-gallery {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin-top: 0;
    border: 1px solid #e6eef4;
    background: #fff;
}

.prod-gallery-main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* 大圖固定高度，換圖時版面不會上下跳。要調高度改這裡，下面兩個斷點也要一起改 */
.prod-gallery-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    padding: 20px;
    box-sizing: border-box;
}

.prod-gallery-slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 圓點壓在大圖裡面，不要掉到外框下面（跟首頁、活動照片輪播一致）。
   owl 的圓點樣式綁在 .owl-theme 上，這個容器沒掛那個 class，所以自己寫。 */
.prod-gallery-main .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.prod-gallery-main .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cfd8dd;
    transition: background-color 0.2s ease;
}

.prod-gallery-main .owl-dot.active span {
    background: #5A5858;
}

/* 右側縮圖直排，高度跟大圖一致；圖多過畫面就自己捲。
   欄寬與左邊線放在外層 .prod-gallery-thumbs-wrap 上，
   上下箭頭才能用 absolute 疊在縮圖欄的上下緣（不佔高度、不吃掉一張縮圖的位置）。 */
.prod-gallery-thumbs-wrap {
    position: relative;
    flex: 0 0 200px;
    border-left: 1px solid #e6eef4;
}

.prod-gallery-thumbs {
    /* position:relative 是必要的：JS 用縮圖的 offsetTop 判斷要不要捲進視野，
       沒有它 offsetParent 會跑到更外層，算出來的位置是錯的 */
    position: relative;
    display: flex;
    flex-direction: column;
    height: 500px;
    overflow-y: auto;
    /* 平滑捲動交給 CSS，JS 只改 scrollTop */
    scroll-behavior: smooth;
    /* 捲軸本身藏起來，改由上下箭頭操作（2026-09-04 決定）。
       ⚠ 只是把捲軸「看不見」，不是關掉捲動——overflow 仍然要是 auto：
         箭頭是靠改 scrollTop 運作的，改成 hidden 的話箭頭會整組失效，
         手機版的觸控滑動也會一起沒了。滑鼠滾輪照樣可用，只是沒有捲軸可以拖。 */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* 舊版 Edge / IE */
}

.prod-gallery-thumbs::-webkit-scrollbar {
    /* Chrome / Safari / 新版 Edge */
    display: none;
}

/* 縮圖欄的上下箭頭：半透明白底浮在上下緣，捲不動時由 JS 加 hidden 收起來 */
.prod-thumb-nav {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0;
    border: 0;
    /* 淺藍底不是白底：產品照多半是白背景，半透明白箭頭疊上去會整個看不見 */
    background: rgba(234, 246, 252, 0.95);
    color: #0085D4;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.prod-thumb-nav[hidden] {
    display: none;
}

.prod-thumb-nav--prev {
    top: 0;
    border-bottom: 1px solid #cfe7f6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.prod-thumb-nav--next {
    bottom: 0;
    border-top: 1px solid #cfe7f6;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
}

.prod-thumb-nav:hover,
.prod-thumb-nav:focus-visible {
    background: #0085D4;
    color: #fff;
}

.prod-gallery-thumb {
    display: block;
    position: relative;
    flex: 0 0 125px;
    width: 100%;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #e6eef4;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}

.prod-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 沒被選到的蓋一層暗色遮罩；選到的把遮罩拿掉，
   用「只有一張是亮的」表示大圖現在顯示的是哪一張 */
.prod-gallery-thumb::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    transition: opacity 0.25s ease, background-color 0.25s ease;
}

.prod-gallery-thumb:hover::after {
    background: rgba(0, 0, 0, 0.25);
}

.prod-gallery-thumb.is-active::after {
    opacity: 0;
}

.prod-gallery-thumb:focus-visible {
    outline: 2px solid #0085D4;
    outline-offset: -2px;
}

.prod-detail-spec {
    margin-top: 26px;
}

.prod-spec-row {
    margin: 0;
    color: #231815;
    font-size: 1rem;
    line-height: 1.9;
}

.prod-detail-feature {
    margin-top: 26px;
}

.prod-feature-label {
    margin: 0;
    color: #231815;
    font-size: 1rem;
    line-height: 1.9;
}

.prod-detail-content {
    /* 共用 .editor 有 padding:30px 0，會讓「特色：」跟第一行中間多空一行 */
    padding: 0;
    color: #231815;
    font-size: 1rem;
    line-height: 1.9;
}

.prod-detail-content p {
    margin: 0;
}

/* ---------- 產品頁 RWD ---------- */

@media screen and (max-width: 1200px) {
    .prod-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .prod-gallery-slide,
    .prod-gallery-thumbs {
        height: 420px;
    }

    .prod-gallery-thumb {
        flex: 0 0 105px;
    }
}

@media screen and (max-width: 900px) {
    .prod-section {
        padding-bottom: 90px;
    }

    .prod-head {
        gap: 16px;
        padding: 32px 20px 0;
    }

    .prod-head-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* 列表頁仍維持標題與麵包屑同一列（空間不夠再自動換行） */
    .prod-head-top--list {
        flex-direction: row;
        align-items: baseline;
        gap: 10px 14px;
    }

    .prod-detail {
        margin-top: 24px;
        padding: 0 20px;
    }

    .prod-detail .prod-cate-title {
        margin-bottom: 14px;
    }

    .prod-detail .prod-cate-title-tw {
        font-size: 1.125rem;
    }

    .prod-detail .prod-cate-title-en {
        font-size: 1rem;
    }

    .prod-cate-nav {
        gap: 8px;
    }

    .prod-cate-btn {
        min-width: 0;
        padding: 7px 13px;
        font-size: 0.9375rem;
    }

    .prod-cate-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 26px;
        padding: 0 20px;
    }

    .prod-cate-card {
        min-height: 160px;
        border-radius: 24px;
    }

    .prod-cate-thumb {
        flex-basis: 42%;
        padding: 14px 8px 14px 16px;
    }

    .prod-cate-thumb img {
        max-height: 140px;
    }

    .prod-cate-body {
        padding: 18px 18px 20px 8px;
    }

    .prod-cate-name {
        font-size: 1.1875rem;
    }

    .prod-cate-more {
        min-width: 86px;
        min-height: 32px;
        padding: 7px 16px;
        border-radius: 8px;
    }

    .prod-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 18px;
        margin-top: 28px;
        padding: 0 20px;
    }

    .prod-empty,
    .pagination-wrapper,
    .prod-detail {
        padding: 0 20px;
    }

    .pagination-wrapper {
        margin-top: 36px;
    }

    .site-back-foot {
        margin-top: 36px;
    }

    /* 圖片區改成上下：大圖在上、縮圖橫向一排在下 */
    .prod-gallery {
        flex-direction: column;
        margin-top: 24px;
    }

    .prod-gallery-slide {
        height: 300px;
        padding: 14px;
    }

    .prod-gallery-thumbs-wrap {
        flex: none;
        width: 100%;
        border-left: 0;
        border-top: 1px solid #e6eef4;
    }

    .prod-gallery-thumbs {
        flex: none;
        flex-direction: row;
        width: 100%;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        border-left: 0;
        border-top: 0;
    }

    /* 橫排時箭頭改成貼在左右兩側，圖示轉 90 度變成左右向 */
    .prod-thumb-nav {
        top: 0;
        bottom: 0;
        left: auto;
        right: auto;
        width: 28px;
        height: auto;
    }

    .prod-thumb-nav--prev {
        left: 0;
        border-bottom: 0;
        border-right: 1px solid #cfe7f6;
        box-shadow: 2px 0 6px rgba(0, 0, 0, 0.08);
    }

    .prod-thumb-nav--next {
        right: 0;
        border-top: 0;
        border-left: 1px solid #cfe7f6;
        box-shadow: -2px 0 6px rgba(0, 0, 0, 0.08);
    }

    .prod-thumb-nav i {
        transform: rotate(-90deg);
    }

    .prod-gallery-thumb {
        flex: 0 0 96px;
        height: 72px;
        border-bottom: 0;
        border-right: 1px solid #e6eef4;
    }
}
/* SweetAlert2 的確認鈕預設是紫色，換成本站品牌藍。
   只寫在前台這支 CSS，後台（ManageAdmin/css/suppall_main.css）不受影響。 */
.swal2-styled.swal2-confirm {
    background-color: #0085D4;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(0, 133, 212, 0.4);
}

.swal2-styled.swal2-confirm:hover {
    background-color: #0069A8;
}

/* ==========================================================================
   會員下載（member_download.php）
   ——這一頁沒有設計稿，版面比照舊站的「一列一個檔案」，
     視覺沿用本站其他內頁的既有元件：大標用 .site-inner-title、
     下載鈕比照產品分類鈕（白底藍框、滑過去變實心藍）。
   ========================================================================== */

.download-section {
    width: 100%;
    padding-bottom: 160px;
}

/* ---------- 版頭：大標在左、會員資訊靠右 ---------- */

.download-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    max-width: 1300px;
    margin: 0 auto;
    /* 大標在白底內容區裡，上方要自己跟頁首拉開距離（比照產品頁的 .prod-head） */
    padding: 46px 30px 0;
    box-sizing: border-box;
}

.download-head .site-inner-title {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* 只顯示「你是誰」。登出鈕在頁首右上角，這裡不重複放 */
.download-member {
    margin: 0;
    color: #5A5858;
    font-size: 0.9375rem;
    letter-spacing: 0;
}

/* ---------- 檔案清單 ---------- */

.download-list {
    max-width: 1300px;
    margin: 34px auto 0;
    padding: 0 30px;
    list-style: none;
    box-sizing: border-box;
}

.download-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 14px;
    padding: 20px 26px;
    border: 1px solid #e6eef4;
    background: #fff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.download-item:last-child {
    margin-bottom: 0;
}

.download-item:hover {
    border-color: #A1D9F0;
    box-shadow: 0 6px 18px rgba(0, 133, 212, 0.1);
}

.download-num {
    flex: none;
    min-width: 38px;
    color: #A1D9F0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.download-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #EAF6FC;
    color: #0085D4;
    font-size: 1.125rem;
}

.download-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.download-title {
    display: block;
    color: #231815;
    font-size: 1.0625rem;
    line-height: 1.5;
    /* 檔名很長時不要把按鈕擠出版面，直接斷行 */
    word-break: break-word;
}

.download-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9A9A9A;
    font-size: 0.8125rem;
    letter-spacing: 0;
}

.download-ext {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border: 1px solid #d9e6ef;
    border-radius: 2px;
    color: #5A5858;
    font-size: 0.75rem;
    letter-spacing: 0;
}

.download-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 158px;
    padding: 9px 20px;
    border: 1px solid #0085D4;
    border-radius: 999px;
    background: #fff;
    color: #0085D4;
    font-size: 0.875rem;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.download-btn:hover,
.download-btn:focus-visible,
.download-item:hover .download-btn {
    background: #0085D4;
    color: #fff;
}

.download-empty {
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 30px;
    box-sizing: border-box;
    color: #5A5858;
    text-align: center;
}

/* ---------- 會員下載 RWD ---------- */

@media screen and (max-width: 900px) {
    .download-section {
        padding-bottom: 90px;
    }

    .download-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 32px 20px 0;
    }

    .download-list {
        margin-top: 24px;
        padding: 0 20px;
    }

    /* 窄畫面排不下一列，改成「序號＋圖示＋檔名」一列、按鈕整條放下面 */
    .download-item {
        flex-wrap: wrap;
        gap: 14px;
        padding: 18px 18px 16px;
    }

    .download-num {
        min-width: 0;
        font-size: 1.125rem;
    }

    .download-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .download-info {
        flex: 1 1 160px;
    }

    .download-title {
        font-size: 1rem;
    }

    .download-btn {
        flex: 1 1 100%;
        min-width: 0;
    }

    .download-empty {
        padding: 0 20px;
    }
}

/* ==========================================================================
   找不到頁面（404.php）
   ——沿用內頁的既有元件：大標用 .site-inner-title、按鈕比照產品分類鈕。
     這是一條死路，重點是給出口，所以按鈕與常用連結要明顯。
   ========================================================================== */

.error-section {
    width: 100%;
    padding-bottom: 180px;
}

.error-head {
    max-width: 1300px;
    margin: 0 auto;
    padding: 46px 30px 0;
    box-sizing: border-box;
}

.error-head .site-inner-title {
    max-width: none;
    margin: 0;
    padding: 0;
}

.error-body {
    max-width: 1300px;
    margin: 30px auto 0;
    padding: 0 30px 100px 30px;
    box-sizing: border-box;
}

.error-lead {
    margin: 0;
    color: #231815;
    font-size: 1.0625rem;
    line-height: 1.9;
}

.error-url {
    margin: 12px 0 0;
    color: #9A9A9A;
    font-size: 0.875rem;
    line-height: 1.7;
    /* 網址很長時直接斷行，不要把版面撐開 */
    word-break: break-all;
}

.error-url span {
    color: #5A5858;
}

.error-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 30px;
    padding: 11px 30px;
    border: 1px solid #0085D4;
    border-radius: 999px;
    background: #0085D4;
    color: #fff;
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.error-home-btn:hover,
.error-home-btn:focus-visible {
    background: #0069A8;
    border-color: #0069A8;
    color: #fff;
}

.error-links {
    margin-top: 42px;
    padding-top: 26px;
    border-top: 1px solid #e6eef4;
}

.error-links-title {
    margin: 0 0 14px;
    color: #5A5858;
    font-size: 0.9375rem;
    letter-spacing: 0;
}

.error-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.error-links li {
    margin: 0;
}

.error-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0085D4;
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.error-links a:hover,
.error-links a:focus-visible {
    color: #0069A8;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media screen and (max-width: 900px) {
    .error-section {
        padding-bottom: 90px;
    }

    .error-head {
        padding: 32px 20px 0;
    }

    .error-body {
        margin-top: 22px;
        padding: 0 20px;
    }

    .error-lead {
        font-size: 1rem;
    }

    .error-home-btn {
        margin-top: 24px;
        /* 窄畫面拉成整條，手指好按 */
        width: 100%;
        box-sizing: border-box;
    }

    .error-links {
        margin-top: 32px;
        padding-top: 20px;
    }

    .error-links ul {
        flex-direction: column;
        gap: 12px;
    }
}

/* ==========================================================================
   隱私權與使用條款（privacy.php）
   ——內容是後台編輯器打的，段落用「標題2」、小節用「標題3」，
     這裡負責把它們套上跟全站一致的字級與間距。
   ========================================================================== */

.privacy-section {
    width: 100%;
    padding-bottom: 160px;
}

.privacy-head {
    max-width: 1300px;
    margin: 0 auto;
    /* 大標在白底內容區裡，上方要自己跟頁首拉開距離（比照產品頁的 .prod-head） */
    padding: 46px 30px 41px;
    box-sizing: border-box;
}

.privacy-head .site-inner-title {
    max-width: none;
    margin: 0;
    padding: 0;
}

.privacy-body {
    /* 容器跟大標同寬同縮排，內容才會跟「PRIVACY」切齊左緣 */
    max-width: 1300px;
    margin: 0 auto;
    /* 共用 .editor 有 padding:30px 0，這裡把左右補回來、上方縮短一點 */
    padding: 18px 30px 0;
    box-sizing: border-box;
    color: #231815;
    font-size: 1rem;
    line-height: 1.95;
}

/* 條文很長，一行拉到 1400px 寬會很難讀（眼睛換行時容易看錯行），
   所以限制每一段的行寬，但容器維持滿寬、內容靠左對齊大標 */
.privacy-body > * {
    /* max-width: 1000px; */
}

.privacy-body p {
    margin: 0 0 14px;
}

.privacy-body h2 {
    margin: 44px 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #A1D9F0;
    color: #0085D4;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* 第一個大段落貼齊上緣，不要多出一段空白 */
.privacy-body h2:first-child {
    margin-top: 0;
}

.privacy-body h3 {
    margin: 26px 0 8px;
    color: #231815;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0;
}

.privacy-body ul,
.privacy-body ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.privacy-body li {
    margin-bottom: 6px;
    line-height: 1.9;
}

.privacy-body strong {
    color: #231815;
    font-weight: 700;
}

.privacy-body a {
    color: #0085D4;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.privacy-body a:hover,
.privacy-body a:focus-visible {
    color: #0069A8;
}

.privacy-empty {
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 30px;
    box-sizing: border-box;
    color: #5A5858;
    text-align: center;
}

/* ---------- 頁尾的隱私權連結 ---------- */

.site-footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px 22px;
    box-sizing: border-box;
    text-align: right;
}

.site-footer-privacy {
    color: #b9b5b3;
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer-privacy:hover,
.site-footer-privacy:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media screen and (max-width: 900px) {
    .privacy-section {
        padding-bottom: 90px;
    }

    .privacy-head {
        padding: 32px 20px 0;
    }

    .privacy-body {
        padding: 14px 20px 0;
        font-size: 0.9375rem;
        line-height: 1.9;
    }

    .privacy-body h2 {
        margin-top: 34px;
        font-size: 1.1875rem;
    }

    .privacy-body h3 {
        margin-top: 22px;
        font-size: 1rem;
    }

    .privacy-empty {
        padding: 0 20px;
    }

    .site-footer-bottom {
        padding: 0 20px 18px;
        /* 手機版頁尾其他內容都靠左，這裡跟著靠左才不會落單 */
        text-align: left;
    }
}

/* Cookie 提示條裡的隱私權連結（深色底，用白色底線區隔） */
.cookie-notice-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.cookie-notice-link:hover,
.cookie-notice-link:focus-visible {
  color: #A1D9F0;
}