.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: 18;
}
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); }
.w-60 { width: 60%; }

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

.my-body { background-color: white; color: #2A6A6B; overflow: hidden; font-family: 'Noto Sans TC', sans-serif; letter-spacing: .1rem; }
.my-body p { margin-bottom: .5rem; }
.text-gray { color: #747476; }
@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; }
@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; }
}
body.custom-background { background-color: white; overflow-x: hidden;}
.delay-1s { animation-delay: -1s; }
.delay-2s { animation-delay: -2s; }
.delay-3s { animation-delay: -3s; }

@media screen and (min-width: 1024px) {
    .w-lg-100 { width: 100% !important; }
    .w-lg-75 { width: 75% !important; }
    .w-lg-50 { width: 50% !important; }
}

.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_1 { background-image: url(./section1/Asset1.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
.section_1 .section-width-lg { aspect-ratio: 16 / 9; padding-top: 10rem; }
.section_1 .name { left: 0; bottom: 4%; width: 42vw; }
.section_1 .product { bottom: 0%; right: 0%; width: 36vw; }
@media screen and (max-width: 1024px) {
    .section_1 { background-position: 30% center; }
    .section_1 .name { width: 45vw; }
    .section_1 .product { width: 38vw; }
}

.section_4 .bg-img-wrapper { aspect-ratio: 399 / 214; position: relative; z-index: 0; }
.section_4 .bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.section_4 .img-vs { position: absolute; top: 50%; left: 50%; transform: translate(-62%, -50%); width: 9%; }

@media screen and (max-width: 768px) {
    .section_4 .item-image { aspect-ratio: auto; }
    .section_4 .bg-img-wrapper { aspect-ratio: auto; }
    .section_4 .bg-img { display: none; }
    .section_4 .item-bg-1 {
        aspect-ratio: 320/360;
        background-color: #daeeed;
        border-radius: 1rem;
        margin-bottom: 1rem;
        padding: 1rem;
    }
    .section_4 .item-bg-2 {
        aspect-ratio: 320/360;
        background-color: #E5E5E5;
        border-radius: 1rem;
        padding: 1rem;
    }
    .section_4 .img-vs {
        z-index: 3;
        transform: translate(-50%, -50%);
        width: 18%;
    }
}

.section_5 .item-wrapper { background-color: #daeeed; padding: 1rem; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
@media screen and (max-width: 1024px) {
    .item-wrapper {
        width: 80vw;
        margin: 0 auto;
    }
}

.section_6 .item-wrapper { border: 2px solid #2A6A6B; padding: 2rem; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.section_6 .img-wrapper { height: 80px; aspect-ratio: 3 / 2; margin-bottom: 1rem; }
@media screen and (max-width: 1024px) {
    .item-wrapper {
        width: 80vw;
        margin: 0 auto;
    }
}

.section_11 .img {
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.section_11 .single-row {
    font-size: calc(var(--font-size-p) * var(--font-ratio));
    font-weight: 400;
    letter-spacing: calc(var(--font-size-p) * .1pt);
}