: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;
  --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;
}

#sticky {
  position: fixed;
  width: 100%;
  top: 0;
  background: var(--Default-White);
  z-index: 100;
  /* min-height: 137px; */
  font-family: 'Noto Sans TC', sans-serif !important;
}

.logo-img {
  width: 230px;
}

.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);
}

/* 蝳�甇� 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);
}

#productModal .modal-dialog {
  top:165px !important;
}

#productModal .modal-content .modal-body #nav .dropdown .dropdown-menu {
  top:165px !important;
}

.dimmable {
  margin-top:50px !important;
}

#steps.fixed .steps .step.done .icon.checkmark {
  text-decoration: none !important;
}

.ui.grid>.row {
  padding: 1rem !important;
}

/* footer new icon */
footer a {
  color: #212529;
  text-decoration: none;
}
footer p:hover a {
  color: var(--element-text-primary-primary-dark);
}
.btn.social-img svg {
  color: #1a75bc;
}
.btn.social-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e3e3e3;
}
.icons-wrapper a {
  width: 40px;
  height: 40px;
}
.icons-wrapper a img {
  width: 18px;
  height: 18px;
}
@media (min-width: 992px) {
  .icons-wrapper {
    max-width: 230px;
  }
}