/* 1. Thin (細體) */
@font-face {
  font-family: 'LINE Seed TW';
  src: url('../fonts/LINESeedTW_OTF_Th.woff2') format('woff2');
  font-weight: 100; /* 或 200 */
  font-style: normal;
  font-display: swap;
}

/* 2. Regular (常規體) */
@font-face {
  font-family: 'LINE Seed TW';
  src: url('../fonts/LINESeedTW_OTF_Rg.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 3. Bold (粗體) */
@font-face {
  font-family: 'LINE Seed TW';
  src: url('../fonts/LINESeedTW_OTF_Bd.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 4. Extra Bold (特粗體) */
@font-face {
  font-family: 'LINE Seed TW';
  src: url('../fonts/LINESeedTW_OTF_Eb.woff2') format('woff2');
  font-weight: 800; /* 或 900 */
  font-style: normal;
  font-display: swap;
}

html, body{
	-webkit-text-size-adjust: 100%; /*避免文字自動放大*/
	width:100%;
	height:100%;
  font-weight: 400; /* 網頁預設會自動抓到 Rg 那個檔案 */
	font-family:'LINE Seed TW',"Segoe UI",'Noto Sans TC', "微軟正黑體", Arial, Helvetica,sans-serif; 
}








/* ===========================
   Tabs
=========================== */

.tab-area {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
}

.tab-header {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
}

.tab-btn {
  width: 33%;
  height: 130px;
  background: #fff;
  
  border-radius: 30px 30px 0 0;
  color: #b8b2d8;
  cursor: pointer;
  transition: .3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.tab-btn:hover {
  transform: translateY(-3px);
}

.tab-btn h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
}



.tab-btn p {
  margin: 8px 0 0;
  font-size: 22px;
}

/* Active */

.tab-btn.active {
  /*height: 145px;*/
  background: #252A8D;
  color: #fff;
  box-shadow: 0 -8px 24px rgba(76, 48, 246, .35);
  z-index: 2;
  border: 4px solid #4C30F6;
}

.tab-btn.active h3 {
  color: #FFE55B;
}

/* ===========================
 Content
=========================== */

.tab-wrapper {
  margin-top: -1px;
  padding: 60px;
  width: 100%;
  
  /* 1. 設定圓角：維持原本的下半部圓角 */
  border-radius: 0 0 36px 36px;
  
  /* 2. 漸層邊框核心：運用雙層背景遮罩技術 */
  border: 4px solid transparent; /* 邊框厚度維持 4px 且透明 */
  background-image: linear-gradient(#F5F1FF, #F5F1FF), /* 第一層：內容區域的純色底（覆蓋漸層） */
                    linear-gradient(to bottom, #454eff, #f4f0ff, #381ec7); /* 第二層：外框的漸層色（由上往下） */
  background-origin: border-box;
  background-clip: padding-box, border-box;

}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ===========================
 Prize Card
=========================== */

.prize-card {
  width: 600px;
  margin: 0 auto;
  padding: 40px;
  background: #fff;
  border: 8px solid #4C30F6;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.prize-card .title {
  font-size: 42px;
  font-weight: bold;
  color: #4338CA;
}

.prize-card .price {
  margin: 10px 0;
  font-size: 100px;
  font-weight: 900;
  line-height: 1;
  color: #000;
}

.prize-card .sub {
  font-size: 40px;
  color: #4338CA;
  font-weight: bold;
}



.activity .cards {
  width: 100%;
  row-gap: 0;
}


.card-p{
  width: 700px;
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 400;
}

.img_30000{
  width: 60%;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .card-p{
    width: 100%;
      font-size: 16px;
      margin-top: 10px;
      margin-bottom: 10px;
  }

  .img_30000{
    width: 60%;
    margin: 0 auto;
  }
}



/* ===========================
 List
=========================== */

.tab-list {
  margin-top: 50px;
  padding-left: 24px;
}

.tab-list li {
  font-size: 28px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 18px;
}

/* ===========================
 Responsive
=========================== */

@media (max-width:768px){

  .tab-header{
      gap:6px;
  }

  .tab-btn{
      width:33.333%;
      height:90px;
  }

  /*
  .tab-btn.active{
    
      height:100px;
  }
  */

  .tab-btn h3{
      font-size:17px;
  }

  .tab-btn p{
      font-size:14px;
      margin: 2px 0 0;
  }

  .tab-wrapper{
      padding:30px 20px;
  }

  .prize-card{
      width:100%;
      padding:25px;
  }

  .prize-card .title{
      font-size:26px;
  }

  .prize-card .price{
      font-size:64px;
  }

  .prize-card .sub{
      font-size:24px;
  }

  .tab-list li{
      font-size:18px;
  }

}


@media screen and (min-width: 768px) {
  .section {
    padding: 0rem 0;
  }
}


@media screen and (min-width: 768px) {
  .activity .card__img {
      margin-top: 0%;
      margin-left: 6%;
  }
}

@media (max-width: 767px) {
  .activity .card__img {
    width: 80%;
   margin-left: 12%;
  }
}

.text-bl{
  color: #172a88;
}

.text-wh{
  color: #ffffff;
}

.text-pur{
  color:#c6c8fc
}


@media screen and (min-width: 1024px) {
  .activity .card__txt {
      row-gap: 1rem;
      padding-bottom: 1.75rem;
      font-size: 22px;
      line-height: 2rem;
      padding: 0 10px 0 10px;
  }
}

@media screen and (min-width: 1024px) {
  .activity .section__ttl {
      padding-top: 3.5rem;
      padding-bottom: 0px;
  }
}

@media (max-width: 767px) {



  .activity .card__txt {
    row-gap: 1rem;
    padding-bottom: 1.75rem;
    font-size: 16px;
    line-height: 1.5rem;
    padding: 0 10px 0 10px;
}



  .activity .section__ttl {
    
    padding-bottom: 0px;
}
}


.hero__ttl {
  opacity: 0;
}




.responsive-prize-container {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 0 auto; 
}

/* 容器內如果有其他子元素，彼此產生 24px 間距（相當於 space-y-6） */
.responsive-prize-container > * + * {
  margin-top: 24px;
}

/* 基礎表格通用設定 */
.prize-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  background-color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #F5F1FF; 
}

/* 所有的邊框格線設定 */
.prize-table th, 
.prize-table td {
  border: 1px solid #F5F1FF;
}

/* 藍色系表頭基本設定 */
.prize-table .bg-blue-main {
  background-color: #1e3a8a;
  color: #ffffff;
}
.prize-table .bg-blue-dark {
  background-color: #0f2d7a;
  color: #ffffff;
}

/* 白底內文基本設定 */
.prize-table .bg-white-content {
  background-color: #ffffff;
  color: #1f2937;
}

/* ==========================================
   手機版本樣式 (預設：螢幕寬度小於 640px)
   ========================================== */
.table-mobile-view {
  display: table;
}
.table-desktop-view {
  display: none;
}

/* 手機版字級設定：藍底 18px 粗體，白底 16px */
.table-mobile-view th,
.table-mobile-view td.bg-blue-dark {
  font-size: 18px;
  font-weight: bold;
  padding: 5px;
}
.table-mobile-view td.bg-white-content {
  font-size: 16px;
  font-weight: 500;
  padding: 5px;
  line-height: 1.5;
}

/* ==========================================
   電腦版本樣式 (當螢幕寬度大於等于 640px 時)
   ========================================== */
@media (min-width: 640px) {
  .table-mobile-view {
    display: none;
  }
  .table-desktop-view {
    display: table;
  }
  
  /* 電腦版字級設定：藍底 24px 粗體，白底 20px */
  .table-desktop-view th,
  .table-desktop-view td.bg-blue-dark {
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
  }
  .table-desktop-view td.bg-white-content {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
  }
}



.feedback_content{
  margin-top: 30px;
  font-size: 22px;
  list-style-type: disc !important;    
  padding-left: 28px !important;       
}

@media (max-width: 767px) {
  .feedback_content{
    font-size: 16px;
    line-height: 28px;
  }
}

.feedback_content li::marker {
  color: #381ec7;     /* 🎨 這裡改成您想要的顏色（例如：黃色） */
}




/* 表格最外層容器 */
.custom-table-container {
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #F5F1FF;
}

/* 表格基礎設定 */
.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  background-color: #ffffff;
}

/* 藍色表頭單元格 */
.custom-table th {
  width: 50%;
  border: 1px solid #F5F1FF;
  padding: 16px;
  background-color: #1e3a8a;
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* 表格內容單元格 */
.custom-table td {
  border: 1px solid #F5F1FF;
  padding: 5px;
  color: #1f2937;
  font-size: 22px;
  line-height: 40px;
  font-weight: 500;
}
@media (max-width: 767px) {

  .custom-table th{
    font-size: 18px;
    padding: 16px;
  }

  .custom-table td {
    padding: 5px;
    font-size: 16px;
    line-height: 40px;
  }

  .card_e30000{
    width: 90%;
    margin: 0 auto;
  }

}

.card_e30000{
  margin-top: 5rem;
}

.img_e30000{
  margin: 0 auto;
  width: 37%;
}

.e_30000_p{
  width: 600px;
  font-size: 22px;
  margin: 0 auto;
  padding-top: 2.5rem;
}



@media (max-width: 767px) {



  .img_e30000{
    width: 64%;
  }



  .card_e30000{
    margin-top: 0rem;
  }


  .e_30000_p{
    width: 80%;
    font-size: 16px;
    margin: 0 auto;
    padding-top: 2.5rem;
  }
}


/* ==========================================
   🚀 環保回饋：左側火箭小怪獸響應式定位
   ========================================== */

/* 💻 桌上型電腦版定位（以中央 30,000 大圖為基準左推） */
.illust_monster_rocket {
  bottom: 40%;
  left: 15%;                 
  width: 140px;              /* 桌機版怪獸合適大小 */
}

/* 🍏 平板/筆電版微調（螢幕小於 1024px） */
@media (max-width: 1024px) {
  .illust_monster_rocket {
    left: 15%;               /* 平板版螢幕較窄，適度往內調進來一些 */
    width: 110px;            /* 等比例縮小怪獸 */
  }
}

/* 📱 手機版微調（螢幕小於 767px） */
@media (max-width: 767px) {
  .illust_monster_rocket {
    left: 2%;                /* 手機版貼近左側邊緣 */
    bottom: 60%;             /* 在手機版直式排版中，將它往上提對齊大圖中間 */
    width: 80px;             /* 手機版精緻小尺寸，防止擋到中間文字 */
  }
}







/* ==========================================
   1. 頁籤大白框容器（基準點保持不變）
   ========================================== */
   .tab-badge-container {
    position: relative; 
    width: 100%;
    max-width: 960px; 
    margin: 0 auto;
  }
  
  /* ==========================================
     2. 桌上型電腦版定位（螢幕大於 1024px 時適用）
     ========================================== */
  .illust_chara_01 {
    position: absolute;
    z-index: 20;        
    bottom: 0;          
    right: 0;           
    
    /* 桌機版大螢幕左右空間夠，可以大膽外推 */
    transform: translate(80px, 80px); 
    width: 250px;       
  }
  
  /* ==========================================
     3. 🚀 新增：平板/筆電版微調（螢幕在 641px ~ 1024px 之間適用）
     ========================================== */
  @media (max-width: 1024px) {
    .illust_chara_01 {
      /* 縮小怪獸比例，避免擋住表格或卡片內容 */
      width: 160px;     
      
      /* 關鍵：減少外推距離（往右只推 10px，往下推 50px），
         這樣在 iPad 等平板上就絕對不會飛出螢幕外面造成破版 */
      transform: translate(-10px, 50px); 
    }
  }
  
  /* ==========================================
     4. 手機版微調（當螢幕小於 640px 時適用）
     ========================================== */
  @media (max-width: 640px) {
    .illust_chara_01 {
      width: 100px;     
      /* 手機版完全不往右推，只往下壓，確保 100% 不會產生水平滑軌 */
      transform: translate(0px, 30px); 
    }
  }
  



/* ==========================================
   🪐 交易回饋加速器：左側外掛土星（永久固定版）
   ========================================== */

/* 💻 桌上型電腦版定位 */
.illust_planet_saturn {
  left: 0;
  top: 22%;                  /* 調整在整個大白框左側偏中央上方 */
  transform: translate(-50%, -50%); 
  width: 130px;              
  pointer-events: none;      
}

/* 🍏 平板/筆電版微調 */
@media (max-width: 1024px) {
  .illust_planet_saturn {
    left: -20px;             
    top: 40%;
    transform: translateY(-50%);
    width: 90px;             
  }
}

/* 📱 手機版微調 */
@media (max-width: 767px) {
  .illust_planet_saturn {
    left: -10px;             
    top: 10%;                
    width: 65px;             
  }
}








.section__ttl2 {
  font-size: clamp(1.063rem, 2.16vw + 0.556rem, 2.5rem);
  letter-spacing: -0.04em;
  color: var(--clr-white);
  padding-left: 8vw;
  padding-right: 8vw;
  padding-bottom: 6.6666666667vw;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.1333333333vw;
  text-shadow: 7px 6px 6px #002066;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .section__ttl2 {
    gap: 1.6%;
    padding-bottom: 3.4375rem;
  }
}

.section__ttl2::before, .section__ttl2::after {
  content: "";
  background: url(../images/icon_star@2x.png) center no-repeat;
  background-size: contain;
  width: clamp(1.25rem, 3.286vw + 0.48rem, 3.438rem);
  aspect-ratio: 1;
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* 定位父層：讓圖片可以相對於文字作絕對定位 */
.section__ttl2 > div {
  position: relative;
}

/* 加上上方傾斜的圖片 */
.section__ttl2 > div::before {
  content: "";
  background: url(../images/img_wow_gift.webp) center no-repeat; 
  background-size: contain;
  aspect-ratio: 140 / 40; 
  position: absolute;
  display: block;

  /* -------------------------------
     📱 手機版樣式 (預設執行)
     ------------------------------- */
  width: 25vw;       /* 圖片寬度隨手機螢幕自動縮放 */
  bottom: 115%;      /* 調整手機版與下方文字的距離 */
  left: 55%;         /* 微調偏左，對齊設計稿視覺 */
  transform: translateX(-50%) rotate(-2deg); /* 置中並逆時針旋轉 15 度 */
}

/* -------------------------------
   💻 電腦版樣式 (寬度 768px 以上)
   ------------------------------- */
@media screen and (min-width: 768px) {
  .section__ttl2 > div::before {
    width: 200px;    /* 電腦版固定最大寬度，避免無限放大 */
    bottom: 120%;    /* 因應電腦版字體變大，拉開上方間距 */
    left: 50%;       /* 電腦版完全居中 */
  }
}




.box02{
  margin-top: 8rem;
}

@media (max-width: 767px) {
  .box02{
    margin-top: 8rem;
  }

}

/*當日平倉區塊*/
.day-close-section {
  margin-top: 6rem;
  padding: 0 16px; /* 防止手機版左右貼邊 */
}

/* 帶紫色邊框與圓角的大白框 */
.day-close-box {
  position: relative; /* 讓左上角標籤認這個框做定位基準 */
  width: 100%;
  max-width: 960px;   /* 限制最大寬度，保持與上方卡片對齊 */
  margin: 0 auto;
  background-color: #f5f3ff; /* 與圖片相同的淡淡紫白色底 */
  border: 3px solid #a17dfa; /* 亮紫色外框 */
  border-radius: 24px;       /* 圓角半徑 */
  padding: 40px 32px 32px 32px; /* 上方保留空間給標籤重疊 */
  box-sizing: border-box;
}

/* 左上角深藍色膠囊標籤 */
.day-close-tag {
  position: absolute;
  top: 0;
  left: 32px;
  transform: translateY(-50%); /* 往上平移自身高度的一半，達成重疊效果 */
  background-color: #1d1099;  
  color: #ffffff;
  font-size: 22px;
  font-weight: bold;
  padding: 6px 24px;
  border-radius: 50px;         /* 膠囊形圓角 */
  border: 2px solid #a17dfa;   /* 同樣帶有紫色邊框 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 內文文字樣式排版 */
.day-close-content {
  color: #1f2937;              /* 深灰色文字 */
  font-size: 22px;             /* 基礎文字大小 */
  line-height: 1.7;            /* 舒適的行高 */
  text-align: justify;         /* 文字左右對齊 */
  letter-spacing: 0.7px;
}

/* 段落與段落之間的垂直間距 */
.day-close-content p + p {
  margin-top: 12px;
}

/* ==========================================
   手機版響應式微調 (螢幕小於 640px)
   ========================================== */
@media (max-width: 640px) {
  .day-close-box {
    border-radius: 16px;       /* 手機版圓角稍微縮小 */
    padding: 32px 16px 16px 16px; /* 縮小內距 */
  }
  
  .day-close-tag {
    left: 16px;                /* 標籤往左靠 */
    font-size: 15px;           /* 標籤字體稍微縮小 */
    padding: 4px 16px;
  }
  
  .day-close-content {
    font-size: 16px;           /* 手機版內文字體改為 14px 更好閱讀 */
    letter-spacing: 0px;
  }

  .day-close-section{
    margin-top: 2rem;
  }
}








.btn-action-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 7rem;
  margin-bottom: 7rem;
  padding: 0 16px;
  box-sizing: border-box;
}

/* 核心按鈕本體 */
.btn-gradient-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff !important;
  position: relative;
  
  /* 🚀 關鍵核心：運用雙層背景遮罩，同時達成圓角與漸層邊框 */
  border: 2px solid transparent; /* 4px 為電腦版邊框厚度 */
  background-image: linear-gradient(to right, #ff6b00, #ff3c00), 
                    linear-gradient(to right, #ff9466 0%, #fdefe6 50%, #ff9466 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  
  /* 這裡設定圓角就能完美生效了！ */
  border-radius: 50px; 

  /* 陰影與動畫 */
  box-shadow: 0 6px 12px rgba(255, 60, 0, 0.3);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

/* 按鈕右側的白色小三角 */
.btn-arrow {
  display: inline-block;
  margin-left: 12px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #ffffff; 
}

/* 滑鼠懸停效果 */
.btn-gradient-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(255, 60, 0, 0.4);
}

/* 按鈕點擊瞬間 */
.btn-gradient-action:active {
  transform: translateY(1px);
  box-shadow: 0 3px 6px rgba(255, 60, 0, 0.3);
}

/* ==========================================
   手機版本字級 (寬度小於 640px)
   ========================================== */
@media (max-width: 639px) {
  .btn-gradient-action {
    font-size: 24px;       
    padding: 10px 24px;    
  }
  .btn-arrow {
    margin-left: 8px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #ffffff;
  }
}

/* ==========================================
   電腦版本字級 (寬度大於等於 640px)
   ========================================== */
@media (min-width: 640px) {
  .btn-gradient-action {
    font-size: 34px;       /* 電腦版 34px */
    padding: 14px 52px;    
    letter-spacing: 1px;
  }
}






/* ==========================================
   1. 大按鈕 BAR 與總容器（寬度鎖定 1920px）
   ========================================== */
   .notice-full-bleed-wrapper {
    width: 100%;
    max-width: 100vw; /* 🚀 新增：強制最外層上限絕不超出視窗寬度，封殺右側多出的空白 */
    background-image: url('../images/notice_star.webp');
    background-position: center center;
    background-color: #2e1cc9; /* 整條長條的底色 */
    overflow: hidden;
    box-sizing: border-box; /* 🚀 新增：確保內外距不額外撐寬 */
  }
  
  .notice-details-component {
    width: 100%;
    display: block;
  }
  
  /* 核心按鈕：限制最大寬度 1920px 並且水平置中 */
  .notice-summary-center-bar {
    width: 100%;
    max-width: 1920px; 
    margin: 0 auto;
    height: 120px; /* 電腦版高度 */
    color: #ffffff;
    list-style: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; /* 讓內容在 1920 範圍內置中 */
    box-sizing: border-box;
  }
  
  /* 移除瀏覽器預設的 details 三角形 */
  .notice-summary-center-bar::-webkit-details-marker {
    display: none;
  }
  
  /* 內容組合：怪獸 + 文字 + 符號 串聯在一起 */
  .notice-content-cluster {
    display: flex;
    align-items: center;
    position: relative;
    /* 依裝置縮放間距 */
    gap: clamp(10px, 1.5vw, 20px); 
  }
  
  /* 粉紅小怪獸圖片 */
  .notice-monster-element {
    height: 80px; 
    width: auto;
    object-fit: contain;
  }
  
  /* 「注意事項 -」大字級 */
  .notice-text-main {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 2px;
    white-space: nowrap;
  }
  
  /* ==========================================
     2. 🚀 右側緊貼文字的動態加減號 (+ 轉 -)
     ========================================== */
  .notice-inline-toggle-icon {
    width: 24px;
    height: 24px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
  }
  
  /* 透過虛擬元素畫出符合大尺寸的 + 號 */
  .notice-inline-toggle-icon::before,
  .notice-inline-toggle-icon::after {
    content: "";
    position: absolute;
    background-color: #ffffff;
    transition: transform 0.3s ease;
  }
  
  /* 橫線 */
  .notice-inline-toggle-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px; /* 加粗格線更清晰 */
    transform: translateY(-50%);
  }
  
  /* 直線 */
  .notice-inline-toggle-icon::after {
    top: 0;
    left: 50%;
    width: 4px; /* 加粗格線 */
    height: 100%;
    transform: translateX(-50%);
  }
  
  /* 💡 關鍵：當展開 [open] 時，讓直線旋轉 90 度與橫線重疊，達成變減號的效果 */
  .notice-details-component[open] .notice-inline-toggle-icon::after {
    transform: translateX(-50%) rotate(90deg);
  }
  
  /* ==========================================
     3. 🚀 展開滿版區塊 (帶有獨立滿版背景)
     ========================================== */
  .notice-expanded-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-out;
    overflow: hidden;
    width: 100%;
  }
  
  .notice-details-component[open] ~ .notice-expanded-panel,
  .notice-details-component[open] .notice-expanded-panel {
    grid-template-rows: 1fr;
  }
  
  /* 獨立的背景圖片層（維持全螢幕滿版） */
  .notice-panel-background-layer {
    min-height: 0;
    width: 100%;
    background-image: url('../images/notice_content_bg.webp'); 
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
  
  /* 內容寬度限制框：確保展開內的文字不會散開到 1920px 那麼寬，方便閱讀 */
  .notice-content-restrict-box {
    max-width: 960px; /* 🚀 新增：限制最大內容寬度 */
    width: 100%;      /* 🚀 新增：使其在手機平板下可以自適應縮小 */
    margin: 0 auto; 
    color: #ffffff; 
    padding: 50px 20px;
    font-size: 20px;
    box-sizing: border-box; /* 🚀 新增：保證左右 20px 內距不撐開總寬度 */
  }
  
  /* ==========================================
     4. 📱 平板與手機版自適應
     ========================================== */
  
  /* 🍏 平板尺寸 (螢幕小於 1024px) */
  @media screen and (max-width: 1024px) {
    .notice-summary-center-bar {
      height: 100px;
    }
    .notice-monster-element {
      height: 65px;
    }
    .notice-text-main {
      font-size: 26px;
    }
    .notice-inline-toggle-icon {
      width: 20px;
      height: 20px;
    }
  }
  
  /* 📱 手機尺寸 (螢幕小於 767px) */
  @media screen and (max-width: 767px) {
    .notice-summary-center-bar {
      height: 80px; 
    }
    .notice-monster-element {
      height: 50px; 
    }
    .notice-text-main {
      font-size: 20px; 
    }
    .notice-inline-toggle-icon {
      width: 16px;
      height: 16px;
    }
    .notice-inline-toggle-icon::before { height: 2px; }
    .notice-inline-toggle-icon::after { width: 2px; }
    
    /* 🚀 新增：手機版展開內容內距稍微縮小，視覺更精緻 */
    .notice-content-restrict-box {
      padding: 30px 16px;
      font-size: 16px;
    }
  }
  




  #faq .faq__content ul li::marker {
    color: #381ec7;     /* 🎨 這裡改成您想要的顏色（例如：亮紫色） */
  }


  .faq .section__body {
    position: relative;
    border-radius: 1.25rem;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(104, 101, 224, 0.4);
    box-shadow: 7px 7px 5px 0px rgba(104, 101, 224, 0.4);
    overflow: hidden;
  }
  @media screen and (min-width: 768px) {
    .faq .section__body {
      border-radius: 3rem;
    }
  }
  .faq .section__body::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 0.3125rem solid transparent;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a785fa), color-stop(50%, #f4f0ff), to(#a785fa));
    background-image: linear-gradient(to bottom, #a785fa 0%, #f4f0ff 50%, #a785fa 100%);
    background-origin: border-box;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(var(--clr-white)), to(var(--clr-white))), -webkit-gradient(linear, left top, left bottom, from(var(--clr-white)), to(var(--clr-white)));
    -webkit-mask-image: linear-gradient(var(--clr-white), var(--clr-white)), linear-gradient(var(--clr-white), var(--clr-white));
    mask-image: -webkit-gradient(linear, left top, left bottom, from(var(--clr-white)), to(var(--clr-white))), -webkit-gradient(linear, left top, left bottom, from(var(--clr-white)), to(var(--clr-white)));
    mask-image: linear-gradient(var(--clr-white), var(--clr-white)), linear-gradient(var(--clr-white), var(--clr-white));
    -webkit-mask-clip: padding-box, border-box;
    mask-clip: padding-box, border-box;
    -webkit-mask-composite: xor, source-over;
    mask-composite: exclude, add;
    border-radius: 1.25rem;
    pointer-events: none;
  }
  @media screen and (min-width: 768px) {
    .faq .section__body::before {
      border-width: 0.625rem;
      border-radius: 3rem;
    }
  }
  .faq .section__cnt {
    background-color: #f7f8f8;
    border-radius: 1.25rem;
    padding: 1.5625rem 1.875rem;
  }
  @media screen and (min-width: 768px) {
    .faq .section__cnt {
      border-radius: 3rem;
      padding: 3.125rem 3.75rem;
    }
  }
  .faq__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 0.25rem;
  }
  .faq__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--faq-text);
    margin: 0;
  }
  .faq .qa-table {
    border-color: var(--clr-primary);
    background-color: var(--clr-white);
  }
  .faq .qa-table__header, .faq .qa-table__cell {
    padding: 0.5rem 0.375rem;
    border-color: var(--clr-secondary);
    border-style: solid;
    border-right-width: 1px;
    border-bottom-width: 1px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: clamp(0.75rem, 0.129vw + 0.72rem, 0.875rem);
  }
  .faq .qa-table__header {
    background-color: var(--clr-primary);
    color: var(--clr-white);
    font-weight: var(--f-bold);
  }
  .faq .qa-table__cell.--bank {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
  }
  .faq .qa-table::-webkit-scrollbar {
    width: 4px;
  }
  .faq .qa-table::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
  }
  .faq .qa-table::-webkit-scrollbar-thumb {
    background: rgba(56, 30, 199, 0.4);
    border-radius: 4px;
    -webkit-transition: background 0.2s ease;
    transition: background 0.2s ease;
  }
  .faq .qa-table::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 30, 199, 0.7);
  }
  .faq .qa-table {
    scrollbar-width: thin;
    scrollbar-color: rgba(56, 30, 199, 0.4) #f1f5f9;
  }
  .faq summary {
    background-color: #afb5f9;
    border-radius: 0.5rem;
    list-style: none;
    outline: none;
    cursor: pointer;
    padding: 0.9375rem 0.75rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: var(--f-bold);
    color:#381ec7;
  }
  @media screen and (min-width: 768px) {
    .faq summary {
      padding: 1.5rem 1.25rem;
    }
  }
  .faq summary::-webkit-details-marker {
    display: none;
  }
  
  .faq__title {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    line-height: 1.2;
    font-size: 22px;
  }

  @media screen and (max-width: 768px) {
    .faq__title {
      font-size: 20px;
    }
  }


  .faq__icon {
    position: relative;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  .faq__icon::before, .faq__icon::after {
    content: "";
    position: absolute;
    background-color: var(--clr-primary);
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  }
  .faq__icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .faq__icon::after {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .faq details[open] .faq__icon::after {
    -webkit-transform: translateX(-50%) rotate(90deg);
    transform: translateX(-50%) rotate(90deg);
  }
  .faq__content-wrap {
    display: grid;
    grid-template-rows: 0fr;
    -webkit-transition: grid-template-rows 0.4s ease;
    transition: grid-template-rows 0.4s ease;
    transition: grid-template-rows 0.4s ease, -ms-grid-rows 0.4s ease;
    overflow: hidden;
  }
  .faq__content {
    background-color: #ffffff;
    border-radius: 0.5rem;
    min-height: 0;
    line-height: 1.6;
    font-size: clamp(1rem, 0.259vw + 0.939rem, 1.25rem);
    font-size: 1rem;
    padding: 0 0.75rem;
    -webkit-transition: padding 0.4s ease;
    transition: padding 0.4s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0;
    -webkit-transition: opacity 0.3s 0.1s;
    transition: opacity 0.3s 0.1s;
    color:#3e3a39;
    font-family: "LINE Seed TW", "Segoe UI", "Noto Sans TC", 微軟正黑體, Arial, Helvetica, sans-serif;
  }
  @media screen and (min-width: 768px) {
    .faq__content {
      padding: 0 1.5rem;
      font-size: 1.25rem;
    }
  }
  .faq__content .grid-cols-4 {
    background-color: var(--clr-white);
  }


  .faq__text {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
  .faq details[open] + .faq__content-wrap {
    grid-template-rows: 1fr;
    margin-bottom: 0.25rem;
    padding-top: 0.5rem;
  }
  .faq details[open] + .faq__content-wrap .faq__content {
    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem;
    opacity: 1;
  }
  @media screen and (min-width: 768px) {
    .faq details[open] + .faq__content-wrap .faq__content {
      padding-top: 1.875rem;
      padding-bottom: 1.875rem;
    }
  }
  .faq .illust_planet_02 {
    max-width: 152px;
    width: 100%;
    top: 13.75rem;
    left: -5.4375rem;
  }
  .faq .illust_planet_03 {
    max-width: 120px;
    width: 100%;
    top: 16.5rem;
    right: -11rem;
  }



/* 🎯 鎖定 FAQ 區塊內的 ul 清單，強制開啟點點與左邊距 */
#faq .faq__content ul {
  list-style-type: disc !important;     /* 100% 強制顯示圓點 */
  list-style-position: outside !important; /* 讓文字換行時保持整齊對齊 */
  padding-left: 2rem !important;     /* 👈 關鍵：把點點從左側邊界外推回來 */
  margin: 0 !important;
  text-align: justify;
}

/* 清單項目之間的上下空隙間距 */
#faq .faq__content ul li {
  margin-bottom: 0.75rem;
}

#faq .faq__content ul li:last-child {
  margin-bottom: 0;
}



/* 🚀 第一步：在清單外層啟動計數器 */
.faq__list {
  counter-reset: faq-counter;
}

/* 🚀 第二步：每遇到一個項目，計數器就自動加 1 */
.faq__item {
  counter-increment: faq-counter;
}

/* 🚀 第三步：修改您原本的這段 CSS */
.faq summary::before {
  /* 關鍵修改：將 content: "Q" 換成中文數字計數器，並加上頓號 */
  content: counter(faq-counter, cjk-decimal) !important;
  
  background-color: var(--clr-primary);
  border-radius: 50%;
  margin-right: 15px;
  
  /* 💡 貼心微調：因為中文加頓號寬度較寬，將寬度由 1.875rem 微調至 2.2rem，字才不會被切到 */
  width: 2.2rem;
  aspect-ratio: 1;
  font-size: 0.9375rem;
  color: var(--clr-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* 確保中文文字與頓號在圓圈內完美置中 */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-variant-numeric: tabular-nums;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

@media screen and (min-width: 768px) {
  .faq summary::before {
    font-size: 1.3rem; /* 電腦版中文字體稍微調整，最美觀 */
    width: 2.8rem;     /* 電腦版寬度同步放大，確保「三、」能完美裝下 */
  }
}




@media (max-width: 640px) {
  .footer {
    padding-bottom: 60px;
  }
}