/******
  * @name: content_618狂歡激省祭
  * @author: openAI
  * @version: 1.0.2
  * @update: 2026/5/28
******/
    :root {
      /*品牌強調色*/
      --accent: #fe5e37;
      /*主文字*/
      --fg: #181300;
      /*次要文字*/
      --muted: #b59657;
      /*主背景*/
      --bg: #ffe6f3;
      /*區塊/卡片背景*/
      --surface: #f64500;
      /*弧角*/
      --img-radius: 14px;
      /*內框弧角*/
      --inner-radius: 30px;
      --inner-radius-sm: 12px;
      /*內框間距*/
      --inset-border-sm: 5px;
      /* 內縮比例，數字越小，內縮越明顯 */
      --inset-duration: .25s;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--bg);
    }

    /*** 主要框架 ***/
    .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 {
      background: #ffdcf1;
    }

    .bgframe02 {
      background: url('../images/bg02.jpg') repeat-y center center/cover;
    }

    .bgframe03 {
      background: url('../images/bg03.jpg') repeat-y center center/cover;
    }

    .bgframe04 {
      background: url('../images/bg04.jpg') repeat-y center center/cover;
    }

    .bgframe05 {
      background: url('../images/bg05.jpg') repeat-y center center/cover;
    }

    .cutframe {
      margin: 0 auto;
      padding: 0;
    }

    @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;
    }

    /*** 湊單神隊友 ***/
    .partner {
      margin: 0 auto;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 1%;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .partner>a.img-prd {
      position: relative;
      /* 讓整個區塊可點 */
      display: block;
      /* 約 3 欄（配合 gap） */
      flex: 0 0 45%;
      text-decoration: none;
      color: inherit;
      outline: none;
      margin-bottom: 1%;
      border-radius: var(--img-radius);
      overflow: hidden;
    }

    .partner>a.img-prd>img {
      /* 不要用 HTML width="30%"，交給 CSS */
      width: 100% !important;
      height: auto;
      /* 避免底部空隙（這不影響同列排列） */
      display: block;
      /* 你的圓角 */
      border-radius: inherit;
    }

    .partner>a.effect-inset {
      /*** 內縮效果參數 ***/
      --inset-scaleY: .938;
      --inset-scaleX: .965;
    }

    /* =========================================================
   平板以上 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: 1.5rem;
      width: 90%;
      font-family: "Noto Sans TC", sans-serif;
      font-size: clamp(14px, 1.2vw + 0.6rem, 16px);
      line-height: 1.65;
      color: var(--fg);
    }

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


    .notice h3 {
      margin: 0;
      font-size: clamp(18px, 1.6vw + .7rem, 24px);
      font-weight: 700;
      line-height: 1.5;
      color: var(--accent);
    }

    .notice h4 {
      margin: 1.2rem 0 0 0.5rem;
      font-size: clamp(18px, 1.6vw + .7rem, 24px);
      font-weight: 700;
      line-height: 1.5;
      color: #fe814a;
    }

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

    .notice p {
      padding: 15px 15px 0;
      text-align: justify;
    }

    .notice p span {
      font-size: clamp(12px, .6vw + .55rem, 13px);
      color: var(--muted);
    }

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

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


    /*** 版頭 ***/

    .header {
      width: 100%;
      background: url(../images/Header_bg.jpg?260528) no-repeat center center/cover;
    }

    .header img {
      display: block;
      width: 100%;
      margin: 0 auto;
    }

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

      .header img {
        width: 50%;
      }

    }

    .footer {
      padding: 10px 0 18px;
      text-align: center;
      color: #f92b6e;
      font-size: clamp(11px, .6vw + .55rem, 12px);
    }


  
    /* ========================================
            頁簽切換效果
            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(4, 1fr);
      gap: 4px;
      width: 80%;
      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: 12px;
      line-height: 1.45;
      text-align: center;
      color: #cc9933;

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

    #productTabs .product-tabs__button span {
      display: block;
      font-size: 11px;
      color: #ff7a5a;
    }


    /* 目前選中的 tab 按鈕 */
    #productTabs .product-tabs__button.is-active {
      /*border: 4px solid #fff77e;*/
      background: #fff77e;
      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: var(--inner-radius-sm);
      background: #fff77e;
    }


    /* =========================
   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;

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


    /* 目前顯示中的商品輪播 */
    #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;
        font-size: 16px;
        border-radius: var(--img-radius) var(--img-radius) 0 0;
      }

      #productTabs .product-tabs__button span {
        font-size: 14px;
      }

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

    }


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

      #productTabs .product-tabs__button {
        font-size: 18px;
      }

      #productTabs .product-tabs__button span {
        font-size: 15px;
      }

    }

    /* ========================================
            響應式產品輪播效果
            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-yallow {
      --inset-bg: rgba(255, 247, 77, .9);
    }

    .inset-orange {
      --inset-bg: rgba(250, 207, 105, .9);
    }

    .inset-magenta {
      --inset-bg: rgba(255, 0, 155, .9);
    }

    .inset-blue {
      --inset-bg: rgba(73, 81, 251, .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;
    }



    /* ========================================
            按鈕群組
            預設：手機版，上下排列
        ======================================== */
    .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;
      }
    }