@charset "UTF-8";
:root {
  --brand-color: #ffcf00;
  --brand-color-secondary: #d51524;
  --text-link-color: #0477ca;
  --text-hover-color: #d51524;
  --active-bg-color: #fcf8e3;
  --notice-color: #8b1300;
  --success-color: #0c943e;
  --danger-color: #dc3545;
  --warning-color: #d37828;
  --info-color: #23daff;
  --bs-primary-rgb: 255, 207, 0;
  --bs-success-rgb: 12, 148, 62;
  --bs-danger-rgb: 220, 53, 69;
  --bs-warning-rgb: 255, 170, 100;
  --bs-info-rgb: 35, 218, 255;
  --bs-primary-bg-subtle: rgb(255, 247, 204);
  --global-font-size: 14px;
  --zindex-loadingMask: 1055;
  --zindex-scrollToTop: 1050;
}

.w-pct-1 {
  width: 1%;
}

.w-pct-2 {
  width: 2%;
}

.w-pct-3 {
  width: 3%;
}

.w-pct-4 {
  width: 4%;
}

.w-pct-5 {
  width: 5%;
}

.w-pct-6 {
  width: 6%;
}

.w-pct-7 {
  width: 7%;
}

.w-pct-8 {
  width: 8%;
}

.w-pct-9 {
  width: 9%;
}

.w-pct-10 {
  width: 10%;
}

.w-pct-11 {
  width: 11%;
}

.w-pct-12 {
  width: 12%;
}

.w-pct-13 {
  width: 13%;
}

.w-pct-14 {
  width: 14%;
}

.w-pct-15 {
  width: 15%;
}

.w-pct-16 {
  width: 16%;
}

.w-pct-17 {
  width: 17%;
}

.w-pct-18 {
  width: 18%;
}

.w-pct-19 {
  width: 19%;
}

.w-pct-20 {
  width: 20%;
}

.w-pct-21 {
  width: 21%;
}

.w-pct-22 {
  width: 22%;
}

.w-pct-23 {
  width: 23%;
}

.w-pct-24 {
  width: 24%;
}

.w-pct-25 {
  width: 25%;
}

.w-pct-26 {
  width: 26%;
}

.w-pct-27 {
  width: 27%;
}

.w-pct-28 {
  width: 28%;
}

.w-pct-29 {
  width: 29%;
}

.w-pct-30 {
  width: 30%;
}

.w-pct-31 {
  width: 31%;
}

.w-pct-32 {
  width: 32%;
}

.w-pct-33 {
  width: 33%;
}

.w-pct-34 {
  width: 34%;
}

.w-pct-35 {
  width: 35%;
}

.w-pct-36 {
  width: 36%;
}

.w-pct-37 {
  width: 37%;
}

.w-pct-38 {
  width: 38%;
}

.w-pct-39 {
  width: 39%;
}

.w-pct-40 {
  width: 40%;
}

.w-pct-41 {
  width: 41%;
}

.w-pct-42 {
  width: 42%;
}

.w-pct-43 {
  width: 43%;
}

.w-pct-44 {
  width: 44%;
}

.w-pct-45 {
  width: 45%;
}

.w-pct-46 {
  width: 46%;
}

.w-pct-47 {
  width: 47%;
}

.w-pct-48 {
  width: 48%;
}

.w-pct-49 {
  width: 49%;
}

.w-pct-50 {
  width: 50%;
}

.w-pct-51 {
  width: 51%;
}

.w-pct-52 {
  width: 52%;
}

.w-pct-53 {
  width: 53%;
}

.w-pct-54 {
  width: 54%;
}

.w-pct-55 {
  width: 55%;
}

.w-pct-56 {
  width: 56%;
}

.w-pct-57 {
  width: 57%;
}

.w-pct-58 {
  width: 58%;
}

.w-pct-59 {
  width: 59%;
}

.w-pct-60 {
  width: 60%;
}

.w-pct-61 {
  width: 61%;
}

.w-pct-62 {
  width: 62%;
}

.w-pct-63 {
  width: 63%;
}

.w-pct-64 {
  width: 64%;
}

.w-pct-65 {
  width: 65%;
}

.w-pct-66 {
  width: 66%;
}

.w-pct-67 {
  width: 67%;
}

.w-pct-68 {
  width: 68%;
}

.w-pct-69 {
  width: 69%;
}

.w-pct-70 {
  width: 70%;
}

.w-pct-71 {
  width: 71%;
}

.w-pct-72 {
  width: 72%;
}

.w-pct-73 {
  width: 73%;
}

.w-pct-74 {
  width: 74%;
}

.w-pct-75 {
  width: 75%;
}

.w-pct-76 {
  width: 76%;
}

.w-pct-77 {
  width: 77%;
}

.w-pct-78 {
  width: 78%;
}

.w-pct-79 {
  width: 79%;
}

.w-pct-80 {
  width: 80%;
}

.w-pct-81 {
  width: 81%;
}

.w-pct-82 {
  width: 82%;
}

.w-pct-83 {
  width: 83%;
}

.w-pct-84 {
  width: 84%;
}

.w-pct-85 {
  width: 85%;
}

.w-pct-86 {
  width: 86%;
}

.w-pct-87 {
  width: 87%;
}

.w-pct-88 {
  width: 88%;
}

.w-pct-89 {
  width: 89%;
}

.w-pct-90 {
  width: 90%;
}

.w-pct-91 {
  width: 91%;
}

.w-pct-92 {
  width: 92%;
}

.w-pct-93 {
  width: 93%;
}

.w-pct-94 {
  width: 94%;
}

.w-pct-95 {
  width: 95%;
}

.w-pct-96 {
  width: 96%;
}

.w-pct-97 {
  width: 97%;
}

.w-pct-98 {
  width: 98%;
}

.w-pct-99 {
  width: 99%;
}

.w-pct-100 {
  width: 100%;
}

.zIndex-1050 {
  z-index: 1050;
}

.zIndex-1055 {
  z-index: 1055;
}

.zIndex-1100 {
  z-index: 1100;
}

.text-blue {
  color: #0477ca;
}

/* Noto Sans TC - Traditional Chinese subset (fontsource) */
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../assets/fonts/noto-sans-tc-chinese-traditional-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../assets/fonts/noto-sans-tc-chinese-traditional-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../assets/fonts/noto-sans-tc-chinese-traditional-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../assets/fonts/noto-sans-tc-chinese-traditional-700-normal.woff2") format("woff2");
}
/* Open Sans - Latin subset (fontsource) */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../assets/fonts/open-sans/open-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../assets/fonts/open-sans/open-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../assets/fonts/open-sans/open-sans-latin-700-normal.woff2") format("woff2");
}
.btn {
  --bs-btn-disabled-opacity: 0.75;
  border-radius: 4px;
}
.btn:disabled, .btn[disabled] {
  cursor: not-allowed;
}

.btn-primary {
  --bs-btn-color: #111;
  --bs-btn-bg: var(--brand-color);
  --bs-btn-border-color: var(--brand-color);
  --bs-btn-hover-color: #111;
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-color), black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-color), black 20%);
  --bs-btn-focus-shadow-rgb: var(--brand-color);
  --bs-btn-active-color: #111;
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-color), black 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-color), black 25%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #111;
  --bs-btn-disabled-bg: var(--brand-color);
  --bs-btn-disabled-border-color: var(--brand-color);
}

.btn-secondary {
  --bs-btn-color: #111;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #ccc;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-color-secondary), black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-color-secondary), black 20%);
  --bs-btn-focus-shadow-rgb: var(--brand-color-secondary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-color-secondary), black 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-color-secondary), black 25%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #111;
  --bs-btn-disabled-bg: #ddd;
  --bs-btn-disabled-border-color: #ccc;
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--success-color);
  --bs-btn-border-color: var(--success-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--success-color), black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--success-color), black 20%);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--success-color), black 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--success-color), black 25%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--success-color);
  --bs-btn-disabled-border-color: var(--success-color);
}

.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--warning-color);
  --bs-btn-border-color: var(--warning-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--warning-color), black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--warning-color), black 20%);
  --bs-btn-focus-shadow-rgb: var(--warning-color);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: color-mix(in srgb, var(--warning-color), black 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--warning-color), black 25%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--warning-color);
  --bs-btn-disabled-border-color: var(--warning-color);
}

.btn-info {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--info-color);
  --bs-btn-border-color: var(--info-color);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: color-mix(in srgb, var(--info-color), black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--info-color), black 20%);
  --bs-btn-focus-shadow-rgb: var(--info-color);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: color-mix(in srgb, var(--info-color), black 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--info-color), black 25%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--info-color);
  --bs-btn-disabled-border-color: var(--info-color);
}

.btn-outline-primary {
  --bs-btn-color: color-mix(in srgb, var(--brand-color), black 20%);
  --bs-btn-border-color: color-mix(in srgb, var(--brand-color), black 10%);
  --bs-btn-hover-color: #111;
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-color), black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-color), black 10%);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #111;
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-color), black 10%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-color), black 10%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: color-mix(in srgb, var(--brand-color), black 30%);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--brand-color), black 10%);
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: #111;
  --bs-btn-disabled-bg: #eee;
  --bs-btn-disabled-border-color: #bbb;
  --bs-btn-disabled-color: #333;
}

.btn-outline-warning {
  --bs-btn-color: color-mix(in srgb, var(--warning-color), black 10%);
  --bs-btn-border-color: color-mix(in srgb, var(--warning-color), black 10%);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--warning-color), black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--warning-color), black 10%);
  --bs-btn-focus-shadow-rgb: 255, 193, 7;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--warning-color), black 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--warning-color), black 20%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: color-mix(in srgb, var(--warning-color), black 20%);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--warning-color), black 20%);
  --bs-gradient: none;
}

.form-check-input {
  --bs-border-color: #aaa;
}
.form-check-input:disabled, .form-check-input[disabled] {
  --bs-form-check-bg: #ddd;
  opacity: 0.65;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
  cursor: not-allowed;
  opacity: 0.65;
}

input[type=password]::-ms-reveal,
input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.loading-mask {
  position: fixed;
  inset: 0;
  background-color: rgba(30, 25, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--zindex-loadingMask);
}
.loading-mask.show {
  display: flex !important;
}

.spinner-border {
  width: 5rem;
  height: 5rem;
}

/* 長選項下拉（SelectMenu 元件）共用樣式 —— 前後台共用。
   自繪的 .dropdown-menu 沒有原生 <select> 的自動限高，故限制展開高度、超出改由選單
   內部捲動（配合元件上的 .overflow-auto），避免選項很多時一次攤開而衝出畫面。 */
.select-menu .dropdown-menu {
  max-height: 15rem;
}

.text-bg-primary {
  color: #111 !important;
}

html,
body {
  font-family: "Microsoft JhengHei", "微軟正黑體", "Noto Sans TC", sans-serif;
  font-size: var(--global-font-size);
  height: 100%;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

.page-header {
  border-bottom: 1px solid #eee;
  color: #333;
  font-size: 2rem;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
}

a {
  color: var(--text-link-color);
  cursor: pointer;
  text-decoration: none;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  color: var(--text-hover-color);
  text-decoration: none;
  -o-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
a:active {
  text-decoration: none;
}

table {
  border-color: #ccc;
}
table .formTable-header {
  background-color: #fcf8e3;
}
table.table-fixed {
  table-layout: fixed;
}

.border-double {
  border-style: double;
}

form .form-label {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  form .form-label {
    margin-bottom: 0.5rem;
  }
}

.form-range::-webkit-slider-thumb {
  background-color: var(--brand-color) !important;
}

.form-range::-moz-range-thumb {
  background-color: var(--brand-color) !important;
}

/* focus ring 的顏色也要一起改，否則還是藍色 */
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(230, 195, 57, 0.25);
}

.modal-dialog.modal-fluid {
  --bs-modal-width: 96%;
}

.progress-bar {
  min-width: 3ch;
}

.serviceIntroList .list-group:first-child {
  border-top-right-radius: 0px;
}
.serviceIntroList .list-group .list-group-item {
  border: none;
}
.serviceIntroList .list-group .list-group-item > *:last-child {
  margin-bottom: 0;
}
.serviceIntroList .list-group .list-group-item:not(:last-child) {
  border-bottom: 1px solid #ddd;
}
.serviceIntroList .list-group .list-group-item-text {
  margin-bottom: 0;
}
.serviceIntroList > .card-header {
  padding: 1.5rem 5rem 1.5rem 1rem;
  position: relative;
}
.serviceIntroList > .card-header h4 {
  font-weight: bold;
  margin-bottom: 0;
}
.serviceIntroList .selectCardGroup .card {
  cursor: pointer;
}
.serviceIntroList .selectCardGroup .card:hover {
  background: #eee;
}

.card[data-serviceType=increaseLoan] > .card-header, .card[data-serviceType=loanVerify] > .card-header {
  background: linear-gradient(to right, #fcf8e3, AntiqueWhite);
}
.card[data-serviceType=increaseLoan] > .card-header h4, .card[data-serviceType=loanVerify] > .card-header h4 {
  color: #8a6d3b;
}
.card[data-serviceType=easyLoan] > .card-header {
  background: linear-gradient(to right, #e3e3ff, #ccccff);
}
.card[data-serviceType=govLoan] > .card-header, .card[data-serviceType=guarantor] > .card-header {
  background: linear-gradient(to right, #99ccff, #6699ff);
}
.card[data-serviceType=shopLoan] > .card-header {
  background: linear-gradient(to right, #fccce4, #ff99cc);
}
.card[data-serviceType=esLoan] > .card-header {
  background: linear-gradient(to right, #FFEEDD, #ff8000);
}
.card[data-serviceType=pwLoan] > .card-header {
  background: linear-gradient(to right, #ffffff, #ccffcc);
}
.card .card-header.bg-accent {
  background-color: #fcf8e3;
}
.card .card-header.bg-blue {
  background: linear-gradient(to right, #99ccff, #6699ff);
}
.card .card-header h5 {
  margin-bottom: 0 !important;
}

.stepCnt {
  position: absolute;
  right: 1%;
  width: 150px;
  top: 45%;
}

.idStyle {
  width: 100%;
  max-width: 400px;
}

.imgFrame {
  border-style: dotted;
  border-color: black;
  width: 100%;
  max-width: 260px;
  height: auto;
  aspect-ratio: 3/2;
  border-radius: 10px;
  margin-bottom: 10px;
  vertical-align: middle;
  position: relative;
}

.imgPreview {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  cursor: pointer;
}

.cus-panel-footer {
  cursor: pointer;
}

.openmemo {
  cursor: pointer;
}

i.dMove {
  position: relative;
  animation-name: dMove;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes dMove {
  0% {
    left: 0;
  }
  50% {
    left: -5px;
  }
  100% {
    left: 0;
  }
}
.mailVerifyBlock {
  padding: 8px;
  margin-top: 8px;
  border: 1px solid #ddd;
}
.mailVerifyBlock .inputBlock,
.mailVerifyBlock .textBlock {
  margin-bottom: 8px;
}
.mailVerifyBlock .textBlock p {
  margin: 0;
}

.mailVerifyMassage.error {
  color: var(--danger-color);
}
.mailVerifyMassage.success {
  color: var(--success-color);
}

.errMsg {
  color: var(--danger-color);
  min-height: 1rem;
}

.mackayBlock {
  display: flex;
  max-width: 900px;
  align-items: center;
  justify-content: center;
}
.mackayBlock > div {
  flex: 1;
}

div.radio.creditCard[priority=mackay] {
  padding: 10px;
  display: none;
}

.mackayCardOptionBlock .cardLevelBlock p,
.mackayCardOptionBlock .cardLevelBlock select,
.mackayCardOptionBlock .applyWcagBlock p,
.mackayCardOptionBlock .applyWcagBlock select,
.mackayCardOptionBlock .employeeBlock p,
.mackayCardOptionBlock .employeeBlock select {
  display: inline-block;
  width: auto;
  margin: 0;
}
.mackayCardOptionBlock > div {
  flex: 1;
  margin: 10px;
}

.mackayCardNoticeBlock,
.topclassCardNoticeBlock,
.fifaCardNoticeBlock {
  margin: 10px;
  margin-top: 0;
  display: none;
}
.mackayCardNoticeBlock p,
.topclassCardNoticeBlock p,
.fifaCardNoticeBlock p {
  margin: 0;
}

.selectGroup {
  background-color: #fbf7f4;
  padding: 10px;
  border-bottom: #b6893c 1px solid;
  vertical-align: middle;
}
.selectGroup p {
  margin-bottom: 0;
}

.dyn-row {
  margin-bottom: 0.75rem;
}

.loanVerifyStepStatus {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.loanVerifyStepStatus--item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media screen and (max-width: 768px) {
  .loanVerifyStepStatus--item {
    flex: 1 0 auto;
  }
}
.loanVerifyStepStatus--label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media screen and (max-width: 360px) {
  .loanVerifyStepStatus--label {
    font-size: 1.2rem;
    gap: 0.25rem;
  }
}

.loanVerify-card {
  cursor: pointer;
  transition: all 0.3s ease;
  height: 100%;
}
.loanVerify-card:hover {
  background: #eee;
}

/* accesskey */
.accesskey {
  position: static;
  display: inline;
}
.accesskey a {
  color: rgba(255, 255, 255, 0);
}
.accesskey a:before {
  content: none;
}

a.scrollToTop {
  text-align: center;
  width: 50px;
  height: 50px;
  background-color: var(--brand-color);
  box-shadow: 0px 0px 5px #555;
  font-weight: bold;
  color: #444;
  text-decoration: none;
  position: fixed;
  bottom: 60px;
  right: 30px;
  display: table;
  z-index: var(--zindex-scrollToTop);
  opacity: 0.5;
  font-size: 40px;
  border-radius: 25px;
}
a.scrollToTop:hover {
  color: #fff;
  text-decoration: none;
  -o-transition: color 0.3s linear;
  -webkit-transition: color 0.3s linear;
  -moz-transition: color 0.3s linear;
  transition: color 0.3s linear;
}
a.scrollToTop i {
  line-height: 50px;
  vertical-align: middle;
}
a.scrollToTop img {
  width: 19px;
  height: 13px;
  position: absolute;
  top: calc(50% - 6.5px);
  left: calc(50% - 9.5px);
}

.scroll a:visited, .scroll a:active {
  text-decoration: none;
}

#wrapper {
  height: auto !important;
  position: relative;
  min-height: 100%;
}

.page-content-wrap {
  padding-bottom: 2rem;
}

.container {
  padding: 1rem;
  width: 100%;
  max-width: 1300px;
}

.form-control:focus {
  border-color: rgba(255, 135, 4, 0.6);
  /* border-color: rgba(255, 135, 4, -0.2);  */
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Bootstrap 5 移除了 BS3 對 [readonly] 的灰底，以及 disabled / readonly 的 not-allowed 游標。
   為與舊系統（Bootstrap 3.3.7）外觀一致，在此補回。
   註：disabled 的灰底 BS5 已提供（.form-control:disabled → #e9ecef），故背景只需補 readonly。 */
.form-control[readonly] {
  background-color: #e9ecef;
}

.form-control[disabled],
.form-control[readonly],
.form-select[disabled],
fieldset[disabled] .form-control,
fieldset[disabled] .form-select {
  cursor: not-allowed;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-color: var(--brand-color-secondary);
  color: #fff;
}

.maindropdown .dropdown.open > .dropdown-toggle.btn-default {
  background-color: var(--brand-color);
  color: #fff;
}

.modal-backdrop:focus-visible {
  outline: none !important;
}

/** 內容區塊 **/
.page-content {
  display: block;
  height: auto;
  padding-bottom: 50px;
}
.page-content .accesskey {
  position: absolute;
}

/** 注意事項 區塊 **/
#notice {
  color: var(--notice-color);
}
#notice .noticeTitle {
  font-size: 14px;
  margin: 0;
}
#notice .noticeContent {
  font-size: 12px;
  margin: 0;
}

.notice {
  color: var(--notice-color);
}

/** 綁定彰銀 LINE 官方帳號 按鈕 **/
#CHB-add-line-btn {
  text-align: center;
  margin: 24px auto;
  width: 100%;
  max-width: 320px;
}
#CHB-add-line-btn a {
  display: block;
}
#CHB-add-line-btn a:first-child {
  position: absolute;
  width: 120px;
  transform: translateX(-120px);
}
#CHB-add-line-btn img {
  width: 100%;
  height: auto;
}

.auxarea {
  position: relative;
  overflow: hidden;
  background-color: var(--brand-color);
  display: block;
  height: 50px;
  width: 100%;
}

:focus-visible {
  outline: auto 1px #fa3402 !important;
}

.notification_block {
  height: 200px;
  border: 1px solid #999;
  overflow: auto;
  padding: 1rem 2rem;
  margin: 1rem 0;
}

.history-record + .history-record {
  border-top: 1px solid #ddd;
}

.history-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 16px;
  padding: 16px 12px;
}

.history-label {
  color: #333;
  font-weight: bold;
}

.history-status {
  color: #b94a48;
  font-weight: 700;
}

.history-action {
  margin-top: 8px;
}

@media (max-width: 767px) {
  .history-grid {
    grid-template-columns: 1fr 2fr;
    gap: 4px;
  }
}
.credit-auth-page .page-content-wrap {
  padding-bottom: 32px;
}

.credit-auth-page form {
  max-width: 540px;
}
.credit-auth-page .id-hide-label {
  margin-left: 12px;
  font-weight: normal;
}
.credit-auth-page .compact-control {
  max-width: 220px;
}
.credit-auth-page .expiry-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.credit-auth-page .compact-select {
  min-width: 160px;
  width: auto;
}
.credit-auth-page #verifyCodeImg {
  border: 1px solid #dddddd;
  margin-bottom: 8px;
}
.credit-auth-page #refresh {
  margin-top: 8px;
}

@media (max-width: 767px) {
  .credit-auth-page .compact-control, .credit-auth-page .compact-select {
    max-width: 100%;
    width: 100%;
  }
}
.cropImageBlock {
  width: 100%;
  margin: 50px auto 100px;
  display: none;
}
.cropImageBlock .panel {
  width: 100%;
  margin: 0 auto;
}
.cropImageBlock .panel .imgFrame {
  margin-bottom: 0;
  width: 100%;
  height: 100%;
  border: none;
  text-align: center;
}
.cropImageBlock .panel .imgFrame .select {
  overflow: auto;
  display: block;
  margin: 0 auto;
}
.cropImageBlock .panel .imgFrame canvas {
  width: 100%;
  height: 100%;
  border: 3px black dotted;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}
.cropImageBlock .panel .imgFrame canvas#cropImagePreview {
  max-width: 50%;
  max-height: 50%;
}
@media screen and (max-width: 767px) {
  .cropImageBlock .panel .imgFrame canvas#cropImagePreview {
    max-width: 100%;
    max-height: 100%;
  }
}
.cropImageBlock .panel .imgFrame .text-center {
  margin: 40px 0;
}

.form-check ~ div .btn-outline-secondary {
  --bs-btn-bg: #eee;
}

/** 響應式設計 **/
/* ----------------------------------------- */
@media screen and (max-width: 1200px) {
  .container {
    max-width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  .container {
    max-width: 100%;
  }
}
@media screen and (max-width: 1023px) {
  .mackayBlock {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .page-content {
    margin-bottom: auto;
    display: block;
    height: auto;
    background-color: #fff;
  }
  .mackayCardOptionBlock .cardLevelBlock p,
  .mackayCardOptionBlock .cardLevelBlock select,
  .mackayCardOptionBlock .applyWcagBlock p,
  .mackayCardOptionBlock .applyWcagBlock select,
  .mackayCardOptionBlock .employeeBlock p,
  .mackayCardOptionBlock .employeeBlock select {
    display: block;
    width: 100%;
    margin: 0;
  }
  .auxarea {
    padding-bottom: 10vh;
  }
}
@media screen and (max-width: 575px) {
  .page-header {
    font-size: 1.75rem;
  }
  .stepCnt {
    width: min(120px, 24%);
  }
}
/** 列印 (from 舊專案) **/
/* ----------------------------------------- */
.onlyPrint {
  display: none !important;
}

@media print {
  .mainmenuarea, .dontPrint, .scrollToTop, .footer, .breadcrumbarea, .hlogo > a[href]:after, .container > .page-header {
    display: none !important;
  }
  .onlyPrint {
    display: block !important;
  }
  .pageBreak {
    page-break-before: always;
  }
  .dontBreak {
    page-break-inside: avoid;
  }
  @page {
    size: A4 portrait !important;
    margin-top: 10mm !important;
    margin-bottom: 10mm !important;
    margin-right: 8mm !important;
  }
  .table > tbody > tr > td,
  .table > tbody > tr > th {
    padding: 5px;
  }
  ol, ul {
    font-size: 1.02em;
    font-weight: normal;
  }
  .printCenter {
    margin-top: 2px;
    margin-bottom: 2px;
    text-align: center;
  }
  .panel-body {
    padding: 10px;
  }
}
.header {
  display: block;
  height: auto;
  border-top: 0px solid var(--brand-color);
  position: relative;
  z-index: 1000;
  background-color: var(--brand-color);
}
.header .hlogo a {
  display: block;
  float: left;
  padding: 0 16px;
}
@media screen and (max-width: 640px) {
  .header .hlogo {
    padding: 0;
  }
}
@media screen and (max-width: 991px) {
  .header .hlogo img {
    margin: 0 auto;
    display: block;
    max-width: 180px;
  }
}
.header .hlogo img:last-child {
  margin-left: 10px;
}
@media screen and (max-width: 991px) {
  .header .hlogo img:last-child {
    display: none;
  }
}

.mainmenuarea {
  width: 100%;
  position: relative;
  background-color: #f1f2f6;
  border-top: 1px solid #e5e5e5;
  z-index: 90;
}
@media screen and (max-width: 1024px) {
  .mainmenuarea {
    display: none;
  }
}
.mainmenuarea .accesskey {
  position: absolute;
}

.mainmenu {
  position: relative;
  z-index: 9999;
}

.menu-01 {
  position: relative;
  margin: auto;
  z-index: 10;
  background-color: transparent;
}

.cbp-hrmenu {
  width: 100%;
  margin-top: 0px;
  border-bottom: none;
}
@media screen and (max-width: 1024px) {
  .cbp-hrmenu {
    display: none;
  }
}
.cbp-hrmenu tr th {
  width: 12%;
  text-align: center;
  padding: 16px 8px;
  font-size: 16px;
  border-left: 1px solid #ddd;
}

a.link-style {
  color: #000000;
  text-decoration: none;
  -o-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
a.link-style:hover {
  color: var(--brand-color-secondary);
  text-decoration: none;
  -o-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
a.link-style:visited {
  text-decoration: none;
}

/*麵包屑導覽列*/
.breadcrumbarea {
  background: var(--brand-color);
}
.breadcrumbarea .breadcrumb {
  background: none;
  margin-bottom: 0;
  padding: 12px 8px;
  width: 100%;
}
.breadcrumbarea .breadcrumb .link-style {
  padding-left: 8px;
  padding-right: 8px;
}
.breadcrumbarea .breadcrumb .nav-style::before {
  content: " / ";
  padding-right: 4px;
}
.breadcrumbarea .container {
  padding: 0;
}

/** footer **/
.footer {
  background-color: #fff;
  display: block;
  /*position: absolute;*/
  bottom: 0px;
  width: 100%;
  border-top: 5px solid var(--brand-color-secondary);
}
@media screen and (max-width: 1023px) {
  .footer {
    height: auto;
    z-index: 500;
  }
}
@media screen {
  .footer {
    background-image: none;
  }
}
.footer .hlogo img {
  zoom: 0.8;
}

.footer-aca {
  margin-top: 20px;
  margin-bottom: 20px;
}

@media screen and (max-width: 1023px) {
  .footer-info {
    overflow: hidden;
  }
}
.footer-info .footer-right {
  text-align: right;
  color: #ccc;
  padding: 15px 0px;
  border-top: 1px solid #e5e5e5;
}
@media screen and (max-width: 990px) {
  .footer-info .footer-right {
    text-align: left;
  }
}
.footer-info .footer-right .foot-cr {
  color: #333;
}

.stepBlock td {
  background: #d9edf7;
  border: #ddd solid 1px;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
}
.stepBlock td.active {
  background: var(--active-bg-color);
  font-weight: bold;
}

.form-check.creditCard {
  border: 1px solid #ddd;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  margin: 8px;
  padding: 0.75rem;
  width: calc(50% - 16px);
}
@media screen and (max-width: 1023px) {
  .form-check.creditCard {
    width: 100%;
  }
}

.form-check-input.product {
  margin-right: 8px;
  margin-left: 0;
  width: 1.15em;
  height: 1.15em;
}

.creditCardBlock {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 640px) {
  .creditCardBlock {
    flex-direction: column;
    align-items: flex-start;
  }
}
.creditCardBlock .creditCardImage {
  margin-right: 8px;
  margin-bottom: 8px;
}
.creditCardBlock .creditCardImage img {
  max-width: 96px;
}
.creditCardBlock .creditCardName {
  min-width: 230px;
}
.creditCardBlock .creditCardName .cardTitle {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 4px;
}