@charset "UTF-8";
/* ==== 宣告 全域設定 ==== */
:root {
  --line-height-default: 2;
  --padding-spac: 24px;
  --container-1330: calc(1330px + (var(--padding-spac) * 2));
  --container-1440: calc(1440px + (var(--padding-spac) * 2));
  --g-sec: 5dvh;
  --header-h: 70px;
  --logo-w: 80px;
  --border-r: 10px;
}

@media (max-width: 1199px) {
  :root {
    --logo-w: 55px;
  }
}
@media (max-width: 767px) {
  :root {
    --line-height-default: 1.8;
    --border-r: 6px;
  }
}
/* ==== 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: auto;
}

/* pagination 點 */
.swiper-pagination {
  z-index: 5;
  bottom: calc(var(--padding-spac) * 2) !important;
  padding: 0 var(--padding-spac);
  font-size: 0;
  text-align: center;
  line-height: 0;
}
.swiper-pagination .swiper-pagination-bullet {
  display: inline-block;
  margin: 0 calc(var(--padding-spac) / 3) !important;
  padding: 0;
  width: 6px;
  height: 6px;
  opacity: 1;
  vertical-align: middle;
  border: none;
  border-radius: 100%;
  background-color: #0C8CE9;
  -webkit-transition: width 0.35s, height 0.35s, background-color 0.35s;
  transition: width 0.35s, height 0.35s, background-color 0.35s;
}
.swiper-pagination .swiper-pagination-bullet:hover, .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 12px;
  height: 12px;
  background-color: #0C8CE9;
}
@media (max-width: 1365px) {
  .swiper-pagination {
    bottom: calc(var(--padding-spac) * 0.6) !important;
  }
}
@media (max-width: 767px) {
  .swiper-pagination .swiper-pagination-bullet {
    margin: 0 calc(var(--padding-spac) / 6) !important;
  }
  .swiper-pagination .swiper-pagination-bullet:hover, .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 10px;
    height: 10px;
  }
}

/* navigation 左右箭頭 */
.swiper-aw {
  display: block;
  z-index: 5;
  top: 50%;
  margin: 0;
  width: 50px;
  height: 50px;
  font-size: 0;
  outline: none;
  border-radius: 100%;
  background-color: #fff;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.swiper-aw::after {
  display: none;
}
.swiper-aw i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 17px;
  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.swiper-button-disabled {
  cursor: not-allowed !important;
}

.swiper-button-prev {
  left: 0;
}
.swiper-button-prev i {
  -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.swiper {
  padding-bottom: 0;
}
.is-prevent-btn .swiper-aw, .is-prevent-btn .cursor-aw {
  display: none !important;
  pointer-events: none;
}
.is-prevent-btn .hoverable-area {
  cursor: default;
}

@media (max-width: 575px) {
  .swiper-pagination {
    text-align: center;
  }
}
/* index */
.i-ban .swiper-pagination .swiper-pagination-bullet {
  background-color: #fff;
}
.i-ban .swiper-pagination .swiper-pagination-bullet:hover, .i-ban .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fff;
}
@media (max-width: 767px) {
  .i-ban .swiper-pagination {
    bottom: calc(var(--padding-spac) * 5.8) !important;
  }
}