/* ==========================================================================
   ACT | 夢想家 ESG 影響力計畫 — 基礎樣式
   純原生 CSS，無任何第三方框架、圖示字型或網路字型。
   斷點：手機 <=767px、平板 <=1024px、桌機 >1024px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 設計變數
   -------------------------------------------------------------------------- */
:root {
  --act-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Helvetica, Arial, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
    "Heiti TC", sans-serif;
  --act-font-serif: Georgia, "Times New Roman", "Noto Serif TC", "Songti TC",
    "PMingLiU", serif;
  --act-content-width: 1140px;
  --act-widget-spacing: 20px;
  --act-transition: 0.3s;
  --act-brand: #179996;
}

/* --------------------------------------------------------------------------
   2. 重置與文件基礎
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--act-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 原站佈景主題的標題預設值：沒有另外指定時沿用外層顏色 */
h1, h2, h3, h4, h5, h6 {
  margin-block: 0.5rem 1rem;
  margin-inline: 0;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: #656565;
  text-decoration: none;
  transition: color var(--act-transition);
}
a:hover { color: #ce6363; }

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

figure { margin: 0; }

ul, ol { margin: 0 0 1em; padding-inline-start: 1.5em; }

table { border-collapse: collapse; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

iframe { border: 0; max-width: 100%; }

hr { border: 0; border-top: 1px solid #e6e6e6; margin: 1em 0; }

:focus-visible {
  outline: 2px solid var(--act-brand);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. 無障礙輔助
   -------------------------------------------------------------------------- */
.act-sr-only,
.act-screen-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.act-skip-link:focus,
.act-skip-link:focus-visible {
  position: fixed !important;
  left: 8px;
  top: 8px;
  z-index: 10001;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 20px;
  overflow: visible;
  clip: auto !important;
  clip-path: none !important;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------------------------
   4. 版面骨架：文件 / 區段 / 欄 / 元件
   -------------------------------------------------------------------------- */
.act-section { position: relative; }

.act-container {
  display: flex;
  position: relative;
  margin-inline: auto;
  width: 100%;
}

.act-section-boxed > .act-container { max-width: var(--act-content-width); }
.act-section-full_width > .act-container { max-width: none; }
.act-section-stretched { position: relative; width: 100%; }

.act-section-items-top > .act-container { align-items: flex-start; }
.act-section-items-middle > .act-container { align-items: center; }
.act-section-items-bottom > .act-container { align-items: flex-end; }
.act-section-items-stretch > .act-container { align-items: stretch; }

.act-section-content-top > .act-container > .act-column > .act-widget-wrap { align-content: flex-start; align-items: flex-start; }
.act-section-content-middle > .act-container > .act-column > .act-widget-wrap { align-content: center; align-items: center; }
.act-section-content-bottom > .act-container > .act-column > .act-widget-wrap { align-content: flex-end; align-items: flex-end; }

.act-column {
  display: flex;
  position: relative;
  min-height: 1px;
  width: 100%;
}

.act-widget-wrap {
  display: flex;
  position: relative;
  width: 100%;
  flex-wrap: wrap;
  align-content: flex-start;
}

.act-widget-wrap > .act-element { width: 100%; }

.act-widget:not(:last-child) { margin-block-end: var(--kit-widget-spacing, var(--act-widget-spacing)); }
/* 絕對定位或自訂寬度的元件不在排版流裡，下方不留間距，也不可超出欄寬 */
.act-widget:not(:last-child):is(.act-absolute, .act-widget__width-auto, .act-widget__width-initial) { margin-block-end: 0; }

.act-widget-wrap > .act-element.act-absolute { position: absolute; }
.act-widget-wrap > .act-element.act-fixed { position: fixed; }
.act-element:is(.act-absolute, .act-fixed) { z-index: 1; }

.act-widget-wrap .act-element:is(.act-widget__width-auto, .act-widget__width-initial) { max-width: 100%; }

.act-background-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  pointer-events: none;
}

.act-doc .act-widget:not(.act-widget-text-editor):not(.act-widget-theme-post-content) figure { margin: 0; }

/* 欄距 */
/* 轉換工具把 elementor-element-populated 改名為 e-populated */
.act-column-gap-narrow > .act-column > .e-populated { padding: 5px; }
.act-column-gap-default > .act-column > .e-populated { padding: 10px; }
.act-column-gap-extended > .act-column > .e-populated { padding: 15px; }
.act-column-gap-wide > .act-column > .e-populated { padding: 20px; }
.act-column-gap-wider > .act-column > .e-populated { padding: 30px; }
.act-inner-section .act-column-gap-no .e-populated { padding: 0; }

/* 欄寬（>=768px 才分欄；行動裝置一律單欄） */
@media (min-width: 768px) {
  .act-column.act-col-10 { width: 10%; }
  .act-column.act-col-11 { width: 11.111%; }
  .act-column.act-col-12 { width: 12.5%; }
  .act-column.act-col-14 { width: 14.285%; }
  .act-column.act-col-16 { width: 16.666%; }
  .act-column.act-col-20 { width: 20%; }
  .act-column.act-col-25 { width: 25%; }
  .act-column.act-col-30 { width: 30%; }
  .act-column.act-col-33 { width: 33.333%; }
  .act-column.act-col-40 { width: 40%; }
  .act-column.act-col-50 { width: 50%; }
  .act-column.act-col-60 { width: 60%; }
  .act-column.act-col-66 { width: 66.666%; }
  .act-column.act-col-70 { width: 70%; }
  .act-column.act-col-75 { width: 75%; }
  .act-column.act-col-80 { width: 80%; }
  .act-column.act-col-83 { width: 83.333%; }
  .act-column.act-col-90 { width: 90%; }
  .act-column.act-col-100 { width: 100%; }
  .act-section-height-full { height: 100vh; }
  .act-section-height-full > .act-container { height: 100%; }
}

@media (max-width: 1024px) {
  .act-section .act-container { flex-wrap: wrap; }
  /* 窄螢幕的左右留白由欄位內距（.e-populated）提供，與原站相同 */
}

/* 顯示／隱藏工具 */
@media (max-width: 767px) { .act-hidden-mobile { display: none !important; } }
/* 版面規則以 max-width: 767px／1024px 劃分，下一段從 .02px 之後接上。視窗寬度
   可能是非整數（瀏覽器縮放、非整數像素比）；若寫成 768px、1025px，介於兩者之間
   的寬度會讓兩條隱藏規則都不套用，同一段內容的兩種版本就會同時出現 */
@media (min-width: 767.02px) and (max-width: 1024px) { .act-hidden-tablet { display: none !important; } }
@media (min-width: 1024.02px) { .act-hidden-desktop { display: none !important; } }

/* 對齊 */
.act-align-left { text-align: left; }
.act-align-center { text-align: center; }
.act-align-right { text-align: right; }
.act-align-justify { text-align: justify; }
.act-align-start { text-align: start; }
.act-align-end { text-align: end; }
:is(.act-align-left, .act-align-center, .act-align-right) .act-button { width: auto; }
.act-align-justify .act-button { width: 100%; }

@media (max-width: 1024px) {
  .act-tablet-align-center { text-align: center; }
  .act-tablet-align-left { text-align: left; }
  .act-tablet-align-right { text-align: right; }
  .act-tablet-align-justify .act-button { width: 100%; }
}
@media (max-width: 767px) {
  .act-mobile-align-center { text-align: center; }
  .act-mobile-align-left { text-align: left; }
  .act-mobile-align-right { text-align: right; }
  .act-mobile-align-justify .act-button { width: 100%; }
}

/* --------------------------------------------------------------------------
   5. 圖示（站內自繪 SVG sprite）
   -------------------------------------------------------------------------- */
.act-icon-sprite { display: none; }

.act-svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.act-icon {
  display: inline-block;
  line-height: 1;
  color: #69727d;
  font-size: 50px;
  text-align: center;
  transition: all var(--act-transition);
}
.act-icon .act-svg-icon,
.act-icon svg { width: 1em; height: 1em; }

.act-icon-wrapper { line-height: 0; }
.act-view-stacked .act-icon { padding: 0.5em; background-color: #69727d; color: #fff; }
.act-view-framed .act-icon { padding: 0.5em; border: 3px solid #69727d; background-color: transparent; }
.act-shape-circle .act-icon { border-radius: 50%; }
.act-shape-square .act-icon { border-radius: 0; }
.act-shape-rounded .act-icon { border-radius: 10%; }

/* --------------------------------------------------------------------------
   6. 元件：標題 / 文字 / 分隔線 / 間距
   -------------------------------------------------------------------------- */
.act-heading-title { padding: 0; margin: 0; line-height: 1.2; }
/* 權重要高過頁面樣式的「.act-kit-13 a」，標題裡的連結才會沿用標題顏色 */
.act-widget-heading .act-heading-title[class*="act-size-"] > a { color: inherit; font-size: inherit; line-height: inherit; }
.act-size-small { font-size: 15px; }
.act-size-medium { font-size: 19px; }
.act-size-large { font-size: 29px; }
.act-size-xl { font-size: 39px; }
.act-size-xxl { font-size: 59px; }

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

/* 首字放大 */
.act-widget-text-editor .act-drop-cap { float: inline-start; font-size: 50px; line-height: 1; text-align: center; }
.act-widget-text-editor .act-drop-cap-letter { display: inline-block; }
/* 「色塊」與「外框」兩種外觀把字母放進 1em 見方的方塊；配色由各自的變數決定 */
.act-drop-cap-view-stacked { --act-drop-cap-fill: #69727d; --act-drop-cap-ink: #fff; }
.act-drop-cap-view-framed { --act-drop-cap-frame: 3px solid; }
.act-widget-text-editor:is(.act-drop-cap-view-stacked, .act-drop-cap-view-framed) .act-drop-cap {
  margin-block-start: 8px;
  border: var(--act-drop-cap-frame, 0);
  background-color: var(--act-drop-cap-fill, transparent);
  color: var(--act-drop-cap-ink, #69727d);
}
.act-widget-text-editor:is(.act-drop-cap-view-stacked, .act-drop-cap-view-framed) .act-drop-cap-letter { width: 1em; height: 1em; }
.act-widget-text-editor figure { display: inline-block; }

.act-divider { display: flex; }
.act-divider-separator {
  display: flex;
  margin: 0;
  direction: ltr;
  width: 100%;
  border-block-start: var(--act-divider-border-width, 1px) var(--act-divider-border-style, solid) var(--act-divider-color, #000);
}
.act-widget-divider--view-line_text .act-divider,
.act-widget-divider--view-line_icon .act-divider { align-items: center; }
.act-widget-divider--view-line_text .act-divider-separator,
.act-widget-divider--view-line_icon .act-divider-separator { flex-grow: 1; }
.act-divider__text {
  font-size: 15px;
  padding-inline: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.act-widget-divider--separator-type-pattern .act-divider-separator {
  border-block-start: 0;
  width: 100%;
  min-height: var(--act-divider-pattern-height, 20px);
  -webkit-mask-size: var(--act-divider-pattern-size, 20px) 100%;
  mask-size: var(--act-divider-pattern-size, 20px) 100%;
  -webkit-mask-repeat: var(--act-divider-pattern-repeat, repeat-x);
  mask-repeat: var(--act-divider-pattern-repeat, repeat-x);
  background-color: var(--act-divider-color, #000);
  -webkit-mask-image: var(--act-divider-pattern-url);
  mask-image: var(--act-divider-pattern-url);
}

.act-spacer-inner { height: var(--spacer-size, 50px); }

/* --------------------------------------------------------------------------
   7. 元件：按鈕
   -------------------------------------------------------------------------- */
.act-button-wrapper { line-height: 0; }

.act-button {
  display: inline-block;
  line-height: 1;
  background-color: #69727d;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 3px;
  color: #fff;
  fill: #fff;
  text-align: center;
  transition: all var(--act-transition);
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.act-button:visited,
.act-button:hover,
.act-button:focus { color: #fff; text-decoration: none; }
.act-button-content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.act-button-text { display: inline-block; }
.act-button.act-size-xs { font-size: 13px; padding: 10px 20px; border-radius: 2px; }
.act-button.act-size-sm { font-size: 15px; padding: 12px 24px; border-radius: 3px; }
.act-button.act-size-md { font-size: 16px; padding: 15px 30px; border-radius: 4px; }
.act-button.act-size-lg { font-size: 18px; padding: 20px 40px; border-radius: 5px; }
.act-button.act-size-xl { font-size: 20px; padding: 25px 50px; border-radius: 6px; }

/* --------------------------------------------------------------------------
   8. 元件：圖片
   -------------------------------------------------------------------------- */
.act-widget-image a { display: inline-block; }
.act-widget-image img { display: inline-block; vertical-align: middle; }

/* --------------------------------------------------------------------------
   9. 元件：圖示方塊 / 圖示清單
   -------------------------------------------------------------------------- */
.act-icon-box-wrapper { display: flex; align-items: flex-start; text-align: center; }
.act-position-inline-start .act-icon-box-wrapper,
.act-position-left .act-icon-box-wrapper { flex-direction: row; text-align: start; }
.act-position-inline-end .act-icon-box-wrapper,
.act-position-right .act-icon-box-wrapper { flex-direction: row-reverse; text-align: end; }
.act-position-top .act-icon-box-wrapper { flex-direction: column; }
.act-icon-box-icon { flex-shrink: 0; margin-block-end: 15px; }
.act-position-inline-start .act-icon-box-icon,
.act-position-left .act-icon-box-icon { margin-inline-end: 15px; margin-block-end: 0; }
.act-position-inline-end .act-icon-box-icon,
.act-position-right .act-icon-box-icon { margin-inline-start: 15px; margin-block-end: 0; }
.act-icon-box-title { margin-block: 0 10px; }
.act-icon-box-title a { color: inherit; }
.act-icon-box-description { margin: 0; }

@media (max-width: 767px) {
  .act-mobile-position-block-start .act-icon-box-wrapper { flex-direction: column; text-align: center; }
  .act-mobile-position-block-start .act-icon-box-icon { margin-inline: 0; margin-block-end: 15px; }
}

.act-icon-list-items { list-style: none; margin: 0; padding: 0; }
.act-icon-list-item {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  position: relative;
}
.act-icon-list-item a { display: flex; align-items: center; width: 100%; }
.act-icon-list-icon { display: flex; align-items: center; padding-inline-end: 8px; }
.act-icon-list-text { align-self: center; }
.act-inline-items { display: flex; flex-wrap: wrap; }
.act-inline-items .act-inline-item { margin-inline-end: 8px; }

/* --------------------------------------------------------------------------
   10. 元件：社群圖示
   -------------------------------------------------------------------------- */
.act-social-icons-wrapper {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 5), auto);
  justify-content: start;
  gap: var(--grid-row-gap, 5px) var(--grid-column-gap, 5px);
}
.act-egrid-align-center .act-social-icons-wrapper { justify-content: center; }
.act-egrid-align-right .act-social-icons-wrapper { justify-content: end; }
.act-grid-item { display: flex; }
.act-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #69727d;
  color: #fff;
  font-size: var(--icon-size, 25px);
  width: calc(var(--icon-size, 25px) + 2 * var(--icon-padding, 0.5em));
  height: calc(var(--icon-size, 25px) + 2 * var(--icon-padding, 0.5em));
  cursor: pointer;
}
.act-social-icon:hover { color: #fff; opacity: 0.9; }
.act-social-icon .act-svg-icon { width: 1em; height: 1em; }
.act-shape-rounded .act-social-icon { border-radius: 10%; }
.act-shape-circle .act-social-icon { border-radius: 50%; }
/* 圖示本身設白色（連結顏色會被頁面的「.act-kit-13 a」蓋過） */
.act-social-icon i { color: #fff; }
.act-social-icon .act-svg-icon { fill: currentColor; }
/* 原站的社群品牌色 */
.act-social-icon-facebook { background-color: #3b5998; }
.act-social-icon-link { background-color: #818a91; }

/* --------------------------------------------------------------------------
   11. 元件：計數器
   -------------------------------------------------------------------------- */
.act-counter .act-counter-number-wrapper {
  display: flex;
  font-size: 69px;
  font-weight: 600;
  line-height: 1;
}
.act-counter .act-counter-title { text-align: center; font-size: 19px; font-weight: 400; }

/* --------------------------------------------------------------------------
   12. 元件：影片（點擊後才載入外部播放器）
   -------------------------------------------------------------------------- */
.act-wrapper { position: relative; }
.act-widget-video .act-wrapper { aspect-ratio: var(--video-aspect-ratio, 16 / 9); }
.act-widget-video .act-video,
.act-widget-video iframe,
.act-widget-video video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: #000;
}

.act-video-facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: #000;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.act-video-facade__play {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: rgba(23, 153, 150, 0.85);
  color: #fff;
  transition: background-color var(--act-transition), transform var(--act-transition);
}
.act-video-facade:hover .act-video-facade__play { background-color: var(--act-brand); transform: scale(1.08); }
.act-video-facade__play .act-svg-icon { width: 24px; height: 24px; }
.act-video-facade__label {
  position: absolute;
  left: 0;
  right: 0;
  inset-inline: 0;
  bottom: 0;
  padding: 10px 14px;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  text-align: start;
}
.act-video-note {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   13. 元件：文件（PDF）內嵌
   -------------------------------------------------------------------------- */
.act-doc-embed { max-width: 100%; margin-inline: auto; text-align: start; }
.act-doc-embed__frame {
  display: block;
  width: 100%;
  height: var(--act-doc-height, 600px);
  border: 1px solid #e2e2e2;
  background: #f7f7f7;
}
.act-doc-embed__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f2f4f5;
  border: 1px solid #e2e2e2;
  border-bottom: 0;
  font-size: 14px;
}
.act-doc-embed__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.act-doc-embed__actions { display: flex; gap: 12px; flex-shrink: 0; }
.act-doc-embed__actions a { color: var(--act-brand); text-decoration: underline; }
@media (max-width: 767px) {
  .act-doc-embed__frame { height: min(var(--act-doc-height, 600px), 70vh); }
}

/* --------------------------------------------------------------------------
   14. 元件：相簿與燈箱
   -------------------------------------------------------------------------- */
.act-gallery__container {
  display: grid;
  grid-template-columns: repeat(var(--act-gallery-columns, 4), minmax(0, 1fr));
  gap: var(--act-gallery-gap, 10px);
}
@media (max-width: 1024px) {
  .act-gallery__container { grid-template-columns: repeat(var(--act-gallery-columns-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .act-gallery__container { grid-template-columns: repeat(var(--act-gallery-columns-mobile, 1), minmax(0, 1fr)); }
}
.act-gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--act-gallery-ratio, 3 / 2);
  background-color: #f0f0f0;
}
.act-gallery-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.act-gallery-item__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--act-transition);
}
.act-gallery-item:hover .act-gallery-item__overlay,
.act-gallery-item:focus-visible .act-gallery-item__overlay { opacity: 1; }
.act-gallery-item:hover .act-gallery-item__image { transform: scale(1.05); }

/* 等高排列：每列同高，照片依原比例分配寬度，最後一列不拉伸 */
.act-gallery__container.act-gallery--justified { display: flex; flex-wrap: wrap; }
.act-gallery__container.act-gallery--justified::after { content: ""; flex-grow: 999; }
.act-gallery__container.act-gallery--justified.act-is-laid-out::after { display: none; }
.act-gallery--justified .act-gallery-item { flex: 1 1 auto; height: var(--act-gallery-row, 200px); aspect-ratio: auto; }
.act-gallery--justified .act-gallery-item__image { width: auto; min-width: 100%; }
@media (max-width: 1024px) {
  .act-gallery--justified .act-gallery-item { height: var(--act-gallery-row-tablet, 150px); }
}
@media (max-width: 767px) {
  .act-gallery--justified .act-gallery-item { height: var(--act-gallery-row-mobile, 150px); }
}

.act-lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--act-transition), visibility var(--act-transition);
}
/* 開啟時立即可見，焦點才能移進對話框；關閉時 visibility 仍隨淡出延後 */
.act-lightbox.act-is-open { opacity: 1; visibility: visible; transition: opacity var(--act-transition), visibility 0s; }
.act-lightbox__figure {
  margin: 0;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.act-lightbox__img {
  max-width: 92vw;
  max-height: 80vh;
  object-fit: contain;
}
.act-lightbox__caption { color: #fff; font-size: 14px; text-align: center; }
.act-lightbox__btn {
  position: absolute;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 12px;
  line-height: 0;
  border-radius: 50%;
  transition: background-color var(--act-transition);
}
.act-lightbox__btn:hover { background-color: rgba(255, 255, 255, 0.15); }
.act-lightbox__btn .act-svg-icon { width: 28px; height: 28px; }
.act-lightbox__close { top: 12px; inset-inline-end: 12px; }
.act-lightbox__prev { inset-inline-start: 12px; top: 50%; transform: translateY(-50%); }
.act-lightbox__next { inset-inline-end: 12px; top: 50%; transform: translateY(-50%); }
.act-lightbox__counter {
  position: absolute;
  top: 18px;
  inset-inline-start: 18px;
  color: #fff;
  font-size: 14px;
}
@media (max-width: 767px) {
  .act-lightbox__btn .act-svg-icon { width: 22px; height: 22px; }
}

/* --------------------------------------------------------------------------
   15. 元件：輪播（幻燈片）
   -------------------------------------------------------------------------- */
.act-swiper { position: relative; height: 100%; }
.act-main-swiper { position: relative; overflow: hidden; height: 100%; }
.act-main-swiper > .act-swiper-wrapper {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
  will-change: transform;
}
.act-main-swiper .act-swiper-slide {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.act-swiper-slide-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.act-swiper-slide-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.act-swiper-slide-contents { text-align: center; }
.act-slide-heading { font-size: 35px; font-weight: 600; color: #fff; }
.act-slide-description { font-size: 17px; color: #fff; }

.act-slides__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--act-transition);
}
.act-slides__nav:hover { background: rgba(0, 0, 0, 0.6); }
.act-slides__nav--prev { inset-inline-start: 10px; }
.act-slides__nav--next { inset-inline-end: 10px; }
.act-slides__dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.act-slides__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.act-slides__dot.act-is-active { background: #fff; }

/* --------------------------------------------------------------------------
   16. 元件：分頁籤
   -------------------------------------------------------------------------- */
.act-tabs { text-align: start; }
.act-tabs-wrapper { display: flex; flex-wrap: wrap; }
.act-tab-title {
  cursor: pointer;
  padding: 20px 25px;
  font-weight: 600;
  color: #54595f;
  transition: color var(--act-transition), background-color var(--act-transition);
}
.act-tab-title.act-active { color: var(--act-brand); }
.act-tab-content { padding: 20px; display: none; }
.act-tab-content.act-active { display: block; }
.act-tab-mobile-title { display: none; }
@media (max-width: 767px) {
  .act-tabs-wrapper { display: none; }
  .act-tab-mobile-title { display: block; }
}

/* elementskit 樣式分頁籤 */
.act-ekt-tab-wraper { width: 100%; }
.act-ekt-tab-nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.act-eks-fitcontent-tab .act-ekt-tab-nav { justify-content: center; }
.act-ekt-nav-item { margin: 0; }
.act-ekt-nav-link {
  display: block;
  padding: 12px 20px;
  cursor: pointer;
  color: #54595f;
  transition: color var(--act-transition), background-color var(--act-transition);
}
.act-ekt-nav-link.act-active { color: var(--act-brand); }
.act-ekt-tab-pane { display: none; }
.act-ekt-tab-pane.act-active { display: block; }

/* --------------------------------------------------------------------------
   17. 元件：時間軸
   依原站外掛的設定變數（--act-tl-*）排版；各頁的顏色與尺寸寫在頁面樣式檔，
   這裡只提供預設值與版面
   -------------------------------------------------------------------------- */
.act-tw-wrapper {
  --act-tl-line-width: 4px;
  --act-tl-line-bg: #d6d6d6;
  --act-tl-ybx-size: 80px;
  --act-tl-ybx-text-size: 22px;
  --act-tl-ybx-text-color: #fff;
  --act-tl-ybx-bg: #54595f;
  --act-tl-ibx-size: 48px;
  --act-tl-ibx-text-size: 24px;
  --act-tl-ibx-bg: var(--act-global-color-primary, #222);
  --act-tl-lbl-gap: 5px;
  --act-tl-lbl-big-size: 24px;
  --act-tl-lbl-small-size: 16px;
  --act-tl-lbl-big-color: var(--act-global-color-primary, #222);
  --act-tl-lbl-small-color: var(--act-global-color-text, #444);
  --act-tl-cbx-bg: #fff;
  --act-tl-cbx-radius: 6px;
  --act-tl-cbx-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.3);
  --act-tl-cbx-bottom-margin: 100px;
  --act-tl-cbx-title-color: var(--act-global-color-primary, #222);
  --act-tl-cbx-des-color: var(--act-global-color-text, #444);
  --act-tl-cbx-des-margin: 0 0 10px;
  --act-tl-cbx-text-align: left;
  position: relative;
  display: block;
  width: 100%;
}
.act-tw-wrapper *,
.act-tw-wrapper ::before,
.act-tw-wrapper ::after { box-sizing: border-box; }

.act-tw-labels {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  gap: var(--act-tl-lbl-gap);
  margin: 0;
  padding: 0;
}
.act-tw-label-big,
.act-tw-label-small { line-height: 1em; white-space: nowrap; max-width: 100%; }
.act-tw-label-big { font-size: var(--act-tl-lbl-big-size); font-weight: 700; color: var(--act-tl-lbl-big-color); }
.act-tw-label-small { font-size: var(--act-tl-lbl-small-size); font-weight: 400; color: var(--act-tl-lbl-small-color); }

/* 時間線上的圓點（有圖示時放在圓點裡） */
.act-tw-icon {
  position: absolute;
  width: var(--act-tl-ibx-size);
  height: var(--act-tl-ibx-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--act-tl-line-width) solid var(--act-tl-line-bg);
  border-radius: 50%;
  background-color: var(--act-tl-ibx-bg);
  background-clip: padding-box;
  color: var(--act-tl-cbx-bg);
}
.act-tw-icon .act-svg-icon { width: var(--act-tl-ibx-text-size); height: var(--act-tl-ibx-text-size); fill: currentColor; }

.act-tw-year { display: flex; align-items: center; margin: 0; padding: 0; }
.act-tw-year-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--act-tl-ybx-size);
  height: var(--act-tl-ybx-size);
  overflow: hidden;
  border: var(--act-tl-line-width) solid var(--act-tl-line-bg);
  border-radius: 50%;
  background-color: var(--act-tl-ybx-bg);
  background-clip: padding-box;
  color: var(--act-tl-ybx-text-color);
  font-size: var(--act-tl-ybx-text-size);
  font-weight: 700;
  line-height: 1em;
  text-align: center;
}

/* 卡片與指向圓點的小三角 */
.act-tw-arrow {
  position: absolute;
  z-index: 2;
  width: calc(var(--act-tl-ibx-size) / 3.5);
  height: calc(var(--act-tl-ibx-size) / 3.5);
  transform: rotate(45deg);
  border: 0 solid var(--act-tl-ibx-bg);
}
.act-tw-content {
  position: relative;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  margin: 0;
  padding: 0.75em 0.75em calc(0.75em - 10px);
  border: 0 solid var(--act-tl-ibx-bg);
  border-radius: var(--act-tl-cbx-radius);
  background: var(--act-tl-cbx-bg);
  box-shadow: var(--act-tl-cbx-shadow);
}
.act-tw-title {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: var(--act-tl-cbx-text-align);
  margin: 0 0 10px;
  color: var(--act-tl-cbx-title-color);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25em;
  text-align: var(--act-tl-cbx-text-align);
}
.act-tw-description {
  order: 3;
  display: inline-block;
  width: 100%;
  margin: var(--act-tl-cbx-des-margin);
  color: var(--act-tl-cbx-des-color);
  text-align: var(--act-tl-cbx-text-align);
}
.act-tw-description p { margin: 0 0 10px; }
.act-tw-description :is(p, ul, ol, span) { color: var(--act-tl-cbx-des-color); }

/* 橫式：標籤在上、時間線與圓點居中、卡片在下，左右箭頭捲動 */
.act-tw-horizontal-timeline {
  --act-tl-cbx-text-align: center;
  /* 時間線的高度位置：標籤 + 間距 + 一個圓點 */
  --act-tw-line: calc(var(--act-tl-lbl-big-size) + var(--act-tl-lbl-small-size) + var(--act-tl-lbl-gap) + 20px + var(--act-tl-ibx-size));
  width: calc(100% - 48px);
  margin: 0 24px;
}
.act-tw-slider-container { position: relative; overflow: hidden; }
.act-tw-slider-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  margin-top: calc(var(--act-tw-line) + var(--act-tl-ibx-size));
  margin-bottom: var(--act-tl-cbx-bottom-margin);
  transition: transform 0.45s ease;
}
.act-tw-horizontal-timeline .act-tw-story {
  position: relative;
  flex: 0 0 calc(100% / var(--act-tl-visible, 3));
  min-width: 0;
  padding: 0 10px;
}
.act-tw-horizontal-timeline .act-tw-content { height: 100%; border-top-width: 3px; }
.act-tw-horizontal-timeline .act-tw-labels {
  top: calc(0px - var(--act-tl-lbl-big-size) - var(--act-tl-lbl-small-size) - var(--act-tl-lbl-gap) - var(--act-tl-ibx-size) * 2);
  left: 50%;
  height: calc(var(--act-tl-lbl-big-size) + var(--act-tl-lbl-small-size) + var(--act-tl-lbl-gap));
  justify-content: flex-end;
  text-align: center;
  transform: translateX(-50%);
}
.act-tw-horizontal-timeline .act-tw-icon {
  top: calc(var(--act-tl-ibx-size) * -1.5);
  left: calc(50% - var(--act-tl-ibx-size) / 2);
}
.act-tw-horizontal-timeline .act-tw-year {
  position: absolute;
  top: calc(var(--act-tl-ibx-size) * -1.5 - (var(--act-tl-ybx-size) - var(--act-tl-ibx-size)) / 2);
  left: 10px;
}
.act-tw-horizontal-timeline .act-tw-arrow {
  top: calc(1px - var(--act-tl-ibx-size) / 7);
  left: calc(50% - var(--act-tl-ibx-size) / 7);
  border-width: 3px 0 0 3px;
  background: linear-gradient(to bottom right, var(--act-tl-cbx-bg) 52%, transparent 48%);
}
.act-tw-h-line {
  position: absolute;
  top: calc(var(--act-tw-line) - var(--act-tl-line-width) / 2);
  left: 0;
  width: 100%;
  height: var(--act-tl-line-width);
  background-color: var(--act-tl-line-bg);
}
.act-tw-line-fill { display: none; }
.act-tw-nav {
  position: absolute;
  top: calc(var(--act-tw-line) - 12px);
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--act-tl-line-bg);
  font-size: 20px;
  cursor: pointer;
}
.act-tw-nav .act-svg-icon { width: 1em; height: 1em; fill: currentColor; }
.act-tw-nav[disabled] { opacity: 0.5; cursor: not-allowed; }
.act-tw-nav--prev { inset-inline-start: -24px; }
.act-tw-nav--next { inset-inline-end: -24px; }

@media (max-width: 1024px) { .act-tw-horizontal-timeline .act-tw-story { flex-basis: 50%; } }
@media (max-width: 767px) { .act-tw-horizontal-timeline .act-tw-story { flex-basis: 100%; } }

/* 直式（卡片在右）：時間線在左側三分之一處，標籤在線的左邊；手機上線靠左、標籤移到卡片上方 */
.act-tw-vertical {
  max-width: 1600px;
  margin: 0 auto;
  padding: calc(var(--act-tl-line-width) * 3) 0;
}
.act-tw-vertical .act-tw-start,
.act-tw-vertical .act-tw-end {
  position: absolute;
  z-index: 9;
  left: calc(33.33% - var(--act-tl-line-width) * 1.5);
  width: calc(var(--act-tl-line-width) * 3);
  height: calc(var(--act-tl-line-width) * 3);
  border-radius: 50%;
  background-color: var(--act-tl-line-bg);
}
.act-tw-vertical .act-tw-start { top: 2px; }
.act-tw-vertical .act-tw-end { bottom: 2px; }
.act-tw-vertical .act-tw-timeline {
  position: relative;
  display: flow-root;
  width: 100%;
  margin: 0;
  padding: 40px 0;
}
.act-tw-vertical .act-tw-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(33.33% - var(--act-tl-line-width) / 2);
  width: var(--act-tl-line-width);
  background-color: var(--act-tl-line-bg);
}
.act-tw-vertical .act-tw-story {
  position: relative;
  float: right;
  clear: both;
  width: calc(66.66% - var(--act-tl-ibx-size));
  margin-bottom: var(--act-tl-cbx-bottom-margin);
  text-align: left;
}
.act-tw-vertical .act-tw-labels {
  top: calc(var(--act-tl-ibx-size) / 2 - var(--act-tl-lbl-big-size) / 2);
  left: calc((var(--act-tl-ibx-size) - 100%) / 2 - var(--act-tl-ibx-size) * 2);
  width: calc((100% + var(--act-tl-ibx-size)) / 2 - var(--act-tl-ibx-size));
  justify-content: space-between;
  text-align: right;
}
.act-tw-vertical .act-tw-icon { top: 0; left: calc(var(--act-tl-ibx-size) * -1.5); }
.act-tw-vertical .act-tw-arrow {
  top: calc(var(--act-tl-ibx-size) / 2 - var(--act-tl-ibx-size) / 7);
  left: calc(1px - var(--act-tl-ibx-size) / 7);
  border-width: 0 0 3px 3px;
  background: linear-gradient(to top right, var(--act-tl-cbx-bg) 52%, transparent 48%);
  box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, 0.4);
}
.act-tw-vertical .act-tw-content { border-left-width: 3px; }
@media (max-width: 767px) {
  .act-tw-vertical { --act-tw-lbl: calc(var(--act-tl-lbl-big-size) + var(--act-tl-lbl-small-size) + var(--act-tl-lbl-gap) + 12px); }
  .act-tw-vertical .act-tw-start,
  .act-tw-vertical .act-tw-end { left: calc(var(--act-tl-ibx-size) / 2 - var(--act-tl-line-width) * 1.5); }
  .act-tw-vertical .act-tw-timeline::before { left: calc(var(--act-tl-ibx-size) / 2 - var(--act-tl-line-width) / 2); }
  .act-tw-vertical .act-tw-story { width: calc(100% - var(--act-tl-ibx-size) * 1.5); }
  .act-tw-vertical .act-tw-labels {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 12px;
    text-align: left;
  }
  .act-tw-vertical .act-tw-icon { top: var(--act-tw-lbl); }
  .act-tw-vertical .act-tw-arrow { top: calc(var(--act-tl-ibx-size) / 2 - var(--act-tl-ibx-size) / 7 + var(--act-tw-lbl)); }
}

/* --------------------------------------------------------------------------
   18. 元件：文章資訊
   -------------------------------------------------------------------------- */
.act-post-info { list-style: none; margin: 0; padding: 0; }
.act-post-info__item { display: inline-flex; align-items: center; gap: 4px; }
.act-post-info__terms-list,
.act-post-info__terms-list-item { display: inline; }

/* --------------------------------------------------------------------------
   19. 導覽列
   -------------------------------------------------------------------------- */
.act-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.act-nav-menu--layout-horizontal > .act-nav-menu { flex-wrap: nowrap; }
.act-nav-menu__align-center .act-nav-menu { justify-content: center; }
.act-nav-menu__align-end .act-nav-menu { justify-content: flex-end; }
/* 平均分配：選單撐滿整列，每一項等分剩餘寬度、文字置中 */
.act-nav-menu__align-justify .act-nav-menu--layout-horizontal > .act-nav-menu { width: 100%; }
.act-nav-menu__align-justify .act-nav-menu--layout-horizontal > .act-nav-menu > li { flex-grow: 1; }
.act-nav-menu__align-justify .act-nav-menu--layout-horizontal > .act-nav-menu > li > a { text-align: center; }
.act-nav-menu__text-align-aside .act-nav-menu { justify-content: flex-end; }

/* 原站選單項目一律無內距（頁首「報名專區」按鈕自己的內距因此不生效）、連結固定 20px 行高 */
.act-nav-menu li { position: relative; padding: 0; line-height: normal; }
.act-nav-menu .act-item {
  display: block;
  position: relative;
  padding: 13px 20px;
  line-height: 20px;
  color: #54595f;
}
.act-nav-menu--main .act-item:hover,
.act-nav-menu--main .act-item:focus,
.act-nav-menu--main .act-item.act-item-active { color: var(--act-brand); }

/* 底線指標 */
/* 轉換工具把 e--pointer-underline 改名為 act-e--pointer-underline；
   頁面樣式可再覆寫顏色或把高度設為 0 */
.act-nav-menu--main.act-e--pointer-underline .act-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 3px;
  background-color: #3f444b;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.58, 0.3, 0.005, 1);
}
.act-nav-menu--main.act-e--pointer-underline .act-item:hover::after,
.act-nav-menu--main.act-e--pointer-underline .act-item:focus::after,
.act-nav-menu--main.act-e--pointer-underline .act-item.act-item-active::after { opacity: 1; }

/* 下拉子選單 */
.act-nav-menu--main .act-submenu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 12em;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  display: none;
  z-index: 100;
  flex-direction: column;
}
.act-nav-menu--main li:hover > .act-submenu,
.act-nav-menu--main li:focus-within > .act-submenu,
.act-nav-menu--main li.act-is-open > .act-submenu { display: flex; }
.act-nav-menu--main .act-submenu .act-sub-item {
  display: block;
  padding: 12px 18px;
  color: #54595f;
  white-space: nowrap;
}
.act-nav-menu--main .act-submenu .act-sub-item:hover { background-color: #f5f5f5; }
.act-sub-arrow { display: inline-flex; align-items: center; padding-inline-start: 10px; line-height: 1; vertical-align: middle; }
.act-sub-arrow .act-svg-icon { width: 1em; height: 1em; fill: currentColor; }

.act-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.25em;
  font-size: 22px;
  color: #33373d;
  border: 0;
  border-radius: 3px;
  background-color: transparent;
  cursor: pointer;
  margin-inline-start: auto;
}
.act-menu-toggle .act-svg-icon { width: 1em; height: 1em; }
.act-menu-toggle__icon--close { display: none; }
.act-menu-toggle.act-active .act-menu-toggle__icon--close { display: block; }
.act-menu-toggle.act-active .act-menu-toggle__icon--open { display: none; }

nav.act-nav-menu--dropdown {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline-start: auto;
  inset-inline-end: 0;
  min-width: min(300px, 92vw);
  z-index: 9999;
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  max-height: 80vh;
  overflow-y: auto;
}
nav.act-nav-menu--dropdown.act-is-open { display: block; }
.act-nav-menu--dropdown .act-nav-menu { flex-direction: column; flex-wrap: nowrap; }
.act-nav-menu--dropdown .act-item,
.act-nav-menu--dropdown .act-sub-item {
  display: block;
  padding: 14px 20px;
  color: #54595f;
  border-block-end: 1px solid #f0f0f0;
}
.act-nav-menu--dropdown .act-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fafafa;
}
.act-nav-menu--dropdown .act-submenu .act-sub-item { padding-inline-start: 36px; }
.act-nav-menu--dropdown li.act-menu-item-has-children > a { padding-inline-end: 48px; }

/* 依設定切換為漢堡選單 */
@media (max-width: 1024px) {
  .act-nav-menu--dropdown-tablet nav.act-nav-menu--main { display: none; }
  .act-nav-menu--dropdown-tablet .act-menu-toggle { display: flex; }
}
@media (max-width: 767px) {
  .act-nav-menu--dropdown-mobile nav.act-nav-menu--main { display: none; }
  .act-nav-menu--dropdown-mobile .act-menu-toggle { display: flex; }
}

/* --------------------------------------------------------------------------
   20. 頁首 / 頁尾
   -------------------------------------------------------------------------- */
.act-main { display: block; }
.act-site-footer { padding: 30px 20px; text-align: center; }
.act-footer-inner { max-width: var(--act-content-width); margin-inline: auto; }
.act-copyright { font-size: 13px; }
.act-copyright.act-hide { display: none; }

.act-sticky--active { position: sticky; top: 0; z-index: 999; }

/* --------------------------------------------------------------------------
   21. 回到頂端按鈕
   -------------------------------------------------------------------------- */
.act-scroll-top {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 20px;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(23, 153, 150, 0.85);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background-color var(--act-transition);
}
.act-scroll-top.act-is-visible { display: flex; opacity: 0.8; }
.act-scroll-top:hover { opacity: 1; background-color: var(--act-brand); }
.act-scroll-top .act-svg-icon { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   22. 進場動畫
   -------------------------------------------------------------------------- */
.act-invisible { visibility: hidden; }

.act-anim-fade-in { animation: act-fade-in 1s both; }
.act-anim-fade-in-up { animation: act-fade-in-up 1s both; }
.act-anim-fade-in-left { animation: act-fade-in-left 1s both; }
.act-anim-fade-in-right { animation: act-fade-in-right 1s both; }

@keyframes act-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes act-fade-in-up { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes act-fade-in-left { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes act-fade-in-right { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }

.act-animation-grow { transition: transform 0.3s; }
.act-animation-grow:hover { transform: scale(1.1); }
.act-animation-float { transition: transform 0.3s; }
.act-animation-float:hover { transform: translateY(-8px); }

.act-ken-burns { transition: transform 10s ease; }
.act-ken-burns--out { transform: scale(1.15); }

/* --------------------------------------------------------------------------
   23. 其他版面細節
   -------------------------------------------------------------------------- */
.act-shortcode > .act-doc { width: 100%; }
.act-widget-shortcode { width: 100%; }

/* 分類彙整頁 */
.act-archive .act-page-header {
  max-width: var(--act-content-width);
  margin: 30px auto 10px;
  padding-inline: 20px;
}
.act-archive .act-page-header .act-entry-title {
  display: block;
  font-size: 28px;
  color: #54595f;
}
.act-archive .act-page-content {
  max-width: var(--act-content-width);
  margin-inline: auto;
  padding: 10px 20px 40px;
}
.act-archive article {
  padding-block: 18px;
  border-block-end: 1px solid #ececec;
}
.act-archive article .act-entry-title {
  display: block;
  font-size: 20px;
  margin-block-end: 6px;
}
.act-archive article .act-entry-title a { color: var(--act-brand); }
.act-archive article .act-entry-title a:hover { text-decoration: underline; }
.act-archive .act-pagination,
.act-archive .act-nav-links {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px;
}

/* 子選單展開按鈕 */
.act-submenu-toggle {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.act-nav-menu--dropdown .act-submenu-toggle { display: flex; }
.act-nav-menu--dropdown li.act-is-open > .act-submenu-toggle { transform: translateY(-50%) rotate(180deg); }
.act-nav-menu--dropdown .act-submenu { display: none; }
.act-nav-menu--dropdown li.act-is-open > .act-submenu { display: block; }

/* 文件檢視器延後載入 */
.act-doc-embed__facade {
  display: block;
  width: 100%;
  height: var(--act-doc-height, 600px);
  border: 1px dashed #cfd4d8;
  background: #f7f7f7;
  color: #54595f;
  font-size: 15px;
  cursor: pointer;
}
.act-doc-embed__facade:hover { background: #eef4f4; color: var(--act-brand); }

/* 舊版 Safari 沒有 aspect-ratio，改用 padding 比例維持版面 */
@supports not (aspect-ratio: 1 / 1) {
  .act-widget-video .act-wrapper,
  .act-gallery-item {
    height: 0;
    overflow: hidden;
  }
  .act-widget-video .act-wrapper { padding-bottom: 56.25%; }
  .act-gallery-item { padding-bottom: 66.667%; }
  .act-widget-video .act-wrapper > *,
  .act-gallery-item > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* 分類篩選列：尚未展開的下一層（由 site.js 加上；沒有 JavaScript 時全部顯示） */
.act-widget.act-is-collapsed { display: none; }

/* 文章摺疊列表 */
.act-ucu-content.act-is-open { display: block !important; }
.act-uc-heading { cursor: pointer; }
.act-uc-heading:focus-visible { outline: 2px solid var(--act-brand); outline-offset: -2px; }

/* 背景粒子 */
.act-bg-particles {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.act-bg-particles canvas { display: block; width: 100%; height: 100%; }

/* 背景流動漸層（漸層顏色由各頁的 act-s-* 類別指定） */
.act-bg-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: 400% 400%;
  animation: act-bg-gradient 15s ease infinite;
}
@keyframes act-bg-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .act-bg-gradient { animation: none; }
}

/* 分類彙整頁的文章縮圖填滿內容寬度 */
.act-archive article .act-wp-post-image { width: 100%; max-height: 500px; object-fit: cover; }

.act-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.act-table-scroll > table { min-width: 480px; }

@media (max-width: 767px) {
  .act-slide-heading { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   24. 列印
   -------------------------------------------------------------------------- */
@media print {
  .act-scroll-top,
  .act-menu-toggle,
  .act-submenu-toggle,
  .act-lightbox,
  .act-bg-particles,
  .act-bg-gradient,
  .act-slides__nav,
  .act-slides__dots,
  .act-tw-nav,
  .act-video-facade,
  .act-skip-link,
  .act-widget-nav-menu,
  .act-nav-menu,
  .act-site-footer { display: none !important; }

  /* 置頂列印出來會蓋住內容，改為隨文流排版 */
  .act-sticky--active { position: static !important; }

  .act-invisible { visibility: visible !important; }
  .act-tab-content,
  .act-ekt-tab-pane,
  .act-bs-tab-pane,
  .act-ucu-content { display: block !important; }

  /* 瀏覽器列印時預設不輸出背景色，站上大量淺色文字配深色底的區塊
     會變成白底白字，因此一律轉為黑字白底 */
  body,
  body * {
    color: #000 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body { background-color: #fff !important; }
  /* 圖示的填色寫在各頁樣式裡，常是白色；跟著文字轉黑才印得出來 */
  .act-svg-icon,
  .act-svg-icon * { fill: currentColor !important; }

  .act-doc-embed__frame { display: none; }
  .act-doc-embed__bar { border: 1px solid #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}