.my-body {
    --project-color: #10626d;
    --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;
    --btn-font-size: 24;
    --btn-border-color: transparent;
    --btn-bg: #10626d;

    --bg: white;
    --color: black;
}
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: var(--bg); color: var(--color); overflow: hidden; font-family: 'Noto Sans TC', sans-serif; letter-spacing: .1rem; }
.my-body p { margin-bottom: .5rem; color: var(--color); }
.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 .dib { display: inline-block; }
@media screen and (min-width: 540px) {
    .my-body .sm-dib { display: inline-block; }
}
@media screen and (min-width: 768px) {
    .my-body .md-dib { display: inline-block; }
}
@media screen and (min-width: 992px) {
    .my-body .lg-dib { display: inline-block; }
}
@media screen and (min-width: 1200px) {
    .my-body .xl-dib { display: inline-block; }
}

/* Section Width */
.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: 1024px) {
    .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; }
}
@media screen and (min-width: 992px) {
    .my-body .text-lg-center { text-align: center !important; }
    .my-body .text-lg-justify { text-align: justify; }
}

/*  */
.my-body .delay-1s { animation-delay: -1s; }
.my-body .delay-2s { animation-delay: -2s; }
.my-body .delay-3s { animation-delay: -3s; }

.my-body a.button { text-decoration: none; background: var(--btn-bg); color: white; font-family: 'Noto Sans TC', sans-serif; font-size: var(--btn-font-size); font-weight: 600; font-style: normal; letter-spacing: 5px; padding: 5px 22px 6px; border-radius: 50px; border: solid 2px var(--btn-border-color); }
.my-body a.button { display: inline-block; transform-origin: center; transition: transform .5s ease-in-out; }
.my-body a.button:hover { transform: scale(1.05); }
.my-body .section_shop_now { margin-top: 5rem; margin-bottom: 7rem; }

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

.my-body section { padding-top: 3rem; padding-bottom: 3rem; }