@charset "UTF-8";
@import url("reset.css");

/* -----------------------------------------
    共用
------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body {
    width: 100%;
	letter-spacing: 1px;
}
figure{
	margin: 0;
}
em{
    font-style: normal;
}

/* -----------------------------------------
    SEO
------------------------------------------*/
.seo-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------
    KV 主視覺
------------------------------------------*/


/* ==========================================================================
   1. 頂層舞台與大螢幕等比延伸 (RWD 關鍵)
   ========================================================================== */
.kv-section {
  width: 100%;
  background-color: #e3f2fd;
  overflow: hidden;
  margin-top: 68px;
}

.kv-stage {
  position: relative;
  width: 100%;
  /* 運用寬高比 (1400x630)，讓寬度超過 1400px 時自動等比拉高延伸 */
  aspect-ratio: 1400 / 630; 
  max-width: 100%; 
  margin: 0 auto;
  background: url('../images/bg-sky.webp') no-repeat center bottom;
  background-size: cover;
}

/* 處理固定式導覽列遮擋問題 */
.navbar-spacer {
  height: 50px; /* 電腦版 Navbar 高度 */
  width: 100%;
}

.kv-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================================
   2. 主標題文字圖片設定 (修改處 1：預設電腦版顯示、手機版隱藏)
   ========================================================================== */
.kv-logo img {
    height: auto;
    margin: 0 auto 12px;
    display: block;
    width: 100%;
}

.kv-title {
  width: 45%;
  max-width: 610px;
  height: auto;
  margin-bottom: 15px;
}

.kv-title .pc-title {
  display: block;
  width: 100%;
  height: auto;
}

.kv-title .m-title {
  display: none; /* 電腦版隱藏手機版標題 */
}

/* ==========================================================================
   3. 中間區排版 (修改處 2：調整為單張大圖置中)
   ========================================================================== */
.kv-middle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 35%;
  margin-bottom: 25px;
}

.asset-combined-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.kv-date {
  display: inline-block;
  font-size: 18px;
  color: #4a89b5;
  background: rgba(255, 255, 255, 0.6);
  padding: 4px 15px;
  border-radius: 20px;
}

/* ==========================================================================
   4. 裝飾物件定位 (使用 % 與 vw，隨大螢幕放大而等比位移)
   ========================================================================== */
.kv-asset {
  position: absolute;
  z-index: 2;
}
.asset-airplane {
    top: 13%;
    right: 19%;
    width: 8vw;
    max-width: 120px; 
}
.asset-seagull1 {
    top: 10%;
    left: 25%;
    width: 3vw;
    max-width: 60px;
}
.asset-seagull2 {
    top: 30%;
    left: 20%;
    width: 4.6vw;
    max-width: 60px;
}

/* ==========================================================================
   5. 活動框區塊 (精準定位在海面)
   ========================================================================== */
.kv-features {
  display: flex;
  gap: 20px;
  width: 90%;
  max-width: 600px;
  position: absolute;
  bottom: 6%; /* 使用百分比，確保大螢幕放大時它依然乖乖待在海面與沙灘交界 */
  left: 50%;
  transform: translateX(-50%);
}

.feature-box {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 10px 20px 15px;
  box-shadow: 0 8px 24px rgba(21, 55, 242, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.box-num {
    font-size: 18px;
    color: #f2584f;
    font-weight: bold;
    white-space: nowrap;
}
.box-num .num { 
    font-size: 34px;
    color: #f2584f;
    font-weight: bolder;
}
.box-text { font-size: 16px;
    color: #3d588a;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}
.break1{
    display: block;
}

/* ==========================================================================
   平板電腦版斷點樣式 (1024px 以下)
   ========================================================================== */
@media (max-width: 1024px) {
    .navbar-spacer{
      height: 35px;
    }
    .kv-logo img {
        width: 80%;
    }
    .kv-title {
        width: 40%;
    }
    .kv-middle-row {
        width: 32%; /* 平板微調置中圖比例 */
        margin-bottom: 25px;
    }
    .kv-date{
        font-size: 14px;
    }
    .kv-features {
        max-width: 90%; /* 讓底部的三個活動框在平板有更多伸展空間 */
        bottom: 9%;
    }
    .feature-box{
        gap: 10px;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        padding: 5px 10px 5px;
    }
    .box-text{
        font-size: 14px;
    }
    .box-num .num{
        font-size: 28px;
    }

}

/* ==========================================================================
   平板電腦版斷點樣式 (830px 以下)
   ========================================================================== */
@media (max-width: 830px) {
    .navbar-spacer{
        height: 30px;
    }
    .kv-logo img{
        width: 60%;
        margin: 0 auto;
    }
    .kv-title {
        margin: 15px 0 8px;
    }
    .kv-features{
        bottom: 6%;
    }
}

/* ==========================================================================
   智慧型手機版斷點樣式 (768px 以下)
   ========================================================================== */
@media (max-width: 768px) {
    .kv-section {
        margin-top: 62px; /* 配合手機版導覽列高度 */
    }
    .kv-stage {
        /* 解除電腦版的寬高比限制，改採用手機版直式底圖的比例 (430x720) */
        aspect-ratio: 430 / 720; 
        background: url('../images/bg-sky-m.webp') no-repeat center bottom; /* 替換成你的手機版底圖 */
        background-size: cover;
    }
    .navbar-spacer {
        height: 80px;
    }
    .kv-logo {
        width: 50%;
        max-width: 370px;
        margin-bottom: 0;
    }
    .kv-logo img {
        width: 100%;
        margin: 0 auto;
    }
    
    /* 修改處 1：手機版切換顯示手機專用標題圖片 */
    .kv-title {
        width: 65%;
        margin: 50px 0 40px;
    }
    .kv-title .pc-title {
        display: none;
    }
    .kv-title .m-title {
        display: block;
        width: 100%;
        height: auto;
    }

    /* 修改處 2：置中大圖手機版寬度調整 */
    .kv-middle-row {
        flex-direction: column;
        gap: 0;
        width: 75%; /* 調整手機版置中合併圖的滿版寬度 */
        padding: 0;
        margin-bottom: 60px;
    }

  .kv-date {
    font-size: 18px; /* 手機版字級縮小更精緻 */
    padding: 3px 12px;
  }

  /* 手機版天空物件位置微調 */
  .asset-airplane {
    top: 8%;
    right: 8%;
    width: 15vw; 
  }
  
  .asset-seagull1 {
    top: 5%;
    left: 8%;
    width: 7vw;
  }
  
  .asset-seagull2 {
    top: 14%;
    left: 5%;
    width: 8vw;
  }

    /* 三個活動框在手機版改為垂直排列，並靠下方海面定位 */
    .kv-features {
        flex-direction: column;
        gap: 8px;
        width: calc(100% - 140px); /* 左右預留各 20px 邊距 */
        bottom: 4%;
    }

    .feature-box {
        flex-direction: row; /* 手機版改為左邊數字、右邊文字的橫向排列，節省高度 */
        justify-content: flex-start;
        padding: 10px 40px;
        gap: 15px;
    }

    .box-num {
        width: 150px; /* 固定數字寬度，讓文字對齊線一致 */
        text-align: left;
        font-size: 20px;
    }
    
    .box-num .num {
        font-size: 38px;
    }

    .box-text {
        font-size: 25px;
        text-align: left; /* 橫向排版文字改靠左更好讀 */
    }
    .break1{
        display: none;
    }
}

/* ==========================================================================
   智慧型手機版斷點樣式 (550px 以下)
   ========================================================================== */
@media (max-width: 550px){
    .navbar-spacer {
        height: 40px;
    }
    .kv-title {
        width: 70%; /* 視需要再微調寬度 */
        margin: 35px 0 25px;
    }
    .kv-middle-row {
        width: 80%;
        margin-bottom: 25px;
    }
    .kv-features {
        gap: 8px;
        width: calc(100% - 40px);
        bottom: 3%;
    }
    .box-num {
        width: 105px; /* 固定數字寬度，讓文字對齊線一致 */
        text-align: left;
        font-size: 18px;
    }
    
    .box-num .num {
        font-size: 26px;
    }

    .box-text {
        font-size: 18px;
        text-align: left; 
    }
}

/* ==========================================================================
   智慧型手機版斷點樣式 (440px 以下)
   ========================================================================== */
@media (max-width: 440px){
    .asset-airplane {
        top: 28%;
        right: 6%;
    }
    .asset-seagull1 {
        top: 10%;
        left: 10%;
        width: 7vw;
    }
    .asset-seagull2 {
        top: 34%;
        left: 5%;
        width: 8vw;
    }
    .kv-logo {
        width: 58%;
    }
    .kv-title {
        width: 70%;
        margin: 25px 0 20px;
    }
    .kv-date {
        font-size: 15px;
    }
    .kv-features {
        gap: 10px;
        width: calc(100% - 80px);
        bottom: 3%;
    }
    .kv-middle-row {
        gap: 10px;
        width: 85%;
    }
    .feature-box {
        padding: 5px 25px;
        gap: 10px;
    }
    .box-num {
        width: 118px;
        font-size: 20px;
    }
    .box-num .num{
        font-size: 28px;
    }
    .box-text{
        font-size: 15px;
    }
    .break1{
        display: block;
    }
}


/* ==========================================================================
   全新增：夏日微動效 (純 CSS 實作，不影響現有排版)
   ========================================================================== */

/* --- 1. 定義動畫軌跡 (Keyframes) --- */

/* 飛機：緩慢在原地微幅滑行與漂浮 */
@keyframes airplaneFly {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-10px, -8px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* 海鷗1 & 海鷗2：輕微上下浮動，錯開時間差 */
@keyframes seagullFloat1 {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}
@keyframes seagullFloat2 {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* 活動框：網頁載入時由下往上淡入 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px); /* 保持原本置中的 translateX(-50%) */
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* --- 2. 將動畫套用到對應的物件上 --- */

/* 飛機套用常駐滑行，8秒一循環，無限重播 */
.asset-airplane {
  animation: airplaneFly 6s ease-in-out infinite;
}

/* 海鷗套用常駐浮動，分別給予 4秒 與 5秒，避開同步顯得死板 */
.asset-seagull1 {
  animation: seagullFloat1 3s ease-in-out infinite;
}
.asset-seagull2 {
  animation: seagullFloat2 4s ease-in-out infinite alternate;
}

/* 三個活動框總容器：網頁打開時優雅淡入登場 */
.kv-features {
  animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
  animation-delay: 0.5s; /* 稍微延遲 0.3 秒，等背景出來後再登場 */
}

/* 加碼：滑鼠滑過各個活動框時，框體微微上浮 */
.feature-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* cursor: pointer; */
}
.feature-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(21, 55, 242, 0.25);
  background: rgba(255, 255, 255, 1); /* 懸停時變不透明，視覺更扎實 */
}


/* ==========================================================================
   第二區 全域基礎與標頭設定
   ========================================================================== */
.events-section {
  width: 100%;
  /* 改用線性漸層，方向由上到下 */
  background: linear-gradient(to bottom, #ffddc7 0%, #fff0e6 100%); 
  padding: 90px 20px;
  box-sizing: border-box;
}

.events-header {
  text-align: center;
  margin-bottom: 40px;
}

/* 橘底小字小裝飾 */
.badge-accent {
  display: inline-flex;
  align-items: center;
  background-color: #f78a17;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 4px 16px;
  border-radius: 20px;
  margin-bottom: 12px;
  position: relative;
}

.deco-tree {
    position: absolute;
    top: -24px;
    right: -16px;
    width: 35px;
    height: auto;
}

/* 主標 */
.events-main-title {
  font-size: 36px;
  color: #2a63c7;
  font-weight: bold;
  margin: 0 0 12px 0;
}

/* 主標下方字 */
.events-sub-desc {
  font-size: 20px;
  color: #2F2F2F;
  font-weight: 500;
  margin: 0;
}

/* 區塊內通用的圖片標題排版 */
.block-title-img {
  text-align: center;
  margin-top: 80px;
}
.title-img-405 {
  width: 100%;
  max-width: 405px;
  height: auto;
}
.block-sub-text {
    text-align: center;
    color: #bf6200;
    font-size: 18px;
    font-weight: 500;
    margin: 2px 0 30px;
}

/* ==========================================================================
   【步驟 1, 2, 3 的三欄式卡片】
   ========================================================================== */
.steps-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.step-card {
  flex: 1;
  background: #ffffff;
  border-radius: 16px;
  padding: 25px 20px;
  box-shadow: 0 6px 18px rgba(42, 99, 199, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-badge {
  background-color: #2a63c7;
  color: #ffffff;
  font-size: 16px;
  padding: 4px 20px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.step-img-wrap {
  width: 235px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.step-img {
  max-width: 100%;
  height: auto;
}

/* 卡片小標 24px */
.step-card-title {
  font-size: 24px;
  color: #2a63c7;
  font-weight: bold;
  margin: 0 0 10px 0;
}

/* 卡片小字 18px */
.step-card-text {
  font-size: 18px;
  color: #2f2f2f;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   【三張優惠券】
   ========================================================================== */
.coupons-grid {
  display: flex;
  justify-content: center;
  gap: 25px;
  max-width: 1100px;
  margin: 30px auto 0;
}

.coupon-item {
  position: relative;
  flex: 1;
  max-width: 330px; /* 限制寬度防變形 */
}

.coupon-main-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右上角獨立分享按鈕 */
.btn-share {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

/* 立即領取按鈕 (170x40px) */
.btn-receive {
  position: absolute;
  bottom: 15px;
  left: 67%;
  transform: translateX(-50%);
  width: 170px;
  height: 40px;
  background-color: #00a19b;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 161, 155, 0.3);
  transition: background-color 0.2s, transform 0.2s;
}
.btn-receive:hover {
  opacity: 0.7;
}

/* ==========================================================================
   【百萬日圓大獎公告區】
   ========================================================================== */
.grand-prize-container {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.prize-ticket-wrap {
  width: 100%;
  max-width: 430px;
  margin: 0 auto 25px;
}
.prize-img {
  width: 100%;
  height: auto;
}

.prize-info-text {
  text-align: center;
  padding: 0 20px;
}
/* 18px 說明字 */
.info-highlight {
  font-size: 18px;
  color: #2F2F2F;
  font-weight: 500;
  margin: 6px 0;
}
/* 14px 說明字 */
.info-note {
  font-size: 14px;
  color: #2F2F2F;
  line-height: 1.6;
  margin: 15px 0 0 0;
}

/* ==========================================================================
   【適用商店走馬燈】使用現代純 CSS 無縫滾動，絕不使用 marquee 標籤
   ========================================================================== */
.stores-container {
  text-align: center;
  margin-top: 50px;
}

.store-badge-title {
  display: inline-block;
  background-color: #ffffff;
  color: #bf6200;
  font-size: 18px;
  font-weight: bold;
  padding: 6px 18px 8px;
  border: 2px solid #ffd426;
  border-radius: 50px;
  margin-bottom: 25px;
}

/* 跑馬燈外框遮罩 */
.marquee-wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  white-space: nowrap;
  position: relative;
  padding: 10px 0;
}

/* 漸層淡出遮罩，讓左右邊緣看起來是淡入淡出（極具質感） */
.marquee-wrapper::before,
.marquee-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  z-index: 2;
}

.marquee-wrapper::before { left: 0; background: linear-gradient(to right, #fff0e6, transparent); }
.marquee-wrapper::after { right: 0; background: linear-gradient(to left, #fff0e6, transparent); }

.mc2::before { left: 0; background: linear-gradient(to right, #ffe8d8, transparent); }
.mc2::after { right: 0; background: linear-gradient(to left, #ffe8d8, transparent); }



.marquee-content {
  display: flex;
  align-items: center;
  /* 關鍵修正：強制讓容器寬度精準等於內部所有字串加起來的總長度 */
  min-width: max-content; 
  /* 讓兩組字串的中間維持一樣的間距，不使用 space-around 分散 */
  justify-content: flex-start; 
  animation: marqueeLinear 40s linear infinite;
}

.marquee-content span {
  font-size: 22px;
  color: #007066;
  font-weight: 600;
  padding: 0 24px; 
}

@keyframes marqueeLinear {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

.store-footer-note {
  font-size: 14px;
  color: #2F2F2F;
  margin-top: 25px;
}

/* ==========================================================================
   RWD 各裝置斷點調適樣式
   ========================================================================== */

/* 平板斷點（調整成兩欄或縮小比例） */
@media (max-width: 1024px) {
  .events-main-title { font-size: 32px; }
  .steps-container, .coupons-grid { width: 100%; gap: 15px; }
}

@media (max-width: 820px){
    .step-img-wrap {
        width: 200px;
    }
    .step-card-text {
        font-size: 15px;
    }
    .step-card-title{
        font-size: 22px;
    }
    .btn-receive{
        width: 130px;
        height: 34px;
        bottom: 9px;
    }
    .title-img-405{
        max-width: 350px;
    }
    .prize-ticket-wrap {
        max-width: 360px;
    }
}

/* 手機版斷點（768px 以下）：100% 符合你的置中垂直往下排列要求 */
@media (max-width: 768px) {
  .events-section { padding: 70px 15px; }
  .events-main-title { font-size: 28px; }
  .events-sub-desc { font-size: 18px; }
  
  /* 三欄式卡片轉為單欄垂直置中 */
  .steps-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .step-card {
    width: 100%;
    max-width: 340px; /* 保持精緻直式卡片寬度 */
  }

  /* 優惠券轉為單欄垂直置中 */
  .coupons-grid {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .coupon-item {
    width: 100%;
    max-width: 330px;
  }

  /* 百萬大獎字級下修 */
  .info-highlight { font-size: 18px; }
  .info-note { font-size: 14px; }
  
  /* 跑馬燈寬度調適 */
  .marquee-wrapper { max-width: 100%; }
  .store-footer-note { font-size: 14px; }
}

@media (max-width: 440px){
    .step-card{
        width: 80%;
    }
    .step-img-wrap {
        width: 235px;
    }
    .btn-receive{
        width: 170px;
        height: 40px;
        bottom: 15px;
    }
    .store-badge-title{
        margin-bottom: 15px;
    }
    .prize-ticket-wrap {
        max-width: 300px;
    }
    .marquee-content span {
        font-size: 18px;
        padding: 0 14px;
    }
    .store-footer-note{
        margin-top: 15px;
    }

}


/* ==========================================================================
   第二區 全新增活潑微動效 (純 CSS，不影響 RWD 結構)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 定義動畫軌跡 (Keyframes)
   -------------------------------------------------------------------------- */

@keyframes treeSway {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

@keyframes btnPulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); box-shadow: 0 6px 16px rgba(0, 161, 155, 0.5); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes ticketFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}



/* --------------------------------------------------------------------------
   2. 將動畫套用到第二區物件
   -------------------------------------------------------------------------- */

/* 1. 椰子樹搖曳效果 */
.deco-tree {
  /* 設定旋轉支點在椰子樹的右下角（樹根位置），搖起來才自然 */
  transform-origin: right bottom; 
  animation: treeSway 3.5s ease-in-out infinite;
}

/* 2. 立即領取按鈕呼吸效果 */
.btn-receive {
  /* 將原本在 hover 寫的 transition 改為常駐動畫，3秒循環一次 */
  animation: btnPulse 3s ease-in-out infinite;
}
/* 當滑鼠真的滑過去時，加速回饋感，並停止呼吸動畫 */
.btn-receive:hover {
  animation: none;
  box-shadow: 0 8px 20px rgba(0, 161, 155, 0.6);
}

/* 3. 日圓現金券漂浮效果 */
.prize-ticket-wrap, .float{
  animation: ticketFloat 5s ease-in-out infinite;
  transition: transform 0.3s ease;
}





/* ==========================================================================
   第三區 全域基礎與標頭設定
   ========================================================================== */
.promo-section {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 90px 20px; /* 留出空間給上下圓弧 */
  background-color: #ffffff;
  
  /* 關鍵技術：使用純 CSS 繪製 1px 藍色格子線條（間距 30px） */
  background-image: 
    linear-gradient(to right, #e3f1ff 1px, transparent 1px),
    linear-gradient(to bottom, #e3f1ff 1px, transparent 1px);
  background-size: 22px 22px;
  
  /* 圓弧修飾：讓上下兩端呈現柔和的內凹/外凹圓弧效果 */
  border-radius: 60px 60px 0 0; /* 如果上個區塊要接這塊，用 border-radius 就能做出漂亮的圓弧交界 */
  margin-top: -40px; /* 與上一區稍微重疊，讓圓弧交接處更自然 */
  z-index: 1;
}

.promo-header {
  text-align: center;
  margin-bottom: 35px;
}

/* 延用與第二區相同的大標、小標級距設定 */
.promo-main-title {
    font-size: 36px;
    color: #2a63c7;
    font-weight: bold;
    margin: 0 0 12px 0;
}

.promo-sub-desc {
    font-size: 20px;
    color: #2F2F2F;
    font-weight: 500;
    margin: 0;
}

/* ==========================================================================
   活動內文、算式圖排版
   ========================================================================== */
.promo-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}

/* 活動內文 24px */
.promo-intro-text {
  font-size: 24px;
  color: #2F2F2F;
  line-height: 1.6;
  margin: 0 0 40px 0;
}

/* 重點標色 #f8524c */
.highlight-point {
  color: #f8524c;
  font-weight: bold;
}
.span-small{
  font-size: 15px;
  display: block;
}

/* 算式圖容器（寬度可依據實際切圖寬度調整，此處設最大 600px） */
.formula-img-wrap {
  width: 100%;
  max-width: 600px; 
  margin-bottom: 45px;
}

.formula-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   按鈕群組排版（串接貴司規範）
   ========================================================================== */
.promo-btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* 按鈕之間的間距 */
  width: 100%;
}

/* 移除 <a> 標籤預設底線 */
.promo-btn-group .btn,
.promo-btn-group .btnLine {
  text-decoration: none;
}

/* ---- 貴司規範：綠底白字 ---- */
.btn {
  width: 100%;
  max-width: 12.5rem;
  height: 4.0625rem;
  border-radius: 4px;
  background: #00a19b;
  color: #ffffff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
}
.btn:hover {
  opacity: 0.7;
}
.btn:disabled {
  background: #acacac;
  color: #ffffff;
  cursor: not-allowed;
}

/* ---- 貴司規範：白底綠字 ---- */
.btnLine {
  width: 100%;
  max-width: 12.5rem;
  height: 4.0625rem;
  border-radius: 4px;
  text-align: center;
  border: solid 1px #00a19b;
  background: #ffffff;
  color: #00a19b;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
}
.btnLine:hover {
  opacity: 0.7;
}
.btnLine:disabled {
  background: #acacac;
  color: #ffffff;
  border: none;
  cursor: not-allowed;
}

.pc-only { display: block; }

/* ==========================================================================
   RWD 斷點調適樣式
   ========================================================================== */

/* 平板斷點調整 */
@media (max-width: 1024px) {
  .promo-main-title { font-size: 38px; }
  .promo-sub-desc { font-size: 22px; }
  .promo-intro-text { font-size: 20px; }
}

@media (max-width: 1024px) {
  .formula-img-wrap {
      width: 66%;
      max-width: 600px;
      margin-bottom: 45px;
  }
}

/* 手機版斷點（768px 以下）*/
@media (max-width: 768px) {
  .promo-section {
    padding: 70px 15px;
    border-radius: 40px 40px 0 0; /* 手機版圓弧角度略為修小更精緻 */
    margin-top: -30px;
  }
  
  .promo-main-title { font-size: 28px; }
  .promo-sub-desc { font-size: 18px; }
  
  .promo-intro-text { 
    font-size: 18px; 
    margin-bottom: 25px;
    max-width: 480px;
  }
  
  .pc-only { display: none; } /* 手機版取消內文強制斷行，讓文字自然流動 */
  
  .formula-img-wrap {
    width: 85%;
    margin-bottom: 35px;
  }

  /* 串接貴司按鈕 RWD 規範 */
  .btn {
    max-width: 8.75rem;
  }
  .btnLine {
    max-width: 8.75rem;
  }
}

/* 小型手機斷點微調 */
@media (max-width: 440px) {
  .promo-main-title { font-size: 24px; }
  .promo-btn-group {
    gap: 12px; /* 窄螢幕時按鈕靠攏一點避免爆版 */
  }
  .formula-img-wrap {
    width: 100%;
    margin-bottom: 35px;
  }
  .span-small{
  font-size: 14px;
  display: inline;
}
}






/* ==========================================================================
   第四區 全域基礎與標頭設定
   ========================================================================== */
.rules-section {
  width: 100%;
  background-color: #e7f5f4;
  padding: 90px 20px 60px;
  box-sizing: border-box;
}

.rules-header {
  text-align: center;
  margin-bottom: 35px;
}

/* 活動辦法主標題 延續前幾區大小 */
.rules-main-title {
  font-size: 48px;
  color: #2a63c7;
  font-weight: 900;
  margin: 0;
}

.rules-body {
  width: 100%;
  max-width: 1005px;
  margin: 0 auto;
}

.rules-block {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 30px 40px;
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(0, 112, 102, 0.04);
}

/* 第二區小標題 */
.rules-sub-title {
  font-size: 20px;
  color: #007066;
  font-weight: bold;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #ffd426; /* 黃色裝飾下襯線 */
  display: inline-block;
}

/* ==========================================================================
   清單結構與縮排（核心排版）
   ========================================================================== */
.rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rules-list > li {
  display: flex;
  align-items: flex-start;
  padding: 18px 0;
  /* 每一點事項之間的淡虛線區隔 */
  border-bottom: 1px dashed #d1e6e4; 
}

/* 移除最後一項的虛線 */
.rules-list > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.rules-list > li:first-child {
  padding-top: 0;
}

/* 左側項目名稱 */
.rule-label {
  flex: 0 0 160px; /* 固定左側標籤寬度 160px，確保後方文字整齊對齊 */
  font-size: 14px;
  font-weight: 500;
  color: #2a63c7;
  line-height: 1.6;
}

.rule-label .label-sub {
  font-size: 12px;
  color: #5f6368;
  font-weight: normal;
}

/* 右側說明文字說明（全面強制 14px） */
.rule-text {
  flex: 1;
  font-size: 14px;
  color: #2F2F2F;
  line-height: 1.6;
  text-align: justify; /* 讓文字左右對齊 */
}

/* 內層補充說明文字與步驟排版 */
.text-note {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: #5f6368;
  background-color: #f7fbfb;
  padding: 10px 15px;
  border-radius: 6px;
  border-left: 3px solid #ffd426;
}

.sub-step {
  display: flex;
  align-items: flex-start;
  margin-top: 8px;
  width: 100%;
}
.sub-step:first-child {
  margin-top: 0;
}
.sub-step .dot {
  flex: 0 0 15px; /* 固定的句點寬度 */
  color: #007066;
  line-height: 1.6;
}
.sub-step > span:not(.dot) {
  flex: 1; /* 讓整行文字（包含小標+內文）共同使用剩下的所有空間，自然折行 */
  line-height: 1.6;
}
.legal-note {
  display: block;
  font-size: 12px;           /* 縮小字級 */
  color: #7f8c8d;           /* 使用溫和不搶眼的灰色 */
  line-height: 1.5;
  margin-top: 10px;         /* 與上方的掃碼付留出微小間距 */
  text-align: justify;      /* 讓長段落文字左右對齊 */
  font-weight: normal;      /* 回歸正常字體粗細 */
}

/* ==========================================================================
   預留的重點字樣式（可隨意組合在 HTML 中）
   ========================================================================== */
.text-bold { font-weight: 600; }
.text-red { color: #f8524c; }
.text-orange { color: #f78a17; }
.text-green { color: #00a19b; }

.pc-only { display: block; }

/* ==========================================================================
   RWD 各裝置斷點調適樣式
   ========================================================================== */
@media (max-width: 1024px) {
  .rules-main-title { font-size: 38px; }
  .rules-body {
    max-width: 670px;
  }
}

/* 手機版斷點（768px 以下）：橫向空間不足，將左右排列改為上下堆疊 */
@media (max-width: 768px) {
  .rules-section { padding: 70px 15px 40px; }
  .rules-main-title { font-size: 28px; }
  
  .rules-block {
    padding: 20px 20px;
  }
  
  .rules-list > li {
    flex-direction: column; /* 轉為上下排列 */
    gap: 6px;
    padding: 15px 0;
  }
  
  .rule-label {
    flex: none;
    width: 100%;
    border-left: 3px solid #2a63c7; /* 手機版小標前方加一條小藍線引導視覺 */
    padding-left: 8px;
    margin-bottom: 2px;
  }
  
  .pc-only { display: none; }
}

@media (max-width: 440px) {
  .rules-main-title { font-size: 24px; }
  .rules-sub-title{
    font-size: 18px;
  }
}




/* ==========================================================================
   第五區 全域基礎與標頭設定
   ========================================================================== */
.faq-section {
  width: 100%;
  background-color: #e7f5f4; /* 延續活動辦法的粉綠色背景 */
  padding: 0 20px 80px 20px; /* 上方設 0，依靠區塊間距自然銜接 */
  box-sizing: border-box;
}

.faq-header {
  text-align: center;
  margin-bottom: 35px;
}

.faq-main-title {
  font-size: 48px;
  color: #2a63c7;
  font-weight: 900;
  margin: 0;
}

/* 寬度與第四區活動辦法對齊（max-width: 900px） */
.faq-body {
  width: 100%;
  max-width: 1005px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px; /* 題目之間的間距 */
}

/* ==========================================================================
   常見問題手風琴結構面板
   ========================================================================== */
.faq-item {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 112, 102, 0.03);
  transition: box-shadow 0.3s ease;
}

/* 題目按鈕外觀 (18px, #00a19b) */
.faq-question {
  width: 100%;
  background: #ffffff;
  border: none;
  padding: 20px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  outline: none;
}

.q-text {
  font-size: 18px;
  color: #00a19b;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1px;
  padding-right: 15px;
}

/* 右側控制開闔的「＋」符號（純 CSS 繪製，免切圖） */
.faq-icon {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}
/* 繪製加號的橫線與直線 */
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background-color: #fda421;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-icon::before { width: 14px; height: 2px; } /* 橫線 */
.faq-icon::after  { width: 2px; height: 14px; } /* 直線 */

/* 當 FAQ 項目被點開時（具有 .active 類別）：加號轉動變成「減號」 */
.faq-item.active {
  box-shadow: 0 6px 20px rgba(42, 99, 199, 0.08);
}
.faq-item.active .faq-icon {
  transform: rotate(180deg);
}
.faq-item.active .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0; /* 讓直線旋轉並消失，只留下橫線，即變成減號 */
}

/* --------------------------------------------------------------------------
   答案容器開闔動態核心 (14px, #2F2F2F)
   -------------------------------------------------------------------------- */
.faq-answer {
  max-height: 0; /* 預設關閉：高度為 0 */
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* 絲滑展開動畫 */
}

/* 當激活時，透過 JS 動態精準計算並賦予高度，此處先給予預設安全最大值供無 JS 備援 */
.faq-item.active .faq-answer {
  max-height: 1000px; 
}

/* 答案的內襯間距，防動畫抖動 */
.answer-inner {
  padding: 0 25px 22px 25px;
  font-size: 14px;
  color: #2F2F2F;
  line-height: 1.6;
  text-align: justify;
}
.answer-inner p {
  margin: 0;
}

/* 第 3 題、第 5 題內部的細緻排版加強 */
.faq-sub-block {
  margin-bottom: 12px;
}
.faq-sub-block:last-child {
  margin-bottom: 0;
}
.faq-sub-title {
  font-size: 14px;
  color: #2a63c7;
  font-weight: bold;
  margin: 0 0 2px 0;
}

.faq-step-line p {
  margin-bottom: 6px;
}
.faq-step-line p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   RWD 斷點調適樣式
   ========================================================================== */
@media (max-width: 1024px) {
  .faq-main-title { font-size: 38px; }
  .faq-body{
    max-width: 670px;
  }
}

@media (max-width: 768px) {
  .faq-section { padding-bottom: 60px; }
  .faq-main-title { font-size: 28px; }
  .faq-question { padding: 16px 18px; }
  .answer-inner { padding: 0 18px 18px 18px; }
  .q-text { font-size: 16px; } /* 手機版題目字級微調防擠壓 */
}

@media (max-width: 440px) {
  .faq-main-title { font-size: 24px; }
}







/* ==========================================================================
   錨點跳轉優化設定
   ========================================================================== */

/* 1. 全域平滑捲動（點擊選單時，網頁會用滑動的方式移過去，非常高級） */
html {
  scroll-behavior: smooth;
}

/* 2. 為所有錨點區塊設定上方捲動留白 */
#draw-grand,
#new-friend {
  /* 關鍵技術：預留空間給導覽列。數值建議是導覽列高度再加 15~20px 的安全距離 */
  scroll-margin-top: 88px; 
}

#event-rules {
  scroll-margin-top: 60px; 
}
#event-faq {
  scroll-margin-top: 140px; 
}

/* 3. 針對手機版 RWD 微調 */
@media (max-width: 768px) {
  #draw-grand,
  #new-friend{
    /* 手機版導覽列較矮，稍微縮小留白距離 */
    scroll-margin-top: 78px; 
  }
  #event-rules {
    scroll-margin-top: 50px; 
  }
  #event-faq {
    scroll-margin-top: 130px; 
  }
}





/* ==========================================================================
   分享彈出視窗樣式
   ========================================================================== */
/* 全局遮罩外框 */
.share-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999; /* 確保疊在網頁最上層，包括導覽列 */
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 手機版預設靠底 */
  visibility: hidden; /* 預設完全隱藏（不影響點擊） */
  transition: visibility 0.3s ease;
}

/* 黑色半透明背景襯底 */
.share-sheet-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* 預設透明 */
  transition: background-color 0.3s ease;
}

/* 彈出面板本體 (電腦版預設樣式：優雅的置中彈窗) */
.share-sheet-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  background-color: #ffffff;
  border-radius: 16px 16px 16px 16px;
  padding: 30px;
  box-sizing: border-box;
  margin-bottom: auto; /* 電報版垂直置中 */
  margin-top: auto;   /* 電報版垂直置中 */
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  
  /* 動態核心：電腦版預設用「縮放與淡入」登場 */
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

/* 當激活狀態時 (.active) 的轉場效果 */
.share-sheet-overlay.active {
  visibility: visible;
}
.share-sheet-overlay.active .share-sheet-bg {
  background-color: rgba(0, 0, 0, 0.5); /* 背景變半透明黑 */
}
.share-sheet-overlay.active .share-sheet-content {
  transform: scale(1);
  opacity: 1;
}

/* 裝飾線條與標題 */
.share-sheet-drag-handle {
  display: none; /* 電腦版不顯示 */
}

.share-sheet-title {
  font-size: 20px;
  color: #2F2F2F;
  font-weight: 500;
  text-align: center;
  margin: 0 0 25px 0;
}

/* 四個選項的 Grid 網格排版 */
.share-options-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.share-option-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex: 1;
  outline: none;
}

/* 圖示外圈圓圈 */
.share-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  transition: transform 0.2s ease;
}
.share-option-item:hover .share-icon-wrap {
  transform: scale(1.08); /* 滑鼠懸庭微微放大 */
}

.share-icon-wrap img {
  width: 100%;
  height: auto;
}

.share-text {
  font-size: 14px;
  color: #5f6368;
  font-weight: 500;
}

/* 取消按鈕 */
.share-sheet-close {
  width: 100%;
  padding: 12px 0;
  background-color: #f1f3f4;
  color: #5f6368;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.share-sheet-close:hover {
  background-color: #e8eaed;
}

/* ==========================================================================
   RWD 手機版斷點變形 (768px 以下)：100% 轉為從頁面底部滑出的面板
   ========================================================================== */
@media (max-width: 768px) {
  .share-sheet-overlay {
    align-items: flex-end; /* 強制靠螢幕最底端 */
  }
  
  .share-sheet-content {
    max-width: 100%;
    border-radius: 20px 20px 0 0; /* 只留上方圓角 */
    padding: 20px 20px 30px 20px;
    margin-bottom: 0; /* 緊貼底部 */
    margin-top: 0;
    
    /* 核心變形：手機版改為從螢幕下方 100% 的位置往上滑入 */
    transform: translateY(100%);
    opacity: 1; /* 手機版不需要淡入，靠滑動即可 */
    transition: transform 0.35s cubic-bezier(0.15, 1, 0.3, 1);
  }
  
  /* 激活狀態覆寫 */
  .share-sheet-overlay.active .share-sheet-content {
    transform: translateY(0); /* 回歸原位，即滑出畫面 */
  }
  
  /* 手機版上方的拉條裝飾 */
  .share-sheet-drag-handle {
    display: block;
    width: 40px;
    height: 4px;
    background-color: #e8eaed;
    border-radius: 2px;
    margin: 0 auto 15px auto;
  }
  
  .share-sheet-title {
    font-size: 18px;
    margin-bottom: 20px;
  }
  
  .share-icon-wrap {
    width: 54px;
    height: 54px;
  }
}




/* ==========================================================================
   分享按鈕特效
   ========================================================================== */
@keyframes sharePulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  }
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 6px 12px rgba(99, 99, 99, 0.4));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  }
}

/* 套用到優惠券上的分享按鈕 */
.btn-share {
  /* 2.5秒一循環，無限重複，緩入緩出 */
  animation: sharePulse 2.5s ease-in-out infinite; 
  transition: transform 0.2s ease; /* 為滑鼠懸停留伏筆 */
}

/* 當滑鼠真的滑過去時，給予更強烈的轉動回饋 */
.btn-share:hover {
  animation: none; /* 暫停呼吸動畫 */
  transform: scale(1.2) rotate(15deg); /* 放大 1.2 倍並微微右旋轉 15 度，動感十足 */
}


/* ==========================================================================
   全新增：活動方塊錨點超連結優化 (不破壞原有排版)
   ========================================================================== */
.feature-box-link {
  flex: 1; /* 讓超連結容器跟原本的方塊一樣平分寬度 */
  text-decoration: none; /* 強制拿掉超連結底線 */
  display: block;
  outline: none;
}

/* 額外加碼：當滑鼠移到白色方塊上時，讓游標變成小手，並讓方塊微微浮起，暗示可以點擊 */
.feature-box {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-box-link:hover .feature-box {
  transform: translateY(-4px); /* 微微往上浮動 4px */
  box-shadow: 0 12px 28px rgba(21, 55, 242, 0.2); /* 讓陰影變深，看起來更有立體感 */
}