@charset "UTF-8";
/* 公版用 */
body {
  background: #030b18;
}

.bg01 {
  background: none;
}

.swiper-pagination .swiper-pagination-bullet,
.swiper-pagination .swiper-pagination-bullet-active {
  background: #fff !important;
}

section .title b {
  color: #000;
  top: 56%;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 800;
  font-size: 3em;
  padding-right: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.background {
  background-image: url("https://events.cdn-tkec.tw/events_net/events_net/3c_system/images/2512_part2/kv_bg.jpg");
  background-repeat: no-repeat;
  background-position: 0 0, top;
  background-size: 100% auto;
  padding-bottom: 48.9%;
  width: 100%;
  height: 0;
  position: relative;
  margin: 0 auto 0;
  background-position: 0 45px, top;
}
.background .title {
  width: 30%;
  position: absolute;
  left: 0;
  right: 0;
  top: 8%;
  margin: 0 auto 0;
  -webkit-animation-duration: 0.85s;
          animation-duration: 0.85s;
}
.background .title img {
  -webkit-animation: light 2s infinite;
          animation: light 2s infinite;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.background .product {
  width: 40%;
  height: auto;
  position: absolute;
  top: 28vmax;
  right: 0;
  left: 0;
  margin: 0 auto 0;
  overflow: hidden;
}
.background .product .bg01 {
  padding: 2% !important;
  border: 2px solid #fff;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.background .product .swiper-pagination .swiper-pagination-bullet,
.background .product .swiper-pagination .swiper-pagination-bullet-active {
  background: #e844bb !important;
}
.background .air-icon {
  width: 12%;
  position: absolute;
  left: 23%;
  top: 44%;
  -webkit-animation: slowMove 1.4s linear infinite alternate;
          animation: slowMove 1.4s linear infinite alternate;
}

.background2 {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 0, top;
  background-size: 100% auto;
  aspect-ratio: 2000/1367;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto 0;
  z-index: -1;
}
.background2.fixed {
  position: fixed;
  z-index: -2;
  top: 0;
  background-position: 0 45px, top;
}

.banner swiper-slide {
  opacity: 0 !important;
  pointer-events: none;
}
.banner swiper-slide.swiper-slide-active {
  opacity: 1 !important;
  pointer-events: all;
}
.banner .swiper-pagination {
  bottom: 0 !important;
}

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

.gift-box li.single {
  width: 100% !important;
}

@media only screen and (max-width: 1600px) {
  .background {
    padding-bottom: 65%;
  }
  .background .title {
    width: 35%;
  }
  .background .product {
    width: 55%;
    top: 32vmax;
  }
  .background .air-icon {
    width: 13%;
    left: 19%;
    top: 43%;
  }
  .chose-box.fixed ul {
    width: 30%;
  }
}
@media only screen and (max-width: 1100px) {
  .background {
    padding-bottom: 70vw;
  }
  .background .title {
    top: 10%;
  }
  .background .product {
    width: 60%;
    top: 34vw;
  }
}
@media only screen and (max-width: 992px) {
  .background {
    background-size: 120% auto;
    background-position: -10vw 4vw, top;
    padding-bottom: 100vw;
  }
  .background .title {
    width: 55%;
    top: 6vw;
  }
  .background .product {
    width: 90%;
    top: 49vw;
  }
  .background .air-icon {
    width: 25%;
    left: 3vw;
    top: 41vw;
  }
  .background2.fixed {
    background-size: 120% auto;
    background-position: -10vw 45vw, top;
  }
  section .title b {
    top: 8.5vw;
  }
}
@media only screen and (min-width: 577px) and (max-width: 610px) {
  .background {
    padding-bottom: 115vw;
  }
}
@media only screen and (max-width: 576px) {
  .background {
    background: url("https://events.cdn-tkec.tw/events_net/events_net/3c_system/images/2512_part2/kv_bg_m.jpg") no-repeat center;
    background-size: 100% auto;
    background-position: 0 21vw, top;
    padding-bottom: 170vw;
    aspect-ratio: 750/704;
  }
  .background .title {
    width: 85%;
    top: 23vw;
  }
  .background .product {
    width: 95%;
    top: 92vw;
  }
  .background .product .swiper-pagination {
    bottom: 1vw !important;
  }
  .background .product .bg01 {
    padding: 2% 0.5% 2% 2% !important;
  }
  .background .air-icon {
    width: 34%;
    left: unset;
    top: 25vw;
    right: -5vw;
  }
  .background2 {
    background-size: 180% auto;
    background-position: -37vw 20vw, top;
  }
  section .title b {
    font-size: 1.5em;
    top: 9.5vw;
    padding-right: 5px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}
/*  共用樣式調整 */
.bg01 {
  background: none;
}

.brand-box .tab-content {
  width: 100%;
  margin: 0 auto;
}
.brand-box .tab-content .banner {
  width: 99%;
  margin: 0 auto;
}
.brand-box .tab-content .bg01 {
  margin: 0 auto 0;
}
.brand-box .tab swiper-container::part(wrapper) {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gift-box li.long {
  width: 100%;
}

.sub-box .title {
  margin: 0 auto 2%;
}

.info-box swiper-container::part(wrapper) {
  padding-left: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.discount-box .title b {
  font-weight: 500;
}

/*  電腦版其他尺寸 */
@media only screen and (max-width: 992px) {
  .brand-box .tab {
    width: 100%;
  }
  .brand-box .tab swiper-container::part(wrapper) {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .brand-box .tab swiper-slide {
    width: 31% !important;
  }
  .special-box swiper-container::part(wrapper) {
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
  }
  .special-box swiper-container swiper-slide {
    width: 31% !important;
  }
  .sub-box .title {
    margin: 0 auto 3%;
  }
}
/* 手機版 */
@media only screen and (max-width: 576px) {
  .product-box .tab {
    width: 95%;
    margin: 0 auto;
  }
  .product-box .tab .swiper-slide {
    -ms-flex-preferred-size: 44%;
        flex-basis: 44%;
  }
  .special-box swiper-container swiper-slide {
    width: 48.5% !important;
  }
  .brand-box .tab swiper-container::part(wrapper) {
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
  }
  .brand-box .tab swiper-slide {
    width: 44% !important;
  }
  .sub-box swiper-container::part(wrapper) {
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
  }
}
@media only screen and (min-width: 993px) {
  .special-box swiper-slide {
    width: 19.1% !important;
  }
  .product-box .tab swiper-slide {
    width: 21% !important;
  }
  .brand-box .tab swiper-slide {
    width: 15% !important;
  }
  .discount-box .title b {
    top: 56%;
  }
}