@charset "utf-8";

:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-primary-dark: #2d2d6c;
  --color-primary: #5a5aca;
  --color-primary-light: #a5a5ff;
  --color-primary-soft: #babaff;
  --color-section-bg: #d9d9ff;
  --color-yellow: #ffe00f;
  --color-yellow-light: #ffeb6a;
  --color-gold-light: #fcd468;
  --color-button: #ffcc00;
  --color-button-alt: #ffd100;
  --color-button-hover: #ffaa00;
  --color-orange: #ff6700;
  --color-orange-dark: #ed4300;
  --color-coral: #fa9777;
  --color-danger: #c9191d;

  /*位移*/
  --nav-sticky-top: 40px;
  --anchor-offset: 120px;
}

/************************************************************************************
目錄 Table of Contents
1. RESET            重置瀏覽器預設樣式
2. STRUCTURE         版面主要外框
3. HEADER            頁首（主視覺／日期／優惠標籤）
4. NAV               導覽選單
5. HERO / ORDER FLOW 標題與訂購流程標籤
6. COUPON            優惠券區塊
7. COUPON INFO       領取步驟說明區塊
8. PROCESS / STEP    活動流程步驟卡片
9. SLIDER            輪播與商品區
10. NOTICE           注意事項
11. MEDIA QUERIES    響應式設計（依螢幕寬度由大到小排列）
*************************************************************************************/

/************************************************************************************
1. RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, figure, article, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, header {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
  -webkit-text-size-adjust: none; /*防止allpe的safari瀏覽器字體變大*/
}
ol, ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  /* border-collapse: collapse;*/
  border-spacing: 0;
}

a img {
  border: none;
}

img {
  max-width: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/************************************************************************************
2. STRUCTURE 主要外框
*************************************************************************************/

html {
  scroll-behavior: smooth;
}

/*滑動留個高度*/
html {
  scroll-padding-top: var(--anchor-offset);
}

#coupon,
#process,
#recommend,
#notice {
  scroll-margin-top: var(--anchor-offset);
}

#web-outer {
  font-family: "Noto Sans TC", verdana;
  max-width: 1920px;
  background: var(--color-primary-light);
  margin: 0 auto;
}
/************************************************************************************
3. HEADER 頁首（主視覺／日期／優惠標籤）
*************************************************************************************/

.mainpic {
  margin: 0 auto;
  background: url("../images/bg-header.webp") top center no-repeat;
  padding: 90px 0;
  position: relative;
}

.main-people1 {
  position: absolute;
  left: 0px;
  bottom: 38px;
}

.main-people2 {
  position: absolute;
  left: 235px;
  bottom: 13px;
}

.main-people3 {
  position: absolute;
  right: 320px;
  bottom: 18px;
}

.main-people4 {
  position: absolute;
  right: 76px;
  bottom: 18px;
}

.mainpic-in {
  margin: 0 auto;
  padding: 0px 60px;
  display: flex;
  max-width: 1560px;
  /* background: url("../images/bg-circle.webp") bottom center no-repeat;*/
}

.content {
  width: 62%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

header h1 {
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  width: 100%;
}
.main-title {
  text-align: center;
}
.logo figure {
  margin: 0 auto;
}

.date {
  margin: 20px 0;
  text-align: center;
}
.date span {
  background: var(--color-primary-dark);
  font-size: 30px;
  border-radius: 35px;
  padding: 6px 26px 10px 26px;
  font-weight: 600;
  line-height: 1.2em;
  color: var(--color-yellow);
  text-align: center;
  letter-spacing: 1px;
  display: inline-block;
}

.main-sale {
  width: 100%;
  text-align: center;
  color: var(--color-primary-dark);
  font-size: 45px;
  font-weight: 800;
  margin: 20px 0 0 0;
}

.main-sale strong {
  display: inline-block;
  margin: 0 3px;
  font-size: 65px;
  color: var(--color-orange);
}

.main-sale strong i {
  font-size: 20px;
}

/************************************************************************************
4. NAV 導覽選單
*************************************************************************************/

#mainNav {
  text-align: center;
  font-weight: 600;
  width: 100%;
  z-index: 990;
  background: var(--color-primary-dark);
  margin: 0 auto;
  top: 40px;
  position: sticky;
}

.nav {
  margin: 0 auto;
  text-align: center;
}
.nav li {
  display: inline-block;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--color-white);
  margin: 10px 4px;
}
.nav li a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--color-white);
}
.nav li a:hover,
.nav li a.active {
  color: var(--color-primary-dark);
  background: var(--color-yellow);
  border-radius: 20px;
}

/************************************************************************************
5. HERO / ORDER FLOW 標題與訂購流程標籤
*************************************************************************************/


.subtitle {
  text-align: center;
  width: 100%;
}

.order-flow-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 50px 18px;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 0 0 70px 70px;
  flex-wrap: wrap;
  gap: 10px;
}

.order-flow-tag span {
  display: inline-block;
}

/************************************************************************************
6. COUPON 優惠券區塊
*************************************************************************************/

.coupon-outer {
  margin: 0 auto;
  text-align: center;
  padding: 0 15px;
}
.coupon-in {
  margin: 0 auto;
  margin-top: 90px;
  padding: 0px 20px 20px 20px;
  border: 6px solid var(--color-white);
  border-radius: 50px;
  background: var(--color-primary-soft);
  max-width: 1260px;
  overflow: hidden;
}

.coupon-list {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px 0;
}

.coupon {
  background: url("../images/bg-coupon.webp") center center no-repeat;
  background-size: contain;
  min-width: 288px;
  height: 168px;
  /* --- 新增以下程式碼，讓卡片內部的文字/內容置中 --- */
  display: flex; /* 讓卡片也變成 flex 容器 */
  flex-direction: column; /* 如果內容有兩行，改為垂直排列 */
  justify-content: center; /* 內容垂直置中 */
  align-items: center; /* 內容水平置中 */
}

.coupon h3 {
  font-size: 42px;
  font-weight: 600;
  color: var(--color-white);
  padding-top: 5px;
  padding-bottom: 12px;
}

.coupon p {
  font-size: 34px;
  font-weight: 600;
  color: var(--color-white);
}

.coupon p span {
  font-size: 58px;
  font-weight: 800;
  color: var(--color-yellow);
}

.button-container {
  display: inline-flex;
  align-items: center;
  padding: 20px 50px; /* 右側留點空間給手指進場 */
  background-color: var(--color-button);
  border-radius: 50px;
  font-weight: bold;
  font-size: 32px;
  cursor: pointer;
  position: relative; /* 必備：作為手指位移的基準 */
  transition: background-color 0.3s ease;
  margin: 0 auto;
  margin-top: -220px;
  text-decoration: none;
  color: var(--color-black);
}

.hand-icon {
  width: 63px;
  position: absolute; /* 絕對定位 */

  /* --- 初始位置：設定在按鈕右下外圍 --- */
  right: -36px; /* 往右出界 */
  bottom: -26px; /* 往下出界 */

  /* 回彈過渡效果 */
  transition:
  transform 0.4s cubic-bezier(0.25, 1.1, 0.5, 1.15),
  opacity 0.3s;
}

/* --- Hover 效果：手指往左上方滑入 --- */

.button-container:hover {
  background-color: var(--color-button-hover);
}

.button-container:hover .hand-icon {
  /*
  往左上滑動的距離：
  負值越大，滑入按鈕內部的距離就越深
  */
  transform: translate(-12px, -8px);
  opacity: 1;
}

/************************************************************************************
7. COUPON INFO 領取步驟說明區塊
*************************************************************************************/

.coupon-info-outer {
  background: var(--color-primary);
  padding: 25px 20px;
  max-width: 1260px;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 100px;
  border-radius: 50px;
}

.coupon-info {
  font-weight: 500;
  font-size: 20px;
  color: var(--color-white);
  margin: 0 auto;
  line-height: 2em;
  padding-top: 10px;
}

.coupon-info span {
  color: var(--color-orange-dark);
  font-weight: 600;
}
.coupon-info em {
  color: var(--color-primary-dark);
  border-radius: 8px;
  background: var(--color-white);
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  padding: 4px 8px;
  margin-right: 10px;
}
.coupon-info-step a {
  color: var(--color-yellow);
  padding: 0 3px 2px 3px;
}
.coupon-info-step a:hover {
  color: var(--color-yellow-light);
}

.coupon-info-step {
  padding: 15px;
}
.coupon-info-step h5 {
  font-weight: 600;
  font-size: 22px;
  color: var(--color-white);
  margin: 0 auto;
  line-height: 2em;
  border-bottom: 3px solid var(--color-white);
  margin-bottom: 10px;
  /* 關鍵修正：確保內部的三角形與文字垂直置中 */
  display: inline-flex;
  align-items: center; /* 讓內容在垂直方向居中 */
}

.coupon-info-step h5::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid var(--color-white);

  margin-right: 12px; /* 增加一點點間距感 */
  /* 這裡不再需要 vertical-align，因為父層的 flex 會接管對齊 */
}

.coupon-info-step p {
  font-weight: 500;
  font-size: 20px;
  color: var(--color-white);
  line-height: 1.8em;
}
.coupon-info-step span {
  color: var(--color-gold-light);
  font-weight: 600;
  display: inline-block;
  margin: 0 2px;
}
.coupon-info-step h6 {
  font-weight: 500;
  font-size: 20px;
  padding: 4px 8px;
  margin-right: 10px;
  line-height: 2em;
  color: var(--color-white);
}
.coupon-info-step h6 em {
  color: var(--color-white);
  border-radius: 10px;
  border: 1px solid var(--color-white);
  padding: 2px 8px;
  margin-right: 10px;
  font-style: normal;
  font-weight: 600;
}

.coupon-info-step li {
  font-weight: 500;
  font-size: 20px;
  color: var(--color-white);
  line-height: 1.8em;
  list-style-type: disc;
  margin: 0 0 5px 20px;
}

.coupon-info-outer a.bookmark {
  color: var(--color-white);
  background: var(--color-primary-dark);
  border-radius: 25px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 12px 18px;
  display: inline-block;
  line-height: 1.2em;
}
.coupon-info-outer a.bookmark:hover {
  background: var(--color-yellow);
  color: var(--color-primary-dark);
}

/************************************************************************************
8. PROCESS / STEP 活動流程步驟卡片
*************************************************************************************/

.process-outer {
  background: var(--color-section-bg);
  padding-bottom: 100px;
}

.subtitle02 {
  background: url("../images/bg-subtitle02.webp") center center no-repeat;
  height: 54px;
  font-size: 32px;
  font-weight: 600;
  color: var(--color-white);
  text-align: center;
  line-height: 54px;
  margin-top: 15px;
  margin-bottom: 40px;
}

.step-outer {
  margin: 0 auto;
  max-width: 1500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 40px;
  gap: 80px 20px;
}

.step2 {
  align-items: stretch;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  border-radius: 20px;
}

.number {
  margin: 0 auto;
  background: var(--color-black);
  text-align: center;
  width: 80px;
  height: 40px;
  border-radius: 80px 80px 0 0;
  margin-top: -40px;
}

.number p {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 40px;
}

.flex-pic {
  padding: 20px;
  flex: 1;
  margin: 0 auto;
  overflow: hidden;
}

.step2 h4 {
  margin: 0 8px;
  padding: 16px 0;
  color: var(--color-black);
  font-size: 24px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-black);
  text-align: center;
}

.step2 h5 {
  background: var(--color-button-alt);
  padding: 8px 8px;
  color: var(--color-black);
  font-size: 18px;
  font-weight: 600;
  border-radius: 0 0 18px 18px;
  line-height: 1.6em;
  text-align: center;
}

.step2 h5 span {
  display: block;
  text-align: left;
  padding-left: 16px;
  text-indent: -8px;
}

.step2 h5 em {
  color: var(--color-danger);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6em;
  font-style: normal;
  display: block;
}

/************************************************************************************
9. SLIDER 輪播與商品區
*************************************************************************************/
.recommend-outer {
  background: var(--color-primary-light);
}

/*輪播區塊*/
.block-center {
  width: 100%;
  max-width: 1300px;
  margin: auto;
  clear: both;
  position: relative;
  padding: 0 15px;
}

.slick-dots {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 100%;
}

.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.slick-dots .slick-active button {
  background: var(--color-primary);
}

.slick-dots button {
  background: var(--color-white);
  border: none;
  border-radius: 50px;
  display: inline-block;
  text-indent: -9999px;
  line-height: 0px;
  height: 10px;
  width: 10px;
}

.slick-dots button:hover {
  cursor: pointer;
  background: var(--color-coral);
}

ul.slick-dots {
  text-align: center;
  margin-top: 0.5rem;
}

/*商品區*/

.pic-slide {
  padding: 1rem 0 5rem;
}
a.product {
  margin: 0.5rem;
  transition: all 0.3s ease-in;
}
a.product:hover {
  transform: translateY(4px);
}
.product_pic {
  text-align: center;
  overflow: hidden;
}
a.product:hover .product_pic > img {
  opacity: 0.9;
}

.ad {
  width: 100%;
  margin: 1rem auto;
  position: relative;
  overflow: hidden;
}

/************************************************************************************
10. NOTICE 注意事項
*************************************************************************************/

.notice-outer {
  margin: 0 auto;
  padding: 0px 10px 100px 10px;
  background: var(--color-section-bg);
}
.notice-outer-in {
  max-width: 1300px;
  margin: 40px auto 0 auto;
}

h3.notice-title {
  font-size: 19px;
  font-weight: 600;
}
.notice-in {
  padding: 10px 0 30px 0;
}

.notice-in li::before {
  content: "．";
  margin-right: 4px;
  font-size: 16px;
  display: inline-block;
}
.notice-in li {
  font-size: 16px;
  font-weight: 400;
  text-indent: -10px;
  padding-left: 20px;
  line-height: 1.8em;
}

.notice-in ul li {
  padding-left:0;
}

.notice-in ul {
  list-style: none; /* 關閉預設數字 */
  counter-reset: item; /* 重設計數器名稱為 item */
  padding-left: 0;
}

.notice-in ul li {
  counter-increment: item;
  display: flex;
  margin-bottom: 8px;
  line-height: 1.6em;
  align-items: flex-start;
  text-indent: -1px;
}

.notice-in ul li::before {
  content: counter(item) ". ";
  font-weight: bold;
  color: var(--color-black);
  flex-shrink: 0; /* 防止數字被擠扁 */

  /* --- 縮排核心設定 --- */
  width: 12px; /* 固定數字區域的寬度，達成縮排效果 */
  display: inline-block;
  /* text-align: right; */ /* 如果數字到兩位數，建議開啟這行讓點點對齊 */
}

.notice-in li a {
  color: var(--color-primary);
  font-weight: 700;
}

.notice-in li a:hover {
  color: var(--color-primary-dark);
}
/************************************************************************************
11. MEDIA QUERIES 響應式設計（螢幕寬度由大到小）
*************************************************************************************/

@media only screen and (max-width: 1600px) {
  .main-people2, .main-people3 {
    display: none;
  }
}
@media only screen and (max-width: 1100px) {
  .mainpic-in {
    padding: 0px 10px;
  }
  .content {
    width: 72%;
  }

  .date span {
    font-size: 30px;
  }
  .logo figure {
    width: 80%;
  }

  .main-sale {
    color: var(--color-primary-dark);
    font-size: 35px;
  }

  .main-sale strong {
    font-size: 45px;
  }

  .main-people4 {
    right: 10px;
  }

}

@media only screen and (max-width: 960px) {
  .main-people4, .main-people1 {
    display: none;
  }

  .coupon-list {
    margin: 20px 0 30px 0;
  }
}

@media only screen and (max-width: 850px) {
  .step2 {
    flex: 0 0 48%;
  }
}

/*---平板-----*/

@media only screen and (max-width: 768px) {
  
  #mainNav {
    display: none;
  }
  .mainpic-in {
    margin-top: 0px;
  }
  .content {
    width: 100%;
    margin: 0 1%;
  }
  .date span {
    font-size: 30px;
    padding: 5px 30px 8px;
  }
  .logo figure {
    width: 80%;
  }
  .order-flow-tag {
    font-size: 32px;
    min-width: unset;
  }
  .coupon-in {
    margin-top: 50px;
  }

  .coupon-list {
    gap: 20px;
  }

  .coupon {
    background: url("../images/bg-coupon-md.webp") center center no-repeat;
    min-width: 200px;
    height: 119px;
  }
  .coupon h3 {
    font-size: 28px;
  }
  .coupon p {
    font-size: 20px;
  }
  .coupon p span {
    font-size: 42px;
  }
  .process-outer {
    padding-bottom: 60px;
  }

  .button-container {
    padding: 14px 38px; /* 右側留點空間給手指進場 */
    font-size: 28px;
  }

  .mainpic {
    padding: 60px 0;
  }

  html {
  scroll-padding-top: var(--nav-sticky-top);
}

#coupon,
#process,
#recommend,
#notice {
  scroll-margin-top: var(--nav-sticky-top);
}

}

@media only screen and (max-width: 600px) {
  .subtitle02 {
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 20px;
    height: auto;
    background: var(--color-primary);
  }
  .date {
    margin: 20px 0;
  }
  .date span {
    font-size: 26px;
  }
}

/*---手機版-----*/

@media only screen and (max-width: 500px) {
  .coupon-info-outer a.bookmark {
    margin: 0 auto;
  }
  .coupon-in {
    padding: 0px 10px 10px 10px;
    border: 4px solid var(--color-white);
  }

  .coupon {
    background: url("../images/bg-coupon-xs.webp") center center no-repeat;
    min-width: 135px;
    height: 80px;
  }
  .coupon h3 {
    font-size: 22px;
    padding-bottom: 2px;
  }
  .coupon p {
    font-size: 16px;
  }
  .coupon p span {
    font-size: 34px;
  }
  .step2 {
    flex: 0 0 98%;
  }

  .subtitle02 span {
    display: block;
    margin-left: 0px;
  }

  .coupon-info {
    font-size: 18px;
  }
  .coupon-info-step {
    padding: 10px 0;
  }
  .coupon-info-step h5 {
    font-size: 20px;
  }
  .coupon-info-step p, .coupon-info-step li {
    font-size: 17px;
  }
  .coupon-info-step h6 {
    font-size: 17px;
  }

}
@media only screen and (max-width: 440px) {
  .mainpic {
    padding: 70px 0 40px 0;
  }
  .mainpic-in {
    padding: 0;
  }
  .content {
    margin: 0;
  }

  .order-flow-tag {
    font-size: 24px;
  }

  .coupon-in {
    margin-top: 40px;
  }
  .coupon p span {
    font-size: 30px;
  }
  .coupon-info em {
    display: block;
    width: 110px;
    text-align: center;
    line-height: 1.5em;
    border-radius: 16px;
    margin-bottom: 8px;
  }

  .main-title {
    box-sizing: border-box;
    padding: 0 35px;
  }

  .main-sale {
    font-size: 28px;
  }

  .main-sale strong {
    font-size: 40px;
  }

  .date span {
    font-size: 20px;
  }

  .date {
    margin: 10px 0;
  }

  .coupon-info-outer {
    margin-bottom: 50px;
  }

  .subtitle02 {
    font-size: 20px;
    line-height: 1.2em;
    padding: 10px 0;
  }
}