.site-canvas,
.sb-site-container,
.sb-slide,
.sb-slidebar {
-webkit-transform: unset;
-moz-transform: unset;
-o-transform: unset;
transform: unset;
} .main-hifu {
position: relative;
font-family: "kanit";
width: 100%;
}
.section-image {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.section-image.sticky {
margin-top: 85px;
}
.section-image .image-m {
display: none;
}
.section-image img {
width: 100%;
height: auto;
}
.section-nav {
position: relative;
background-color: #fff;
box-shadow: 0 5px 4px 0 rgba(87, 109, 121, 0.17);
}
.section-nav.sticky {
position: fixed;
top: 70px;
left: 0;
width: 100%;
z-index: 98;
}
.admin-bar .section-nav.sticky {
top: 102px;
}
.dropdown {
position: relative;
}
.btn-dropdown {
display: none;
}
.nav-menu {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
height: 85px;
margin: 0;
padding: 0;
}
.nav-menu li {
font-family: "kanitlight";
font-size: 27px;
color: #5ba2ff;
line-height: 1;
padding: 0 16px;
border-left: 2px solid #bad9ed;
}
.nav-menu li:first-child {
border-left: 0;
}
.nav-menu li a {
font-size: inherit;
color: #5ba2ff;
text-underline-offset: 4px;
transition: all 0.25s ease-in-out;
}
.nav-menu li a:hover {
color: #435b99 !important;
}
.nav-menu li.active a {
color: #435b99;
text-decoration: underline;
}
.video-content {
position: absolute;
bottom: 78px;
left: 50%;
width: 536px;
height: auto;
background-color: #eef1f8;
transform: translateX(37px);
}
.video-item {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
border-radius: 13px;
overflow: hidden;
}
.video-play-button {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) scale(1);
display: flex;
justify-content: center;
align-items: center;
width: 88px;
height: 88px;
border-radius: 50%;
padding: 0 0 0 6px;
}
.video-play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 88px;
height: 88px;
background: #5eadfb;
border-radius: 50%;
animation: pulse-border 1500ms ease-out infinite;
}
.video-play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 88px;
height: 88px;
background: rgba(94, 173, 251, 0.6705882353);
border-radius: 50%;
transition: all 0.25s ease-in-out;
}
.video-play-button:hover:after {
background-color: #da0528;
}
.video-play-button span {
display: block;
position: relative;
z-index: 3;
width: 0;
height: 0;
border-style: solid;
border-width: 16px 0 16px 20px;
border-color: transparent transparent transparent #fff;
}
.headslide-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
}
.headslide {
display: flex;
max-width: 1160px;
width: 100%;
height: 600px;
margin: 0 auto;
}
.headslide .flickity-viewport {
width: 100%;
}
.headslide-item {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: 330px;
height: 558px;
margin: 0 25px;
}
.headslide-img {
position: absolute;
top: 68px;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.headslide-img-active {
flex: 0 0 417px;
width: 417px;
height: 558px;
opacity: 0;
visibility: hidden;
}
.headslide-item.is-selected .headslide-img-active {
opacity: 1;
visibility: visible;
}
.headslide-item.is-selected .headslide-img {
opacity: 0;
visibility: hidden;
}
.headslide .flickity-page-dots {
bottom: 5px;
}
.headslide .flickity-page-dots .dot {
width: 12px;
height: 12px;
margin: 0 7px;
background: #bebebe;
border-radius: 100%;
opacity: 1;
transition: background 0.25s ease;
}
.headslide .flickity-page-dots .dot:hover {
background: #5badff;
}
.headslide .flickity-page-dots .dot.is-selected {
background: #5badff;
}
.headslide .flickity-button {
color: #5ba2ff;
background: #fff;
transition: all 0.25s ease;
}
.headslide .flickity-prev-next-button {
width: 65px;
height: 65px;
border-radius: 100%;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
transform: translateY(64px);
}
.headslide .flickity-prev-next-button.previous {
left: -58px;
}
.headslide .flickity-prev-next-button.next {
right: -58px;
}
.headslide .flickity-prev-next-button:hover {
color: #fff;
background: #5ba2ff;
}
.headslide .flickity-prev-next-button:focus {
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
}
.headslide .flickity-prev-next-button .flickity-button-icon {
left: 22.5%;
top: 22.5%;
width: 55%;
height: 55%;
}
.social-cta-btn-content {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.social-cta-btn-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
width: 919px;
height: 310px;
padding: 202px 0 0;
gap: 34px;
background-image: url(//vsquare.clinic/wp-content/themes/plant/img/hifu/webp/bg-cta.webp);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.social-cta-btn {
width: 250px;
height: 80px;
overflow: hidden;
border-radius: 8px;
border: 2px solid transparent;
transition: all 0.25s ease;
}
.social-cta-btn img {
width: 100%;
height: auto;
}
.social-cta-btn:hover {
border-color: #5badff;
}
.btn-linkout-content {
position: absolute;
top: 366px;
left: 50%;
transform: translateX(90px);
}
.btn-linkout {
display: block;
width: 408px;
height: 34px;
cursor: pointer;
}
.headline-section {
display: block;
font-family: "kanitregular" !important;
font-size: 42px;
color: #435b99;
line-height: 1.4;
font-weight: normal;
text-align: center;
margin: 0;
}
.headline-section strong {
font-family: "kanitregular" !important;
font-size: 55px;
font-weight: normal;
}
.headline-section span {
font-size: 55px;
color: #5ba2ff;
}
.headline-section .small {
font-size: 42px;
color: #5ba2ff;
}
.section-review {
position: relative;
border-radius: 0 136px 0 136px;
background-color: #f7f8fa;
}
.review-detail-wrapper {
padding-top: 60px;
}
.review-container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
max-width: 1350px;
margin: 56px auto 0;
padding: 83px 43px 0;
border-radius: 30px;
background: rgb(237, 242, 246);
background: linear-gradient(0deg, rgba(237, 242, 246, 0) 45%, rgb(237, 242, 246) 100%);
}
.review-container + .review-container {
margin-top: 84px;
}
.review-col {
width: 50%;
padding: 0 41px;
}
.review-title-wrapper {
position: relative;
display: flex;
justify-content: center;
text-align: center;
padding: 21px 20px 21px 62px;
border-radius: 12px;
background-color: #fff;
-webkit-box-shadow: 0 3px 8px 0 rgba(80, 108, 131, 0.24);
box-shadow: 0 3px 8px 0 rgba(80, 108, 131, 0.24);
}
.review-label {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: -46px;
font-family: "kanitregular";
font-size: 50px;
color: #fff;
width: 106px;
height: 106px;
border: 5px solid #45549e;
border-radius: 100%;
background: rgb(95, 112, 197);
background: linear-gradient(0deg, rgb(95, 112, 197) 0%, rgb(69, 84, 158) 75%);
transform: translateY(-50%);
-webkit-box-shadow: 0 4px 7px 0 rgba(44, 89, 124, 0.38);
box-shadow: 0 4px 7px 0 rgba(44, 89, 124, 0.38);
}
.review-title {
display: block;
font-family: "kanitregular" !important;
font-size: 33px;
color: #45549e;
text-align: center;
line-height: 1.4;
}
.review-before-after-label {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
height: 69px;
overflow: hidden;
margin-top: 36px;
border-radius: 10px;
border: 2px solid #fff;
background-color: #fff;
-webkit-box-shadow: 0 3px 8px 0 rgba(80, 108, 131, 0.24);
box-shadow: 0 3px 8px 0 rgba(80, 108, 131, 0.24);
}
.review-before-after-label span {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 100%;
font-family: "kanitregular";
font-size: 28.5px;
color: #000;
font-weight: 600;
line-height: 1.4;
}
.review-before-after-label span:last-child {
color: #fff;
background-color: #7ab7fe;
}
.review-before-after-label:before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 50px;
height: 100%;
background-image: url(//vsquare.clinic/wp-content/themes/plant/img/hifu/arrow-before-after.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
transform: translateX(-50%);
}
.review-before-after-detail {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
text-align: center;
padding: 23px 0;
}
.review-before-after-detail:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 105px;
border-left: 3px dotted #c3d0da;
transform: translate(-50%, -50%);
}
.review-before-after-detail p {
width: 50%;
min-height: 102px;
font-family: "kanitregular";
font-size: 20px;
color: #737373;
line-height: 1.7;
text-align: center;
}
.review-before-after-detail p:first-child {
padding-left: 7px;
padding-right: 16px;
}
.review-before-after-detail p:last-child {
color: #45549e;
padding-left: 16px;
padding-right: 7px;
}
.review-before-after-img {
width: 100%;
overflow: hidden;
}
.review-before-after-img img {
width: 100%;
height: auto;
}
.review-before-after-description {
font-family: "kanitregular";
font-size: 28px;
color: #000;
text-align: center;
margin-top: 22px;
}
.review-before-after-vdo {
width: 100%;
height: 550px;
margin-top: 52px;
}
.review-before-after-vdo video {
max-width: 100%;
width: 100%;
height: 100%;
margin: 0;
line-height: 1;
border: none;
border-radius: 34px;
}
.before-after-case-review {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #ffffff;
width: 100%;
height: auto;
margin: 14px auto 32px;
border-radius: 34px;
}
.review-title-wrapper + .before-after-case-review {
margin-top: 62px;
}
.before-after-case-review .twentytwenty-wrapper {
width: 100%;
}
.before-after-case-review-text {
display: flex;
position: absolute;
justify-content: space-between;
top: 22px;
left: 0;
width: 100%;
padding: 0 19px;
z-index: 9;
}
.before-after-case-review-text span {
font-size: 25px;
color: #282828;
border-radius: 6px;
padding: 3px 16px;
opacity: 1;
visibility: visible;
background-color: #fff;
-webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.before-after-case-review-text.after-active .before,
.before-after-case-review-text.before-active .after {
opacity: 0;
visibility: hidden;
}
.frame-before-after-case-review {
background: #e0e9f7;
width: 100%;
height: 600px;
border: 4px solid #ffffff;
border-radius: 34px;
box-shadow: 0 6px 8px 0 rgba(37, 67, 93, 0.2);
}
.frame-before-after-case-review img {
opacity: 0;
transition: opacity 0.6s ease;
}
.frame-before-after-case-review.twentytwenty-container img {
opacity: 1;
}
.frame-before-after-case-review .twentytwenty-handle {
height: 56px;
width: 56px;
margin-left: -33px;
margin-top: 208px;
border: 3px solid #fff;
background-color: #6ca4db;
touch-action: none;
}
.frame-before-after-case-review .twentytwenty-left-arrow,
.frame-before-after-case-review .twentytwenty-right-arrow {
width: 13px;
height: 13px;
margin-top: -8px;
border: 3px solid #fff;
transform: rotate(45deg);
}
.frame-before-after-case-review .twentytwenty-left-arrow {
margin-left: -14px;
border-width: 0 0 3px 3px;
}
.frame-before-after-case-review .twentytwenty-right-arrow {
margin-right: -14px;
border-width: 3px 3px 0 0;
}
.frame-before-after-case-review .twentytwenty-handle:before {
margin-bottom: 33px;
}
.frame-before-after-case-review .twentytwenty-handle:after {
margin-top: 33px;
}
.section-btn-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
margin-top: 52px;
padding-bottom: 78px;
}
.section-btn {
font-family: "kanitlight";
font-size: 27px;
color: #fff;
line-height: 1.4076;
text-align: center;
padding: 8px 48px;
cursor: pointer;
border-radius: 50px;
background-color: #435b99;
transition: background-color 0.25s ease, color 0.25s ease;
}
.section-btn:hover {
color: #fff;
background-color: #5ba2ff;
}
.section-promotion {
position: relative;
padding: 50px 0 0;
}
.promotion-img {
display: flex;
justify-content: flex-start;
align-items: flex-start;
width: 1095px;
height: auto;
margin: 50px auto 0;
overflow: hidden;
border-radius: 30px;
}
.promotion-img img {
width: 100%;
height: auto;
}
.section-service {
position: relative;
width: 100%;
height: auto;
padding-top: 80px;
padding-bottom: 40px;
border-radius: 0 136px 0 0;
background-color: #fff;
box-shadow: 0 2px 18px 0 rgba(37, 67, 93, 0.15);
}
.service-wrapper {
display: flex;
justify-content: center;
flex-direction: column;
}
.service-headline {
font-family: "kanitregular", sans-serif !important;
font-size: 45px;
color: #435b9a;
text-align: center;
}
.service-list {
width: 100%;
max-width: 980px;
height: 386px;
margin: 54px auto 0;
padding: 0 12px;
}
.service-item {
width: 308px;
height: 378px;
margin: 0 7px;
overflow: hidden;
border-radius: 16px;
border: 4px solid #fff;
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
}
.service-img {
width: 100%;
height: 256px;
}
.service-detail {
position: absolute;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 134px;
padding-top: 16px;
border-radius: 14px 14px 0 0;
background: rgb(255, 255, 255);
background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(235, 238, 246) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgb(255, 255, 255)), color-stop(100%, rgb(235, 238, 246)));
background: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(235, 238, 246) 100%);
background: -o-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(235, 238, 246) 100%);
background: -ms-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(235, 238, 246) 100%);
background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(235, 238, 246) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#ebeef6", GradientType=0 );
}
.service-text-box {
display: flex;
flex-direction: column;
text-align: left;
}
.service-small-text {
font-family: "kanitregular", sans-serif;
font-size: 16px;
color: #435ba2;
line-height: 1.2;
}
.service-text {
font-family: "kanitregular", sans-serif;
font-size: 32px;
color: #435ba2;
line-height: 0.7;
margin: 0;
}
.service-btn {
display: block;
font-family: "kanitregular", sans-serif;
font-size: 19.5px;
color: #fff;
line-height: 1.2;
padding: 5.5px 42px;
margin: 20px auto 0;
border-radius: 50px;
background-color: #435b99;
-webkit-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.08);
box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
}
.service-btn:hover {
color: #fff;
background-color: #5ba2ff;
}
.service-list .flickity-prev-next-button {
display: flex;
justify-content: center;
align-items: center;
width: 52px;
height: 52px;
padding: 0;
cursor: pointer;
background: #fff;
background-color: #fff;
-webkit-box-shadow: 0 0 24px 2px rgba(0, 0, 0, 0.14);
box-shadow: 0 0 24px 2px rgba(0, 0, 0, 0.14);
transition: all 0.4s ease;
}
.service-list .flickity-prev-next-button.next {
right: -58px;
padding-left: 5px;
}
.service-list .flickity-prev-next-button.previous {
left: -58px;
}
.service-list .flickity-button:active {
opacity: 1;
}
.service-list .flickity-button-icon {
display: none;
}
.service-list .flickity-prev-next-button:before {
content: "";
width: 13px;
height: 25px;
background-image: url(//vsquare.clinic/wp-content/themes/plant/img/thermage-flx/arrow-slide.png);
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
transition: all 0.4s ease;
}
.service-list .flickity-prev-next-button.previous:before {
transform: rotate(180deg);
}
.service-list .flickity-prev-next-button:hover {
background-color: #435ba2;
}
.service-list .flickity-prev-next-button:hover:before {
filter: brightness(0) invert(1);
}
.section-footer {
position: relative;
width: 100%;
height: auto;
padding-top: 25px;
padding-bottom: 220px;
margin-top: -2px;
z-index: 4;
background-color: #fff;
}
.footer-wrapper {
display: block;
width: 100%;
max-width: 1200px;
height: auto;
margin: 0 auto;
}
.footer-headline {
display: block;
font-family: "kanitregular", sans-serif !important;
font-size: 45px;
color: #435b9a;
text-align: center;
}
.footer-social-cta-content {
display: flex;
width: 1146px;
height: 304px;
margin: 60px auto 0;
gap: 24px;
padding: 155px 0 0 270px;
overflow: hidden;
background-image: url(//vsquare.clinic/wp-content/themes/plant/img/hifu/webp/bg-cta-footer.webp);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}
.footer-social-cta-btn {
width: 250px;
height: 80px;
overflow: hidden;
border-radius: 8px;
border: 2px solid transparent;
transition: all 0.25s ease;
}
.footer-social-cta-btn img {
width: 100%;
height: auto;
}
.footer-social-cta-btn:hover {
border-color: #5badff;
}
.position-target {
position: absolute;
top: 550px;
width: 100%;
height: 1px;
opacity: 0;
}
br.m {
display: none;
}
@media (max-width: 1919px) {
.section-image.sticky {
margin-top: 4.4270833333vw;
}
.section-nav {
box-shadow: 0 0.2604166667vw 0.2083333333vw 0 rgba(87, 109, 121, 0.17);
}
.section-nav.sticky {
top: 3.4375vw;
}
.admin-bar .section-nav.sticky {
top: 5.1041666667vw;
}
.nav-menu {
height: 4.4270833333vw;
}
.nav-menu li {
font-size: 1.40625vw;
padding: 0 0.8333333333vw;
border-left: 0.1041666667vw solid #bad9ed;
}
.nav-menu li a {
text-underline-offset: 0.2083333333vw;
}
.video-content {
bottom: 4.0625vw;
width: 27.9166666667vw;
transform: translateX(1.9270833333vw);
}
.video-item {
border-radius: 0.6770833333vw;
}
.video-play-button {
width: 4.5833333333vw;
height: 4.5833333333vw;
padding: 0 0 0 0.3125vw;
}
.video-play-button:before {
width: 4.5833333333vw;
height: 4.5833333333vw;
}
.video-play-button:after {
width: 4.5833333333vw;
height: 4.5833333333vw;
}
.video-play-button span {
border-width: 0.8333333333vw 0 0.8333333333vw 1.0416666667vw;
}
.headslide {
max-width: 60.4166666667vw;
height: 31.25vw;
}
.headslide-item {
width: 17.1875vw;
height: 29.0625vw;
margin: 0 1.3020833333vw;
}
.headslide-img {
top: 3.5416666667vw;
}
.headslide-img-active {
flex: 0 0 21.71875vw;
width: 21.71875vw;
height: 29.0625vw;
}
.headslide .flickity-page-dots {
bottom: 0.2604166667vw;
}
.headslide .flickity-page-dots .dot {
width: 0.625vw;
height: 0.625vw;
margin: 0 0.3645833333vw;
}
.headslide .flickity-prev-next-button {
width: 3.3854166667vw;
height: 3.3854166667vw;
box-shadow: 0 1px 0.3125vw 0 rgba(0, 0, 0, 0.1);
transform: translateY(3.3333333333vw);
}
.headslide .flickity-prev-next-button.previous {
left: -3.0208333333vw;
}
.headslide .flickity-prev-next-button.next {
right: -3.0208333333vw;
}
.headslide .flickity-prev-next-button:focus {
box-shadow: 0 1px 0.3125vw 0 rgba(0, 0, 0, 0.1);
}
.social-cta-btn-wrapper {
width: 47.8645833333vw;
height: 16.1458333333vw;
padding: 10.5208333333vw 0 0;
gap: 1.7708333333vw;
}
.social-cta-btn {
width: 13.0208333333vw;
height: 4.1666666667vw;
overflow: hidden;
border-radius: 0.4166666667vw;
border: 0.1041666667vw solid transparent;
}
.btn-linkout-content {
top: 19.0625vw;
transform: translateX(4.6875vw);
}
.btn-linkout {
width: 21.25vw;
height: 1.7708333333vw;
}
.headline-section {
font-size: 2.1875vw;
}
.headline-section strong {
font-size: 2.8645833333vw;
}
.headline-section span {
font-size: 2.8645833333vw;
}
.headline-section .small {
font-size: 2.1875vw;
}
.section-review {
border-radius: 0 7.0833333333vw 0 7.0833333333vw;
}
.review-detail-wrapper {
padding-top: 3.125vw;
}
.review-container {
max-width: 70.3125vw;
margin: 2.9166666667vw auto 0;
padding: 4.3229166667vw 2.2395833333vw 0;
border-radius: 1.5625vw;
}
.review-container + .review-container {
margin-top: 4.375vw;
}
.review-col {
padding: 0 2.1354166667vw;
}
.review-title-wrapper {
padding: 1.09375vw 1.0416666667vw 1.09375vw 3.2291666667vw;
border-radius: 0.625vw;
-webkit-box-shadow: 0 0.15625vw 0.4166666667vw 0 rgba(80, 108, 131, 0.24);
box-shadow: 0 0.15625vw 0.4166666667vw 0 rgba(80, 108, 131, 0.24);
}
.review-label {
left: -2.3958333333vw;
font-size: 2.6041666667vw;
width: 5.5208333333vw;
height: 5.5208333333vw;
border: 0.2604166667vw solid #45549e;
-webkit-box-shadow: 0 0.2083333333vw 0.3645833333vw 0 rgba(44, 89, 124, 0.38);
box-shadow: 0 0.2083333333vw 0.3645833333vw 0 rgba(44, 89, 124, 0.38);
}
.review-title {
font-size: 1.71875vw;
}
.review-before-after-label {
height: 3.59375vw;
margin-top: 1.875vw;
border-radius: 0.5208333333vw;
border: 0.1041666667vw solid #fff;
-webkit-box-shadow: 0 0.15625vw 0.4166666667vw 0 rgba(80, 108, 131, 0.24);
box-shadow: 0 0.15625vw 0.4166666667vw 0 rgba(80, 108, 131, 0.24);
}
.review-before-after-label span {
font-size: 1.484375vw;
}
.review-before-after-label:before {
width: 2.6041666667vw;
}
.review-before-after-detail {
padding: 1.1979166667vw 0;
}
.review-before-after-detail:before {
width: 0.1041666667vw;
height: 5.46875vw;
border-left: 0.15625vw dotted #c3d0da;
}
.review-before-after-detail p {
min-height: 5.3125vw;
font-size: 1.0416666667vw;
}
.review-before-after-detail p:first-child {
padding-left: 0.3645833333vw;
padding-right: 0.8333333333vw;
}
.review-before-after-detail p:last-child {
padding-left: 0.8333333333vw;
padding-right: 0.3645833333vw;
}
.review-before-after-description {
font-size: 1.4583333333vw;
margin-top: 1.1458333333vw;
}
.review-before-after-vdo {
height: 28.6458333333vw;
margin-top: 2.7083333333vw;
}
.review-before-after-vdo video {
border-radius: 1.7708333333vw;
}
.before-after-case-review {
margin: 0.7291666667vw auto 1.6666666667vw;
border-radius: 1.7708333333vw;
}
.review-title-wrapper + .before-after-case-review {
margin-top: 3.2291666667vw;
}
.before-after-case-review-text {
top: 1.1458333333vw;
padding: 0 0.9895833333vw;
}
.before-after-case-review-text span {
font-size: 1.3020833333vw;
border-radius: 0.3125vw;
padding: 0.15625vw 0.8333333333vw;
-webkit-box-shadow: 0 0.2083333333vw 0.625vw 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0.2083333333vw 0.625vw 0 rgba(0, 0, 0, 0.2);
}
.frame-before-after-case-review {
height: 31.25vw;
border: 0.2083333333vw solid #ffffff;
border-radius: 1.7708333333vw;
box-shadow: 0 0.3125vw 0.4166666667vw 0 rgba(37, 67, 93, 0.2);
}
.frame-before-after-case-review .twentytwenty-handle {
height: 2.9166666667vw;
width: 2.9166666667vw;
margin-left: -1.71875vw;
margin-top: 10.8333333333vw;
border: 0.15625vw solid #fff;
}
.frame-before-after-case-review .twentytwenty-left-arrow,
.frame-before-after-case-review .twentytwenty-right-arrow {
width: 0.6770833333vw;
height: 0.6770833333vw;
margin-top: -0.4166666667vw;
border: 0.15625vw solid #fff;
}
.frame-before-after-case-review .twentytwenty-left-arrow {
margin-left: -0.7291666667vw;
border-width: 0 0 0.15625vw 0.15625vw;
}
.frame-before-after-case-review .twentytwenty-right-arrow {
margin-right: -0.7291666667vw;
border-width: 0.15625vw 0.15625vw 0 0;
}
.frame-before-after-case-review .twentytwenty-handle:before {
margin-bottom: 1.71875vw;
}
.frame-before-after-case-review .twentytwenty-handle:after {
margin-top: 1.71875vw;
}
.section-btn-wrapper {
margin-top: 2.7083333333vw;
padding-bottom: 4.0625vw;
}
.section-btn {
font-size: 1.40625vw;
padding: 0.4166666667vw 2.5vw;
border-radius: 2.6041666667vw;
}
.section-promotion {
padding: 2.6041666667vw 0 0;
}
.promotion-img {
width: 57.03125vw;
margin: 2.6041666667vw auto 0;
border-radius: 1.5625vw;
}
.section-service {
padding-top: 4.1666666667vw;
padding-bottom: 2.0833333333vw;
border-radius: 0 7.0833333333vw 0 0;
box-shadow: 0 0.1041666667vw 0.9375vw 0 rgba(37, 67, 93, 0.15);
}
.service-headline {
font-size: 2.34375vw;
}
.service-list {
max-width: 51.0416666667vw;
height: 20.1041666667vw;
margin: 2.8125vw auto 0;
padding: 0 0.625vw;
}
.service-item {
width: 16.0416666667vw;
height: 19.6875vw;
margin: 0 0.3645833333vw;
border-radius: 0.8333333333vw;
border: 0.2083333333vw solid #fff;
-webkit-box-shadow: 0 0 0.3125vw 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.3125vw 0 rgba(0, 0, 0, 0.1);
}
.service-img {
height: 13.3333333333vw;
}
.service-detail {
height: 6.9791666667vw;
padding-top: 0.8333333333vw;
border-radius: 0.7291666667vw 0.7291666667vw 0 0;
}
.service-small-text {
font-size: 0.8333333333vw;
}
.service-text {
font-size: 1.6666666667vw;
}
.service-btn {
font-size: 1.015625vw;
padding: 0.2864583333vw 2.1875vw;
margin: 1.0416666667vw auto 0;
border-radius: 2.6041666667vw;
-webkit-box-shadow: 0 0 0.7291666667vw 0 rgba(0, 0, 0, 0.08);
box-shadow: 0 0 0.7291666667vw 0 rgba(0, 0, 0, 0.08);
}
.service-list .flickity-prev-next-button {
width: 2.7083333333vw;
height: 2.7083333333vw;
-webkit-box-shadow: 0 0 1.25vw 0.1041666667vw rgba(0, 0, 0, 0.14);
box-shadow: 0 0 1.25vw 0.1041666667vw rgba(0, 0, 0, 0.14);
}
.service-list .flickity-prev-next-button.next {
right: -3.0208333333vw;
padding-left: 0.2604166667vw;
}
.service-list .flickity-prev-next-button.previous {
left: -3.0208333333vw;
}
.service-list .flickity-prev-next-button:before {
width: 0.6770833333vw;
height: 1.3020833333vw;
}
.section-footer {
padding-top: 1.3020833333vw;
padding-bottom: 11.4583333333vw;
margin-top: -0.1041666667vw;
}
.footer-wrapper {
max-width: 62.5vw;
}
.footer-headline {
font-size: 2.34375vw;
}
.footer-social-cta-content {
width: 59.6875vw;
height: 15.8333333333vw;
margin: 3.125vw auto 0;
gap: 1.25vw;
padding: 8.0729166667vw 0 0 14.0625vw;
}
.footer-social-cta-btn {
width: 13.0208333333vw;
height: 4.1666666667vw;
border-radius: 0.4166666667vw;
border: 0.1041666667vw solid transparent;
}
.position-target {
top: 28.6458333333vw;
}
}
@media (max-width: 768px) {
.section-image.sticky {
margin-top: 24.4791666667vw;
}
.section-image .image-d {
display: none;
}
.section-image .image-m {
display: block;
}
.section-nav {
margin-top: 0;
background-color: transparent;
box-shadow: 0 0.6510416667vw 0.5208333333vw 0 rgba(87, 109, 121, 0.17);
}
.section-nav.sticky {
top: 50px;
margin-top: 0;
background-color: #fff;
}
.admin-bar .section-nav.sticky {
top: 96px;
}
.dropdown {
display: flex;
justify-content: center;
align-items: center;
padding: 6.5104166667vw 0;
}
.btn-dropdown {
position: relative;
display: block;
width: 79.4270833333vw;
height: 11.4583333333vw;
font-family: "kanitregular";
font-size: 4.5572916667vw;
color: #606060;
text-align: left;
padding: 0 15.1041666667vw 0 4.4270833333vw;
border-radius: 2.0833333333vw;
cursor: pointer;
z-index: 98;
border: 0.390625vw solid #d5d5d5;
background-color: #ffffff;
}
.btn-dropdown:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 11.71875vw;
height: 100%;
border-radius: 1.8229166667vw;
background-color: #435b99;
transition: all 0.25s ease;
}
.btn-dropdown:after {
content: "";
position: absolute;
top: 2.34375vw;
right: 3.6458333333vw;
width: 3.90625vw;
height: 3.90625vw;
border: 0.6510416667vw solid #fff;
border-width: 0 0.6510416667vw 0.6510416667vw 0;
transform: rotate(45deg);
}
.btn-dropdown.active:after {
top: 4.4270833333vw;
border-width: 0.6510416667vw 0 0 0.6510416667vw;
}
.nav-menu {
display: block;
position: absolute;
top: 13.0208333333vw;
left: 50%;
width: 79.4270833333vw;
height: auto;
max-height: 60.6770833333vw;
z-index: 97;
padding-top: 1.953125vw;
overflow-y: scroll;
overflow-x: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
border: 0.390625vw solid #d5d5d5;
border-radius: 0 0 2.0833333333vw 2.0833333333vw;
background-color: #fff;
transform: translateX(-50%);
transition: all 0.25s ease;
}
.admin-bar .nav-menu {
top: calc(13.0208333333vw + 46px);
}
.nav-menu.is-open {
top: 15.625vw;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.admin-bar .nav-menu.is-open {
top: calc(15.625vw + 46px);
}
.nav-menu li {
font-family: "kanitregular";
font-size: 4.5572916667vw;
color: #606060;
text-align: left;
padding: 0;
cursor: pointer;
border: 0;
background-color: #fff;
transition: all 0.25s ease;
}
.nav-menu li:nth-child(even) {
background-color: #f8f9fa;
}
.nav-menu li.active {
color: #fff;
text-decoration: none;
background-color: #435b99;
}
.nav-menu li a {
display: block;
font-size: inherit;
color: #606060;
padding: 3.515625vw 4.4270833333vw;
transition: all 0.25s ease-in-out;
}
.nav-menu li a:hover {
color: #606060;
text-decoration: none;
}
.nav-menu li.active a {
color: #fff;
text-decoration: none;
}
.video-content {
bottom: 30.7291666667vw;
left: 50%;
width: 93.2291666667vw;
transform: translateX(-50%);
}
.video-item {
border-radius: 1.8229166667vw;
}
.video-play-button {
width: 11.4583333333vw;
height: 11.4583333333vw;
padding: 0 0 0 0.78125vw;
}
.video-play-button:before {
width: 11.4583333333vw;
height: 11.4583333333vw;
}
.video-play-button:after {
width: 11.4583333333vw;
height: 11.4583333333vw;
}
.video-play-button:hover:after {
background: rgba(94, 173, 251, 0.6705882353);
}
.video-play-button:active:after {
background: #da0528;
}
.video-play-button span {
border-width: 2.0833333333vw 0 2.0833333333vw 2.6041666667vw;
}
.headslide-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
}
.headslide {
max-width: 100%;
width: 100%;
height: 112.7604166667vw;
}
.headslide-item {
width: 59.1145833333vw;
height: 110.0260416667vw;
margin: 0;
}
.headslide-img {
top: 0;
height: 41.40625vw;
overflow: hidden;
}
.headslide-img-active {
flex: 0 0 82.1614583333vw;
width: 82.1614583333vw;
height: 110.0260416667vw;
}
.headslide .flickity-page-dots {
bottom: 0;
}
.headslide .flickity-page-dots .dot {
width: 1.953125vw;
height: 1.953125vw;
margin: 0 1.171875vw;
}
.headslide .flickity-page-dots .dot:hover {
background: #bebebe;
}
.headslide .flickity-page-dots .dot:active {
background: #5badff;
}
.headslide .flickity-prev-next-button {
display: none;
}
.social-cta-btn-wrapper {
width: 94.2708333333vw;
height: 55.078125vw;
padding: 41.1458333333vw 0 0;
gap: 1.953125vw;
background-image: url(//vsquare.clinic/wp-content/themes/plant/img/hifu/webp/bg-cta-m.webp);
}
.social-cta-btn {
width: 27.0833333333vw;
height: 8.3333333333vw;
border-radius: 1.0416666667vw;
border-width: 0.2604166667vw;
}
.social-cta-btn:hover {
border-color: transparent;
}
.social-cta-btn:active {
border-color: #5badff;
}
.btn-linkout-content {
top: 144.4010416667vw;
transform: translateX(-32.5520833333vw);
}
.btn-linkout {
width: 69.4010416667vw;
height: 5.7291666667vw;
}
.headline-section {
font-size: 7.421875vw !important;
padding: 0 4.5572916667vw;
}
.headline-section strong {
font-size: 11.71875vw;
}
.headline-section span {
font-size: 11.71875vw;
}
.headline-section .small {
font-size: 7.421875vw;
}
.section-review {
border-radius: 17.7083333333vw 0 17.7083333333vw 0;
}
.review-detail-wrapper {
padding-top: 8.3333333333vw;
padding-bottom: 4.6875vw;
}
.review-container {
justify-content: flex-start;
align-items: center;
flex-direction: column;
max-width: 95.8333333333vw;
margin: 10.6770833333vw auto 0;
padding: 6.640625vw 4.8177083333vw 0;
border-radius: 3.90625vw;
}
.review-container + .review-container {
margin-top: 0;
}
.review-col {
width: 100%;
padding: 0 0 5.859375vw 0;
}
.review-title-wrapper {
width: 96%;
margin-left: 4%;
padding: 2.9947916667vw 2.6041666667vw 2.9947916667vw 11.9791666667vw;
border-radius: 2.6041666667vw;
-webkit-box-shadow: 0 0.2604166667vw 0.78125vw 0 rgba(80, 108, 131, 0.24);
box-shadow: 0 0.2604166667vw 0.78125vw 0 rgba(80, 108, 131, 0.24);
}
.review-label {
left: -3.6458333333vw;
font-size: 7.1614583333vw;
width: 15.1041666667vw;
height: 15.1041666667vw;
border: 0.78125vw solid #45549e;
-webkit-box-shadow: 0 0.390625vw 0.6510416667vw 0 rgba(44, 89, 124, 0.38);
box-shadow: 0 0.390625vw 0.6510416667vw 0 rgba(44, 89, 124, 0.38);
}
.review-title {
font-size: 4.6875vw;
}
.review-before-after-label {
height: 10.546875vw;
margin-top: 5.859375vw;
border-radius: 1.8229166667vw;
border: 0.2604166667vw solid #fff;
-webkit-box-shadow: 0 0.390625vw 1.0416666667vw 0 rgba(80, 108, 131, 0.24);
box-shadow: 0 0.390625vw 1.0416666667vw 0 rgba(80, 108, 131, 0.24);
}
.review-before-after-label span {
font-size: 4.4270833333vw;
}
.review-before-after-label:before {
width: 7.6822916667vw;
}
.review-before-after-detail {
padding: 4.0364583333vw 0 4.4270833333vw;
}
.review-before-after-detail:before {
width: 0.390625vw;
height: 66%;
border-left: 0.390625vw dotted #c3d0da;
}
.review-before-after-detail p {
min-height: unset;
font-size: 3.125vw;
line-height: 1.8;
}
.review-before-after-detail p:first-child {
padding-left: 1.5625vw;
padding-right: 3.6458333333vw;
}
.review-before-after-detail p:last-child {
padding-left: 3.6458333333vw;
padding-right: 1.5625vw;
}
.review-before-after-description {
font-size: 4.6875vw;
margin-top: 3.2552083333vw;
}
.review-before-after-vdo {
height: auto;
margin-top: 5.859375vw;
}
.review-before-after-vdo video {
border-radius: 4.9479166667vw;
-webkit-box-shadow: 0 0.78125vw 0.78125vw 0 rgba(80, 108, 131, 0.24);
box-shadow: 0 0.78125vw 0.78125vw 0 rgba(80, 108, 131, 0.24);
}
.before-after-case-review {
margin: 1.0416666667vw auto 5.859375vw;
border-radius: 4.9479166667vw;
}
.review-title-wrapper + .before-after-case-review {
margin-top: 8.4635416667vw;
}
.before-after-case-review .twentytwenty-wrapper {
width: 100%;
}
.before-after-case-review-text {
top: 3.2552083333vw;
padding: 0 3.125vw;
}
.before-after-case-review-text span {
font-size: 3.90625vw;
border-radius: 1.3020833333vw;
padding: 0.6510416667vw 2.8645833333vw;
-webkit-box-shadow: 0 0.5208333333vw 1.5625vw 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0.5208333333vw 1.5625vw 0 rgba(0, 0, 0, 0.2);
}
.frame-before-after-case-review {
background: #e0e9f7;
width: 100%;
height: 93.8802083333vw;
border: 0.5208333333vw solid #ffffff;
border-radius: 4.6875vw;
-webkit-box-shadow: 0 0.78125vw 1.0416666667vw 0 rgba(37, 67, 93, 0.2);
box-shadow: 0 0.78125vw 1.0416666667vw 0 rgba(37, 67, 93, 0.2);
}
.frame-before-after-case-review .twentytwenty-handle {
height: 11.0677083333vw;
width: 11.0677083333vw;
margin-left: -5.9895833333vw;
margin-top: 29.296875vw;
border: 0.5208333333vw solid #fff;
}
.frame-before-after-case-review .twentytwenty-left-arrow,
.frame-before-after-case-review .twentytwenty-right-arrow {
width: 2.8645833333vw;
height: 2.8645833333vw;
margin-top: -1.5625vw;
border: 0.5208333333vw solid #fff;
}
.frame-before-after-case-review .twentytwenty-left-arrow {
margin-left: -2.8645833333vw;
border-width: 0 0 0.5208333333vw 0.5208333333vw;
}
.frame-before-after-case-review .twentytwenty-right-arrow {
margin-right: -2.8645833333vw;
border-width: 0.5208333333vw 0.5208333333vw 0 0;
}
.frame-before-after-case-review .twentytwenty-handle:before {
margin-bottom: 5.9895833333vw;
}
.frame-before-after-case-review .twentytwenty-handle:after {
margin-top: 6.25vw;
}
.section-btn-wrapper {
margin-top: 0;
padding-bottom: 9.1145833333vw;
}
.section-btn {
font-size: 5.2083333333vw;
line-height: 1.4;
padding: 1.4973958333vw 6.25vw;
border-radius: 6.5104166667vw;
}
.section-btn:hover {
color: #fff;
background-color: #435b99;
}
.section-btn:active {
color: #fff;
background-color: #5ba2ff;
}
.section-promotion {
position: relative;
padding: 6.5104166667vw 0 0;
}
.promotion-img {
width: 91.6666666667vw;
margin: 6.5104166667vw auto 8.8541666667vw;
border-radius: 2.6041666667vw;
}
.section-service {
padding-top: 10.4166666667vw;
padding-bottom: 0;
border-radius: 0 17.7083333333vw 0 0;
box-shadow: 0 0.2604166667vw 2.34375vw 0 rgba(37, 67, 93, 0.15);
}
.service-headline {
font-size: 6.1197916667vw;
text-align: center;
margin-bottom: 0;
}
.service-list {
max-width: 95.0520833333vw;
height: 50.2604166667vw;
margin: 7.2916666667vw auto 0;
padding: 0 1.5625vw;
}
.service-item {
width: 29.6875vw;
height: 44.7916666667vw;
margin: 0 0.6510416667vw;
overflow: hidden;
border-radius: 2.0833333333vw;
border: 0.5208333333vw solid #fff;
-webkit-box-shadow: 0 0 0.78125vw 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.78125vw 0 rgba(0, 0, 0, 0.1);
}
.service-img {
position: absolute;
top: -1.953125vw;
left: -6.25vw;
width: 35.6770833333vw;
height: auto;
}
.service-img img {
widows: 100%;
height: auto;
}
.service-detail {
height: 15.8854166667vw;
padding-top: 2.8645833333vw;
border-radius: 1.8229166667vw 1.8229166667vw 0 0;
}
.service-small-text {
font-size: 1.5625vw;
}
.service-text {
font-size: 3.125vw;
line-height: 0.9;
}
.service-btn {
font-size: 2.34375vw;
padding: 0.9114583333vw 5.0130208333vw;
margin: 1.953125vw auto 0;
border-radius: 6.5104166667vw;
-webkit-box-shadow: 0 0 1.8229166667vw 0 rgba(0, 0, 0, 0.08);
box-shadow: 0 0 1.8229166667vw 0 rgba(0, 0, 0, 0.08);
}
.service-btn:hover {
color: #fff;
background-color: #435ba2;
}
.service-btn:active {
color: #fff;
background-color: #5ba2ff;
}
.service-list .flickity-prev-next-button {
width: 6.7708333333vw;
height: 6.7708333333vw;
transform: translateY(-120%);
-webkit-box-shadow: 0 0 3.125vw 0.2604166667vw rgba(0, 0, 0, 0.14);
box-shadow: 0 0 3.125vw 0.2604166667vw rgba(0, 0, 0, 0.14);
}
.service-list .flickity-prev-next-button.next {
right: -0.2604166667vw;
padding-left: 0.632292vw;
}
.service-list .flickity-prev-next-button.previous {
left: -0.2604166667vw;
}
.service-list .flickity-prev-next-button:before {
width: 1.6927083333vw;
height: 3.2552083333vw;
}
.service-list .flickity-prev-next-button:hover {
background-color: #fff;
}
.service-list .flickity-prev-next-button:active {
background-color: #435ba2;
}
.service-list .flickity-prev-next-button:hover:before {
filter: none;
}
.service-list .flickity-prev-next-button:active:before {
filter: brightness(0) invert(1);
}
.section-footer {
padding-top: 2.03125vw;
padding-bottom: 150px;
}
.footer-wrapper {
max-width: 100%;
}
.footer-headline {
font-size: 5.2083333333vw;
margin: 0;
padding: 0 6.5104166667vw;
}
.footer-social-cta-content {
flex-direction: column;
width: 89.9739583333vw;
height: 40.4947916667vw;
margin: 7.8125vw auto 0;
gap: 2.34375vw;
padding: 5.46875vw 0 0 41.6666666667vw;
background-image: url(//vsquare.clinic/wp-content/themes/plant/img/hifu/webp/bg-cta-footer-m.webp);
}
.footer-social-cta-btn {
width: 27.0833333333vw;
height: 8.3333333333vw;
border-radius: 1.0416666667vw;
border-width: 0.2604166667vw;
}
.footer-social-cta-btn:hover {
border-color: transparent;
}
.footer-social-cta-btn:active {
border-color: #5badff;
}
.position-target {
top: 178.3854166667vw;
}
br.d {
display: none;
}
br.m {
display: block;
}
}