@font-face {
font-family: 'Gotham';
src: url(//vsquare.clinic/wp-content/themes/plant/fonts/review/Gotham-Medium.eot);
src: url(//vsquare.clinic/wp-content/themes/plant/fonts/review/Gotham-Medium.eot?#iefix) format('embedded-opentype'),
url(//vsquare.clinic/wp-content/themes/plant/fonts/review/Gotham-Medium.woff2) format('woff2'),
url(//vsquare.clinic/wp-content/themes/plant/fonts/review/Gotham-Medium.woff) format('woff'),
url(//vsquare.clinic/wp-content/themes/plant/fonts/review/Gotham-Medium.ttf) format('truetype'),
url(//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;
display: flex;
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(//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-content {
position: absolute;
bottom: 76px;
left: 50%;
width: 100%;
max-width: 852px;
transform: translateX(-50%);
}
.review-branch {
width: 100%;
height: 500px;
}
.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-img img {
width: 100%;
height: auto;
}
.review-branch-btn {
position: absolute;
bottom: 10px;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 226px;
height: auto;
font-family: 'kanitregular';
font-size: 16px;
color: #435B80;
text-align: left;
line-height: 1.2;
padding: 8px 30px 9px 13px;
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: 10px;
height: 18px;
background-image: url(//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-content {
position: absolute;
bottom: 43px;
left: 50%;
width: 100%;
z-index: 2;
transform: translateX(-50%);
}
.review-reward {
width: 100%;
height: 329px;
margin: 0 auto;
}
.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: -99px;
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 {
width: 100%;
max-width: 830px;
height: 50px;
margin: 50px auto 0;
}
.review-reward-nav-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 8px;
}
.review-reward-nav-btn {
display: flex;
justify-content: center;
align-items: center;
width: 122px;
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-content {
bottom: 6.3333333333vw;
max-width: 71vw;
}
.review-branch {
height: 41.66666666666667vw;
}
.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;
font-size: 1.3333333333333335vw;
padding: 0.8333333333333334vw 2.4166666667vw 0.9166666666666666vw 0.5vw;
padding: 0.6666666666666667vw 2.5vw 0.75vw 1.0833333333333335vw;
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: 0.8333333333333334vw;
height: 1.5vw;
}
.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-content {
bottom: 3.5833333333333335vw;
}
.review-reward {
height: 27.4166666667vw;
}
.review-reward .flickity-prev-next-button {
bottom: -8.25vw;
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 {
max-width: 69.16666666666667vw;
height: 4.1666666667vw;
margin: 4.166666666666666vw auto 0;
}
.review-reward-nav-item {
padding: 0 0.6666666666666667;
}
.review-reward-nav-btn {
width: 10.166666666666666vw;
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-content {
bottom: 11.979166666666668vw;
max-width: 94.53125vw;
}
.review-branch {
height: 57.942708333333336vw;
}
.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;
font-size: 1.8229166666666667vw;
padding: 1.0416666666666665vw 3.6458333333333335vw 1.171875vw 1.8229166666666667vw;
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: 1.953125vw;
width: 0.9114583333333334vw;
height: 2.083333333333333vw;
}
.review-branch-btn:hover {
color: #435b80;
}
.review-branch-btn:active {
color: #1767dc;
}
.review-branch .flickity-prev-next-button {
bottom: -6.333333vw;
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-content {
bottom: 0;
}
.review-reward {
height: 42.8385416667vw;
}
.review-reward .flickity-prev-next-button {
bottom: -6.25vw;
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;
margin: 2.604166666666667vw auto 0;
}
.review-reward-nav-item {
padding: 0 1.6529166667vw;
}
.review-reward-nav-btn {
width: 16.9364583333vw;
height: 4.0364583333vw;
font-size: 2.2739583333vw;
line-height: 1.4;
letter-spacing: normal;
padding-top: 0.26041666666666663vw;
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;
}
}