.my-body { 
--font-ratio: .72pt;
--letter-spacing-ratio: .1pt;
--font-size-h1: 42;
--font-size-h2: 36;
--font-size-h3: 28;
--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); }

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

.my-body { background-color: #eee8e6; color: #796456; overflow: hidden; font-family: 'Noto Sans TC', sans-serif; letter-spacing: .1rem; }
.my-body p { margin-bottom: .5rem; }
.my-body hr { background-color: #796456; border-top: 0px; height: 1px;  }
.text-gray { color: #747476; }
@media screen and (max-width: 992px) { .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: 992px) {
    .my-body .section-width-lg { width: 90vw; }
    .my-body .section-width-md { width: 84vw; }
    .my-body .section-width-sm { width: 72vw; }
}
.delay-1s { animation-delay: -1s; }
.delay-2s { animation-delay: -2s; }
.delay-3s { animation-delay: -3s; }

@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-50 { width: 50% !important; }
}
@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-50 { width: 50% !important; }
}

.absolute { position: absolute; }
.relative { position: relative; }

.section_shop_now a { text-decoration: none; background-color: #565E45; 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; }
.section_shop_now a.sm { width: 120px; font-size: 15px; padding: 5px 10px 5px;}

.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: 992px) {
    .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: 30%; top: 30%; width: 30vw; transform: translateX(-48%); }
@media screen and (max-width: 992px) {
    /* .section_1 { background-position: 30% center; } */
    .section_1 .section-width-lg { aspect-ratio: 22 / 9; }
}

.section_3 { background-image: url(./section3/Asset1.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
.section_3 .section-width-md { aspect-ratio: 30 / 9; }

.section_4 { 
    background-image: url(./section0/BG.webp), url(./section0/Asset1.webp), url(./section0/Asset2.webp);
    background-repeat: repeat-y, no-repeat, no-repeat;
    background-position: left top, right 0 top -10vh, left 0 top 40vh;
    background-size: auto, 20%, 20%;
    background-attachment: scroll, scroll, scroll;
    background-blend-mode: multiply;
}

.section_5 { background-color: #565E45; color: white; }

.section_6 {
    background-image: url(./section0/BG.webp), url(./section0/Asset1.webp), url(./section0/Asset2.webp);
    background-repeat: repeat-y, no-repeat, no-repeat;
    background-position: left top, right 0 top -10vh, left 0 top 40vh;
    background-size: auto, 20%, 20%;
    background-attachment: scroll, scroll, scroll;
    background-blend-mode: multiply;
    position: relative;
    transform: translate(0, 0);
}
.section_6.in_view {
    background-attachment: scroll, fixed, fixed;
}
.section_6.in_view_leaving {
    background-position: left top, right 0 top -10vh, left 0 bottom 30vh;
    background-attachment: scroll, scroll, scroll;
}

@media only screen and (max-device-width: 1024px) {
  .section_6 {
    background-image: url(./section0/BG.webp);
  }
}
.section_shop_now-bg { background-image: url(./section0/BG.webp); background-repeat: repeat-y; }

/* .section_6 h3.section-title-lr { position: relative; } */
/* .section_6 h3.section-title-lr:before { content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10%; aspect-ratio: 202 / 17; background-image: url(./section6/Asset5.webp); background-size: contain; background-position: center; background-repeat: no-repeat; } */
/* .section_6 h3.section-title-lr:after { content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 10%; aspect-ratio: 202 / 17; background-image: url(./section6/Asset5.webp); background-size: contain; background-position: center; background-repeat: no-repeat; } */
@media screen and (max-width: 992px) {
    .section_6 h3.section-title-lr:before { display: none;}
    .section_6 h3.section-title-lr:after { display: none;}
}
/* .section_6:before { content: ''; display: block; position: absolute; right: 0; top: 0; width: 30%; aspect-ratio: 331/435; background-image: url(./section0/Asset1.webp); background-size: cover; background-position: center; }
.section_6:after { content: ''; display: block; position: absolute; left: 0; top: 45vh; width: 30%; aspect-ratio: 227/373; background-image: url(./section0/Asset2.webp); background-size: cover; background-position: center; } */

.section_7 { background-color: #EFE9E2; }
.section_7 h3.section-title-lr { position: relative; }
.section_7 h3.section-title-lr:before { content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 30%; aspect-ratio: 388 / 17; background-image: url(./section7/Asset1.webp); background-size: contain; background-position: center; background-repeat: no-repeat; }
.section_7 h3.section-title-lr:after { content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30%; aspect-ratio: 388 / 17; background-image: url(./section7/Asset1.webp); background-size: contain; background-position: center; background-repeat: no-repeat; }
.section_7 { position: relative; }
.section_7 .row:before { position: absolute; width: 100%; height: 25%; content: ''; background-color: #565E45; top: 38%; left: 0; z-index: 0; }
@media screen and (max-width: 992px) {
    .section_7 h3.section-title-lr:before { display: none;}
    .section_7 h3.section-title-lr:after { display: none;}
    .section_7 .row:before { display: none; }
    .section_7 .row .col-12 { position: relative; }
    .section_7 .row .col-12:before { position: absolute; width: 200%; height: 30%; content: ''; background-color: #565E45; top: 30%; left: -50%; z-index: 0; }
    .section_7 .row .col-12 div { z-index: 1; position: relative; }
}

.section_8 { color: white; background-image: url(./section8/Asset1.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
.section_8 .spec { width: 540px; text-align: left; }
.section_8 { padding-top: 7rem; padding-bottom: 8rem; }
.section_8 .label { width: 110px; }
.section_8 .value { max-width: 400px; }
.section_8 .spec {
    text-shadow: 0 0 10px #9e9e9ef0;
}

@media screen and (max-width: 768px) {
    .section_8 {
        background-image: url(./section8/Asset2_mobile.webp);
        aspect-ratio: 725 / 501;
        padding: 0;
        background-size: 100%;
        background-size: contain;
    }
    .section_8 .row {
        padding-top: 1.5rem;
    }
    .section_8 .section-width-sm { 
        padding-bottom: 50%;
    }
    .section_8 .spec {
        padding-bottom: 1.5rem;
    }
    .section_8 .spec {
        /* transform: scale(.72);
        transform-origin: bottom center; */
        width: auto;
        --font-ratio: .5pt;
    }
    .section_8 .label { flex: 1; width: auto;}
    .section_8 .value { flex: 4; max-width: auto; }
}