@font-face {
font-family: 'Gotham';
src: url(//v-sure.vsquare.clinic/wp-content/themes/plant/fonts/review/Gotham-Medium.eot);
src: url(//v-sure.vsquare.clinic/wp-content/themes/plant/fonts/review/Gotham-Medium.eot?#iefix) format('embedded-opentype'),
url(//v-sure.vsquare.clinic/wp-content/themes/plant/fonts/review/Gotham-Medium.woff2) format('woff2'),
url(//v-sure.vsquare.clinic/wp-content/themes/plant/fonts/review/Gotham-Medium.woff) format('woff'),
url(//v-sure.vsquare.clinic/wp-content/themes/plant/fonts/review/Gotham-Medium.ttf) format('truetype'),
url(//v-sure.vsquare.clinic/wp-content/themes/plant/fonts/review/Gotham-Medium.svg#Gotham-Medium) format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}
.main-review {
position: relative;
}
.section-review {
position: relative;
}
.review-wrapper {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.review-img {
position: relative;
width: 100%;
height: auto;
}
.review-img img {
display: block;
width: auto;
height: 100%;
margin: 0 auto;
}
.review-img .m {
display: none;
}
.review-btn-wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.review-btn-viewmore {
position: absolute;
top: 50%;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 324px;
height: 65px;
font-family: 'kanitregular';
font-size: 32px;
color: #435B80;
text-align: center;
line-height: 1.2;
padding: 0 35px 0 10px;
border: 3px solid #5a80ff;
border-radius: 50px;
background-color: #fff;
-webkit-box-shadow: 0 2px 8px 0px rgba(0,0,0,0.2);
box-shadow: 0 2px 8px 0px rgba(0,0,0,0.2);
transform: translate(-50%, 827px);
transition: all .4s ease-in-out;
}
.review-btn-viewmore:before {
content: "";
position: absolute;
top: 50%;
right: 27px;
width: 17px;
height: 40px;
background-image: url(//v-sure.vsquare.clinic/wp-content/themes/plant/img/review/icon-arrow.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
transform: translateY(-50%);
}
.review-btn-viewmore:hover {
color: #1767dc;
}
.review-branch {
position: absolute;
bottom: 76px;
left: 50%;
width: 100%;
max-width: 852px;
transform: translateX(-50%);
}
.review-branch-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.review-branch-item {
display: inline-block;
vertical-align: top;
width: 33.33%;
padding: 0 22px;
margin-top: 30px;
}
.review-branch-box {
position: relative;
height: 220px;
border: 3px solid #5a80ff;
border-radius: 26px;
overflow: hidden;
background-color: #fff;
}
.review-branch-img {
display: block;
width: auto;
height: 100%;
margin: 0 auto;
}
.review-branch-btn {
position: absolute;
bottom: 10px;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 226px;
height: 45px;
font-family: 'kanitregular';
font-size: 20px;
color: #435B80;
text-align: center;
line-height: 1;
padding: 0 29px 0 6px;
border: 2px solid #5a80ff;
border-radius: 50px;
background-color: #fff;
-webkit-box-shadow: 0 2px 8px 0px rgba(0,0,0,0.2);
box-shadow: 0 2px 8px 0px rgba(0,0,0,0.2);
transform: translateX(-50%);
transition: all .4s ease-in-out;
}
.review-branch-btn:before {
content: "";
position: absolute;
top: 50%;
right: 19px;
width: 12px;
height: 27px;
background-image: url(//v-sure.vsquare.clinic/wp-content/themes/plant/img/review/icon-arrow-2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
transform: translateY(-50%);
}
.review-branch-btn:hover {
color: #1767dc;
}
.review-branch-btn p {
margin: 0;
}
.review-branch .flickity-button {
background: #fff;
color: #5c7fff;
z-index: 9;
}
.review-branch .flickity-button:active {
opacity: 1;
}
.review-branch .flickity-prev-next-button {
top: unset;
bottom: 0;
width: 54px;
height: 54px;
transform: none;
-webkit-box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.15);
box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.15);
}
.review-branch .flickity-prev-next-button.previous {
left: -60px;
}
.review-branch .flickity-prev-next-button.next {
right: -60px;
}
.review-branch .flickity-prev-next-button .flickity-button-icon {
left: 27.5%;
top: 27.5%;
width: 45%;
height: 45%;
}
.review-reward {
position: absolute;
bottom: 143px;
left: 50%;
width: 100%;
height: 329px;
z-index: 2;
transform: translateX(-50%);
}
.review-reward-item {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.review-reward-img {
display: block;
width: auto;
height: 100%;
margin: 0 auto;
}
.review-reward .flickity-button {
background: #fff;
color: #5c7fff;
z-index: 9;
}
.review-reward .flickity-button:active {
opacity: 1;
}
.review-reward .flickity-prev-next-button {
top: unset;
bottom: -100px;
width: 54px;
height: 54px;
border-radius: 100%;
transform: none;
-webkit-box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.15);
box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.15);
}
.review-reward .flickity-prev-next-button.previous {
left: 114px;
}
.review-reward .flickity-prev-next-button.next {
right: 114px;
}
.review-reward .flickity-prev-next-button .flickity-button-icon {
left: 27.5%;
top: 27.5%;
width: 45%;
height: 45%;
}
.review-reward-nav {
position: absolute;
bottom: 44px;
left: 50%;
width: 100%;
max-width: 830px;
height: 50px;
z-index: 1;
transform: translateX(-50%);
}
.review-reward-nav-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 10px;
}
.review-reward-nav-btn {
display: flex;
justify-content: center;
align-items: center;
width: 118px;
height: 28px;
font-family: 'Gotham';
font-size: 18px;
color: #435b8b;
line-height: 1;
font-weight: 600;
opacity: 0.25;
padding: 0;
border: 1px solid #84a1ff;
border-radius: 10px;
cursor: pointer;
background-image: none;
background-color: #fff;
background: #fff;
-webkit-box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.15);
box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.15);
transition: all .4s ease;
}
.review-reward-nav-btn:hover, 
.review-reward-nav-item.is-nav-selected .review-reward-nav-btn {
opacity: 1;
}
@media (max-width: 1200px) {
.review-btn-viewmore {
width: 27vw;
height: 5.4166666667vw;
font-size: 2.6666666667vw;
padding: 0 2.9166666667vw 0 0.8333333333vw;
border-width: 0.25vw;
border-radius: 4.1666666667vw;
-webkit-box-shadow: 0 0.1666666667vw 0.6666666667vw 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0.1666666667vw 0.6666666667vw 0 rgba(0, 0, 0, 0.2);
transform: translate(-50%, 68.9166666667vw);
}
.review-btn-viewmore:before {
right: 2.25vw;
width: 1.4166666667vw;
height: 3.3333333333vw;
}
.review-branch {
bottom: 6.3333333333vw;
max-width: 71vw;
}
.review-branch-item {
padding: 0 1.8333333333vw;
margin-top: 2.5vw;
}
.review-branch-box {
height: 18.3333333333vw;
border-width: 0.25vw;
border-radius: 2.1666666667vw;
}
.review-branch-btn {
bottom: 0.8333333333vw;
width: 18.8333333333vw;
height: 3.75vw;
font-size: 1.6666666667vw;
padding: 0 2.4166666667vw 0 0.5vw;
border-width: 0.1666666667vw;
border-radius: 4.1666666667vw;
-webkit-box-shadow: 0 0.1666666667vw 0.6666666667vw 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0.1666666667vw 0.6666666667vw 0 rgba(0, 0, 0, 0.2);
}
.review-branch-btn:before {
right: 1.5833333333vw;
width: 1vw;
height: 2.25vw;
}
.review-branch .flickity-prev-next-button {
width: 4.5vw;
height: 4.5vw;
-webkit-box-shadow: 0.1666666667vw 0.1666666667vw 0.3333333333vw 0 rgba(0, 0, 0, 0.15);
box-shadow: 0.1666666667vw 0.1666666667vw 0.3333333333vw 0 rgba(0, 0, 0, 0.15);
}
.review-branch .flickity-prev-next-button.previous {
left: -5vw;
}
.review-branch .flickity-prev-next-button.next {
right: -5vw;
}
.review-reward {
position: absolute;
bottom: 11.9166666667vw;
height: 27.4166666667vw;
}
.review-reward .flickity-prev-next-button {
bottom: -8.3333333333vw;
width: 4.5vw;
height: 4.5vw;
-webkit-box-shadow: 0.1666666667vw 0.1666666667vw 0.3333333333vw 0 rgba(0, 0, 0, 0.15);
box-shadow: 0.1666666667vw 0.1666666667vw 0.3333333333vw 0 rgba(0, 0, 0, 0.15);
}
.review-reward .flickity-prev-next-button.previous {
left: 9.5vw;
}
.review-reward .flickity-prev-next-button.next {
right: 9.5vw;
}
.review-reward-nav {
bottom: 3.6666666667vw;
max-width: 69.16666666666667vw;
height: 4.1666666667vw;
}
.review-reward-nav-item {
padding: 0 0.8333333333vw;
}
.review-reward-nav-btn {
width: 9.8333333333vw;
height: 2.3333333333vw;
font-size: 1.5vw;
border-radius: 0.8333333333vw;
-webkit-box-shadow: 0.1666666667vw 0.1666666667vw 0.3333333333vw 0 rgba(0, 0, 0, 0.15);
box-shadow: 0.1666666667vw 0.1666666667vw 0.3333333333vw 0 rgba(0, 0, 0, 0.15);
}
}
@media (max-width: 768px) {
.main-review {
padding-bottom: 50px;
}
.review-img img {
width: 100%;
height: auto;
}
.review-img .d {
display: none;
}
.review-img .m {
display: block;
}
.review-btn-viewmore {
width: 42.1875vw;
height: 8.4635416667vw;
font-size: 4.1666666667vw;
padding: 0 4.5572916667vw 0 1.3020833333vw;
border-width: 0.390625vw;
border-radius: 6.5104166667vw;
-webkit-box-shadow: 0 0.2604166667vw 1.0416666667vw 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0.2604166667vw 1.0416666667vw 0 rgba(0, 0, 0, 0.2);
transform: translate(-50%, 112.5vw);
}
.review-btn-viewmore:before {
right: 3.515625vw;
width: 2.2135416667vw;
height: 5.2083333333vw;
}
.review-btn-viewmore:hover {
color: #435b80;
}
.review-btn-viewmore:active {
color: #1767dc;
}
.review-branch {
bottom: 13.5416666667vw;
max-width: 94.53125vw;
}
.review-branch-item {
padding: 0 1.3020833333vw;
margin-top: 1.8229166667vw;
}
.review-branch-box {
height: 26.3020833333vw;
border-width: 0.2604166667vw;
border-radius: 2.6041666667vw;
}
.review-branch-btn {
bottom: 1.0416666667vw;
width: 26.8229166667vw;
height: 5.2083333333vw;
font-size: 2.1484375vw;
padding: 0 3.3854166667vw 0 1.0416666667vw;
border-width: 0.2604166667vw;
border-radius: 6.5104166667vw;
-webkit-box-shadow: 0 0.2604166667vw 1.0416666667vw 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0.2604166667vw 1.0416666667vw 0 rgba(0, 0, 0, 0.2);
}
.review-branch-btn:before {
right: 2.2135416667vw;
width: 1.171875vw;
height: 2.6041666667vw;
}
.review-branch-btn:hover {
color: #435b80;
}
.review-branch-btn:active {
color: #1767dc;
}
.review-branch .flickity-prev-next-button {
bottom: -8.3333333333vw;
width: 6.25vw;
height: 6.25vw;
-webkit-box-shadow: 0.2604166667vw 0.2604166667vw 0.5208333333vw 0 rgba(0, 0, 0, 0.15);
box-shadow: 0.2604166667vw 0.2604166667vw 0.5208333333vw 0 rgba(0, 0, 0, 0.15);
}
.review-branch .flickity-prev-next-button.previous {
left: 3.3854166667vw;
}
.review-branch .flickity-prev-next-button.next {
right: 3.3854166667vw;
}
.review-reward {
bottom: 9.1145833333vw;
height: 42.8385416667vw;
}
.review-reward .flickity-prev-next-button {
bottom: -6.3802083333vw;
width: 6.25vw;
height: 6.25vw;
padding: 0;
-webkit-box-shadow: 0.2604166667vw 0.2604166667vw 0.5208333333vw 0 rgba(0, 0, 0, 0.15);
box-shadow: 0.2604166667vw 0.2604166667vw 0.5208333333vw 0 rgba(0, 0, 0, 0.15);
}
.review-reward .flickity-prev-next-button.previous {
left: 2.8645833333vw;
}
.review-reward .flickity-prev-next-button.next {
right: 2.8645833333vw;
}
.review-reward-nav {
bottom: 2.6041666667vw;
max-width: 80.9895833333vw;
height: 6.5104166667vw;
}
.review-reward-nav-item {
padding: 0 1.8529166667vw;
}
.review-reward-nav-btn {
width: 16.5364583333vw;
height: 4.0364583333vw;
font-size: 2.2739583333vw;
line-height: 1.4;
letter-spacing: normal;
border-radius: 1.3020833333vw;
-webkit-box-shadow: 0.2604166667vw 0.2604166667vw 0.5208333333vw 0 rgba(0, 0, 0, 0.15);
box-shadow: 0.2604166667vw 0.2604166667vw 0.5208333333vw 0 rgba(0, 0, 0, 0.15);
}
.review-reward-nav-btn:hover {
opacity: 0.25;
}
.review-reward-nav-btn:active,
.review-reward-nav-item.is-nav-selected .review-reward-nav-btn {
opacity: 1;
}
}