@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100..900&display=swap');
@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; }

main.bs-main {
    background-color: white;
    color: #241916;
    --letter-spacing-ratio: .01pt;
    --font-ratio: .75pt;
    --font-size-h2: 32;
    --font-size-h3: 24;
    --font-size-p: 16;
}
@media (max-width: 1200px) {
    main.bs-main { --font-ratio: .66pt; 
        --font-size-h2: 24;
        --font-size-h3: 20;
        --font-size-p: 16;
    }
}
.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: 992px) {
    .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 { font-size: calc(var(--font-size-p) * var(--font-ratio)); font-weight: 400; letter-spacing: calc(var(--font-size-h2) * .05pt); }
@media (max-width: 1200px) {
  .bs-main p {
    line-height: 1.4;
  }
}

.bs-main h3 { margin-bottom: 1rem; }
.bs-main .btn-bg { background-image: url('./section01/buybutton.webp'); background-size: contain; background-position: center; background-repeat: no-repeat; display: inline-block; aspect-ratio: 145 / 38; width: 145px; height: 38px; color: white; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 20px; }
@media (max-width: 1400px) {
  .bs-main .btn-bg { width: 130px; height: 34px; font-size: 18px; }
}
@media (max-width: 1200px) {
  .bs-main .btn-bg { width: 120px; height: 32px; font-size: 16px; }
}
@media (max-width: 768px) {
  .bs-main .btn-bg { width: 80px; height: 24px; font-size: 12px; }
}

.bs-main section .highlight {
    --color: #b0e6e4;
    background-color: linear-gradient(0deg, var(--color) 0%, var(--color) 100%);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 90%;
}

.bs-main section.hero { background-image: url('./section01/hero_bg.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.bs-main section.hero .container { aspect-ratio: 16 / 9; display: flex; align-items: flex-end; justify-content: center; }
.bs-main section.hero img.text-1 { aspect-ratio: 193 / 444; top: 5%; left: 0%; max-height: 65%; }
.bs-main section.hero img.text-2 { aspect-ratio: 334 / 120; }
.bs-main section.hero img.product { left: 20%; top: 7%; width: 60%; }
.bs-main section.hero .title-buttons { right: 0%; bottom: 5%; max-width: 30%; filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 10px #FFF) drop-shadow(0 0 10px #FFF); }
.bs-main section.hero .title-buttons .buttons { gap: 1rem; float: right; }
@media (max-width: 768px) {
  .bs-main section.hero { background-size: 500%; background-position: 32% bottom; }
  .bs-main section.hero .container { aspect-ratio: 9 / 16; }
  .bs-main section.hero img.text-1 { max-height: 40%; }
  .bs-main section.hero img.text-1 { max-height: 40%; }
  .bs-main section.hero img.product { left: 11%; top: 27%; width: 100%; transform: scale(1.2); }
  .bs-main section.hero .title-buttons { max-width: 60%; left: 50%; right: auto; transform: translateX(-50%); }
  .bs-main section.hero .title-buttons img { transform-origin: bottom; transform: scale(1.8); }
  .bs-main section.hero .title-buttons .buttons { flex-direction: row; gap: .3rem; align-items: center; float: unset; justify-content: center; }
}
.bs-main section.section2 { background-color: white; }
.bs-main section.section3 { background-image: url('./section3/caropen.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.bs-main section.section3 .container { aspect-ratio: 16 / 9; }
@media (max-width: 768px) {
    /* .bs-main section.section3 { background-image: url('./section3/caropen2.webp'); */
}

.bs-main section.section4 .animate-wrapper { overflow: visible; }
@keyframes animateBattery_left {
    0% { opacity: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
    10% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes animateBattery_left {
    0% { opacity: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
    10% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

.bs-main section.section4 .animate-battery_left { -webkit-animation: animateBattery_left 2s ease-in 0s infinite; animation: animateBattery_left 2s ease-in 0s infinite; will-change: transform, opacity; }
@keyframes animateHealthchair {
    0% { opacity: 1; }
    20% { opacity: 0.2; }
    100% { opacity: 0.2; }
}
.bs-main section.section4 .animate-healthchair { animation: animateHealthchair 2s ease-in 0s infinite; }
@-webkit-keyframes animateBattery_right {
    0% { opacity: 0; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); }
    10% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes animateBattery_right {
    0% { opacity: 0; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); }
    10% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
.bs-main section.section4 .animate-battery_right { -webkit-animation: animateBattery_right 2s ease-in 0s infinite; animation: animateBattery_right 2s ease-in 0s infinite; will-change: transform, opacity; }

.bs-main section.section5 .animate-wrapper { overflow: visible; }
@-webkit-keyframes section5_animateCar {
    0% { 
        -webkit-transform: translate3d(-10%, 5%, 0) rotate3d(0, 0, 1, -3.5deg); 
        transform: translate3d(-10%, 5%, 0) rotate3d(0, 0, 1, -3.5deg); 
    }
    20% { 
        -webkit-transform: translate3d(0%, 5%, 0) rotate3d(0, 0, 1, -10.5deg); 
        transform: translate3d(0%, 5%, 0) rotate3d(0, 0, 1, -10.5deg); 
    }
    100% { 
        -webkit-transform: translate3d(20%, 2%, 0) rotate3d(0, 0, 1, -10.5deg); 
        transform: translate3d(20%, 2%, 0) rotate3d(0, 0, 1, -10.5deg); 
    }
}
@keyframes section5_animateCar {
    0% { 
        -webkit-transform: translate3d(-10%, 5%, 0) rotate3d(0, 0, 1, -3.5deg); 
        transform: translate3d(-10%, 5%, 0) rotate3d(0, 0, 1, -3.5deg); 
    }
    20% { 
        -webkit-transform: translate3d(0%, 5%, 0) rotate3d(0, 0, 1, -10.5deg); 
        transform: translate3d(0%, 5%, 0) rotate3d(0, 0, 1, -10.5deg); 
    }
    100% { 
        -webkit-transform: translate3d(20%, 2%, 0) rotate3d(0, 0, 1, -10.5deg); 
        transform: translate3d(20%, 2%, 0) rotate3d(0, 0, 1, -10.5deg); 
    }
}
.bs-main section.section5 .animate-car { transform-origin: 70px 448px; -webkit-animation: section5_animateCar 5s ease-in 0s infinite; animation: section5_animateCar 5s ease-in 0s infinite; will-change: transform, rotate; }
@keyframes section5_animateLine {
    0% { transform: rotate(7deg) translate(-10%, 0); }
    20% { transform: rotate(0deg) translate(0, 0); }
    100% { transform: rotate(0deg) translate(0, 0); }
}
.bs-main section.section5 .animate-line { transform-origin: 70px 448px; animation: section5_animateLine 5s ease-in 0s infinite; }
@keyframes section5_animateGround {
    0% { opacity: 0; }
    40% { opacity: 1; }
    100% { opacity: 1; }
}
.bs-main section.section5 .animate-ground { animation: section5_animateGround 5s ease-in 0s infinite; }
@keyframes section5_animateWind {
    0% { transform: translate(0px, -10px); }
    100% { transform: translate(-50px, 0); }
}
.bs-main section.section5 .animate-wind { transform-origin: center; animation: section5_animateWind 1s ease-in 0s infinite; }


.bs-main section.section6 .animate-fade { animation: animateFade 800ms ease-in 0s infinite; }
@keyframes animateFade {
    0% { opacity: 1; }
    80% { opacity: 0.5; }
    100% { opacity: 0.5; }
}
/* 1. 子元素（輪子本身）：保持靜止，不放任何動畫 */
.bs-main section.section7 .animate-wheel { 
    transform-origin: center; 
}

/* 2. 家長元素：統一執行所有動效 */
.bs-main section.section7 .animate-wheel-wrapper-translate { 
    width: 40%; 
    transform-origin: center; 
    bottom: 2%; 
    left: 5%; 
    /* 
       - 總長度 6s (滾入 2s + 定格靜止 4s)
       - 使用 infinite 讓它每 6 秒自動重頭播一次
       - 使用 cubic-bezier 模擬前半段 ease-out 煞車，後半段定格
    */
    animation: wheelRollAndHold 6s cubic-bezier(0.25, 1, 0.5, 1) infinite; 
}

/* 3. 重新規劃的百分比時間軸 */
@keyframes wheelRollAndHold {
    0% { 
        /* 初始狀態：右上角、縮小、旋轉一圈、透明 */
        transform: translate(200%, -100%) rotate(0deg) scale(.2); 
        opacity: 0; 
    }
    /* 0% 到 33.3% (即前 2 秒)：輪子滾入畫面並定位 */
    33.3% { 
        transform: translate(-10%, 0) rotate(0deg) scale(1); 
        opacity: 1; 
    }
    /* 33.3% 到 90% (中間約 3.4 秒)：完美定格在畫面中不動 */
    99% { 
        transform: translate(-10%, 0) rotate(0deg) scale(1); 
        opacity: 1; 
    }
    /* 99% 到 100% (最後 0.6 秒)：快速淡出，準備下一次重播，避免突兀切換 */
    100% {
        transform: translate(-10%, 0) rotate(0deg) scale(1); 
        opacity: 0; 
    }
}
/* 
.bs-main section.section7 .animate-wheel-wrapper-translate { width: 40%; transform-origin: center; bottom: 2%; left: 5%; animation: animateWheelWrapperTranslate 3s ease-out 0s infinite; }
@keyframes animateWheelWrapperTranslate {
    0% { transform: translate(200%, -100%) rotate(360deg); opacity: 0; }
    50% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    99% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100% { opacity: 0; }
}
.bs-main section.section7 .animate-wheel { transform-origin: center; animation: animateWheel 3s linear 0s infinite; }
@keyframes animateWheel {
    0% { transform: scale(.2); }
    50% { transform: scale(1); }
    99% { transform: scale(1); }
    100% { transform: scale(.2); }
} */

.bs-main section.section10 .animate-signal { animation: section10_animateSignal 6s linear 0s infinite; }
@keyframes section10_animateSignal {
    0% { opacity: 0; }
    15% { opacity: .3; }
    20% { opacity: 1; }
    25% { opacity: .3; }
    30% { opacity: 1; }
    35% { opacity: .3; }
    40% { opacity: 1; }
    45% { opacity: .3; }
    /*  */
    50% { opacity: 0; }
    65% { opacity: .3; }
    70% { opacity: 1; }
    75% { opacity: .3; }
    80% { opacity: 1; }
    85% { opacity: .3; }
    90% { opacity: 1; }
    95% { opacity: .3; }
    100% { opacity: 1; }
}
.bs-main section.section10 .animate-car { -webkit-animation: section10_animateCar 6s ease-in-out 0s infinite; animation: section10_animateCar 6s ease-in-out 0s infinite; will-change: transform; }
@-webkit-keyframes section10_animateCar {
    0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    15% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    50% { -webkit-transform: translate3d(-5%, 5%, 0); transform: translate3d(-5%, 5%, 0); }
    65% { -webkit-transform: translate3d(-5%, 5%, 0); transform: translate3d(-5%, 5%, 0); }
    100% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); }
}
@keyframes section10_animateCar {
    0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    15% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    50% { -webkit-transform: translate3d(-5%, 5%, 0); transform: translate3d(-5%, 5%, 0); }
    65% { -webkit-transform: translate3d(-5%, 5%, 0); transform: translate3d(-5%, 5%, 0); }
    100% { -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); }
}
.bs-main section.section10 .animate-remote { transform-origin: 83% 81%; animation: section10_animateRemote 6s linear 0s infinite alternate; }
@keyframes section10_animateRemote {
    0% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}

.bs-main section.section11 .icon-group-2 {  }
@media (max-width: 992px) {
    .bs-main section.section11 .icon-group-2 { width: 66%; }
}

.bs-main section.section12 { background-color: #1ab3c3; }
.bs-main section.section12 .icon {  height: 80px; }
.bs-main section.section12 .container { background-image: linear-gradient(90deg, #00acbc 0%, #55bfd3 85%, #00acbc 100%); }
@media (min-width: 768px) {
    .bs-main section.section12 .container { aspect-ratio: 32 / 9; }
}
@media (max-width: 768px) {
.bs-main section.section12 .icon { height: 45px; }
.bs-main section.section12 p { font-size: 10px; letter-spacing: 0; }
}

.bs-main section.section13 { background-image: url('./section13/living.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.bs-main section.section13 .small { font-size: .8em; }
@media (min-width: 768px) {
    .bs-main section.section13 .container { aspect-ratio: 16 / 9; }
}
@media (max-width: 992px) {
    .bs-main section.section13 { background-position: 15%; }
    .bs-main section.section13 p { text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8), 0px 0px 2px rgba(255, 255, 255, 0.8), 0px 0px 2px rgba(255, 255, 255, 0.8); }
}