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

.section_shop_now a { text-decoration: none; background-color: #7c7b81; 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; }

@media screen and (max-width: 992px) {
    .section_shop_now { margin-top: 5rem; margin-bottom: 5rem; }
}

.section_1 { position: relative; }
.section_1 .bg_border { clip-path: ellipse(56% 90% at 50% -10%); position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient(to right, #262619 2%, #545454 12%, #FFF 35%, #5E5E5E 55%, #232423 70%, #FFF 90%, #2E302F); }
.section_1 .bg { clip-path: ellipse(55% 88% at 50% -10%); position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: url('./Section1/Asset\ 1.png'); background-position: bottom center; background-repeat: no-repeat; background-size: cover;}
.section_1 .container-fluid { position: relative; aspect-ratio: 16 / 9; }
.section_1 .container-fluid .title { position: absolute; width: 50%; bottom: 45%; left: 12%; z-index: 2; transform-origin: left; }
.section_1 .container-fluid .title h2 { display: flex; align-items: center; margin-bottom: 0; text-transform: uppercase; font-size: 2rem; color: #B4B4B4; transform-origin: bottom; transform: scaleY(.8); font-weight: bold; font-family: Arial;  }
.section_1 .container-fluid .title h2 span.model { margin-left: .5rem; background-color: #B4B4B4; color: #221817; font-size: .8em; padding: .05em .3em; border-radius: .4rem;  }
.section_1 .container-fluid .title h1 { font-weight: bold; font-size: 4rem; letter-spacing: .8rem; }
.section_1 .container-fluid .img { position: absolute; width: 40%; bottom: 6%; right: 12%; animation: float_up 3s ease-in-out alternate infinite; }
@keyframes float_up {
    from { transform: translateY(0%); }
    to { transform: translateY(3%); }
}
.section_1 .container-fluid .tag { position: absolute; width: 20%; top: 5%; right: 5%; }
@media screen and (max-width: 1200px) {
    .section_1 .bg_border { clip-path: ellipse(102% 53% at 50% 31%); }
    .section_1 .bg { clip-path: ellipse(100% 51% at 50% 31%); }
    .section_1 .container-fluid { position: relative; aspect-ratio: 4 / 3; }
    .section_1 .container-fluid .img { width: 55%; right: 8%; }
    .section_1 .container-fluid .title { bottom: 20%; left: 8%; }
    .section_1 .container-fluid .title h2 { font-size: 1rem; ; }
    .section_1 .container-fluid .title h1 { font-size: 1.5rem; ; }
    .section_1 .container-fluid .tag { right: 11%; width: 25% }
}

.section_2 { margin-top: 5rem; margin-bottom: 7rem; }
.section_2 h3 { font-size: 2.5rem; letter-spacing: .4rem; font-weight: bold;}
.section_2 p { font-size: 1.4rem; letter-spacing: .2rem; }
.section_2 .comparison {  width: 80%; margin: 0 10% 0 1.5%; }
.section_2 .comparison-item { position: relative; padding-right: 10px; }
.section_2 .comparison-item .ruler { width: 10px; position: absolute; top: 0; bottom: 0; right: 0px; animation: ruler 2s ease-out infinite; }
@keyframes ruler {
    from { opacity: 0; transform: translateX(100%);}
    to { opacity: 1; transform: translateX(0);}
}
.section_2 .comparison-item .ruler span { position: absolute; top: -12px; position: absolute; top: -28px; font-size: 14px; transform: translateX(-50%); font-family: Arial; font-weight: bold; }
.section_2 .comparison-item .ruler > div { width: 10px; height: 100%; position: relative; }
.section_2 .comparison-item .ruler > div > div { height: 100%; width: 10px; border-top: 2px solid white; border-bottom: 2px solid white; }
.section_2 .comparison-item .ruler > div > div:before { content: ''; height: 100%; display: block; width: 5px; border-right: 2px solid white; transform: translateX(1px); transform-origin: bottom; }
@media (max-width: 992px) {
    .section_2 { margin-top: 5rem; margin-bottom: 5rem; }
    .section_2 .left img { width: 50%; margin-bottom: 3rem; }
    .section_2 h3 { font-size: 1.8rem; }
    .section_2 p { font-size: 1rem; letter-spacing: .1rem; }
    .section_2 .comparison { width: 100%; padding-top: 30px; padding-right: 6%; margin: 0; }
    .section_2 .comparison-item .ruler span { position: absolute; top: -22px; }
}

.section_3 .left h3 { font-size: 2rem; letter-spacing: .8rem; font-weight: bold;  }
.section_3 .left ul { list-style: none; padding-left: 0; margin-top: 4.5rem; width: max-content; }
.section_3 .left ul li { background-color: #7c7b81; color: white; font-family: 'Noto Sans TC', sans-serif; font-size: 1.2rem; font-style: normal; border-radius: 50px; padding: 5px 32px 6px; border-radius: 50px; margin-bottom: 20px; }
.section_3 .right .animation { position: relative; aspect-ratio: 1;}
.section_3 .right .animation img { position: absolute; }
.section_3 .right .animation img.massage-gun { width: 75%; top: 0; right: 0; animation: gun-shadow 1s alternate infinite; }
@keyframes gun-shadow {
    0% { filter: none; }
    50% { filter: drop-shadow(2px -4px 10px #147497); }
    100% { filter: drop-shadow(2px -4px 10px #147497); }
}
.section_3 .right .animation img.massage-gun.massage-gun-head-bg { animation: gun-head-bg .01s alternate infinite; filter: drop-shadow(2px -4px 26px #147497); }
@keyframes gun-head-bg {
    from { transform: translate(2%,-1%); filter: drop-shadow(2px -4px 20px #21b6ec); }
    to { transform: translate(-1%,1%); filter: drop-shadow(2px -4px 26px #147497); }
}
.section_3 .right .animation img.massage-gun.massage-gun-head { animation: gun-head .01s alternate infinite; z-index: 3; }
.section_3 .right .animation img.massage-gun.massage-gun-head-1 { animation-delay: -.001s; filter: blur(2px); z-index: 1; }
.section_3 .right .animation img.massage-gun.massage-gun-head-2 { animation-delay: -.002s; filter: blur(4px); z-index: 2; }
.section_3 .right .animation img.massage-gun.massage-gun-body { filter: none; z-index: 5; }
@keyframes gun-head {
    from { transform: translate(2%,-1%); }
    to { transform: translate(-1%,1%); }
}
.section_3 .right .animation img.effect { display:none; width: 75%; top: 0; right: 0; animation: gun-effect .01s alternate infinite; filter: drop-shadow(2px -4px 26px #147497);}
@keyframes gun-effect {
    from { transform: translate(2%,-1%); }
    to { transform: translate(-1%,1%); }
}
.section_3 .right .animation img.rpm { left: -11%; top: 19%; width: 71%; }
@media screen and (max-width: 992px) {
    .section_3 .left { }
    .section_3 .left ul { list-style: none; padding-left: 0; margin-top: 2rem; width: auto; text-align: center; }
}

.section_4 { margin-bottom: 10rem; }
.section_4 h3 { font-size: 2rem; }
.section_4 p { font-size: 1.2rem; margin-bottom: 1.2rem; }
.section_4 .noise-comparsion { width: 100%; background-image: linear-gradient(to right, #262619 2%, #545454 12%, #FFF 35%, #5E5E5E 55%, #232423 70%, #FFF 90%, #2E302F); padding: 3px; border-radius: 30px; }
.section_4 .noise-comparsion .noise-comparsion-table { background-color: #7c7b81; border-radius: 27px; font-size: 1.6rem; font-weight: bold; padding: 1rem 0;}
.section_4 .noise-comparsion .noise-comparsion-table .noise-comparsion-row { display: flex; align-items: center; padding: .8rem 2rem; }
.section_4 .noise-comparsion .noise-comparsion-table .noise-comparsion-row.noise-comparsion-row-highlight { position: relative; }
.section_4 .noise-comparsion .noise-comparsion-table .noise-comparsion-row.noise-comparsion-row-highlight .bg { width: 106%; background-color: #515151; position: absolute; height: 100%; display: block; left: -3%; border-radius: 20px; }
.section_4 .noise-comparsion .noise-comparsion-table .noise-comparsion-row .noise-comparsion-col-1 { width: 10%; z-index: 1; }
.section_4 .noise-comparsion .noise-comparsion-table .noise-comparsion-row .noise-comparsion-col-1 img { width: 48%; margin: 0 auto; }
.section_4 .noise-comparsion .noise-comparsion-table .noise-comparsion-row .noise-comparsion-col-2 { width: 30%; z-index: 1; }
.section_4 .noise-comparsion .noise-comparsion-table .noise-comparsion-row .noise-comparsion-col-3 { width: 30%; z-index: 1; }
.section_4 .noise-comparsion .noise-comparsion-table .noise-comparsion-row .noise-comparsion-col-4 { width: 30%; z-index: 1; }
.section_4 .noise-comparsion .noise-comparsion-table .noise-comparsion-row .noise-comparsion-col-4 img { height: 2rem; animation: noise-comparsion-bar 1.5s infinite; transform-origin: center left; }
@keyframes noise-comparsion-bar {
    0% { clip-path: polygon(0 0, 10% 0, 10% 100%, 0% 100%); }
    30% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}
@media screen and (max-width: 992px) {
    .section_4 { margin-bottom: 5rem; }
    .section_4 .noise-comparsion .noise-comparsion-table { font-size: 1.2rem; }
}
@media screen and (max-width: 576px) {
    .section_4 .noise-comparsion .noise-comparsion-table { font-size: .8rem; }
    .section_4 .noise-comparsion .noise-comparsion-table .noise-comparsion-row .noise-comparsion-col-1 img { transform: scale(2); transform-origin: center; }
}

.section_5 { margin-top: 5rem; margin-bottom: 9rem; }
.section_5 { background-image: url('./Section5/Asset\ 1@4x.png'); background-position: center; background-repeat: no-repeat; background-size: cover; }
.section_5 .wrapper { aspect-ratio: 16 / 6; position: relative; top: 0; bottom: 0; left: 0; right: 0; }
.section_5 .wrapper .effect { position: absolute; transform-origin: top center; background-size: contain; background-image: url('./Section5/Asset 2@4x.png'); background-repeat: no-repeat; animation: ergonomic-effect 1.5s linear infinite; filter: drop-shadow(0px 0px 6px #2bace2); width: 5%; height: 5%; background-position: top left; top: 72%; left: 52.5%; }
.section_5 .wrapper .effect.effect-1 { animation-delay: -.5s; }
.section_5 .wrapper .effect.effect-2 { animation-delay: -1s; }
.section_5 .wrapper .effect.effect-3 { animation-delay: -1.5s; }
.section_5 .wrapper .section-width-lg { display: flex; align-items: center; height: 100%; }
.section_5 .wrapper .content { width: 40% }
.section_5 .wrapper .content h2 { font-size: 3.5rem; letter-spacing: .5rem; }
.section_5 .wrapper .content p { font-size: 1.8rem; }
@keyframes ergonomic-effect {
 0% { opacity: 0; transform: scale(.8) translateY(0%); }
 5% { opacity: 0; transform: scale(.8) translateY(0%); }
 10% { opacity: 0.3; transform: scale(.8) translateY(0%); }
 100% { opacity: 1; transform: scale(1.6) translateY(100%); }
}
@media screen and (max-width: 1200px) {
    .section_5 { margin-bottom: 3rem; }
    .section_5 .wrapper .content { transform: scale(.5); width: 80%; transform-origin: left; }
}
@media screen and (max-width: 576px) {
    .section_5 .wrapper .content { transform: scale(.4); width: 100%; }
    .section_5 .wrapper .content h2 { font-size: 3rem; }
}

.section_6 { margin-top: 5rem; margin-bottom: 5rem; }
.section_6 h2 { font-size: 2.2rem; }
.section_6 .item p span { white-space: nowrap; }
.section_6 .item .img-wrapper { position: relative; width: 80%; }
.section_6 .item .img-wrapper:before { content: ''; width: 20%; aspect-ratio: 135.6 / 102.24; background-image: url('./Section6/Asset\ 5.svg'); background-position: center; background-repeat: no-repeat; background-size: cover; animation: section6_effect 1.5s infinite; position: absolute; z-index: 1;}
@keyframes section6_effect {
    from { opacity: .8; transform: scale(.8) rotate(var(--rotate)); }
    to { opacity: 1; transform: scale(1.5) rotate(var(--rotate)); }
}
.section_6 .item-1 .img-wrapper:before { bottom: 21%; --rotate: -45deg; right: 4%; }
.section_6 .item-2 .img-wrapper:before { bottom: 17%; right: 19%; }
.section_6 .item-3 .img-wrapper:before { top: 28%; right: 4%; --rotate: 90deg; }
.section_6 .item-4 .img-wrapper:before { top: 33.5%; right: 11%; --rotate: 95deg; }
.section_6 .text-center { margin-bottom: 5rem !important; }
@media screen and (max-width: 992px) {
    .section_6 h2 { font-size: 1.8rem; }
    .section_6 .item .img-wrapper { width: 100%; }
    .section_6 { margin-bottom: 0rem; }
    .section_6 .text-center { margin-bottom: 3rem !important; }
    .section_6 .item-1 .img-wrapper:before { bottom: 24%; }
    .section_6 .item-2 .img-wrapper:before { bottom: 23%; }
    .section_6 .item-3 .img-wrapper:before { top: 26%; }
    .section_6 .item-4 .img-wrapper:before { top: 31%; }
}

.section_7 { background-image: url('./Section7/Asset\ 1@4x.png'); background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: 3rem; margin-bottom: 7rem; }
.section_7 .wrapper { aspect-ratio: 16 / 6; position: relative; top: 0; bottom: 0; left: 0; right: 0; }
.section_7 .wrapper .effect { background-size: 1%; transform-origin: center left; background-size: contain; position: absolute; background-image: url('./Section7/Asset 2@4x.png'); background-repeat: no-repeat; animation: ergonomic-effect2 1.5s linear infinite; filter: drop-shadow(0px 0px 6px #00aeef); width: 10%; height: 10%; background-position: top left; top: 32%; left: 15.5%; }
.section_7 .wrapper .effect.effect-1 { animation-delay: -.5s; }
.section_7 .wrapper .effect.effect-2 { animation-delay: -1s; }
.section_7 .wrapper .effect.effect-3 { animation-delay: -1.5s; }
.section_7 .wrapper .section-width-lg { display: flex; align-items: center; height: 100%; }
.section_7 .wrapper .content { width: 40%; transform: translateX(140%); }
.section_7 .wrapper .content h2 { font-size: 3.5rem; letter-spacing: .8rem; white-space: nowrap; }
/* .section_7 .wrapper .content p { font-size: 1.4rem; } */
@keyframes ergonomic-effect2 {
 0% { opacity: 0; transform: scale(1) translateX(0%); }
 5% { opacity: 0; transform: scale(1) translateX(0%); }
 10% { opacity: 0.3; transform: scale(1) translateX(0%); }
 100% { opacity: 1; transform: scale(1.5) translateX(-20%); }
}
@media screen and (max-width: 992px) {
    .section_7 { margin-top: 0; margin-bottom: 5rem; }
    .section_7 .wrapper .content { transform: scale(.5) translateX(50%); width: 80%; transform-origin: right; }
    .section_7 .wrapper .content h2 { font-size: 3rem; }
}

.section_8 { margin-top: 5rem; margin-bottom: 5rem; }
.section_8 .line { position: absolute; top: 40%; transform-origin: left; left: 40%; width: 30%; border-top: 2px solid white; animation: wrap-line 3s infinite; }
@keyframes wrap-line {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
.section_8 .row { aspect-ratio: 16 / 9; }
.section_8 .row .col { z-index: 1; }
.section_8 .left { position: relative; padding: 0 5rem; transform: scale(.8); }
.section_8 .left .image { position: absolute; width: 100%; top: 0%; right: 0%; }
.section_8 .left .highlight { position: absolute; width: 48%; top: 11.5%; right: 1%; animation: wrap-highlight .3s infinite alternate; }
.section_8 .right { padding: 0 5rem; }
.section_8 .right h2 { margin-top: 2.2rem; }
.section_8 .right p { font-size: 1.2rem; }
@keyframes wrap-highlight {
    from { filter: grayscale(0); }
    to { filter: grayscale(.8); }
}
@media screen and (max-width: 992px) {
    .section_8 .right { padding: 0 0; }
    .section_8 { margin-top: 5rem; margin-bottom: 5rem; }
    .section_8 .left { padding: 0 0; transform: scale(.8); }
    .section_8 .right img { margin-top: 10%;  }
    .section_8 .right p { font-size: 1.2rem; margin-top: .2rem; }
    .section_8 .line { display: none; }
    .section_8 .left .image { position: static; }
}

.section_9 .row .col { width: 100%; background-image: linear-gradient(to right, #262619 2%, #545454 12%, #FFF 35%, #5E5E5E 55%, #232423 70%, #FFF 90%, #2E302F); padding: 4px; border-radius: 30px; margin-bottom: 2rem; }
.section_9 .row .col .usage { width: 100%; aspect-ratio: 30 / 9; border-radius: 26px; font-size: 1.2rem; font-weight: bold; padding: 1rem 0; display: flex; justify-content: flex-end; align-items: center; }
.section_9 .row .col .usage { background-position: center; background-size: cover; background-repeat: no-repeat; }
.section_9 .row .col .usage h3 { width: 30%; font-size: 2.5rem; letter-spacing: .4rem; }
.section_9 .row .col .usage-2 { justify-content: flex-start; }
.section_9 .row .col .usage-2 h3 { text-align: right; }
.section_9 .row .col .usage span { animation: usage_span 10s infinite; display: inline-block;  }
@keyframes usage_span {
    0% { opacity: 0; transform: translateY(100%); }
    20% { opacity: 1; transform: translateY(0px); }
    100% { opacity: 1; transform: translateY(0px); }
}
@media screen and (max-width: 992px) {
    .section_9 .row .col .usage { aspect-ratio: 20 / 9; }
    .section_9 .row .col .usage h3 { width: 40%; font-size: 1.5rem; }
    .section_9 .row .col .usage.usage-1 { background-position: 100%; }
    .section_9 .row .col .usage.usage-3 { background-position: 100%; }
}
.section_9 .row .col .usage-1 { background-image: url('./Section9/Asset\ 1@4x.png'); }
.section_9 .row .col .usage-2 { background-image: url('./Section9/Asset\ 2@4x.png'); }
.section_9 .row .col .usage-3 { background-image: url('./Section9/Asset\ 3@4x.png'); }

.section_10 { margin-top: 5rem; margin-bottom: 10rem; }
.section_10 .bullet { height: 5rem; margin-bottom: 1.8rem; background-position: center; background-repeat: no-repeat; background-size: 5rem 5rem; background-position: center left; padding-left: 6rem; display: flex; align-items: center; }
.section_10 .bullet span { line-height: 2.2rem; font-weight: bold; font-size: 1.8rem; white-space: nowrap; }
.section_10 .bullet-1 { background-image: url('./Section10/Asset\ 3@4x.png'); }
.section_10 .bullet-2 { background-image: url('./Section10/Asset\ 4@4x.png'); }
.section_10 .bullet-2 .time { font-size: 1.8rem; }
.section_10 .bullet-3 { background-image: url('./Section10/Asset\ 5@4x.png'); }
.section_10 .bullet-3 { margin-bottom: 0; }
.section_10 .wrapper { display: flex; }
.section_10 .wrapper .item { flex: 1; display: flex; justify-content: center; flex-direction: column; align-items: center; }
.section_10 .wrapper .item .item-caption { display: flex; justify-content: center; flex-direction: row; align-items: center; margin-left: 33%; }
.section_10 .wrapper .item .item-caption .dot { width: 1.6rem; height: 1.6rem; border-radius: .8rem; display: inline-block; margin-right: .4rem; }
.section_10 .wrapper .item .item-caption span { font-size: 1.6rem; line-height: 1.6rem; }
@media screen and (max-width: 1200px) {
    .section_10 .left-row { transform: scale(.8); transform-origin: bottom left; }
}
@media screen and (max-width: 992px) {
    .section_10 .left-row { transform: scale(.6); transform-origin: bottom left; }
    .section_10 .wrapper { display: block; position: relative; aspect-ratio: 590 / 670; width: 150%; transform: translateX(-30%);}
    .section_10 .wrapper .item { position: absolute; }
    .section_10 .wrapper .item-1 { z-index: 1; animation: cross_fade 4s linear infinite; animation-delay: 0s; }
    .section_10 .wrapper .item-2 { z-index: 2; animation: cross_fade 4s linear infinite; animation-delay: -2s; }
    .section_10 .wrapper .item-2 > div { animation-delay: 1.5s; }
}
@keyframes cross_fade {
    0% { opacity: 0; }
    49% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}

.swiper-section11 .swiper-button-prev:after { content: none; }
.swiper-section11 .swiper-button-next:after { content: none; }
.swiper-section11 .swiper-button-prev { color: #333333; }
.swiper-section11 .swiper-button-next { color: #333333; }
.swiper-section11 .swiper-slide { padding: 5vw; }
.section_11 .specification { text-align: left; }
.section_11 .specification .title { padding-left: 20%; letter-spacing: .4rem; }
.section_11 .specification img { height: 40px; margin: 10px; }
@media screen and (max-width: 992px) {
    .section_11 .specification{ margin: 0 auto; }
    .section_11 .specification .title { padding-left: 30%; }
    .section_11 .specification img { height: 20px; margin: 5px; }
}
.section_11 .specification{ text-align: left; }