@charset "UTF-8";
.bn-btn {
  position: relative;
  cursor: pointer;
  display: var(--ui-btn-display, inline-block);
  -webkit-box-align: var(--ui-btn-ai, center);
      -ms-flex-align: var(--ui-btn-ai, center);
          align-items: var(--ui-btn-ai, center);
  -webkit-box-pack: var(--ui-btn-jc, center);
      -ms-flex-pack: var(--ui-btn-jc, center);
          justify-content: var(--ui-btn-jc, center);
  gap: var(--ui-btn-gap, 0);
  line-height: var(--ui-btn-lh, 1);
  color: var(--ui-btn-cr, #333);
  text-align: var(--ui-btn-ta, center);
  vertical-align: var(--ui-btn-va, middle);
  white-space: var(--ui-btn-ws, nowrap);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  max-width: var(--ui-btn-max, 120px);
  width: var(--ui-btn-w, 100%);
  background: var(--ui-btn-bg, transparent);
  border-radius: var(--ui-btn-radius);
  border-width: var(--ui-btn-border-w);
  border-style: var(--ui-btn-border-style);
  border-color: var(--ui-btn-border-cr);
  padding: var(--ui-btn-p, var(--ui-btn-pt, var(--ui-btn-py, 0)) var(--ui-btn-pr, var(--ui-btn-px, 0)) var(--ui-btn-pb, var(--ui-btn-py, 0)) var(--ui-btn-pl, var(--ui-btn-px, 0)));
  margin: var(--ui-btn-m, var(--ui-btn-mt, var(--ui-btn-my, 0)) var(--ui-btn-mr, var(--ui-btn-mx, 0)) var(--ui-btn-mb, var(--ui-btn-my, 0)) var(--ui-btn-ml, var(--ui-btn-mx, 0)));
  -webkit-transition-property: var(--ui-btn-trs-attr, all);
  transition-property: var(--ui-btn-trs-attr, all);
  -webkit-transition-timing-function: var(--ui-btn-trs-func, cubic-bezier(0.4, 0, 0.2, 1));
          transition-timing-function: var(--ui-btn-trs-func, cubic-bezier(0.4, 0, 0.2, 1));
  -webkit-transition-duration: var(--ui-btn-trs-time, 500ms);
          transition-duration: var(--ui-btn-trs-time, 500ms);
  isolation: isolate;
}
.bn-btn :is(.is-hover, .is-base) {
  display: block;
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
  transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
}
.bn-btn :is(.is-hover) {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

:is(.bn-btn-icon, .bn-btn-label) {
  position: relative;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .bn-btn:hover {
    color: var(--ui-btn-hover-cr, var(--ui-btn-cr, #333));
    border-color: var(--ui-btn-hover-border-cr, transparent);
    background: var(--ui-btn-hover-bg, var(--ui-btn-bg, transparent));
  }
  .bn-btn:hover .bn-btn-label :is(.is-hover, .is-base) {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  .bn-btn:hover .bn-btn-label :is(.is-hover) {
    opacity: 1;
  }
  .bn-btn:hover .bn-btn-label :is(.is-base) {
    opacity: 0;
  }
}
.bn-btn {
  --ui-btn-hover-bg: #C9C4BE;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  width: 100%;
  max-width: none;
  font-size: 15px;
  font-family: "Noto Sans TC", "El Messiri", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #fff;
  background: var(--c-btn-bg, #776b5d);
  padding: 10px 8px;
}
.bn-btn.isLight {
  --c-btn-bg: rgba(119, 107, 93, 0.4);
}

.bn-btn-gp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  position: absolute;
  z-index: 10001;
  opacity: 0;
}

.bannerindex .swiper-slide:nth-child(1) .bn-btn-gp {
  left: 50%;
  bottom: 10.449%;
  -webkit-transform: translate(-50%, 30px);
          transform: translate(-50%, 30px);
}
.bannerindex .swiper-slide:nth-child(2) .bn-btn-gp {
  right: 5.573%;
  bottom: 10.449%;
  -webkit-transform: translate(0, 30px);
          transform: translate(0, 30px);
}
.bannerindex .swiper-slide.swiper-slide-active .bn-btn-gp {
  opacity: 1;
  -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
  transition: opacity 1s ease, -webkit-transform 1s ease;
  transition: transform 1s ease, opacity 1s ease;
  transition: transform 1s ease, opacity 1s ease, -webkit-transform 1s ease;
}
.bannerindex .swiper-slide.swiper-slide-active:nth-child(1) .bn-btn-gp {
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.bannerindex .swiper-slide.swiper-slide-active:nth-child(2) .bn-btn-gp {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

@media all and (max-width: 768px) {
  .bannerindex .swiper-slide .bn-btn-gp {
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 30px);
            transform: translate(-50%, 30px);
  }
  .bannerindex .swiper-slide.swiper-slide-active:nth-child(2) .bn-btn-gp {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}
@media all and (max-width: 575px) {
  .bn-btn-gp {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}