@charset "utf-8";

/* CSS Document */
/* html{scroll-behavior: smooth;} */
body {
  font-family: var(--fontEN), var(--fontZH), sans-serif;
  font-size: 16px;
  line-height: 150%;
  color: var(--txt600);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a {
  color: var(--txt600);
  text-decoration: none;
  -o-transition: var(--transition);
  -webkit-transition: var(--transition);
  -moz-transition: var(--transition);
  transition: var(--transition);
}
a:hover {
  color: var(--txt600);
}
* {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}
img {
  max-width: 100%;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 2px solid var(--mainColor) !important;
  border-color: transparent;
}
[readonly],
[readonly]:focus,
[disabled],
[disabled]:focus {
  outline: none !important;
  border-color: var(--gray300) !important;
  background: var(--gray200) !important;
  color: var(--txt400) !important;
}
/* .formSelect [readonly],.formSelect [readonly]:focus{outline:inherit!important;border-color:inherit!important;background:inherit!important;color:inherit!important;} */
button {
  border: none;
  background: transparent;
  padding: unset;
}
*:focus,
.active_login_all:focus,
.searchKeyWord input:focus {
  outline: none !important;
}

/* loading動畫-首頁 */
#loader {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#loader::after {
  content: "";
  z-index: -1;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  transition: 1s cubic-bezier(0.42, 0, 0.58, 1);
}
.body--loading {
  overflow: hidden;
  height: 100%;
}

/* loading動畫-內頁 */
.loaderInside {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mainColor);
  animation: insLoad 0.25s ease-in-out 1s forwards;
}
.loaderInside__logo {
  position: relative;
  z-index: 2;
  animation: insLoad-logo-start 0.5s ease-in-out 0.25s forwards,
    insLoad-logo-end 0.25s ease-in-out 1.25s forwards;
  opacity: 0;
}
.loaderInside__cir {
  position: absolute;
  z-index: 1;
  width: 500vw;
  aspect-ratio: 1;
  background: var(--mainColor);
  border-radius: 100%;
  animation: insLoad-cir 0.75s ease-in-out 0.75s forwards;
}
.loaderInside__cir::before,
.loaderInside__cir::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 100%;
}
.loaderInside__cir::before {
  width: 45%;
  background: #fff;
  z-index: 2;
}
.loaderInside__cir::after {
  width: 25%;
  background: var(--mainColor);
  z-index: 3;
}
@keyframes insLoad {
  0% {
    background: rgba(243, 109, 32, 1);
  }
  100% {
    background: rgba(243, 109, 32, 0);
  }
}
@keyframes insLoad-logo-start {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes insLoad-logo-end {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes insLoad-cir {
  0% {
    width: 500vw;
  }
  100% {
    width: 0vw;
  }
}
/* 全域設定 */
:root {
  --containerW: calc(1210px + var(--containerPadding));
  --containerW-fluid: 1600px;
  --containerPadding: 1.25rem;
  --ftMargin: clamp(1.25rem, 3.75vw, 3.75rem);
  --ftPadding: 3.75rem;
  --ftPadding-y: 3.75rem;
  --transition: all 0.3s ease-out;
  --transition-m: all 0.5s ease-out;
  --transition-long: all 1s ease-out;
  --mainColor: #f36f20;
  --fontZH: "Noto Sans TC";
  --fontEN: "Roboto";
  /******************************** Color ********************************/
  /* Primary基本的 */
  --prLight: #fdebd8;
  --prDefault: #ffce85;
  --prDark: #f18d00;
  --prBrandr: var(--mainColor);
  /* Secondary／dot 次要 */
  --sec01: #dbf4c4;
  --sec02: #52b641;
  --sec03: #fdce06;
  --sec04: #e60012;
  --sec05: #ff9ba3;
  --sec06: #8a73b4;
  --warningColor: #eb5757;
  /******************************** Grey & Text ********************************/
  /* Grey */
  --white: #fff;
  --gray100: #f2f2f2;
  --gray200: #e7e7e7;
  --gray300: #d4d4d4;
  --gray400: #bbbbbb;
  --gray500: #959595;
  --gray600: #6a6a6a;
  --gray700: #434343;
  --gray800: #2b2b2b;
  --black: #222222;
  /* Text */
  --txt900: #101828;
  --txt800: #2b2b2b;
  --txt600: #434343;
  --txt400: #777777;
  --txt300: #a8a8a8;
  --txt200: #d3d3d3;
  --txtBrand: var(--mainColor);
  /******************************** Shadow & Border ********************************/
  --shadowCard: 0 0.5rem 1.125rem rgba(0, 0, 0, 0.1);
  --shadowCard_hover: 0 0.5rem 1.125rem rgba(243, 109, 32, 0.25);
  --shadowBtn: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.1);
  --shadowCard_m: -0.25rem 0.5rem 1.125rem rgba(0, 0, 0, 0.05);
  --shadowCard_hover_m: -0.25rem 0.5rem 1.125rem rgba(243, 109, 32, 0.25);
  /******************************** Head ********************************/
  --h1: 700 2.5rem/150% var(--fontZH);
  /* 主標題 */
  --h1_spacing: 2px;
  --h2: 700 2rem/135% var(--fontZH);
  /*副標題*/
  --h2_spacing: 0.04rem;
  --h3: 700 1.75rem/150% var(--fontZH);
  /*次要標題*/
  --h3_spacing: 2px;
  --h4: 700 1.5rem/135% var(--fontZH);
  /*小標題*/
  --h4_spacing: 0.03rem;
  --h5: 500 1.25rem/150% var(--fontZH);
  /*分類標題*/
  --h5_spacing: 1px;
  --discount: 400 1rem/150% var(--fontZH);
  --discount_spacing: 0px;
  --link: 400 1rem/150% var(--fontZH);
  --link_spacing: 0px;
  /******************************** Decoration & Body ********************************/
  /* Deco 尚不知用在哪*/
  --deco1: 700 4rem/120% var(--fontZH);
  --deco1_spacing: 0px;
  --deco2: 700 3.75rem/150% var(--fontZH);
  --deco2_spacing: 1px;
  --deco3: 700 2.5rem/120% var(--fontZH);
  --deco3_spacing: 2px;
  --deco4: 700 1.125rem/135% var(--fontZH);
  --deco4_spacing: 0px;
  --deco5: 500 1.25rem/150% var(--fontZH);
  /*Kit 沒有*/
  --deco5_spacing: 0.0125rem;
  /*Kit 沒有*/
  /* Body 尚不知用在哪*/
  --body1: 400 1.125rem/150% var(--fontZH);
  /* --body1_spacing:2px; 原始Kit*/
  --body1_spacing: 0.01em;
  --body2: 700 1rem/135% var(--fontZH);
  --body2_spacing: 0px;
  --body3: 400 1rem/150% var(--fontZH);
  --body3_spacing: 0px;
  --body4: 400 0.875rem/150% var(--fontZH);
  --body4_spacing: 0.00875em;
  /* Minimum */
  --minimum: 400 0.75rem/150% var(--fontZH);
  --minimum_spacing: 0px;
  /******************************** Button ********************************/
  /* ZH */
  --btnL-zh: 700 1rem/135% var(--fontZH);
  --btnL-zh_spacing: 0.03rem;
  --btnM-zh: 500 15px/135% var(--fontZH);
  --btnM-zh_spacing: 0.02813rem;
  --btnS-zh: 400 14px/150% var(--fontZH);
  --btnS-zh_spacing: 0.00875rem;
  /* EN */
  --btnL-en: 700 1rem/135% var(--fontEN);
  --btnL-en_spacing: 0px;
  --btnS-en: 700 12px/135% var(--fontEN);
  --btnS-en_spacing: 0px;
  /******************************** icon ********************************/
  --icon_angleR_orange: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33 28.004c0 .203-.032.392-.096.567a1.4 1.4 0 0 1-.329.499l-7.464 7.572c-.23.233-.519.352-.867.358a1.165 1.165 0 0 1-.883-.358c-.24-.244-.361-.54-.361-.888s.12-.644.36-.888l6.766-6.862-6.765-6.862a1.23 1.23 0 0 1-.353-.88 1.2 1.2 0 0 1 .353-.896c.24-.244.532-.366.875-.366.343 0 .634.122.875.366l7.464 7.572a1.4 1.4 0 0 1 .33.499c.063.175.095.364.095.567z' fill='%23F36F20'/%3E%3C/svg%3E");
  --icon_angleR_black: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33 28.004c0 .203-.032.392-.096.567a1.4 1.4 0 0 1-.329.499l-7.464 7.572c-.23.233-.519.352-.867.358a1.165 1.165 0 0 1-.883-.358c-.24-.244-.361-.54-.361-.888s.12-.644.36-.888l6.766-6.862-6.765-6.862a1.23 1.23 0 0 1-.353-.88 1.2 1.2 0 0 1 .353-.896c.24-.244.532-.366.875-.366.343 0 .634.122.875.366l7.464 7.572a1.4 1.4 0 0 1 .33.499c.063.175.095.364.095.567z' fill='%232B2B2B'/%3E%3C/svg%3E");
  --icon_plus_orange: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 9v12M9 15h12' stroke='%23F36F20' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon_plus_black: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 9v12M9 15h12' stroke='%23D4D4D4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon_minus_orange: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 15h12' stroke='%23F36F20' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon_minus_black: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 15h12' stroke='%23D4D4D4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon_check_ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16' fill='none'%3E%3Cpath d='M7.374 15.126a1 1 0 0 1-1.414 0L.707 9.874a1 1 0 0 1 0-1.414l.92-.92a1 1 0 0 1 1.413 0l3.627 3.627L16.96.874a1 1 0 0 1 1.414 0l.919.919a1 1 0 0 1 0 1.414l-11.92 11.92z' fill='%23F36F20'/%3E%3C/svg%3E");
  --icon_check_no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.188 15.146a1.65 1.65 0 1 1-2.334-2.334L5.687 7.98.86 3.185A1.647 1.647 0 1 1 3.185.852l4.836 4.836 4.796-4.83a1.644 1.644 0 1 1 2.325 2.325l-4.83 4.796 4.836 4.836a1.647 1.647 0 1 1-2.333 2.325L8.02 10.312l-4.834 4.834z' fill='%23606060'/%3E%3C/svg%3E");
  --icon_warning: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8v5' stroke='%23606060' stroke-linecap='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2z' fill='%23606060'/%3E%3Cpath clip-rule='evenodd' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z' stroke='%23606060'/%3E%3C/svg%3E");
  --icon_download_orange: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.32 25c.729 0 1.32.61 1.32 1.364v5.909h16.72v-5.91c0-.753.591-1.363 1.32-1.363.729 0 1.32.61 1.32 1.364v7.272C31 34.39 30.409 35 29.68 35H10.32C9.591 35 9 34.39 9 33.636v-7.272C9 25.61 9.591 25 10.32 25z' fill='%23F36F20'/%3E%3Cpath d='M18.74 20.163l-5.598-6.438a1.145 1.145 0 0 0-.88-.412 1.115 1.115 0 0 0-.896.412c-.244.28-.366.62-.366 1.02s.122.74.366 1.022l7.572 8.708c.305.35.66.525 1.066.525s.761-.175 1.066-.525l7.572-8.709c.233-.268.352-.605.358-1.011.005-.406-.114-.75-.358-1.03-.244-.281-.54-.421-.888-.421s-.644.14-.888.42l-5.599 6.44-.003-13.71c0-.413-.121-.758-.363-1.037A1.146 1.146 0 0 0 20 5c-.359 0-.659.14-.9.417-.243.279-.364.624-.364 1.036l.004 13.71z' fill='%23F36F20'/%3E%3C/svg%3E");
  --icon_download_black: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.32 25c.729 0 1.32.61 1.32 1.364v5.909h16.72v-5.91c0-.753.591-1.363 1.32-1.363.729 0 1.32.61 1.32 1.364v7.272C31 34.39 30.409 35 29.68 35H10.32C9.591 35 9 34.39 9 33.636v-7.272C9 25.61 9.591 25 10.32 25z' fill='%23000000'/%3E%3Cpath d='M18.74 20.163l-5.598-6.438a1.145 1.145 0 0 0-.88-.412 1.115 1.115 0 0 0-.896.412c-.244.28-.366.62-.366 1.02s.122.74.366 1.022l7.572 8.708c.305.35.66.525 1.066.525s.761-.175 1.066-.525l7.572-8.709c.233-.268.352-.605.358-1.011.005-.406-.114-.75-.358-1.03-.244-.281-.54-.421-.888-.421s-.644.14-.888.42l-5.599 6.44-.003-13.71c0-.413-.121-.758-.363-1.037A1.146 1.146 0 0 0 20 5c-.359 0-.659.14-.9.417-.243.279-.364.624-.364 1.036l.004 13.71z' fill='%23000000'/%3E%3C/svg%3E");
  --icon_link_orange: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.724 7.667L17.391 1m0 0h-4.445m4.445 0v4.444m0 5.334v4.444A1.778 1.778 0 0 1 15.613 17H3.168a1.778 1.778 0 0 1-1.777-1.778V2.778A1.778 1.778 0 0 1 3.168 1h4.445' stroke='%23F36F20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon_link_black: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.724 7.667L17.391 1m0 0h-4.445m4.445 0v4.444m0 5.334v4.444A1.778 1.778 0 0 1 15.613 17H3.168a1.778 1.778 0 0 1-1.777-1.778V2.778A1.778 1.778 0 0 1 3.168 1h4.445' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --tb-radius: 0.625rem;
}

/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/
.alertLine {
  border-color: var(--warningColor) !important;
  border-width: 2px !important;
}
.alertTxt {
  font: var(--minimum);
  letter-spacing: var(--minimum_spacing);
  color: var(--warningColor);
}
.red {
  color: var(--warningColor);
}
.mainColor {
  color: var(--mainColor) !important;
}
.discountTxt {
  font: var(--discount);
  letter-spacing: var(--discount_spacing);
  color: var(--txt200);
  text-decoration: line-through;
}
.smailTxt {
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
  color: var(--txt400);
}
.figureBox {
  margin-top: 0.75rem;
}
.figureBox figcaption {
  margin-top: 0.75rem;
}
.aLink {
  text-decoration: underline;
  text-decoration-thickness: 5%;
  text-underline-offset: 15%;
}

.olComm,
.ulComm {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.olComm > li,
.ulComm > li {
  margin-bottom: 1rem;
}
ul {
  list-style-type: disc;
}

/* 間距 */
.mt-x3 {
  margin-top: 0.75rem;
}

/* 卷軸 */
.scrollbar {
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 50vh;
}
.scrollbar::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}
.scrollbar::-webkit-scrollbar {
  width: 5px;
  background-color: rgba(0, 0, 0, 0);
}
.scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--gray300);
}

/* 回頂端 */
#goTop {
  cursor: pointer;
  text-align: center;
  color: #ccc;
  transition: var(--transition);
  width: 56px;
}
#goTop span {
  display: block;
  font-size: 0.75rem;
  line-height: 120%;
  color: var(--black);
  font-weight: 500;
}

/*按鈕*/
.btnWrap {
  margin: 2rem 0 0;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.btnWrap--nowrap {
  flex-wrap: nowrap;
}
.btnWrap .--full {
  flex: 1;
}

.btnStyle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: 3em;
  overflow: hidden;
  background: var(--mainColor);
  color: var(--white);
  text-align: center;
  font: var(--btnM-zh);
  letter-spacing: var(--btnM-zh_spacing);
  border: none;
}
.btnStyle--back::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1rem;
  height: 1rem;
  background: var(--icon_angleR_black) no-repeat center/auto 300%;
  filter: brightness(10);
  transform: rotate(180deg);
}
.btnStyle--back::after {
  display: none;
}
.btnStyle--right::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1rem;
  aspect-ratio: 1; /* height:1rem; */
  background: var(--icon_angleR_black) no-repeat center/auto 300%;
  filter: brightness(10);
}
.btnStyle.--download::after {
  background-image: var(--icon_download_orange);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 300%;
}
.btnStyle.--download.--bgSize-130::after {
  background-size: 130%;
}
.btnStyle.--down::after {
  background: var(--icon_down_orange) no-repeat center/auto 300%;
}
.btnStyle.--link::after {
  background: var(--icon_link_orange) no-repeat center/auto 100%;
}
.btnStyle--line {
  background: transparent;
  color: var(--mainColor);
  border: solid 1px var(--mainColor);
}
.btnStyle--line::before,
.btnStyle--line::after {
  filter: inherit;
}
.btnStyle--line.btnStyle--back::before {
  background: var(--icon_angleR_orange) no-repeat center/auto 300%;
}
.btnStyle--line.btnStyle--right::after {
  background: var(--icon_angleR_orange) no-repeat center/auto 300%;
}
/* .btnStyle--line.--download::after{background:var(--icon_down_orange)no-repeat center/auto 300%;} */
.btnStyle--line.--down::after {
  width: 1.25em;
  background: url("../images/all/icon/arrow_forward.svg") no-repeat
    center/contain;
  transform: rotate(180deg);
}

.btnStyle:hover {
  color: #fff;
  box-shadow: var(--shadowCard_hover);
  background: var(--mainColor);
}
.btnStyle:hover::before,
.btnStyle:hover::after {
  filter: brightness(10);
}

.subBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 10rem;
  max-width: 100%;
  padding: clamp(0.675rem, 2vw, 1rem) 1rem;
  border-radius: 0.75rem;
  background: transparent;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  border: solid 1px var(--gray300);
  color: var(--txt600);
}
.subBtn:hover {
  background: var(--mainColor);
  color: #fff;
}

/*RWD編輯器表格(X捲軸)*/
.tableContainer table td {
  min-width: 100px; /* padding:5px; */ /* border:1px solid #ccc; */ /* white-space:inherit; */
}
@media screen and (max-width: 768px) {
  .tableContainer {
    width: 100%;
    overflow-x: scroll;
    overflow-y: auto;
    _overflow: auto;
    margin: 0 0 1em;
  }
}

/* submit-loading */
.load-wrapp {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  top: 0;
  left: 0;
  z-index: 99999;
}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading span {
  color: #fff;
  font-size: 25px;
  margin-top: 40px;
  display: table;
}
.spinner {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
.bubble-1,
.bubble-2 {
  position: absolute;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: #fff;
}
.bubble-2 {
  top: auto;
  bottom: 0;
}
.loading .spinner {
  animation: loadingI 2s linear infinite;
}
.loading .bubble-1,
.loading .bubble-2 {
  -webkit-animation: bubble 2s ease-in-out infinite;
  animation: bubble 2s ease-in-out infinite;
  -moz-animation: bubble 2s ease-in-out infinite;
  -o-animation: bubble 2s ease-in-out infinite;
}
.loading .bubble-2 {
  animation-delay: -1s;
}
/* animation:loadingI */
@-o-keyframes loadingI {
  100% {
    transform: rotate(360deg);
  }
}

@-moz-keyframes loadingI {
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loadingI {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loadingI {
  100% {
    transform: rotate(360deg);
  }
}

/* bubble */
@-o-keyframes bubble {
  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

@-moz-keyframes bubble {
  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

@-webkit-keyframes bubble {
  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

@keyframes bubble {
  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

/* submit-loading END*/

/*---------------------- 頁面開始 ----------------------*/
/*!===全頁佈局*/
.wrapper {
  padding: 2rem 0;
}
.blockHeight {
  display: block;
  padding: 5rem 0;
}
.blockHeight--pageOutside .blockHeight + .blockHeight {
  padding-top: 0;
}
.container {
  max-width: var(--containerW);
  padding-left: var(--containerPadding);
  padding-right: var(--containerPadding);
}
.container-fluid {
  margin-left: var(--ftMargin);
  margin-right: var(--ftMargin);
  padding-left: var(--containerPadding);
  padding-right: var(--containerPadding);
  width: auto; /* width: 100%; */
}
.picBox {
  display: block;
  margin-bottom: 0;
  transition: 0.3s all;
  overflow: hidden;
}
.picBox img {
  transition: var(--transition);
}
.picBox--radius {
  border-radius: 2rem;
  overflow: hidden;
}
.picBox--radius img {
  width: 100%;
}
.picBox--border {
  border: solid 1px var(--gray200);
}
.--noShadow {
  box-shadow: none !important;
}
.picBox.--shadow {
  box-shadow: -0.25rem 0.5rem 1.125rem 0 rgba(0, 0, 0, 0.1);
}

a:hover .picBox img,
a.picBox:hover img {
  transform: scale(1.05);
}
.--pc {
  display: block;
}
.--mb,
table.--mb {
  display: none;
}
table.--pc {
  display: table;
}

.ratio--1x1 {
  aspect-ratio: 1;
}

/* 編輯器 */
/*提醒:編輯器插入的圖需做以下設定，圖才不會變形*/
.tx01 {
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  font-weight: 400;
}
.tx01 > * + * {
  margin-top: 2rem;
}
.tx01__uploadImg {
  border-radius: 2rem;
  overflow: hidden;
}
.tx01__uploadImg img {
  width: 100%;
}
.tx01__uploadImg .mb {
  display: none;
}

.tx01 a {
  color: var(--mainColor);
  text-decoration: underline;
  font: var(--link);
  letter-spacing: var(--link_spacing);
}
.tx01 a[href^="http"] {
  word-break: break-word;
}
.tx01 img {
  max-width: 100%;
  height: auto !important;
}
.tx01__editor p:last-child {
  margin-bottom: 0;
}

.tx01 ol ol {
  list-style-type: lower-alpha;
}
.tx01 table {
  width: 100% !important;
  border-collapse: collapse;
  border-spacing: 0;
}
.tx01 tbody,
.tx01 td,
.tx01 tfoot,
.tx01 th,
.tx01 thead,
.tx01 tr {
  border-color: inherit;
  border-style: inherit;
  border-width: inherit;
  border: 1px solid #9e9e9e !important;
  padding: 0.125rem;
}
.tx01 th {
  background: var(--gray100);
  font-weight: 700;
  text-align: center;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--txt800);
}
.h1 {
  font: var(--deco1);
  letter-spacing: var(--deco1_spacing);
  margin-bottom: 2rem;
}
.h2 {
  font: var(--deco2);
  letter-spacing: var(--deco2_spacing);
  margin-bottom: 2rem;
}
.h3 {
  font: var(--deco3);
  letter-spacing: var(--deco3_spacing);
  margin-bottom: 2rem;
}
.h4 {
  font: var(--deco4);
  letter-spacing: var(--deco4_spacing);
  margin-bottom: 2rem;
}
.h5 {
  font: var(--deco5);
  letter-spacing: var(--deco5_spacing);
  margin-bottom: 1.25rem;
}
.h6 {
  margin-bottom: 1.25rem;
}
* + .h1,
* + .h2,
* + .h3,
* + .h4,
* + .h5,
* + .h6 {
  margin-top: 2rem;
}

/* !===共用：圖片圓形區塊 */
.picRoundBlock {
  position: relative;
  background: #fff;
  border-radius: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 3rem);
  padding: clamp(1.5rem, 2.5vw, 3rem);
  box-shadow: var(--shadowCard);
}
.picRoundBlock__box {
  text-align: center;
}
.picRoundBlock__box[href]:hover {
  color: var(--mainColor);
}
.picRoundBlock__box .img {
  width: clamp(100px, 7vw, 132px);
}
.picRoundBlock__box .name {
  font: var(--h5);
  letter-spacing: var(--h5_spacing);
  margin-top: 0.5rem;
  word-break: break-word;
}
.picRoundBlock--hasBall::before {
  content: "";
  z-index: -1;
  position: absolute;
  right: 60%;
  bottom: 60%;
  width: clamp(150px, 30vw, 20rem);
  aspect-ratio: 1;
  background: url(../images/p4_1_1/bg-ball.png) no-repeat center/contain;
  opacity: 0;
  animation: decoMoving 3s cubic-bezier(0.5, 0, 0.5, 1) both infinite;
  animation-delay: 0.25s;
}
.animated .picRoundBlock--hasBall::before {
  opacity: 1;
}

/* !===共用：關鍵字搜尋 */
.searchKeyWordToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  aspect-ratio: 1;
  background: var(--mainColor);
  border-radius: 100%;
  cursor: pointer;
}
.searchKeyWordToggle img {
  filter: brightness(10);
}
.searchKeyWord {
  display: grid;
  grid-template-columns: 1fr 39px;
  padding: 0.25rem 0.5rem;
  background: #fff;
  border-radius: 3em;
  transition: var(--transition);
  border: solid 1px var(--mainColor);
  width: 320px;
}
.searchKeyWord .input {
  border: none;
  padding: 0.5rem;
  background: transparent;
}
.searchKeyWord .input::placeholder {
  color: var(--mainColor);
}
.searchKeyWord .btnGo {
  border: none;
  background: transparent;
  padding: 0;
  transition: var(--transition);
}
.searchNoData {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 330px;
}
.searchNoData .txt {
  font: var(--deco5);
  letter-spacing: var(--deco5_spacing);
}

/* !===共用：備註說明 */
.remarkBox {
  color: var(--txt400);
  margin-top: 3rem;
  padding: 0.5rem 1.25rem;
}
.remarkBox--pd0 {
  padding: 0;
}
.remarkBox--strong {
  font-weight: 700;
  color: var(--txt600);
}
p:last-child {
  margin-bottom: 0;
}
.warningBox {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.25rem;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  font-weight: 400;
  color: var(--txt400);
}
.warningBox::before {
  content: "";
  width: 1.5rem;
  aspect-ratio: 1;
  background: var(--icon_warning) no-repeat center/contain;
}
.remarkTxt {
  color: var(--txt400);
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
}

/* !===表格樣式 */
.tableStyle {
  --td-border-x: clamp(1rem, 5vw, 3rem);
  --td-border-y: 0.75rem;
  width: 100%;
  margin-bottom: 2rem;
  text-align: center;
  border: none;
}
.tableStyle--longBorder {
  --td-border-x: clamp(0px, 2vw, 1.5rem);
}
.tableStyle--flexNum th {
  width: calc(100% / var(--flexNum));
}
.tableStyle--pc {
  display: table;
}
.tableStyle--mb {
  display: none;
}
.tableStyle thead {
}
.tableStyle tbody {
}
.tableStyle tr {
}
.tableStyle th {
  padding: 1.25rem 0.75rem;
  background: var(--mainColor);
  color: #fff;
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
}
.tableStyle thead th:first-child {
  border-radius: var(--tb-radius) 0 0 var(--tb-radius);
}
.tableStyle thead th:last-child {
  border-radius: 0 var(--tb-radius) var(--tb-radius) 0;
}
.tableStyle thead th:only-child {
  border-radius: var(--tb-radius);
}
.tableStyle thead th:not(:last-child) {
  border-right: solid 1px var(--white);
}
.tableStyle tbody tr:first-child th {
  border-radius: var(--tb-radius) var(--tb-radius) 0 0;
}
.tableStyle tbody tr:last-child th {
  border-radius: 0 0 var(--tb-radius) var(--tb-radius);
}
.tableStyle tbody tr:not(:last-child) th {
  border-bottom: solid 1px var(--white);
}
.tableStyle td {
  position: relative;
  padding: 1.75rem 0.75rem;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  font-weight: 400;
}
.tableStyle td::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gray400);
}
.tableStyle td:first-child::after {
  /* width:calc(100% - var(--td-border-x)); */ /* left:var(--td-border-x); */
}
.tableStyle td:last-child::after {
  /* width:calc(100% - var(--td-border-x)); */
}
.tableStyle tr:last-child td::after {
  display: none;
}
.thBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tdBox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.tdBox--tt {
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
}

.tableStyle .icon,
.addCashTb .icon {
  width: 1rem;
  aspect-ratio: 1;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tableStyle .icon--ok,
.addCashTb .icon--ok {
  width: 1.25rem;
  background-image: var(--icon_check_ok);
}
.tableStyle .icon--no,
.addCashTb .icon--no {
  background-image: var(--icon_check_no);
}

/* 選單 */
.navbar {
  --color: var(--gray500);
  --bs-navbar-nav-link-padding-x: 1.5rem;
  justify-content: flex-end;
  padding: 1rem 2.5rem;
  transition: var(--transition);
}
.brandLogo--s {
  display: none;
}
.navbar .navbar__block--brand {
  display: flex;
  align-items: flex-end;
  margin: 0 auto 0 0;
}
.navbar__brand img {
  height: 40px;
}
.navbar .navbar__block--nav {
  display: none;
}
.navbar .navbar__block--tool {
  text-align: right;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.navbar-nav .nav-link {
  font-weight: 700;
  color: var(--color);
}
.navbar .navLinkPic {
  object-fit: cover;
  background-image: var(--defaultImg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}
.navLinkPic.--icash-2 {
  aspect-ratio: 92 /20;
}
.navLinkPic.--icash-pay {
  aspect-ratio: 101 /20;
}
.navbar .navLinkPic img {
  height: 20px;
  opacity: 0;
}
.navLinkIcon {
  border-radius: 100%;
  border: solid 1px transparent;
  display: block;
}
.navbar-brand {
  display: inline-block;
  margin: 0 3rem 0 0;
  padding: 0;
  width: 110px;
}
.navbar-brand .brandLogo {
  width: 100%;
}
.navbar--fixed {
  background: #fff;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.navbar--fixed .brandLogo {
  display: none;
}
.navbar--fixed .brandLogo--s {
  display: block;
  height: 50px;
}
.navbar--fixed .navbar__block--brand {
  text-align: left;
}
.navbar--fixed .navbar__block--brand .navbar-brand {
  width: auto;
  vertical-align: middle;
  margin-bottom: 0.75rem;
}
.navbar--hidden {
  transform: translateY(calc(-1 * var(--body-top)));
}
.navbar--hidden:has(.menuSiteMap--isOpen) {
  transform: translateY(0);
}
.menuBig__block .navLinkPic {
  display: flex;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: var(--defaultImg);
}
.menuBig__block .navLinkPic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

/* 選單搜尋 */
.navbarSearch {
  position: relative;
  min-width: 2.5rem;
  min-height: 2.5rem;
}
.navbarSearch--mb {
  display: none;
}
.navbarSearch__toggle {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.navbarSearch__input {
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 39px;
  width: 0;
  padding: 0.25rem 0.5rem;
  background: #fff;
  border-radius: 3em;
  box-shadow: -8px 8px 20px 0 rgba(0, 0, 0, 0.1);
  transform: translateX(2rem);
  -o-transition: var(--transition);
  -webkit-transition: var(--transition);
  -moz-transition: var(--transition);
  transition: var(--transition);
}
.navbarSearch__input .input {
  border: none;
  padding: 0.5rem;
}
.navbarSearch__input .input,
.navbarSearch__input .input:focus {
  border: none;
  background: none;
  outline: none !important;
}
.navbarSearch__input .btnGo {
  border: none;
  background: transparent;
  padding: 0;
  opacity: 0;
  transition: var(--transition);
  transition-delay: 0.2s;
}
.navbarSearch__input.--isOpen {
  opacity: 1;
  width: 253px;
  transform: translateX(0);
  pointer-events: inherit;
}
.navbarSearch__input.--isOpen .btnGo {
  opacity: 1;
  transition-delay: 0;
}

/* 選單下拉開合 */
.dropdown-item {
  color: var(--txt800);
  transition: var(--transition);
  padding: 0.75rem 1rem;
  border-bottom: solid 1px var(--gray300);
  font-weight: 500;
}
.dropdown-menu__box:last-child > .dropdown-item,
.dropdown-menu__box__box .dropdown-item:last-child {
  border-bottom: none;
}
.dropdown-menu__box--isOpen > .dropdown-item {
  background: transparent;
  color: var(--txtBrand) !important;
}
.dropdown-toggle::after {
  height: 8px;
  aspect-ratio: 1;
  margin-left: 0.5em;
  border: none;
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  -webkit-transform: rotate(45deg) translate(6px, -6px);
  transform: rotate(45deg) translate(0, 0);
}
.dropdown-menu__box--hasSubmenu > .dropdown-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0.5rem;
}
.dropdown-menu__box--hasSubmenu > .dropdown-item::after {
  content: "";
  width: 30px;
  height: 30px;
  background-image: var(--icon_angleR_black);
  background-size: contain;
  background-position: center;
}
.dropdown-menu__box--hasSubmenu.dropdown-menu__box--isOpen
  > .dropdown-item::after {
  background-image: var(--icon_angleR_orange);
}

/* 漢堡選單 */
.menuToggle {
  position: relative;
  z-index: 99999999;
  display: inline-block;
  vertical-align: middle;
  border: 2px solid transparent;
  background: transparent;
  padding: 0;
}
.menuToggle:focus {
  outline: none !important;
}
.menuToggle:hover {
  border-color: var(--mainColor);
}
.menuToggle--isOpen {
  display: none;
  background: url(../images/all/icon/close.svg) no-repeat center/24px;
}
.menuToggle--isOpen img {
  opacity: 0;
}
.menuSiteMap {
  --color: var(--black);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4rem);
  z-index: 99999;
  position: fixed;
  left: 1rem;
  right: 1rem;
  top: 1rem;
  height: 60vh;
  max-height: calc(100vh - 1rem);
  padding: 2rem;
  border-radius: 1.5rem;
  background: #fff;
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
  transition: var(--transition-m);
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
}
.menuSiteMap--isOpen {
  pointer-events: inherit;
  opacity: 1;
  transform: translateY(0);
}
.menuBig {
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 100%;
  border-right: solid 1px #eee;
}
.menuBig .nav-link {
  width: 180px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color);
  font-weight: 500;
}
.menuBig .nav-link.active {
  text-decoration: underline;
}
.menuBig .nav-link.dropdown-toggle::after {
  transform: rotate(-45deg);
}
.menuBig__block.menuBig__block--open1 .navLinkPic {
  background-image: var(--activeImg);
}
.menuBig__block.menuBig__block--open1 .dropdown-toggle {
  color: var(--mainColor);
}
.menuBig__block.menuBig__block--open1 .dropdown-toggle::after {
  border-color: var(--mainColor);
}
.menuBig__block.menuBig__block--open1
  .dropdown-menu__box--isOpen
  > .dropdown-item {
  color: inherit !important;
}
.menuBig__block .dropdown-menu,
.menuBig__block .dropdown-item {
  border: none;
}
.menuBig__block .dropdown-item {
  justify-content: flex-start;
  padding: 0.75rem 2rem;
}
.menuBig__block--open1 .dropdown-menu {
  border-right: solid 1px #eee;
}
.menuBig__block .dropdown-menu__box {
  position: static;
}
.menuBig__block .dropdown-menu__box__box {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* 快速服務 */
.fastSv {
  z-index: 11;
  transition: 0.3s all;
}
.fastSv__title {
  position: absolute;
  top: 0;
  right: 100%;
  padding: 1rem;
  color: var(--mainColor);
  font: var(--btnL-zh);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  writing-mode: vertical-lr;
  background: #fff;
  box-shadow: var(--shadowBtn);
  border-radius: 1rem 0 0 1rem;
  line-height: 1;
  cursor: pointer;
}
.fastSv__title .txt {
  letter-spacing: 0.375em;
}
.fastIcon {
  margin: 0;
  position: relative;
}
.fastIcon--mb {
  display: none;
}
.fastIcon__pic {
  width: 1.5rem;
  aspect-ratio: 1;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transition: 0.3s all;
}
.fastSv--open .fastIcon__pic {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.fastSv__content {
  position: relative;
  z-index: 1;
  padding: 1rem;
  background: #fff;
  border-bottom-left-radius: 1.5rem;
}
.fastSvTab__list {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--gray100);
}
.fastSvTab__list__item {
  flex: 1 1 auto;
  padding: 0.75rem;
  display: inline-block;
  position: relative;
  text-align: center;
}
.fastSvTab__list__item img {
  height: 1rem;
  opacity: 0;
}
.fastSvTab__list__item.active img,
.fastSvTab__list__item:hover img {
  opacity: 1;
}
.fastSvTab__list__item.active:before,
.fastSvTab__list__item:hover:before {
  opacity: 0;
}
.fastSvTab__list__item:before {
  content: "";
  position: absolute;
  object-fit: contain;
  background-image: var(--defaultImg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 1rem;
  left: 50%;
  top: calc(50% + 1px);
  transform: translate(-50%, -50%);
}
.fastSvTab__list__item:nth-child(1):before {
  aspect-ratio: 60/13;
}
.fastSvTab__list__item:nth-child(2):before {
  aspect-ratio: 101/20;
}
.fastSvTab__list__item:after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  background: var(--mainColor);
  transition: 0.3s all;
  left: 0;
  bottom: -1px;
}
.fastSvTab__list__item.active:after,
.fastSvTab__list__item:hover:after {
  width: 100%;
}
.fastSvTab__content {
  padding: 0.5rem 0;
  margin-top: 1rem;
}
.fastSvTab__content__box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 273px;
  gap: 1.5rem 0.75rem;
}
.fastSvBtn {
  text-align: center;
  width: calc((100% - 0.75rem) / 2);
  padding: 0 0.25rem;
}
.fastSvBtn__img {
  margin: auto;
  display: flex;
  justify-content: center;
  margin-bottom: 0.25rem;
  height: 50px;
  aspect-ratio: 1;
  border: 1px solid #d9d9d9;
  border-radius: 100rem;
  position: relative;
  transition: 0.3s all;
}
.fastSvBtn__img__pic {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem;
  -webkit-filter: grayscale(1) brightness(0.32);
  filter: grayscale(1) brightness(0.32);
  transition: 0.3s all;
}
.fastSvBtn__title {
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
  transition: 0.3s all;
  white-space: nowrap;
}

/* footer 
footer {
  margin: var(--ftMargin);
  margin-top: 5rem;
  padding: var(--ftPadding-y) var(--ftPadding);
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  border-radius: 2.5rem;
  box-shadow: -8px -4px 40px 0 rgba(255, 196, 201, 0.2),
    0 10px 40px 0 rgba(255, 226, 196, 0.3);
  background: #fff;
}
.ftHead {
  display: flex;
  justify-content: space-between;
}
.ftNuv {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.ftNuvBody,
.ftNuvBody a {
  color: var(--txt400);
}
.ftNuv__box {
  padding: 0.25rem;
}
.ftNuvTitle {
  display: block;
  padding: 0.25rem;
  color: var(--mainColor);
  margin-bottom: 1rem;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
}
.ftNuvBody {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ftNuvBody__tt {
  color: var(--txt800);
  margin-bottom: 0.5rem;
  border-bottom: solid 2px var(--prDefault);
  letter-spacing: 1px;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
}
.ftNuvBody__txt {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem;
}
.ftNuvBody__txt i {
  width: 1rem;
}
.ftNuvBody__txt .txt {
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
}
.ftBottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.mediaBlock,
.appBox {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
}
.mediaBlock__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 100%;
  border: solid 1px var(--mainColor);
}

.mediaBlock__box:hover,
.mediaBlock__box:active {
  background: var(--mainColor);
}

.mediaBlock__box:hover img,
.mediaBlock__box:active img {
  -webkit-filter: grayscale(1) brightness(10);
  filter: grayscale(1) brightness(10);
}*/

/* 裝飾-浮動甜甜圈 */
.decoMoving {
}

*[class^="decoMoving__"] {
  position: absolute;
  z-index: -1;
  animation: decoMoving 3s cubic-bezier(0.5, 0, 0.5, 1)
    calc(0.75s * var(--char-index)) both infinite;
  object-fit: cover;
}

*[class^="dotMoving__"] {
  position: absolute;
  z-index: -1;
  animation: dotMoving 3s cubic-bezier(0.5, 0, 0.5, 1)
    calc(0.75s * var(--char-index)) both infinite;
}

/* 首頁KV */
.indexMain {
  overflow: hidden;
}
.indexKVZone {
  position: relative;
}
.indexKV--wrapper {
  overflow: hidden;
}
.indexKV {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  min-height: 640px;
  max-height: 640px;
}
.indexKV--inner {
  overflow: hidden;
}
.indexKV__slogan {
  position: absolute;
  top: 35%;
  margin-bottom: 0;
  transform: translateY(100%);
}
.indexKV__slogan__pic {
  width: clamp(10rem, 18vw, 18.125rem);
}
.indexKV__mainKV {
  margin-bottom: 0;
  z-index: 1;
  position: unset;
}
.indexKV__mainKV:after {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100%;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.indexKV__mainKV__pic {
  width: clamp(20rem, 95vw, 92.5rem);
}
.scrollLink {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  color: var(--mainColor);
  font-weight: 700;
  font-family: var(--fontZH), sans-serif;
  transform: translateX(-50%);
  z-index: 10;
}
.scrollLink img {
  transform: rotate(180deg);
  transition: 0.3s all;
}
.scrollLink:hover img {
  -webkit-filter: grayscale(1) brightness(0.75);
  filter: grayscale(1) brightness(0.75);
}
.indexKVZone .decoMoving__1 {
  z-index: 1;
  left: 14%;
  top: 66%;
  max-width: 340px;
  width: 45%;
}
.indexKVZone .decoMoving__2 {
  left: 0;
  top: 25%;
  max-width: 140px;
  width: 10vw;
}
.indexKVZone .decoMoving__3 {
  left: 25%;
  top: -10%;
  max-width: 250px;
  width: 20vw;
}
.indexKVZone .decoMoving__4 {
  right: 11%;
  top: 10%;
  max-width: 257px;
  width: 40vw;
}
.indexKVZone .decoMoving__5 {
  right: 0;
  top: 50%;
}
.indexKVZone .decoMoving__6 {
  right: 14%;
  top: 60%;
}
#model-3d {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  user-select: none;
}
#model-3d canvas {
  user-select: none;
}
#loading-text {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #f36f20;
}
@keyframes decoMoving {
  0%,
  100% {
    transform: translatey(0);
  }

  50% {
    transform: translatey(-1.5rem);
  }
}

.indexKV__dot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../images/index/kv_bg.png) no-repeat center/100% auto;
  animation: dotMoving 3s cubic-bezier(0.5, 0, 0.5, 1) 0.5s both infinite;
  pointer-events: none;
}

@keyframes dotMoving {
  0%,
  100% {
    transform: translatey(0);
  }

  50% {
    transform: translatey(-1rem);
  }
}

/* 輪播 */
.slickOutsite {
  position: relative;
}
.slick-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: var(--transition);
}
.slick-controls .slick-next,
.slick-controls .slick-prev {
  position: static;
  width: 56px;
  height: 56px;
  transform: none;
  display: block;
  border: 1.5px solid transparent;
  border-radius: 100%;
  transition: 0.3s all;
}
.slick-controls .slick-next:hover,
.slick-controls .slick-prev:hover {
  box-shadow: -0.125rem 0.25rem 0.8rem rgba(0, 0, 0, 0.1);
}
.slick-controls .slick-next::before,
.slick-controls .slick-prev::before {
  display: none;
}
.slick-controls .slick-counter {
  font-size: 1.125rem;
  word-spacing: 1.25rem;
}
.slick-slider:focus-visible,
.slick-slide:focus-visible {
  outline: none;
}
.sectionGroup {
  overflow: hidden;
}

/* 首頁-卡片介紹 */
.blockHeight--cardSell {
  --picBox: 50%;
  --infoBox: 50%;
  --infoBoxMax: 480px;
  position: relative;
  padding-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.blockHeight--cardSell .slick-controls {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 100%;
  z-index: 9;
  top: calc(50% + (var(--height) / 2));
  left: calc(var(--picBox) + ((var(--infoBox) - var(--infoBoxMax) - 5%) / 2));
  margin-top: 3rem;
}
.cardSellBox {
  display: flex;
  flex-wrap: wrap;
}
.cardSellBox__img {
  position: relative;
  width: var(--picBox);
  margin-left: -5%;
}
.cardSellBox__img--inner {
  background: #fff;
  box-shadow: -4px 8px 18px 0 rgba(0, 0, 0, 0.1);
  border-radius: 100rem;
  overflow: hidden;
  aspect-ratio: 1;
  object-fit: cover;
}
.cardSellCover {
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding: 2.5%;
}
.cardSellCover__pic {
  width: 100%;
  clip-path: circle(50%);
}
.cardSellBox__infor {
  width: var(--infoBox);
  max-width: var(--infoBoxMax);
  margin: auto;
}
.cardSellBox__infor .infoBox__name {
  font: var(--h2);
  letter-spacing: var(--h2_spacing);
  margin-bottom: 1.5rem;
}
.cardSellBox__infor .infoBox__txt {
  height: 2.75em;
  font: var(--h5);
  letter-spacing: var(--h5_spacing);
  margin-bottom: 0;
}
.decoMoving--cardSell .decoMoving__1 {
  top: 24%;
  right: -9%;
}
.decoMoving--cardSell .decoMoving__2 {
  top: 54%;
  right: 1%;
  width: clamp(3rem, 12vw, 12.5rem);
}
.decoMoving--cardSell .dotMoving__1 {
  right: 4%;
  top: 13%;
}
.decoMoving__icon {
  right: 4%;
  bottom: 4%;
  z-index: 2;
  aspect-ratio: 1;
  width: clamp(6.25rem, 12.5vw, 12.5rem);
}

/* 首頁-卡片介紹公告 */
.blockHeight--cardSellPost {
  position: relative;
}
.blockHeight--cardSellPost .container {
  position: relative;
}
.blockHeight--cardSellPost .container .slick-controls {
  position: absolute;
  left: 4rem;
  bottom: 5rem;
}
.cardSellPost {
  --margin: 2rem;
  margin-left: calc(var(--margin) * -1);
  margin-right: calc(var(--margin) * -1);
}
.cardSellPost__item {
  display: flex;
  padding: var(--margin);
  gap: 0.5rem;
  align-items: flex-start;
}
.cardSellPost__item .picBox {
  width: 60%;
  margin-bottom: 0;
  border-radius: 1.5rem;
  overflow: hidden;
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.75s ease-in-out;
}
.cardSellPost__item .picBox img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.cardSellPost__item .infoBox__sortTag,
.cardSellPost__item .infoBox__name,
.cardSellPost__item .infoBox__txt {
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  transition: all 0.75s ease-in-out 0.25s;
}
.cardSellPost__item .infoBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1rem;
  width: 40%;
  order: -1;
  border-radius: 1.5rem;
  padding: 5.5rem 3rem 7.5rem;
  box-shadow: -4px 8px 18px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  align-self: stretch;
}
.cardSellPost__item:hover .infoBox {
  box-shadow: var(--shadowCard_hover);
}
.cardSellPost__item .infoBox__name {
  font: var(--h2);
  letter-spacing: var(--h2_spacing);
  height: 2.75em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cardSellPost__item .infoBox__txt {
  margin-top: 0;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  font-weight: 400;
  color: var(--txt400);
  height: 4.5em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cardSellPost__item .infoBox__sortTag {
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
}
.slick-current .cardSellPost__item .picBox {
  transform: translateX(0);
  opacity: 1;
}
.slick-current .cardSellPost__item .infoBox__sortTag,
.slick-current .cardSellPost__item .infoBox__name,
.slick-current .cardSellPost__item .infoBox__txt {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.decoMoving--cardSellPost .decoMoving__1 {
  top: 70%;
  right: -8%;
  max-width: 300px;
  width: 37vw;
}
.decoMoving--cardSellPost .dotMoving__1 {
  top: 50%;
  right: -0.25%;
}

/* 首頁-頁籤輪撥 */
.bookmarkNav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin: 2rem 0;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.bookmarkNav__item a {
  display: block;
  color: var(--txtBrand);
  padding: 0.75rem 1.5rem;
  border-radius: 3em;
  font: var(--btnL-zh);
  letter-spacing: var(--btnL-zh_spacing);
  border: 1.5px solid transparent;
}
.bookmarkNav__item a.txt-en {
  font: var(--btnL-en);
  letter-spacing: var(--btnL-en_spacing);
}
.bookmarkNav__item:hover a {
  border-color: var(--mainColor);
}
.bookmarkNav__item.active a {
  background: var(--mainColor);
  color: var(--white);
}
.bookmarkContentGroup {
}
.bookmarkContent {
  position: relative;
}
.bookmarkContent:not(.showup) {
  display: none;
}
.bookmarkContent.showup,
.bookmarkContent.showup {
  display: block;
}
.bookmarkContent .slick-controls {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 3rem;
}

/* 標題 & 內頁標題Head */
.titleHead {
  display: flex;
  gap: 1.75rem;
  margin-bottom: 3rem;
}
.mainTitle {
  position: relative;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
}
.mainTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.625rem;
  height: 2.4375rem;
  background: url(../images/all/icon/info.svg) no-repeat center/contain;
  transform: translateY(-50%);
}
.mainTitle .tt {
  color: var(--txt400);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.075rem;
}
.mainTitle .sub {
  color: var(--txt400);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.0125rem;
}
.subTitle {
  margin-bottom: 1.25rem;
  padding: 1.25rem 0.75rem;
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
  background: var(--mainColor);
  color: #fff;
  border-radius: 0.5rem;
  text-align: center;
}
.innerHeadBar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(2.25rem, 3vw, 2.5rem);
  padding-bottom: 1.25rem;
  border-bottom: solid 1px var(--mainColor);
}
.innerHeadBar > :only-child,
.subHeadBar > :only-child {
  justify-content: flex-start;
}
.innerHeadBar__box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.innerHeadBar__title {
  margin-bottom: 0;
  font: var(--h3);
  letter-spacing: var(--h3_spacing);
  color: var(--txt900);
}

.innerHeadBar--sub {
  margin-bottom: 2rem;
  padding: 0;
  border-bottom: none;
}
.innerHeadBar--sub .innerHeadBar__title {
  font: var(--h4);
  letter-spacing: var(--h4_spacing);
}
.innerHeadBar--sub:has(.subNav) .innerHeadBar__title {
  flex: 1;
}
.innerHeadBar--sub .subNav {
  width: auto;
  margin: 0;
}

.subHeadBar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0 1.25rem;
}
.subHeadBar--column {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.subHeadBar__title {
  margin-bottom: 0;
  font: var(--h5);
  letter-spacing: var(--h5_spacing);
  color: var(--txt600);
}

.resultsTxt {
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  color: var(--txty400);
  font-weight: 400;
}
.resultsTxt--m {
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
}
.resultsTxt--s {
  font: var(--minimum);
  letter-spacing: var(--minimum_spacing);
}
.formSelect--innerHeadBar {
  margin-right: auto;
}

/* 社群分享 */
.shareGrid {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  justify-content: flex-end;
}
.shareGrid__box {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  aspect-ratio: 1;
  color: var(--gray500);
  font-size: 1.5rem;
  transition: var(--transition);
}
.shareGrid__box:hover {
  opacity: 0.5;
}

/* !===共用-列表card */
.infoBox {
}
.infoBox__name {
  display: block;
  font: var(--h5);
  letter-spacing: var(--h5_spacing);
  transition: var(--transition);
  margin-bottom: 0;
  word-break: break-word;
}
.infoBox__txt {
  display: block;
  margin-bottom: 0;
  margin-top: 0.5rem;
  color: var(--txt400);
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
  height: 3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.infoBox .hashtag {
  padding: 0 0.25rem;
  color: var(--txt300);
}

/* 首頁-最新活動 */
.blockHeight--ixNews {
  position: relative;
}
.newsCard {
  --margin: 0.75rem;
}
.newsCard:not(.slickCommone) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5rem calc(var(--margin) * 2);
}
.newsCard__item {
  display: block;
}
.newsCard.slickCommone {
  margin: 0;
  margin-left: calc(var(--margin) * -1);
  margin-right: calc(var(--margin) * -1);
}
.newsCard.slickCommone .newsCard__item {
  margin: 0;
  margin: 0 var(--margin);
}
.newsCard__item .picBox {
  aspect-ratio: 1;
  border-radius: 2rem;
  overflow: hidden;
  margin-bottom: 0;
  transition: 0.3s all;
}
.newsCard__item .picBox img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
}
.newsCard__item .infoBox {
  padding-top: 1rem;
}
.newsCard__item .infoBox__name {
  font: var(--body1);
  letter-spacing: var(--body1_spacing);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 3.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.decoMoving--ixNews .decoMoving__1 {
  bottom: 1%;
  left: -6%;
  max-width: 250px;
  width: 30vw;
}

/* 內頁-最新活動 */
.blockHeight--pageOutside .newsCard__item .infoBox__name {
  font: var(--deco5);
  letter-spacing: var(--deco5_spacing);
}
.blockHeight--pageOutside .newsCard__item .picBox {
  box-shadow: var(--shadowCard);
}

/* 文章/卡片的時間 日期樣式 */
.timePeriod {
  --color: var(--txtBrand);
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
  color: var(--color);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.25rem 0;
  margin-bottom: 0.25rem;
}
.timePeriod::before {
  content: "";
  width: 0.75rem;
  height: 1px;
  display: block;
  background: var(--color);
  order: 2;
}
.timePeriod .star {
  order: 1;
}
.timePeriod .end {
  order: 3;
}
.timePeriod:has(.end:empty)::before {
  display: none;
}
.timeOnly {
  padding: 0.25rem 1rem;
  border-radius: 3em;
  text-align: center;
  color: var(--mainColor);
  border: solid 2px;
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
}
.infoBox__sortTag {
  display: inline-block;
  margin-bottom: 0;
  padding: 0.25rem 1rem;
  border-radius: 3em;
  text-align: center;
  color: var(--mainColor);
  border: solid 2px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 150%;
  font: var(--btnS-en);
  letter-spacing: var(--btnS-en_spacing);
}

/* 首頁-銀行優惠 */
.cashbacksCard {
  --active_margin: 0.75rem;
  margin-left: -1rem;
  margin-right: -1rem;
}
.cashbacksCard .slick-list {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.cashbacksCard__item {
  position: relative;
  display: block;
  margin: 1.75rem var(--active_margin) var(--active_margin);
  padding: 4.5rem 1.5rem 1.5rem;
  box-shadow: var(--shadowCard);
  border-radius: 1.75rem;
}
.cashbacksCard__item .picBox {
  position: absolute;
  right: -0.5rem;
  top: -1.5rem;
  width: 128px;
  height: 128px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadowCard);
  background: #fff;
}
.cashbacksCard__item .picBox img {
  aspect-ratio: 5/3;
  object-fit: contain;
}
.cashbacksCard__item .infoBox {
  flex-direction: column;
}
.cashbacksCard__item .infoBox__name {
  display: flex;
  align-items: self-end;
  margin: 0;
}
.cashbacksCard__item .infoBox__name .big {
  color: var(--txtBrand);
  font: var(--deco2);
  letter-spacing: var(--deco2_spacing);
  line-height: 1.2;
  word-break: keep-all;
}
.cashbacksCard__item .infoBox__name .small {
  color: var(--txt800);
  font: var(--deco4);
  letter-spacing: var(--deco4_spacing);
  line-height: 1.2;
  height: 1.2em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cashbacksCard__item .infoBox__txt {
  margin: 1.75rem 0 0;
  height: 4.5em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cashbacksCard__item .timePeriod {
  margin-top: 0.75rem;
}
.blockHeight--ixCashbacks {
  overflow: hidden;
  position: relative;
}
.decoMoving--ixCashbacks .decoMoving__1 {
  right: -8%;
  top: 0;
  width: clamp(10rem, 18vw, 18.75rem);
}
.decoMoving--ixCashbacks .dotMoving__1 {
  left: 1%;
  bottom: 10%;
  width: clamp(2rem, 4.5vw, 4.5rem);
}

/* 首頁-特點 */
.blockHeight--ixFeatures {
  position: relative;
  overflow: hidden;
  padding-top: clamp(5rem, 10vw, 8rem);
}
.ixFeatures {
  position: relative;
  padding: 20rem 0 0;
}
.ixFeatures__top .kvPic {
  position: absolute;
  margin: 0;
}
.ixFeatures__top .kvPic--title {
  top: 10rem;
  right: 47%;
  transform: translateY(-50%);
}
.ixFeatures__top .kvPic--phone {
  bottom: 1rem;
  left: 45%;
}
.ixFeatures__bottom {
  position: relative;
  z-index: 1;
  list-style-type: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(5, 1fr);
  max-width: 1000px;
  width: 95%;
  margin: 0 auto;
  padding: 2.5rem 3rem;
  border-radius: 1.75rem;
  box-shadow: var(--shadowCard);
  background: #fff;
}
.ixFeaturesCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0.75rem;
  text-align: center;
  transition: 0.3s all;
  border-radius: 1.25rem;
}
.ixFeaturesCard:hover {
  box-shadow: var(--shadowCard_hover);
}
.ixFeaturesCard .infoBox__title,
.ixFeaturesCard .infoBox__txt {
  transition: 0.3s all;
}
.ixFeaturesCard .picBox {
  max-width: 100%;
  width: 4.25rem;
  margin-bottom: 0;
}
.ixFeaturesCard .infoBox {
  flex: 1;
}
.ixFeaturesCard .infoBox__title {
  margin: 0 0 0.5rem;
  font: var(--deco5);
  letter-spacing: var(--deco5_spacing);
  color: var(--txt600);
}
.ixFeaturesCard .infoBox__txt {
  margin: 0;
  font: var(--minimum);
  font-size: 0.875rem;
  color: var(--txt400);
}
.blockHeight--ixFeatures .container {
  position: relative;
}
.decoMoving--ixFeatures .decoMoving__1 {
  left: -2%;
  top: 58%;
  width: clamp(80px, 15vw, 200px);
}
.decoMoving--ixFeatures .decoMoving__2 {
  left: 2%;
  top: 39%;
  width: clamp(130px, 20vw, 250px);
}
.decoMoving--ixFeatures .decoMoving__3 {
  top: 57%;
  right: -1%;
  width: clamp(3rem, 12vw, 12.5rem);
  z-index: 0;
}
.decoMoving--ixFeatures .dotMoving__1 {
  top: 0;
  left: -5%;
}
.decoMoving--ixFeatures .dotMoving__2 {
  top: 10%;
  right: 0;
}

/* 首頁-最新卡片 */
.blockHeight--ixCards {
  position: relative;
  --titleheadbottom: 3rem;
}
.blockHeight--ixCards .titleHead {
  margin-bottom: 0;
}
.blockHeight--ixCards .slick-controls {
  position: absolute;
  right: calc((100% - var(--containerW)) / 2);
  bottom: 100%;
  margin-right: 0.75rem;
}
.blockHeight--ixCards .btnWrap {
  margin-top: 0;
}
.cardsList {
  --margin: 1.5rem;
}
.cardsList__item {
  margin: 0 var(--margin);
  padding-top: var(--titleHeadBottom);
  transition: var(--transition-m);
}
.cardsList__item .picBox {
  border-radius: 1.25rem;
  overflow: hidden;
  margin: 0;
}
.cardsList__item .picBox img {
  width: 100%;
}
.cardsList__item .infoBox {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: start;
}
.cardsList__item .infoBox__name {
  margin-bottom: 0;
  font: var(--deco5);
  letter-spacing: var(--deco5_spacing);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cardsList__item .infoBox__txt {
  margin-top: 0;
  margin-bottom: 0;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
  color: var(--txt400);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cardsList .slick-list {
  padding-left: 30%;
  padding-right: 30%;
}
.cardsList .slick-slide {
  transition: var(--transition);
}
.cardsList .slick-current .cardsList__item {
  margin-top: calc(var(--titleHeadBottom) * -1);
}
.decoMoving--ixCards .decoMoving__1 {
  right: -4%;
  top: 12%;
  width: clamp(9rem, 13vw, 13.75rem);
}

/* 首頁-訊息專區 */
.blockHeight--ixColumns {
  position: relative;
  padding-bottom: 14rem;
}
.columnsList {
  padding: 0 3.75rem;
}
.columnsList__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 3rem 1rem 0;
  border-bottom: 1px solid var(--prLight);
}
.columnsList__item::after {
  content: "";
  opacity: 0;
  position: absolute;
  right: 2rem;
  top: 50%;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background: url(../images/all/icon/arrow_forward.svg) no-repeat center/auto
    100%;
  transform: translateY(-50%) rotate(90deg);
  transition: var(--transition);
}
.columnsList__item .tt {
  height: 1.5em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font: var(--body1);
  letter-spacing: var(--body1_spacing);
  color: var(--txt800);
}
.columnsList__item:hover .tt {
  color: var(--mainColor);
}
.columnsList__item:hover::after {
  right: 0;
  opacity: 1;
}
.decoMoving--ixColumns .decoMoving__1 {
  left: -5%;
  top: 56%;
  width: clamp(5.375rem, 30vw, 250px);
}
.decoMoving--ixColumns .decoMoving__2 {
  left: 6%;
  top: 85%;
  width: clamp(5.375rem, 30vw, 200px);
}
.decoMoving--ixColumns .decoMoving__3 {
  right: 0;
  top: 16%;
  width: clamp(3rem, 5vw, 120px);
}
.decoMoving--ixColumns .decoMoving__4 {
  right: 0;
  bottom: -11%;
  width: clamp(5rem, 20vw, 200px);
}
.decoMoving--ixColumns .decoMoving__5 {
  right: 1%;
  bottom: -20%;
  width: clamp(9rem, 40vw, 360px);
}
.decoMoving--ixColumns .decoMoving__6 {
  right: 2%;
  bottom: 32%;
  width: clamp(4.375rem, 20vw, 160px);
}
.decoMoving--ixColumns .dotMoving__1 {
  left: 0;
}

/* 內頁共用 */
/* 內頁共用--banner */
.pageBanner {
  position: relative;
  display: flex;
  align-items: center;
  background: url(../images/banner/pgBanner-bg.png) no-repeat center bottom /
    cover;
  height: clamp(240px, 70vw, 360px);
  overflow: hidden;
}
.pageBanner .container-fluid {
  margin: auto;
  padding: 0 calc(var(--ftMargin) + var(--ftPadding));
  max-width: var(--containerW-fluid);
  width: 100%;
}
.bnTitle {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.bnTitle__mj {
  margin: 0;
  color: var(--mainColor);
  font: var(--h2);
  letter-spacing: var(--h2_spacing);
  transition: var(--transition-long);
  opacity: 0;
  transition-delay: 0.5s;
}
.bnTitle__sub {
  margin: 0;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  font-weight: 400;
  color: var(--txt400);
  transition: var(--transition-long);
  opacity: 0;
  transition-delay: 0.75s;
}
.pageBanner::before,
.pageBanner::after,
.pageBanner .container-fluid::before,
.pageBanner .container-fluid::after {
  content: "";
  position: absolute;
  transition: var(--transition-long);
  transition-delay: 0.5s;
}
.pageBanner::before {
  z-index: 2;
  left: 50%;
  bottom: 10%;
  width: clamp(100px, 20vw, 220px);
  aspect-ratio: 1;
  background: url(../images/banner/pgBanner-dot.png) no-repeat center/contain;
  opacity: 0;
  animation: decoMoving 3s cubic-bezier(0.5, 0, 0.5, 1) both infinite;
  animation-delay: 0.25s;
}
.pageBanner::after {
  z-index: 1;
  left: 0;
  width: 100%;
  bottom: -1px;
  height: clamp(1rem, 4vw, 100px);
  background: url(../images/banner/pgBanner-bottom.png) no-repeat center
    top/auto 100%;
}
.pageBanner .container-fluid::before {
  left: 70%;
  bottom: 55%;
  width: clamp(50px, 10vw, 150px);
  aspect-ratio: 1;
  background: url(../images/banner/pgBanner-dot2.png) no-repeat center/contain;
  opacity: 0;
  animation: decoMoving 3s cubic-bezier(0.5, 0, 0.5, 1) both infinite;
  animation-delay: 0.5s;
}
.pageBanner .container-fluid::after {
  left: 80%;
  bottom: -20%;
  width: clamp(120px, 40vw, 500px);
  aspect-ratio: 1;
  background: url(../images/banner/pgBanner-dot3.png) no-repeat center/contain;
  opacity: 0;
  animation: decoMoving 3s cubic-bezier(0.5, 0, 0.5, 1) both infinite;
  animation-delay: 0.75s;
}
.animated.pageBanner::before,
.pageBanner .container-fluid::before,
.pageBanner .container-fluid::after {
  opacity: 1;
}
.animated.pageBanner::before {
  bottom: 0;
}
.animated.pageBanner .bnTitle__mj {
  opacity: 1;
}
.animated.pageBanner .bnTitle__sub {
  opacity: 1;
}
.pageBanner--detail {
  background: url(../images/banner/pgBanner-detail-bg.png) no-repeat left
    center/cover;
  height: clamp(240px, 70vw, 285px);
}

/* 內頁共用--架構 */
.blockHeight--pageOutside {
  --aside-w: clamp(200px, 20vw, 250px);
  --gap: 4rem;
  max-width: var(--containerW-fluid);
  margin: auto;
  padding-top: 3.75rem;
  padding-left: calc(var(--ftMargin) + var(--ftPadding));
  padding-right: calc(var(--ftMargin) + var(--ftPadding));
}
.blockHeight--pageOutside::after {
  content: "";
  display: block;
  clear: both;
  overflow: hidden;
}
aside {
  position: sticky;
  top: var(--body-top);
  width: var(--aside-w);
  float: left;
}
main {
  flex: 1;
}
aside + main {
  width: calc(100% - var(--aside-w));
  padding-left: var(--gap);
  margin-left: auto;
}

/* 側選單 */
.sideNav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sideNavLink {
  display: flex;
  align-items: center;
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
  color: var(--txt400);
}
.sideNav__item--active {
}
.sideNav__item--active .sideNavLink {
  color: var(--mainColor);
  font-weight: 700;
}
.sideNav__item:has(.sideNavSub) .sideNavLink::after {
  content: "";
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  background-image: var(--icon_angleR_black);
  background-size: contain;
  background-position: center;
  transform: rotate(90deg);
}
.sideNav__item--active:has(.sideNavSub) .sideNavLink::after {
  background-image: var(--icon_angleR_orange);
}
.sideNav__item--open:has(.sideNavSub) .sideNavLink::after {
  transform: rotate(-90deg);
}
.sideNavSub {
}
.sideNavSub--pc {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.sideNavSub--mb {
  display: none;
}
.sideNavSub__link {
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
}
.sideNavSub__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.5rem;
  aspect-ratio: 1;
  background: var(--mainColor);
  border-radius: 100%;
  transform: translateY(-50%);
  opacity: 0;
  transition: var(--transition);
}
.sideNavSub__link--active,
.sideNavSub__link:hover {
  color: var(--mainColor);
}
.sideNavSub__link--active::before {
  opacity: 1;
}
.subNav {
  list-style-type: none;
  margin: 2.5rem 0;
  padding: 0;
}
.subNav__item {
  display: block;
  padding: 0.5rem 1.5rem;
  border-bottom: solid 1px transparent;
  font: var(--btnL-zh);
  letter-spacing: var(--btnL-zh_spacing);
  color: var(--txt200);
}
.subNav__item--active {
  border-color: var(--mainColor);
  color: var(--mainColor);
}
.inputGroup__box {
  position: relative;
}
.inputGroup__box--flex {
  --gap-x: 2rem;
  --gap-y: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-y) var(--gap-x);
  width: 100%;
}
.inputGroup__box--flex .input--flex1 {
  flex: 1;
}
.inputGroup__box--flex .input--w50 {
  width: calc(50% - (var(--gap-x) / 2));
}
.inputGroup__box--flex .input--w100 {
  width: 100%;
  flex: inherit;
}
.inputGroup__box--center {
  justify-content: center;
}

/* !===下拉select */
.formControlArea {
  position: relative;
  display: block;
}
.formControlArea:not(.formControlArea__name) {
  margin-top: auto;
}
.formControlArea__name {
  margin-bottom: 0.5rem;
  color: var(--txt600);
  font: var(--btnM-zh);
  letter-spacing: var(--btnM-zh_spacing);
}
.formControlArea__name .red {
  font-size: 1.125rem;
}
.formControlArea__box {
  position: relative;
}
.formControlArea__box:not(:has(.filesBox)):has(.alertLine)::after {
  content: "";
  display: block;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 1.5rem;
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_932_10006)'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z' fill='%23EB5757'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_932_10006'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
}
.formControlArea__box--flex {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.formControlArea .remarkBox {
  margin-top: 1.25rem;
}
.formControl {
  position: relative;
  display: block;
  width: 100%;
  padding: 1rem;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
  line-height: 1.5;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--txt800);
  background-color: var(--white);
  background-clip: padding-box;
  border: solid 1px var(--gray300);
  border-radius: 0.5rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.formControlArea .txt {
  margin-top: 0.5rem;
  color: var(--txt800);
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
}
.formControlArea .alertTxt {
  margin-top: 0.5rem;
}
.formSelect {
  position: relative;
}
.formSelect .formControlArea {
  margin-top: 0;
}
.formSelect .formControlArea__box::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  width: 2rem;
  height: 2rem;
  background: var(--icon_angleR_black) no-repeat right center / contain;
  transform: translateY(-50%) rotate(90deg);
}
.formSelect .formControlArea__name {
  /*display:none*/
}
.formSelect .formControl {
  padding-right: 2rem;
  pointer-events: none;
}
.formSelect__dropDown {
  display: none;
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  width: 100%;
  list-style-type: none;
  margin: 0.75rem 0 0;
  padding: 0;
  background-color: var(--white);
  background-clip: padding-box;
  border: solid 1px var(--gray300);
  border-radius: 0.5rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
  color: var(--txt600);
  max-height: 15rem;
  overflow-y: scroll;
}
.formSelect__dropDown__li.active .dropDownName {
  color: var(--mainColor);
}
.formSelect__dropDown__li:not(:last-child) .dropDownName::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  width: calc(100% - var(--pdX) * 2);
  height: 1px;
  background: var(--gray300);
  transform: translateX(-50%);
}
.dropDownName {
  --pdX: 1.5rem;
  position: relative;
  display: block;
  padding: 0.75rem var(--pdX);
}

.formControlArea--isOpen {
}
.formControlArea--hasValue .formControlArea__name {
}

/* !===checkbox radiobox */
.formCheckGp {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.formCheck {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.formCheck + .formCheck {
  margin-top: 0.25rem;
}
.formCheck:has([type="radio"]) {
  gap: 0.5rem;
}
.formCheck__input {
  --bs-form-check-bg: #fff;
  --bxS: 1.25rem;
  flex-shrink: 0;
  width: var(--bxS);
  height: var(--bxS);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-form-check-bg);
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid var(--gray700);
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  print-color-adjust: exact;
}
.formCheck__input:checked {
  background-color: var(--mainColor);
  border-color: var(--mainColor);
}
.formCheck__label {
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
}
.formCheck__txt {
}

.formCheck__input[type="checkbox"] {
  border-radius: 0.25rem;
}
.formCheck__input[type="checkbox"]:checked {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3E%3C/svg%3E");
}

.formCheck__input[type="radio"] {
  --bxS: 0.75rem;
  height: var(--bxS);
  display: block;
  border-radius: 100%;
  border-color: var(--mainColor);
}
.formCheck__input[type="radio"]:checked {
  background: var(--bs-form-check-bg-image) #fff;
  background-size: 130%;
  background-repeat: no-repeat;
  background-position: center;
}
.formCheck__input[type="radio"]:checked {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23F36F20'/%3e%3c/svg%3e");
}

/* !===上傳 */
.filesBox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filesBox__item {
  /*flex:1*/
}
.filesBox__item__img {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.previewImg {
  position: relative;
  z-index: 3;
  margin: 0;
  display: flex;
  gap: 0.5rem;
}
.previewImg img {
  height: 70px;
  aspect-ratio: 6/4;
  object-fit: cover;
}
.previewImg__name {
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
}
.previewImg__delete {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  width: 0.75rem;
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.343 11.158A1.19 1.19 0 1 1 .659 9.474l3.488-3.489-3.484-3.46A1.189 1.189 0 1 1 2.34.84l3.49 3.49L9.293.845a1.187 1.187 0 1 1 1.678 1.678L7.486 5.985l3.49 3.49a1.189 1.189 0 1 1-1.684 1.678L5.832 7.67l-3.49 3.489z' fill='%23EB5757'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  color: var(--white);
  padding: 0.25rem;
  border-radius: 0.25rem;
  font: var(--btnS-zh);
  letter-spacing: var(--btnS-zh_spacing);
  cursor: pointer;
  transition: var(--transition);
}
.previewImg__delete:hover {
  opacity: 0.5;
}
.filesBox__btn {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.filesBox__item__txt {
  padding: 1rem 0;
  color: var(--txt400);
  font: var(--btnS-zh);
  letter-spacing: var(--btnS-zh_spacing);
}
.filesBox__item__txt ol {
  margin-bottom: 0;
}
.filesBox__item--btn {
  flex: inherit;
  position: relative;
}
.filesBox__item--btn::before {
  content: "檔案上傳";
  cursor: pointer;
  display: block;
  padding: 0.5rem 3rem 0.5rem 0.75rem;
  background-color: var(--gray600);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='a' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Cpath fill='%23D9D9D9' d='M0 0h24v24H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)' fill='%23ffffff'%3E%3Cpath d='M6.308 19.5c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283V15.73c0-.212.072-.39.215-.534a.726.726 0 0 1 .535-.216c.213 0 .391.072.535.216A.726.726 0 0 1 6 15.73v1.962c0 .077.032.147.096.212a.294.294 0 0 0 .212.096h11.384a.294.294 0 0 0 .212-.096.294.294 0 0 0 .096-.212V15.73c0-.212.072-.39.215-.534a.726.726 0 0 1 .535-.216c.213 0 .391.072.535.216a.726.726 0 0 1 .215.534v1.962c0 .505-.175.933-.525 1.283-.35.35-.778.525-1.283.525H6.308z'/%3E%3Cpath d='M12.004 4.5a.829.829 0 0 1 .633.256l3.11 3.11a.705.705 0 0 1 .22.522.769.769 0 0 1-.22.532.764.764 0 0 1-.535.24.708.708 0 0 1-.535-.225l-1.923-1.923v7.65a.726.726 0 0 1-.215.535.726.726 0 0 1-.535.215.726.726 0 0 1-.534-.215.726.726 0 0 1-.216-.535v-7.65L9.331 8.935a.714.714 0 0 1-.53.22.75.75 0 0 1-.539-.235.783.783 0 0 1-.225-.527.7.7 0 0 1 .225-.527l3.11-3.11a.829.829 0 0 1 .632-.255z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 32px;
  background-position: calc(100% - 0.5rem) center;
  border-radius: 0.5rem;
  color: var(--white);
  transition: var(--transition);
}
.filesBox__item--btn:hover::before {
  background-color: var(--gray800);
}
.filesBox__item__input {
  display: inline-block;
  border: none;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*頁碼*/
.pagination {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 5rem 0;
  font-size: 1.25rem;
}
.pagination li:not(.show) {
  display: none;
}
.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  aspect-ratio: 1;
  font: var(--body1);
  letter-spacing: var(--body1_spacing);
  color: var(--txt400);
  border-radius: 100%;
}
.pagination .on a {
  color: #fff;
  background: var(--mainColor);
}
.pagination .arrow {
  display: flex !important;
}
.pagination .arrow .no {
  opacity: 0.5;
  pointer-events: none;
}
.pagination .arrow a {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 80%;
}
.pagination .arrow a i {
}
.pagination .arrow--prev a {
}
.pagination .arrow--next a {
}

/*麵包屑*/
.breadCrumbsBlock {
  text-align: left;
  max-width: var(--containerW-fluid);
  margin: auto;
  padding-left: calc(var(--ftMargin) + var(--ftPadding));
  padding-right: calc(var(--ftMargin) + var(--ftPadding));
}
.breadCrumbs {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.breadCrumbs__item {
  display: flex;
  align-items: center;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
}
.breadCrumbs__item + .breadCrumbs__item::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.25rem;
  background-image: var(--icon_angleR_black);
  background-size: contain;
  background-position: center;
  opacity: 0.5;
}
.breadCrumbs__item a {
  display: inline-block;
  color: var(--txt400);
}
.breadCrumbs__item:last-child a {
  padding-right: 0;
  color: var(--mainColor);
}

/* 圖文底層 */
.articleDetail {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 1000px;
  margin: auto;
}
.articleDetail__head {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.articleTitle {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  font: var(--h1);
  letter-spacing: var(--h1_spacing);
  color: var(--txt800);
}
.articleInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
}
.articleTime {
  display: inline-block;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
  color: var(--txt400);
}
.articleDetail__body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.articleDetail__footer {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.articleAccordion {
}
.articleAccordion__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: var(--mainColor);
  border-radius: 0.75rem;
  color: #fff;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
}
.articleAccordion__head::after {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-image: url(../images/all/icon/plus_icon-w.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: var(--transition);
}
.articleAccordion__body {
  margin-top: 0.25rem;
  padding: 1.25rem;
  background: var(--gray100);
  border-radius: 0.75rem;
  display: none;
}
.articleAccordion--isOpen .articleAccordion__head::after {
  background-image: url(../images/all/icon/minus_icon-w.svg);
}
.articleDetail__head--s {
  gap: 0.75rem;
}
.articleDetail__head--s .articleInfo {
  padding: 0;
}

/* !===訊息專區 */
.messageCard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.messageCard__item {
  display: flex;
  align-items: flex-start;
  border-radius: 1.75rem;
  padding: 1.75rem;
  box-shadow: var(--shadowCard);
}
.messageCard__item::after {
  content: "";
  display: block;
  width: 2.5rem;
  aspect-ratio: 1;
  background: url(../images/all/icon/arrow_Columns-gray.svg);
  transition: var(--transition);
}
.messageCard__item .infoBox {
  flex: 1;
}
.messageCard__item .articleTime {
  margin-bottom: 1rem;
}
.messageCard__item .timePeriod {
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
}
.messageCard__item .infoBox__name {
  margin-bottom: 0;
}
.messageCard__item .infoBox__txt {
  margin-top: 0.75rem;
}

.messageCard__item:hover,
.messageCard__item:focus,
.messageCard__item:active {
  box-shadow: var(--shadowCard_hover);
}

.messageCard__item:hover::after,
.messageCard__item:focus::after {
  background: url("../images/all/icon/arrow_Columns.svg");
}

.messageCard__item:not(.--loginNo):hover .infoBox__name,
.messageCard__item:not(.--loginNo):focus .infoBox__name,
.messageCard__item:not(.--loginNo):active .infoBox__name {
  color: var(--mainColor);
}

.messageCard__item.--login {
  color: var(--txtBrand);
}
.messageCard__item.--loginNo {
  cursor: auto;
  background: var(--gray100);
  border: solid 1px var(--gray100);
  box-shadow: none;
}
.messageCard__item.--login .timePeriod,
.messageCard__item.--loginNo .timePeriod {
  --color: var(--txt400);
}
.messageCard__item.--login::after,
.messageCard__item.--loginNo::after {
  background: inherit;
  font: var(--btnL-zh);
  letter-spacing: var(--btnL-zh_spacing);
  margin: auto 0;
}
.messageCard__item.--login::after {
  content: "登錄";
}
.messageCard__item.--loginNo::after {
  content: "額滿";
  color: var(--txt300);
}

/* !===icash pay>特色介紹與App下載 */
.icashPayPage {
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 10vw, 5rem);
  padding-bottom: 5rem;
}
.slogan {
  max-width: 800px;
  margin: auto;
  text-align: center;
}
.slogan__title {
  font: var(--h2);
  letter-spacing: var(--h2_spacing);
  margin-bottom: 1.5rem;
}
.slogan__summary {
  font: var(--h5);
  letter-spacing: var(--h5_spacing);
  margin-bottom: 0;
  padding-bottom: 1rem;
}
.icashPayFeature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.icashPayFeature__box--pic {
  width: 40%;
}
.icashPayFeature__box--info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 1rem 0 3.25rem;
}
.iPaySlogan .mjTxt {
  font: var(--deco3);
  letter-spacing: var(--deco3_spacing);
  margin-bottom: 0.5rem;
}
.iPaySlogan .subInfo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.iPaySlogan .subInfo__txt {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  font: var(--h3);
  letter-spacing: var(--h3_spacing);
}
.iPaySlogan .logoImg {
  height: clamp(1rem, 2.5vw, 1.7rem);
}
.iPaySlogan .logoImg[alt="icash Pay"] {
  height: clamp(1.2rem, 2.5vw, 1.85rem);
}
.iPaySlogan:has(.mjTxt) .logoImg {
  height: clamp(1.5rem, 2.5vw, 2.5rem);
}
.iPaySlogan:has(.mjTxt) .logoImg[alt="icash Pay"] {
  height: clamp(1.75rem, 2.5vw, 2.75rem);
}
.remarkBox--icash-pay p {
  margin-bottom: 0.25rem;
}
.icashPayFeature--reverse {
  flex-direction: row-reverse;
}
.icashPayFeature--reverse .icashPayFeature__box--info {
  padding-left: 1rem;
}

.icashPayQR {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: clamp(3rem, 2vw, 4rem);
}
.icashPayQR__box {
  width: 100%;
  max-width: 480px;
  padding: 0 0.75rem;
  text-align: center;
}
.icashPayQR__box .picBox {
  max-width: 390px;
  margin: 0 auto;
}
.icashPayQR__box .infoBox {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
}

/* popup */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.popup--isOpen {
  background: rgba(0, 0, 0, 0.5);
}
.popup__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  background: #fff;
  padding: 2.5rem;
  border-radius: 1.25rem;
}
.popupClose {
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  aspect-ratio: 1;
  opacity: 0.75;
  background: url(../images/all/icon/close.svg) no-repeat center/24px;
}
.popupHead {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: solid 1px var(--mainColor);
}
.popupHead__tt {
  font: var(--h4);
  letter-spacing: var(--h4_spacing);
  color: var(--txt900);
}
.popupBody {
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  font-weight: 400;
  line-height: 1.6;
  color: var(--txt800);
}
.popupBody.scrollbar {
  max-height: 100%;
}

.popup--big .popup__inner {
  width: 675px;
  max-width: 90%;
  max-height: 85dvh;
}
.popup--alert .popup__inner {
  text-align: center;
}
.popup--alert .popup__inner::before {
  content: "";
  width: 2.875rem;
  aspect-ratio: 1;
  margin: 0 auto 1.25rem;
  background: url("../images/all/icon/alert-1.svg") no-repeat center/contain;
}
.popup--alert.icon--ok .popup__inner::before {
  background: url("../images/all/icon/ok.svg") no-repeat center/50%;
  border: solid 2px var(--mainColor);
  border-radius: 100%;
}

/* !===使用者帳戶類別 p4_2_1_1 */
.tableStyle--userType {
}

/* !===共用：步驟教學 */
.teachingBlock {
  padding-top: clamp(1rem, 5vw, 3rem);
}
.teachingBlock__box {
  float: left;
  width: 50%;
}
.teachingBlock__box--right {
  padding-left: clamp(1rem, 5vw, 4rem);
}
.teachingSteps {
  position: relative;
}
.teachingStepsList {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  counter-reset: num;
  padding: 3rem 2rem 2rem;
  margin-left: -2rem;
}
.teachingStepsList.--scroll {
  overflow-y: scroll;
  height: var(--newHeight);
}
.teachingStepsList.--scroll::-webkit-scrollbar {
  width: 2px;
}
.teachingStepsList.--scroll::-webkit-scrollbar-track {
  background: var(--gray200);
}
.teachingStepsList.--scroll::-webkit-scrollbar-thumb {
  background: var(--gray400);
  border-radius: 5px;
}
.teachingSteps__arrow {
  display: none;
  position: absolute;
  width: 2.215rem;
  aspect-ratio: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: var(--icon_angleR_black);
  opacity: 0.75;
}
.teachingSteps__arrow--left {
  transform: rotate(180deg);
  left: 0;
}
.teachingSteps__arrow--right {
  right: 0;
}
.teachingSteps__item {
  padding: 1.5rem;
  box-shadow: var(--shadowCard);
  border-radius: 1.25rem;
}
.teachingSteps__item.active {
  box-shadow: var(--shadowCard_hover);
}
.teachingSteps__item.active .screenName,
.teachingSteps__item:hover .screenName {
  color: var(--mainColor);
}
.teachingSteps__item .screenName::before {
  content: counter(num);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  aspect-ratio: 1;
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
  border-radius: 100%;
  color: var(--txt200);
  border: solid 2px var(--gray300);
}
.teachingSteps__item.active .screenName::before,
.teachingSteps__item:hover .screenName::before {
  background: var(--mainColor);
  border-color: var(--mainColor);
  color: #fff;
}
.teachingSteps__item__body {
  display: none;
  padding-top: 0.75rem;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
}

.teachingScreen {
}
.teachingScreen__item {
  display: none;
}
.teachingScreen__item:first-child {
  display: block;
}
.teachingScreen__item .infoBox {
  display: none;
  margin-bottom: 0.75rem;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
}
.teachingScreen__item .screenName {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--mainColor);
}
.teachingScreen__item .screenName::before {
  content: attr(data-num) " .";
}
.teachingSteps__item,
.teachingScreen__item.active {
  cursor: pointer;
  transition: var(--transition);
}
.teachingScreenDots {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.teachingScreenDots .dot {
  height: 0.5rem;
  width: 0.5rem;
  background-color: var(--gray300);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: var(--transition);
}
.teachingScreenDots .dot.active,
.teachingScreenDots .dot:hover {
  background-color: var(--mainColor);
}
.screenName {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 0;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  transition: var(--transition);
}
.screenName::before {
  counter-increment: num;
  transition: var(--transition);
}
.screenName__txt {
  flex: 1;
}
.phoneBox {
  position: relative;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 40 / 79;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.phoneBox::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url(../images/all/phone.png) no-repeat center/contain;
}
.phoneBox img {
  position: absolute;
  left: 50%;
  top: 0;
  aspect-ratio: 57/124;
  object-fit: contain;
  width: 87%;
  margin-top: 4%;
  mask: url(../images/all/phone-mask.png);
  mask-size: 100% auto;
  mask-position: center top;
  transition: var(--transition-long);
  transform: translateX(-50%);
}
.phoneBox--anim {
}
.phoneBox--anim img:not(:first-child) {
  opacity: 0;
}
.phoneBox--anim img.active {
  opacity: 1;
}

/* !===共用：合作店家 */
.storeCard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
body:has(.sidebar) .storeCard {
  grid-template-columns: repeat(3, 1fr);
}
.storeCard__item {
}
.storeCard__item .picBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  border-radius: 1.25rem;
  border: solid 1px var(--gray200);
  overflow: hidden;
  aspect-ratio: 1;
}
.storeCard__item .picBox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.storeCard__item .infoBox {
  padding: 1rem 1.25rem 0;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.storeCard__item .infoBox__sortTag {
  margin-bottom: 0;
}
.storeCard__item .infoBox__name {
  width: 100%;
  padding: 0 0.75rem;
  font: var(--body1);
  letter-spacing: var(--body1_spacing);
}
.storeCard__item .infoBox__txt {
  width: 100%;
  padding: 0 0.5rem;
  height: auto;
  overflow: inherit;
}
.storeCard__item:hover .picBox {
  box-shadow: var(--shadowCard_hover);
  border-color: transparent;
}

/* !===共用：hashtag標籤 */
.hashtagBar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0 0.5rem;
}
.hashtag {
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  font-weight: 400;
}
.hashtag::before {
  content: "#";
  display: inline-block;
  margin-right: 0.25rem;
}

/* !===使用範圍>代收代售 */
.tableStyle--p5_1 {
  text-align: left;
}
.tableStyle--p5_1 th {
}
.tableStyle--p5_1 td:nth-child(1) {
  min-width: 165px;
}
.tableStyle--p5_1 td:nth-child(1):not([colspan])::before {
  content: "";
  position: absolute;
  right: 0;
  top: var(--td-border-y);
  bottom: var(--td-border-y);
  width: 1px;
  background: var(--gray200);
}
.tableStyle--p5_1 td:last-child,
.tableStyle--p5_1 td:nth-last-child(2) {
  width: 21%;
}
.tableStyle--p5_1 .tdBox {
  max-width: 29rem;
}
[class*="tdBox--sort"] {
}
[class*="tdBox--sort"]::before {
  content: "";
  display: none;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--prLight);
}
tr:first-child [class*="tdBox--sort"]::before {
  top: var(--td-border-y);
  border-radius: 0.65rem 0.65rem 0 0;
}
tr:last-child [class*="tdBox--sort"]::before {
  bottom: var(--td-border-y);
  border-radius: 0 0 0.65rem 0.65rem;
}
.tdBox--sort1 {
}
.tdBox--sort2 {
}
.tableStyle--p5_sort1 .tdBox--sort1::before,
.tableStyle--p5_sort2 .tdBox--sort2::before {
  display: block;
}

/* !===常見問題 */
.faqCard {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.faqCard__item {
  display: flex;
  align-items: center;
  border-radius: 1.25rem;
  padding: 1rem 1.5rem;
  box-shadow: var(--shadowCard_m);
}
.faqCard__item::after {
  content: "";
  display: block;
  width: 2.5rem;
  aspect-ratio: 1;
  background: url(../images/all/icon/arrow_Columns-gray.svg);
  transition: var(--transition);
}
.faqCard__item .infoBox {
  flex: 1;
}
.faqCard__item .infoBox__name {
  margin-bottom: 0;
}
.faqCard__item:hover {
  box-shadow: var(--shadowCard_hover_m);
}
.faqCard__item:hover::after {
  background: url(../images/all/icon/arrow_Columns.svg);
}
.faqCard__item:hover .infoBox__name {
  color: var(--mainColor);
}

/* !===點數專區 */
#points_shop {
  margin-top: 6.25rem;
}
.tableStyle--p4_5.--tb1 td {
  width: 33%;
}
.tableStyle--p4_5.--tb3 td:nth-child(1) {
  width: 140px;
}

/* !===國外轉帳>匯兌說明 */
.foreignList {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.foreignBlock {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  align-items: center;
}
.foreignBlock--alignTop {
  align-items: start;
}
.foreignBlock__box.picBox {
  border-radius: 1.25rem;
  overflow: hidden;
}
.foreignBlock__box.picBox--border {
  border: solid 1px var(--txt200);
}
.foreignBlock__box.picBox.--imgxs {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 6/4;
}
.foreignBlock__box.picBox.--imgxs img {
  max-width: 185px;
}
.foreignBlock__box:not(.picBox) {
  padding: 0.625em 0;
}
.foreignBlock__box img {
  width: 100%;
}
.foreignBlock__box__title {
  font: var(--deco5);
  letter-spacing: var(--deco5_spacing);
  margin-bottom: 0.75rem;
}
.foreignBlock__box__subTitle {
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  margin-bottom: 0.75rem;
}
.foreignBlock__box__txt {
  padding-left: var(--pdl, 0);
  color: var(--txt700);
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
}
.foreignBlock__box .btnWrap {
  margin-top: clamp(1.5rem, 2vw, 2rem);
}

.--titleNum {
  --pdl: calc(2.125rem + clamp(1rem, 2vw, 1.25rem));
}
.--titleNum .foreignBlock__box__title {
  position: relative;
  padding-left: var(--pdl);
}
.--titleNum .foreignBlock__box__title::before {
  content: counter(num);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  aspect-ratio: 1;
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
  border-radius: 100%;
  background: var(--mainColor);
  color: #fff;
}

.foreignList.--titleNum {
  counter-reset: num;
}
.foreignList.--titleNum .foreignBlock {
  counter-increment: num;
}
.foreignBlock__box.--titleNum {
  counter-reset: num;
}
.foreignBlock__box.--titleNum .foreignBlock__box__title {
  counter-increment: num;
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

/* !===國外轉帳>最新匯率表 */
.tableStyle--p4_3_3 .tdBox {
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
}
.tableStyle--p4_3_3 td:nth-child(1) {
  width: 30%;
}
.tableStyle--p4_3_3 td:nth-child(2) {
  width: 30%;
}
.tableStyle--p4_3_3 .tdBox--flag {
  align-items: center;
  justify-content: flex-start;
  padding-left: 4vw;
}
.flagImg {
  width: clamp(1.8rem, 3vw, 3.75rem);
  aspect-ratio: 5/3;
  object-fit: cover;
  border-radius: clamp(0.115rem, 1vw, 0.25rem);
  border: solid 1px var(--gray800);
}
.tableStyle--p4_3_3 .tdBox--rateNum {
  text-align: right;
  justify-content: flex-end;
  padding-right: 9vw;
}

/* !===條款與聲明 編輯器 */
.tx01--terms {
  color: #000;
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
  font-weight: 400;
  line-height: 160%;
}

/* !===下載專區 */
.faqCard--download .faqCard__item::after {
  background: var(--icon_download_black);
  opacity: 0.15;
}
.faqCard--download .faqCard__item:hover::after {
  background: var(--icon_download_orange);
  opacity: 1;
}

/* !===合作銀行 */
.bankCard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 1.75rem;
  margin-top: 3.75rem;
}
.bankCard__item {
  text-align: center;
}
.bankCard__item .picBox {
  padding: 1.5rem 1rem;
  border-radius: 1.25rem;
  box-shadow: var(--shadowCard);
  overflow: hidden;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bankCard__item .picBox img {
  width: 100%;
  max-height: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: contain;
}
.bankCard__item .picBox__name {
  font: var(--btnL-zh);
  letter-spacing: var(--btnL-zh_spacing);
}
.bankCard__item .infoBox {
  margin-top: 1rem;
}
.bankCard__item .infoBox__name {
  font: var(--btnM-zh);
  letter-spacing: var(--btnM-zh_spacing);
}
.bankCard__item:hover {
  color: var(--mainColor);
}
.bankCard__item .picBox:hover {
  box-shadow: var(--shadowCard_hover);
}

.bankCard__item.--cardImg .picBox img {
  aspect-ratio: 116/67;
  max-height: 135px;
  height: 100%;
}
.bankCard__item.--imgS1x1 .picBox img {
  aspect-ratio: 1/1;
}
/* !===合作銀行>各銀行連結帳戶須知 $p4_4_1_1 */
.accordionList {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.accordionList__box {
  position: relative;
  padding: 1rem 1.5rem;
}
.accordionList__box::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 95%;
  height: 1px;
  background: var(--gray300);
  transform: translateX(-50%);
}
.accordionList__box__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1rem 2.5rem 1rem 2.5rem;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
}
.accordionList__box__header::after {
  content: "";
  display: block;
  width: 1.5rem;
  aspect-ratio: 1;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h16M12 4v16' stroke='%23565656' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
  transition: var(--transition);
}
.accordionList__box__header .picBox img {
  max-height: 40px;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: contain;
}
.accordionList__box__body {
  padding: 0 4.25rem 1.25rem;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
  color: var(--txt400);
}
.accordionList__box--isOpen .accordionList__box__header {
  color: var(--mainColor);
}
.accordionList__box--isOpen .accordionList__box__header::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h16' stroke='%23F36F20' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* !===顧客服務 */
#contact_step01 {
  position: relative;
  z-index: 10;
}
#contact_step03 {
  margin-bottom: 4rem;
}
.containerInfo {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 5rem;
}
.formArea {
  margin-bottom: 5rem;
}
.formArea__block,
#inputGroupShare {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.formArea__block + .formArea__block {
  margin-top: 3.75rem;
}
#inputGroupShare,
.inputGroup--hidden {
  display: none;
}
.formOK {
  padding: 0 0 3rem;
  color: var(--txt400);
  text-align: center;
}
.formOK__mjImg {
  width: 6.25rem;
  margin-bottom: 1.75rem;
}
.formOK__title {
  font: var(--h4);
  letter-spacing: var(--h4_spacing);
  color: var(--txt800);
  margin-bottom: 0.5rem;
}
.formOK__id {
  color: var(--txtBrand);
  font: var(--deco5);
  letter-spacing: var(--deco5_spacing);
}

/* !===icash Pay APP 使用說明>乘車碼 */
.tableStyle--ridecode {
  text-align: left;
  --td-border-x: clamp(1rem, 5vw, 1.5rem);
}
.tableStyle--ridecode th:nth-child(1) {
  width: 40%;
}
.tableStyle--ridecode th:nth-child(2) {
  width: 60%;
}
.tableStyle--ridecode tbody .tdBox:not(.tdBox--tt) {
  justify-content: left;
}

/* !===icash2 卡片記名>申請說明 */
.cardNameList {
  display: flex;
  gap: 1.5rem;
  margin: 4rem 0;
  padding: 0;
  list-style-type: none;
}
.cardNameList__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1rem;
  border: solid 1px var(--gray200);
  text-align: center;
  border-radius: 0.625rem;
}
.cardNameList__item .infoBx {
}
.cardNameList__item .infoBx__tt {
  color: var(--mainColor);
  margin-bottom: 0.75rem;
  font: var(--deco5);
  letter-spacing: var(--deco5_spacing);
}
.cardNameList__item .infoBx__txt {
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  color: var(--txt600);
}
.cardNameList__item .btnStyle {
  margin-top: auto;
}

/* !===卡片記名>步驟 */
.termsAtc {
  margin-bottom: 2rem; /* padding: 1rem; */ /* border: solid 1px var(--gray300); */ /* border-radius: .5rem; */
}
.termsAtc__inner {
  height: 50vh;
  overflow: hidden;
  overflow-y: scroll;
  padding: 1rem;
  border: solid 1px var(--gray300);
  border-radius: 0.5rem;
}

/* !===API步驟stepsList */
.stepsList {
  counter-reset: num;
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0 0 clamp(2.25rem, 3vw, 2.5rem);
  padding: 1.5rem 0.75rem;
}
.stepsList .line {
  flex: 1;
  max-width: 5rem;
  height: 0.0625rem;
  background: var(--txt200);
}
.stepsList__item {
  --cl: var(--txt600);
  --border-cl: var(--gray300);
  --num: var(--txt200);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cl);
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
}
.stepsList__item::before {
  content: counter(num);
  counter-increment: num;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  aspect-ratio: 1;
  border: solid 2px var(--border-cl);
  border-radius: 50%;
  color: var(--num);
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
}
.stepsList__item--active {
  --cl: var(--txtBrand);
  --border-cl: var(--txtBrand);
  --num: #fff;
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
}
.stepsList__item--active::before {
  background: var(--cl);
}
.stepsList__item .txt {
  flex: 1;
}
* + .formPicBox {
  margin-top: 0.75rem;
}
.formPicBox {
  margin-bottom: 0;
}
.formPicBox .txt {
  margin-top: 0.75rem;
  color: var(--txt600);
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
}

/* !===icash 2.0 服務>卡片記名>一般記名 */
#formType1 {
}
#formType2 {
  display: none;
}
.tableStyle--p3_5 {
}
.tdInBx {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  padding-left: clamp(0.25rem, 2vw, 2.25rem);
}
.tdInBx__tt {
  width: min(210px, 13vw);
  margin: 0;
}
.tdInBx__txt {
  flex: 1;
  margin: 0;
}
.tbPicBox {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.tbPicBox img {
  height: 78px;
}

/* !===行銷工具登錄>已登錄活動 */
.lgResList {
  --radius: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lgResList .td {
  padding: 1rem;
  text-align: center;
}
.lgResList .td:nth-child(1) {
  flex: 1;
  padding-left: clamp(1rem, 3vw, 3rem);
}
.lgResList .td:nth-child(2) {
  flex: 1;
}
.lgResList .td:nth-child(3) {
  width: 150px;
}
.lgResList .td:nth-child(4) {
  width: 150px;
}
.lgResList .td:nth-child(5) {
  width: 150px;
}
.lgResHead,
.lgResBody__item__top {
  display: flex;
  gap: 1px;
  flex-wrap: wrap;
}
.lgResHead {
}
.lgResHead .td {
  background: var(--mainColor);
  color: #fff;
  font-weight: 700;
}
.lgResHead .td:first-child {
  border-radius: var(--tb-radius) 0 0 var(--tb-radius);
}
.lgResHead .td:last-child {
  border-radius: 0 var(--tb-radius) var(--tb-radius) 0;
}
.lgResBody {
}
.lgResBody__item {
}
.lgResBody__item + .lgResBody__item {
  padding-top: 0.75rem;
  border-top: solid 1px var(--gray300);
}
.lgResBody__item__top {
}
.lgResBody__item__top .td {
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
}
.lgResBody__item__top .td:nth-child(1) {
  text-align: left;
}
.lgResBody__item__btm {
  display: none;
  width: 100%;
  padding: 1rem clamp(1rem, 3vw, 3rem) 2.25rem;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
  color: var(--txt400);
}
.lgResBody__item__top.--isOpen {
  color: var(--mainColor);
}
.lgResBody__item__top .icon {
  display: inline-block;
  width: 1.5rem;
  aspect-ratio: 1;
  background-image: url(../images/all/icon/arrow_Columns-gray.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: var(--transition);
}
.lgResBody__item__top .icon--link {
  background-image: url(../images/all/icon/link.svg);
}
.lgResBody__item__top .icon--toggle {
  background-image: var(--icon_plus_orange);
  background-size: 150%;
}
.lgResBody__item__top:not(.--isOpen) .icon {
  filter: grayscale(100%);
}
.lgResBody__item__top.--isOpen .icon--toggle {
  background-image: var(--icon_minus_orange);
}

/* 合作發卡機構 */
.innerHeadBar:has(.dtBrankImg) {
  flex-wrap: nowrap;
}
.dtBrankImg {
  margin-bottom: 0;
}
.dtBrankImg img {
  width: 230px;
}

/* !===卡博館 */
.cardLb {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 1.5rem;
}
.cardLb__item {
  cursor: pointer;
  padding: clamp(1.5rem, 2vw, 2rem) clamp(1.25rem, 2vw, 1.5rem);
  border-radius: 1.25rem;
  box-shadow: var(--shadowCard);
  overflow: hidden;
}
.cardLb__item .picBox {
  display: block;
  margin-bottom: clamp(1.5rem, 2vw, 2rem);
}
.cardLb__item .picBox img {
  display: block;
  max-width: 14.5rem;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin: 0 auto;
}
.cardLb__item .infoBox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cardLb__item .infoBox__name {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 3.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cardLb__item .infoBox__txt {
  height: auto;
}
.cardLb__item:hover {
  color: var(--mainColor);
  box-shadow: var(--shadowCard_hover);
}
.cardDtInfo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.cardDtInfo + .cardDtInfo {
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
  padding-top: clamp(0.75rem, 2vw, 2rem);
  border-top: solid 1px var(--gray200);
}
.cardDtInfo__item {
  width: 50%;
  padding: 0.25rem 0.5rem;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
}
.cardDtInfo__item.--tt {
  width: 100%;
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
  color: var(--txtBrand);
}
.cardDtInfo__item a[href^="http"] {
  text-decoration: underline;
}

/* !===無資料時顯示 */
.noData {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 5rem) 1.25rem;
}
.noData__title {
  font: var(--deco4);
  letter-spacing: var(--deco4_spacing);
  color: car(--txt800);
}
.noData__txt {
  margin: 0 0 2rem;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
}

.shadowArea {
  margin-top: 3rem;
  box-shadow: var(--shadowCard);
  padding: 3.75rem 3rem;
  border-radius: 1.75rem;
}

/* !===自動加值 */
.addCashTb {
  text-align: center;
}
.addCashTb .td {
  width: var(--size, auto);
  flex: var(--flex, inherit);
}
.addCashTb .td__bx {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-gap, 0);
  flex: var(--flex, inherit);
}
.addCashTb .td__bx .tdBox {
  flex: 1;
  margin-bottom: 0;
}

.addCashTb__head {
  --tb-gap: 1px;
}
.addCashTb__head .tr {
  display: flex;
  gap: var(--tb-gap);
  border-radius: var(--tb-radius);
  overflow: hidden;
}
.addCashTb__head .td {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  gap: var(--tb-gap);
}
.addCashTb__head .tdBox {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding: 0.75rem 0.75rem;
  background: var(--mainColor);
  color: #fff;
  font-weight: 700;
}

.addCashTb__body {
}
.addCashTb__body .tr {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-gap, 0);
}
.addCashTb__body .tr + .tr {
  border-top: solid 1px var(--gray400);
}
.addCashTb__body .td {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 0.75rem;
}

/* !===紅利點數 */
.floatLy {
  display: grid;
  grid-template-columns: 245px 1fr;
  align-items: center;
  gap: clamp(1.25rem, 5vw, 6.25rem);
}
.floatLy .picBox img {
  width: 100%;
  max-width: 100%;
}
.floatLy .infoBox {
}
.floatLy .infoBox__tt {
  margin-bottom: 2rem;
  font: var(--deco5);
  letter-spacing: var(--deco5_spacing);
  color: var(--txt600);
}
.floatLy .innerHeadBar--sub {
  margin-bottom: 0.75rem;
}

/* !===購買icash2.0>禮金加值方式 */
.giftSlick {
}
.giftSlick__item {
}
.giftSlick + .slick-controls {
  justify-content: center;
  margin-top: 2rem;
}
.stepTitle {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  color: var(--txt600);
}
.stepTitle__num {
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
  padding: 0.25rem 0.75rem;
  background: var(--mainColor);
  color: #fff;
  border-radius: 3em;
}

/* !===icash2.0>卡別介紹 */
.blockHeight--cardSlick {
  position: relative;
  margin-top: 5rem;
  padding-top: 0;
}
.blockHeight--cardSlick .slick-controls {
  position: absolute;
  right: 0;
  top: 0;
}
.cardSlick .slick-list {
  padding: 1.5rem 3.5rem 1.5rem 0;
}
.cardSlick .slick-track {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
}
.cardSlick .slick-track .cardSlick__item {
  height: auto;
}
.cardSlick {
}
.cardSlick__item {
  display: flex !important;
  flex-direction: column;
  padding: clamp(1.5rem, 2vw, 3.5rem) clamp(1.5rem, 2vw, 2.5rem);
  box-shadow: var(--shadowCard);
  border-radius: 1.25rem;
}
.cardSlick__item .picBox {
  width: 100%;
  margin-top: auto;
}
.cardSlick__item .infoBox {
}
.cardSlick__item .infoBox .sort {
  margin-bottom: 0.5rem;
  font: var(--h4);
  letter-spacing: var(--h4_spacing);
  color: var(--mainColor);
}
.cardSlick__item .infoBox__title {
  margin-bottom: 1rem;
  font: var(--h3);
  letter-spacing: var(--h3_spacing);
  color: var(--txt800);
}
.cardSlick__item .infoBox__txt {
  display: block;
  height: auto;
  margin: 0 0 2rem;
  overflow: visible;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  color: var(--txt900);
}
.cardSlick__item .smTxt {
  min-height: calc(2em * 1.5);
  margin-top: 1rem;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
  color: var(--txt400);
  text-align: center;
}

/* !===手機 icash2.0 */
.NFCStep {
  --gap: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.NFCStep__bx {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.NFCStep__bx:not(:last-child)::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: calc(var(--gap) / 2 * -1);
  display: block;
  width: 1px;
  height: 100%;
  background: var(--gray200);
  border-radius: 1.25rem;
}
.NFCStep__bx .sort {
  display: inline-block;
  margin: 1.25rem 0;
  padding: 0.125rem 1rem;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
  color: #fff;
  background: var(--mainColor);
  border-radius: 3em;
}
.NFCStep__bx .tt {
  margin-bottom: 1.5rem;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  color: var(--txt800);
}
.NFCStep__bx .txt {
  margin: auto 0;
  padding: 1.25rem 0;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  color: var(--txt600);
}

.NFCSlick + .slick-controls {
  display: none;
}
.NFCSlick__bx {
  counter-increment: num;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.NFCSlick__bx .picBox img {
  margin: auto;
}
.NFCSlick__bx .tt {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
}
.NFCSlick__bx .tt::before {
  content: counter(num);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  aspect-ratio: 1;
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
  border-radius: 100%;
  background: var(--mainColor);
  color: #fff;
}
.NFCSlick__bx .tt[data-step]::before {
  content: attr(data-step);
}

.NFCSlick:not(.js-singleSlick) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  counter-reset: num;
  gap: 3.75rem 1rem;
}
.NFCSlick:not(.js-singleSlick) .tt {
  order: 1;
}
.appbtn {
}

/* !===網站導覽 */
.sitemapZone {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 5vw, 3.5rem);
}
.sitemapBox {
}
.sitemapBox__tt {
  display: block;
  margin-bottom: 0.75rem;
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
  color: var(--txt800);
}
.smpSubBx {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0;
}
.smpSubBx__item {
  display: flex;
  flex-direction: column;
}
.smpSubBx__item .link {
  display: block;
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
  color: var(--txt800);
}
.smpSubBx__item .link:hover {
  color: var(--mainColor);
}

.smpSubBx .smpSubBx {
  gap: 0.5rem;
  padding-top: 0.5rem;
}
.smpSubBx__item .smpSubBx__item .link {
  color: var(--txt400);
}

.smpSubBx__item:has(.smpSubBx) > .link {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.smpSubBx__item:has(.smpSubBx) > .link::after {
  content: "";
  display: block;
  width: 0.5rem;
  aspect-ratio: 1;
  border-right: solid 1px var(--gray800);
  border-bottom: solid 1px var(--gray800);
  transform: rotate(-135deg) translate(-25%, -25%);
}

.smpSubBx__item.--isHide > .link::after {
  transform: rotate(45deg) translate(-25%, -25%);
}
/* .smpSubBx__item.--isHide .smpSubBx{display:none} */

/* !===關於我們 */
body:has(.aboutMain) footer {
  position: relative;
}
.aboutBlock {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.aboutTitle {
  margin-bottom: 1.5rem;
  font: var(--h1);
  letter-spacing: var(--h1_spacing);
  color: var(--txt600);
}
.aboutTitle .mj {
  margin: 0 0.125em;
  color: var(--mainColor);
}

.aboutBlock--kv {
  --left: clamp(
    calc(var(--ftPadding) + var(--ftPadding)),
    10vw,
    calc((100% - var(--containerW-fluid)) / 2)
  );
  --topP: 3rem;
  position: relative;
  padding: 0;
  overflow: hidden;
}
.aboutBlock--kv::before,
.aboutBlock--kv::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  background-position: center;
  background-size: contain;
}
.aboutBlock--kv::before {
  --char-index: 3;
  --size: clamp(3rem, 40vw, 360px);
  top: calc(var(--size) / 2 * -1);
  left: 15%;
  width: var(--size);
  background-image: url("../images/about/deco_2.png");
  transform: translateY(-50%);
}
.aboutBlock--kv::after {
  --char-index: 2;
  --size: clamp(3rem, 40vw, 250px);
  top: 25%;
  left: calc(var(--size) / 1.75 * -1);
  width: var(--size);
  background-image: url("../images/about/deco_3.png");
  transform: translateX(-60%);
}

.aboutBlock--kv::before,
.aboutBlock--kv::after,
.aboutKv__img::after {
  animation: decoMoving 3s cubic-bezier(0.5, 0, 0.5, 1)
    calc(0.75s * var(--char-index)) both infinite;
}

.aboutKv {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: var(--topP);
  padding-bottom: var(--topP);
  padding-left: var(--left);
}
.aboutKv__img {
  position: relative;
  width: 58%;
  margin-left: auto;
  padding: clamp(3%, 3vw, 3rem);
  box-shadow: -0.25rem 0.5rem 1rem rgba(0, 0, 0, 0.1);
  border-radius: 100%;
  background: #fff;
  transform: translateX(9%);
  transition: var(--transition);
}
.aboutKv__img::after {
  --char-index: 1;
  --size: clamp(20%, 16vw, 35%);
  content: "";
  position: absolute;
  left: calc(var(--size) / 2.5 * -1);
  bottom: 0;
  width: var(--size);
  aspect-ratio: 1;
  background: url("../images/about/deco_1.png") no-repeat center/contain;
  animation: decoMoving 3s cubic-bezier(0.5, 0, 0.5, 1)
    calc(0.75s * var(--char-index)) both infinite;
}
.aboutKv__img img {
  width: 100%;
}
.aboutKv__txt {
  --logoW: 36vw;
  width: 37%;
  padding-right: clamp(1.75rem, 5vw, var(--ftPadding));
}
.aboutKv__txt .logoImg {
  width: var(--logoW);
  aspect-ratio: 32/11;
  transition: var(--transition);
  position: fixed;
  z-index: 2;
  top: calc(15% + var(--topP));
  left: var(--left);
}
.aboutKv__txt .infoBox {
  display: flex;
  flex-direction: column;
  align-items: self-start;
  position: fixed;
  z-index: 1;
  top: calc(15% + var(--topP));
  left: var(--left);
  width: var(--logoW);
  margin-top: calc(var(--logoW) * 11 / 32 + 1.5rem);
  padding-left: 1.25rem;
  transition: var(--transition);
}
.aboutKv__txt .infoBox p {
  margin-bottom: 0;
}
.aboutKv__txt .aboutTitle {
  margin-bottom: 0.75rem;
}
.aboutKv__txt .btnStyle {
  margin: 3rem 0;
}
.aboutKv__txt .scrollLink {
  position: static;
  transform: inherit;
  margin-top: auto;
}
.aboutKV__dot {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(../images/about/01-kv_bg.png);
  background-position: center;
  background-size: 100% auto;
  animation: dotMoving 3s cubic-bezier(0.5, 0, 0.5, 1) 0.5s both infinite;
  pointer-events: none;
}

.aboutKv__txt .logoImg.fixed {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.aboutKv__txt .logoImg.fixed img {
  transition: var(--transition-long);
  transition-delay: 0.25s;
  filter: blur(0.5rem);
}
.aboutKv__txt .logoImg.moveUp {
  top: 0;
  transform: translate(-50%, 0);
}
.aboutBlock--kv:has(.logoImg.fixed) {
}
.aboutBlock--kv:has(.logoImg.fixed) .aboutKv__txt .infoBox,
.aboutBlock--kv:has(.logoImg.fixed) .aboutKv__img {
  opacity: 0;
}
.aboutBlock--kv:has(.logoImg.fixed) .aboutKv__img {
  transition-delay: 0.25s;
}

.aboutMain {
  --h: 100vh;
  position: relative;
  z-index: 3;
  margin-top: calc(var(--h) * 0.8); /* padding-top: calc(var(--h) * .2); */
  background: #fff;
}
.aboutMain::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: var(--h);
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

.aboutBlock--slogan {
  position: relative; /* margin-top: calc(var(--h) * .2 * -1); */
  padding-top: calc(var(--h) * 0.2);
  padding-top: 0;
  padding-bottom: 4rem;
  text-align: center; /* overflow: hidden; */
}
.aboutBlock--slogan .decoMoving {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.aboutBlock--slogan .decoMoving__1 {
  left: 90%;
  bottom: 23%;
  width: clamp(3rem, 40vw, 16rem);
}
.aboutBlock--slogan .decoMoving__2 {
  right: 7%;
  bottom: 5%;
  width: clamp(3rem, 30vw, 11rem);
}
.abSlogan {
  position: relative;
  max-width: 605px;
  margin: 0 auto 2.5rem;
}
.abGood {
  list-style-type: none;
  margin: 4rem auto 0;
  padding: 0;
  max-width: 810px;
  display: flex;
  gap: clamp(1.25rem, 5vw, 2.5rem);
}
.abGood__bx {
  flex: 1;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: clamp(1.25rem, 5vw, 2.5rem);
  background: #fff;
  box-shadow: -0.25rem 0.5rem 1.125rem rgba(0, 0, 0, 0.1);
}
.abGood__bx .picBox {
  margin: 0 auto 1.25rem;
  width: clamp(3.5rem, 5vw, 6.25rem);
  aspect-ratio: 1;
}
.abGood__bx .infoBox {
  font: var(--body4);
  letter-spacing: var(--body4_spacing);
}
.abGood__bx .abGoodTitle {
  margin-bottom: 1.25rem;
  font: var(--h4);
  letter-spacing: var(--h4_spacing);
}

.aboutBlock--slogan::after,
.abSlogan::before,
.abSlogan::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 300px;
  transition: all 0.75s cubic-bezier(0.98, -1.24, 0, 1.67);
  opacity: 0;
}
.aboutBlock--slogan::after {
  --char-index: 3;
  --size: clamp(3rem, 15vw, 7rem);
  top: -17vw;
  left: 59%;
  width: var(--size);
  background-image: url("../images/index/cardSell-deco.png");
  transform: translate(-50%, 100%) scale(0.5);
}
.abSlogan::before {
  --char-index: 1;
  --size: clamp(3rem, 25vw, 300px);
  top: 0%;
  right: 100%;
  width: var(--size);
  background-image: url("../images/about/02-2.png");
  transform: translate(50%, 50%) scale(0.5);
}
.abSlogan::after {
  --char-index: 2;
  --size: clamp(3rem, 25vw, 380px);
  top: 15%;
  left: 100%;
  width: var(--size);
  background-image: url("../images/about/02-1.png");
  transform: translate(-50%, 50%) scale(0.5);
}

.aboutBlock--slogan.--aniShow::after {
  transform: translateY(0) scale(1) rotate(15deg);
  opacity: 1;
}
.aboutBlock--slogan.--aniShow .abSlogan::before {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
.aboutBlock--slogan.--aniShow .abSlogan::after {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}

.aboutTitleSub {
  --iSize: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  padding-left: var(--iSize);
  font: var(--h2);
  letter-spacing: var(--h2_spacing);
  color: var(--mainColor);
}
.aboutTitleSub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--iSize);
  aspect-ratio: 1/4;
  background: url("../images/all/icon/info.svg") no-repeat left top/.6rem auto;
}
.aboutTitleSub[data-sm]::after {
  content: attr(data-sm);
  font: var(--h4);
  letter-spacing: var(--h4_spacing);
  color: var(--txt400);
}
.aboutTitleSub--center {
  padding-left: 0;
  text-align: center;
}
.aboutTitleSub--center::before {
  display: none;
}
.aboutTitleSub--row {
  flex-direction: row;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.aboutBlock--history {
  position: relative;
  overflow: hidden;
  padding-top: 10rem;
  padding-bottom: 0;
}
.aboutBlock--history::before {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7rem;
  background: linear-gradient(
    to top,
    rgb(255 255 255) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}
.aboutBlock--history [class^="decoMoving__"] {
  z-index: 1;
}
.aboutBlock--history .decoMoving__1 {
  left: 90%;
  top: 50%;
}
.aboutBlock--history .decoMoving__2 {
  left: 10%;
  bottom: 0;
}
.abHisIntro {
  --bxW: 700px;
  max-width: var(--bxW);
  margin: 0 auto clamp(3.75rem, 9vw, 6.25rem);
  text-align: center;
}
.abHisIntro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: calc((100% - var(--bxW)) / 2 - 1rem);
  aspect-ratio: 47/58;
  background: url("../images/about/03-cir.png") no-repeat center/contain; /* transform: translateY(-20%); */
}
.abHisIntro__slg {
  margin: 2.5rem 0 1.5rem;
  font: var(--body2);
  letter-spacing: var(--body2_spacing);
  color: var(--txt900);
}

.hisListAreaOut {
  position: relative;
  z-index: 2;
}

.hisListAreaOut .btnStyle {
  z-index: 1;
  position: absolute;
  top: 2rem;
  right: 4rem;
}
.hisListArea {
  overflow: hidden;
  overflow-y: scroll;
  position: relative;
  height: 90vh;
  padding-bottom: 10vh;
}

.hisItems {
  --gap: clamp(1.25rem, 6vw, 5rem);
  --yearW: 50%;
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 var(--yearW);
}
.hisItems::before {
  content: attr(data-year);
  position: absolute;
  top: 0;
  left: 0;
  width: var(--yearW);
  padding-right: var(--gap);
  text-align: right;
  font: var(--deco2);
  letter-spacing: var(--deco2_spacing);
  color: var(--mainColor);
}
.hisItems__bx {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 610px;
  margin-bottom: 2.5rem;
  padding: 1rem var(--gap);
}
.hisItems__bx::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.65rem;
  aspect-ratio: 1;
  background: var(--mainColor);
  border-radius: 100%;
  transform: translate(-50%, -50%);
}
.hisItems__bx::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 1px;
  height: 2.5rem;
  background: var(--gray200);
}
.hisItems__bx .tt {
  margin-bottom: 0.5rem;
  font: var(--deco4);
  letter-spacing: var(--deco4_spacing);
  color: var(--prDark);
}
.hisItems__bx .txt {
  margin: 0;
  font: var(--body3);
  letter-spacing: var(--body3_spacing);
  font-weight: 400;
  color: var(--txt600);
}

.aboutBlock--business {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 60vw;
}
.aboutBlock--business::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../images/about/04-bg.png) no-repeat left bottom/100% auto;
  animation: dotMoving 3s cubic-bezier(0.5, 0, 0.5, 1) 0.5s both infinite;
  pointer-events: none;
}
.abBusiness {
  display: flex;
  align-items: center;
  width: 50%;
  height: 100%;
  margin-left: var(--ftMargin);
  padding-left: var(--ftPadding);
}
.abBusiness__bx {
}
.abBusiness__bx.--infoBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2.25rem, 3vw, 3rem);
}
.abBusiness__bx.--infoBox .aboutTitleSub {
  margin-bottom: 0;
}
.abBusiness__bx.--infoBox p {
  margin-bottom: 0;
}
.abBusiness__bx.--infoBox .btnStyle {
  /* margin-top:1rem; */
}
.abBusiness__bx.--picBox {
  position: absolute;
  right: 0;
  top: 50%;
  width: 50vw;
  transform: translate(20%, -50%);
} /*======================RWD======================*/
.abBusiness__bx.--picBox::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(100px, 13vw, 180px);
  aspect-ratio: 1;
  background: url("../images/index/cardSell-deco.png") no-repeat center/contain;
  transform: rotate(-15deg) translate(-50%, 15%);
}
.abBusiness__bx.--picBox img {
  width: 100%;
}

.aboutBlock--join {
  position: relative;
  padding-top: 0;
  padding-bottom: 10rem;
}
.abJoin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 var(--ftMargin);
  padding: 0 var(--ftPadding);
  gap: clamp(2.25rem, 8vw, 6.75rem);
}
.aboutBlock--join::before,
.aboutBlock--join::after,
.abJoin::before {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  background-position: center;
  background-size: contain;
  animation: decoMoving 3s cubic-bezier(0.5, 0, 0.5, 1)
    calc(0.75s * var(--char-index)) both infinite;
}
.aboutBlock--join::before {
  --char-index: 1;
  --size: clamp(6.125rem, 20vw, 11.5rem);
  bottom: 0;
  left: 0;
  width: var(--size);
  background-image: url("../images/index/deco_ball02.png");
  background-repeat: no-repeat;
}
.aboutBlock--join::after {
  --char-index: 2;
  --size: clamp(6.125rem, 20vw, 11.5rem);
  top: 0;
  right: 0;
  height: 130%;
  aspect-ratio: 35/48;
  background-image: url("../images/about/05-1.png");
  background-repeat: no-repeat;
  z-index: -1;
}
.abJoin::before {
  --char-index: 3;
  --size: clamp(7rem, 20vw, 11.5rem);
  top: -2rem;
  left: calc(var(--size) / 1.75 * -1);
  width: var(--size);
  background-image: url("../images/index/deco_ball08.png");
  background-size: contain;
}
.abJoin__bx {
  width: calc(50% - var(--ftPadding));
}
.abJoin__bx.--picBox {
}
.abJoin__bx.--infoBox {
  /* display:flex; */ /* align-items:center; */
}

/*====MIN====*/
@media screen and (min-width: 769px) {
  /* !769===共用 */
  .br--mb {
    display: none;
  }

  /* !769===首頁KV */
  .indexKV__slogan {
    top: 25%;
  }
}

@media screen and (min-width: 992px) {
  /* !992-回頂端 */
  #goTop:hover {
    color: var(--mainColor);
  }
  #goTop:hover img {
    transform: translateY(-1rem);
  }

  /* !992-選單*/
  .navbar {
    gap: 2rem;
  }
  .navbar .navbar__block--nav {
    display: block;
  }
  .navbar-nav .nav-link {
    padding: 1rem;
  }
  .navbar-nav .nav-link:hover {
    color: var(--mainColor);
  }
  .navLinkIcon:hover {
    border-color: var(--mainColor);
  }

  /* !992-選單下拉開合 */
  .dropdown-menu {
    --color: #2b2b2b;
  }
  .dropdown-item:focus,
  .dropdown-item:hover {
    background: transparent;
    color: var(--txtBrand) !important;
  }
  .dropdown .dropdown-menu,
  .dropdown-menu__box__box {
    pointer-events: none;
    opacity: 0;
    z-index: -1;
    position: absolute;
    display: block;
    min-width: 200px;
    padding: 0.5rem;
    border-radius: 1rem;
    border: none;
    background: #fff;
    box-shadow: var(--shadowBtn);
    -webkit-transition: var(--transition);
    transition: allvar(--transition);
  }
  .dropdown .dropdown-menu {
    left: 0;
    top: 100%;
    -webkit-transform: translate(-50%, -2rem);
    transform: translate(0, -2rem);
  }
  .dropdown--isOpen .dropdown-menu {
    pointer-events: auto;
    opacity: 1;
    z-index: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  .dropdown-menu__box {
    position: relative;
  }
  .dropdown-menu__box__box .dropdown-item {
    color: var(--txt400);
  }
  .dropdown-menu__box__box {
    transform: translateX(-1rem);
    top: 0;
    left: 100%;
  }
  .dropdown-menu__box--isOpen .dropdown-menu__box__box {
    opacity: 1;
    z-index: 1;
    transform: translateX(1.25rem);
    pointer-events: auto;
  }

  /* !992-漢堡選單 */
  .menuSiteMap {
    display: flex;
    gap: 2rem;
  }
  .menuSiteMap__head {
    width: 150px;
  }
  .menuBig {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .menuBig__block .navLinkPic {
    height: 18px;
  }
  .menuBig__block .dropdown-menu__box--isOpen .dropdown-menu__box__box {
    transform: translateX(0);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .menuBig__block .dropdown-menu {
    display: block;
    position: absolute;
    left: calc(100% + 1px);
    top: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-1rem);
    transition: var(--transition);
  }
  .menuBig__block--open1 .dropdown-menu {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  .nav-item:hover .navLinkPic,
  .menuBig__block:hover .navLinkPic {
    background-image: var(--activeImg);
  }

  /*!992-首頁:hover*/
  .newsCard__item:hover .picBox,
  .cardsListLink:hover .picBox {
    box-shadow: var(--shadowCard_hover);
  }
  .cashbacksCard__item:hover,
  .cashbacksCard__item:hover .picBox {
    box-shadow: var(--shadowCard_hover);
  }

  /* !992-快速服務 */
  .fastSv {
    position: fixed;
    right: 0;
    top: 10rem;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    transform: translateX(100%);
  }
  .fastSv.fastSv--open {
    transform: translateX(0);
  }
  .fastSv__title:hover .fastIcon__pic {
    -webkit-transform: rotate(-90deg) translateY(-0.25rem);
    transform: rotate(-90deg) translateY(-0.25rem);
  }
  .fastSv--open .fastSv__title:hover .fastIcon__pic {
    -webkit-transform: rotate(90deg) translateY(-0.25rem);
    transform: rotate(90deg) translateY(-0.25rem);
  }
  .fastSvBtn:hover .fastSvBtn__img {
    border-color: var(--mainColor);
  }
  .fastSvBtn:hover .fastSvBtn__img__pic {
    -webkit-filter: grayscale(0) brightness(1);
    filter: grayscale(0) brightness(1);
  }
  .fastSvBtn:hover .fastSvBtn__title {
    color: var(--mainColor);
  }

  /*頁碼*/
  .pagination a:hover {
    color: var(--mainColor);
  }

  /* !992-共用：關鍵字搜尋 */
  .searchKeyWord:not(.--isOpen) {
    display: none;
  }

  /* !992-footer */
  .ftNuvBody__txt .txt:hover {
    color: var(--mainColor);
  }
}

@media screen and (min-width: 1024px) {
  /* !1024===首頁KV */
  .indexKV {
    min-height: 720px;
    max-height: 720px;
  }
  .indexKV__slogan {
    top: 15%;
  }
}

@media screen and (min-width: 1441px) {
  /* !1441===首頁KV */
  .indexKV {
    min-height: 1024px;
    max-height: 1024px;
  }
}

@media screen and (min-width: 1681px) {
  /* !1681===首頁-最新卡片 */
  .cardsList .slick-list {
    padding-left: 35%;
    padding-right: 35%;
  }
}

/*====MAX====*/
@media screen and (max-width: 1480px) {
  /* !1480===icash2.0>卡別介紹 */
  .cardSlick__item .smTxt {
    min-height: calc(3em * 1.5);
  }
}
@media screen and (max-width: 1280px) {
  /* !1280 首頁-最新卡片 */
  .blockHeight--ixCards .slick-controls {
    right: 0;
  }

  /* !1280===卡博館 */
  .cardLb {
    grid-template-columns: repeat(3, 1fr);
  }

  /* !1280===自動加值 */
  .addCashTb {
    text-align: left;
    margin-bottom: 7.5rem;
  }
  .addCashTb__head {
    display: none;
  }

  .addCashTb__body {
    --tb-gap: 0.75rem;
  }
  .addCashTb__body .tr {
    flex-direction: column;
  }
  .addCashTb__body .tr + .tr {
    margin-top: 3.5rem;
    border-top: none;
  }

  .addCashTb__body .td__bx,
  .addCashTb__body .td__bx .tdBox,
  .addCashTb__body .td {
    flex: inherit;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 0;
  }

  .addCashTb__body .td:has(:not(.tdBox--tt)) {
    padding: 0 0.75rem;
  }
  .addCashTb__body .tdBox {
    min-height: inherit;
    justify-content: flex-start;
  }
  .addCashTb__body .tdBox::before {
    content: attr(data-name);
    position: static;
    display: block;
    width: 100%;
    font: var(--body2);
    letter-spacing: var(--body2_spacing);
  }
  .addCashTb__body .tdBox--tt {
    padding: 0.25rem;
    font: var(--body2);
    letter-spacing: var(--body2_spacing);
    background: var(--mainColor);
    color: #fff;
    width: 100%;
    text-align: center;
    border-radius: var(--tb-radius);
  }
  .addCashTb__body .tdBox .icon--no {
    width: auto;
    aspect-ratio: inherit;
    background-image: inherit;
  }
  .addCashTb__body .tdBox .icon--no::before {
    content: "無";
  }
}

@media screen and (max-width: 991px) {
  :root {
    /******************************** Head ********************************/
    --h1: 700 1.75rem/150% var(--fontZH);
    /* 主標題 */
    --h1_spacing: 2px;
    --h2: 700 1.5rem/135% var(--fontZH);
    /*副標題*/
    --h2_spacing: 0.03rem;
    --h3: 700 1.125rem/150% var(--fontZH);
    /*次要標題*/
    --h3_spacing: 2px;
    --h4: 500 1rem/135% var(--fontZH);
    /*小標題*/
    --h4_spacing: 0.02rem;
    /*2px*/
    --h5: 700 1rem/150% var(--fontZH);
    /*分類標題*/
    --h5_spacing: 0px;
    /******************************** Shadow & Border ********************************/
    --shadowCard_m: -0.125rem 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    --shadowCard_hover_m: -0.125rem 0.25rem 0.5rem rgba(243, 109, 32, 0.25);
  }

  /* !991===全頁佈局*/
  .container {
  }

  /* !991===按鈕*/
  .btnStyle {
    padding: 0.75rem 1.25rem;
  }
  .btnStyle--back {
    padding-right: 1.75rem;
  }

  /* !991===麵包屑*/
  .breadCrumbsBlock {
    padding-left: var(--containerPadding);
    padding-right: var(--containerPadding);
  }

  /* !991===共用：備註說明 */
  .remarkBox {
    margin-top: 1.25rem;
  }

  /* !991===表格樣式 */
  .tableStyle {
    margin-bottom: 3rem;
  }

  /* 側選單 */
  .sideNavSub--pc {
    display: none;
  }
  .sideNavSub--mb {
    display: block;
  }

  /* !991===滑動次選單_subNav.php */
  .subNav {
    margin-bottom: 2.25rem;
  }
  .subNav__item {
    padding: 0.5rem 1.25rem;
  }

  /* !991===側選單 */
  .sideNav {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .sideNavLink {
    justify-content: center;
    padding: 0.25rem 0.75rem;
    background: var(--gray200);
    border-radius: 3em;
  }
  .sideNav__item:has(.sideNavSub) .sideNavLink::after {
    display: none;
  }
  .sideNav__item--active .sideNavLink {
    background: var(--prLight);
  }

  /* !991內頁共用--架構 */
  .blockHeight--pageOutside {
    --aside-w: 100%;
    --gap: 2.5rem;
  }
  aside {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
    float: none;
    margin-bottom: var(--gap);
  }
  aside + main {
    width: 100%;
    padding-left: 0;
  }

  /*!991-快速服務*/
  .fastSv {
    position: fixed;
    bottom: 1rem;
    right: 4vw;
  }
  .fastSv__title {
    position: static;
    border-radius: 100%;
    width: 56px;
    height: 56px;
  }
  .fastSv__title .txt {
    display: none;
  }
  .fastSv__title .fastIcon--pc {
    display: none;
  }
  .fastSv__title .fastIcon--mb {
    display: block;
  }
  .fastSv__content {
    pointer-events: none;
    opacity: 0;
    border-radius: 1.5rem;
    position: absolute;
    bottom: 100%;
    right: 0;
    width: calc(100vw - 8vw);
    margin-bottom: 1rem;
    padding: 0.75rem 1rem 1rem;
    box-shadow: var(--shadowBtn);
  }
  .fastSvTab__list__item {
    padding: 0.5rem;
  }
  .fastSvTab__content__box {
    max-height: 180px;
    gap: 0.75rem;
  }
  .fastSvBtn {
    text-align: center;
    width: calc((100% - 0.75rem) / 3);
  }
  .fastSvBtn__img {
    height: 40px;
  }
  .fastSvBtn__img__pic {
    padding: 0.5rem;
  }
  .fastSv--open .fastSv__content {
    opacity: 1;
    pointer-events: auto;
  }
  .fastSv--open .fastSv__title {
    background: var(--mainColor);
  }
  .fastSv--open .fastIcon--mb {
    filter: brightness(10);
  }

  /* 選單 */
  .navbar {
    padding: 0.75rem var(--containerPadding);
  }
  .navbar__block--brand img {
    height: 35px;
  }

  /* 漢堡選單 */
  .menuToggle img {
    width: 45px;
  }
  .menuSiteMap {
    left: 0;
    top: 0;
    right: 0;
    border-radius: 0;
    height: 100dvh;
    max-height: 100vh;
    padding: 1rem 1rem 4rem;
    display: flex;
    flex-direction: column;
  }
  .menuSiteMap__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
  }
  .menuSiteMap__body {
    overflow-y: auto;
    flex: 1 1 auto;
    height: 100vh;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.25rem 4rem;
  }
  .menuToggle--isOpen {
    display: block;
  }
  .menuBig .nav-link {
    width: 100%;
    padding-right: 1.5rem;
    border-radius: 10px;
    background: var(--gray100);
    justify-content: space-between;
  }
  .menuBig__block {
    margin-bottom: 0.5rem;
  }
  .menuBig__block:last-child {
    padding-bottom: 3rem;
  }
  .menuBig__block .navLinkPic {
    margin-left: 0.5rem;
    background-image: var(--activeImg);
  }
  .menuBig__block .dropdown-menu {
    padding: 1.25rem 0.75rem;
    gap: 0.5rem;
    position: static;
    display: none;
    background: transparent;
    border-right: solid 1px #eee;
  }
  .menuBig__block .dropdown-menu .dropdown-item {
    color: var(--txt400);
  }
  .dropdown-item:hover {
    background: inherit !important;
    color: var(--txt800);
  }
  .dropdown-item:focus {
    background: inherit !important;
    color: var(--txt800);
  }
  .dropdown-menu__box > .dropdown-item {
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: solid 1px var(--prLight);
  }
  .dropdown-menu__box__box > .dropdown-item {
    padding-left: 3rem;
    color: var(--txt400);
    font-weight: 375;
    font-size: 0.875rem;
  }
  .dropdown-menu__box--hasSubmenu .dropdown-item::after {
    background-image: var(--icon_plus_black);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: var(--transition);
  }
  .dropdown-menu__box--hasSubmenu.dropdown-menu__box--isOpen
    .dropdown-item::after {
    background-image: var(--icon_minus_black);
  }
  .dropdown-menu__box--hasSubmenu.dropdown-menu__box .dropdown-menu__box__box {
    display: none;
    padding: 0.5rem 0;
  }
  .menuBig .nav-link.dropdown-toggle::after {
    transform: rotate(45deg);
  }
  .menuBig__block.menuBig__block--open1 .dropdown-toggle::after {
    transform: rotate(-135deg);
    border-color: #333;
  }
  .menuBig__block.menuBig__block--open1
    .dropdown-menu__box--isOpen
    > .dropdown-item {
    color: var(--mainColor) !important;
  }

  /* 選單搜尋 */
  .navbarSearch--pc {
    display: none;
  }
  .navbarSearch--mb {
    display: block;
    margin-bottom: 1rem;
    height: 3rem;
    min-height: inherit;
  }
  .navbarSearch--mb .navbarSearch__input {
    position: static;
    width: 100%;
    opacity: 1;
    transform: translateX(0);
    pointer-events: inherit;
  }
  .navbarSearch--mb .navbarSearch__input .btnGo {
    opacity: 1;
  }

  /* 首頁KV */
  .indexKV {
    min-height: inherit;
    height: 55dvh;
  }
  .indexKV__slogan {
    transform: translateY(30%);
  }

  /* !===991首頁-卡片介紹公告 */
  .blockHeight--cardSellPost {
    padding-left: 10vw;
    padding-right: 10vw;
  }
  .cardSellBox__infor .infoBox__txt {
    font: var(--h4);
    letter-spacing: var(--h4_spacing);
  }
  .cardSellPost__item {
    flex-wrap: wrap;
    gap: 0;
  }
  .cardSellPost__item .infoBox {
    width: 100%;
    order: inherit;
    padding: 2.5rem 2rem 5rem;
  }
  .cardSellPost__item .picBox {
    width: 100%;
  }

  /* 首頁-銀行優惠 */
  .cashbacksCard {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  /* 首頁-最新活動 */
  .newsCard.slickCommone {
    margin-right: -1.25rem;
  }
  .newsCard:not(.slickCommone) {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem calc(var(--margin) * 2);
  }

  /* 內頁共用--banner */
  .pageBanner .container-fluid {
    margin: 0;
    padding: var(--ftPadding-y) var(--containerPadding);
  }

  /* 內頁共用--架構 */
  .blockHeight--pageOutside {
    --gap: 1rem;
    padding: 1.5rem var(--containerPadding) var(--ftPadding-y);
  }
  .blockHeight--pageOutside > .container {
    padding-left: 0;
    padding-right: 0;
  }

  /* !===icash pay>特色介紹與App下載 */
  .iPaySlogan .mjTxt {
    font: var(--h1);
    letter-spacing: var(--h1_spacing);
  }
  .slogan__summary {
    font: var(--body1);
    letter-spacing: var(--body1_spacing);
  }
  .icashPayFeature {
    flex-direction: column;
    gap: 2.5rem;
  }
  .icashPayFeature__box--pic {
    width: 100%;
    max-width: 450px;
  }
  .icashPayFeature__box--info,
  .icashPayFeature--reverse .icashPayFeature__box--info {
    padding: 0;
  }
  .iPaySlogan .subInfo__txt {
    gap: 0.5rem;
  }
  .remarkBox--icash-pay p {
    margin-bottom: 0.5rem;
  }

  /* !991===共用：合作店家 */
  .storeCard {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  body:has(.sidebar) .storeCard {
    grid-template-columns: repeat(2, 1fr);
  }

  /* !991===共用：關鍵字搜尋 */
  .searchKeyWordToggle {
    display: none;
  }

  /* !991===國外轉帳>匯兌說明 */
  .foreignList {
    gap: 2.25rem;
  }
  .foreignBlock {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
  }
  .foreignBlock__box.infoBox {
    padding: 1.25rem 0.5rem;
  }
  .foreignBlock__box__txt {
    padding-left: 0;
  }

  /* !991===手機 icash2.0 */
  .NFCStep {
    flex-direction: column;
    max-width: 480px;
    margin: auto;
  }
  .NFCStep__bx {
    padding-bottom: var(--gap);
  }
  .NFCStep__bx:not(:last-child)::before {
    width: 100%;
    height: 1px;
    right: 0;
  }
  .appbtn {
    display: flex;
    gap: 0.5rem;
  }
  .appbtn a {
    flex: 1;
  }
  .appbtn a img {
    width: 100%;
  }

  /* !991===關於我們 */
  .aboutBlock--kv:has(.logoImg.fixed) .aboutKv__img {
    z-index: 3;
    opacity: 1;
    width: 95%;
  }
  .aboutBlock--kv::after {
  }
  .aboutKV__dot {
    background-image: url(../images/about/01-kv_bg.png),
      url(../images/about/01-kv_bg.png);
    background-size: auto 80%, auto 100%;
    background-position: 0% 90%, 47% 40%;
    background-repeat: no-repeat;
  }
  .aboutKv {
    flex-direction: column;
    padding-left: 0;
  }
  .aboutKv__txt {
    --logoW: 90vw;
    width: 100%;
    padding-right: 0;
  }
  .aboutKv__txt .logoImg {
    top: calc(3rem + var(--topP));
    left: 50%;
    transform: translateX(-50%);
  }
  .aboutKv__txt .logoImg.fixed {
    transform: translate(-50%, -50%);
  }
  .aboutKv__txt .logoImg.moveUp {
    top: 3rem;
    transform: translate(-50%, 0);
  }
  .aboutKv__txt .infoBox {
    position: static;
    padding-top: 1.5rem;
    padding-left: 6vw;
  }
  .aboutKv__txt .btnStyle {
    margin: 3rem auto;
  }
  .aboutKv__txt .scrollLink {
    display: none;
  }
  .aboutKv__img {
    width: 70%;
    max-width: 700px;
  }

  .aboutBlock--slogan {
    overflow: visible;
    padding-top: 0 !important;
    padding-bottom: 20rem !important;
  }
  .aboutBlock--slogan::after {
    top: -23vw;
    left: 52%;
  }
  .aboutBlock--slogan.--aniShow .abSlogan::before {
    right: inherit;
    left: 0;
    top: -8vw;
  }
  .aboutBlock--slogan.--aniShow .abSlogan::after {
    left: inherit;
    right: -1.75rem;
    top: -5vw;
  }

  .aboutBlock--history {
    margin-top: -6rem;
    padding-top: 0 !important;
  }

  .abHisIntro {
  }
}

@media screen and (max-width: 768px) {
  /*!768===全頁佈局*/
  .--pc,
  table.--pc {
    display: none;
  }
  .--mb {
    display: block;
  }
  table.--mb {
    display: table;
  }
  .container-fluid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* !768===按鈕*/
  .btnWrap .--full {
    flex: inherit;
    width: 100%;
  }

  /* !768===共用 */
  .br--mb {
  }
  .br--mb--no {
    display: none;
  }

  /* !======表格/欄位 */
  .inputGroup__box--flex .input--w100-mb {
    width: 100%;
    flex: inherit;
  }
  .inputGroup__box--flex .input--flex1-mb {
    width: auto;
    flex: 1;
  }

  /* !768===內頁共用--banner */
  .bnTitle__sub {
    font: var(--body4);
    letter-spacing: var(--body4_spacing);
  }

  /* !768===共用-列表card */
  .infoBox .hashtag {
  }

  /* !===768首頁-卡片介紹公告 */
  .blockHeight--cardSellPost .container {
    padding: 0;
  }
  .cardSellPost {
    --margin: 1rem;
    margin-left: 0;
    margin-right: 0;
  }
  .blockHeight--cardSellPost .container .slick-controls {
    bottom: 2rem;
    left: 2rem;
  }

  /* !===768首頁-頁籤輪撥 */
  .bookmarkNav {
    justify-content: start;
  }
  .bookmarkContent .slick-controls {
    display: none;
  }
  .bookmarkNav__item a {
    padding: 0.5rem 0.75rem;
    word-break: keep-all;
    white-space: nowrap;
  }

  /* !===768標題 & 內頁標題Head */
  .titleHead {
    flex-direction: column;
    margin-bottom: 2rem;
    gap: 1.25rem;
  }
  .subTitle {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
  }

  /* !===768內頁標題Head */
  .innerHeadBar {
    /* margin-bottom:2.25rem; */
  }
  .innerHeadBar__box {
    width: 100%;
  }
  .innerHeadBar__title {
    width: 100%;
  }
  .innerHeadBar .bookmarkNav {
    flex: 1;
    width: 100%;
    overflow-x: scroll;
  }
  .subHeadBar {
    padding: 0 0.75rem;
  }
  .innerHeadBar:has(.formSelect--innerHeadBar) .bookmarkNav {
    width: auto;
  }
  .innerHeadBar .formSelect {
    flex: 1;
  }
  .innerHeadBar .searchKeyWordArea {
    width: 100%;
  }
  .innerHeadBar .searchKeyWord {
    width: 100%;
  }
  .formSelect--innerHeadBar {
    flex: 1;
  }

  /* !===768首頁-特點 */
  .blockHeight--ixFeatures {
    padding-top: 0.5rem;
  }
  .ixFeatures {
    padding-top: 0;
  }
  .ixFeatures__top .kvPic--title,
  .ixFeatures__top .kvPic--phone {
    text-align: center;
    position: static;
    transform: none;
  }
  .ixFeatures__top .kvPic--phone img {
    aspect-ratio: 5/4;
    object-fit: cover;
    object-position: center top;
  }
  .ixFeatures__bottom {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem;
  }
  .ixFeaturesCard {
    flex-direction: row;
    text-align: left;
    padding: 0.75rem 1rem;
  }

  /* !===768首頁-最新卡片 */
  .blockHeight--ixCards {
    --titleheadbottom: 2rem;
    padding-bottom: 0;
  }
  .cardsList {
    --margin: 0.625rem;
    padding-left: var(--margin);
  }
  .blockHeight--ixCards .btnWrap {
    margin-top: 2rem;
    margin-bottom: 0;
  }

  /* !===768首頁-銀行優惠 */
  .blockHeight--ixCashbacks {
    padding-top: 10rem;
  }
  .cashbacksCard .slick-list {
    padding-left: 0;
    padding-right: 4.25rem;
  }
  .blockHeight--ixCashbacks .btnWrap {
    margin-top: 0.5rem;
  }

  /* 首頁-訊息專區 */
  .columnsList {
    padding: 0;
  }
  .columnsList__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-right: 0;
  }
  .columnsList__item::after {
    display: none;
  }
  .columnsList__item .tt {
    height: auto;
    max-height: 3em;
    -webkit-line-clamp: 2;
  }

  /* 首頁-最新活動 */
  .blockHeight--ixNews .slick-list {
    padding-right: 25vw;
  }
  .newsCard:not(.slickCommone) {
    grid-template-columns: repeat(1, 1fr);
  }

  /* !768===表格樣式 */
  .tableStyle--pc {
    display: none;
  }
  .tableStyle--mb {
    display: table;
  }
  .tableStyle tbody th {
    width: 60px;
  }
  .tableStyle th {
    padding: 0.5rem 0.75rem;
  }
  .tableStyle td {
    padding: 1rem 0.75rem;
  }
  .thBox {
    min-height: 2rem;
  }
  .tdBox {
    min-height: 5rem;
    align-items: center;
  }
  .tableStyle td,
  .tdBox--tt {
    font: var(--body4);
    letter-spacing: var(--body4_spacing);
  }
  .tdBox--tt {
    font-weight: 700;
  }

  /* !768===使用者帳戶類別 p4_2_1_1 */
  .tableStyle--userType th:nth-child(1) {
    width: 30%;
  }
  .tableStyle--userType th:nth-child(2) {
    width: 35%;
  }
  .tableStyle--userType th:nth-child(3) {
    width: 35%;
  }

  /* !768===共用：步驟教學 */
  .teachingBlock {
    padding-top: 0;
  }
  .teachingBlock__box {
    float: inherit;
    width: 100%;
  }
  .teachingSteps__arrow {
    display: block;
  }
  .teachingSteps {
    margin: 1.5rem 0 1rem;
    padding: 0 2rem;
  }
  .teachingStepsList {
    flex-direction: row;
    padding: 0 0.5rem 0.5rem;
    margin: 0;
    overflow-x: scroll;
  }
  .teachingStepsList::-webkit-scrollbar {
    height: 0.25rem;
  }
  .teachingStepsList::-webkit-scrollbar-track {
    background: var(--gray200);
  }
  .teachingStepsList::-webkit-scrollbar-thumb {
    background: var(--gray400);
    border-radius: 5px;
  }
  .teachingStepsList.--scroll {
    overflow: hidden;
  }
  .teachingSteps__item {
    padding: 0;
    box-shadow: none;
  }
  .teachingSteps__item.active {
    box-shadow: none;
  }
  .teachingSteps__item .teachingSteps__item__body {
    display: none !important;
  }
  .teachingScreen__item .infoBox {
    display: block;
  }
  .teachingSteps__item .screenName::before {
    width: 2.325rem;
  }
  .teachingSteps__item .screenName__txt {
    display: none;
  }
  .teachingScreen__item .screenName {
  }

  /* !768===共用：合作店家 */
  .storeCard {
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
  }
  body:has(.sidebar) .storeCard {
    grid-template-columns: repeat(1, 1fr);
  }
  .storeCard__item {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
  }
  .storeCard__item .picBox {
    padding: 1.25rem;
  }
  .storeCard__item .infoBox {
    gap: 0.25rem;
  }
  .storeCard__item .infoBox__name {
    font: var(--body1);
    letter-spacing: var(--body1_spacing);
  }

  /* !768===使用範圍>代收代售 */
  .tableStyle--p5_1 td:nth-child(1),
  .tableStyle--p5_1 td:last-child,
  .tableStyle--p5_1 td:nth-last-child(2) {
    width: auto;
    min-width: inherit;
  }
  .tableStyle--p5_1.table2 {
    text-align: center;
  }

  /* !768===常見問題 */
  .faqCard__item {
    padding: 1.5rem;
    border-radius: 0.5rem;
  }
  .faqCard__item::after {
    display: none;
  }

  /* !768===點數專區 */
  #points_shop {
    margin-top: 2.5rem;
  }

  /* !768===國外轉帳>最新匯率表 */
  .tableStyle--p4_3_3 td:nth-child(1) {
    width: auto;
  }
  .tableStyle--p4_3_3 td:nth-child(2) {
    width: 30%;
  }
  .tableStyle--p4_3_3 .tdBox {
    min-height: 2.25rem;
  }
  .tableStyle--p4_3_3 td::after {
    display: none;
  }
  .tableStyle--p4_3_3 .tdBox--flag {
    padding-left: 0;
  }
  .tableStyle--p4_3_3 .tdBox--rateNum {
    padding-right: 0;
  }

  /* !768===合作銀行 */
  .bankCard {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
    margin-top: 1.5rem;
  }
  .bankCard__item .picBox {
    box-shadow: var(--shadowCard_m);
  }
  .bankCard__item .picBox__name {
    font: var(--btnM-zh);
    letter-spacing: var(--btnM-zh_spacing);
  }
  .bankCard__item .infoBox {
    margin-top: 0.5rem;
  }
  .bankCard__item .infoBox__name {
    font: var(--btnS-zh);
    letter-spacing: var(--btnS-zh_spacing);
  }

  /* !768===合作銀行>各銀行連結帳戶須知 $p4_4_1_1 */
  .accordionList {
    gap: 0.5rem;
  }
  .accordionList__box {
    padding: 0;
  }
  .accordionList__box__header {
    padding: 0.75rem;
    font: var(--body4);
    letter-spacing: var(--body4_spacing);
  }
  .accordionList__box__body {
    padding: 0 1.25rem 1rem;
  }

  /* !768===顧客服務 */
  .containerInfo {
    margin-bottom: 2.25rem;
  }
  .formArea__block {
    gap: 2.25rem;
  }
  .formArea__block + .formArea__block {
    margin-top: 2.25rem;
  }

  /* !768======表格/欄位 */
  .inputGroup__box {
    position: relative;
  }
  .inputGroup__box--flex {
    --gap-x: 1rem;
    --gap-y: 1rem;
  }

  /* !768===上傳 */
  .filesBox {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .filesBox__item {
    flex: inherit;
    width: 100%;
  }
  .filesBox__item--btn {
    width: auto;
  }
  .filesBox__item__img {
    flex-direction: column;
  }

  /* !768===icash Pay APP 使用說明>乘車碼 */
  .tableStyle--ridecode td {
    font: var(--body3);
    font-weight: 400;
  }
  .tableStyle--ridecode .tdBox--tt {
    font: var(--body2);
  }

  /* !768===頁碼*/
  .pagination {
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 2.25rem 0;
    font-size: 1rem;
  }
  .pagination a {
    width: 2.25rem;
    font: var(--body2);
    letter-spacing: var(--body2_spacing);
  }
  .pagination .arrow a {
    width: 2rem;
  }

  /* !768===popup */
  .popup--big .popup__inner {
    padding-bottom: 1.75rem;
  }

  /* !768===API步驟stepsList */
  .stepsList {
    padding: 0 0.75rem;
  }
  .stepsList__item .txt {
    display: none;
  }

  /* !768===行銷工具登錄>已登錄活動 */
  .lgResList .td:nth-child(1),
  .lgResList .td:nth-child(2),
  .lgResList .td:nth-child(3),
  .lgResList .td:nth-child(4),
  .lgResList .td:nth-child(5) {
    width: inherit;
    flex: inherit;
  }
  .lgResList .td {
    text-align: left;
    padding: 0 0.75rem !important;
  }

  .lgResHead::before {
    content: attr(data-title);
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--mainColor);
    color: #fff;
    text-align: center;
    border-radius: var(--tb-radius);
  }
  .lgResHead .td {
    display: none;
  }
  .lgResBody {
  }
  .lgResBody__item + .lgResBody__item {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
  }
  .lgResBody__item__top {
    position: relative;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 3rem;
  }
  .lgResBody__item__top .td:first-child {
    font-weight: 400;
  }
  .lgResBody__item__top .td:nth-child(n + 2) {
    font: var(--body4);
    letter-spacing: var(--body4_spacing);
  }
  .lgResBody__item__top .td[data-title] {
    display: none;
  }
  .lgResBody__item__top .td[data-title]:before {
    content: attr(data-title) "：";
  }
  .lgResBody__item__top .td:has(.icon--toggle) {
    position: absolute;
    right: 0;
    top: 0;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }
  .lgResBody__item__btm {
    padding-bottom: 0.5rem;
  }

  .lgResBody__item__top.--isOpen .td[data-title] {
    display: block;
  }

  /* !768===卡博館 */
  .cardLb {
    grid-template-columns: repeat(2, 1fr);
  }
  .cardDtInfo__item {
    width: 100%;
  }
  .cardDtInfo + .cardDtInfo {
    border-top: none;
    margin-top: 0;
  }

  /* !768===紅利點數 */
  .floatLy {
    grid-template-columns: 1fr;
  }

  /* !768===icash2.0>卡別介紹 */
  .blockHeight--cardSlick .slick-controls {
    display: none;
  }
  .cardSlick {
    margin-right: 0;
  }
  .cardSlick__item {
    margin-bottom: 1.25rem;
  }
  .cardSlick__item .smTxt {
    min-height: inherit;
  }

  /* !768===手機 icash2.0 */
  .NFCSlick + .slick-controls {
    display: flex;
    justify-content: center;
  }
  .NFCSlick:not(.js-singleSlick) {
    display: none;
  }
  .NFCSlick {
    margin-bottom: 2rem;
  }
  .NFCSlick__bx .tt {
  }

  /* !768===關於我們 */
  .aboutMain {
    margin-bottom: 2.5rem;
  }
  .aboutBlock {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .aboutKv__txt .infoBox {
    padding-top: 0;
  }

  .abGood {
    flex-direction: column;
    max-width: 20rem;
  }
  .aboutBlock--slogan .aboutTitle {
    max-width: 300px;
    margin: 0 auto 1.5rem; /* padding-left:1rem; */ /* padding-right:1rem; */
  }
  .aboutBlock--slogan .decoMoving__1 {
    left: 75%;
    bottom: 10%;
  }
  .aboutBlock--slogan .decoMoving__2 {
    bottom: 0;
  }

  .aboutBlock--history::before {
    bottom: 2.5rem;
  }
  .aboutBlock--history .decoMoving {
    display: none;
  }
  .aboutBlock--history .decoMoving__2 {
    bottom: 2.5rem;
  }
  .abHisIntro::before {
    position: static;
    width: 100%;
    margin-left: calc((var(--ftMargin) + var(--containerPadding)) * -1);
    margin-bottom: 2rem;
  }
  .hisListAreaOut {
    padding-left: var(--containerPadding);
    padding-right: var(--containerPadding);
  }
  .hisListAreaOut .btnStyle {
    display: none;
  }
  .hisListArea {
  }
  .hisItems {
    --yearW: 3.25rem;
    padding-left: calc(var(--yearW) + var(--gap));
  }
  .hisItems::before {
    font: var(--deco4);
    letter-spacing: var(--deco4_spacing);
  }
  .hisItems__bx {
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 1.75rem;
  }
  .hisItems__bx::before {
    top: 0.75rem;
    transform: translate(-50%, 0);
  }
  .hisItems__bx::after {
    top: calc(0.75rem + 0.65rem + 0.5rem);
    bottom: 0;
    height: auto;
  }

  .aboutBlock--business {
    min-height: inherit;
  }
  .abBusiness {
    display: block;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }
  .abBusiness__bx.--picBox {
    position: relative;
    right: inherit;
    top: inherit;
    transform: translateX(10%);
    width: 100vw;
    margin-bottom: 2rem;
  }
  .abBusiness__bx.--infoBox {
  }
  .abBusiness__bx.--infoBox .btnStyle {
    width: 100%; /* margin-top: .25rem; */
  }

  .aboutBlock--join {
    padding-bottom: 5rem;
  }
  .aboutBlock--join::before {
    bottom: -50%;
    background-position: -2rem;
  }
  .aboutBlock--join::after {
    top: 100%; /* right: -4rem; */
    height: 35vw;
    background-position: 3.5rem 0;
  }
  .abJoin::before {
    top: 50%;
  }
  .abJoin {
    justify-content: center;
  }
  .abJoin__bx {
    width: auto;
    text-align: center;
  }
}

@media screen and (max-width: 640px) {
  :root {
    --ftPadding: 0.5rem;
    --ftPadding-y: 2.5rem;
  }

  /* !640===共用：關鍵字搜尋 */
  .searchKeyWord {
    width: 100%;
  }
  .searchNoData {
    height: 270px;
  }

  /* !640===footer */
  footer {
    --body3: 500 1.125rem/150% var(--fontZH);
    --body4: 400 1rem/150% var(--fontZH);
    border-radius: 1.5rem;
    padding: 2rem 1.5rem;
    gap: 2.5rem;
  }
  .ftNuv {
    gap: 3rem;
  }
  .ftBottom {
    gap: 2.5rem;
  }

  /* !640===首頁KV */
  .indexKV__slogan {
    transform: translateY(0);
  }
  .indexKVZone .decoMoving__1 {
    z-index: -1;
    left: 0;
    top: 90%;
    width: 30%;
  }
  .indexKVZone .decoMoving__2 {
    top: 38%;
  }
  .indexKVZone .decoMoving__3 {
    left: 26%;
    top: 17%;
  }
  .indexKVZone .decoMoving__4 {
    right: -20%;
    top: 38%;
    width: 60vw;
  }
  .indexKVZone .decoMoving__5 {
    top: 80%;
    width: 10vw;
  }
  .indexKVZone .decoMoving__6 {
    top: 110%;
    width: 22vw;
  }
  .scrollLink {
    display: none;
  }

  /* !640===首頁-特點 */
  .ixFeatures__bottom {
    grid-template-columns: repeat(1, 1fr);
  }

  /* !640===首頁-卡片介紹 */
  .blockHeight--cardSell {
    --picBox: 100%;
    --infoBox: 100%;
    padding-top: 0;
  }
  .cardSellBox__infor {
    padding: 2.5rem 1.25rem 0;
  }
  .cardSellBox__img {
    margin-left: -2.5rem;
  }
  .blockHeight--cardSell .slick-controls {
    position: static;
    margin-left: 1.25rem;
    margin-top: 1.75rem;
  }
  .decoMoving__icon {
    right: 0;
    bottom: 0;
  }
  .decoMoving--cardSell .decoMoving__1,
  .decoMoving--cardSell .decoMoving__2 {
    display: none;
  }

  /* !===640首頁-卡片介紹公告 */
  .blockHeight--cardSellPost {
    padding-left: 0;
    padding-right: 0;
  }
  .decoMoving--cardSellPost .decoMoving__1 {
    right: -11%;
    top: 85%;
  }

  /* !640===首頁-最新活動 */
  .decoMoving--ixNews .decoMoving__1 {
    bottom: 0;
    left: -5%;
  }

  /* !640===首頁-最新卡片 */
  .decoMoving--ixCards .decoMoving__1 {
    right: -14%;
    top: 5%;
  }
  .blockHeight--ixCards .slick-controls {
    display: none;
  }

  /* !640===首頁-銀行優惠 */
  .decoMoving--ixCashbacks .decoMoving__1 {
    top: 3%;
  }
  .decoMoving--ixColumns .decoMoving__1 {
    left: 90%;
    display: none;
  }
  .decoMoving--ixColumns .decoMoving__3 {
    right: 0;
    top: 65%;
  }
  .decoMoving--ixColumns .decoMoving__4 {
    bottom: 0;
  }
  .decoMoving--ixColumns .decoMoving__5 {
    right: 3%;
    bottom: -5%;
  }
  .decoMoving--ixColumns .decoMoving__6 {
    bottom: 10rem;
  }
  .decoMoving--ixColumns .dotMoving__1 {
    left: 0;
  }

  /* !640===icash2 卡片記名>申請說明 */
  .cardNameList {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* !640===icash 2.0 服務>卡片記名>一般記名 */
  .tableStyle--p3_5 {
  }
  .tdInBx__tt,
  .tdInBx__txt {
    flex: inherit;
    width: 100%;
  }

  /* !640===標題 & 內頁標題Head */
  .innerHeadBar--sub:has(.subNav) .innerHeadBar__title {
    flex: inherit;
  }

  /* !640===卡博館 */
  .cardLb {
    grid-template-columns: repeat(1, 1fr);
  }

  /* !640===網站導覽 */
  .sitemapZone {
    grid-template-columns: repeat(1, 1fr);
  }

  /* !640===關於我們 */
  .aboutBlock--slogan::after {
    --size: clamp(3rem, 18vw, 7rem);
    top: -45vw;
  }
  .aboutBlock--slogan.--aniShow .abSlogan::before {
    --size: clamp(3rem, 45vw, 300px);
    left: 1%;
    top: -15vw;
  }
  .aboutBlock--slogan.--aniShow .abSlogan::after {
    --size: clamp(3rem, 40vw, 300px);
    right: -5vw;
    top: -10vw;
  }
}

@media screen and (max-width: 480px) {
  /* !480===/* 編輯器 */
  .tx01__uploadImg .pc {
    display: none;
  }
  .tx01__uploadImg .mb {
    display: block;
  }

  /* !480===首頁-最新卡片 */
  .cardsList__item {
  }
  .cardsList .slick-list {
    padding-left: 0;
    padding-right: 2.25rem;
  }
  .cardsList .slick-current {
  }
  .cardsList .slick-current .cardsList__item {
    margin-top: 0;
  }
  .cardsList__item .picBox {
    border-radius: 0.5rem;
  }
}