@charset "utf-8";

/* CSS Document */
/************************************************************************************
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;
}

.clean { clear:both;}

.clearfix {
  overflow: auto;
}

img { max-width:100%;}

.left { float: left;}
.right { float: right;}

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


/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

html { scroll-behavior: smooth; }

#web-outer {
    font-family:"微軟正黑體","Roboto", sans-serif;
	max-width: 1920px;
	overflow: hidden;
    background:#9a78f8;
    margin: 0 auto;
}
/*======================
====Main CSS=====
=======================*/

/*----header------*/

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

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

.header-pic-l { width:19%; margin:0 -3% 0 1%;  align-self: flex-end; animation-delay: 1s; }
.content { width:62%; margin:0 1%; display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 30px;
}

.header-pic-r { width:19%; margin:100px 1% 0 -2%; align-self: center;}

header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    /*width: 100%;*/
}
.main-title { text-align: center;}
.main-title-xs { display: none;}

.tiger { display: none; }

.logo figure { margin: 0 auto;}

.date { margin: 40px 0 50px 0; text-align: center; }
.date span { 
    background: #000000;
    font-size: 36px;
    color:#ffffff;
    font-family: "Roboto", sans-serif;
    border-radius: 35px;
    padding:6px 26px;
}

.offers-outer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    text-align:center;
}
.circle {
    font-size: 34px;
    font-weight: bold;
    color: #000000;
    background: #ffffff;
    width: 42px;
    height: 42px;
    border-radius: 50% ;
    vertical-align: baseline;
    z-index: 900;
    margin-top: 0px;
    flex-shrink: 0;
}
.offers {
    border:2px solid #fff9e7;
    border-radius: 25px;
    margin:20px -6px;
    padding: 18px;
    width: 270px;
    
}
.offers p {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    background: #000000;
    max-width: 94%;
    border-radius: 25px;
    margin: 0 auto;
    padding:12px 6px;
    text-align: center;
 }

.offers h2 { padding-top: 12px;} 
.offers h2 span {
    font-size: 27px;
    font-weight: 500;
    color: #ffffff;
    display: block;
    font-family: "Roboto", sans-serif;
    padding-top: 5px;
}
.offers h2 span.small {
    font-size: 17px;
    padding-top: 10px;
}

.offers h2 span em {
    font-size: 35px;
    font-weight: 800;
    color: #ffd103;
    font-family: "Roboto", sans-serif;
    font-style: normal;
}
.offers h2 span strong {
    font-size: 62px;
    font-weight: 800;
    color: #ffd103;    
    font-family: "Roboto", sans-serif;
}

.warning { color:#ffffff; font-size: 16px; font-weight: 600; position:sticky; top:730px;  text-align: right; padding-right: 10px; }

/*======================
====nav CSS=====
=======================*/

#main-nav{
    width: 100%;
    z-index: 990;  
    background:#000000; 
    margin:0 auto;
}
 
 #block_menu {
     text-align: center;
     font-weight: 600;
     overflow: hidden;
 }
 
 .sticky {
     top:40px;
 }

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


/*======================
====main CSS=====
=======================*/ 

.first { padding-top:90px; margin-top: -90px;}

.subtitle {
  text-align: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* 增加陰影感 */
}

.order-flow-tag {
  position: relative;
  display: inline-block;
  color: white;
  font-size: 46px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 12px 95px 50px 95px;
  z-index: 1;
}

.order-flow-tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000; /* 你的深色 */
  z-index: -1;
  
  /* 關鍵：利用透視做出上方較寬、下方較窄並帶圓角的形狀 */
  transform: perspective(50px) rotateX(-15deg);
  transform-origin: top;
  
  /* 圓角設定：底部要大圓角 */
  border-radius: 0 0 45px 45px;
}

.coupon-outer { 
    margin:0 auto; text-align: center;  
    padding:0 15px;
}
.coupon-in { 
    margin: 0 auto;
    margin-top:90px;
    padding:0px 20px 80px 20px; 
    border: 6px solid #ffffff; 
    border-radius: 50px; 
    background: #a485f9;
    max-width: 1260px;
 }

.coupon-list {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align:center;
    flex-wrap: wrap;
}

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

.coupon h3 { 
    font-size: 42px;
    font-weight: 600;
    color: #ffffff;
    padding-top: 5px; 
    padding-bottom: 12px;   
}

.coupon p {
    font-size: 34px;
    font-weight: 600;
    color: #ffffff;  
    
} 

.coupon p span {
    font-size: 58px;
    font-weight: 800;
    color: #ffe00f;   
} 

.button-container {
  display: inline-flex;
  align-items: center;
  padding: 20px 50px; /* 右側留點空間給手指進場 */
  background-color: #ffcc00;
  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:#000000;
}

.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: #ffaa00;
}

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


.coupon-info-outer {
    background: #6a29a7;
    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:#ffffff;
    margin: 0 auto; 
    line-height: 2em;
    padding-top: 10px;
}

.coupon-info span { 
    color:#ed4300;
    font-weight: 600;
}
.coupon-info em { 
    color:#6a29a7;
    border-radius:8px;
    background: #ffffff;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    padding:4px 8px;
    margin-right: 10px;
}
.coupon-info-step a { color:#fcd468; padding:0 3px; }
.coupon-info-step a:hover { color:#35bce6; }


.coupon-info-step { padding: 15px; }
.coupon-info-step h5 {
    font-weight: 600;
    font-size: 22px;
    color: #ffffff;
    margin: 0 auto;
    line-height: 2em;
    border-bottom: 3px solid #ffffff;
    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 #ffffff;
    
    margin-right: 12px; /* 增加一點點間距感 */
    /* 這裡不再需要 vertical-align，因為父層的 flex 會接管對齊 */
}

.coupon-info-step p {
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    line-height: 1.8em;
}
.coupon-info-step p span { 
    color:#fcd468;
    font-weight: 600;
}
.coupon-info-step .p2 {
    margin-left: 35px;    /* 增加整體邊距 */
    line-height: 1.8em;
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;

    /* --- 新增縮排設定 --- */
    text-indent: -1em;    /* 第一行往左推一個字距離 */
}

/* 在文字前加上符號 */
.coupon-info-step .p2::before {
    content: "- ";        /* 符號後加一個空格 */
}

.coupon-info-step .p2 em {
    color:#fcd468;
    font-weight: 600;
    font-style: normal;
}
.coupon-info-step .p2 span {
    font-size: 15px;
    color: #ffffff;
}
.coupon-info-step h6 { 
    font-weight: 500;
    font-size: 20px;
    padding:4px 8px;
    margin-right: 10px;
    line-height: 2em;
    color:#ffffff;
}
.coupon-info-step h6 em { 
    color:#ffffff;
    border-radius:10px;
    border: 1px solid #ffffff;
    padding:2px 8px;
    margin-right: 10px;
    font-style: normal;
    font-weight: 600;
}

.coupon-info-outer a.bookmark { 
    color:#000000; background: #b79dff; border-radius: 25px;  text-decoration: none; font-size: 18px; 
    font-weight: 500; padding:12px 18px;  display: inline-block;
}
.coupon-info-outer a.bookmark:hover { background: #ffffff; color: #7831c7; }

.process-outer { background: #fff3c4; padding-bottom: 100px;}

.subtitle02 {
    background: url("../images/bg-subtitle02.webp") center center no-repeat;
    height: 54px;
    font-size: 32px;
    font-weight: 600;
    color: #282828;
    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;
}

.step-outer2 {
    margin: 0 auto;
    max-width: 1300px;
    display: flex; flex-wrap:wrap; justify-content: center;
    padding-top: 40px;
}

.step { 
    margin:0 1%; flex:0 0 31%; align-items: stretch; align-content: stretch; margin-bottom: 80px;  
    display: flex; flex-direction: column;  
    border: 2px solid #000000;  background: #ffffff;  border-radius: 20px;
}
.step2 { 
    margin:0 1% ; flex:0 0 23%; align-items: stretch; align-content: stretch; margin-bottom: 80px; 
    display: flex; flex-direction: column;  
    border: 2px solid #000000;  background: #ffffff;  border-radius: 20px;
}

.number {  
    margin:0 auto;background: #000000; 
    text-align: center; width: 80px; height: 40px;
    border-radius: 80px 80px 0 0; margin-top: -40px;
 }

 .number p { font-size: 26px; font-family: "Roboto", sans-serif; font-weight: 700; color:#ffffff; line-height: 40px; }


.flex-pic {  padding:10px 0 6px 0; flex:1; background: #ffffff; margin: 0 auto; }

.step h4,.step2 h4 { 
    margin:0 8px; padding:16px 0;
    color:#454443; font-size: 28px; font-weight: 600;
    border-bottom: 1px solid #f38280; text-align: center;
}

.step h5,.step2 h5 { 
    background: #ffd100; padding:8px 8px; 
    color:#000000; 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:#c9191d; font-size: 15px; font-weight: 600;
    line-height: 1.6em; font-style: normal; display: block;
}

/*======================
==== Slider CSS=====
=======================*/
.recommend-outer { 
    background: #9076d7;
    padding:0px 0 40px 0 ;
}

/*輪播區塊*/
.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: #fa9777;
}

.slick-dots button {
    background: #fff0d4;
    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: #fa9777;
}

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


/*----*/

.notice-outer { margin:0 auto;  padding:0px 10px 100px 10px; background: #ffd103; }
.notice-outer-in { max-width: 1300px; margin: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;
    color:#1c1b1b;
    display: inline-block;     
}
.notice-in li { 
    color:#1c1b1b;
    font-size: 16px;
    font-weight: 500;
    text-indent: -7px;
    padding-left: 20px;
    line-height: 1.8em;
 }

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

.notice-in ul li {
    counter-increment: item;
    display: flex;         /* 關鍵：利用 flex 達成自動縮排 */
    margin-bottom: 8px;
    line-height: 1.6em;    /* 設定行高讓文字閱讀更舒適 */
    align-items: flex-start; /* 確保數字對齊第一行文字 */
    text-indent: -1px;
    padding-left: 22px;

}

.notice-in ul li::before {
    content: counter(item) ". ";
    font-weight: bold;
    color: #000000;
    flex-shrink: 0;        /* 防止數字被擠扁 */
    
    /* --- 縮排核心設定 --- */
    width: 12px;           /* 固定數字區域的寬度，達成縮排效果 */
    display: inline-block;
    /* text-align: right; */ /* 如果數字到兩位數，建議開啟這行讓點點對齊 */
}

.notice-in li a { 
    color:#1c1b1b;
    font-weight: 700;
 }

.notice-in li a:hover{ 
    color:#862020;
 }
/*------media query----------*/


@media only screen and ( max-width:1100px) 
{ 
    .mainpic-in { padding:0px 10px 0px 10px; }
    .header-pic-l { width:14%; margin:0 0 0 0;   }
    .content { width:72%; margin:0 0; }
    .header-pic-r { width:14%; }

    .date { margin: 40px 0 40px 0;  }
    .date span { 
        font-size: 30px;
        padding:5px 30px;
    }
    .logo figure { width:80%;}
}

/*@media only screen and ( max-width:1024px) 
{ 
    .date span { font-size: 26px; }
    .date { margin: 40px 0 20px 0;}
    .mainpic { background: #ffdf3e url("../images/bg-header-md2.webp") left top no-repeat;  }    
}*/


@media only screen and ( max-width:850px) 
{ 

    .circle { margin-top: 0px;}
    .offers { padding: 10px 6px;  width: 240px; }
    .offers h2 span { font-size: 20px; }  
    .offers h2 span em { font-size: 30px; }
    .offers h2 span strong { font-size: 46px; }
    
    .step { flex:0 0 48%; ;}
    .step2 { flex:0 0 48%; ;}
}

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

@media only screen and ( max-width:768px) 
{ 
    .first { padding-top:40px; margin-top: -40px;}
    #main-nav { display: none;}
    .mainpic-in { margin-top: 0px;}
    .header-pic-l {display: none;   }
    .content { width:100%; margin:0 1%; }
    .tiger { width: 30%; display: block;}
    .header-pic-r { display: none;  }

    .date { margin: 40px 0 40px 0;  }
    .date span { 
        font-size: 30px;
        padding:5px 30px;
    }
    .logo figure { width:80%;}
    .order-flow-tag { font-size: 32px; padding: 12px 80px 50px 80px; }
    .coupon-in { padding:0px 10px 60px 10px; margin-top:50px;}
    .coupon { 
        background: url("../images/bg-coupon-md.webp") center center no-repeat;
        min-width: 200px;
        height: 119px;
        margin:8px 8px;
    }
    .coupon h3 { font-size: 28px;}
    .coupon p { font-size: 20px; } 
    .coupon p span { font-size: 42px; } 
    .process-outer { padding-bottom: 0px;}

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

@media only screen and (max-width:600px) 
{   
    .subtitle02 { 
        background:none; background: #f8ce17; font-size: 24px;      
        margin-top: 15px; margin-bottom:20px;
 }
    .step-outer { padding-top: 0px; }    
    .date { margin: 25px 0 25px 0;  }
    .date span { 
        font-size: 26px;
        padding:5px 30px;
    }


}

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

@media only screen and (max-width:500px) 
{

    .coupon-info-outer a.bookmark { 
        margin:0 auto;
    }
    .circle {
        font-size: 24px;
        width: 30px;
        height: 30px;
    }
    .offers {
        padding: 12px;
        width:210px;
    }
    .offers p {
        font-size: 18px;
        padding:8px 0px;
    }

    .offers h2 { padding-top: 12px;} 
    .offers h2 span {
        font-size: 18px;
    }
    .offers h2 span em {
        font-size: 26px;
    }
    .offers h2 span strong {
        font-size: 40px;
    }

    .coupon-in { padding:0px 10px 50px 10px; border: 4px solid #ffffff;  }

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

    .step-outer,.step-outer2 { margin-top: 80px;} 
    .step { flex:0 0 98% ;}
    .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 { font-size: 17px; }
    .coupon-info-step h6 { font-size: 17px; }
    .coupon-info-step p.p2 { font-size: 17px; }

}
@media only screen and (max-width:440px) 
{
    .mainpic { 
        padding-top: 20px;
    }
    .logo { display: none;}
    .main-title { display: none;}
    .main-title-xs { display: block;}
    .tiger { display: none;}
    .header-pic-l { display: none;}
    .mainpic-in { padding:0; }
    .content { margin: 0; }

   .offers-outer {     
        flex-wrap: wrap;
        flex-direction: column;
        padding: 0 0 10px 0;
    }
    .offers {
        height: auto;
        margin:0px 0px;
        padding: 12px 10px;
        width:300px;
    }
    .circle { margin: -10px 0; }
    .offers h2 { padding-top: 6px;} 
    .offers h2 span { display: inline; padding:0 4px; }    
    .order-flow-tag { font-size: 28px; padding: 12px 50px 50px 50px; }

    .coupon-in { margin-top:40px;}
    .coupon { margin:10px 10px; }  
    .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; }
}