@charset "UTF-8";
/* ========================
  🎨 Design Tokens - Variables
======================== */
/* Color */
/* Breakpoints（對齊 Bootstrap） */
/* Font Size - Desktop */
/* Font Size - Mobile */
/* Font Family */
/* ============================================================
  📐 Section Spacing System
  ─────────────────────────────────────────────────────────────
  兩層分離：
    content spacing → 保留 Bootstrap 0–5（py-0 ~ py-5）
    section spacing → 本檔，專用大間距 token（0–6）

  X 軸兩種模式：
    數值型 → .section-px-{0~6}    (0 / 1 / 2 / 3 / 4 / 5 / 6)
    語意型 → .section-inset-{mode} (bleed / none / narrow / container / wide)
============================================================ */
/* ============================================================
  🔢 Y-axis Token Maps
  ─────────────────────────────────────────────────────────────
  0 = none（0px）
  1 = xs  （24px desktop）
  2 = sm  （40px desktop）
  3 = md  （60px desktop）
  4 = lg  （80px desktop）← 最常用，對應舊 section-py-lg
  5 = xl  （120px desktop）
  6 = 2xl （160px desktop）
============================================================ */
/* Desktop（≥ lg / 992px）- 設計稿標準值 */
/* Tablet（≥ md / 768px，< lg） */
/* Mobile（< md / 768px） */
/* ============================================================
  🔢 X-axis Numeric Token Maps（同 Y 軸尺度）
============================================================ */
/* ============================================================
  📦 X-axis Inset Maps（語意模式）
  ─────────────────────────────────────────────────────────────
  bleed     → 0，內容貼邊（全出血）
  none      → 0，無內縮（同 bleed，語意 alias）
  narrow    → 輕微內縮（適合緊湊版型）
  container → Bootstrap container-like 內縮
  wide      → 寬版內縮（≈ 舊 section-px 值，桌機 4rem / 手機 1.5rem）
============================================================ */
/* ============================================================
  🔧 Mixins
  ─────────────────────────────────────────────────────────────
  用途：在 style.scss 的客製 section 內使用，避免重複寫斷點。

  @include section-py("4");        // 上下間距（全斷點 RWD）
  @include section-pt("3");        // 僅上（全斷點 RWD）
  @include section-pb("5");        // 僅下（全斷點 RWD）
  @include section-px("2");        // X 數值型（全斷點 RWD）
  @include section-inset("wide");  // X 語意型（全斷點 RWD）

  斷點變體（Bootstrap 5 慣例 {prop}-{bp}-{size}）：
  .section-pt-lg-4   → ≥lg 才套用桌機值，以下不作用
  .section-pt-md-4   → ≥md 才套用平板值，以下不作用
  同理：py / pt / pb / px / ps / pe 都有 lg / md 版本
============================================================ */
/* ============================================================
  🎨 Utility Classes — Y 軸
  ─────────────────────────────────────────────────────────────
  .section-py-{0~6}   → padding-top + bottom（RWD 自動縮放）
  .section-pt-{0~6}   → 僅 padding-top
  .section-pb-{0~6}   → 僅 padding-bottom
============================================================ */
.section-py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
@media (min-width: 768px) {
  .section-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (min-width: 992px) {
  .section-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.section-pt-0 {
  padding-top: 0;
}
@media (min-width: 768px) {
  .section-pt-0 {
    padding-top: 0;
  }
}
@media (min-width: 992px) {
  .section-pt-0 {
    padding-top: 0;
  }
}

.section-pb-0 {
  padding-bottom: 0;
}
@media (min-width: 768px) {
  .section-pb-0 {
    padding-bottom: 0;
  }
}
@media (min-width: 992px) {
  .section-pb-0 {
    padding-bottom: 0;
  }
}

.section-py-1 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .section-py-1 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}
@media (min-width: 992px) {
  .section-py-1 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.section-pt-1 {
  padding-top: 1.5rem;
}
@media (min-width: 768px) {
  .section-pt-1 {
    padding-top: 1.5rem;
  }
}
@media (min-width: 992px) {
  .section-pt-1 {
    padding-top: 1.5rem;
  }
}

.section-pb-1 {
  padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .section-pb-1 {
    padding-bottom: 1.5rem;
  }
}
@media (min-width: 992px) {
  .section-pb-1 {
    padding-bottom: 1.5rem;
  }
}

.section-py-2 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .section-py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
@media (min-width: 992px) {
  .section-py-2 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.section-pt-2 {
  padding-top: 1.5rem;
}
@media (min-width: 768px) {
  .section-pt-2 {
    padding-top: 2rem;
  }
}
@media (min-width: 992px) {
  .section-pt-2 {
    padding-top: 2.5rem;
  }
}

.section-pb-2 {
  padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .section-pb-2 {
    padding-bottom: 2rem;
  }
}
@media (min-width: 992px) {
  .section-pb-2 {
    padding-bottom: 2.5rem;
  }
}

.section-py-3 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .section-py-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
@media (min-width: 992px) {
  .section-py-3 {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }
}

.section-pt-3 {
  padding-top: 2.5rem;
}
@media (min-width: 768px) {
  .section-pt-3 {
    padding-top: 3rem;
  }
}
@media (min-width: 992px) {
  .section-pt-3 {
    padding-top: 3.75rem;
  }
}

.section-pb-3 {
  padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .section-pb-3 {
    padding-bottom: 3rem;
  }
}
@media (min-width: 992px) {
  .section-pb-3 {
    padding-bottom: 3.75rem;
  }
}

.section-py-4 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .section-py-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@media (min-width: 992px) {
  .section-py-4 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.section-pt-4 {
  padding-top: 3rem;
}
@media (min-width: 768px) {
  .section-pt-4 {
    padding-top: 4rem;
  }
}
@media (min-width: 992px) {
  .section-pt-4 {
    padding-top: 5rem;
  }
}

.section-pb-4 {
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .section-pb-4 {
    padding-bottom: 4rem;
  }
}
@media (min-width: 992px) {
  .section-pb-4 {
    padding-bottom: 5rem;
  }
}

.section-py-5 {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
@media (min-width: 768px) {
  .section-py-5 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
@media (min-width: 992px) {
  .section-py-5 {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

.section-pt-5 {
  padding-top: 4.5rem;
}
@media (min-width: 768px) {
  .section-pt-5 {
    padding-top: 6rem;
  }
}
@media (min-width: 992px) {
  .section-pt-5 {
    padding-top: 7.5rem;
  }
}

.section-pb-5 {
  padding-bottom: 4.5rem;
}
@media (min-width: 768px) {
  .section-pb-5 {
    padding-bottom: 6rem;
  }
}
@media (min-width: 992px) {
  .section-pb-5 {
    padding-bottom: 7.5rem;
  }
}

.section-py-6 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .section-py-6 {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}
@media (min-width: 992px) {
  .section-py-6 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}

.section-pt-6 {
  padding-top: 5rem;
}
@media (min-width: 768px) {
  .section-pt-6 {
    padding-top: 7.5rem;
  }
}
@media (min-width: 992px) {
  .section-pt-6 {
    padding-top: 10rem;
  }
}

.section-pb-6 {
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .section-pb-6 {
    padding-bottom: 7.5rem;
  }
}
@media (min-width: 992px) {
  .section-pb-6 {
    padding-bottom: 10rem;
  }
}

/* ============================================================
  🎨 Utility Classes — X 軸數值型
  ─────────────────────────────────────────────────────────────
  .section-px-{0~6}   → padding-left + right（RWD 自動縮放）
  .section-ps-{0~6}   → 僅 padding-left（start）
  .section-pe-{0~6}   → 僅 padding-right（end）
============================================================ */
.section-px-0 {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .section-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 992px) {
  .section-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
}

.section-ps-0 {
  padding-left: 0;
}
@media (min-width: 768px) {
  .section-ps-0 {
    padding-left: 0;
  }
}
@media (min-width: 992px) {
  .section-ps-0 {
    padding-left: 0;
  }
}

.section-pe-0 {
  padding-right: 0;
}
@media (min-width: 768px) {
  .section-pe-0 {
    padding-right: 0;
  }
}
@media (min-width: 992px) {
  .section-pe-0 {
    padding-right: 0;
  }
}

.section-px-1 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .section-px-1 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 992px) {
  .section-px-1 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.section-ps-1 {
  padding-left: 1.5rem;
}
@media (min-width: 768px) {
  .section-ps-1 {
    padding-left: 1.5rem;
  }
}
@media (min-width: 992px) {
  .section-ps-1 {
    padding-left: 1.5rem;
  }
}

.section-pe-1 {
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .section-pe-1 {
    padding-right: 1.5rem;
  }
}
@media (min-width: 992px) {
  .section-pe-1 {
    padding-right: 1.5rem;
  }
}

.section-px-2 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .section-px-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 992px) {
  .section-px-2 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.section-ps-2 {
  padding-left: 1.5rem;
}
@media (min-width: 768px) {
  .section-ps-2 {
    padding-left: 2rem;
  }
}
@media (min-width: 992px) {
  .section-ps-2 {
    padding-left: 2.5rem;
  }
}

.section-pe-2 {
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .section-pe-2 {
    padding-right: 2rem;
  }
}
@media (min-width: 992px) {
  .section-pe-2 {
    padding-right: 2.5rem;
  }
}

.section-px-3 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
@media (min-width: 768px) {
  .section-px-3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (min-width: 992px) {
  .section-px-3 {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
  }
}

.section-ps-3 {
  padding-left: 2.5rem;
}
@media (min-width: 768px) {
  .section-ps-3 {
    padding-left: 3rem;
  }
}
@media (min-width: 992px) {
  .section-ps-3 {
    padding-left: 3.75rem;
  }
}

.section-pe-3 {
  padding-right: 2.5rem;
}
@media (min-width: 768px) {
  .section-pe-3 {
    padding-right: 3rem;
  }
}
@media (min-width: 992px) {
  .section-pe-3 {
    padding-right: 3.75rem;
  }
}

.section-px-4 {
  padding-left: 3rem;
  padding-right: 3rem;
}
@media (min-width: 768px) {
  .section-px-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
@media (min-width: 992px) {
  .section-px-4 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.section-ps-4 {
  padding-left: 3rem;
}
@media (min-width: 768px) {
  .section-ps-4 {
    padding-left: 4rem;
  }
}
@media (min-width: 992px) {
  .section-ps-4 {
    padding-left: 5rem;
  }
}

.section-pe-4 {
  padding-right: 3rem;
}
@media (min-width: 768px) {
  .section-pe-4 {
    padding-right: 4rem;
  }
}
@media (min-width: 992px) {
  .section-pe-4 {
    padding-right: 5rem;
  }
}

.section-px-5 {
  padding-left: 4.5rem;
  padding-right: 4.5rem;
}
@media (min-width: 768px) {
  .section-px-5 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}
@media (min-width: 992px) {
  .section-px-5 {
    padding-left: 7.5rem;
    padding-right: 7.5rem;
  }
}

.section-ps-5 {
  padding-left: 4.5rem;
}
@media (min-width: 768px) {
  .section-ps-5 {
    padding-left: 6rem;
  }
}
@media (min-width: 992px) {
  .section-ps-5 {
    padding-left: 7.5rem;
  }
}

.section-pe-5 {
  padding-right: 4.5rem;
}
@media (min-width: 768px) {
  .section-pe-5 {
    padding-right: 6rem;
  }
}
@media (min-width: 992px) {
  .section-pe-5 {
    padding-right: 7.5rem;
  }
}

.section-px-6 {
  padding-left: 5rem;
  padding-right: 5rem;
}
@media (min-width: 768px) {
  .section-px-6 {
    padding-left: 7.5rem;
    padding-right: 7.5rem;
  }
}
@media (min-width: 992px) {
  .section-px-6 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
}

.section-ps-6 {
  padding-left: 5rem;
}
@media (min-width: 768px) {
  .section-ps-6 {
    padding-left: 7.5rem;
  }
}
@media (min-width: 992px) {
  .section-ps-6 {
    padding-left: 10rem;
  }
}

.section-pe-6 {
  padding-right: 5rem;
}
@media (min-width: 768px) {
  .section-pe-6 {
    padding-right: 7.5rem;
  }
}
@media (min-width: 992px) {
  .section-pe-6 {
    padding-right: 10rem;
  }
}

/* ============================================================
  🎨 Utility Classes — X 軸語意型（inset）
  ─────────────────────────────────────────────────────────────
  .section-inset-{mode}    → padding-left + right（RWD）
  .section-inset-s-{mode}  → 僅 padding-left（start）
  .section-inset-e-{mode}  → 僅 padding-right（end）
  mode: bleed / none / narrow / container / wide
============================================================ */
.section-inset-bleed {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .section-inset-bleed {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 992px) {
  .section-inset-bleed {
    padding-left: 0;
    padding-right: 0;
  }
}

.section-inset-s-bleed {
  padding-left: 0;
}
@media (min-width: 768px) {
  .section-inset-s-bleed {
    padding-left: 0;
  }
}
@media (min-width: 992px) {
  .section-inset-s-bleed {
    padding-left: 0;
  }
}

.section-inset-e-bleed {
  padding-right: 0;
}
@media (min-width: 768px) {
  .section-inset-e-bleed {
    padding-right: 0;
  }
}
@media (min-width: 992px) {
  .section-inset-e-bleed {
    padding-right: 0;
  }
}

.section-inset-none {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .section-inset-none {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 992px) {
  .section-inset-none {
    padding-left: 0;
    padding-right: 0;
  }
}

.section-inset-s-none {
  padding-left: 0;
}
@media (min-width: 768px) {
  .section-inset-s-none {
    padding-left: 0;
  }
}
@media (min-width: 992px) {
  .section-inset-s-none {
    padding-left: 0;
  }
}

.section-inset-e-none {
  padding-right: 0;
}
@media (min-width: 768px) {
  .section-inset-e-none {
    padding-right: 0;
  }
}
@media (min-width: 992px) {
  .section-inset-e-none {
    padding-right: 0;
  }
}

.section-inset-narrow {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
@media (min-width: 768px) {
  .section-inset-narrow {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 992px) {
  .section-inset-narrow {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.section-inset-s-narrow {
  padding-left: 0.75rem;
}
@media (min-width: 768px) {
  .section-inset-s-narrow {
    padding-left: 1rem;
  }
}
@media (min-width: 992px) {
  .section-inset-s-narrow {
    padding-left: 1.5rem;
  }
}

.section-inset-e-narrow {
  padding-right: 0.75rem;
}
@media (min-width: 768px) {
  .section-inset-e-narrow {
    padding-right: 1rem;
  }
}
@media (min-width: 992px) {
  .section-inset-e-narrow {
    padding-right: 1.5rem;
  }
}

.section-inset-container {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .section-inset-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 992px) {
  .section-inset-container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.section-inset-s-container {
  padding-left: 1rem;
}
@media (min-width: 768px) {
  .section-inset-s-container {
    padding-left: 2rem;
  }
}
@media (min-width: 992px) {
  .section-inset-s-container {
    padding-left: 3rem;
  }
}

.section-inset-e-container {
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .section-inset-e-container {
    padding-right: 2rem;
  }
}
@media (min-width: 992px) {
  .section-inset-e-container {
    padding-right: 3rem;
  }
}

.section-inset-wide {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .section-inset-wide {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 992px) {
  .section-inset-wide {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.section-inset-s-wide {
  padding-left: 1.5rem;
}
@media (min-width: 768px) {
  .section-inset-s-wide {
    padding-left: 2.5rem;
  }
}
@media (min-width: 992px) {
  .section-inset-s-wide {
    padding-left: 4rem;
  }
}

.section-inset-e-wide {
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .section-inset-e-wide {
    padding-right: 2.5rem;
  }
}
@media (min-width: 992px) {
  .section-inset-e-wide {
    padding-right: 4rem;
  }
}

/* ============================================================
  📱 Breakpoint Variants — Y 軸（Bootstrap 5 慣例）
  ─────────────────────────────────────────────────────────────
  .section-py-lg-{0~6}  → ≥lg（992px）才作用，套用桌機 token 值
  .section-py-md-{0~6}  → ≥md（768px）才作用，套用平板 token 值
  同理：pt / pb

  用法：
  搭配無斷點版本做覆蓋，例：
  class="section-pt-0 section-pt-lg-4"  ← 手機無上距，桌機 80px
============================================================ */
@media (min-width: 992px) {
  .section-py-lg-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media (min-width: 992px) {
  .section-pt-lg-0 {
    padding-top: 0;
  }
}

@media (min-width: 992px) {
  .section-pb-lg-0 {
    padding-bottom: 0;
  }
}

@media (min-width: 992px) {
  .section-py-lg-1 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 992px) {
  .section-pt-lg-1 {
    padding-top: 1.5rem;
  }
}

@media (min-width: 992px) {
  .section-pb-lg-1 {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 992px) {
  .section-py-lg-2 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 992px) {
  .section-pt-lg-2 {
    padding-top: 2.5rem;
  }
}

@media (min-width: 992px) {
  .section-pb-lg-2 {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 992px) {
  .section-py-lg-3 {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }
}

@media (min-width: 992px) {
  .section-pt-lg-3 {
    padding-top: 3.75rem;
  }
}

@media (min-width: 992px) {
  .section-pb-lg-3 {
    padding-bottom: 3.75rem;
  }
}

@media (min-width: 992px) {
  .section-py-lg-4 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (min-width: 992px) {
  .section-pt-lg-4 {
    padding-top: 5rem;
  }
}

@media (min-width: 992px) {
  .section-pb-lg-4 {
    padding-bottom: 5rem;
  }
}

@media (min-width: 992px) {
  .section-py-lg-5 {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

@media (min-width: 992px) {
  .section-pt-lg-5 {
    padding-top: 7.5rem;
  }
}

@media (min-width: 992px) {
  .section-pb-lg-5 {
    padding-bottom: 7.5rem;
  }
}

@media (min-width: 992px) {
  .section-py-lg-6 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}

@media (min-width: 992px) {
  .section-pt-lg-6 {
    padding-top: 10rem;
  }
}

@media (min-width: 992px) {
  .section-pb-lg-6 {
    padding-bottom: 10rem;
  }
}

@media (min-width: 768px) {
  .section-py-md-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media (min-width: 768px) {
  .section-pt-md-0 {
    padding-top: 0;
  }
}

@media (min-width: 768px) {
  .section-pb-md-0 {
    padding-bottom: 0;
  }
}

@media (min-width: 768px) {
  .section-py-md-1 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 768px) {
  .section-pt-md-1 {
    padding-top: 1.5rem;
  }
}

@media (min-width: 768px) {
  .section-pb-md-1 {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 768px) {
  .section-py-md-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 768px) {
  .section-pt-md-2 {
    padding-top: 2rem;
  }
}

@media (min-width: 768px) {
  .section-pb-md-2 {
    padding-bottom: 2rem;
  }
}

@media (min-width: 768px) {
  .section-py-md-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 768px) {
  .section-pt-md-3 {
    padding-top: 3rem;
  }
}

@media (min-width: 768px) {
  .section-pb-md-3 {
    padding-bottom: 3rem;
  }
}

@media (min-width: 768px) {
  .section-py-md-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 768px) {
  .section-pt-md-4 {
    padding-top: 4rem;
  }
}

@media (min-width: 768px) {
  .section-pb-md-4 {
    padding-bottom: 4rem;
  }
}

@media (min-width: 768px) {
  .section-py-md-5 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 768px) {
  .section-pt-md-5 {
    padding-top: 6rem;
  }
}

@media (min-width: 768px) {
  .section-pb-md-5 {
    padding-bottom: 6rem;
  }
}

@media (min-width: 768px) {
  .section-py-md-6 {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

@media (min-width: 768px) {
  .section-pt-md-6 {
    padding-top: 7.5rem;
  }
}

@media (min-width: 768px) {
  .section-pb-md-6 {
    padding-bottom: 7.5rem;
  }
}

/* ============================================================
  📱 Breakpoint Variants — X 軸（Bootstrap 5 慣例）
  ─────────────────────────────────────────────────────────────
  .section-px-lg-{0~6}  → ≥lg 才作用，套用桌機 token 值
  .section-px-md-{0~6}  → ≥md 才作用，套用平板 token 值
  同理：ps / pe
============================================================ */
@media (min-width: 992px) {
  .section-px-lg-0 {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 992px) {
  .section-ps-lg-0 {
    padding-left: 0;
  }
}

@media (min-width: 992px) {
  .section-pe-lg-0 {
    padding-right: 0;
  }
}

@media (min-width: 992px) {
  .section-px-lg-1 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 992px) {
  .section-ps-lg-1 {
    padding-left: 1.5rem;
  }
}

@media (min-width: 992px) {
  .section-pe-lg-1 {
    padding-right: 1.5rem;
  }
}

@media (min-width: 992px) {
  .section-px-lg-2 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 992px) {
  .section-ps-lg-2 {
    padding-left: 2.5rem;
  }
}

@media (min-width: 992px) {
  .section-pe-lg-2 {
    padding-right: 2.5rem;
  }
}

@media (min-width: 992px) {
  .section-px-lg-3 {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
  }
}

@media (min-width: 992px) {
  .section-ps-lg-3 {
    padding-left: 3.75rem;
  }
}

@media (min-width: 992px) {
  .section-pe-lg-3 {
    padding-right: 3.75rem;
  }
}

@media (min-width: 992px) {
  .section-px-lg-4 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media (min-width: 992px) {
  .section-ps-lg-4 {
    padding-left: 5rem;
  }
}

@media (min-width: 992px) {
  .section-pe-lg-4 {
    padding-right: 5rem;
  }
}

@media (min-width: 992px) {
  .section-px-lg-5 {
    padding-left: 7.5rem;
    padding-right: 7.5rem;
  }
}

@media (min-width: 992px) {
  .section-ps-lg-5 {
    padding-left: 7.5rem;
  }
}

@media (min-width: 992px) {
  .section-pe-lg-5 {
    padding-right: 7.5rem;
  }
}

@media (min-width: 992px) {
  .section-px-lg-6 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
}

@media (min-width: 992px) {
  .section-ps-lg-6 {
    padding-left: 10rem;
  }
}

@media (min-width: 992px) {
  .section-pe-lg-6 {
    padding-right: 10rem;
  }
}

@media (min-width: 768px) {
  .section-px-md-0 {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .section-ps-md-0 {
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .section-pe-md-0 {
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .section-px-md-1 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .section-ps-md-1 {
    padding-left: 1.5rem;
  }
}

@media (min-width: 768px) {
  .section-pe-md-1 {
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .section-px-md-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .section-ps-md-2 {
    padding-left: 2rem;
  }
}

@media (min-width: 768px) {
  .section-pe-md-2 {
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .section-px-md-3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 768px) {
  .section-ps-md-3 {
    padding-left: 3rem;
  }
}

@media (min-width: 768px) {
  .section-pe-md-3 {
    padding-right: 3rem;
  }
}

@media (min-width: 768px) {
  .section-px-md-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (min-width: 768px) {
  .section-ps-md-4 {
    padding-left: 4rem;
  }
}

@media (min-width: 768px) {
  .section-pe-md-4 {
    padding-right: 4rem;
  }
}

@media (min-width: 768px) {
  .section-px-md-5 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}

@media (min-width: 768px) {
  .section-ps-md-5 {
    padding-left: 6rem;
  }
}

@media (min-width: 768px) {
  .section-pe-md-5 {
    padding-right: 6rem;
  }
}

@media (min-width: 768px) {
  .section-px-md-6 {
    padding-left: 7.5rem;
    padding-right: 7.5rem;
  }
}

@media (min-width: 768px) {
  .section-ps-md-6 {
    padding-left: 7.5rem;
  }
}

@media (min-width: 768px) {
  .section-pe-md-6 {
    padding-right: 7.5rem;
  }
}

/* Root Tokens（給 CSS / JS 共用） */
:root {
  /* Font Size - Desktop */
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.125rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.5rem;
  /* Font Size - Mobile */
  --fs-h1-m: 1.2rem;
  --fs-h2-m: 1rem;
  --fs-h3-m: 0.8rem;
  --fs-h4-m: 1rem;
  --fs-small-m: 0.75rem;
  --fs-caption-m: 0.4rem;
}

/* ========================
  🔧 Base
======================== */
*,
*::before,
*::after {
  position: relative;
  box-sizing: border-box;
}

body {
  /* ✅ 預設字級（取代 fs-body） */
  font-size: 1.2rem;
  line-height: 2;
  /* ✅ 預設字體 */
  font-family: "Century Gothic", "Apple Gothic", "Questrial", "DFHeiti-Bold", "DFHeiti-Medium", "HuaKangHei", "Noto Sans TC", sans-serif;
  color: #3E3A3A;
  background: #F3F2EE;
}
@media (max-width: 991px) {
  body {
    font-size: 0.65rem;
    line-height: 1.8;
  }
}

/* ========================
  🔠 Typography System
======================== */
/* Mobile First */
.fs-h1 {
  font-size: var(--fs-h1-m);
}

.fs-h2 {
  font-size: var(--fs-h2-m);
}

.fs-h3 {
  font-size: var(--fs-h3-m);
}

.fs-h4 {
  font-size: var(--fs-h4-m);
}

.fs-small {
  font-size: var(--fs-small-m);
}

.fs-caption {
  font-size: var(--fs-caption-m);
}

/* Desktop */
@media (min-width: 992px) {
  .fs-h1 {
    font-size: var(--fs-h1);
  }
  .fs-h2 {
    font-size: var(--fs-h2);
  }
  .fs-h3 {
    font-size: var(--fs-h3);
  }
  .fs-h4 {
    font-size: var(--fs-h4);
  }
  .fs-small {
    font-size: var(--fs-small);
  }
  .fs-caption {
    font-size: var(--fs-caption);
  }
}
/* ❌ 不提供 fs-body（避免濫用） */
/* ========================
  📐 Text Alignment
======================== */
/* 段落對齊
  手機：左右對齊（窄版避免右側鋸齒）
  桌機：inherit，讓父層 text-center 等 class 自然接管
  作用範圍：.Txt > .text 內的 <p>，標題（.Txt 直屬）不受影響 */
.slogan {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.Txt .title {
  color: #3C2313;
  margin-bottom: 2rem;
  letter-spacing: 0.025em;
  line-height: 1.8;
  font-weight: bold;
}
@media (max-width: 991px) {
  .Txt .title {
    margin-bottom: 1rem;
  }
}
.Txt .text p {
  text-align: justify;
  text-justify: inter-character;
  -moz-text-align-last: left;
       text-align-last: left;
  word-break: break-all;
}
@media (min-width: 992px) {
  .Txt .text p {
    text-align: inherit;
    -moz-text-align-last: auto;
         text-align-last: auto;
    word-break: normal;
  }
}
.Txt .text p.text-center {
  text-align: center;
  -moz-text-align-last: center;
       text-align-last: center;
  word-break: normal;
}
@media (min-width: 992px) {
  .Txt .text p.text-lg-center {
    -moz-text-align-last: center;
         text-align-last: center;
  }
}

.text-justify {
  text-align: justify;
  text-justify: inter-character;
  -moz-text-align-last: left;
       text-align-last: left;
  word-break: break-all;
}

/* ========================
  🔤 Font System
======================== */
/* 中文 */
.font-zh-sans {
  font-family: "Century Gothic", "Apple Gothic", "Questrial", "DFHeiti-Bold", "DFHeiti-Medium", "HuaKangHei", "Noto Sans TC", sans-serif;
}

.font-zh-serif {
  font-family: "Hiragino Mincho ProN W6", "Hiragino Mincho Pro W6", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
}

/* 英文 */
.font-en-sans {
  font-family: "Century Gothic", "Apple Gothic", "Questrial", sans-serif;
}

.font-en-serif {
  font-family: "Malayalam MN", "Tenor Sans", sans-serif;
}

/* ========================
  🔗 Link / Button
======================== */
a,
.btn {
  text-decoration: none;
  border-radius: 0;
}
a:hover,
.btn:hover {
  text-decoration: none;
}

a:focus,
button:focus {
  outline: none !important;
}

/* ========================
  🖼 Image
======================== */
.Img {
  position: relative;
}
.Img a {
  display: block;
}
.Img .innerImg {
  position: relative;
  width: 100%;
  padding-top: 70%;
}
.Img .innerImg .image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.Img.img-gradient::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55));
  z-index: 1;
  pointer-events: none;
}
.Img.img-gradient .infoImg {
  z-index: 2;
}

.infoImg {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  width: 100%;
  text-align: right;
  padding: 4px 8px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.678);
  font-size: 0.5rem;
}
@media (max-width: 1366px) {
  .infoImg {
    font-size: 0.4rem;
  }
}

/* ========================
  📐 Section Spacing
  → 已移至 scss/_section-spacing.scss
  → 舊 class 保留為 deprecated alias，仍可正常使用
  → 新開發請改用 .section-py-{size} / .section-inset-{mode}
======================== */
/* ========================
  🎨 Color System
======================== */
.text-info {
  color: #77838B !important;
}

.text-primary {
  color: #F9E8BE !important;
}

.bg-primary {
  background-color: #F9E8BE !important;
}

.form-check-input:checked {
  background-color: #F9E8BE !important;
  border-color: #F9E8BE !important;
}

.btn-primary {
  color: #fff;
  background-color: #F9E8BE;
  border-color: #F9E8BE;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
  background-color: #1b4041;
  border-color: #1b4041;
}
.btn-primary:active, .btn-primary.active {
  background-color: #1b4041;
  border-color: #1b4041;
}

/* ========================
  🎞 Plugins
======================== */
/* slick */
.slick-prev {
  top: auto;
  bottom: -25px;
  left: auto;
  right: calc(50% + 60px);
  transform: none;
  z-index: 10;
}
.slick-prev:before {
  content: "\f284";
}

.slick-next {
  top: auto;
  bottom: -25px;
  left: calc(50% + 60px);
  right: auto;
  transform: none;
}
.slick-next:before {
  content: "\f285";
}

.slick-next,
.slick-prev {
  width: auto;
  height: auto;
  line-height: 1;
  z-index: 10;
}

.slick-prev:before,
.slick-next:before {
  font-family: bootstrap-icons !important;
  font-size: 1.5rem;
  color: rgba(151, 151, 151, 0.3);
  opacity: 1;
}

/* slick dots */
.slick-dots li {
  margin: 0;
}
.slick-dots li button:before {
  color: #A4A4A4;
  opacity: 1;
  font-size: 16px;
}
.slick-dots li.slick-active button:before {
  color: #EBCA00;
  opacity: 1;
}

/* fancybox */
.fancybox-navigation {
  height: 100vh;
}

/* ========================
  🎭 Stage / Layer（分層進場）
======================== */
.stageWrap {
  position: absolute;
  inset: 0;
}

.stage,
.layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}/*# sourceMappingURL=main.css.map */