.my-body { 
--font-ratio: .8pt;
--letter-spacing-ratio: .1pt;
--font-size-h1: 36;
--font-size-h2: 30;
--font-size-h3: 26;
--font-size-h4: 22;
--font-size-p: 16;
}
h2.hero { font-size: 2rem; font-weight: 700; }
h2 { font-size: calc(var(--font-size-h2) * var(--font-ratio)); font-weight: 600; letter-spacing: calc(var(--font-size-h2) * .2pt); }
h2 span.highlight { font-size: 3.8rem; font-weight: 600; letter-spacing: 0.2rem; }
h3 { font-size: calc(var(--font-size-h3) * var(--font-ratio)); font-weight: 700; letter-spacing: calc(var(--font-size-h3) * .14pt); }
h4 { font-size: calc(var(--font-size-h4) * var(--font-ratio)); font-weight: 700; letter-spacing: calc(var(--font-size-h4) * .14pt); }
p { font-size: calc(var(--font-size-p) * var(--font-ratio)); font-weight: 400; letter-spacing: calc(var(--font-size-p) * .1pt); }
.dib { display: inline-block; }
.w-fit { width: fit-content; }
.img-border-radius { border-radius: 10px; }
.div-border-radius { border-radius: 18px; }

@media screen and (max-width: 1024px) {
    .my-body {
        --font-ratio: .7pt;
    }
}

.my-body { background-color: white; color: #0f0300; overflow: hidden; font-family: 'Noto Sans TC', sans-serif; letter-spacing: .1rem; }
.my-body .text-color { color: #0f0300; }
.my-body p { margin-bottom: .5rem; }
.my-body h3 { white-space: nowrap; margin-bottom: .8rem; }
@media screen and (max-width: 1024px) { .my-body p { margin-bottom: .3rem; } }
.my-body .my-10 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.my-body .section-width-lg { width: 78vw; }
.my-body .section-width-md { width: 68vw; }
.my-body .section-width-sm { width: 64vw; }
.my-body .section-width-xs { width: 60vw; }
@media screen and (max-width: 1024px) {
    .my-body .section-width-lg { width: 90vw; }
    .my-body .section-width-md { width: 84vw; }
    .my-body .section-width-sm { width: 72vw; }
    .my-body .section-width-xs { width: 64vw; }
}
body.custom-background { background-color: white; overflow-x: hidden;}
.delay-1s { animation-delay: -1s; }
.delay-2s { animation-delay: -2s; }
.delay-3s { animation-delay: -3s; }

.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }
@media screen and (min-width: 768px) {
    .w-md-100 { width: 100% !important; }
    .w-md-80 { width: 80% !important; }
    .w-md-75 { width: 75% !important; }
    .w-md-50 { width: 50% !important; }
}
@media screen and (min-width: 992px) {
    .w-lg-100 { width: 100% !important; }
    .w-lg-75 { width: 75% !important; }
    .w-lg-50 { width: 50% !important; }
}
@media screen and (min-width: 768px) {
    .h-md-100 { height: 100% !important; }
}

@media screen and (min-width: 768px) {
    .text-md-center { text-align: center !important; }
    .w-md-100 { width: 100% !important; }
    .w-md-75 { width: 75% !important; }
    .w-md-60 { width: 60% !important; }
    .w-md-50 { width: 50% !important; }
    .w-md-40 { width: 40% !important; }
    .md-absolute { position: absolute; }
    .md-dib { display: inline-block; }
}
@media screen and (min-width: 992px) {
    .text-lg-center { text-align: center !important; }
    .w-lg-100 { width: 100% !important; }
    .w-lg-75 { width: 75% !important; }
    .w-lg-60 { width: 60% !important; }
    .w-lg-50 { width: 50% !important; }
    .w-lg-40 { width: 40% !important; }
    .lg-absolute { position: absolute; }
    .lg-dib { display: inline-block; }
}
.absolute { position: absolute; }
.relative { position: relative; }

.section_shop_now a { text-decoration: none; background-color: #2A6A6B; color: white; width: 160px; font-family: 'Noto Sans TC', sans-serif; font-size: 24px; font-weight: 600; font-style: normal;letter-spacing: 5px;  border-radius: 50px; padding: 5px 32px 6px; border-radius: 50px; }
.section_shop_now { transition: transform .5s ease-in-out; }
.section_shop_now:hover { transform: scale(1.05); }
.section_shop_now { margin-top: 5rem; margin-bottom: 7rem; }

.icon-title-description { margin-bottom: 1rem; }
.icon-title-description img { }
.icon-title-description h4 { margin-left: 1rem; font-weight: bold; margin-bottom: 0; }

section { padding-top: 3rem; padding-bottom: 3rem; }

@media screen and (max-width: 1024px) {
    .section_shop_now { margin-top: 5rem; margin-bottom: 5rem; }
}

/* ── Section-specific styles ──────────────────────────────────── */

.section_1 { padding: 0; background-image: url('./Section 1/webp/hero.webp'); background-size: contain; background-position: top center; background-repeat: no-repeat; aspect-ratio: 1920/1447; }
.section_1 .product-wrapper { width: 100%; aspect-ratio: 1.35; }
.section_1 .text1 { width: 40%; left: 8%; top: 20%; }
.section_1 .product { width: 30%; top: 42%; left: 13%; }
.section_1 .savewo_logo { width: 20%; top: 7%; left: 3%; }
.section_1 .running { width: 15%; top: 4%; right: 8%; }
.section_1 .text2 { width: 90%; margin: 0 auto; filter: drop-shadow(0px 10px 20px rgba(10, 10, 10, .8)) drop-shadow(0px 10px 20px rgba(10, 10, 10, .8)) drop-shadow(0px 10px 20px rgba(10, 10, 10, .8)); }
.section_1 a { text-align: center; margin-top: 1rem; }
.section_1 .buybutton { width: 80%; }
@media screen and (max-width: 1200px) {
    .section_1 { aspect-ratio: 1920 / 1200; background-size: cover; }
    .section_1 .product-wrapper { aspect-ratio: 1.65; }
    .section_1 .text1 { width: 40%; top: 5%; }
    .section_1 .product { width: 30%; top: 24%; }
    .section_1 .text2 { width: 60%; }
}
@media screen and (max-width: 768px) {
    .section_1 { background-size: cover; aspect-ratio: 3 / 4; padding-top: 5rem; }
    .section_1 .product-wrapper { aspect-ratio: 1.2; }
    .section_1 .text1 { width: 50%; top: -5%; left: -4%; }
    .section_1 .product { width: 40%; top: 20%; left: 1%; }
    .section_1 .text2 { width: 100%; }
}

.section_2 .bg { background-image: url('./Section\ 2/webp/section2.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 1268/465; }
@media screen and (max-width: 768px) {
    .section_2 .bg { background-image: none; }
}

.section_3 h5 {
  background-image: linear-gradient(to right, #008fc5, #00c1e9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.section_3 .icon { width: 80%; margin: 0 auto; }
.section_3 .bg { background-image: url('./Section\ 3/webp/section3.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 1285/465; }
@media screen and (max-width: 768px) {
    .section_3 .bg { background-image: none; }
}

.section_4 .bg { background-image: url('./Section\ 4/webp/section4.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 1268/465; }
.section_4 .text { left: 0; top: 10%; width: 30%; }
@media screen and (max-width: 768px) {
    .section_4 .bg { background-image: none; }
}

.section_5 .bg { background-image: url('./Section\ 5/webp/section5.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 1268/465; }
@media screen and (max-width: 768px) {
    .section_5 .bg { background-image: none; }
}

.section_6 .bg { background-image: url('./Section\ 6/webp/section6.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 1268/465; }
.section_6 .text { left: 21%; bottom: 0; width: 28%; }
@media screen and (max-width: 768px) {
    .section_6 .bg { background-image: none; }
}

.section_7 .bg { background-image: url('./Section\ 7/webp/section7.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 1268/465; }
.section_7 .text { left: 0; bottom: 0; width: 56%; margin-left: -15%; }
@media screen and (max-width: 768px) {
    .section_7 .bg { background-image: none; }
    .section_7 .text { margin-left: 0; }
}

.section_8 .section8a { background-image: url('./Section\ 8/webp/section8a.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 594/427; }
.section_8 .section8a .text { bottom: 12%; left: 23%; width: 35%;background-image: url('./Section\ 8/webp/section8text.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 258/170; }
.section_8 .section8b { background-image: url('./Section\ 8/webp/section8b.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 594/427; }
.section_8 p { width: 60%; }
.section_8 .charger {  }
@media screen and (min-width: 576px) and (max-width: 1600px) {
    .section_8 .charger { width: 60%; }
}
@media screen and (max-width: 1128px) and (min-width: 1024px) {
    .section_8 .charger { width: 40%; }
}
@media screen and (max-width: 768px) {
    .section_8 .section8a { background-image: none; }
    .section_8 .section8b { background-image: none; }
}
@media screen and (max-width: 1280px) and (min-width: 768px) {
    .section_8 { 
        --font-size-h4: 18;
        --font-size-p: 14;
    }
}

.section_9 .section9a { background-image: url('./Section\ 9/webp/section9a.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 594/427; }
.section_9 .section9b { background-image: url('./Section\ 9/webp/section9b.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 594/427; }
.section_9 p { width: 60%; }
@media screen and (max-width: 768px) {
    .section_9 .section9a { background-image: none; aspect-ratio: auto; }
    .section_9 .section9b { background-image: none; aspect-ratio: auto; }
    .section_9 .absolute { position: static; }
    .section_9 p { width: 100%; }
}
@media screen and (max-width: 1280px) and (min-width: 768px) {
    .section_9 { 
        --font-size-h4: 18;
        --font-size-p: 14;
    }
}

.section_10 { margin-bottom: 8rem; }
.section_10 h4 { color: #006e99; border-bottom: 1px solid #006e99; padding-top: 1rem; padding-bottom: 1rem; margin-bottom: 1rem; }
.section_10 .bg-l { left: 0; top: 20%; width: 40%;  background-image: url('./Section\ 10/webp/section10BL.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 900/365; }
.section_10 .bg-r { right: -10%; bottom: 20%; width: 40%;  background-image: url('./Section\ 10/webp/section10RD.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 900/365; }
.section_10 .item-2 { transform: translateY(30%); }
.section_10 .item-4 { transform: translateY(30%); }
.section_10 .item-1 .index { width: 15%; top: 70%; left: -8%; }
.section_10 .item-2 .index { width: 15%; top: -6%; right: 0%; }
.section_10 .item-3 .index { width: 15%; top: -8%; right: 0%; }
.section_10 .item-4 .index { width: 15%; top: -9%; right: 0%; }
.section_10 .item-4 .decoration { width: 16%; bottom: -4%; right: -3%; }
@media screen and (max-width: 768px) {
    .section_10 { margin-bottom: 0rem; }
    .section_10 .item-2 { transform: none; }
    .section_10 .item-4 { transform: none; }
    .section_10 .bg-l { display: none; }
    .section_10 .bg-r { display: none; }
    .section_10 .item-1 .index { display: none; }
    .section_10 .item-2 .index { display: none; }
    .section_10 .item-3 .index { display: none; }
    .section_10 .item-4 .index { display: none; }
}

.section_11 h5 { color: #006e99; }
.section_11 p { color: #00c0f9; margin-bottom: 1rem; }
.section_11 p.remarks { color: #000000; --font-size-p: 12; }
.section_11 .col-left { border-right: 1px solid #00c0f9; }
@media screen and (max-width: 768px) {
    .section_11 .col-left { border-right: none; border-bottom: 1px solid #00c0f9; margin-bottom: 2rem; padding-bottom: 1rem; }
}

.section_11 h3 { color: #006e99; }

.section_12 h3 { color: #006e99; }
.section_12 .row { border: 1px solid #00d3f8; background-color: white; border-radius: 10px; filter: drop-shadow(4px 4px 8px rgba(240, 240, 240, 1)); }
.section_12 .bulb { transform: translate(-30%, -30%); }
.section_12 .col-left { border-right: 1px solid #00d3f8; }
@media screen and (max-width: 768px) {
    .section_12 .col-left { border-right: none; }
    .section_12 .col-left img { border-bottom: 1px solid #00d3f8; padding-bottom: 3rem; }
}