/*修改部份*/

body {
  width: 100%;
  background-size: 100%;
  background-color: #ffeeee;
  background: linear-gradient(
    to bottom,
    #180a07 0%,
    #4b050e 3%,
    #771e1c 5%,
    #a80e26 10%
  );
}

header,
.footer {
  background-color: #6f0808;
}
.disabled {
  display: none;
}

.underline {
  text-decoration: underline;
}

/* wrapper kv-主視覺 ------------*/

.wrap-topview {
  display: block;
  position: relative;
  background: url(../images/kv_bg.png) no-repeat center 0;
}

.wrap-topview .kv {
  width: 100%;
  margin: 0 auto;
  display: block;
  padding-top: 15px;
  max-width: 860px;
  -webkit-animation: bounce-in-top 0.8s both;
  animation: bounce-in-top 0.8s both;
}

.wrap-topview-mm {
  display: none;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-10-22 15:43:56
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

/* 一日強檔 ------------*/

.main {
  background: url(../images/bg.png) no-repeat center 100px;
}
.special-offerBox {
  position: relative;
  margin: 1rem 0 0;
}

.content-tit {
  margin: 0 auto 2rem;
}

.countdownBox {
  display: block;
  position: relative;
  margin: 0 auto 0.3rem;
  padding: 1rem 0;
  background-size: 100%;
  background-color: #f8988c;
}

.countdown ul {
  max-width: 55%;
  margin: 0 auto;
}
.countdown li {
  display: inline-block;
  text-transform: uppercase;
  color: #701312;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: bold;
}

.countdown li span {
  font-size: 2.2rem;
  color: #bb4040;
  max-width: 4rem;
  display: inline-block;
  margin: 0 1rem;
  text-align: center;
}

.nineoclock {
  position: absolute;
  left: 0;
  top: -2.2rem;
}

.btn-img {
  width: 100%;
  margin: 1.5rem 0;
  max-width: 430px;
}

.sale_btn .btn-arrow,
.award-btn .btn-arrow {
  position: absolute;
  bottom: 0.1rem;
  right: 2.5rem;
  animation: left 1.2s infinite;
}

@keyframes left {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(8px, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* calendarBox日曆 ------------------------------ */
.calendarBox {
  margin: 2rem 0;
}

.calendarBox .day {
  margin: 1rem 0 1.5rem;
  width: 100%;
}

/* awardBox滿額贈 and 熱銷必買 ------------------------------ */
.award-detail-btn {
  position: absolute;
  bottom: 4rem;
  right: 14rem;
}
.award-02 .award-detail-btn {
  bottom: 8rem;
  left: 8rem;
}
.award-btn {
  margin-top: -5rem;
}
.buyBox {
  margin: 1rem 0 3rem;
}
.buy-list img {
  margin: 1rem 0;
}
.mm-award,
.mm-award-02 {
  display: none;
}

/*活動說明------------------------------------*/

.policyBox {
  background-color: #310309;
  padding: 1rem 0 2rem;
}

.policyBox h2 {
  border-radius: 2rem;
  width: 30%;
  color: #310309 !important;
  text-align: center;
  margin: 2rem auto;
  padding: 0.5rem 0;
  background-color: #f8988c;
  font-size: 1.6rem;
}

.policy h3 {
  color: #f8988c;
  font-size: 1.5rem;
  padding: 1rem 0 1rem;
  font-weight: bold;
}

.policy .Box {
  border: 2px solid #f8988c;
  padding: 2rem;
  margin: 0 0 1rem;
}

.policy ul.disc li {
  list-style: disc outside;
}
.policy h4,
.policy p span {
  color: #fff;
  font-weight: bold;
}

.tax {
  width: 100%;
  max-width: 701px;
}

/*跳出視窗------------------------------*/

.fancybox-button {
  color: #000 !important;
}

.popupBox {
  padding: 1.5rem !important;
  width: 500px;
  background-color: #ffd8c8;
  border: 3px solid #610c13;
}

.popupBox h2 {
  font-size: 1.8rem;
  color: #610c13;
  margin: 1.5rem 0 0.5rem;
  font-weight: 600;
  padding-bottom: 0.5rem;
}

.popupBox h3 {
  font-size: 1.5rem;
  color: #610c13;
  text-align: center;
  line-height: 1.8;
  font-weight: 500;
}

.coupon-submit {
  padding: 0 0 0.5rem !important;
}

.coupon-submit .SerialnumberBox {
  background-color: #ffd8c8;
  margin: 1.5rem 0;
  padding: 1rem;
}

.SerialnumberBox h4 {
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.5;
}

.coupon-submit p {
  font-size: 1rem !important;
}

.popupBox p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #610c13;
}
.popupBox p span {
  color: #610c13;
  font-size: 2rem;
  padding: 0 0.5rem;
}

.popupBox.w-400 {
  width: 400px;
}

.popupBox.w-500 {
  width: 500px;
}

.popupBox2.w-600 {
  width: 600px;
}

.popupBox a.btn {
  margin: 1rem auto 0;
  color: #430000;
  background-color: #f8988c;
  border: 2px solid #a80e26;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  width: 60%;
  display: block;
  padding: 0.5rem 0;
  font-size: 1.3rem;
  font-weight: normal;
  border-radius: 30px;
}

.download-btn a.btn-orange {
  margin: 1rem 0.5rem 0;
  width: 50%;
  color: #ffffff;
  font-size: 1.2rem;
  padding-left: 2rem;
  text-align: center;
  border-radius: 10px;
}

.download-btn a.green-btn {
  margin: 1rem 0.5rem 0;
  width: 50%;
  color: #ffffff;
  font-size: 1.2rem;
  padding-left: 2.5rem;
}

.popupBox a.green-btn {
  background-color: #f8988c;
  border: 2px solid #430000;
  border-radius: 30px;
  color: #430000;
  margin: 1rem 0.5rem 0;
  padding: 0.5rem;
  display: block;
  text-align: center;
}

.icon-ios {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2223px%22%20height%3D%2230px%22%20viewBox%3D%220%200%2023%2030%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2057.1%20%2883088%29%20-%20https%3A//sketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3Eapple%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cg%20id%3D%22Symbols%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22ios_black%22%20transform%3D%22translate%28-12.000000%2C%20-8.000000%29%22%20fill%3D%22%23FFFFFF%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M23.683999%2C17.1073079%20C24.7943234%2C17.1073079%2026.9085938%2C15.5340606%2029.0882427%2C15.7693656%20C30.0002158%2C15.7966474%2032.5954052%2C16.1388059%2034.2697567%2C18.6430428%20C34.1345675%2C18.7260248%2031.1781348%2C20.5084321%2031.2102699%2C24.1721431%20C31.2468375%2C28.5633673%2034.9545676%2C30.0149835%2035%2C30.0308979%20C34.9778378%2C30.1332044%2034.4193513%2C32.1259085%2033.0286755%2C34.1493046%20C31.8673781%2C35.9305752%2030.6506753%2C37.67206%2028.7181346%2C37.7038887%20C26.8409992%2C37.7482215%2026.2093776%2C36.5705595%2024.0563233%2C36.5705595%20C21.8833231%2C36.5705595%2021.2107014%2C37.67206%2019.4100256%2C37.7482215%20C17.5694579%2C37.8175626%2016.1632685%2C35.8464565%2014.959863%2C34.0811003%20C12.5541601%2C30.4764997%2010.6814572%2C23.9231972%2013.1924304%2C19.4637686%20C14.4091332%2C17.2766821%2016.6275659%2C15.868262%2018.9989174%2C15.8307496%20C20.8417014%2C15.7921004%2022.5515124%2C17.1073079%2023.683999%2C17.1073079%20Z%20M29.111513%2C8.75%20C29.2954589%2C10.4653397%2028.6328102%2C12.1556712%2027.6643236%2C13.3981273%20C26.653729%2C14.6212589%2025.0369991%2C15.5567954%2023.4623773%2C15.436301%20C23.2562692%2C13.7857554%2024.0541071%2C12.0306298%2024.9472423%2C10.9598213%20C25.9567289%2C9.74464695%2027.7097561%2C8.81365741%2029.111513%2C8.75%20Z%22%20id%3D%22apple%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 40px 7px;
}

.icon-google {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2222px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2022%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2057.1%20%2883088%29%20-%20https%3A//sketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3Egoogle%20play%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2250%25%22%20y1%3D%220%25%22%20x2%3D%2250%25%22%20y2%3D%22100%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%231E79AF%22%20offset%3D%220%25%22%3E%3C/stop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%2363FFD3%22%20offset%3D%22100%25%22%3E%3C/stop%3E%0A%20%20%20%20%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2284.7178118%25%22%20y1%3D%2228.8782655%25%22%20x2%3D%225.24419544%25%22%20y2%3D%2277.6611704%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23DC4057%22%20offset%3D%220%25%22%3E%3C/stop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%239E36BB%22%20offset%3D%22100%25%22%3E%3C/stop%3E%0A%20%20%20%20%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2250%25%22%20y1%3D%220%25%22%20x2%3D%2250%25%22%20y2%3D%2297.8256537%25%22%20id%3D%22linearGradient-3%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FF9676%22%20offset%3D%220%25%22%3E%3C/stop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFD074%22%20offset%3D%22100%25%22%3E%3C/stop%3E%0A%20%20%20%20%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2217.4435371%25%22%20y1%3D%2220.2975638%25%22%20x2%3D%22100%25%22%20y2%3D%2279.7024362%25%22%20id%3D%22linearGradient-4%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%2351C6AD%22%20offset%3D%220%25%22%3E%3C/stop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D5FFA1%22%20offset%3D%22100%25%22%3E%3C/stop%3E%0A%20%20%20%20%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Symbols%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22google-play-black%22%20transform%3D%22translate%28-11.000000%2C%20-11.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22google-play%22%20transform%3D%22translate%2811.000000%2C%2012.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0.938480335%2C-0.152995221%20C0.515889775%2C-0.0196989555%200.242410522%2C0.411708171%200.242410522%2C1.06440023%20L0.245015086%2C21.6064711%20C0.245015086%2C22.2519402%200.510029505%2C22.676781%200.920899526%2C22.8186135%20L12.3191241%2C11.3236163%20L0.938480335%2C-0.152995221%22%20id%3D%22left%22%20fill%3D%22url%28%23linearGradient-1%29%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0.920899526%2C22.8186135%20C1.21651758%2C22.9197348%201.58701685%2C22.8724573%201.99072432%2C22.6492025%20L15.9004%2C14.9350915%20L12.3191241%2C11.3236163%20L0.920899526%2C22.8186135%22%20id%3D%22bottom%22%20fill%3D%22url%28%23linearGradient-2%29%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M15.9023535%2C14.9350915%20L20.6452651%2C12.3052809%20C21.6070005%2C11.7701259%2021.6070005%2C10.8994321%2020.6452651%2C10.3655904%20L15.8847727%2C7.72593037%20L12.3191241%2C11.3216464%20L15.9023535%2C14.9350915%22%20id%3D%22right%22%20fill%3D%22url%28%23linearGradient-3%29%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M15.8841215%2C7.72593037%20L1.99072432%2C0.022325483%20C1.59678397%2C-0.19501966%201.23344724%2C-0.245580313%200.939131476%2C-0.152995221%20L12.3191241%2C11.3216464%20L15.8841215%2C7.72593037%22%20id%3D%22top%22%20fill%3D%22url%28%23linearGradient-4%29%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 20px 10px;
}

.sweet-alert button {
  background-color: #ff4484 !important;
  color: #fff !important;
  font-size: 1.2rem !important;
  border-radius: 30px;
}

.sweet-alert .sa-icon.sa-success .sa-placeholder {
  border: 4px solid #ff4484 !important;
}

.sweet-alert .sa-icon.sa-success .sa-line {
  background-color: #ff4484 !important;
}

.sweet-alert h2 {
  font-size: 20px !important;
}

/*------------popup2------------*/

.popupBox2 {
  padding: 0 !important;
  border-radius: 10px;
  background-color: #ff4484;
}

.popupBox2 h3 {
  padding: 2rem 1rem 0;
  text-align: center;
  color: #ffda47;
  font-size: 1.7rem;
}

.popupBox2 h4 {
  color: #430000;
  text-align: center;
  line-height: 35px;
  font-size: 1.4rem;
}
.popup2-txt p {
  margin: 0.5rem auto;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #fff;
}
.notice {
  font-size: 1rem !important;
  padding-bottom: 20px;
}
.coupon_style {
  color: #430000;
  background-color: #ffcb4d;
  text-align: center;
  margin-top: 1rem;
  padding: 1% 0;
}
.coupon_style p {
  text-align: center;
  display: block;
  margin: 0 auto;
  color: #430000 !important;
  font-weight: bold;
}
.copy-coupon .copy,
.copy-coupon .copy2 {
  color: #430000;
  background-color: #ffcb4d;
  border: 2px solid #430000;
  border-radius: 30px;
  margin-top: 3px;
  cursor: pointer;
  font-size: 1.3rem;
  margin: 1.5rem auto;
  display: block;
  width: 40%;
  padding: 0.5rem;
  text-align: center;
}