@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100..900&display=swap');

.bs-main .relative { position: relative; }
.bs-main .absolute { position: absolute; }
.bs-main .w-20 { width: 20%; }
.bs-main .w-30 { width: 30%; }
.bs-main .w-80 { width: 80%; }
.bs-main .w-85 { width: 85%; }
.bs-main .text-justify { text-align: justify; }
@media (min-width: 1199px) {
  .bs-main .text-lg-justify { text-align: justify !important; }
  .bs-main .text-lg-left { text-align: left !important; }
}
@media (min-width: 1199px) {
    .bs-main .w-lg-50 { width: 50% !important; }
    .bs-main .w-lg-70 { width: 70% !important; }
    .bs-main .w-lg-80 { width: 80% !important; }
    .bs-main .w-lg-100 { width: 100% !important; }
    .bs-main .pt-lg-10 { padding-top: 5rem; }
}
.bs-main .pt-10 { padding-top: 5rem; }
.bs-main .py-10 { padding-top: 5rem; padding-bottom: 5rem; }

main.bs-main {
    background-color: black; color: white;
    --letter-spacing-ratio: .01pt;
    --font-ratio: 1rem;
    --font-size-h2: 4.17;
    --font-size-h3: 3.17;
    --font-size-p: 2.17;
}
@media (max-width: 1200px) {
    main.bs-main {
    --font-size-h2: 3.17;
    --font-size-h3: 2.17;
    --font-size-p: 1.6;
    }
}
.bs-main h2.hero { font-size: 2rem; font-weight: 700; }
.bs-main h2 { font-size: calc(var(--font-size-h2) * var(--font-ratio)); font-weight: 600; letter-spacing: calc(var(--font-size-h2) * .1pt); }
@media (min-width: 1199px) {
    .bs-main h2.large { font-size: calc(var(--font-size-h2) * var(--font-ratio) * 1.6); }
}
.bs-main h3 { font-size: calc(var(--font-size-h3) * var(--font-ratio)); font-weight: 700; letter-spacing: calc(var(--font-size-h2) * .1pt); }
.bs-main p, .bs-main span { font-size: calc(var(--font-size-p) * var(--font-ratio)); font-weight: 400; letter-spacing: calc(var(--font-size-h2) * .05pt); line-height: 1.4; }
@media (max-width: 1200px) {
  .bs-main p, .bs-main span {
    line-height: 1.4;
  }
}


.bs-main h2 { color: #30bacd; }
.bs-main h3 { color: #30bacd; }
.bs-main section.hero { background-image: url('./section/section1/Asset1@2x.webp'); background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
.bs-main section.hero .container { aspect-ratio: 16/10; display: flex; align-items: flex-end;  }
.bs-main section.hero img { width: 50%; aspect-ratio: 1117 / 377; margin: 0 0 4rem 0; }
@media (max-width: 1200px) {
    .bs-main section.hero { background-size: cover; }
    .bs-main section.hero .container { aspect-ratio: 5/4; }
    .bs-main section.hero img { width: 60%; margin: 0 0 4rem 0; }
}

.bs-main .section_shop_now a { text-decoration: none; background-color: #30bacd; color: white; width: 140px; font-family: 'Noto Sans TC', sans-serif; font-size: 18px; font-weight: 600; font-style: normal; letter-spacing: 5px; border-radius: 50px; padding: 5px 24px 6px; display: inline-block; transition: transform .5s ease-in-out; }
.bs-main .section_shop_now a:hover { transform: scale(1.05); background: white; color: #30bacd; }
.bs-main .section_shop_now { padding-top: 3rem; padding-bottom: 1rem; text-align: center; }
@media (max-width: 1200px) {
    .bs-main .section_shop_now a { width: 120px; font-size: 14px; padding: 4px 20px 4px; }
}

/*  */
.bs-main .section2 .img-3s { top: 0; left: 0; }
@media (min-width: 1199px) {
  .bs-main .section2 .img-3s { top: 0%; left: 0%; }
  .bs-main .section2 .patent { transform: scale(1.15); transform-origin: bottom left; }
}
.bs-main .section2 .details { bottom: 0; right: 0; width: 50%; }
.bs-main .section2 .details p { font-size: 1.2em; line-height: 1.4em; }
@media (max-width: 1199px) {
.bs-main .section2 .details p { font-size: .85em; line-height: 1.35em; }
}

/*  */
.bs-main .section7 .features .label { font-size: 1rem; }
@media (max-width: 1200px) {
    .bs-main .section7 .features { justify-content: center; align-items: center; }
    .bs-main .section7 .features .feature { padding-right: 1.5rem; padding-left: 1.5rem; }
}
@media (min-width: 1199px) {
    .bs-main .section7 .features .feature { padding-right: 3rem; }
    .bs-main .section5 .image { transform: scale(1); transform-origin: center; }
}

/*  */
.bs-main .section9 .spec { background-color: white; padding: 1.5rem 3rem; border-radius: 24px; color: #000; width: max-content; margin-bottom: 3rem; }
.bs-main .section9 .spec .spacer { display: inline-block; width: 3rem; }
.bs-main .section9 .row-spec-table { --font: 1.8rem }
.bs-main .section9 .col-spec-table-item { border-bottom: 1px solid #FFF; display: flex; flex-direction: row; font-size: var(--font); line-height: var(--font); justify-content: center; align-items: center; margin-bottom: .8rem; }
.bs-main .section9 .col-spec-table-item .img { width: 8%; display: flex; justify-content: center; align-items: center; }
.bs-main .section9 .col-spec-table-item .img img { width: 80%; }
.bs-main .section9 .col-spec-table-item .label { width: 18%; }
.bs-main .section9 .col-spec-table-item .label span { width: 85%; font-size: var(--font); line-height: var(--font); display: flex; justify-content: space-between; }
.bs-main .section9 .col-spec-table-item .colon { width: 3%; font-size: var(--font); line-height: var(--font); }
.bs-main .section9 .col-spec-table-item .value { flex: 1; font-size: var(--font); line-height: var(--font); }
.bs-main .section9 .col-spec-table-item .color-circle { width: 18px; height: 18px; border-radius: 50%; background-color: #000; border: 1px solid #FFF; }
@media (max-width: 1200px) {
    .bs-main .section9 .spec { background-color: white; padding: .8rem 1.6rem; font-size: calc(1.6 * var(--font-ratio)); border-radius: 12px; }
    .bs-main .section9 .spec .spacer { width: 1.2rem; }
    .bs-main .section9 .row-spec-table { --font: 1.2rem }
    .bs-main .section9 .col-spec-table-item .label { width: 20%; }
    .bs-main .section9 .col-spec-table-item .label span { width: 80%; }
}

/*  */
@media (max-width: 1200px) {
  .bs-main .section10 h2 {
    font-size: calc(1.6 * var(--font-ratio));
    width: 200%;
  }
}