/******
  * @name: content_99購物節
  * @author: openAI
  * @version: 1.0.1
  * @update: 2026/8/24
******/
    :root {
      /*品牌強調色*/
      --accent: #fe5e37;
      /*主文字*/
      --fg: #181300;
      /*次要文字*/
      --muted: #b59657;
      /*主背景*/
      --bg: #fcd75e;
      /*區塊/卡片背景*/
      --surface: #f64500;
      /*弧角*/
      --img-radius: 16px;
      /*內框弧角*/
      --inner-radius: 30px;
      --inner-radius-sm: 14px;
      /*內框間距*/
      --inset-border-sm: 5px;
      /* 內縮比例，數字越小，內縮越明顯 */
      --inset-duration: .25s;

      /* ==================================================
     FONT SYSTEM
     375px → 1440px
     ================================================== */
      /* Hero 大型主視覺標題 40px → 64px */
      --font-hero: clamp(40px, 31.55px + 2.25vw, 64px);
      /* H1 頁面主標題 32px → 48px */
      --font-h1: clamp(32px, 26.37px + 1.5vw, 48px);
      /* H2 區塊標題 24px → 36px */
      --font-h2: clamp(24px, 19.77px + 1.13vw, 36px);
      /* H3 卡片／小標題 20px → 28px */
      --font-h3: clamp(20px, 17.18px + 0.75vw, 28px);
      /* 一般內文 16px → 18px */
      --font-body: clamp(16px, 15.3px + 0.19vw, 18px);
      /* 次要文字 14px → 16px */
      --font-small: clamp(14px, 13.3px + 0.19vw, 16px);
      /* 註解／日期／標籤 12px → 14px */
      --font-caption: clamp(12px, 11.3px + 0.19vw, 14px);
      /* Copyright 12px → 13px */
      --font-copyright: clamp(12px, 11.65px + 0.094vw, 13px);

      /* ==================================================
     SPACING SYSTEM
     margin / padding / gap
     375px → 1440px
     ================================================== */
      /* 極小間距 4px → 6px */
      --space-2xs: clamp(4px, 3.3px + 0.19vw, 6px);
      /* 小間距 6px → 10px */
      --space-xs: clamp(6px, 4.59px + 0.38vw, 10px);
      /* 一般小間距 8px → 12px */
      --space-sm: clamp(8px, 6.59px + 0.38vw, 12px);
      /* 一般間距 12px → 20px */
      --space-md: clamp(12px, 9.18px + 0.75vw, 20px);
      /* 一般大間距 16px → 24px */
      --space-lg: clamp(16px, 13.18px + 0.75vw, 24px);
      /* 元件／卡片間距 24px → 40px */
      --space-xl: clamp(24px, 18.37px + 1.5vw, 40px);
      /* 大區塊間距 32px → 56px */
      --space-2xl: clamp(32px, 23.55px + 2.25vw, 56px);
      /* 大型版面間距 48px → 80px */
      --space-3xl: clamp(48px, 36.73px + 3vw, 80px);
      /* Section 上下留白 64px → 128px */
      --space-section: clamp(64px, 41.46px + 6vw, 128px);
      /* 網頁左右安全距離 20px → 48px */
      --space-page-x: clamp(20px, 10.14px + 2.63vw, 48px);
    }

    body {
      margin: 0;
      box-sizing: border-box;
    }

    /*** 主要框架 ***/
    .mainframe {
      margin: 0 auto;
      padding: 0;
      font-family: 'Noto Sans TC', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
      width: 100%;
    }

    .bgframe01 {}

    .bgframe02 {
      background: url('../images/bg02.webp') repeat-y center center/auto;
      padding-block: var(--space-3xl) var(--space-xl);
    }

    .bgframe03 {
      background: url('../images/bg03.webp') repeat-y center center/auto;
      padding-block: var(--space-3xl) var(--space-xl);
    }

    .bgframe04 {
      background: url('../images/bg04.webp') repeat-y center center/auto;
      padding-block: var(--space-3xl) var(--space-xl);
    }

    .bgframe05 {
      background: url('../images/bg05.webp') repeat-y center center/auto;
      ;
      padding-block: var(--space-2xl) 0;
    }

    .cutframe {
      margin: 0 auto;
    }

    @media (min-width:480px) {
      .cutframe {
        max-width: 640px;
      }
    }

    @media (min-width:768px) {
      .cutframe {
        max-width: 840px;
      }
    }

    @media (min-width:1024px) {
      .cutframe {
        max-width: 980px;
      }
    }

    @media (min-width:1280px) {
      .cutframe {
        max-width: 1100px;
      }
    }

    .mainframe h1,
    .mainframe h2,
    .mainframe h3,
    .mainframe h4 {
      margin: 0 auto;
      width: 90%;
    }

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

    /* =========================================================
   平板以上 768px
   ========================================================= */
    @media screen and (min-width: 768px) {
      .partner>a.img-prd {
        flex: 0 0 30%;
      }
    }

    /*** 3大保證 ***/
    .ensure {
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 90%;
    }

    .ensure>img {
      margin: 0 .2rem;
      max-width: 33%;
    }

    /* =========================================================
   平板以上 768px
   ========================================================= */
    @media screen and (min-width: 768px) {
      .ensure>img {
        margin: 0 1rem;
      }
    }

    /*** 內容 ***/

    /*活動詳情*/
    .notice {
      margin: 0 auto;
      padding-bottom: 5rem;
      width: 90%;
      font-size: var(--font-body);
      line-height: 1.65;
      color: var(--fg);
    }

    .notice a {
      color: var(--accent);
      font-weight: 500;
    }

    h2.title-notice {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto var(--space-lg);
      width: 90%;
      font-size: var(--font-h1);
      font-weight: 900;
      line-height: 1.5;
      color: var(--accent);
    }

    .notice h3 {
      margin: 0;
      font-size: var(--font-h3);
      font-weight: 700;
      line-height: 1.5;
      color: var(--accent);
    }

    .notice h4 {
      margin: 1.2rem 0 0 0.5rem;
      font-size: var(--font-body);
      font-weight: 700;
      line-height: 1.5;
      color: #fe814a;
    }

    .notice h4+ul {
      margin-left: 1rem;
    }

    .notice p {
      padding: 0;
      margin: 0 0 1rem;
      font-size: var(--font-body);
      text-align: justify;
    }

    .notice span.bold {
      font-size: var(--font-body);
      color: var(--accent);
      font-weight: 700;
    }

    .notice span.caption {
      font-size: var(--font-caption);
      color: var(--muted);
    }

    @media (min-width:768px) {
      .notice h4 {
        max-width: 65%;
      }
    }

    @media (min-width:1024px) {
      .notice h4 {
        max-width: 50%;
      }
    }

    /*版頭*/
    .header {
      overflow: hidden;
      position: relative;
      background: url(../images/Header_bg.jpg?260528) no-repeat bottom center/auto;
      padding-bottom: 20px;
    }

    .header a.main-photo {
      display: block;
      text-align: center;
    }

    .header a.main-photo img {
      width: 90%;
    }

    .header a.btn-event,
    .header a.btn-freedel {
      position: absolute;
      text-align: center;

    }

    .header a.btn-event img,
    .header a.btn-freedel img {
      width: 45%;

    }

    .header .btn-event {
      bottom: 0%;
      left: 20%;
      transform: translateX(-50%);
    }

    .header .btn-freedel {
      bottom: 0%;
      right: 20%;
      transform: translateX(50%);

    }

    /*選單*/
    menu {
      width: 95%;
      position: fixed;
      z-index: 99;
      bottom: -2.2%;
      right: 50%;
      transform: translateX(50%);
      background-color: rgba(254, 94, 55, 0.95);
      border-radius: 0;
      padding: 10px 10px 30px;
    }

    menu ul {
      display: flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    menu ul li {
      margin: 0;
      text-align: center;
      font-size: var(--font-caption);
    }

    menu ul li a {
      text-decoration: none;
      color: #fffa73;
      transition: color 0.3s ease;
    }

    menu ul li a:hover {
      color: #ffffff;
    }

    menu ul li img {
      width: 80%;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    /*框架*/
    h2.title-sp {
      position: absolute;
      z-index: 99;
      top: -30px;
      right: 50%;
      transform: translateX(50%);
      text-align: center;
    }

    h2.title-sp img {
      width: 100%;
    }

    .frame01,
    .frame02,
    .frame03,
    .frame04,
    .frame05,
    .frame06,
    .frame07 {
      width: 90%;
      position: relative;
      border-width: 6px;
      border-style: solid;
      border-radius: var(--inner-radius-sm);
      padding: 10% var(--space-md) var(--space-md);
    }

    .frame01 {
      border-color: #ff8e49;
      background: #ffd094;
      box-shadow: inset 0 0 8px rgba(205, 75, 0, 0.6);
    }

    .frame02 {
      border-color: #43c3ff;
      background: #d1f8ff;
      box-shadow: inset 0 0 8px rgba(35, 180, 205, 0.6);
    }

    .frame03 {
      border-color: #fff331;
      background: #fff8bd;
      box-shadow: inset 0 0 8px rgba(205, 90, 50, 0.6);
    }

    .frame04 {
      border-color: #ff9797;
      background: #ff9797;
      box-shadow: inset 0 0 8px rgba(255, 130, 110, 0.6);
    }

    .frame05 {
      border-color: #ff6e44;
      background: #ffedc6;
      box-shadow: inset 0 0 8px rgba(215, 180, 100, 0.6);
    }

    .frame06 {
      border-color: #22e5ac;
      background: #beffec;
      box-shadow: inset 0 0 8px rgba(35, 230, 170, 0.6);
    }

    .frame07 {
      border-color: #f86cb5;
      background: #ffecf6;
      box-shadow: inset 0 0 8px rgba(245, 150, 100, 0.6);
    }

    .bottomSpace {
      margin-bottom: var(--space-3xl);
    }

    .bottomSpace_end {
      margin-bottom: var(--space-lg);
    }

    /*回上層*/
    .btn-to-top {
      position: fixed;
      bottom: 150px;
      right: 20px;
      z-index: 100;
    }


    /* =========================================================
   平板以上 768px
   ========================================================= */
    @media screen and (min-width: 768px) {

      /*版頭*/
      .header a.main-photo img {
        width: 50%;
      }

      .header a.btn-event img,
      .header a.btn-freedel img {
        width: 90%;
      }

      .header .btn-event {
        left: 30%;
      }

      .header .btn-freedel {
        right: 30%;
      }

      /*框架*/
      h2.title-sp {
        top: -60px;
      }

      h2.title-sp img {
        width: 80%;
      }

      .frame01,
      .frame02,
      .frame03,
      .frame04,
      .frame05,
      .frame06,
      .frame07 {
        width: 100%;
        border-width: 8px;
        border-radius: var(--inner-radius);
        padding: 5% var(--space-md) var(--space-md);

      }

      /*回上層*/
      .btn-to-top {
        bottom: 2%;
      }

      /*選單*/
      menu {
        width: 5%;
        border-radius: 80px;
        padding-bottom: 10px;
        bottom:10%;
        right: 20px;
        transform: translateX(0);
      }
      menu ul{
        flex-direction: column;
      }
      menu ul li {
        margin: 8px 5px;
      }
    }

    /* =========================================================
      桌機以上 1024px
    ========================================================= */
    @media screen and (min-width: 1024px) {

      .header a img {
        width: 70%;
      }

    }

    .footer {
      padding: 10px 0 18px;
      text-align: center;
      color: var(--accent);
      font-size: var(--font-copyright);
    }



    /* ========================================
            頁簽切換效果
            productTabs 套件 - Mobile First
            使用方式：
            <div class="product-tabs" id="productTabs">
              <div class="product-tabs__nav" role="tablist" aria-label="精選人氣商品分類">
                <button class="product-tabs__button is-active" type="button" role="tab"
                  aria-selected="true" aria-controls="tab-contactlens"
                  data-tab-target="tab-contactlens">
                  name1
                </button>
              </div>
              <div class="product-tabs__panels">
                <div class="tab_item is-active" id="tab-contactlens" role="tabpanel">
                </div>
                <div class="tab_item" id="tab-frame" role="tabpanel" hidden>
                </div>
                <div class="tab_item" id="tab-mitie" role="tabpanel" hidden>
                </div>
                <div class="tab_item" id="tab-cleaner" role="tabpanel" hidden>
                </div>
              </div>
            </div>
    ======================================== */

    /* =========================
   整個 tab 區塊
   ========================= */
    #productTabs {
      width: 100%;
      margin: 0 auto;
    }

    /* =========================
   上方 tab 按鈕區
   手機版：頁簽平均排列
   ========================= */
    #productTabs .product-tabs__nav {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
      width: 98%;
      margin: 0 auto;
      /*margin: 0 auto 16px;*/
    }


    /* =========================
   TAB 按鈕
   顏色可依你的版面自行調整
   ========================= */
    #productTabs .product-tabs__button {
      appearance: none;
      /*border: 4px solid #fff77e;*/
      border: 0;
      background-color: #fffde4;
      padding: 5px 4px;
      border-radius: 12px 12px 0 0;
      cursor: pointer;

      font-size: var(--font-body);
      line-height: 1.45;
      text-align: center;
      color: #ff6633;

      transition:
        color 0.25s ease,
        background-color 0.25s ease;
    }

    #productTabs .product-tabs__button span {
      font-size: var(--font-caption);
    }


    /* 目前選中的 tab 按鈕 */
    #productTabs .product-tabs__button.is-active {
      /*border: 4px solid #fff77e;*/
      color: #fff;
      background: #00cccc;
      font-weight: 700;
    }


    /* 可自行換成你原本的底線或選取效果 */
    #productTabs .product-tabs__button.is-active::after {
      content: "";
      display: block;
      width: 42px;
      height: 2px;
      margin: 7px auto 0;
      background-color: currentColor;
    }


    /* =========================
   輪播內容外層
   修改重點：
   使用 grid 讓輪播重疊於同一位置，
   但仍保有正確寬度可供 carousel 計算。
   ========================= */
    #productTabs .product-tabs__panels {
      display: grid;
      width: 90%;
      margin: 0 auto;
      padding: 1rem;
      border-radius: 0 0 var(--inner-radius-sm) var(--inner-radius-sm);
      background: #00cccc;
    }


    /* =========================
   TAB 內容預設狀態
   重要：
   這裡強制 display:block，
   覆蓋原本可能存在的 display:none。
   ========================= */
    #productTabs .tab_item {
      display: block !important;

      grid-column: 1;
      grid-row: 1;

      width: 100%;
      min-width: 0;

      visibility: hidden;
      opacity: 0;
      pointer-events: none;

      position: relative;
      z-index: 0;

      text-align: center;

      /*
         不建議在這裡加 transition，
         否則輪播切換時可能看起來又有淡入或尺寸變動。
      */
    }

    #productTabs .tab_item img {
      max-width: 100%;
      height: auto;
    }

    /* 目前顯示中的商品輪播 */
    #productTabs .tab_item.is-active {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      z-index: 1;
    }


    /* =========================
   覆蓋 HTML 的 hidden 屬性
   原因：
   hidden 預設會等同 display:none，
   會讓 carousel 無法在初始化時取得正確寬度。
   ========================= */
    #productTabs .tab_item[hidden] {
      display: block !important;
    }


    /* =========================
   輪播尺寸穩定設定
   不更動你原本的輪播排版邏輯，
   僅避免圖片或 slide 撐大。
   ========================= */
    #productTabs .carousel {
      width: 100%;
      min-width: 0;
    }

    #productTabs .carousel__viewport {
      width: 100%;
      overflow: hidden;
    }

    #productTabs .carousel__track {
      width: 100%;
    }

    #productTabs .carousel__slide {
      min-width: 0;
    }

    #productTabs .carousel__slide a {
      display: block;
      width: 100%;
    }

    #productTabs .carousel__img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
    }


    /* =========================================================
   平板以上 768px
   ========================================================= */
    @media screen and (min-width: 768px) {

      #productTabs .product-tabs__nav {
        /* margin-bottom: 22px; */
        gap: 8px;
      }

      #productTabs .product-tabs__button {
        padding: 14px 8px;
        border-radius: var(--img-radius) var(--img-radius) 0 0;
      }

      #productTabs .product-tabs__button span {}

      #productTabs .product-tabs__panels {
        width: 96%;
        border-radius: 0 0 var(--inner-radius) var(--inner-radius);
      }

    }


    /* =========================================================
   桌機以上 1280px
   ========================================================= */
    @media screen and (min-width: 1280px) {}

    /* ========================================
            響應式產品輪播效果
            carousel-box 套件 - Mobile First
            使用方式：
            <div class="carousel-box">
                <div class="box_inn01">
                    <!-- 內容 -->
                </div>
                <div class="box_inn02">
                    <!-- 內容 -->
                </div>
            </div>
    ======================================== */

    .carousel-box {
      width: 90%;
      margin: 0 auto;
    }

    .box_inn01 {
      padding: 1rem;
      border-radius: var(--inner-radius-sm) var(--inner-radius-sm) 0 0;
      background-color: #ff81aa;
    }

    .box_inn02 {
      padding: 1rem;
      border-radius: 0 0 var(--inner-radius-sm) var(--inner-radius-sm);
      background-color: #fdc9da;
    }

    /* =========================================================
   平板以上 768px
   ========================================================= */
    @media screen and (min-width: 768px) {
      .box_inn01 {
        border-radius: var(--inner-radius) var(--inner-radius) 0 0;
      }

      .box_inn02 {
        border-radius: 0 0 var(--inner-radius) var(--inner-radius);
      }
    }

    /* 共用 dots 容器（可自由排版） */
    .carousel-dots-box-hot,
    .carousel-dots-box-all,
    .carousel-dots-box-special {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      padding: 0;
      flex-wrap: wrap;
      overflow: hidden;
    }

    /* 對齊工具類（會套到任何 dots 容器上：內置/外置/自訂） */
    .dots-align-start {
      justify-content: flex-start !important;
    }

    .dots-align-center {
      justify-content: center !important;
    }

    .dots-align-end {
      justify-content: flex-end !important;
    }

    .dots-align-between {
      justify-content: space-between !important;
      width: 100%;
    }

    /* 基礎樣式（外掛依據這些 class 操作） */
    .carousel {
      position: relative;
      overflow: hidden;
      border-radius: var(--img-radius);
      /*background: #ffe2a9;
      box-shadow: 0 10px 30px #ffe2a9;*/
      margin: 0px 0 10px;
      /*18px 0 10px*/
      --slides: 1;
      /* 由外掛設定 */
      --aspect-w: 1;
      /* 由外掛設定 */
      --aspect-h: 1;
    }

    /* 輪播容器 */
    .carousel__viewport {
      position: relative;
      width: 100%;
    }

    /* 輪播軌道 */
    .carousel__track {
      display: flex;
      height: 100%;
      transition: transform .5s ease;
      will-change: transform;
      touch-action: pan-y;
    }

    /* 1% 間距 + 可配置比例（預設 1:1） */
    .carousel__slide {
      flex: 0 0 calc((100% - (1% * (var(--slides) - 1))) / var(--slides));
      margin-right: 1%;
      aspect-ratio: var(--aspect-w, 1) / var(--aspect-h, 1);
      position: relative;
      height: auto;
      user-select: none;
      border-radius: var(--img-radius);
      /*box-shadow: 0 6px 16px rgba(0, 0, 0, .22);*/
      cursor: pointer;
      overflow: hidden;
    }

    .carousel__slide>.effect-inset {
      /*** 內縮效果參數 ***/
      --inset-scaleY: .965;
      --inset-scaleX: .95;

      display: block;
      width: 100%;
      height: 100%;
    }

    .carousel__slide>.effect-inset>.carousel__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 讓 loading 狀態出現 spinner */
    .carousel__slide.loading::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 28px;
      height: 28px;
      margin: -14px 0 0 -14px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      z-index: 3;
    }

    /* 圖片載入完成時關掉 spinner */
    .carousel__slide:not(.loading)::before {
      display: none;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }


    /********* 圖片 ********/
    .carousel__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: initial;
    }

    /* 未載入/載入中/載入完成 */
    .carousel__img.is-loading {
      filter: blur(8px);
      transform: scale(1.02);
    }

    /* 載入完成 */
    .carousel__img.is-loaded {
      filter: none;
      transform: none;
      transition: .25s ease, transform .25s ease;
    }


    /********* 按鈕 ********/
    .carousel__nav {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
      padding: 0 8px;
    }

    /*** 按鈕(Arrow) ***/
    .carousel__btn {
      pointer-events: auto;
      border: 0;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: rgba(255, 225, 160, .45);
      color: #ff6e37;
      cursor: pointer;
      transition: transform .15s ease, background .2s ease, color .2s ease;
    }

    /*手機*/
    @media (max-width:480px) {
      .carousel__btn {
        width: 24px;
        height: 24px;
      }
    }

    /*平板以上*/
    @media (min-width:480.1px) {
      .carousel__btn {
        width: 42px;
        height: 42px;
      }
    }

    /* 滑鼠移入 */
    .carousel__btn:hover {
      background: rgba(255, 225, 160, .9);
      color: #ff6e37;
      transform: scale(1.04)
    }

    /* 按鈕按壓 */
    .carousel__btn:active {
      transform: scale(.96)
    }

    /*** 按鈕(dots) ***/
    /* dots：內置（覆蓋在圖片上） */
    .carousel__dots {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10px;
      display: flex;
      gap: 8px;
      z-index: 2;
    }

    /* dots：外置（圖片外 / 正常文流） */
    .carousel__dots--outside {
      position: static;
      display: flex;
      gap: 8px;
      margin: 10px 0 18px;
    }

    .carousel__dot {
      border-radius: 999px;
      border: 0;
      cursor: pointer;
      background: rgba(255, 225, 160, .8);
      transition: transform .15s ease, background .2s ease;
    }

    /*手機*/
    @media (max-width:480px) {

      .carousel__dot {
        width: 8px;
        height: 8px;
      }
    }

    /*平板以上*/
    @media (min-width:480.1px) {
      .carousel__dot {
        width: 10px;
        height: 10px;
      }
    }

    .carousel__dot[aria-current="true"] {
      background: var(--accent);
      transform: scale(1.25)
    }

    .carousel__controls {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      gap: 8px;
      z-index: 2;
    }

    .carousel__control-btn {
      border: 0;
      padding: 6px 10px;
      border-radius: 10px;
      background: rgba(15, 23, 42, .7);
      color: #e5e7eb;
      cursor: pointer;
    }

    /* ========================================
            滑入與內縮效果
            Effect-inset 套件 - Mobile First
            使用方式：
            <a href="#" class="effect-inset inset-orange">
                <img src="images/prd_hot01_1.jpg" alt="A1">
            </a>
    ======================================== */

    /* 共用內縮效果 */
    .effect-inset {
      /*** 內縮效果參數 ***/
      /* 內縮半徑 */
      --img-inner-radius: 11px;
      /* 內縮背景色 */
      --inset-bg: rgba(255, 255, 255, .65);
      /* 內縮縮放比例 */
      --inset-scaleY: .97;
      --inset-scaleX: .97;

      position: relative;
      display: block;
      overflow: hidden;
      border-radius: var(--img-inner-radius);
      background-color: transparent;
      transition: background-color var(--inset-duration) ease;
    }

    .effect-inset>img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: inherit;
      transform: scale(1);
      transition: transform var(--inset-duration) ease;
    }

    /* 顏色主題 */
    .inset-blue {
      --inset-bg: rgba(26, 170, 237, .9);
    }

    .inset-skyblue {
      --inset-bg: rgba(26, 215, 237, .9);
    }

    .inset-greenblue {
      --inset-bg: rgba(34, 229, 172, .9);
    }

    .inset-orange {
      --inset-bg: rgba(255, 142, 73, .9);
    }

    .inset-pinkorange {
      --inset-bg: rgba(255, 182, 118, .9);
    }

    .inset-grandorange {
      --inset-bg: rgba(255, 158, 97, .9);
    }

    .inset-darkorange {
      --inset-bg: rgba(246, 82, 34, .9);
    }

    .inset-pinkred {
      --inset-bg: rgba(255, 108, 108, .9);
    }

    .inset-pink {
      --inset-bg: rgba(250, 121, 188, .9);
    }



    /* 桌機：互動時才顯示 */
    @media (min-width: 1280.1px) {

      .effect-inset:hover,
      .effect-inset:focus-visible {
        background-color: var(--inset-bg);
      }

      .effect-inset:hover>img,
      .effect-inset:focus-visible>img {
        transform: scaleY(var(--inset-scaleY)) scaleX(var(--inset-scaleX));
        transform-origin: center;
      }
    }

    /* 平板以下：固定顯示 */
    @media (max-width: 1280px) {
      .effect-inset {
        /*background-color: var(--inset-bg);*/
        background-color: transparent;
      }

      .effect-inset>img {
        /* transform: scaleY(var(--inset-scaleY)) scaleX(var(--inset-scaleX)); */
        transform: scale(1);
        transform-origin: center;
      }
    }

    /* ========================================
            按鈕效果
            Arc Button 套件 - Mobile First
            使用方式：
            <a href="#" class="btn-arc arc-blue">
                <span>了解更多</span>
            </a>
    ======================================== */

    /* ========================================
            按鈕共用設定
            預設：手機版
        ======================================= */
    .btn-arc {
      /* 預設色彩，可由下方顏色 class 覆蓋 */
      --btn-color: #f8f8f8;
      --btn-hover-color: #f0f0f0;
      --btn-hover-text-color: #ffffff;

      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      /* 手機版：滿版按鈕 */
      width: 100%;
      min-width: 0;
      padding: 13px 20px;

      background-color: transparent;
      border: 1px solid var(--btn-color);
      border-radius: 999px;
      overflow: hidden;

      color: var(--btn-color);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.08rem;
      line-height: 1.4;
      text-decoration: none;

      box-sizing: border-box;
      cursor: pointer;

      transition:
        color 0.35s ease,
        border-color 0.35s ease,
        transform 0.3s ease,
        box-shadow 0.35s ease;
    }

    /* hover 時淡入的背景色 */
    .btn-arc::before {
      content: "";
      position: absolute;
      inset: 0;

      background-color: var(--btn-hover-color);
      opacity: 0;

      transition: opacity 0.35s ease;
    }

    /* 文字保持在 hover 背景上方 */
    .btn-arc span {
      position: relative;
      z-index: 1;
    }

    /* ========================================
            桌機滑鼠 hover 效果
        ======================================== */
    @media (hover: hover) {
      .btn-arc:hover {
        color: var(--btn-hover-text-color);
        border-color: var(--btn-hover-color);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
      }

      .btn-arc:hover::before {
        opacity: 1;
      }
    }

    /* 手機與桌機點擊效果 */
    .btn-arc:active {
      color: var(--btn-hover-text-color);
      border-color: var(--btn-hover-color);
      transform: translateY(0);
    }

    .btn-arc:active::before {
      opacity: 1;
    }

    /* 鍵盤操作時的外框 */
    .btn-arc:focus-visible {
      outline: 2px solid var(--btn-color);
      outline-offset: 4px;
    }

    /* ========================================
            色彩套件
            之後自行新增或修改顏色即可
        ======================================== */

    /* 藍色 */
    .arc-blue {
      --btn-color: #4951fb;
      --btn-hover-color: #252eeb;
    }

    /* 粉彩色 */
    .arc-magenta {
      --btn-color: #ff68c4;
      --btn-hover-color: #e41895;
    }

    /* 黑灰色 */
    .arc-gray {
      --btn-color: #777777;
      --btn-hover-color: #444444;
    }

    /* 橘紅色 */
    .arc-orange {
      --btn-color: #fe5e37;
      --btn-hover-color: #de4a2f;
    }

    .arc-red {
      --btn-color: #f92b6e;
      --btn-hover-color: #d50549;
    }


    /* ========================================
            按鈕群組
            預設：手機版，上下排列
        ======================================== */
    .btn-group {
      margin: 1rem auto 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .btn-group-partner {
      width: 90%;
    }

    /* ========================================
            平板版：481px 以上
        ======================================== */
    @media screen and (min-width: 481px) {
      .btn-group {
        margin: 1.2rem auto 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
      }

      .btn-arc {
        width: auto;
        min-width: 160px;
        padding: 12px 28px;
      }

      .btn-group-partner {
        width: 100%;
      }
    }

    /* ========================================
            桌機版：769px 以上
        ======================================== */
    @media screen and (min-width: 769px) {
      .btn-arc {
        min-width: 180px;
        padding: 14px 32px;
        font-size: 18px;
      }
    }

    /* ========================================
            跑馬燈效果（連續版本）
            Marquee 套件 - Mobile First
            使用方式：
            <div class="marquee marquee-yellow">
                <div class="marquee__track">
                    <span class="marquee__item">
                        📢 最新公告：活動期間滿額享優惠，數量有限，售完為止！
                    </span>
                    <span class="marquee__item" aria-hidden="true">
                        📢 最新公告：活動期間滿額享優惠，數量有限，售完為止！
                    </span>
                </div>
            </div>
    ======================================== */

    .marquee {
      /* 可自行修改的參數 */
      /* 背景色 */
      --marquee-bg: #fff3cd;
      /* 邊框色 */
      --marquee-border: #ffe08a;
      /* 背景框陰影 */
      --marquee-shadow: inset 0 5px 0 rgba(0, 0, 0, 0.25);
      /* 文字顏色 */
      --marquee-color: #856404;
      /* 跑動速度 */
      --marquee-speed: 20s;
      /* 文字間距 */
      --marquee-gap: 48px;
      /* 文字大小 */
      --marquee-font-size: 14px;
      /* 上下內距 */
      --marquee-padding-y: 8px;
      /* 圓角 */
      --marquee-radius: 50px;
      /* 物件上距離 */
      --marquee-margin-top: 0;
      /* 物件下距離 */
      --marquee-margin-bottom: 20px;

      width: 90%;
      /* width: 100%; */
      margin: var(--marquee-margin-top) auto var(--marquee-margin-bottom);
      overflow: hidden;
      background-color: var(--marquee-bg);
      border: 1px solid var(--marquee-border);
      border-radius: var(--marquee-radius);
      padding: var(--marquee-padding-y) 0;
      box-sizing: border-box;
      white-space: nowrap;
      /* 背景框陰影 */
      box-shadow: var(--marquee-shadow);
    }

    .marquee__track {
      display: flex;
      min-width: max-content;
      gap: var(--marquee-gap);
      animation: marquee-loop var(--marquee-speed) linear infinite;
    }

    .marquee__item {
      flex-shrink: 0;
      margin: 0;
      padding-top: .2rem;
      color: var(--marquee-color);
      font-size: var(--marquee-font-size);
      line-height: 1.5;
    }

    /* 滑鼠移入時暫停，主要適用於桌機 */
    .marquee:hover .marquee__track {
      animation-play-state: paused;
    }

    /* 跑馬燈動畫 */
    @keyframes marquee-loop {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(calc(-50% - var(--marquee-gap) / 2));
      }
    }

    /* ========================================
            色彩套件
            之後自行新增或修改顏色即可
        ======================================== */

    /* 黃色公告款 */
    .marquee-yellow {
      --marquee-bg: #fff3cd;
      --marquee-border: #ffe08a;
      --marquee-color: #856404;
    }

    /* 粉色活動款 */
    .marquee-pink {
      --marquee-bg: #fff0f5;
      --marquee-border: #f6bfd2;
      --marquee-color: #c04c75;
    }

    /* 藍色通知款 */
    .marquee-blue {
      --marquee-bg: #eef7ff;
      --marquee-border: #b8dcff;
      --marquee-color: #2774a8;
    }

    /* 紅色放送款 */
    .marquee-red {
      --marquee-bg: #ff6a9b;
      --marquee-border: #ffb5cd;
      --marquee-color: #fff540;
      --marquee-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.25);
    }


    /* =========================
   平板版｜768px 以上
    ========================= */
    @media screen and (min-width: 768px) {
      .marquee {
        --marquee-speed: 22s;
        --marquee-gap: 64px;
        --marquee-font-size: 16px;
        --marquee-padding-y: 10px;
        --marquee-radius: 50px;
      }

      .marquee__item {
        padding-top: .2rem;
        line-height: 1.5;
      }
    }

    /* =========================
   桌機版｜1280px 以上
    ========================= */
    @media screen and (min-width: 1280px) {
      .marquee {
        --marquee-speed: 24s;
        --marquee-gap: 80px;
        --marquee-font-size: 18px;
        --marquee-padding-y: 12px;
        --marquee-radius: 50px;

        max-width: 1000px;
      }
    }