/* @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: 文字顏色值; */
}
/* 這行是最上面的板頭 */
header > .inner {
  background-color: #e0eef0;
  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: #2e2e2e;
  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: #e0eef0;
  /* background-image: radial-gradient(#15752f 0px, #ffffff 0px),
    radial-gradient(#15752f 0px, #ffffff 0px); */
  /* background-size: 20px 0px;
  background-position: 0 0, 10px 10px; */
  /* -webkit-animation: bgscroll 25s linear infinite;
  animation: bgscroll 25s linear infinite; */
  overflow: hidden;
  transition: 0.2s;
}

/* 主視覺 */
main.kv-bg {
  background: url(../images/index.gif) center center no-repeat;
  background-color: #e0eef0;
  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;
  height: auto;
  min-height: 700px !important;
  /* animation: bgscroll 25s linear infinite; */
  transition: 0.2s;
}
/* 選單 */
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;
}
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) {
}

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

@media (max-width: 550px) {
  /* 主視覺 */
  main.kv-bg {
    background: url(../images/index-2.gif) center bottom no-repeat;
    background-color: #e0eef0;
    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;
    height: auto;
    min-height: 600px !important;
    background-size: cover;
    /* animation: bgscroll 25s linear infinite; */
    transition: 0.2s;
  }
}
@media (max-width: 420px) {
}
@media (max-width: 375px) {
}