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

.bs-main {
    --button-bg: #807f85;
    --button-bg-hover: #807f85;
    --button-color: white;
    --button-color-hover: white;
}

.bs-main section.hero { background-image: url('./section1/Asset1.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.bs-main section.hero .container { aspect-ratio: 16 / 12; display: flex; align-items: flex-end; justify-content: center; }
/* @media (max-width: 768px) {
  .bs-main section.hero {  }
  .bs-main section.hero .container { }
} */

.bs-main .brick { display: inline-block; width: 12px; height: 12px; background-color: var(--bg, #000); margin-right: 5px; }
.bs-main p { color: #5c5c5c; }
.bs-main .color { color: #5c5c5c; }

@media (min-width: 768px) {
  .bs-main .container, 
  .bs-main .container-fluid {
    --font-ratio: .12cqi; 
    --letter-spacing-ratio: .012cqi;
    }
}

/*  */

.section_6 { background-image: url('./section6/Asset1@2x.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.section_6 .container { padding: 100px 0; }
.section_6 .container .row { --bs-gutter-x: 4rem; }
@media (max-width: 767.98px) {
  .section_6 { background-position: right 20% top 0%; background-size: 200%; }
  .section_6 .container { padding: 70cqw 0 0; }
  .section_6 .container .row { --bs-gutter-x: 1.5rem; }
  .section_6 .small { font-size: 0.6em; }
}

.section_7 {}
.section_7 .box { background-color: #6e6d73; border-radius: 10px; color: white; text-align: center; padding: 4px 0; }
.section_7 .box .value { font-size: calc(24 * var(--font-ratio)); margin-bottom: -6px; white-space: nowrap; }
.section_7 .box .value .small { font-size: .6em; }
.section_7 .box .label { font-size: calc(14 * var(--font-ratio)); }
@media (max-width: 767.98px) {
    .section_7 h2 { --font-size: 64; }
}
@media (min-width: 992px) {
    .section_7 .box .value { margin-bottom: -10px; }
}

.section_9 .feature-desc { line-height: 1.2; }
@media (min-width: 992px) {
    .section_9 h4 { --font-size: 16; }
    .section_9 p { --font-size: 12; }
}
@media (max-width: 767.98px) {
    .div-mobile-app img {
        transform-origin: bottom right;
        transform: scale(1.2);
    }
}

.section_12 .label { color: #6e6d73; }
.section_12 .value { color: white; background-color: #6e6d73; padding: 4px; border-radius: 4px; }
.section_12 .label p { font-weight: bold; }
.section_12 .value p { color: white; font-weight: bold; }
@media (max-width: 767.98px) {
  .section_12 .item { width: 20%; margin: 0 8px; }
}

@media (max-width: 767.98px) {
    .section_14 h2 { --font-size: 40; }
}


.section_16 { background-image: url('./section16/Asset1.webp'); color: white; background-size: cover; background-position: center; background-repeat: no-repeat; }
.section_16 .container { padding: 20cqi 0; }
.section_16 h2 { padding-top: 20%; --font-size: 24; }
@media (max-width: 767.98px) {
  .section_16 { background-size: 140%; }
  .section_16 .container { padding: 80px 0; }
}
@media (min-width: 768px) {
  .section_16 h2 { --font-size: 50; }
}

.section_qna { margin-top: 10rem; margin-bottom: 10rem; }
.section_qna h2 { color: #666666; }
.section_qna .qna { border-radius: 8px; background-color: #ededed; margin-bottom: 2rem; }
.section_qna .qna .question { position: relative; padding: .4rem 4rem; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #6e6d73; color: white; }
.section_qna .qna .question:before { position: absolute; left: 1.5rem; top: 50%; font-weight: bold; font-size: 1.5em; transform: translateY(-50%); color: #6e6d73; text-align: center; content: "+"; background-color: white; display: inline-block; width: 1.5rem; height: 1.5rem; text-align: center; line-height: 1.5rem; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.section_qna .qna .answer { padding: .8rem 4rem; }