@charset "UTF-8";
:root {
  --max-width: 1200px;
  --color1: #0d6dff;
  --color2: #fae288;
  --color3: #fe7bac;
  --color4: #7ffe01;
  --menu-color1: #000;
  --menu-color2: var(--color4);
  --font-size-L: 50px;
  --font-size-M: 40px;
  --font-size-S: 32px;
  --font-size-XS: 26px;
}
@media screen and (max-width: 450px) {
  :root {
    --font-size-L: 30px;
    --font-size-M: 24px;
    --font-size-S: 20px;
    --font-size-XS: 16px;
  }
}

/**--  swiper  --**/
.swiper {
  position: relative;
}

.swiper-slide a {
  display: block;
}
.swiper-slide img {
  width: 100%;
}

.swiper-button-next,
.swiper-button-prev {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 1;
  pointer-events: unset;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next,
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  top: 50%;
  -webkit-transform: translateY(25%);
          transform: translateY(25%);
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-next {
  right: 0;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  content: "";
  background-image: url(../images/arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30% auto;
  display: block;
  border-radius: 999em;
  width: 30px;
  height: 30px;
  background-color: var(--color2);
  opacity: 1;
}
@media screen and (max-width: 991px) {
  .swiper-button-next:after,
  .swiper-button-prev:after {
    width: 26px;
    height: 26px;
  }
}

.swiper-button-next:after {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

/**--  kv  --**/
.kv_item {
  position: absolute;
}

.kv_item-subTitle {
  width: 30.625%;
  top: 50%;
  left: 16%;
}

.kv_item-title {
  width: 43.4375%;
  top: 16%;
  left: 10%;
}

.kv_item-sale {
  width: 27.8125%;
  top: 74%;
  left: 21%;
}

.showByDate {
  /*display: block !important;*/
}

/**--  共用  --**/
.menustyle2 {
  width: 140px;
}
@media screen and (max-width: 991px) {
  .menustyle2 {
    width: 100%;
  }
}

html,
body {
  background-image: url(../images/bg.jpg);
  background-position: center top;
  background-size: 100% auto;
}

.btt {
  font-size: var(--font-size-L);
  font-family: "Noto Serif TC", serif;
  font-weight: 800;
}
.blk_sp,
.blk_bas {
  margin-top: 90px;
}
@media screen and (max-width: 991px) {
  .blk_sp,
  .blk_bas {
    margin-top: 50px;
  }
}
@media screen and (max-width: 450px) {
  .blk_sp,
  .blk_bas {
    margin-top: 10px;
  }
}

.blk_head {
  font-size: var(--font-size-L);
  background-color: var(--color4);
  background-image: url(../images/bttDeco3.png), url(../images/bttDeco4.png);
  background-position: left bottom, right bottom;
  background-size: auto 100%, auto 80%;
  background-repeat: no-repeat;
  position: relative;
}
@media screen and (max-width: 991px) {
  .blk_head {
    background-size: auto 50%, auto 50%;
  }
}
.blk_head:before, .blk_head:after {
  content: "";
  display: block;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 10%;
  padding-bottom: 5%;
  position: absolute;
}
.blk_head:before {
  background-image: url(../images/bttDeco2.png);
  left: 0;
  top: 0;
  -webkit-transform: translateY(-90%);
          transform: translateY(-90%);
}
.blk_head:after {
  background-image: url(../images/bttDeco1.png);
  right: 0;
  bottom: 0;
  -webkit-transform: translateY(90%);
          transform: translateY(90%);
  z-index: 1;
}

.blk_body {
  font-size: var(--font-size-L);
  padding: var(--font-size-L) 0;
}
.blk_pre .blk_body {
  background-color: unset;
  padding: 20px;
}
@media screen and (max-width: 991px) {
  .blk_pre .blk_body {
    padding: 4vw;
  }
}
.blk_bas .blk_body {
  background-color: #918f8f;
  background-color: var(--color1);
  position: relative;
}
.blk_bas .blk_body:after {
  content: "";
  display: block;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 50%;
  padding-bottom: 3%;
  position: absolute;
  background-image: url(../images/blk_bodyDeco2.png);
  right: 0;
  bottom: 0;
  -webkit-transform: translateY(90%);
          transform: translateY(90%);
}
.blk_bas:nth-of-type(odd) .blk_body {
  background-color: var(--color3);
}
.blk_bas:nth-of-type(odd) .blk_body:after {
  background-image: url(../images/blk_bodyDeco.png);
}

/**--  promotion區  --**/
@media screen and (max-width: 991px) {
  .blk_pre .tips a {
    padding: 3px;
  }
}

/**--  區塊  --**/
.block4 .blk_item {
  position: relative;
}
.block4 .blk_item .blk_item_head {
  position: absolute;
  top: 13%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (max-width: 991px) {
  .block4 .blk_item .blk_item_head {
    position: unset;
    -webkit-transform: unset;
            transform: unset;
  }
}
@media screen and (max-width: 991px) {
  .block4 .blk_item .blk_item_head br {
    display: none;
  }
}

big {
  color: #ab0094;
}

.round_3p .font h4,
.hightlight .font h4 {
  background: #000;
}

.rectangle_3p .font h4 {
  color: var(--color1);
}

.round_5p .font {
  color: #fff;
}
.round_5p .font .price {
  color: #fff;
}

.half ul {
  background: #fff871;
}

.round_3p img {
  border: 4px solid var(--color4);
}

.hightlight h3 {
  font-family: "Noto Serif TC", serif;
  font-weight: 700;
  font-size: var(--font-size-M);
}

@media screen and (max-width: 991px) {
  .round_3p {
    margin-bottom: 60px !important;
  }
}
@media screen and (max-width: 450px) {
  .round_3p {
    margin-bottom: 30px !important;
  }
}