@charset "UTF-8";
/* ==== 宣告 全域設定 ==== */
:root {
  --line-height-default: 2;
  --gap: max(1.5vw, 10px);
  --padding-spac: 25px;
  --container-1780: calc(1780px + (var(--padding-spac) * 2));
  --container-1500: calc(1500px + (var(--padding-spac) * 2));
  --container-1418: calc(1418px + (var(--padding-spac) * 2));
  --container-1176: calc(1176px + (var(--padding-spac) * 2));
  --header-h: 100px;
  --header-spac: 25px;
  --logo-w: 200px;
  --topnav-w: 175px;
  --topnav-icon-w: 50px;
  --list-box-space: -17px;
  --list-space: 17px;
  --border-r: 10px;
  --border-r-20: 20px;
  --input-h: 54px;
}

@media (max-width: 1679px) {
  :root {
    --topnav-w: 155px;
  }
}
@media (max-width: 1439px) {
  :root {
    --header-h: 90px;
    --topnav-w: 120px;
    --topnav-icon-w: 40px;
  }
}
@media (max-width: 1365px) {
  :root {
    --list-box-space: -10px;
    --list-space: 10px;
  }
}
@media (max-width: 1279px) {
  :root {
    --logo-w: 170px;
    --border-r-20: 15px;
  }
}
@media (max-width: 991px) {
  :root {
    --header-h: 75px;
  }
}
@media (max-width: 767px) {
  :root {
    --line-height-default: 1.8;
    --list-box-space: -7.5px;
    --list-space: 7.5px;
    --border-r: 5px;
    --border-r-20: 10px;
  }
}
@media (max-width: 575px) {
  :root {
    --logo-w: 132px;
    --topnav-w: 100px;
  }
}
/* ==== swiper ==== */
/* 共用樣式 .swiper */
.swiper {
  position: relative;
  font-size: 0;
  line-height: 0;
}
.swiper .swiper-wrapper .swiper-slide {
  position: relative;
  overflow: hidden;
}
.swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* pagination 點 */
.swiper-pagination {
  z-index: 5;
  bottom: max(1.5vw, 20px) !important;
  padding: 0 10px;
  font-size: 0;
  text-align: center;
  line-height: 0;
}
.swiper-pagination .swiper-pagination-bullet {
  display: inline-block;
  margin: 0 4px !important;
  padding: 0;
  width: 10px;
  height: 10px;
  opacity: 1;
  border: none;
  border-radius: 100%;
  background-color: #ddd;
  -webkit-transition: background-color 0.35s;
  transition: background-color 0.35s;
}
.swiper-pagination .swiper-pagination-bullet:hover, .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #D90114;
}

/* scrollbar */
.swiper-scrollbar {
  left: 0 !important;
  width: 100% !important;
  height: 4px;
}

/* navigation 左右箭頭 */
.swiper-aw {
  display: block;
  z-index: 5;
  top: 50%;
  margin: 0;
  width: 60px;
  height: auto;
  font-size: 0;
  outline: none;
  border-radius: 100%;
  background-color: #8f8f8f;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: background-color 0.35s;
  transition: background-color 0.35s;
}
.swiper-aw::before {
  display: block;
  content: "";
  padding-bottom: 100%;
  width: 100%;
}
.swiper-aw::after {
  display: none;
}
.swiper-aw i {
  display: block;
  position: absolute;
  top: 50%;
  left: 52%;
  width: 22%;
  max-width: 14px;
  background: url(../images/swiper_aw.svg) no-repeat 0 0;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.swiper-aw i::before {
  display: block;
  content: "";
  padding-bottom: 178.572%;
  width: 100%;
}
.swiper-aw:hover {
  background-color: #444444;
}
.swiper-aw.swiper-button-disabled {
  pointer-events: auto;
  cursor: not-allowed !important;
}

.swiper-button-prev {
  left: 0;
}
.swiper-button-prev i {
  left: 48%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
      -ms-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}

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

/* 隱藏按鈕 */
.is-prevent-btn .control-btn {
  display: none !important;
  pointer-events: none;
}
.is-prevent-btn .swiper-aw {
  display: none;
}

/* 置中 */
.is-center .swiper {
  padding-bottom: 0 !important;
}
.is-center .swiper-wrapper {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* ==== header ==== */
.display-prod-nav .swiper-aw {
  background-color: transparent;
}
.display-prod-nav .swiper-aw i {
  background-position: 0 50%;
}

/* ==== index ==== */
@media (max-width: 1365px) {
  .i-ban .swiper-pagination {
    top: 50% !important;
    bottom: unset !important;
    left: unset;
    right: 10px;
    padding: 0;
    width: 18px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .i-ban .swiper-pagination .swiper-pagination-bullet {
    margin: 4px !important;
  }
}
@media (max-width: 767px) {
  .i-catalog .swiper-scrollbar {
    left: 6px !important;
    width: calc(100% - 12px) !important;
  }
  .i-prod .swiper-pagination {
    bottom: 10px;
    text-align: right;
  }
  .i-prod .swiper-pagination .swiper-pagination-bullet {
    margin: 0 3px !important;
  }
}
/* ==== product ==== */
/* catalog */
.prod-catalog__top .swiper-button-prev {
  left: calc((100% - 930px) / 2 - 30px);
}
.prod-catalog__top .swiper-button-next {
  right: calc((100% - 930px) / 2 - 30px);
}

.prod-article-swiper .swiper-pagination, .prod-blog-swiper .swiper-pagination {
  bottom: 0 !important;
}

@media (max-width: 1199px) {
  .prod-catalog__top .swiper-aw {
    width: 50px;
  }
  .prod-catalog__top .swiper-button-prev {
    left: 10px;
  }
  .prod-catalog__top .swiper-button-next {
    right: 10px;
  }
}
@media (max-width: 1079px) {
  .prod-catalog__top .swiper-aw {
    width: 40px;
  }
}
/* view */
.prod-view__pic .small .swiper-aw {
  width: 50px;
  background-color: transparent;
}
.prod-view__pic .small .swiper-aw i {
  background-position: 0 50%;
}
.prod-view__pic .small .swiper-button-prev {
  left: 2vw;
}
.prod-view__pic .small .swiper-button-next {
  right: 2vw;
}

.similar-swiper .swiper-pagination {
  bottom: 0 !important;
}

@media (max-width: 1079px) {
  .prod-view__pic .small .swiper-button-prev {
    left: 0;
  }
  .prod-view__pic .small .swiper-button-next {
    right: 0;
  }
}
/* ==== Helpful Tools ==== */
/* Download the APPs - Support */
.tools-video-swiper .swiper-pagination {
  bottom: 0 !important;
}