@charset "UTF-8";
/* 儲值頁面主容器 */
.bank-page-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  margin-top: 5%;
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .bank-page-wrapper {
    padding-bottom: 10px;
    margin-top: 7%;
  }
}
@media screen and (min-width: 1280px) {
  .bank-page-wrapper {
    margin-top: 5%;
  }
}

/* Tab 切換按鈕 */
.bank-tabs {
  display: flex;
  max-width: 1286px;
  justify-content: start;
  margin: 0 auto;
}

.bank-tabs .tab-button {
  flex: 1;
  height: 47px;
  max-width: 150px;
  margin-right: 10px;
  background: linear-gradient(180deg, #4c4c4c, #595959 12%, #666 25%, #474747 39%, #2c2c2c 50%, #000 51%, #111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313);
  border: none;
  border-radius: 12px 12px 0 0;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
}
@media screen and (min-width: 768px) {
  .bank-tabs .tab-button {
    font-size: 40px;
    max-width: 260px;
    height: 65px;
  }
}
@media screen and (min-width: 1280px) {
  .bank-tabs .tab-button {
    font-size: 50px;
    max-width: 360px;
    height: 80px;
  }
}

.bank-tabs .tab-button.active {
  background: linear-gradient(180deg, #4c4c4c, #666 3%, #cecece 20%, #fff 52%, #fff), #fff;
  color: #230303;
  text-shadow: none;
  z-index: 2;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255);
}

/* 主要內容區域 */
.bank-content {
  background: transparent;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1280px) {
  .bank-content {
    flex-direction: row;
  }
}
@media screen and (min-width: 1280px) {
  .bank-content.tab-card-exchange {
    flex-direction: column;
  }
}

/* 左側 - 選擇商品區塊 */
.product-section {
  flex: 1;
  min-width: 0;
  position: relative;
  background: linear-gradient(180deg, #ececec, #797979);
  max-height: 450px;
  margin-bottom: 50px;
}
@media screen and (min-width: 576px) {
  .product-section {
    margin-bottom: 64px;
  }
}
@media screen and (min-width: 768px) {
  .product-section {
    max-height: 766px;
  }
}
@media screen and (min-width: 1280px) {
  .product-section {
    margin-bottom: 0;
  }
}
.product-section .section-title {
  position: absolute;
  top: -8%;
  left: 0;
  font-weight: bold;
  color: #fff;
  background-color: #ececec;
  font-size: 20px;
  color: #5c5c5c;
  padding: 8px 40px;
  border-radius: 30px 30px 0px 0px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .product-section .section-title {
    font-size: 36px;
    padding: 22px 40px;
  }
}
@media screen and (min-width: 1280px) {
  .product-section .section-title {
    width: auto;
  }
}
.product-section .product-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 450px;
  overflow: auto;
  padding: 14px;
}
@media screen and (min-width: 768px) {
  .product-section .product-list {
    max-height: 766px;
    gap: 25px;
    padding: 25px;
  }
}
.product-section .product-list::-webkit-scrollbar {
  width: 10px;
}
.product-section .product-list::-webkit-scrollbar-track {
  background: #7b7b7b;
  border-radius: 20px;
}
.product-section .product-list::-webkit-scrollbar-thumb {
  background: #b3b3b3;
  border-radius: 20px;
}
.product-section .product-item {
  box-shadow: 0px 4px 4px #fefbbe inset, 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  background: linear-gradient(0deg, #ffeb75 0%, #fe9c07 100%);
  padding: 0 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: visible;
  width: 100%;
  justify-content: space-between;
  height: 100px;
  min-height: 100px;
  /* 灰階狀態 - 當有選擇商品時，其他商品變灰 */
}
@media screen and (min-width: 768px) {
  .product-section .product-item {
    height: 142px;
    min-height: 142px;
  }
}
.product-section .product-item:hover:not(.grayscale) {
  transform: translateY(-2px);
  box-shadow: 0px 4px 4px #fefbbe inset, 0px 6px 10px rgba(0, 0, 0, 0.3);
}
.product-section .product-item.grayscale {
  filter: grayscale(100%);
  opacity: 0.6;
  cursor: pointer;
}
.product-section .product-item.grayscale:hover {
  filter: grayscale(35%);
  opacity: 0.8;
}
.product-section .product-item .product-left {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-direction: column;
  height: 100%;
}
.product-section .product-item .product-left img {
  max-width: 100%;
  max-height: 93%;
  -o-object-fit: contain;
     object-fit: contain;
}
.product-section .product-item .product-left .product-name {
  font-size: 22px;
  font-weight: bold;
  color: white;
  text-shadow: -1px -1px 0 #934a00, -1px 0px 0 #934a00, -1px 1px 0 #934a00, 0px -1px 0 #934a00, 0px 0px 0 #934a00, 0px 1px 0 #934a00, 1px -1px 0 #934a00, 1px 0px 0 #934a00, 1px 1px 0 #934a00;
  margin-top: -29%;
  margin-left: 0;
}
@media screen and (min-width: 576px) {
  .product-section .product-item .product-left .product-name {
    font-size: 30px;
  }
}
.product-section .product-item .product-right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-section .product-item .product-right .product-price {
  background: #934a00;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  padding: 8px 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #ad792a;
  justify-content: center;
  -webkit-text-decoration: none;
  text-decoration: none;
}
@media screen and (min-width: 576px) {
  .product-section .product-item .product-right .product-price {
    font-size: 32px;
  }
}
.product-section .product-item .product-right .product-arrow {
  width: 33px;
  height: 38px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  box-shadow: #fff;
  flex-shrink: 0;
  display: none;
}
@media screen and (min-width: 768px) {
  .product-section .product-item .product-right .product-arrow {
    display: flex;
  }
}
.product-section .product-item .product-right .product-arrow::after {
  content: "";
  width: 21px;
  height: 21px;
  border-top: 5px solid #934a00;
  border-right: 5px solid #934a00;
  transform: rotate(45deg);
  margin-left: -3px;
}

/* 右側 - 選擇管道區塊 */
.channel-section {
  flex: 1;
  min-width: 0;
  position: relative;
  background: linear-gradient(180deg, #fceabd, #ca984c);
  color: #934a00;
  max-height: 450px;
  padding-right: 0;
  min-height: 287px;
  /* 未選擇商品時，整個管道區塊灰階 */
}
@media screen and (min-width: 768px) {
  .channel-section {
    max-height: 766px;
  }
}
.channel-section--full {
  flex: none;
  width: 100%;
}
.channel-section .section-title {
  position: absolute;
  top: -8%;
  left: 0;
  font-weight: bold;
  color: #fff;
  background-color: #fceabd;
  font-size: 20px;
  color: #69470a;
  padding: 8px 40px;
  border-radius: 30px 30px 0px 0px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .channel-section .section-title {
    font-size: 36px;
    padding: 22px 40px;
  }
}
@media screen and (min-width: 1280px) {
  .channel-section .section-title {
    width: auto;
  }
}
.channel-section.disabled {
  filter: grayscale(100%);
}
.channel-section.disabled .channel-list {
  filter: grayscale(100%);
  opacity: 0.5;
  pointer-events: none;
}
.channel-section.disabled .channel-list.text {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2em;
  margin-top: 14px;
}
.channel-section .channel-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 450px;
  overflow-y: auto;
  padding: 14px;
}
.channel-section .channel-list.text {
  font-size: 21px;
  font-weight: bold;
  line-height: 1.2em;
  padding: 30px;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  width: -moz-max-content;
  width: max-content;
}
@media screen and (min-width: 1280px) {
  .channel-section .channel-list.text {
    font-size: 25px;
  }
}
@media screen and (min-width: 768px) {
  .channel-section .channel-list {
    max-height: 766px;
    gap: 25px;
    padding: 25px;
  }
}
.channel-section .channel-list::-webkit-scrollbar {
  width: 10px;
}
.channel-section .channel-list::-webkit-scrollbar-track {
  background: #7b5121;
  border-radius: 20px;
}
.channel-section .channel-list::-webkit-scrollbar-thumb {
  background: #c6aa71;
  border-radius: 20px;
}
.channel-section .channel-item {
  box-shadow: 0px 0px 11px #fff inset, 0px 4px 4px rgba(0, 0, 0, 0.15);
  border-radius: 40px 10px 40px 10px;
  background: linear-gradient(180deg, #fffbd0 0%, #ffe75d 100%);
  border: 1px solid #fff;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: visible;
  height: 100px;
  min-height: 100px;
  /* 灰階狀態 - 當有選擇管道時，其他管道變灰 */
  /* 2. 背景層設定：負責傾斜的藍色區塊 */
}
@media screen and (min-width: 768px) {
  .channel-section .channel-item {
    height: 142px;
    min-height: 142px;
  }
}
.channel-section .channel-item:hover:not(.grayscale) {
  transform: translateX(3px);
  box-shadow: 0px 0px 11px #fff inset, 0px 6px 8px rgba(0, 0, 0, 0.2);
}
.channel-section .channel-item.grayscale {
  filter: grayscale(100%);
  opacity: 0.6;
  cursor: pointer;
}
.channel-section .channel-item.grayscale:hover {
  filter: grayscale(35%);
  opacity: 0.8;
}
.channel-section .channel-item .channel-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
  z-index: 1;
  top: -11%;
  left: -3%;
  position: absolute;
  width: -moz-max-content;
  width: max-content;
}
@media screen and (min-width: 768px) {
  .channel-section .channel-item .channel-badge {
    left: 10%;
    padding: 2px 13px;
    font-size: 19px;
  }
}
@media screen and (min-width: 1280px) {
  .channel-section .channel-item .channel-badge {
    top: -9%;
  }
}
.channel-section .channel-item .channel-badge img {
  width: 21px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (min-width: 1280px) {
  .channel-section .channel-item .channel-badge img {
    width: 34px;
  }
}
.channel-section .channel-item .channel-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skewX(-15deg);
  background-color: #2fa8ff;
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.channel-section .channel-item .channel-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("/Graphics/Games/Mobile/Bank/item/new/item.png") no-repeat center center;
  background-size: contain;
  padding: 4px;
  flex-shrink: 0;
  height: 100%;
}
.channel-section .channel-item .channel-logo img {
  max-width: 100%;
  max-height: 71%;
  -o-object-fit: contain;
     object-fit: contain;
}
.channel-section .channel-item .channel-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.channel-section .channel-item .channel-info .channel-name {
  font-size: 18px;
  font-weight: bold;
  color: #934a00;
  line-height: 1.2em;
}
@media screen and (min-width: 576px) {
  .channel-section .channel-item .channel-info .channel-name {
    font-size: 24px;
  }
}
.channel-section .channel-item .channel-info .channel-desc {
  font-size: 14px;
  color: #934a00;
  line-height: 1.2em;
}
@media screen and (min-width: 576px) {
  .channel-section .channel-item .channel-info .channel-desc {
    font-size: 18px;
  }
}
.channel-section .channel-item .channel-name {
  flex: 1;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

/* 底部 - 儲值內容與確認購買 */
.purchase-section {
  background: #e8e8e8;
  border-radius: 0 0 15px 15px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #ddd;
}
@media screen and (min-width: 768px) {
  .purchase-section {
    flex-direction: column;
    align-items: stretch;
  }
}
.purchase-section .purchase-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.purchase-section .purchase-content .content-title {
  font-size: 20px;
  line-height: 1.2em;
  font-weight: bold;
  color: #5c5c5c;
  padding: 0 10px;
  padding-bottom: 2px;
}
@media screen and (min-width: 768px) {
  .purchase-section .purchase-content .content-title {
    font-size: 36px;
    padding: 0 32px;
    padding-bottom: 2px;
  }
}
.purchase-section .purchase-content .content-divider {
  width: 100%;
  height: 1px;
  background-color: #5c5c5c;
}
.purchase-section .purchase-content .content-info {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .purchase-section .purchase-content .content-info {
    flex-direction: row;
  }
}
.purchase-section .purchase-content .content-left {
  margin: 7px;
}
@media screen and (min-width: 768px) {
  .purchase-section .purchase-content .content-left {
    margin: 26px;
  }
}
.purchase-section .purchase-content .content-left__label {
  font-size: 17px;
  line-height: 1.2em;
  color: #5c5c5c;
  font-weight: 500;
}
.purchase-section .purchase-content .content-left__label.highlight {
  color: #ff9500;
}
@media screen and (min-width: 768px) {
  .purchase-section .purchase-content .content-left__label {
    font-size: 24px;
  }
}
.purchase-section .purchase-content .content-right {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 4px 20px;
}
@media screen and (max-width: 400px) {
  .purchase-section .purchase-content .content-right {
    padding: 4px;
  }
}
@media screen and (min-width: 768px) {
  .purchase-section .purchase-content .content-right {
    padding: 19px 20px;
  }
}
.purchase-section .purchase-item {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-direction: column;
  padding: 11px 20px;
}
@media screen and (min-width: 1280px) {
  .purchase-section .purchase-item {
    display: flex;
  }
}
.purchase-section .purchase-item img {
  max-width: 100%;
  max-height: 93%;
  -o-object-fit: contain;
     object-fit: contain;
}
.purchase-section .purchase-item .product-name {
  font-size: 30px;
  font-weight: bold;
  color: white;
  text-shadow: -1px -1px 0 #934a00, -1px 0px 0 #934a00, -1px 1px 0 #934a00, 0px -1px 0 #934a00, 0px 0px 0 #934a00, 0px 1px 0 #934a00, 1px -1px 0 #934a00, 1px 0px 0 #934a00, 1px 1px 0 #934a00;
  margin-top: -29%;
  margin-left: 0;
}
.purchase-section .purchase-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
@media screen and (min-width: 768px) {
  .purchase-section .purchase-button {
    flex-direction: column;
    gap: 0;
  }
}
.purchase-section .purchase-button .purchase-total {
  font-size: 24px;
  font-weight: bold;
  color: #7a310a;
  text-align: center;
  line-height: 1.2em;
  width: -moz-max-content;
  width: max-content;
  -webkit-text-decoration: none;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .purchase-section .purchase-button .purchase-total {
    font-size: 40px;
  }
}
.purchase-section .purchase-button button {
  padding: 14.5px 43.5px;
  background: linear-gradient(172deg, #fba609 0%, #ff9d00 36%, #fce25e 100%);
  box-shadow: 0px 2.3333332539px 2.33px #ffca61 inset;
  border-radius: 60px;
  color: #7a310a;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}
@media screen and (max-width: 400px) {
  .purchase-section .purchase-button button {
    padding: 14.5px 30.5px;
  }
}
@media screen and (min-width: 768px) {
  .purchase-section .purchase-button button {
    font-size: 40px;
    padding: 20px 34px;
  }
}
@media screen and (min-width: 1280px) {
  .purchase-section .purchase-button button {
    width: 334px;
    height: 99px;
    font-size: 40px;
  }
}
.purchase-section .purchase-button button:disabled {
  background: linear-gradient(180deg, #d9d9d9 0%, #b3b3b3 100%);
  color: #666;
  cursor: not-allowed;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 提醒您 & 請注意 區塊 */
.notice-section {
  width: 100%;
}
.notice-section .notice-block {
  margin-bottom: 18px;
  background-color: #E7E3DD;
  border-radius: 12px;
  padding: 10px;
}
.notice-section .notice-block:last-child {
  margin-bottom: 0;
}
.notice-section .notice-title {
  font-size: 16px;
  font-weight: bold;
  color: #5c5c5c;
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
  .notice-section .notice-title {
    font-size: 20px;
  }
}
.notice-section .notice-content {
  font-size: 16px;
  line-height: 1.6;
  color: #5c5c5c;
}
@media screen and (min-width: 768px) {
  .notice-section .notice-content {
    font-size: 20px;
  }
}
.notice-section .notice-content p {
  margin: 0 1em;
}
@media screen and (min-width: 768px) {
  .notice-section .notice-content p {
    margin: 0 1.5em;
  }
}
.notice-section .notice-content p:last-child {
  margin-bottom: 0;
}
.notice-section .notice-content .link-highlight {
  color: #2fa8ff;
  text-decoration: underline;
}
.notice-section .notice-content .link-highlight:hover {
  color: #0d8aee;
}

/* 儲值卡兌換 - 步驟區塊 */
.exchange-step {
  max-width: 818px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
  margin-top: -2%;
}
.exchange-step .exchange-header {
  text-align: center;
  margin-bottom: 25px;
}
.exchange-step .exchange-header p {
  font-size: 15px;
  color: #5c5c5c;
  font-weight: bold;
  line-height: 1.2em;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .exchange-step .exchange-header p {
    font-size: 26px;
  }
}
.exchange-step .exchange-form {
  margin: 0 auto;
  width: 100%;
}
.exchange-step .exchange-form .form-row {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  color: #5C5C5C;
  font-size: 16px;
}
@media screen and (min-width: 576px) {
  .exchange-step .exchange-form .form-row {
    flex-direction: row;
    align-items: center;
    font-size: 20px;
  }
}
@media screen and (min-width: 576px) {
  .exchange-step .exchange-form .form-row.form-row--styleB {
    flex-direction: column;
    align-items: flex-start;
    font-size: 20px;
    width: 100%;
  }
}
@media screen and (min-width: 576px) {
  .exchange-step .exchange-form .form-row.form-row--styleB .form-label {
    width: 100%;
  }
}
@media screen and (min-width: 576px) {
  .exchange-step .exchange-form .form-row.form-row--styleB .form-label-sub {
    margin-bottom: 5px;
  }
}
@media screen and (min-width: 576px) {
  .exchange-step .exchange-form .form-row.form-row--styleB .form-radio-group,
  .exchange-step .exchange-form .form-row.form-row--styleB .form-input {
    width: 100%;
  }
}
.exchange-step .exchange-form .form-label {
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  padding: 6px 15px;
  background: #909090;
  border-radius: 16px 16px 0 0;
  min-width: 100px;
  box-shadow: rgba(0, 0, 0, 0.1019607843) 0px 2px 4px;
}
@media screen and (min-width: 576px) {
  .exchange-step .exchange-form .form-label {
    border-radius: 14px 0 0 14px;
    padding: 16px 15px;
  }
}
@media screen and (min-width: 768px) {
  .exchange-step .exchange-form .form-label {
    font-size: 20px;
  }
}
.exchange-step .exchange-form .form-label-sub {
  font-size: 16px;
  color: #5c5c5c;
  min-width: 100px;
  margin-bottom: 5px;
}
@media screen and (min-width: 576px) {
  .exchange-step .exchange-form .form-label-sub {
    margin-bottom: 0;
    min-width: 100px;
  }
}
@media screen and (min-width: 768px) {
  .exchange-step .exchange-form .form-label-sub {
    font-size: 20px;
  }
}
.exchange-step .exchange-form .form-radio-group {
  display: flex;
  gap: 20px;
  padding: 16px 15px;
  background: #fff;
  border-radius: 0 0 5px 5px;
  flex: 1;
  background: #f9f9fa;
  box-shadow: rgba(0, 0, 0, 0.1019607843) 0px 2px 4px;
}
@media screen and (min-width: 576px) {
  .exchange-step .exchange-form .form-radio-group {
    border-radius: 0 5px 5px 0;
  }
}
.exchange-step .exchange-form .form-radio-group .radio-item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.exchange-step .exchange-form .form-radio-group .radio-item input[type=radio] {
  width: 18px;
  height: 18px;
}
@media screen and (min-width: 768px) {
  .exchange-step .exchange-form .form-radio-group .radio-item input[type=radio] {
    width: 20px;
    height: 20px;
  }
}
.exchange-step .exchange-form .form-radio-group .radio-item span {
  font-size: 16px;
  color: #333;
}
@media screen and (min-width: 768px) {
  .exchange-step .exchange-form .form-radio-group .radio-item span {
    font-size: 20px;
  }
}
.exchange-step .exchange-form .form-input {
  flex: 1;
  padding: 15px;
  font-size: 16px;
  border: 1px solid #5C5C5C;
  border-radius: 12px;
  outline: none;
}
.exchange-step .exchange-form .form-input:focus {
  border-color: #fe9c07;
  box-shadow: 0 0 0 2px rgba(254, 156, 7, 0.2);
}
.exchange-step .exchange-form .form-input::-moz-placeholder {
  color: #999;
}
.exchange-step .exchange-form .form-input::placeholder {
  color: #999;
}
@media screen and (min-width: 768px) {
  .exchange-step .exchange-form .form-input {
    font-size: 20px;
  }
}
.exchange-step .exchange-form .form-actions {
  text-align: center;
  margin: 25px 0 15px;
}
.exchange-step .exchange-form .btn-exchange-confirm {
  padding: 12px 10px;
  background: linear-gradient(172deg, #fba609 0%, #ff9d00 36%, #fce25e 100%);
  box-shadow: 0px 2px 2px #ffca61 inset;
  border: none;
  border-radius: 30px;
  color: #7a310a;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .exchange-step .exchange-form .btn-exchange-confirm {
    font-size: 20px;
    padding: 15px 40px;
  }
}
.exchange-step .exchange-form .btn-exchange-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0px 2px 2px #ffca61 inset, 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.exchange-step .exchange-form .form-link {
  text-align: center;
  margin: 20px 0;
}
.exchange-step .exchange-form .form-link .link-agreement {
  font-size: 16px;
  color: #F19917;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
@media screen and (min-width: 768px) {
  .exchange-step .exchange-form .form-link .link-agreement {
    font-size: 20px;
  }
}
.exchange-step .exchange-form .form-link .link-agreement:hover {
  text-decoration: underline;
}
.exchange-step .exchange-form .form-link .link-agreement .icon-doc {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F19917'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 2l5 5h-5V4zM6 20V4h6v6h6v10H6z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .exchange-step .exchange-form .form-link .link-agreement .icon-doc {
    width: 22px;
    height: 22px;
  }
}

/* 同意書彈窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-content {
  background-color: #FFFFFF;
  border-radius: 15px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  position: relative;
  border: 3px solid #934a00;
  border-radius: 65px 20px 65px 20px;
}
@media screen and (min-width: 768px) {
  .modal-content {
    max-width: 550px;
  }
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  background: linear-gradient(180deg, #d86c00, #934a00);
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.modal-close:hover {
  background: linear-gradient(180deg, #ff8787 0%, #e03131 100%);
}
@media screen and (min-width: 1280px) {
  .modal-close {
    width: 56px;
    height: 56px;
    font-size: 60px;
    top: -15px;
    right: -15px;
    border: 3px solid #fff;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 20px 10px;
}
.modal-header .modal-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.modal-header .modal-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.modal-header .modal-title {
  font-size: 22px;
  font-weight: bold;
  color: #a85800;
  margin: 0;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  line-height: 1.2em;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .modal-header .modal-title {
    font-size: 36px;
  }
}

.modal-body {
  padding: 0px 17px;
  font-size: 16px;
  line-height: 1.2em;
  color: #5C5C5C;
  max-height: 52vh;
  overflow-y: auto;
  margin: 0 20px;
  margin-bottom: 25px;
}
.modal-body::-webkit-scrollbar {
  width: 10px;
}
.modal-body::-webkit-scrollbar-track {
  background: #d99c55;
  border-radius: 20px;
}
.modal-body::-webkit-scrollbar-thumb {
  background: #f9c95e;
  border-radius: 20px;
}
@media screen and (min-width: 768px) {
  .modal-body {
    font-size: 20px;
  }
}
@media screen and (min-width: 1280px) {
  .modal-body {
    max-height: 37vh;
  }
}
.modal-body p {
  margin-bottom: 0;
  margin-left: 0;
}

.modal-footer {
  padding: 15px 20px 20px;
  text-align: center;
}
.modal-footer .link-full-agreement {
  font-size: 14px;
  color: #2fa8ff;
  text-decoration: none;
}
.modal-footer .link-full-agreement:hover {
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  .modal-footer .link-full-agreement {
    font-size: 16px;
  }
}

/* 結果區塊 (Loading / Error / Success) */
.result-section {
  padding: 0 20px;
  text-align: center;
  max-width: 816px;
  margin: 0 auto;
  margin-top: -3%;
}
.result-section.size2 {
  max-width: 1220px;
}
.result-section .result-content {
  max-width: 1220px;
  margin: 0 auto;
}
.result-section .result-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  line-height: 1.2em;
  margin-bottom: 12px;
}
@media screen and (min-width: 768px) {
  .result-section .result-title {
    font-size: 52px;
    margin-bottom: 20px;
  }
}
.result-section .result-title--warning {
  color: #c9a050;
}
.result-section .result-title--success {
  color: #ac5a00;
}
.result-section .result-top {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2em;
  color: #5C5C5C;
  line-height: 1.2em;
}
@media screen and (min-width: 768px) {
  .result-section .result-top {
    font-size: 26px;
  }
}
.result-section .result-text {
  font-size: 20px;
  color: #5c5c5c;
  font-weight: 500;
  margin-bottom: 10px;
  margin-left: 0;
  line-height: 1.2em;
}
@media screen and (min-width: 768px) {
  .result-section .result-text {
    font-size: 26px;
  }
}
.result-section .result-text .text-danger {
  color: #FF0000;
}

/* Loading Spinner - 藍色旋轉圓點樣式 (10個圓點均勻分布) */
.loading_spinner {
  width: 80px;
  height: 80px;
  margin: 27px auto;
  position: relative;
}
@media screen and (min-width: 768px) {
  .loading_spinner {
    width: 100px;
    height: 100px;
    margin: 44px auto;
  }
}
.loading_spinner span {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: #75B0FF;
  border-radius: 50%;
  animation: spinnerFade 1.2s linear infinite;
  left: 50%;
  top: 50%;
  margin-left: -7px;
  margin-top: -7px;
  /* 10個圓點，每個相隔36度 (360/10) */
  /* 圓點 1 - 0度 (12點鐘) */
  /* 圓點 2 - 36度 */
  /* 圓點 3 - 72度 */
  /* 圓點 4 - 108度 */
  /* 圓點 5 - 144度 */
  /* 圓點 6 - 180度 (6點鐘) */
  /* 圓點 7 - 216度 */
  /* 圓點 8 - 252度 */
  /* 圓點 9 - 288度 */
  /* 圓點 10 - 324度 */
}
@media screen and (min-width: 768px) {
  .loading_spinner span {
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
  }
}
.loading_spinner span:nth-child(1) {
  transform: rotate(0deg) translateY(-35px);
  animation-delay: 0s;
}
@media screen and (min-width: 768px) {
  .loading_spinner span:nth-child(1) {
    transform: rotate(0deg) translateY(-45px);
  }
}
.loading_spinner span:nth-child(2) {
  transform: rotate(36deg) translateY(-35px);
  animation-delay: -0.12s;
}
@media screen and (min-width: 768px) {
  .loading_spinner span:nth-child(2) {
    transform: rotate(36deg) translateY(-45px);
  }
}
.loading_spinner span:nth-child(3) {
  transform: rotate(72deg) translateY(-35px);
  animation-delay: -0.24s;
}
@media screen and (min-width: 768px) {
  .loading_spinner span:nth-child(3) {
    transform: rotate(72deg) translateY(-45px);
  }
}
.loading_spinner span:nth-child(4) {
  transform: rotate(108deg) translateY(-35px);
  animation-delay: -0.36s;
}
@media screen and (min-width: 768px) {
  .loading_spinner span:nth-child(4) {
    transform: rotate(108deg) translateY(-45px);
  }
}
.loading_spinner span:nth-child(5) {
  transform: rotate(144deg) translateY(-35px);
  animation-delay: -0.48s;
}
@media screen and (min-width: 768px) {
  .loading_spinner span:nth-child(5) {
    transform: rotate(144deg) translateY(-45px);
  }
}
.loading_spinner span:nth-child(6) {
  transform: rotate(180deg) translateY(-35px);
  animation-delay: -0.6s;
}
@media screen and (min-width: 768px) {
  .loading_spinner span:nth-child(6) {
    transform: rotate(180deg) translateY(-45px);
  }
}
.loading_spinner span:nth-child(7) {
  transform: rotate(216deg) translateY(-35px);
  animation-delay: -0.72s;
}
@media screen and (min-width: 768px) {
  .loading_spinner span:nth-child(7) {
    transform: rotate(216deg) translateY(-45px);
  }
}
.loading_spinner span:nth-child(8) {
  transform: rotate(252deg) translateY(-35px);
  animation-delay: -0.84s;
}
@media screen and (min-width: 768px) {
  .loading_spinner span:nth-child(8) {
    transform: rotate(252deg) translateY(-45px);
  }
}
.loading_spinner span:nth-child(9) {
  transform: rotate(288deg) translateY(-35px);
  animation-delay: -0.96s;
}
@media screen and (min-width: 768px) {
  .loading_spinner span:nth-child(9) {
    transform: rotate(288deg) translateY(-45px);
  }
}
.loading_spinner span:nth-child(10) {
  transform: rotate(324deg) translateY(-35px);
  animation-delay: -1.08s;
}
@media screen and (min-width: 768px) {
  .loading_spinner span:nth-child(10) {
    transform: rotate(324deg) translateY(-45px);
  }
}

@keyframes spinnerFade {
  0%, 39%, 100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}
/* 錯誤訊息區塊 */
.result-section--error .error-message {
  border: 2px solid #FF0000;
  border-radius: 10px;
  padding: 20px 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  margin-bottom: 25px;
}
.result-section--error .error-message .error-icon {
  color: #e53935;
  font-size: 20px;
  flex-shrink: 0;
}
.result-section--error .error-message .error-icon li {
  list-style: none;
}
.result-section--error .error-message .error-text {
  color: #FF0000;
  font-size: 16px;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .result-section--error .error-message .error-text {
    font-size: 20px;
  }
}

/* 成功區塊 */
.result-section--success .success-info {
  width: 100%;
  margin: 0 auto 20px;
}
.result-section--success .success-info .info-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  color: #5C5C5C;
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  .result-section--success .success-info .info-row {
    flex-direction: row;
    align-items: stretch;
    font-size: 20px;
  }
}
.result-section--success .success-info .info-row:last-child {
  margin-bottom: 0;
}
.result-section--success .success-info .info-label {
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  padding: 6px 15px;
  background: #909090;
  border-radius: 16px 16px 0 0;
  min-width: 100px;
  box-shadow: rgba(0, 0, 0, 0.1019607843) 0px 2px 4px;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .result-section--success .success-info .info-label {
    border-radius: 14px 0 0 14px;
    padding: 16px 15px;
    font-size: 20px;
  }
}
.result-section--success .success-info .info-value {
  display: flex;
  padding: 16px 15px;
  background: #fff;
  border-radius: 0 0 5px 5px;
  flex: 1;
  background: #f9f9fa;
  box-shadow: rgba(0, 0, 0, 0.1019607843) 0px 2px 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .result-section--success .success-info .info-value {
    font-size: 20px;
    border-radius: 0 5px 5px 0;
  }
}
.result-section--success .success-info .info-value--detail span {
  display: block;
  font-weight: bold;
  text-align: left;
}

/* 結果按鈕 */
.result-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.result-actions .btn-back {
  padding: 12px 30px;
  background: linear-gradient(180deg, #976121, #583000);
  border-radius: 30px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .result-actions .btn-back {
    font-size: 24px;
    padding: 15px 40px;
  }
}
.result-actions .btn-back--outline {
  background: #976121;
  color: #fff;
}

/* 注意事項區塊 (緊湊版) */
.notice-section--compact {
  text-align: left;
  margin-top: 20px;
}
.notice-section--compact .notice-title {
  font-size: 16px;
  margin-bottom: 10px;
  color: #5C5C5C;
}
@media screen and (min-width: 768px) {
  .notice-section--compact .notice-title {
    font-size: 20px;
  }
}
.notice-section--compact .notice-content {
  font-size: 13px;
}
@media screen and (min-width: 768px) {
  .notice-section--compact .notice-content {
    font-size: 20px;
  }
}
.notice-section--compact .notice-content p {
  margin-bottom: 5px;
}
.notice-section--compact .notice-content .text-warning {
  color: #fe9c07;
}

/* 新版外框樣式，各個儲值表單的新版樣式 */
.new-style-bg {
  height: auto;
  padding: 0 50px;
}

@media screen and (max-width: 767px) {
  .new-style-bg {
    padding: 0 14px;
  }
}
.new-style-bg .info_container {
  width: 100%;
  margin: 0 auto;
  word-break: break-all;
  padding: 0;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  row-gap: 15px;
  max-width: 1000px;
}
@media screen and (min-width: 768px) {
  .new-style-bg .info_container {
    row-gap: 28px;
  }
}

.new-style-bg .info_container > div {
  width: 100%;
}

.new-style-bg .buttons {
  width: 100%;
  max-width: 426px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

.new-style-bg .buttons .button_main.big {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 480/93;
  cursor: pointer;
}

.new-style-bg .buttons .button_main.big p {
  font-size: 1em;
  font-weight: bold;
}

@media screen and (min-width: 576px) {
  .new-style-bg .buttons .button_main.big p {
    font-size: 1.5em;
  }
}
@media screen and (min-width: 768px) {
  .new-style-bg .buttons .button_main.big p {
    font-size: 1.6em;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  }
}
.new-style-bg h5 {
  font-size: 23px;
  line-height: 1.5;
  background-image: none;
  color: #5C5C5C;
  text-align: center;
  margin-bottom: 10px;
}
.new-style-bg h5.newstyle {
  color: #976121;
  font-size: 27px;
}
@media screen and (min-width: 768px) {
  .new-style-bg h5.newstyle {
    font-size: 42px;
  }
}

@media screen and (min-width: 576px) {
  .new-style-bg h5 {
    font-size: 36px;
  }
}
@media screen and (min-width: 992px) {
  .new-style-bg h5 {
    font-size: 52px;
    margin-top: 0;
  }
}
.new-style-bg .list-info .item .value {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  justify-content: center;
  padding: 0;
  padding-left: 15px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  border-radius: 0 14px 14px 0;
  min-height: 73px;
  padding: 0;
}

.new-style-bg .list-info .item .value p {
  margin: 7px 0;
  color: #5C5C5C;
  font-weight: 600;
}

.new-style-bg .list-info .item .label {
  background-color: #909090;
  border-color: #bcbcbc;
  font-weight: bold;
  padding: 0;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  font-weight: bold;
}

.new-style-bg .text_container .text-remind {
  color: #5C5C5C;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .new-style-bg .text_container .text-remind {
    font-size: 26px;
  }
}

.new-style-bg input {
  box-sizing: border-box;
  border: 2px solid #5C5C5C;
  padding: 18px;
  border-radius: 14px;
  position: relative !important;
  display: inline-block;
  margin-right: 7px;
  width: 100% !important;
}

.new-style-bg input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1em !important;
  height: 1em !important;
  min-width: 1em !important;
  min-height: 1em !important;
  max-width: 1em !important;
  max-height: 1em !important;
  display: inline-block;
  vertical-align: top;
  border: 2px solid #5C5C5C;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  margin: 0 7px 0 0;
  padding: 0;
}
.new-style-bg input[type=radio]:checked {
  background-color: #fff;
  border-color: #5C5C5C;
}
.new-style-bg input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #5C5C5C;
}

.new-style-bg div input::-moz-placeholder {
  color: #A6A6A6;
}

.new-style-bg div input::placeholder {
  color: #A6A6A6;
}

.new-style-bg ul.list-records {
  width: 100%;
  list-style-type: "●";
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  color: #5C5C5C;
  font-weight: 600;
  padding: 0 3px;
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.5;
}

.new-style-bg ul.list-records li .input-group {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.new-style-bg .buttons .button_main.big, .new-style-bg .buttons .button_secondary {
  background-image: none;
  color: #FFFFFF;
  background: linear-gradient(172deg, #fba609 0%, #ff9d00 36%, #fce25e 100%);
  box-shadow: 0px 2px 2px #ffca61 inset;
  padding: 0;
  border-radius: 50px;
  letter-spacing: 0;
  font-size: 13px;
  cursor: pointer;
}

.new-style-bg .buttons .button_secondary {
  width: 45%;
  max-width: 200px;
  aspect-ratio: 200/60;
}

.new-style-bg .buttons .button_secondary p,
.new-style-bg .buttons .button_secondary a {
  font-size: 1.5em;
  color: #244C7C !important;
  font-weight: bold;
}

@media screen and (min-width: 420px) {
  .new-style-bg .buttons .button_secondary p,
  .new-style-bg .buttons .button_secondary a {
    font-size: 1.5em;
  }
}
@media screen and (min-width: 576px) {
  .new-style-bg .buttons .button_secondary {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .new-style-bg .buttons .button_secondary p,
  .new-style-bg .buttons .button_secondary a {
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  }
}
.new-style-bg .list-info {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  font-size: 20px;
}

.new-style-bg .list-info .item {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

.new-style-bg .list-info .item .label {
  width: 6em;
  font-weight: 500;
  color: #fff;
  padding: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px 0 0 14px;
  text-align: center;
  word-wrap: break-word;
  word-break: keep-all;
  line-height: 1.5;
  font-size: 14px;
}
@media screen and (min-width: 768px) {
  .new-style-bg .list-info .item .label {
    font-size: 24px;
  }
}

@media screen and (min-width: 576px) {
  .new-style-bg .list-info .item .label {
    width: 10em;
  }
}
.new-style-bg .list-info .item .value {
  height: 100%;
  background-color: #F9F9FA;
  border: 2px solid #F9F9FA;
  color: #5C5C5C;
  width: calc(100% - 6em);
  word-break: break-word;
  padding: 0;
  font-size: 14px;
}
@media screen and (min-width: 768px) {
  .new-style-bg .list-info .item .value {
    font-size: 24px;
  }
}

.new-style-bg .list-info .item .value .radio {
  white-space: nowrap;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

.new-style-bg .list-info .item {
  padding: 0;
  width: 100%;
  height: 100%;
  box-shadow: none;
}

.new-style-bg .list-info .item .value {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .new-style-bg .buttons .button_main.big p {
    font-size: 1.1em;
  }
}
.input-group.row {
  flex-wrap: nowrap;
}

.new-style-bg .read-agreement a.ContainLink {
  color: #F19917;
  font-weight: 600;
  text-decoration: underline;
  margin-top: 10px;
  font-size: 1.1rem;
}

.new-style-bg .precautions {
  width: 100%;
  color: #5C5C5C;
  background-color: #E7E3DD;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 1.5em 1em;
  max-width: 1000px;
}

.new-style-bg .precautions .title {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 0.5em;
  margin-left: 0;
}

.new-style-bg .precautions ol, .new-style-bg .precautions ul {
  padding: 0 2em;
  font-size: 20px;
  line-height: 1.7;
}

.new-style-bg .precautions ol a, .new-style-bg .precautions ul a {
  color: #3a7fff;
  text-decoration: underline;
}

.new-style-bg .precautions ol a:hover, .new-style-bg .precautions ul a:hover {
  color: #7A310A;
}

.new-style-bg .precautions p:not(.title) {
  padding: 0 1em;
  font-size: 20px;
  line-height: 1.7;
  margin-left: 0;
}

.new-style-bg .buttons .button_main p, .new-style-bg .buttons .button_main a {
  color: #7A310A !important;
  padding: 0;
  margin: 0;
}

.new-style-bg .buttons .button_secondary p, .new-style-bg .buttons .button_secondary a {
  color: #7A310A !important;
  padding: 0;
  margin: 0;
}

button.btn_back {
  background: linear-gradient(to bottom, #7d5bfe 0%, #4b379f 100%) !important;
  padding: 15px 40px !important;
  margin: 10px auto !important;
  border: 2px solid #9876e8 !important;
  border-radius: 50px !important;
  box-sizing: border-box !important;
  height: auto !important;
  width: 53% !important;
  font-size: 22px !important;
  color: white !important;
  font-weight: bold !important;
  font-family: Microsoft JhengHei, Helvetica, Arial, sans-serif, Verdana !important;
}

/*loading頁對位*/
.loading_wrp {
  top: 0% !important;
  height: 100vh !important;
  width: 100vw !important;
  z-index: 999 !important;
}

.loading_wrp > div {
  position: absolute !important;
  margin: 0 !important;
  left: 50% !important;
  top: 50% !important;
  transform: translateX(-50%) translateY(-50%) !important;
  display: flex;
  align-items: center;
}

.loading_wrp > div span {
  color: #0c1a27;
  font-size: 1.2em;
  font-weight: 500;
  margin-left: 10px;
}

.new-style-bg .waiting {
  text-align: center;
  color: #0c1a27;
  font-size: 1.2em;
}
.new-style-bg .waiting p {
  margin-left: 0 !important;
}

/*提醒*/
.message-container {
  background-color: #E0BCFF;
  border-radius: 32px 10px;
  box-shadow: 2px 3px 5px #7b51dc, inset 1px 1px 2px #7b51dc, inset -2px -2px 6px #7b51dc;
  padding: 20px;
}

.message {
  padding: 0;
  border: none;
  margin: 0;
  margin-bottom: 5px !important;
}

@media screen and (min-width: 1280px) {
  .message-container {
    border-radius: 45px 12px;
  }
}
.message ul, .message ol {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  padding-inline-start: 29px;
  padding-top: 0;
}

.message a {
  color: #0033FF;
}

.message-container .error-btn {
  padding: 28px;
  cursor: pointer;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
}

.message-container .error-btn a {
  background: linear-gradient(to bottom, #6B5AFF 0%, #342FD2 100%);
  border-radius: 50px;
  font-size: 1.8em;
  color: white;
  padding: 12px 26px;
  font-weight: bold;
}

.message-container .error-btn a:hover {
  text-decoration: none;
}

.message-danger {
  color: #FF0000;
  font-size: 1.5em;
  line-height: 1.2em;
  font-weight: 600;
  width: 96%;
  border: 2px solid #FF0000;
  margin: 0 auto;
  border-radius: 14px;
}

/*colorbox*/
#sb-wrapper {
  max-width: 90% !important;
  height: auto;
  padding: 20px;
  position: fixed;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  background-color: #fff;
  border-radius: 55px 20px;
  border: 4px solid #934A00;
  visibility: hidden;
}

@media screen and (min-width: 768px) {
  #sb-wrapper {
    padding: 30px;
    width: 600px !important;
    border-radius: 70px 20px;
  }
}
#sb-wrapper-inner {
  border: 0 !important;
  height: 200px !important;
}

@media (max-height: 600px) {
  #sb-wrapper-inner {
    height: 140px !important;
  }
}
@media (max-height: 500px) {
  #sb-wrapper-inner {
    height: 120px !important;
  }
}
@media screen and (min-width: 768px) {
  #sb-wrapper-inner {
    height: 320px !important;
  }
}
@media screen and (min-width: 768px) and (max-height: 700px) {
  #sb-wrapper-inner {
    height: 240px !important;
  }
}
@media screen and (min-width: 768px) and (max-height: 600px) {
  #sb-wrapper-inner {
    height: 200px !important;
  }
}
#sb-body {
  background-color: transparent !important;
}

#sb-info {
  position: absolute !important;
  top: -20px;
  right: -20px;
}

@media screen and (min-width: 768px) {
  #sb-info {
    top: -32px;
    right: -32px;
  }
}
#sb-nav,
#sb-info-inner,
#sb-info {
  width: 50px !important;
  height: 50px !important;
}

@media screen and (min-width: 768px) {
  #sb-nav,
  #sb-info-inner,
  #sb-info {
    width: 80px !important;
    height: 80px !important;
  }
}
#sb-nav-close {
  width: 45px !important;
  height: 45px !important;
  position: absolute;
  cursor: pointer;
  background: url(/Graphics/Games/Mobile/Bank/item/new/btn_X.png?v=20251229) no-repeat center !important;
  background-size: 100% !important;
  margin-left: 6px !important;
  margin-top: 6px !important;
}

#sb-nav-close:hover {
  filter: brightness(1.1);
}

@media screen and (min-width: 768px) {
  #sb-nav-close {
    width: 60px !important;
    height: 60px !important;
  }
}/*# sourceMappingURL=style.css.map */