@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap");
/* 公版用 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap");
body {
  background: #fffbf1;
}
body:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("https://events.cdn-tkec.tw/events_net/events_net/office3c/images/2510/2510kv.png") no-repeat center;
  background-size: 100% auto;
  background-position: 0 45px, top;
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
}

.bg01 {
  background: none;
}

section .title {
  margin: 0 auto 1%;
}
section .title b {
  color: #f74440;
  top: 47%;
}

.floor .title {
  margin: 0 auto 1%;
}

.background {
  width: 100%;
  position: relative;
  margin: 0 auto 0;
  padding-bottom: 60%;
}
.background .title {
  width: 30%;
  position: absolute;
  left: 23%;
  top: 13%;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
}
.background .title img {
  -webkit-animation: rubberBand 0.8s linear;
          animation: rubberBand 0.8s linear;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.background .subtitle {
  width: 20%;
  position: absolute;
  right: 27%;
  top: 13%;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.background .product {
  width: 47%;
  height: 22vmax;
  position: absolute;
  top: 32vmax;
  right: 0;
  left: 0;
  margin: 0 auto 0;
  overflow: hidden;
}
.background .product .bg01 {
  padding: 2% !important;
  background: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto 0;
}
.background .product .swiper-pagination .swiper-pagination-bullet,
.background .product .swiper-pagination .swiper-pagination-bullet-active {
  background: #771011 !important;
}

.banner {
  margin: -2% auto 5%;
}
.banner .swiper-pagination {
  bottom: 0 !important;
}

.special-box .off a {
  pointer-events: none;
  cursor: auto;
}

@media only screen and (max-width: 1600px) {
  .background {
    padding-bottom: 73%;
  }
  .background .title {
    width: 35%;
    left: 19%;
  }
  .background .subtitle {
    width: 23%;
    right: 24%;
    top: 12%;
  }
  .background .product {
    width: 60%;
    height: 28vmax;
    top: 37vmax;
  }
  body:before {
    background-size: 120% auto;
    background-position: -10vw 3vw, top;
  }
}
@media only screen and (max-width: 1100px) {
  .background .product {
    width: 58%;
    height: 33vmax;
    top: 37vw;
  }
}
@media only screen and (max-width: 992px) {
  .background {
    padding-bottom: 115vw;
  }
  .background .title {
    width: 55%;
    top: 17vw;
    left: 4vw;
  }
  .background .subtitle {
    width: 35%;
    right: 5vw;
    top: 17vw;
  }
  .background .product {
    width: 90%;
    height: auto;
    top: 62vw;
  }
  body:before {
    background-size: 120% auto;
    background-position: -10vw 4vw, top;
  }
}
@media only screen and (min-width: 577px) and (max-width: 610px) {
  .background {
    padding-bottom: 125vw;
  }
  .background .board {
    width: 130% !important;
    left: -10vw;
    top: 59vw;
  }
}
@media only screen and (max-width: 576px) {
  .background {
    padding-bottom: 175vw;
  }
  .background .title {
    width: 58%;
    top: 34vw;
    left: 0;
  }
  .background .subtitle {
    width: 42%;
    right: 1vw;
    top: 36vw;
  }
  .background .product {
    width: 100%;
    top: 93vw;
  }
  .background .product .swiper-pagination {
    bottom: 1vw !important;
  }
  .background .board {
    width: 160% !important;
  }
  body:before {
    background-size: 180% auto;
    background-position: -49vw 21vw, top;
  }
}
/*  共用樣式調整 */
.bg01 {
  background: #ec607b;
}

.sale-box .pro {
  padding-bottom: 6px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.chose-box.fixed {
  width: 100%;
  height: auto;
  position: fixed;
  background: rgba(0, 0, 0, 0.7803921569);
  top: 45px;
  left: 0;
  right: 0;
  margin: 0 auto 0;
  min-width: 100%;
  max-width: 100%;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 99;
}
.chose-box.fixed ul {
  width: 20%;
}

.gift-box li .info {
  width: 32%;
}

.special-box swiper-slide.off:after {
  content: "已用罄" !important;
}

/*  電腦版其他尺寸 */
@media only screen and (max-width: 992px) {
  .floor .tab swiper-container::part(wrapper) {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .floor .tab swiper-slide {
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
  .tab8-box .tab swiper-container::part(wrapper) {
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
  }
  .special-box swiper-slide {
    width: 32% !important;
  }
  .special-box swiper-container::part(wrapper) {
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
  }
  .chose-box.fixed {
    background-size: 180% auto;
  }
  .chose-box.fixed ul {
    width: 65%;
  }
}
/* 手機版 */
@media only screen and (max-width: 576px) {
  .tab1-box .tab swiper-container::part(wrapper),
  .tab2-box .tab swiper-container::part(wrapper),
  .tab3-box .tab swiper-container::part(wrapper),
  .tab4-box .tab swiper-container::part(wrapper) {
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
  }
  .tab8-box .tab swiper-slide,
  .tab2-box .tab swiper-slide,
  .tab14-box .tab swiper-slide {
    width: 44% !important;
  }
  .special-box swiper-slide {
    width: 48% !important;
  }
  .gift-box li .info {
    width: 35%;
  }
  .gift-box li.long .info {
    width: 35%;
  }
  .chose-box.fixed {
    top: 81px;
    padding: 5px 0 5px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-size: 260% auto;
  }
  .chose-box.fixed ul {
    width: 85%;
  }
}
@media only screen and (min-width: 993px) {
  .gift-box li.long {
    width: 203%;
  }
  .special-box swiper-slide {
    width: 19.2% !important;
  }
}