/* @import url("https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap"); */

body {
  font-family: "M PLUS 1", "Noto Sans TC", sans-serif;
}

/* 反白顏色 */
::selection {
  background: #ffcc00;
  /* color: 文字顏色值; */
}
::-moz-selection {
  background: #ffcc00;
  /* color: 文字顏色值; */
}
.loader-inner {
  width: 100vw;
  height: 100vh;
  margin: 0;
  position: fixed;
  z-index: 9999;
}
/* 這行是最上面的板頭 */
header > .inner {
  background-color: #effef6;
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  /* -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px); */
}

/* hoho的logo */
header > .inner a.logo {
  background: url(../images/icon_hoho-02.svg) no-repeat center;
  background-size: cover;
  width: 200px;
  height: 140px;
  left: -15px;
}
/* hoho的logo滑鼠移過去後 */
header > .inner a.logo:hover {
  filter: brightness(1.1);
  transition: 0.2s;
}
/* 右上的icon */
header ul.wrap-link li i[class*="icon-"],
header ul.wrap-link li a[class*="icon-"] {
  background-color: #ffcc00;
  color: #ffffff;
  transition: 0.2s;
}
/* 右上的icon滑鼠移過去後 */
header ul.wrap-link li i[class*="icon-"]:hover,
header ul.wrap-link li a[class*="icon-"]:hover {
  background-color: #ffcc00;
  transition: 0.2s;
}
/* icon旁邊的文字 */
header ul.wrap-link li span {
  color: #222222;
  margin-right: 10px;
  transition: 0.2s;
}

/* 從這邊開始是內容大框架 */
.container {
  background-color: #effef6;
  background-image: radial-gradient(#aad1ef 1px, #ffffff 1px),
    radial-gradient(#aad1ef 1px, #ffffff 1px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  -webkit-animation: bgscroll 25s linear infinite;
  animation: bgscroll 25s linear infinite;
  overflow: hidden;
  transition: 0.2s;
}
@-webkit-keyframes bgscroll {
  0% {
    background-position: 0 0;
    transition: 0.2s;
  }
  100% {
    background-position: -800px 500px;
    transition: 0.2s;
  }
}

/* 主視覺 */
main.kv-bg {
  background: url(../images/index.jpg) center center no-repeat;
  background-color: #f8faec;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  min-height: 600px !important;
  transition: 0.2s;
}

/* 主視覺下面的券-大標 */
section#coupon {
  /* background-color: rgb(51, 57, 137); */
}
.coupon-main {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 99;
  margin: 0 auto;
  padding: 15px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.couponA {
  width: 387px;
  height: 450px;
  color: #ff5757;
  background-color: #ffffff;
  background: url(../images/coupon-bg_01.jpg) no-repeat center center;
  background-size: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.couponB {
  width: 813px;
  height: 450px;
  color: #ff5757;
  background-color: #ffffff;
  background: url(../images/coupon-bg_02.jpg) no-repeat center center;
  background-size: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding-left: 100px;
  position: relative;
}

/* 下方banner */
.coupon-main-center {
  background: url(../images/coupon-bg-3.png) no-repeat center center;
  background-size: contain;
  background-color: #ffffff;
  width: 1200px;
  height: 350px;
  margin: 30px auto 0px auto;
  border-radius: 20px;
}

/* 選單 */
nav {
  position: relative;
  z-index: 999;
  background-color: transparent;
  transition: 0.2s;
}
nav .inner {
  margin-top: 60px;
  background-color: transparent;
  transition: 0.2s;
}
nav .inner a {
  background-color: #ffcc00;
  color: #222222;
  width: 18%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  transition: 0.2s;
  font-size: 21px;
  transition: 0.2s;
}
nav .inner a:hover {
  background-color: #ffcc00;
  color: #222222;
  transition: 0.2s;
}

/* 開始商品列表 */
section .sec-inner {
  padding: 20px 0;
  min-height: auto !important;
}
section .sec-inner .sec-head .headtitle {
  color: #444444;
}

section .sec-inner .sec-head .text {
  color: #444444;
  background-color: transparent;
  font-size: 2em;
  border-radius: 30px;
  width: 90%;
  margin: 0 auto;
}

.wrap-item .item {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.wrap-item .item .item-bottom .text {
  background-color: #fff;
}

.wrap-item.item-card .item .item-img {
  border: none;
}
.wrap-item.item-card .item {
  transition: 0.2s;
}
.wrap-item.item-card .item:hover {
  transform: scale(0.95);
  transition: 0.2s;
}

.wrap-item.item-card .item .item-bottom .text .discount-price {
  color: red;
  text-align: right;
}

/* 回到上方 */
a#backTop {
  background-color: #444;
}

/* 注意事項 */
section#notice {
  padding: 0px 0px 50px 0px;
}
section#notice ul.list-num {
  background-color: rgba(237, 237, 237, 0.5);
  line-height: 1.6rem;
  color: #222;
}

@media (max-width: 1440px) {
}

@media (max-width: 1210px) {
}

@media (max-width: 1030px) {
    /* 主視覺下面的券-大標 */
  .coupon-main {
    width: 100%;
    max-width: 390px;
    position: relative;
    z-index: 99;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
  }

  }
/* 下方banner */
.coupon-main-center {
  background: url(../images/coupon-bg-3.png) no-repeat center center;
  background-size: contain;
  width: 1200px;
  height: 350px;
}

@media (max-width: 845px) {
}

@media (max-width: 550px) {
  /* 主視覺 */
  main.kv-bg {
    background: url(../images/index-2.jpg) center bottom no-repeat;
    background-color: #effef6;
    background-size: contain;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    min-height: 600px !important;
    /* animation: bgscroll 25s linear infinite; */
    transition: 0.2s;
  }
  /* 主視覺下面的券-大標 */
  .coupon-main {
    width: 100%;
    max-width: 390px;
    position: relative;
    z-index: 99;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
  }
  .couponA {
    width: 390px;
    height: 180px;
    background-color: #ffffff;
    background: url(../images/coupon-bg-phone_01.jpg) no-repeat center center;
    display: flex;
    flex-direction: column;
  }
  .couponB {

    width: 390px;
    height: 420px;
    background-color: #ffffff;
    background: url(../images/coupon-bg-phone_02.jpg) no-repeat center center;
    display: flex;
    flex-direction: column;
    position: relative;
  
  }
/* 下方banner */
.coupon-main-center {
  background: url(../images/coupon-bg-3-m.jpg) no-repeat center center;
  background-color: transparent;
  background-size: contain;
  width: 350px;
  min-height: 538px;
}
@media (max-width: 420px) {
  /* 選單 */
  section .sec-inner {
    padding: 10px 0 0 0 !important;
    transition: 0.2s;
  }
  .coupon-title {
    font-size: 2rem;
  }
  section #coupon {
    padding: 30px;
  }
  section #coupon .coupon-m #coupon-title {
    color: #444444;
    letter-spacing: 0;
    transition: 0.2s;
    font-size: 1.8rem;
  }
  section .sec-inner .sec-head .text {
    display: none;
  }
  nav.fixed.open .inner a {
    text-align: left;
    transition: 0.2s;
  }
  section .sec-inner .sec-head .headtitle {
    font-size: 30px;
    line-height: 2.5rem;
    letter-spacing: 0;
  }
  section#notice ul.list-num {
    padding: 50px 30px 50px 40px;
  }
}
@media (max-width: 375px) {
  /* 選單 */
  section .sec-inner {
    padding: 10px 0 0 0 !important;
    transition: 0.2s;
  }
  section #coupon .coupon-m .coupon-main {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.5rem;
  }
  section .sec-inner .sec-head .text {
    display: none;
  }
  section .sec-inner .sec-head .headtitle {
    font-size: 30px;
    line-height: 2.5rem;
    letter-spacing: 0;
  }
  nav.fixed.open .inner a {
    text-align: left;
    transition: 0.2s;
  }
}
}