@import url('https://fonts.googleapis.com/css2?family=Huninn&display=swap');
.huninn { font-family: "Huninn", sans-serif; font-weight: 400; font-style: normal; }

@keyframes zoomIn {
  0% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes zoomInOut {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes logoSkewX {
  0% { transform: skewX(-75deg); }
  2% { transform: skewX(0deg); }
  4% { transform: skewX(-75deg); }
  6% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }
}
@keyframes stacked-1 {
  0% { transform: scale(1.5) rotate(15deg); opacity: 0; }
  8% { opacity: 0; }
  15% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes stacked-2 {
  0% { transform: scale(1.5) rotate(15deg); opacity: 0; }
  12% { opacity: 0; }
  19% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes stacked-3 {
  0% { transform: scale(1.5) rotate(15deg); opacity: 0; }
  18% { opacity: 0; }
  25% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.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) * .02pt); }
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) * .014pt); }
h4 { font-size: calc(var(--font-size-h4) * var(--font-ratio)); font-weight: 700; letter-spacing: calc(var(--font-size-h4) * .014pt); }
p { font-size: calc(var(--font-size-p) * var(--font-ratio)); font-weight: 400; letter-spacing: calc(var(--font-size-p) * .01pt); }

@media screen and (max-width: 768px) {
    .my-body {
        --font-size-h3: 22;
        --font-size-h4: 20;
        --font-size-p: 18;
    }
}
@media screen and (max-width: 1024px) {
    .my-body {
        --font-ratio: .7pt;
    }
}

.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 { font-family: "Huninn", sans-serif; font-weight: 400; background-color: #eee8e6; color: #000; 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; --section-width: 78vw; }
.my-body .section-width-md { width: 68vw; --section-width: 68vw; }
.my-body .section-width-sm { width: 64vw; --section-width: 64vw; }
@media screen and (max-width: 992px) {
    .my-body .section-width-lg { width: 90vw; --section-width: 90vw; }
    .my-body .section-width-md { width: 84vw; --section-width: 84vw; }
    .my-body .section-width-sm { width: 72vw; --section-width: 72vw; }
}
@media screen and (min-width: 768px) {
    .my-body .section-width-md-lg { width: 78vw; --section-width: 78vw; }
    .my-body .section-width-md-md { width: 68vw; --section-width: 68vw; }
    .my-body .section-width-md-sm { width: 64vw; --section-width: 64vw; }
}
@media screen and (min-width: 992px) {
    .my-body .section-width-lg-lg { width: 78vw; --section-width: 78vw; }
    .my-body .section-width-lg-md { width: 68vw; --section-width: 68vw; }
    .my-body .section-width-lg-sm { width: 64vw; --section-width: 64vw; }
}
.delay-1s { animation-delay: -1s; }
.delay-2s { animation-delay: -2s; }
.delay-3s { animation-delay: -3s; }

.absolute { position: absolute; }
.relative { position: relative; }
span.dib { display: inline-block; }

@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; }
}

.my-body { background-color: white; }

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

.header-bg { letter-spacing: calc(var(--font-size-h3) * .14pt); background-color: #0071bb; border-radius: 20px; color: white; margin: 0 auto; padding: 2px 20px; text-align: center; width: fit-content; }
.header-bg-2 { border-radius: 40px; padding: 2px 40px; }
.text-blue { color: #0071bb; }

.section_1 { padding-top: 0; }
.section_1 .icon { background-image: url(./section1/icon1.webp); aspect-ratio: 361 / 82; display: flex; justify-content: center; align-items: center; background-size: contain; background-repeat: no-repeat; font-size: 22px; color: #0071bb; width: 80%; margin: 0 auto; }
@media screen and (max-width: 768px) {
    .section_1 .icon { font-size: 13px; width: 100%; }
}
@keyframes zoomInOut1 { 0% { transform: scale(1); } 25% { transform: scale(1.1); } 50% { transform: scale(1); } 75% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes zoomInOut2 { 0% { transform: scale(1); } 25% { transform: scale(1); } 50% { transform: scale(1.1); } 75% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes zoomInOut3 { 0% { transform: scale(1); } 25% { transform: scale(1); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } }
.section_1 .icon-1 { animation: zoomInOut1 4s ease-in-out once; }
.section_1 .icon-2 { animation: zoomInOut2 4s ease-in-out once; }
.section_1 .icon-3 { animation: zoomInOut3 4s ease-in-out once; }

.section_1_1 .md-absolute { bottom: 0; right: 0; }
.section_1_1 .md-absolute .image { flex: 1; margin-right: 10px; }
.section_1_1 .md-absolute .text { flex: 3; }
.section_1_1 .md-absolute .text h4 { margin-bottom: 2px; }
.section_1_1 .md-absolute .text p {  }
@media screen and (max-width: 768px) {
    .section_1_1 .md-absolute .image {  }
    .section_1_1 .md-absolute .text { flex: 5; }
    .section_1_1 canvas { transform: translateX(10%); }
}
/* .section_1_1 h4 { --font-size-h4: 22; }
.section_1_1 .relative { aspect-ratio: 927 / 767; }
.section_1_1 .relative img {  animation: stacked 3s ease-in-out 1; }
.section_1_1 .relative img:nth-child(1) { animation-name: stacked-1; }
.section_1_1 .relative img:nth-child(2) { animation-name: stacked-2; }
.section_1_1 .logo { animation: logoSkewX 2s linear .2s; } */

.section_1_1 .star { padding: 0 calc(1.2px * var(--font-size-h4)); position: relative; width: fit-content; display: inline-block; }
.section_1_1 .star:before { content:''; background-image: url(./section1/icon2.webp); background-size: contain; background-position: center; aspect-ratio: 1; position: absolute; left: 2px; top: 2px; width: calc(1px * var(--font-size-h4)); }
.section_1_1 .star:after { content:''; background-image: url(./section1/icon2.webp); background-size: contain; background-position: center; aspect-ratio: 1; position: absolute; right: 2px; top: 2px; width: calc(1px * var(--font-size-h4)); }
.section_1_1 .border-bottom-blue { border-bottom: 2px solid #0071bb; width: 200%; }
@media screen and (max-width: 768px) {
    .section_1_1 .border-bottom-blue { width: 100%; }
}

.section_2 .items { justify-content: space-between; flex: 1; }
.section_2 .items .item { display: flex; align-items: center; }
.section_2 .items .item .item-img { flex: 1; margin-right: 1rem; }
.section_2 .items .item .item-desc { flex: 4; }
/* .section_2 .left { background-image: url(./section2/Asset1.webp); background-size: contain; background-position: bottom center; background-repeat: no-repeat;  } */
.section_2 .left { position: relative; }
.section_2 .left img { 
  position: absolute;
  top: 0;                 /* Push past top boundary */
  left: -10%;                /* Push past left boundary */
  width: 140%;               /* Force it larger than container width */
  height: 100%;              /* Force it larger than container height */
  object-fit: cover;         /* Acts like background-size: cover */
}
@media screen and (max-width: 576px) {
    /* .section_2 .left { background-size: cover; } */
    /* .section_2 .left { background-image: none; } */
    .section_2 .left img { display: none; }
    .section_2 { padding-bottom: 0%; position: relative; }
    .section_2 .section_2_content { z-index: 2; position: relative; }
    .section_2:after { z-index: 1; content: ''; position: absolute; bottom: 0; left: -40%; background-image: url(./section2/Asset1.webp); background-size: cover; background-position: top right; background-repeat: no-repeat; width: 90%; aspect-ratio: 817 / 1082; max-height: 500px; }
    /* .section_2 .right .title { margin-left: -30%; } */
}

.section_3 .relative { aspect-ratio: 927 / 767; }
.section_3 .relative .image { width: 91%; left: 4%; top: 5%; }
.section_3 .hours { margin: 0 2px; font-size: calc(var(--font-size-h2) * var(--font-ratio)); font-weight: 600; }
.section_3 ul { list-style-type: disc; padding-left: 1rem; width: 90%; margin: 0 auto; }
.section_3 .relative img {  animation: stacked 3s ease-in-out 1; }
.section_3 .relative img:nth-child(1) { animation-name: stacked-1; }
.section_3 .relative img:nth-child(2) { animation-name: stacked-2; }
.section_3 .relative img:nth-child(3) { animation-name: stacked-3; }

.section_3_1 .cell { padding: 10px 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; text-align: center; }
.section_3_1 .name { flex: 370; background: #0171bb; color: white; }
.section_3_1 .duration { flex: 428; background: #add6f2; color: #333; }
.section_3_1 .symptoms { flex: 596; background: #add6f2; color: #333; margin-left: 10px; }
@media screen and (max-width: 768px) {
    .section_3_1 .cell { padding: 5px 10px; }
}

.section_4_0 p { font-size: 20px; letter-spacing: 2px;; }
.section_4_0 .flex-1 { width: 80px; }
.section_4_0 .flex-4 {  }
.section_4_0 img { animation: zoomIn .3s ease-in .3s; }
@media screen and (max-width: 768px) {
    .section_4_0 .flex-1 { width: 80px; }
}

.section_4_1 .relative { aspect-ratio: 927 / 767; }
.section_4_1 .relative .flex-1 .image { width: 91%; left: 4%; top: 5%; }
.section_4_1 .relative .flex-1 img {  animation: stacked 3s ease-in-out 1; }
.section_4_1 .relative .flex-1:nth-child(1) img { animation-name: stacked-1; }
.section_4_1 .relative .flex-1:nth-child(2) img { animation-name: stacked-2; }
.section_4_1 .relative .flex-1:nth-child(3) img { animation-name: stacked-3; }
.section_4_1 .items { justify-content: space-between; flex: 1; }
.section_4_1 .items .item { display: flex; align-items: center; }
.section_4_1 .items .item .item-img { flex: 1; margin-right: 1rem; }
.section_4_1 .items .item .item-desc { flex: 4; }

.section_5 .wrapper { padding: 50px; margin-top: 60px; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='98%25' height='98%25' x='1%' y='1%' rx='40' fill='none' stroke='%230171bb' stroke-width='3' stroke-dasharray='20, 30' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); background-color: #ffffff; }
.section_5 .wrapper .header-bg { left: 50%; transform: translate(-50%, calc(-100% - 15px)); width: max-content; text-align: center; }
.section_5 .wrapper img { height: calc(var(--section-width) * 0.28); }

.section_6 {
    --color-1: #0071bb;
    --color-2: #29AAE1;
    --color-3: #ACD6F2;
    --color-4: #cbcbcb;
}
.section_6 .nav { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.section_6 .nav .tab-nav { filter: grayscale(.5) drop-shadow(2px 0px 0px lightgray); color: white; padding: 5px 15px 5px 30px; margin: 0px; border-radius: 10px 0 0 0; cursor: pointer; width: 150px; text-align: center; }
@media screen and (max-width: 768px) {
    .section_6 .nav .tab-nav { width: 88px; padding: 5px 0px 5px 8px; }
}
.section_6 .nav .tab-nav::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10%;
    clip-path: polygon(30% 0%, 60% 0%, 66% 1%, 71% 3%, 75% 6%, 79% 10%, 100% 100%, 30% 100%);
    width: 20%;
    height: 100%;
    background-color: var(--color);
}
.section_6 .nav .tab-nav.tab-nav-1 { background-color: var(--color-1); --color: var(--color-1); color: white; z-index: 4; }
.section_6 .nav .tab-nav.tab-nav-2 { background-color: var(--color-2); --color: var(--color-2); color: white; z-index: 3; }
.section_6 .nav .tab-nav.tab-nav-3 { background-color: var(--color-3); --color: var(--color-3); color: black; z-index: 2; }
.section_6 .nav .tab-nav.tab-nav-4 { background-color: var(--color-4); --color: var(--color-4); color: black; z-index: 1; }
.section_6 .nav .tab-nav.active {  filter: drop-shadow(2px 0px 0px lightgray); transform-origin: left bottom; animation: zoomInOut .3s ease-in-out; }
.section_6 .tabs-tabs .tabs-tab { display: none; margin-top: -1px; border-radius: 0 15px 15px 15px; padding: 20px 30px; }
.section_6 .tabs-tabs .tabs-tab.active { display: block; animation: fadeIn .3s ease-in-out; }
.section_6 .tabs-tabs .tabs-tab.tabs-tab-1 { background-color: var(--color-1); color: white; }
.section_6 .tabs-tabs .tabs-tab.tabs-tab-2 { background-color: var(--color-2); color: white; }
.section_6 .tabs-tabs .tabs-tab.tabs-tab-3 { background-color: var(--color-3); color: black; }
.section_6 .tabs-tabs .tabs-tab.tabs-tab-4 { background-color: var(--color-4); color: black; }


.section_7 .wrapper { padding: 50px 40px; margin-top: 60px; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='98%25' height='98%25' x='1%' y='1%' rx='40' fill='%23B9D6E4' stroke='%230171bb' stroke-width='3' stroke-dasharray='20, 30' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); }
.section_7 .wrapper .header-bg { left: 50%; transform: translate(-50%, calc(-100% - 25px)); width: max-content; text-align: center; }
.section_7 .title { background: linear-gradient(to right, #4398d3, #1c447e); border-radius: 0 50px 50px 0; width: fit-content; margin-left: -28px; color: white; padding: 2px 18px 2px 28px; font-size: 20px; margin-top: 20px; margin-bottom: 10px; }
.section_7 .text-blue { color: #146e92; font-size: calc(var(--font-size-h4) * var(--font-ratio)); }
.section_7 .text-red { color: #F00; font-size: calc(var(--font-size-h4) * var(--font-ratio)); }
@media screen and (max-width: 1180px) {
 .section_7 .title { margin-left: -30px; }
}
@media screen and (max-width: 992px) {
 .section_7 .title { margin-left: -32px; }
}
@media screen and (max-width: 768px) {
 .section_7 .title { margin-left: -36px; }
}