@media (min-width: 1200px) { .bs-main .container, .bs-main .container-lg, .bs-main .container-md, .bs-main .container-sm, .bs-main .container-xl { max-width: 64vw; } }
@media (min-width: 1400px) { .bs-main .container, .bs-main .container-lg, .bs-main .container-md, .bs-main .container-sm, .bs-main .container-xl { max-width: 64vw; } }

.bs-main .relative { position: relative; }
.bs-main .absolute { position: absolute; }
.bs-main .tl-0 { top: 0; left: 0; }
.bs-main .w-80 { width: 80%; }
.bs-main .w-85 { width: 85%; }
.bs-main .text-justify { text-align: justify; }
.bs-main .flex-1 { flex: 1; }
.bs-main .flex-2 { flex: 2; }
.bs-main .flex-3 { flex: 3; }
.bs-main .flex-4 { flex: 4; }
@media (min-width: 992px) {
  .bs-main .text-lg-left { text-align: left !important; }
  .bs-main .text-lg-justify { text-align: justify !important; }
  .bs-main .w-lg-75 { width: 75% !important; } 
  .bs-main .w-lg-100 { width: 100% !important; } 
}
.bs-main .pt-10 { padding-top: 5rem; }
.bs-main .py-10 { padding-top: 5rem; padding-bottom: 5rem; }

.bs-main {
    background-color: white;
    color: #241916;
    --font-size-h1: 36;
    --font-size-h2: 32;
    --font-size-h3: 24;
    --font-size-h4: 20;
    --font-size-p: 16;
}

.container, 
.container-fluid {
  container-name: bs-container;
  container-type: inline-size;
  --font-ratio: .1cqi; 
  --letter-spacing-ratio: .01cqi;
}
@media (max-width: 767.98px) {
  .container, 
  .container-fluid {
    --font-ratio: .2cqi; 
    --letter-spacing-ratio: .02cqi;
  }
}

.bs-main { font-size: calc(var(--font-size, var(--font-size-p)) * var(--font-ratio)); font-weight: 400; letter-spacing: calc(var(--font-size, var(--font-size-h2)) * calc(var(--letter-spacing-ratio) / 2)); }
.bs-main h1 { font-size: calc(var(--font-size, var(--font-size-h1)) * var(--font-ratio)); font-weight: 700; letter-spacing: calc(var(--font-size, var(--font-size-h1)) * var(--letter-spacing-ratio)); }
.bs-main h2 { font-size: calc(var(--font-size, var(--font-size-h2)) * var(--font-ratio)); font-weight: 600; letter-spacing: calc(var(--font-size, var(--font-size-h2)) * var(--letter-spacing-ratio)); }
@media (min-width: 992px) {
    .bs-main h2.large { font-size: calc(var(--font-size, var(--font-size-h2)) * var(--font-ratio) * 1.6); }
}
.bs-main h3 { font-size: calc(var(--font-size, var(--font-size-h3)) * var(--font-ratio)); font-weight: 500; letter-spacing: calc(var(--font-size, var(--font-size-h2)) * var(--letter-spacing-ratio)); }
.bs-main h4 { font-size: calc(var(--font-size, var(--font-size-h4)) * var(--font-ratio)); font-weight: 400; letter-spacing: calc(var(--font-size, var(--font-size-h2)) * var(--letter-spacing-ratio)); }
@media (max-width: 1199.98px) {
  .bs-main p {
    line-height: 1.4;
  }
}

.bs-main a.button { display: inline-block; white-space: nowrap; text-align: center; text-decoration: none; background-color: var(--button-bg, #01AEA9); color: white; font-family: 'Noto Sans TC', sans-serif; font-size: calc(var(--font-size, var(--font-size-h4)) * var(--font-ratio)); font-weight: 600; font-style: normal; letter-spacing: calc(var(--font-size, var(--font-size-h2)) * var(--letter-spacing-ratio)); padding: 16px 32px; border-radius: 50px; font-weight: bold; color: var(--button-color, white); }
.bs-main a.button:hover { transition: transform .3s ease-out; transform-origin: center; transform: scale(1.05); background-color: var(--button-bg-hover, #49D0CC); color: var(--button-color-hover, white); }

.bs-main .gap-0 { gap: 0 !important; }
.bs-main .gap-1 { gap: .25rem !important; }
.bs-main .gap-2 { gap: .5rem !important; }
.bs-main .gap-3 { gap: 1rem !important; }
.bs-main .gap-4 { gap: 1.5rem !important; }
.bs-main .gap-5 { gap: 3rem !important; }

.bs-main .my-10 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.bs-main .my-20 { margin-top: 10rem !important; margin-bottom: 10rem !important; }

.bs-main .py-10 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.bs-main .py-20 { padding-top: 10rem !important; padding-bottom: 10rem !important; }

/* bs4ex */
.bs-main .w-mc { width: max-content; }
.bs-main .h-mc { height: max-content; }
.bs-main .w-10 { width: 10% !important; }
.bs-main .w-20 { width: 20% !important; }
.bs-main .w-30 { width: 30% !important; }
.bs-main .w-40 { width: 40% !important; }
.bs-main .w-60 { width: 60% !important; }
.bs-main .w-80 { width: 80% !important; }
.bs-main .w-90 { width: 90% !important; }
@media screen and (min-width: 540px) {
    .bs-main .w-sm-100 { width: 100% !important; }
    .bs-main .w-sm-80 { width: 80% !important; }
    .bs-main .w-sm-75 { width: 75% !important; }
    .bs-main .w-sm-60 { width: 60% !important; }
    .bs-main .w-sm-50 { width: 50% !important; }
    .bs-main .w-sm-mc { width: max-content; }
    .bs-main .h-sm-50 { height: 50% !important; }
    .bs-main .h-sm-100 { height: 100% !important; }
}
@media screen and (min-width: 720px) {
    .bs-main .w-md-100 { width: 100% !important; }
    .bs-main .w-md-75 { width: 75% !important; }
    .bs-main .w-md-80 { width: 80% !important; }
    .bs-main .w-md-50 { width: 50% !important; }
    .bs-main .w-md-60 { width: 60% !important; }
    .bs-main .w-md-60 { width: 60% !important; }
    .bs-main .w-md-50 { width: 50% !important; }
    .bs-main .w-md-mc { width: max-content; }
    .bs-main .h-md-50 { height: 50% !important; }
    .bs-main .h-md-100 { height: 100% !important; }
}
@media screen and (min-width: 1024px) {
    .bs-main .w-lg-100 { width: 100% !important; }
    .bs-main .w-lg-75 { width: 75% !important; }
    .bs-main .w-lg-80 { width: 80% !important; }
    .bs-main .w-lg-50 { width: 50% !important; }
    .bs-main .w-lg-60 { width: 60% !important; }
    .bs-main .w-lg-60 { width: 60% !important; }
    .bs-main .w-lg-50 { width: 50% !important; }
    .bs-main .w-lg-mc { width: max-content; }
    .bs-main .h-lg-50 { height: 50% !important; }
    .bs-main .h-lg-100 { height: 100% !important; }
}
@media screen and (min-width: 1200px) {
    .bs-main .w-xl-100 { width: 100% !important; }
    .bs-main .w-xl-75 { width: 75% !important; }
    .bs-main .w-xl-80 { width: 80% !important; }
    .bs-main .w-xl-50 { width: 50% !important; }
    .bs-main .w-xl-60 { width: 60% !important; }
    .bs-main .w-xl-60 { width: 60% !important; }
    .bs-main .w-xl-50 { width: 50% !important; }
    .bs-main .w-xl-mc { width: max-content; }
    .bs-main .h-xl-50 { height: 50% !important; }
    .bs-main .h-xl-100 { height: 100% !important; }
}
@media screen and (min-width: 1400px) {
    .bs-main .w-2xl-100 { width: 100% !important; }
    .bs-main .w-2xl-75 { width: 75% !important; }
    .bs-main .w-2xl-80 { width: 80% !important; }
    .bs-main .w-2xl-50 { width: 50% !important; }
    .bs-main .w-2xl-60 { width: 60% !important; }
    .bs-main .w-2xl-60 { width: 60% !important; }
    .bs-main .w-2xl-50 { width: 50% !important; }
    .bs-main .w-2xl-mc { width: max-content; }
    .bs-main .h-2xl-50 { height: 50% !important; }
    .bs-main .h-2xl-100 { height: 100% !important; }
}

.bs-main .absolute { position: absolute; }
.bs-main .relative { position: relative; }

/*  */
.bs-main .dib { display: inline-block; }
@media screen and (min-width: 540px) {
    .bs-main .sm-dib { display: inline-block; }
}
@media screen and (min-width: 768px) {
    .bs-main .md-dib { display: inline-block; }
}
@media screen and (min-width: 992px) {
    .bs-main .lg-dib { display: inline-block; }
}
@media screen and (min-width: 1200px) {
    .bs-main .xl-dib { display: inline-block; }
}

/*  */
.hhr { display: flex; align-items: center; text-align: center; width: 100%; }
.hhr::before, .hhr::after { content: ""; flex: 1; height: 1px; background-color: #cccccc; }
.hhr::before { margin-right: 15px; }
.hhr::after { margin-left: 15px; }