/* ==========================================================================
   1. CSS 變數設定 (:root)
   ========================================================================== */
:root {
  /* --- 顏色定義 --- */
  --color_b1: #3789ff;
  /* 藍色1 波浪漸層起點色 */
  --color_b1_rgb: 55, 137, 255;
  --color_b2: #00dafd;
  /* 藍色2 波浪漸層終點色 */
  --color_b2_rgb: 0, 218, 253;
  --color_b3: #eafcff;
  /* 淺藍色 */
  --color_b3_rgb: 234, 252, 255;
  --color_w: #ffffff;
  /* 白色 */
  --color_w_rgb: 255, 255, 255;
  --color_g1: #060606;
  /* 深碳灰色 */
  --color_g1_rgb: 6, 6, 6;
  --color_y: #eff532;
  /* 亮黃色主打色 */
  --color_y_rgb: 239, 245, 50;
  --color_r: #f83636;
  /* 鮮紅色主題調 */
  --color_r_rgb: 248, 54, 54;

  /* --- 介面與背景顏色 --- */
  --color_sidebar_btn_bg: var(--color_g1);
  /* 側邊選單開合按鈕背景色 */
  --color_sidebar_btn_hover: #242f44;
  /* 側邊選單開合按鈕滑過背景色 */
  --bg-main: transparent;
  /* 頁面主背景顏色 */
  --bg-solid-1: transparent;
  /* 區塊 1 背景 */
  --bg-solid-3: transparent;
  /* 區塊 3 背景 */
  --bg-solid-5: var(--color_g1);
  /* 區塊 5 背景 */
  --bg-wave-start: var(--color_b1);
  /* 波浪漸層色起底 */
  --bg-wave-end: var(--color_b2);
  /* 波浪漸層色收尾 */
  --text-primary: var(--color_w);
  /* 主要前景文字色 */

  /* --- 立刻綁定按鈕顏色設定 --- */
  --btn-yellow: var(--color_y);
  /* 按鈕表面的主色黃色 */
  --btn-orange: #E98C00;
  /* 底座的橘色 (3D 厚度層) */
  --btn-border: var(--color_g1);
  /* 粗邊框與文字的深色 */

  /* --- 3D 厚度與尺寸設定 --- */
  --thickness: 12px;
  /* 按鈕的立體厚度 (數值越大越厚) */
  --arrow-move-x: 8px;
  /* 點擊時，箭頭圓圈向右滑移的距離 */
  --circle-size: 30px;
  /* 黑色圓圈的直徑 */
  --arrow-svg-size: 10px;
  /* 圓圈內白色箭頭的大小 */
  --text-svg-width: 200px;
  /* 「立即綁定」文字 SVG 的寬度 */

  /* --- 字體系統設定 --- */
  --line-height-tight: 1.2;
  /* 用於標題與大字體 */
  --line-height-normal: 1.5;
  /* 標準正文行高 */
  --line-height-relaxed: 1.8;
  /* 寬鬆行高 (可選) */
  --line-height-small: 1.4;
  /* 小字體專用 (15-17px) */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}


/* ==========================================================================
   2. 基礎與全域設定 (Base & Reset)
   ========================================================================== */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Apple LiGothic Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-attachment: fixed;
  background-position: top center;
  background: url('../img/kv_bg_pc.png');
  background-color: var(--color_b3);
  background-repeat: repeat-x;
  /* 流體排版：根據視窗寬度自動調整字體大小 */
  font-size: clamp(14px, 2.2vw, 16px);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-regular);
}

::selection {
  background-color: var(--color_b1);
  color: var(--color_b3);
}

*,
*::before,
*::after,
button,
input,
select,
textarea,
a,
span,
h1,
h2,
h3,
h4,
h5,
h6,
strong,
p {
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* 標題與強調文本專用字重 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
}

strong {
  font-weight: var(--font-weight-bold);
}

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

/* ==========================================================================
   3. 動畫特效 (@keyframes)
   ========================================================================== */
@keyframes float-balloon-left {

  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }

  50% {
    transform: translateY(-24px) rotate(-3deg);
  }
}

@keyframes float-balloon-right {

  0%,
  100% {
    transform: translateY(-12px) rotate(6deg);
  }

  50% {
    transform: translateY(12px) rotate(3deg);
  }
}

.floating-balloon-left {
  animation: float-balloon-left 6s ease-in-out infinite;
}

.floating-balloon-right {
  animation: float-balloon-right 6.5s ease-in-out infinite;
}

/* ==========================================================================
   4. 波浪遮罩特效 (Wave Masks & Indicators)
   ========================================================================== */
.wave-mask-v2,
.wave-mask-bottom-only,
.wave-mask-top-only {
  position: relative;
}

/* 共用波浪 SVG 背景與定位 */
.wave-mask-v2::before,
.wave-mask-v2::after,
.wave-mask-bottom-only::after,
.wave-mask-top-only::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  height: 18px;
  z-index: 20;
}

/* 預設黑色波浪 */
.wave-mask-v2::before,
.wave-mask-top-only::before {
  top: 0;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='137' height='18'%3E%3Cpath fill-rule='evenodd' fill='%23060606' d='M136.988,-0.012 L0.015,-0.012 L0.015,17.999 C16.782,17.988 24.990,14.105 33.659,9.991 C42.198,5.946 51.009,1.763 68.422,1.763 C85.834,1.763 94.656,5.947 103.184,9.991 C111.875,14.111 120.079,18.000 136.894,18.000 C136.927,18.000 136.954,17.997 136.988,17.997 L136.988,-0.012 Z'/%3E%3C/svg%3E") repeat-x 0 0 / 137px 18px;
}

.wave-mask-v2::after,
.wave-mask-bottom-only::after {
  bottom: 0;
  transform: scaleY(-1);
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='137' height='18'%3E%3Cpath fill-rule='evenodd' fill='%23060606' d='M136.988,-0.012 L0.015,-0.012 L0.015,17.999 C16.782,17.988 24.990,14.105 33.659,9.991 C42.198,5.946 51.009,1.763 68.422,1.763 C85.834,1.763 94.656,5.947 103.184,9.991 C111.875,14.111 120.079,18.000 136.894,18.000 C136.927,18.000 136.954,17.997 136.988,17.997 L136.988,-0.012 Z'/%3E%3C/svg%3E") repeat-x 0 0 / 137px 18px;
}

/* 波浪顏色覆蓋 */
.wave-mask-top-eafcff::before {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='137' height='18'%3E%3Cpath fill-rule='evenodd' fill='%23eafcff' d='M136.988,-0.012 L0.015,-0.012 L0.015,17.999 C16.782,17.988 24.990,14.105 33.659,9.991 C42.198,5.946 51.009,1.763 68.422,1.763 C85.834,1.763 94.656,5.947 103.184,9.991 C111.875,14.111 120.079,18.000 136.894,18.000 C136.927,18.000 136.954,17.997 136.988,17.997 L136.988,-0.012 Z'/%3E%3C/svg%3E") repeat-x 0 0 / 137px 18px !important;
}

.wave-mask-bottom-3789ff::after {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='137' height='18'%3E%3Cpath fill-rule='evenodd' fill='%233789ff' d='M136.988,-0.012 L0.015,-0.012 L0.015,17.999 C16.782,17.988 24.990,14.105 33.659,9.991 C42.198,5.946 51.009,1.763 68.422,1.763 C85.834,1.763 94.656,5.947 103.184,9.991 C111.875,14.111 120.079,18.000 136.894,18.000 C136.927,18.000 136.954,17.997 136.988,17.997 L136.988,-0.012 Z'/%3E%3C/svg%3E") repeat-x 0 0 / 137px 18px !important;
}

/* 獨立波浪指示器 */
.wave-bottom-white-indicator,
.wave-top-eafcff-indicator,
.wave-top-black-indicator {
  width: 100%;
  height: 100%;
  z-index: 20;
}

.wave-bottom-white-indicator {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='137' height='18'%3E%3Cpath fill-rule='evenodd' fill='%23ffffff' d='M136.988,-0.012 L0.015,-0.012 L0.015,17.999 C16.782,17.988 24.990,14.105 33.659,9.991 C42.198,5.946 51.009,1.763 68.422,1.763 C85.834,1.763 94.656,5.947 103.184,9.991 C111.875,14.111 120.079,18.000 136.894,18.000 C136.927,18.000 136.954,17.997 136.988,17.997 L136.988,-0.012 Z'/%3E%3C/svg%3E") repeat-x 0 0 / 137px 18px;
}

.wave-top-eafcff-indicator {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='137' height='18'%3E%3Cpath fill-rule='evenodd' fill='%233789ff' d='M136.988,-0.012 L0.015,-0.012 L0.015,17.999 C16.782,17.988 24.990,14.105 33.659,9.991 C42.198,5.946 51.009,1.763 68.422,1.763 C85.834,1.763 94.656,5.947 103.184,9.991 C111.875,14.111 120.079,18.000 136.894,18.000 C136.927,18.000 136.954,17.997 136.988,17.997 L136.988,-0.012 Z'/%3E%3C/svg%3E") repeat-x 0 0 / 137px 18px;
}

.wave-top-black-indicator {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='137' height='18'%3E%3Cpath fill-rule='evenodd' fill='%23060606' d='M136.988,-0.012 L0.015,-0.012 L0.015,17.999 C16.782,17.988 24.990,14.105 33.659,9.991 C42.198,5.946 51.009,1.763 68.422,1.763 C85.834,1.763 94.656,5.947 103.184,9.991 C111.875,14.111 120.079,18.000 136.894,18.000 C136.927,18.000 136.954,17.997 136.988,17.997 L136.988,-0.012 Z'/%3E%3C/svg%3E") repeat-x 0 0 / 137px 18px;
}

/* ==========================================================================
   5. UI 元件 (Buttons, Links, Sidebar)
   ========================================================================== */
/* 回頂端按鈕 */
.back-to-top-btn {
  padding: 0 !important;
  margin: 0 !important;
  /* 替換背景色：使用 rgb 變數加上 0.9 透明度 */
  background-color: rgba(var(--color_g1_rgb), 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(0, 218, 253, 0.15) !important;
  box-shadow: 0 0 15px rgba(0, 218, 253, 0.1) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* 確保預設文字/圖示顏色為白色，方便後續用 currentColor 變色 */
  color: #ffffff;
}

/* Hover 狀態 (滑鼠移入) */
.back-to-top-btn:hover {
  /* 替換 Hover 背景色：稍微加深不透明度到 0.95 */
  background-color: rgba(var(--color_g1_rgb), 0.95) !important;
  border-color: rgba(0, 218, 253, 0.35) !important;
  box-shadow: 0 0 22px rgba(0, 218, 253, 0.25), inset 0 0 10px rgba(0, 218, 253, 0.1) !important;
  opacity: 1 !important;
  /* 讓整顆按鈕的預設顏色在 hover 時變成黃色 */
  color: var(--color_y) !important;
}

/* Hover 時讓裡面的 SVG 確實變成黃色 */
.back-to-top-btn:hover svg {
  color: var(--color_y) !important;
}

.back-to-top-btn *,
#tablet-back-to-top *,
#mobile-back-to-top * {
  padding: 0 !important;
  margin: 0 !important;
}

/* 文字連結與聲明 */
.disclaimer-link {
  color: var(--color_b2) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

.disclaimer-link:hover {
  color: var(--color_w) !important;
  opacity: 0.95;
}

.text-link-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.text-link-wrapper:hover {
  color: #f83636;
}

.text-link-content {
  border-bottom: 4px solid var(--btn-border);
  padding-bottom: 1px;
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(16px, 3vw, 18px);
  text-decoration: none;
}

.text-link-content:hover {
  border-bottom: 4px solid #f83636;
  color: #f83636;
  transition: color 0.2s ease;
}

/* 精緻導覽側邊欄 */
#desktop-sidebar {
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.desktop-sidebar-shell {
  border-top: 1px solid rgba(0, 218, 253, 0.15) !important;
  border-left: 1px solid rgba(0, 218, 253, 0.15) !important;
  border-right: 1px solid rgba(0, 218, 253, 0.15) !important;
  box-shadow: 0 -8px 25px rgba(0, 218, 253, 0.1) !important;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.desktop-sidebar-shell:hover {
  border-color: rgba(0, 218, 253, 0.35) !important;
  box-shadow: 0 -8px 30px rgba(0, 218, 253, 0.25), inset 0 0 15px rgba(0, 218, 253, 0.1) !important;
}

#mobile-drawer {
  background: linear-gradient(135deg, var(--color_b1) 0%, var(--color_b2) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: none !important;
  box-shadow: none !important;
}

.sidebar-item {
  position: relative;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.sidebar-item:hover {
  color: var(--color_y) !important;
  opacity: 1 !important;
}


/* 選單與抽屜控制按鈕 */
#sidebar-toggle-btn {
  position: fixed !important;
  display: none !important;
  top: 50% !important;
  right: 0 !important;
  z-index: 60 !important;
  /* 預設：維持在中間 (-50%)，並往上推 365px */
  transform: translateY(calc(-50% - 365px));
  width: 35px !important;
  height: 44px !important;
  background-color: rgba(6, 6, 6, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 218, 253, 0.15) !important;
  border-right: none !important;
  border-radius: 12px 0px 0px 12px !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: -4px 0 20px rgba(0, 218, 253, 0.1) !important;
}

#sidebar-toggle-btn:hover {
  background-color: rgba(15, 15, 15, 0.95) !important;
  border-color: rgba(0, 218, 253, 0.35) !important;
  box-shadow: -4px 0 25px rgba(0, 218, 253, 0.25), inset 0 0 10px rgba(0, 218, 253, 0.1) !important;
  /* Hover 狀態：位移距離必須跟預設完全一樣，只加上 scale 放大 */
  transform: translateY(calc(-50% - 365px)) scale(1.05) !important;
}

#sidebar-toggle-btn:active {
  background-color: rgba(3, 3, 3, 0.95) !important;
  /* Active 狀態：位移距離必須跟預設完全一樣，只加上 scale 縮小 */
  transform: translateY(calc(-50% - 365px)) scale(0.95) !important;
}

/* ==========================================================================
   6. 活動主視覺 (Banner & 3D Buttons)
   ========================================================================== */
.action-banner-section {
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  border-radius: 20px;
}

.shared-arrow-circle {
  background-color: #000;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.1s ease-out;
}

.shared-arrow-svg {
  width: var(--arrow-svg-size);
  height: auto;
}

.btn-3d-link {
  display: inline-block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: .5em;
}

.btn-base-layer {
  position: relative;
  background-color: var(--btn-orange);
  border: 5px solid var(--btn-border);
  border-radius: 100px;
  display: block;
  padding: 25px 35px;
}

.btn-surface-layer {
  position: absolute;
  top: calc(-1 * var(--thickness) - -5px);
  left: -4px;
  right: -4px;
  height: 100%;
  background-color: var(--btn-yellow);
  border: 5px solid var(--btn-border);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: top 0.1s ease-out;
}

.btn-text-svg {
  width: var(--text-svg-width);
  height: auto;
  display: block;
}

.btn-3d-link:active .btn-surface-layer {
  top: -4px;
}

.btn-3d-link:active .shared-arrow-circle {
  transform: translateX(var(--arrow-move-x));
}

.layout-spacer {
  display: flex;
  align-items: center;
  gap: 4px;
  visibility: hidden;
  pointer-events: none;
}

/* ==========================================================================
   7. 響應式斷點 (RWD Media Queries)
   ========================================================================== */

/* --- A. 特定 UI 與波浪縮放邏輯 --- */

/* 斷點 4：行動手機極簡模式 (小於 640px) */
@media (max-width: 639px) {

  #sidebar-toggle-btn,
  #desktop-sidebar {
    display: none !important;
  }
}

/* 斷點 3：高階平板與窄版桌機 (640px 至 1919px) - 顯示側選單開關 */
@media (min-width: 640px) and (max-width: 1919px) {
  #sidebar-toggle-btn {
    display: flex !important;
  }
}

/* 斷點 2：手提電腦與窄版桌機 (小於 1260px) - 波浪圖示縮小 */
@media (max-width: 1259px) {

  .wave-mask-v2::before,
  .wave-mask-top-only::before {
    top: -0.5px !important;
    height: 11px !important;
    background-size: 82.5px 11px !important;
  }

  .wave-mask-v2::after,
  .wave-mask-bottom-only::after {
    bottom: -0.5px !important;
    height: 11px !important;
    background-size: 82.5px 11px !important;
  }

  .wave-bottom-white-indicator,
  .wave-top-eafcff-indicator,
  .wave-top-black-indicator {
    background-size: 82.5px 11px !important;
  }
}

/* 斷點 1：高解析大螢幕微調 (小於 1920px) - 側欄貼合與折疊行為 */
@media (max-width: 1919px) {
  #desktop-sidebar {
    right: 0 !important;
  }

  .desktop-sidebar-collapsed {
    transform: translate(calc(100% + 24px), -50%) !important;
  }

  .desktop-sidebar-collapsed #sidebar-toggle-btn {
    border-radius: 12px !important;
    border-right: 1px solid rgba(0, 218, 253, 0.15) !important;
  }
}


/* --- B. 網頁版面與主視覺 (KV) 響應式邏輯 --- */

/* 手機版 (小於 768px) */
@media (max-width: 767px) {
  #timeline-destination {
    display: none !important;
  }

  .block_4_content {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .kv-m {
    display: block !important;
  }

  .kv-pc {
    display: none !important;
  }

  body {
    background: url('../img/kv_bg_m.png') var(--color_b2) !important;
    background-size: contain;
  }

  .kv-m .kv-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    margin: auto;
    z-index: 9999;
    padding: .5em;
  }

  .kv-m .kv-right {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    height: 200px;
    width: 100%;
    justify-content: space-evenly;
    align-content: center;
  }

  .kv-m .btn {
    margin-left: -5em;
    padding-top: 2em;
    background: url('../img/kv_slogan_m.svg') no-repeat top;
    background-size: contain;
  }

  .kv-m .btn-base-layer {
    position: relative;
    background-color: var(--btn-orange);
    border: 4px solid var(--btn-border);
    border-radius: 100px;
    display: block;
    padding: 1em 2em;
    max-width: 15.5em;
  }

  .kv-m .btn-surface-layer {
    position: absolute;
    top: calc(-1 * var(--thickness) - -5px);
    left: -4px;
    right: -4px;
    height: 100%;
    background-color: var(--btn-yellow);
    border: 4px solid var(--btn-border);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px !important;
    transition: top 0.1s ease-out;
    padding: .5em;
  }

  .kv-m h1,
  .kv-m .kv-h1-img {
    width: 100%;
  }

  .kv-m .kv-slogan-bg {
    position: absolute;
    top: 5px;
    right: -50px;
    /* padding-top: 40px; */
    display: block;
    width: 100%;
    max-width: 220px;
  }
}

/* 平板專屬區間 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1020px) {
  body {
    background: url('../img/kv_bg_m.png');
    background-size: cover;
  }

  .kv-pc h1,
  .kv-pc .kv-h1-img {
    width: 100%;
    max-width: 600px;
  }

  .kv-pc .kv-slogan-bg {
    position: absolute;
    top: -50px;
    right: -50px;
    padding-top: 40px;
    display: block;
    width: 100%;
    max-width: 250px;
  }

  .kv-pc .kv-container {
    margin: 0;
    margin-left: -200px;
    display: block;
    margin-top: 40px;
  }



  .kv-pc .kv-slogan-bg {
    position: absolute;
    background-position: top left;
    background-size: 60% auto;
    right: -90px;
    top: 15px;
    max-width: 300px;
    display: none;
  }
}

/* 平板版以上共用佈局 (大於等於 768px) */
@media (min-width: 768px) {
  .block_4_content {
    margin-top: -100px;
    margin-bottom: 50px;
  }

  .kv-m {
    display: none !important;
  }

  .kv-pc {
    display: block !important;
  }

  .kv-pc .kv-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    margin: auto;
    z-index: 9999;
    margin-top: 20px;
    margin-left: 50px;
  }

  .kv-pc .kv-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .kv-pc h1 {
    width: 100%;
    max-width: 700px;
  }

  .kv-pc .kv-h1-img {
    width: 95%;
  }

  .kv-pc .kv-slogan-bg {
    position: absolute;
    top: 0;
    right: 40px;
    padding-top: 40px;
    background-image: url('../img/kv_slogan_pc.svg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 80% auto;

    width: 100%;
    max-width: 300px;

  }
}

/* 桌機版 (大於等於 1024px) */
@media (min-width: 1024px) {
  .kv-pc .kv-container {
    margin: 0;
    margin-left: -130px;
    display: block;
    /* margin-top: 40px; */
  }

  .kv-pc h1 {
    max-width: 880px;
  }

  .kv-pc .kv-slogan-bg {
    position: absolute;
    background-position: top left;
    background-size: 60% auto;
    right: -64px;
    top: 25px;
    max-width: 358px;
  }

  .kv-pc .kv-right-ip {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
  }
}

/* 超大螢幕版 (大於等於 1920px) */
@media (min-width: 1920px) {
  .kv-pc .kv-container {
    margin-left: -280px;
    margin-top: 40px;
  }

  .kv-pc h1 {
    max-width: 1000px;
  }

  .kv-pc .kv-slogan-bg {
    right: 2px;
    width: 100%;
    max-width: 480px;
  }

  .kv-pc .kv-right-ip {
    width: 100%;
  }
}

/* 燈箱硬改 */
#hami-info-section a {
  color: var(--color_b1) !important;
  text-decoration: underline !important;
  transition: all 0.2s ease-in-out !important;
}

/* 當滑鼠移上去時，百分之百強制變成黃色，並且帶有微透明質感 */
#hami-info-section a:hover {
  color: var(--color_b1) !important;
  opacity: 0.8 !important;
}


/* 設定注意事項區域行高 */
#disclaimer-container {
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-regular);
}

/* 設定注意事項硬改 */
#disclaimer-container a {
  color: #38bdf8 !important;
  /* 漂亮的淡藍色 */
  text-decoration: underline !important;
  font-weight: 500 !important;
  transition: color 0.2s ease-in-out !important;
}

/* 滑鼠移過去注意事項連結時強制變黃 */
#disclaimer-container a:hover {
  color: var(--color_y) !important;
  opacity: 1 !important;
}

/* 補強：若原 CSS 未啟用移動動畫，強制給予 bouncing-box 垂直位移動畫（手機/桌機皆適用） */
.bouncing-box {

  display: inline-block;
  animation: kvBounce 1.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes kvBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.bouncing-box2 {

  display: inline-block;
  animation: kvBounce2 1.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes kvBounce2 {

  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.1);
  }

  20% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.1);
  }

  40% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

/* ============ 時間軸及步驟膠囊字體大小強制設定 ============ */

#timeline-destination .rounded-full>span:first-child {
  font-family: Montserrat, sans-serif !important;
  font-weight: var(--font-weight-extrabold);
  /* 手機版步驟標題 */
  font-size: clamp(18px, 5vw, 32px) !important;
  line-height: var(--line-height-tight);
}

#timeline-destination .rounded-full>span:last-child,
.step_span {
  font-weight: var(--font-weight-extrabold);
  font-family: Montserrat, sans-serif !important;
  font-size: clamp(16px, 3vw, 18px) !important;
  line-height: var(--line-height-tight);
}

#carousel-step-title {
  font-weight: var(--font-weight-bold);
  font-size: clamp(16px, 3.5vw, 20px) !important;
  line-height: var(--line-height-normal);
}

#carousel-step-tag {
  font-size: clamp(20px, 4.5vw, 32px) !important;
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
}

/* 平板尺寸中等斷點 (768px - 1260px) 平順過渡 */
@media (min-width: 768px) and (max-width: 1259px) {
  #timeline-destination .rounded-full>span:first-child {
    font-size: 24px !important;
  }

  #carousel-step-tag {
    font-size: 26px !important;
  }
}

/* 桌面版本詳細設定 (1260px 以上) */
@media (min-width: 1260px) {
  #timeline-destination .rounded-full>span:first-child {
    font-size: 32px !important;
    line-height: var(--line-height-tight);
  }

  #carousel-step-tag {
    font-size: 32px !important;
  }
}

/* ==========================================================================
   9. 雙向 RWD 步驟版面背景圖設定
   ========================================================================== */

/* 手機版本（預設）：g_step_m.png 在內聯 style 中 */
.rwd-step-layout {
  position: relative;
  z-index: 1;
}

/* 桌機版本（lg 以上，≥1024px）：背景圖切換為 bg_step_pc.png */
@media (min-width: 1024px) {
  .rwd-step-layout {
    /* background-image: url('../img/bg_step_pc.png') !important; */
    /* background-size: cover !important; */
    /* background-position: center center !important; */
    /* background-repeat: no-repeat !important; */
  }
}

/* ==========================================================================
   10. 注意事項區域 - 關閉按鈕
   ========================================================================== */
#close-disclaimer-btn {
  transition: all 0.3s ease-in-out !important;
}

#close-disclaimer-btn:active {
  transform: scale(0.95) !important;
}

/* 隱藏注意事項區域 */
#block-5.hidden {
  display: none !important;
}

/* ==========================================================================
   11. 燈箱內部捲動條樣式
   ========================================================================== */
.modal-scroll::-webkit-scrollbar {
  width: 6px;
}

.modal-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin: 12px 0;
}

.modal-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.modal-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.modal-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* ==========================================================================
   12. 區塊 ④ - 背景圖響應式顯示
   ========================================================================== */
.bg-step-section {
  background: linear-gradient(180deg, var(--bg-wave-start) 0%, var(--bg-wave-end) 100%);
}

@media (min-width: 1260px) {
  .bg-step-section {
    background-image: url('../img/bg_step_pc.png'), linear-gradient(180deg, var(--bg-wave-start) 0%, var(--bg-wave-end) 100%);
    /* background-size: cover, auto; */
    background-position: center, 0 0;
    background-repeat: no-repeat, no-repeat;
  }
}