.front-page__circle {
padding: 10rem 0 18rem;
background-color: #c4dfd3;
position: relative;
margin-top: 23rem;
}
@media (max-width: 992px) {
.front-page__circle {
padding: 10rem 0 2rem;
}
}
@media (max-width: 568px) {
.front-page__circle {
margin-top: 5rem;
padding: 3rem 0 1rem;
}
}
.front-page__circle .separator_top {
position: absolute;
top: -238px;
height: 238px;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center bottom;
object-position: center bottom;
left: 0px;
z-index: -1;
}
@media screen and (min-width: 1920px) {
.front-page__circle .separator_top {
width: 100%;
-o-object-fit: initial;
object-fit: initial;
}
}
.front-page__circle .front-page__section-title {
text-align: center;
margin-bottom: 7.5rem;
position: relative;
z-index: 20;
margin-top: -24rem;
}
@media (max-width: 1400px) {
.front-page__circle .front-page__section-title {
margin-top: -15rem;
}
}
@media (max-width: 1080px) {
.front-page__circle .front-page__section-title {
margin-top: 0rem;
}
}
.front-page__circle .front-page__section-title h2 {
text-transform: uppercase;
}
.front-page__circle .front-page__circle-wheel {
position: relative;
}
@media screen and (min-width: 992px) {
.front-page__circle .front-page__circle-wheel .front-page__circle-center {
position: absolute;
top: 65%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
@media (max-width: 992px) {
.front-page__circle .front-page__circle-wheel .front-page__circle-center {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
}
.front-page__circle .front-page__circle-wheel .image {
position: relative;
z-index: 15;
}
.front-page__circle .front-page__circle-wheel .circle_icon {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
max-width: 800px;
}
@media (max-width: 992px) {
.front-page__circle .front-page__circle-wheel .circle_icon {
max-width: 100%;
}
}
.front-page__circle .front-page__circle-wheel .circle_bg {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 800px;
}
@media (max-width: 992px) {
.front-page__circle .front-page__circle-wheel .circle_bg {
max-width: 100%;
}
}
.front-page__circle .front-page__circle-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50rem;
row-gap: 3rem;
max-width: 1190px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 20;
}
@media (max-width: 992px) {
.front-page__circle .front-page__circle-list {
gap: 10rem;
row-gap: 1rem;
}
}
@media (max-width: 568px) {
.front-page__circle .front-page__circle-list {
gap: 1rem;
}
}
.front-page__circle .front-page__circle-list .front-page__circle-item {
display: grid;
grid-template-columns: 1fr 77px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
max-width: 350px;
gap: 15px;
}
@media (max-width: 992px) {
.front-page__circle .front-page__circle-list .front-page__circle-item {
grid-template-columns: 77px 1fr;
max-width: 100%;
}
}
@media (max-width: 568px) {
.front-page__circle .front-page__circle-list .front-page__circle-item {
grid-template-columns: 40px 1fr;
margin-bottom: 1rem;
gap: 5px;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
}
@media screen and (min-width: 992px) {
.front-page__circle .front-page__circle-list .front-page__circle-item:nth-child(odd) {
text-align: right;
}
.front-page__circle .front-page__circle-list .front-page__circle-item:nth-child(even) {
text-align: left;
grid-template-columns: 77px 1fr;
}
.front-page__circle .front-page__circle-list .front-page__circle-item:nth-child(even) .front-page__circle-text {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
.front-page__circle .front-page__circle-list .front-page__circle-item:nth-child(even) .front-page__circle-icon {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.front-page__circle .front-page__circle-list .front-page__circle-item:nth-child(1) {
-webkit-transform: translateX(90px);
-ms-transform: translateX(90px);
transform: translateX(90px);
}
.front-page__circle .front-page__circle-list .front-page__circle-item:nth-child(2) {
-webkit-transform: translateX(-90px);
-ms-transform: translateX(-90px);
transform: translateX(-90px);
}
.front-page__circle .front-page__circle-list .front-page__circle-item:nth-child(3) {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
.front-page__circle .front-page__circle-list .front-page__circle-item:nth-child(4) {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
.front-page__circle .front-page__circle-list .front-page__circle-item:nth-child(5) {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
.front-page__circle .front-page__circle-list .front-page__circle-item:nth-child(6) {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
.front-page__circle .front-page__circle-list .front-page__circle-item:nth-child(7) {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
.front-page__circle .front-page__circle-list .front-page__circle-item:nth-child(8) {
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
}
@media (max-width: 992px) {
.front-page__circle .front-page__circle-list .front-page__circle-item .front-page__circle-text {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
}
@media (max-width: 992px) and (max-width: 992px) {
.front-page__circle .front-page__circle-list .front-page__circle-item .front-page__circle-icon {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
}
.front-page__circle .front-page__circle-list .front-page__circle-item p {
margin-top: 0px;
margin-bottom: 0px;
font-size: 16px;
}
@media (max-width: 568px) {
.front-page__circle .front-page__circle-list .front-page__circle-item p {
font-size: 14px;
margin-top: 10px;
}
}
@-webkit-keyframes circle-icon-zoom {
from {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
50% {
-webkit-transform: translate(-50%, -50%) scale(1.04);
transform: translate(-50%, -50%) scale(1.04);
}
to {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes circle-icon-zoom {
from {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
50% {
-webkit-transform: translate(-50%, -50%) scale(1.04);
transform: translate(-50%, -50%) scale(1.04);
}
to {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}