/* ===== 共用開始：重置樣式 ===== */
body { margin:0; padding:0;}
img { max-width: 100%; border:0px; vertical-align:top; }
a { text-decoration: none; }
/* ===== 共用結束：重置樣式 ===== */

/* ===== 共用開始：範本頁基礎設定 (base.css) ===== */
/*
 * @spec-version 1.0
 * @spec-owner
 *
 * ## 功能規格
 * - 提供活動頁範本共用基礎 CSS（reset、預載圖片隱藏、平台切換、WRAPPER 容器、Area 通用、回版頭）
 * - 匯出時合併至 main.css（置於 cssReset 之後、模板 CSS 之前）
 *
 * ## 輸入／輸出
 * - Input: 無（純靜態樣式表）
 * - Output: 作用於活動頁 .WRAPPER 及子元素的基礎版面樣式
 *
 * ## 限制條件
 * - 固定規範，禁止任意修改 CSS 內容
 * - 此樣式針對活動頁輸出，不適用於編輯器 UI
 *
 * ## 依賴
 * - 無
 *
 * @spec-end
 */
/**
 * base.css — 範本頁基本設定樣式（固定規範，勿任意修改 CSS 內容）
 * 匯出時會合併到 main.css（位於 cssReset 之後、模板 CSS 之前）
 *
 * 區段：基礎設定 / 平台切換 / 預載圖片隱藏 / 主容器 WRAPPER /
 *       Area 區域通用 / 標籤錨點 tag
 */

/* ===== 基礎設定 ===== */
html { -webkit-text-size-adjust:none; }
html, body { margin:0; padding:0;}
img { border: 0px; vertical-align: top;}
a { text-decoration:none; }

/* ===== 預載圖片預設隱藏 (圖片元素) ===== */
.articleList img.lazy_off { background-image: none!important;}

/* ===== 預載圖片預設隱藏（容器元素) ===== */
.articleList .lazy[data-bg=""][data-was-processed="false"],
.articleList .lazy[data-bg=""][data-was-processed="false"]::before,
.articleList .lazy[data-bg=""][data-was-processed="false"]::after,
.articleList .lazy[data-bg=""][data-was-processed="false"] *,
.articleList .lazy[data-bg=""][data-was-processed="false"] *::before,
.articleList .lazy[data-bg=""][data-was-processed="false"] *::after { background-image: none !important;}

/* ===== 平台切換開關 ===== */
.for_phone { display: none !important;}
    @media screen and (max-width:767px){
      .for_pc    { display: none !important;}
      .for_phone { display: inherit !important;}
    }

/* ===== 主容器 區域通用樣式 ===== */
.WRAPPER { font-family: "微軟正黑體", system-ui, Helvetica, Arial; text-align:left;}
.WRAPPER { z-index:0; position: relative; display:block; margin: 0 auto; padding:0; width:100%; overflow: hidden;}
.WRAPPER a { -webkit-tap-highlight-color: transparent; }
    @media screen and (min-width: 768px) {
      .WRAPPER { min-width:1220px; }
    }
    @media screen and (max-width:767px){
      .WRAPPER { min-height:100%; overflow:hidden;}
      .WRAPPER img { width:100%; height:auto;}
    }

/* ===== Area 區域通用樣式 ===== */
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { display:block;} 
.Area .go_bt { transition: all 0.2s ease;}
.Area .go_bt:hover { transform:none; filter:brightness(110%);}
  @media screen and (min-width:768px){
    .Area .go_bt:hover { transform:translateY(-6px);}
  }
  @media screen and (max-width: 767px) {
    .Area { padding: 0; box-sizing: border-box;}
  }
.Area1220 { margin:0 auto; width:100%;}
.Area960  { margin:0 auto; width:100%;}
  @media screen and (max-width: 767px) {
    .Areabottom { margin-bottom:24px;}
    .Areapadding { padding-inline: 10px;}
  }
  @media screen and (min-width:768px){
    .Area1220   { width:1220px;}
    .Area960    { width:960px;}
    .Areabottom { margin-bottom:80px;}
    /* .Areapadding { padding-inline: 10px;} */
  }

/* ===== 標籤錨點（tag_anchor） ===== */
.tag { position: relative; display:block; width:0; height:0;}
    @media screen and (max-width:767px){
      .tag { scroll-margin-top: 50px;}
    }

/* ===== 回版頭 ===== */
#gotopBtn { display:none !important;} /*把系統手機版原本的Gotop關掉*/
#gotop { display: none; position:fixed; z-index:201; right:0; padding:14px 6px 3px 10px; font:12px/30px Verdana; text-align:center; color:#fff; cursor:pointer; transition: 0.2s; transform: translateX(200%);
          bottom:90px;
          bottom: calc(90px + constant(safe-area-inset-bottom)*0.6 );
          bottom: calc(90px + env(safe-area-inset-bottom)*0.6 );}
#gotop::before { content: ""; position:absolute; top:9px; left:19px; width: 0; height: 0; border: 4px solid #fff; border-color: transparent transparent #fff; }
#gotop::after  { content: ""; z-index:-1; position:absolute; top:50%; left:50%; border-radius:50px 0 0 50px; transform:translate(-50%,-50%); width:44px; height:44px; background-color:rgba(0,0,0,0.8);}
#gotop.cate-open { transform: translateX(0%);}
/*區塊色*/
#gotop { color: #000;}
#gotop::before { border-color: transparent transparent #000;}
#gotop::after { background-color: rgba(255, 255, 255, 0.95); -webkit-box-shadow: 0 1px 0 #f2f2f2, 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 0 #f2f2f2, 0 0 10px rgba(0, 0, 0, 0.2);}

/* ===== 輪播UI配色設定 ===== */
:root {
  --swiper-pagination-color: #000;
  --swiper-scrollbar-color: 0, 0, 0;
}
.swiper-pagination-bullet,
.swiper-pagination-bullet-active { background-color: var(--swiper-pagination-color);}
.swiper-scrollbar { background: rgba(var(--swiper-scrollbar-color), .1);}
.swiper-scrollbar-drag { background: rgba(var(--swiper-scrollbar-color), .5);}

/* ===== PD_Layout 公版CSS修正輪播公版預帶li被景色的問題【待YY更新後可刪除】 ===== */
.PD_layout[data-pd-style=off] { font-size: inherit; font-family: inherit;}
.Area_swiper_box .PD_layout[data-pd-li*="BN"]  li { background-color: transparent;}
.Area_swiper_box:has([class^="swiper"][class$="-lock"]) { padding-bottom: 0; }
/* ===== 共用結束：範本頁基礎設定 (base.css) ===== */

/* ===== 共用開始：區塊標題 (area-title-default) ===== */
/* ── area-title variant: default ── */
.Area_title_lbtclass {
  position: relative;
  margin: 0 auto;
  padding: 0;
}
.Area_title_lbtclass :where(*) {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
.Area_title_lbtclass :where(i,.PD_btn) { 
  display: none;
}
.Area_title_lbtclass img {
  width: 100%;
}
.Area_title_lbtclass h3 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 5vw;
  color: #b00e14;
  /* font-weight: 900; */
}
@media screen and (min-width: 768px) {
  .Area_title_lbtclass h3 {
    font-size: 50px;
  }
}
/* ===== 共用結束：區塊標題 (area-title-default) ===== */

/* ===== 模板開始：版頭視覺區（主標+副標輪播+品牌輪播+版頭品+裝飾+倒數） (comp_header_hero-visual_001) ===== */
/* 主背景色 */
.WRAPPER { 
  background-color: #c90f15;
}

/*主視覺背景*/
.Area_topbg {
  z-index: -1;
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
  background-size: 100%;
  background-position: center top;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .Area_topbg {
    height: auto;
    aspect-ratio: 960 / 646;
    background-image: url(m_01.jpg?t=1779947983799);
  }
}

.bg_01 { z-index:0; position:absolute;; top:0; left:0; width:100%; min-width:1220px; height:100%; background-repeat:no-repeat; background-position:center top; pointer-events:none;}
.bg_02 { z-index:0; position:absolute;; top:5050px; left:0; width:100%; min-width:1220px; height:100%; background-repeat:no-repeat; background-position:center top; pointer-events:none;}

/* 版頭 */
@media screen and (min-width: 768px) {
  .Area_hero {
    position: relative;
    aspect-ratio: 960 / 617;
  }
  }
@media screen and (max-width: 767px) {
.Area_hero {
  position: relative;
  aspect-ratio: 960 / 646;
}
}


/* 倒數計時 */
.Area_hero--TimerNick { 
  z-index: 8;
  position: absolute; 
  display: flex;
  align-items: center;
  column-gap: 0.35em;
  text-align: left;
  font-weight: 900;
  line-height: 1;
  .FontStyle {
    display: flex;
    align-items: center;
    column-gap: 0.35em;
  }
  b {
    font-size: 1em;
  }
  span {
    font-size: 0.8em;
  }
}
.Area_hero--TimerNick { 
  top: 50vw;
  left: 4vw;
  font-size: 3.5vw;
  color: #FFF;
  letter-spacing: -2px;
}
@media screen and (min-width: 768px) {
  .Area_hero--TimerNick { 
    top: 436px;
    left: 35px;
    font-size: 30px; 
  }
}

/* 限定標 */
.Area_hero--tag {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
}

/* 標題(輪播) */
.Area_hero--title {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  .swiper-pagination {
    display: none;
  }
}

/* 版頭品(輪播) */
.Area_hero--PD {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
}
.Area_hero .Area_swiper_box {
  padding-bottom: 0;
}
.Area_hero .Area_swiper_box .PD_layout-heroPDBN.PD_layout {
  font-size: 3vw;
  .PD .PD_into {
    position: absolute;
    top: 60%;
    left: 22%;
    width: 37.5%;
  }
  h3,h4 {
    color: #fff;
    text-align: left;
    font-size: 1.35em;
  }
  h4 {
    font-size: 1em;
    margin-top: -0.35em;
  }
  p {
    color: #ffe19f;
    text-align: right;
    font-size: 0.7em;
    height: 3em;
    line-height: 3em;
    b,del {
      font-size: 1.4em;
    }
    .money {
      font-size: 1.6em;
    }
    .Price {
      font-size: 2.8em;
    }
    small {
      font-size: 1.2em;
    }
  }
  .PD:hover {
    h4{
      color: #fff;
    }
  }
}
@media screen and (min-width: 768px) {
  .Area_hero .Area_swiper_box .PD_layout-heroPDBN.PD_layout {
    font-size: 30px;
  }
}


/* a.mo_remind_btn { z-index: 9999; position: absolute ; width: 17%; top: 44vw; left: -2vw;} */

/* ===== 模板結束：版頭視覺區（主標+副標輪播+品牌輪播+版頭品+裝飾+倒數） (comp_header_hero-visual_001) ===== */

/* ===== 模板開始：提醒我按鈕 (comp_basic_20260520001__btn-remind) ===== */
/* 提醒按鈕，預設黑色，加 class切成白色 */
.btn_remind_black {
  --rgb: 255,255,255;
  --rgb-black: 0,0,0;
}
.btn_remind_white {
  --rgb: 0,0,0;
  --rgb-black: 255,255,255;
}
.btn_remind {
  --opacity: 1;
  --color: rgba(var(--rgb), var(--opacity));
  font-size: 2.5vw;
  position: absolute;
  z-index: 10;
  right: 0;
  transform: translateY(-30%);
  border-radius: 5em 0 0 5em;
  background-image: linear-gradient( 0deg, rgba(var(--rgb-black),0.9) 0%, rgba(var(--rgb-black), 0.6) 100%);
  border: 1px solid rgba(var(--rgb),0.3);
}
.btn_remind_icon {
  --width: 2.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5em 1em 0.5em 2.25em;
  height: auto;
  color: var(--color);
}
.btn_remind_icon i {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 0.25em;
  width: var(--width);
  height: var(--width);
}
.btn_remind_icon svg {
  width: var(--width);
  height: var(--width);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  vertical-align: middle;
  fill: var(--color);
}
.btn_remind_icon span {
  word-break: keep-all;
}
/* ===== 模板結束：提醒我按鈕 (comp_basic_20260520001__btn-remind) ===== */

/* ===== 模板開始：登記活動（含彈窗詳情） (comp_block_20260427008__register-activity) ===== */
/* 登記贈品文案顏色 */
.Area_danji .danji_box ul li .activityText .gifts span { 
  color: #f5dfc2;
}


/*回饋*/
  .feedback .PD_layout[data-pd-li=BN] ul, .PD_layout[data-pd-li=BN-AWD] ul, .PD_layout[data-pd-li=PDBN] ul {
      padding: 0;
      grid-gap:0;
  }


/*攻略區*/

 @media screen and (min-width:768px){
   .Area_register-activity { margin-bottom:80px;}
   .Area_register-activity  .topic_01 {padding-top: 111px;}
   .Area_register-activity .bg {background-image: url("layout_center.jpg?t=1779947983799"); position: absolute; top:85px; left: -520px; width: 2000px; height:2226px; z-index:-1; }
   .Area_register-activity .bg::before{ content: ""; background: url("layout_top.jpg?t=1779947983799") no-repeat scroll top; position: absolute; top:-97px;left:0; width: 100%; height: 100%; z-index:-1; }
   .Area_register-activity .bg::after{ content: ""; background: url("layout_bottom.jpg?t=1779947983799") no-repeat scroll bottom; position: absolute; left:0; width: 100%; height: 105%; z-index: -1; }
   .Area_register-activity .PD_layout[data-pd-li=BN]  ul {grid-gap: 0; padding: 19px; }
   .Area_register-activity .box_all {margin-bottom: 2%;}
   .Area_register-activity .box_all .PD_box { margin:0 2.2%; border-radius:0;}
  }
  @media screen and (max-width:767px){
     .Area_register-activity { margin-bottom:10vw;}
     .Area_register-activity  .topic_01 {padding-top: 12vw;}
     .Area_register-activity .PD_layout[data-pd-li=BN]  ul {grid-gap: 0; padding:2vw; }
     .Area_register-activity .box_all .PD_box {margin: 0 2.2%;border-radius: 0.75em;}
     .Area_register-activity .bg { background-image: url("m_center.jpg?t=1779947983799");background-size: contain; position: absolute; top:11vw; left: 0; width: 100%; height: 99%; z-index: -1; }
     .Area_register-activity .bg::before{ content: ""; background: url("m_top.jpg?t=1779947983799") no-repeat scroll top / 100%;; position: absolute; top:-12vw; left: 0; width: 100%; height: 100%; z-index:-1; }
     .Area_register-activity .bg::after { content: ""; background: url("m_bottom.jpg?t=1779947983799") no-repeat scroll bottom / 100%; position: absolute; top:3vw; left: 0; width: 100%; height: 100%; z-index:-1; }
  
  }



  


/* ===== 模板結束：登記活動（含彈窗詳情） (comp_block_20260427008__register-activity) ===== */

/* ===== 模板開始：影片（YouTube 嵌入） (comp_block_20260427005__youtube-video) ===== */

                  
/*Youtube影片浮層css*/
.box_youtube { margin: 0 auto;  display: block !important;}
@media screen and (min-width:768px){
  .box_youtube { width:950px; border-radius: 20px; }
}
@media screen and (max-width:767px){
  .box_youtube { width:100%; display: block !important; }
}

.bigpicture { height: 100%;	width: 100%; position: relative; background-position: center center; background-size: cover; cursor: pointer;}
.bigpicture h3 { position: absolute; left: 5%; bottom: 0; z-index: 1; color: #fff; font-size: 20px }
.bigpicture:before,
.bigpicture:after { z-index: 1; content: ''; position: absolute; left: 0; top: 0; right: 0;	bottom: 0;height: 100%;	width: 100%; transition: opacity 0.2s;}
.bigpicture:after { background-repeat: no-repeat; background-position: center; opacity: 1; background-size: 2em;}
/*.bigpicture:hover:after { opacity: 0.8; }*/
.bigpicture:hover:before { opacity: 0.5; }
.bigpicture:after { height: 100%; width: 100%;	
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20159.00691%20111.60904%22%3E%3Cpath%20d%3D%22M36.2%20111c-25-1.3-29.6-4-34-18.6C.3%2086.7%200%2080%200%2057.4%200%2019%202.3%209.7%2013.6%204c11.5-5.6%20120-5.6%20131.4%200%206%203%2010%208.7%2011.8%2017.2%202%209.8%203%2042.2%201.5%2057.5-2%2020.4-7%2028.5-19.2%2030.8-7.6%201.5-82%202.4-102.8%201.3zM85%2065.3c11.3-6%2020.4-11%2020.3-11L84%2043%2063%2032v22c0%2012%20.4%2022%20.8%2022%20.3%200%2010-5%2021.2-10.8z%22%20fill%3D%22%23db2823%22%2F%3E%3Cpath%20d%3D%22M63.2%2032c-.4.3-.2%201-.3%201.3v28.5c0%204.6%200%209.2.5%2013.8%200%20.4.3.7.6.5%206.3-3%2012.3-6%2018.4-9.3%207.5-4%2015-7.8%2022.2-12%20.3%200%201-.4.6-.8-12.8-7-25.7-13.5-38.6-20.2-1-.6-2.2-1.3-3.4-1.7z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
  background-size: 4em;
}
.bigpicture img { width: 100%;  aspect-ratio: 1.777777;}
@media screen and (max-width:767px) {
  .bigpicture h3 { font-size: 3vw; left: 1.2em;}
}
       
/* ===== 共用開始：輪播UI配色覆寫 ===== */
:root {
  --swiper-pagination-color: #ffffff;
  --swiper-scrollbar-color: 255, 255, 255;
}
/* ===== 共用結束：輪播UI配色覆寫 ===== */