@charset "UTF-8";
/**
 * * Allows you to use retina images at various pixel densities.
 * * Examples:
 * *
 * *   +retina(/images/mypic.jpg, 2);
 * *   +retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
 * *
 * * @param  {Value}  $path               The path to the file name minus extension.
 * * @param  {Number} $cap:    2          The highest pixel density level images exist for.
 * * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
 * * @param  {Value}  $extras: null       Any other `background` values to be added.
 * */
/**
 * * 往上適應
 * * 引用方式: +media-up($breakpoint-value)
 * */
/**
 * * 往上適應
 * * 引用方式: +media-up-num(自訂數值)
 * */
/**
 * * 往下適應
 * * 引用方式: +media-down($breakpoint-value)
 * */
/**
 * * 往下適應
 * * 引用方式: +media-up-num(自訂數值)
 * */
/**
 * * 範圍內適應
 * * 引用方式: +media-between($lower-breakpoint, $upper-breakpoint)
 * */
/**
 * * 引用方式: +lh(15,22) 前面放 line-height 的 px 值, 後面放 font-size 的 px 值（計算）
 * */
/**
 * * 引用方式: +ls(15,22) 前面放 letter-spacing 的 px 值, 後面放 font-size 的 px 值（計算）
 * */
/*  ===== firefox font weight bold 統一設定為 normal (firefox 在小字為粗體的時候會過粗) ===== */
/**
 * * 引用方式: +gradient(180deg,#fff,4%,#eee,92%)
 * */
/**
 * * margin
 * * 引用方式: +mb(15,22) 前面放 margin 的 px 值, 後面放 font-size 的 px 值
 * */
/**
 * * padding
 * * 引用方式: +pb(15,22) 前面放 padding 的 px 值, 後面放 font-size 的 px 值
 * */
slide-tab > .c-slide-tab__item {
  display: none;
}

.c-slide-tab {
  position: relative;
  display: block;
  width: 100%;
}
.c-slide-tab .swiper {
  width: 100%;
}
.c-slide-tab .-active- {
  --slide-tab-bg-color: #ffffff;
  --slide-tab-text-color: #000000;
  --slide-tab-border-color: #dddddd;
}
.c-slide-tab__item {
  width: auto;
}
.c-slide-tab__item:hover, .c-slide-tab__item:focus, .c-slide-tab__item:focus-visible, .c-slide-tab__item:focus-within {
  --slide-tab-bg-color: #ffffff;
  --slide-tab-text-color: #000000;
  --slide-tab-border-color: #dddddd;
}
.c-slide-tab__content {
  padding: 20px 39px;
  background-color: var(--slide-tab-bg-color, #f9f9f9);
  color: var(--slide-tab-text-color, #666666);
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--slide-tab-border-color, #eeeeee);
  border-bottom: none;
  font-size: 1.375rem;
  line-height: 170%;
  letter-spacing: 0.01em;
}
.c-slide-tab__nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
.c-slide-tab__nav .prev-btn,
.c-slide-tab__nav .next-btn {
  position: relative;
  pointer-events: all;
}
.c-slide-tab__nav .prev-btn button,
.c-slide-tab__nav .next-btn button {
  display: block;
  padding: 20px;
  background: #131313;
  border-radius: 50%;
  z-index: 1;
}
.c-slide-tab__nav .prev-btn.swiper-button-disabled,
.c-slide-tab__nav .next-btn.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}
.c-slide-tab__nav .prev-btn {
  transform: translateX(10px);
}
.c-slide-tab__nav .next-btn {
  transform: translateX(-10px);
}
.c-slide-tab:not(.at-start):not(.at-end) .swiper {
  -webkit-mask: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%);
}
.c-slide-tab.at-start .swiper {
  -webkit-mask: linear-gradient(90deg, transparent 0%, black 0%, black 80%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0%, black 0%, black 80%, transparent 100%);
}
.c-slide-tab.at-end .swiper {
  -webkit-mask: linear-gradient(90deg, transparent 0%, black 20%, black 100%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0%, black 20%, black 100%, transparent 100%);
}

/*# sourceMappingURL=_c-slide-tab.css.map */