:root {
  --element-text-default: #212529;
  --Default-black: #212529;
  --Default-White: #fff;
  --primary-medium: #1a75bc;
  --primary-light: #e3effb;
  --primary-light-2: #f2f8fd;
  --element-text-secondary: #6c757d;
  --element-text-placeholder: #adb5bd;
  --element-text-tertiary: #adb5bd;
  --element-border-primary: #1a75bc;
  --element-surface-light-grey: #f8f9fa;
  --color-blue-300: #8bc4ee;
  --yellow: #ffcc39;
  --color-yellow-300: #ffcc39;
  --color-yellow-100: #fff4c2;
  --color-gray-100: #f8f9fa;
  --color-blue-200: #c2dff5;
  --Blue-400: #4ea6e2;
  --Blue-500: #278bd0;
  --max-width: 100%;
  --paragraph-lead: 20px;
  --paragraph-large: 18px;
  --paragraph-body: 16px;
  --paragraph-small: 14px;
  --paragraph-caption: 12px;
  --56: 56px;
  --32: 32px;
  --14: 14px;
  --12: 12px;
  --4: 4px;
  --element-round-full: 999px;
  --element-surface-primary: #1a75bc;
  --element-surface-primary-dark: #154b77;
  --element-surface-primary-light: #f2f8fd;
  --element-border-standard: #dee2e6;
  --element-text-primary-primary: #1a75bc;
  --element-text-primary-primary-dark: #154b77;
  --element-border-form: #e9ecef;
  --sds-color-border-default-default: #d9d9d9;
  --bs-body-font-size: 16px;
  --gray-800: #343A40;
}
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
html {
  scroll-behavior: smooth;
}
small {
  color: var(--element-text-secondary, #6c757d);
}
.display-1 {
  font-size: 80px !important;
}
.display-2 {
  font-size: 72px !important;
}
.display-3 {
  font-size: 64px !important;
}
h1 {
  font-size: 56px !important;
}
h2 {
  font-size: 48px !important;
}
h3 {
  font-size: 40px !important;
}
h4 {
  font-size: 32px !important;
}
h5 {
  font-size: 24px !important;
}
h6 {
  font-size: 20px !important;
}
h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
  margin-bottom: .5em !important;
  font-weight: 500 !important;
}
#sticky {
  position: sticky;
  top: -1px;
  background: var(--Default-White);
  z-index: 1000;
  /* min-height: 137px; */
  font-family: 'Noto Sans TC', sans-serif !important;
}
.lead{
  font-size: 16px;
  font-weight: 700;
  @media(min-width:992px){
      font-size: 20px;
  }
}
.paragraph-body{
  font-size: var(--paragraph-body);
}
.paragraph-lead {
  font-size: var(--paragraph-lead);
}
.paragraph-large {
  font-size: var(--paragraph-large);
}
.paragraph-body {
  font-size: var(--paragraph-body);
}
.paragraph-small {
  font-size: var(--14);
}
.paragraph-small12 {
  font-size: var(--12);
}
.element-text-default {
  color: #212529 !important;
}
.element-text-secondary {
  color: var(--element-text-secondary) !important;
}
.element-text-primary-primary {
  color: var(--element-text-primary-primary);
}
.element-text-tertiary {
  color: var(--element-text-tertiary);
}
.element-text-placeholder {
  color: var(--element-text-placeholder);
}
.element-border-primary {
  padding: 24px 16px;
  border-radius: 8px;
  border: 2px solid var(--element-border-primary, #1a75bc);
  background: var(--element-surface-primary-light, #f2f8fd);
}
.element-border-default {
  padding: 24px 16px;
  border-radius: 8px;
  border: 1px solid var(--element-border-standard, #dee2e6);
  background: var(--element-surface-normal, #fff);
}
.primary-medium {
  color: var(--primary-medium);
}
label {
  font-size: var(--paragraph-small);
}
::placeholder {
  color: var(--element-text-placeholder, #adb5bd) !important;
}
:-ms-input-placeholder {
  color: var(--element-text-placeholder, #adb5bd) !important;
}
::-ms-input-placeholder {
  color: var(--element-text-placeholder, #adb5bd) !important;
}
.gray-800 {
  color: var(--gray-800);
}
button:active {
  outline: none !important;
  box-shadow: none !important;
}
button:focus,
button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
[data-bs-toggle='collapse']:active,
[data-bs-toggle='collapse']:focus,
[data-bs-toggle='collapse']:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
button,
[data-bs-toggle='collapse'] {
  outline: none !important;
  box-shadow: none !important;
}
button:active,
button:focus,
button:focus-visible,
button:focus-within,
[data-bs-toggle='collapse']:active,
[data-bs-toggle='collapse']:focus,
[data-bs-toggle='collapse']:focus-visible,
[data-bs-toggle='collapse']:focus-within {
  outline: none !important;
  box-shadow: none !important;
}
@media (max-width: 991px) {
  :root {
    --paragraph-lead: 16px;
    --paragraph-large: 16px;
    --paragraph-body: 14px;
    --bs-body-font-size: 14px;
  }
  .display-1 {
    font-size: 48px !important;
  }
  .display-2 {
    font-size: 44px !important;
  }
  .display-3 {
    font-size: 40px !important;
  }
  h1 {
    font-size: 36px !important;
  }
  h2 {
    font-size: 32px !important;
  }
  h3 {
    font-size: 30px !important;
  }
  h4 {
    font-size: 28px !important;
  }
  h5 {
    font-size: 22px !important;
  }
  h6 {
    font-size: 16px !important;
  }
  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    --bs-gutter-x: 20px;
  }
  #sticky {
    min-height: 56px;
  }
}
input,
textarea {
  padding: 12px 16px !important;
  border-radius: 8px;
  border: 1px solid var(--element-border-form);
}
input:focus-visible {
  border: 2px solid var(--element-border-primary) !important;
}
input[type='password']::-webkit-text-security {
  appearance: none;
}
input[type='password']::-moz-password-field {
  appearance: none;
}
input[type='password']::-ms-reveal,
input[type='password']::-ms-clear {
  display: none;
}
input[type='checkbox'] {
  padding: unset !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--element-text-placeholder);
  font-size: var(--paragraph-body, 16px);
}

body {
  margin: 0 auto;
  max-width: var(--max-width);
  font-family: 'Noto Sans TC', sans-serif !important;
  font-size: 16px;
  color: #212529 !important;
  line-height: 24px;
  overflow-x: hidden;
  background: rgba(0, 0, 0, 0.6);
}

img {
  max-width: 100%;
}

.logo-img {
  width: 230px;
}

a {
  text-decoration: none !important;
}

.btn-fill-l {
  font-size: var(--paragraph-large);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--Default-White);
  min-height: 56px;
  padding: 16px 24px;
  border-radius: var(--element-round-full);
  border: unset;
  background: var(--element-surface-primary);
}

.btn-fill-m {
  font-size: var(--paragraph-body);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--Default-White);
  min-height: 40px;
  padding: 10px 20px;
  border-radius: var(--element-round-full);
  border: unset;
  background: var(--element-surface-primary);
}

.btn-fill-s {
  font-size: var(--paragraph-small);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--Default-White);
  min-height: 32px;
  padding: 8px 16px;
  border-radius: var(--element-round-full);
  border: unset;
  background: var(--element-surface-primary);
}

.btn-fill-l:hover,
.btn-fill-m:hover,
.btn-fill-s:hover {
  background: var(--element-surface-primary-dark);
}

.btn-outline-l {
  font-size: var(--paragraph-large);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--element-surface-primary);
  min-height: 56px;
  padding: 16px 24px;
  border-radius: var(--element-round-full);
  border: 2px solid var(--element-surface-primary);
  background: var(--Default-White);
  line-height: 18px;
}

.btn-outline-m {
  font-size: var(--paragraph-body);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--element-surface-primary);
  min-height: 40px;
  padding: 10px 20px;
  border-radius: var(--element-round-full);
  border: 2px solid var(--element-surface-primary);
  background: var(--Default-White);
  line-height: 18px;
}

.btn-outline-s {
  font-size: var(--paragraph-small);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--element-surface-primary);
  gap: 8px;
  min-height: 32px;
  padding: 8px 16px;
  border-radius: var(--element-round-full);
  border: 2px solid var(--element-surface-primary);
  background: var(--Default-White);
  line-height: 1rem;
}

.btn-outline-l:hover,
.btn-outline-m:hover,
.btn-outline-s:hover {
  color: var(--Default-White);
  background: var(--element-surface-primary);
}

.btn-soft-l {
  font-size: var(--paragraph-large);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 16px 24px;
  border-radius: var(--element-round-full);
  background: var(--element-surface-primary-light);
}

.btn-soft-m {
  font-size: var(--paragraph-body);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 20px;
  border-radius: var(--element-round-full);
  background: var(--element-surface-primary-light);
}

.btn-soft-s {
  font-size: var(--paragraph-small);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 8px 16px;
  border-radius: var(--element-round-full);
  background: var(--element-surface-primary-light);
  border: unset;
  color: var(--element-surface-primary);
}

.btn-soft-l:hover,
.btn-soft-m:hover,
.btn-soft-s:hover {
  color: var(--Default-White);
  background: var(--element-surface-primary);
}

.link-l {
  padding: 10px 20px;
  font-size: var(--paragraph-large);
  border: unset;
  background: unset;
  color: var(--element-surface-primary);
}

.link-m {
  font-size: var(--paragraph-body);
  border: unset;
  background: unset;
  color: var(--element-surface-primary);
}

.link-l:hover,
.link-m:hover {
  color: var(--element-text-primary-primary-dark, #154b77);
}

.btn-list {
  padding: 10px;
  border-radius: var(--element-round-full);
  border: 1px solid var(--sds-color-border-default-default);
  background: var(--Default-White);
}
.btn-list:hover {
  background: var(--sds-color-background-default-secondary-hover);
}
.btn-list svg {
  width: 24px;
}
label {
  color: var(--element-text-secondary, #6c757d);
}
#profile label {
  color: var(--element-text-secondary);
  margin-bottom: 4px;
}
#profile span {
  /* color: var(--element-text-secondary); */
  font-size: 12px;
}
input,
select,
.form-select {
  padding: 12px 16px !important;
  border-radius: 8px;
  border: 1px solid var(--element-border-form, #e9ecef);
}
.form-check-input {
  padding: unset !important;
}
#profile input:focus {
  outline: none;
  border-color: var(--primary-color, #007bff);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
#profile input::placeholder {
  color: #adb5bd;
}

.icon {
  color: var(--element-surface-primary);
  font-size: 48px;
}
.icon-bg {
  margin-bottom: 32px;
  width: fit-content;
  padding: 18px;
  width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
  border-radius: 100px;
  background: var(--element-surface-primary-light, #f2f8fd);
  @media(min-width: 992px) {
    width: 96px;
    height: 96px;
  }
}

/* 禁止 body 滾動 */
.no-scroll {
  overflow: hidden !important;
}

.form-check .form-check-input {
  float: left;
  margin-left: unset !important;
}

.offcanvas-backdrop.show {
  display: none;
}
/*  swiper -----------------*/
.swiper-pagination-bullet {
  opacity: 1 !important;
}
@keyframes width {
  0% {
     width: 8px; 
  }
  100% {
    width: 100%;
  }
}
#banner-section {
  .swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0.30) !important;
    position: relative;
    margin: 0;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 8px;
      height: 100%;
      border-radius: 12px;
      background: var(--primary-medium);
      opacity: 0;
    }
  }
  .swiper-pagination-bullet-active {
    background: rgba(0, 0, 0, 0.30) !important;
    position: relative;
    overflow: hidden;
    &::before {
      opacity: 1;
      animation: width 8s linear forwards; /* 8s 為輪播時間，需要跟著 <banner> 的 autoplay 一起調整 */
    }
  }
} 

#video-section, #customer-evaluate {
  .swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0.30) !important;
    position: relative;
    margin: 0;
    transition: .3s;
  }
  .swiper-pagination-bullet-active {
    background: var(--primary-medium) !important;
    position: relative;
    overflow: hidden;
  }
  .left-pagination,
  .right-pagination {
    transition: .3s;
    &.disabled {
      background: #D9D9D9 !important;
      border-color: #B3B3B3;
      pointer-events: none;
    }
    &:hover{
      background: #E6E6E6 !important;
    }
  }
}
/* ------------------------ */


.form-control.is-invalid,
.was-validated .form-control:invalid {
  background-image: none !important;
}
.was-validated .form-control:valid {
  background-image: none !important;
}
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size='1'] {
  --bs-form-select-bg-icon: none !important;
}
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size='1'] {
  --bs-form-select-bg-icon: none !important;
}
#password,
#confirmPassword {
  z-index: 10;
}
.svg-block {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 50px;
  position: absolute;
  padding-right: 10px;
  .password-toggle {
    position: absolute;
    cursor: pointer;
    color: #193154;
    z-index: 10;
  }
}

.modal-backdrop.show {
  z-index: 0 !important;
}

/* @kunukn/vue-collapse/style */
.vue-collapse {
  display: grid;
  grid-template-rows: 1fr;
}
.vue-collapse[data-is-collapsed] {
  grid-template-rows: 0fr;
}
.vue-collapse[data-state=collapsed] {
  visibility: hidden;
}
.vue-collapse:not([data-state=expanded]) {
  overflow-y: hidden;
}
.vue-collapse-content {
  min-height: 0;
}
[data-vue-collapse-transition] {
  transition: grid-template-rows .29s cubic-bezier(.4,0,.2,1);
}
.col-10 {
  width: 100% !important;
}