.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); }

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

.my-body { background-color: white; color: white; overflow: hidden; font-family: 'Noto Sans TC', sans-serif; letter-spacing: .1rem; }
/* .my-body .text-color { color: #2A6A6B; } */
.my-body p { margin-bottom: .5rem; color: white; }
.my-body h3 { white-space: nowrap; margin-bottom: .8rem; }
.my-body h3 img { height: 48px; }
.my-body h3.align-bottom { display: flex; align-items: end; }
.my-body h3.align-bottom img { height: 64px; }
.text-gray { color: #747476; }
@media screen and (max-width: 1199.98px) { .my-body p { margin-bottom: .3rem; } }
.my-body .my-10 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.my-body .section-width-3xl { width: 90vw; }
.my-body .section-width-2xl { width: 86vw; }
.my-body .section-width-xl { width: 82vw; }
.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: 1199.98px) {
    .my-body .section-width-xl { width: 94vw; }
    .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; }
}
.my-body .text-justify { text-align: justify; }
@media screen and (min-width: 768px) {
    .my-body .text-md-center { text-align: center !important; }
    .my-body .text-md-justify { text-align: justify; }
    .md-dib { display: inline-block; }
}
@media screen and (min-width: 992px) {
    .my-body .text-lg-center { text-align: center !important; }
    .my-body .text-lg-justify { text-align: justify; }
    .lg-dib { display: inline-block; }
}
body.custom-background { background-color: white; overflow-x: hidden;}
.delay-1s { animation-delay: -1s; }
.delay-2s { animation-delay: -2s; }
.delay-3s { animation-delay: -3s; }
.dib { display: inline-block; }

.w-mc { width: max-content; }
.w-60 { width: 60% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }
@media screen and (min-width: 540px) {
    .w-sm-100 { width: 100% !important; }
    .w-sm-80 { width: 80% !important; }
    .w-sm-75 { width: 75% !important; }
    .w-sm-60 { width: 60% !important; }
    .w-sm-50 { width: 50% !important; }
    .w-sm-mc { width: max-content; }
    .h-sm-50 { height: 50% !important; }
    .h-sm-100 { height: 100% !important; }
}
@media screen and (min-width: 720px) {
    .w-md-100 { width: 100% !important; }
    .w-md-75 { width: 75% !important; }
    .w-md-80 { width: 80% !important; }
    .w-md-50 { width: 50% !important; }
    .w-md-60 { width: 60% !important; }
    .w-md-60 { width: 60% !important; }
    .w-md-50 { width: 50% !important; }
    .w-md-mc { width: max-content; }
    .h-md-50 { height: 50% !important; }
    .h-md-100 { height: 100% !important; }
}
@media screen and (min-width: 1024px) {
    .w-lg-100 { width: 100% !important; }
    .w-lg-75 { width: 75% !important; }
    .w-lg-80 { width: 80% !important; }
    .w-lg-50 { width: 50% !important; }
    .w-lg-60 { width: 60% !important; }
    .w-lg-60 { width: 60% !important; }
    .w-lg-50 { width: 50% !important; }
    .w-lg-mc { width: max-content; }
    .h-lg-50 { height: 50% !important; }
    .h-lg-100 { height: 100% !important; }
}
@media screen and (min-width: 1200px) {
    .w-xl-100 { width: 100% !important; }
    .w-xl-75 { width: 75% !important; }
    .w-xl-80 { width: 80% !important; }
    .w-xl-50 { width: 50% !important; }
    .w-xl-60 { width: 60% !important; }
    .w-xl-60 { width: 60% !important; }
    .w-xl-50 { width: 50% !important; }
    .w-xl-mc { width: max-content; }
    .h-xl-50 { height: 50% !important; }
    .h-xl-100 { height: 100% !important; }
}
@media screen and (min-width: 1400px) {
    .w-2xl-100 { width: 100% !important; }
    .w-2xl-75 { width: 75% !important; }
    .w-2xl-80 { width: 80% !important; }
    .w-2xl-50 { width: 50% !important; }
    .w-2xl-60 { width: 60% !important; }
    .w-2xl-60 { width: 60% !important; }
    .w-2xl-50 { width: 50% !important; }
    .w-2xl-mc { width: max-content; }
    .h-2xl-50 { height: 50% !important; }
    .h-2xl-100 { height: 100% !important; }
}

@media screen and (min-width: 768px) {
    .row.even > .col:first-child { order: 2; }
    .row.even > .col:last-child { order: 1; }
}

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

a.button { text-decoration: none; background-image: linear-gradient(to right, #535456, #242223); color: white; font-family: 'Noto Sans TC', sans-serif; font-size: 24px; font-weight: 600; font-style: normal; letter-spacing: 5px; padding: 5px 22px 6px; border-radius: 50px; border: solid 2px white; }
a.button { display: inline-block; transform-origin: center; transition: transform .5s ease-in-out; }
a.button: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: 1199.98px) {
    .section_shop_now { margin-top: 5rem; margin-bottom: 5rem; }
}

/* ── TGP-P1 Section-specific styles ──────────────────────────────────── */

.my-body .bg-gradient { background: linear-gradient(to bottom, #6D6D6D, #2c2d2f); }
.my-body .text-blue { color: #5fb4e4; }
.my-body .text-red { color: #e8595f; }
.my-body .exclamation { display: inline-block; aspect-ratio: 1; border-radius: 50%; border: 1px solid black; width: 28px; font-size: 16px; font-weight: bold; text-align: center; text-indent: 2px; margin-right: 5px; }

.section_1 { background-image: url('./section1/Asset 221.webp'), linear-gradient(to top, #6D6D6D, #2c2d2f); background-size: 150%; background-position: top center; background-repeat: no-repeat; padding-top: 0; }
.section_1 > div .name { width: 53%; top: 25vw; }
.section_1 > div .name h1 { white-space: nowrap; font-size: 3.5cqw; text-align: center; }
.section_1 > div .product { top: 0; right: 0; width: 100%; aspect-ratio: 3/2; }
.section_1 > div .energy { width: 30%; right: 8%; top: 2%; }
.section_1 > div .product_big { width: 28%; right: 3%; top: 7%; }
.section_1 > div .product_small { width: 26%; right: 15%; top: 26%; }
.section_1 .section_shop_now { padding-top: 76vw; }
.section_1 .section_1_text hr { border-top-width: 2px; }
@media screen and (min-width: 768px) {
    .section_1 { background-size: 120%; }
    .section_1 .section_shop_now { padding-top: 64vw; }
    .section_1 .section_1_text span { white-space: nowrap; }
}
@media screen and (min-width: 1024px) {
    .section_1 > div .name { top: 18vw; }
    .section_1 { background-size: contain; }
    .section_1 .section_shop_now { padding-top: 50vw; }
}

.section_2 { --scale: .3; --x: 40%; padding: 0; background-image: url('./section2/Asset 148@2x.webp'); background-size: cover; background-position: top center; background-repeat: no-repeat; aspect-ratio: 3944/2364; }
.section_2 .cold { left: 0; top: 50%; transform: translate(calc(0% - var(--x)), -50%) scale(var(--scale)); transform-origin: center; }
.section_2 .hot { right: 0; top: 50%; transform: translate(calc(0% + var(--x)), -50%) scale(var(--scale)); transform-origin: center; }
.section_2 .title { left: 50%; top: 5%; transform: translateX(-50%) scale(var(--scale)); transform-origin: top center; }
@media screen and (min-width: 768px) {
    .section_2 { --x: 30%; --scale: .5; }
}
@media screen and (min-width: 992px) {
    .section_2 { --x: 50%; --scale: .8; }
}
@media screen and (min-width: 1200px) {
    .section_2 { aspect-ratio: 3944/1682; --scale: 1; }
}

.section_3 .col-left h4 { color: #78b0d3; }
.section_3 .col-right h4 { color: #de575d; }
.section_3 .item .img-wrapper { aspect-ratio: 1/1; width: 100%; }
.section_3 .item .img-wrapper img { width: 100%; height: 100%; object-fit: contain; }
@media screen and (min-width: 1200px) {
    .section_3 .item .img-wrapper { aspect-ratio: 1/1; width: 80%; margin: 0 auto; }
    .section_3 .row {
        margin-right: -15px;
        margin-left: -15px;
    }
    .section_3 .col-left { border-right: 1px solid white; }
    .section_3 .col-right { border-left: 1px solid white; }
    .section_3 .col-12, .section_3 .col-4, .section_3 .col-8 {
        padding-right: 15px;
        padding-left: 15px;
    }
}

.section_4-1 { background-color: #6D6D6D; background-image: linear-gradient(to top, #33333399, #33333399, #FFFFFF00, #FFFFFF00), url('./section4/1x/Asset 220.webp'); background-size: 100%, cover; background-position: top center; background-repeat: no-repeat; aspect-ratio: 1; }
.section_4-1 .row { padding-top: 80%; }
@media screen and (min-width: 768px) {
    .section_4-1 { background-color: #6D6D6D; background-image: url('./section4/Asset 166@2x.webp'); background-size: 90%; background-position: top left; background-repeat: no-repeat; aspect-ratio: 1920/650; }
    .section_4-1 .row { padding-top: 0%; }
}
.section_4 .bg-img-2 { background-image: linear-gradient(to top, #FFFFFF00, #FFFFFF00, #33333399, #33333399), url('./section4/1x/Asset 219.webp'); background-size: cover; background-position: top center; background-repeat: no-repeat; aspect-ratio: 1; }
@media screen and (min-width: 768px) {
    .section_4 .bg-img-2 { background-image: url('./section4/Asset 172@2x.webp'); background-size: 100%; background-position: 65% top; background-repeat: no-repeat; aspect-ratio: 1920/750; }
}
.section_4 .size-display { aspect-ratio: .8; }
.section_4 .size-display .product { height: 100%; }
.section_4 .size-display .scale { height: 94%; right: 28%; top: 4%;}
.section_4 .size-display .length { height: 40%; top: 50%; transform: translateY(-50%); right: 0; }

.section_5 { background: linear-gradient(to right, #1d1c22, #4e525b); }

.section_7 { background-image: linear-gradient(to top, #666666CC, #00000000), url('./section7/Asset 178@2x.webp'); background-blend-mode: multiply; background-size: cover; background-position: top left; background-repeat: no-repeat; aspect-ratio: .8; }
.section_7 .row { padding-top: 35%; }
@media screen and (min-width: 768px) {
    .section_7 { background-position: top left; background-repeat: no-repeat; aspect-ratio: 1920/700; }
    .section_7 .row { padding-top: 0%; }
}

.section_8 .relative { aspect-ratio: 3/2; }
.section_8 .muscle { width: 100%; left: 0; bottom: 0; }
.section_8 .head { width: 50%; top: 0; left: 50%; transform: translateX(-50%); }
.section_8 .effect-1 { width: 30%; top: 40%; left: 50%; transform: translateX(-50%); }
.section_8 .effect-2 { width: 35%; top: 50%; left: 50%; transform: translateX(-50%); }
.section_8 .effect-3 { width: 40%; top: 64%; left: 50%; transform: translateX(-50%); }

.section_9 { background-color: #6D6D6D; }
.section_9 .head-img { filter: drop-shadow(-5px 0 5px #60b4e633) drop-shadow(-5px 0 5px #60b4e633) drop-shadow(-5px 0 5px #60b4e633); transform-origin: top center; transform: scale(2.5) translateX(10%); }
@media screen and (min-width: 768px) {
    .section_9 .head-img { transform: scale(1.5) translateX(2%); padding-bottom: 30%; }
}
.section_9 .head-title { width: 100%; border-radius: 30px; padding: 5px 0; text-align: center; background-color: #60B4E6; }

.section_10 { background-color: #6D6D6D; }
.section_10-1 { display: none; opacity: 0; }
.section_10-1.show { display: block; opacity: 1; }
.section_10-1 .row { padding: 2rem 0; }
.section_10-1 .row .description { width: 80%; margin: 0 auto; display: flex; flex-direction: column;  justify-content: center; height: 100%; }
.section_10-1 .row .description h5 { font-weight: bold; margin-top: 1rem; }
@media screen and (min-width: 768px) {
    .section_10-1 .row .description h5 { margin-top: 0; }
}
.section_10-1 .label-value { display: flex; }
.section_10-1 .label-value .label { display: inline-block; white-space: nowrap; }
.section_10-1 .label-value .value span { white-space: nowrap; }
.section_10-1 .item svg { z-index: 2; }
.section_10-1 .item svg path { fill: none; stroke: white; stroke-width: 4; stroke-dasharray: 20 10; }
.section_10-1 .item .relative svg path { display: none; }
.section_10-1 .item .relative svg image { offset-rotate: auto; animation: travelAlongPath 4s linear infinite alternate; transform: translate(-24px, -24px); width: 48px; height: 48px; }
@keyframes travelAlongPath {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

.section_11 { background-color: #000102; background-image: url('./section11/Asset 211@2x.webp'); background-size: cover; background-size: 150%; background-position: 0% top; background-repeat: no-repeat; aspect-ratio: 3906/2800; }
.section_11 .col-right { padding-top: 70%; }
@media screen and (min-width: 768px) {
    .section_11 { aspect-ratio: 3906/1487; background-position: top left; background-size: contain; }
    .section_11 .col-right { padding-top: 0; }
}
.section_11-1 { background-color: #000102; }

.section_12 { background-image: linear-gradient(to right, #666666CC, #00000000), url('./section12/Asset 218@2x.webp'); background-size: cover; background-repeat: no-repeat; background-position: 66% top; }
.section_12 .row { padding-top: 150%; font-size: .8em; }
@media (min-width: 768px) {
    .section_12 .row { padding-top: 100%; font-size: 1em; }
}
@media (min-width: 992px) {
    .section_12 .row { padding-top: 0%; }
    .section_12 { aspect-ratio: 3946/1836; background-position: top left;  }
}

.section_shop_now_footer_bg { background: #7d7d7f; }