.round-layout01 {
width: calc(715px + 28px);
height: 715px;
margin-right: -28px;
background-repeat: no-repeat;
position: relative; }
.round-layout01 .round-layout01__img-motion {
position: absolute;
top: 157px; }
.round-layout01 .round-layout01__img-motion img:first-child {
-webkit-animation: 40s linear 0s normal none infinite running rot;
animation: 40s linear 0s normal none infinite running rot;
position: relative;
z-index: 2; }
.round-layout01 .round-layout01__img-motion img:last-child {
position: absolute;
top: 0;
left: -17px;
z-index: 0; }
.round-layout01 .round-layout01__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 528px;
height: 528px;
background-color: #ffffff;
border: 35px solid #f1f3f5;
border-radius: 50%;
position: relative;
top: 100px;
left: 100px; }
.round-layout01 .round-layout01_center {
max-width: 250px;
margin-left: auto;
margin-right: auto;
text-align: center; }
.round-layout01 .round-layout01_center .tt-title {
padding: 0;
margin: 0;
color: #323232;
font-family: "Poppins", sans-serif;
font-size: 28px;
line-height: 38px;
padding: 0 0 15px 0;
font-weight: 600;
}
.round-layout01 .round-layout01_center .tt-title + * {
margin-top: 0; }
.round-layout01 .round-layout01_center:nth-child(1) {
margin-top: 0;
padding-bottom: 0; }
.round-layout01 .round-layout01_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
width: 208px;
height: 208px;
border-radius: 50%;
background-color: #ffffff;
border: 10px solid #f1f3f5;
position: absolute;
font-size: 20px;
line-height: 30px;
color: #323232;
font-family: "Poppins", sans-serif;
font-weight: 600;
-webkit-box-shadow: 7px 10px 20px rgba(141, 158, 168, 0.25);
box-shadow: 7px 10px 20px rgba(141, 158, 168, 0.25); }
.round-layout01 .round-layout01_item.item-absent {
background-color: #f1f3f5;
-webkit-box-shadow: none;
box-shadow: none; }
.round-layout01 .round-layout01_item.item-absent:before {
content: '';
width: 100%;
height: 100%;
border: 6px solid #6984c2;
border-radius: 50%;
position: absolute;
top: 0;
left: 0; }
.round-layout01 .round-layout01_item.item-absent:after {
content: '';
width: calc(100% - 4px);
height: 5px;
background-color: #6984c2;
display: block;
position: absolute;
top: calc(50% - 4px);
left: 4px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: 0px 5px 10px rgba(141, 158, 168, 0.75);
box-shadow: 0px 5px 10px rgba(141, 158, 168, 0.75); }
.round-layout01 .item-position-01 {
top: -118px;
right: 130px; }
.round-layout01 .item-position-02 {
top: 40px;
right: -96px; }
.round-layout01 .item-position-03 {
bottom: -69px;
right: -20px; }
.round-layout01 .item-position-04 {
bottom: -69px;
left: -20px; }
@media (max-width: 1229.98px) {
.round-layout01 {
margin-left: auto;
margin-right: auto;
width: 715px; } }
@media (max-width: 1024.98px) {
.round-layout01 {
width: 632px;
height: 630px;
background-size: cover;
background-position: center center; }
.round-layout01 .round-layout01__img-motion {
top: 147px;
left: 10px; 
display: grid;
}
.round-layout01 .round-layout01__img-motion img {
width: 90%; 
}
.round-layout01 .round-layout01__img-motion img:last-child {
display: none;
}
.round-layout01 .round-layout01__wrapper {
width: 445px;
height: 445px;
border-width: 30px; }
.round-layout01 .round-layout01_center .tt-title {
font-size: 24px;
line-height: 30px; }
.round-layout01 .round-layout01_item {
width: 176px;
height: 176px;
font-size: 17px;
line-height: 27px; }
.round-layout01 .item-position-01 {
top: -95px;
right: 107px; }
.round-layout01 .item-position-02 {
top: 36px;
right: -84px; }
.round-layout01 .item-position-03 {
bottom: -63px;
right: -20px; }
.round-layout01 .item-position-04 {
bottom: -63px;
left: -20px; } }
@media (max-width: 790px) {
.round-layout01 {
height: 610px; } }
@media (max-width: 660px) {
.round-layout01 {
width: 100%;
height: 457px;
background-size: cover;
background-position: center center; }
.round-layout01 .round-layout01__img-motion {
top: 147px;
left: 50%;
margin-left: -280px; }
.round-layout01 .round-layout01__img-motion img {
width: 67%; }
.round-layout01 .round-layout01__wrapper {
width: 331px;
height: 331px;
border-width: 22px;
margin-left: auto;
margin-right: auto;
top: 63px;
left: 0; }
.round-layout01 .round-layout01_center .tt-title {
font-size: 20px;
line-height: 30px;
padding-bottom: 10px; }
.round-layout01 .round-layout01_center .tt-title br {
display: none; }
.round-layout01 .round-layout01_item {
width: 130px;
height: 130px;
font-size: 16px;
line-height: 24px;
border-width: 6px;
-webkit-box-shadow: 4px 5px 15px rgba(141, 158, 168, 0.25);
box-shadow: 4px 5px 15px rgba(141, 158, 168, 0.25); }
.round-layout01 .round-layout01_item.item-absent {
background-color: #f1f3f5;
-webkit-box-shadow: none;
box-shadow: none; }
.round-layout01 .round-layout01_item.item-absent:before {
border-width: 3px; }
.round-layout01 .round-layout01_item.item-absent:after {
width: calc(100% - 2px);
height: 3px;
background-color: #6984c2;
display: block;
position: absolute;
top: calc(50% - 1px);
left: 2px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: 0px 5px 10px rgba(141, 158, 168, 0.75);
box-shadow: 0px 5px 10px rgba(141, 158, 168, 0.75); }
.round-layout01 .item-position-01 {
top: -55px;
right: 152px; }
.round-layout01 .item-position-02 {
top: -55px;
right: 2px; }
.round-layout01 .item-position-03 {
bottom: -52px;
right: 1px; }
.round-layout01 .item-position-04 {
bottom: -52px;
left: 5px; } }
@media (max-width: 380px) {
.round-layout01 .round-layout01__wrapper {
width: 320px;
height: 320px; } }
@media (max-width: 350px) {
.round-layout01 .round-layout01__wrapper {
left: -8.5%; } }
@keyframes rot {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-webkit-keyframes rot {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@media (min-width: 1230px) {
.tt-custom-width {
max-width: 370px; } }
@media (min-width: 1230px) {
.round-layout01__align {
margin-top: -34px; } }
.round-layout02 {
width: 714px;
height: 714px;
background-repeat: no-repeat;
position: relative; }
.round-layout02 .round-layout02__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 534px;
height: 534px;
background-color: #ffffff;
border-radius: 50%;
position: relative;
top: 86px;
left: 100px; }
.round-layout02 .round-layout02_center {
max-width: 290px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-bottom: 18px; }
.round-layout02 .round-layout02_center .tt-title {
padding: 0;
margin: 0;
color: #323232;
font-family: "Poppins", sans-serif;
font-size: 28px;
line-height: 38px;
padding: 0 0 15px 0; }
.round-layout02 .round-layout02_center .tt-title + * {
margin-top: 0; }
.round-layout02 .round-layout02_center:nth-child(1) {
margin-top: 0;
padding-bottom: 0; }
.round-layout02 .round-layout02_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
width: 208px;
height: 208px;
border-radius: 50%;
background-color: #ffffff;
border: 10px solid #f1f3f5;
position: absolute;
padding-left: 5px;
padding-right: 5px;
-webkit-box-shadow: 7px 10px 20px rgba(141, 158, 168, 0.25);
box-shadow: 7px 10px 20px rgba(141, 158, 168, 0.25); }
.round-layout02 .round-layout02_item .tt-icon {
font-size: 51px;
color: #6984c2;
margin-top: 4px; }
.round-layout02 .round-layout02_item .tt-title {
font-size: 16px;
line-height: 24px;
color: #323232;
font-family: "Poppins", sans-serif;
font-weight: 600;
margin-top: 14px;
width: 100%; }
.round-layout02 .round-layout02_item.item-select {
background-color: #f1f3f5;
border: 10px solid #ffffff;
-webkit-box-shadow: none;
box-shadow: none; }
.round-layout02 .round-layout02_item.item-absent {
background-color: #ffffff !important;
-webkit-box-shadow: none;
box-shadow: none; }
.round-layout02 .round-layout02_item.item-absent:before {
content: '';
width: 100%;
height: 100%;
border: 6px solid #6984c2;
border-radius: 50%;
position: absolute;
top: 0;
left: 0; }
.round-layout02 .round-layout02_item.item-absent:after {
content: '';
width: calc(100% - 4px);
height: 5px;
background-color: #6984c2;
display: block;
position: absolute;
top: calc(50% - 4px);
left: 4px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: 0px 5px 10px rgba(141, 158, 168, 0.75);
box-shadow: 0px 5px 10px rgba(141, 158, 168, 0.75); }
.round-layout02 .item-position-01 {
top: -85px;
left: 165px; }
.round-layout02 .item-position-02 {
top: 35px;
right: -66px; }
.round-layout02 .item-position-03 {
top: 287px;
right: -67px; }
.round-layout02 .item-position-04 {
bottom: -75px;
left: 170px; }
.round-layout02 .item-position-05 {
top: 287px;
left: -57px; }
.round-layout02 .item-position-06 {
top: 35px;
left: -57px; }
@media (max-width: 1229.98px) {
.round-layout02 {
margin-left: auto;
margin-right: auto;
width: 715px; } }
@media (max-width: 1024.98px) {
.round-layout02 {
width: 632px;
height: 632px;
background-size: cover;
background-position: center center; }
.round-layout02 .round-layout02__wrapper {
width: 445px;
height: 445px;
border-width: 30px; }
.round-layout02 .round-layout02_center .tt-title {
font-size: 22px;
line-height: 28px; }
.round-layout02 .round-layout02_item {
width: 176px;
height: 176px; }
.round-layout02 .round-layout02_item .tt-icon {
font-size: 35px;
margin-top: -7px; }
.round-layout02 .round-layout02_item .tt-title {
font-size: 16px;
line-height: 22px;
margin-top: 7px;
padding-bottom: 10px; }
.round-layout02 .item-position-01 {
top: -85px;
left: 145px; }
.round-layout02 .item-position-02 {
top: 15px;
right: -67px; }
.round-layout02 .item-position-03 {
top: 237px;
right: -67px; }
.round-layout02 .item-position-04 {
bottom: -75px;
left: 150px; }
.round-layout02 .item-position-05 {
top: 237px;
left: -67px; }
.round-layout02 .item-position-06 {
top: 15px;
left: -67px; } }
@media (max-width: 660px) {
.round-layout02 {
width: 320px;
height: 506px;
background-size: cover;
background-position: center center; }
.round-layout02 .round-layout02__wrapper {
width: 282px;
height: 282px;
border-width: 22px;
margin-left: auto;
margin-right: auto;
top: 81px;
left: 0; }
.round-layout02 .round-layout02_center {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
max-width: 225px; }
.round-layout02 .round-layout02_center .tt-title {
font-size: 20px;
line-height: 30px;
padding-bottom: 3px; }
.round-layout02 .round-layout02_item {
width: 128px;
height: 128px;
font-size: 16px;
line-height: 24px;
border-width: 6px;
padding-left: 10px;
padding-right: 10px;
-webkit-box-shadow: 4px 5px 15px rgba(141, 158, 168, 0.25);
box-shadow: 4px 5px 15px rgba(141, 158, 168, 0.25);
border-width: 7px; }
.round-layout02 .round-layout02_item.item-select {
border-width: 7px; }
.round-layout02 .round-layout02_item.item-absent {
background-color: #f1f3f5;
-webkit-box-shadow: none;
box-shadow: none; }
.round-layout02 .round-layout02_item.item-absent:before {
border-width: 4px; }
.round-layout02 .round-layout02_item.item-absent:after {
width: calc(100% - 2px);
height: 3px;
background-color: #6984c2;
display: block;
position: absolute;
top: calc(50% - 1px);
left: 2px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: 0px 5px 10px rgba(141, 158, 168, 0.75);
box-shadow: 0px 5px 10px rgba(141, 158, 168, 0.75); }
.round-layout02 .round-layout02_item .tt-icon {
font-size: 28px;
margin-top: 0px; }
.round-layout02 .round-layout02_item .tt-title {
font-size: 14px;
line-height: 19px;
margin-top: 3px;
padding-bottom: 8px; }
.round-layout02 .item-position-01 {
top: -77px;
left: 80px; }
.round-layout02 .item-position-02 {
top: -3px;
right: -42px; }
.round-layout02 .item-position-03 {
top: 155px;
right: -43px; }
.round-layout02 .item-position-04 {
bottom: -83px;
left: 79px; }
.round-layout02 .item-position-05 {
top: 155px;
left: -42px; }
.round-layout02 .item-position-06 {
top: -3px;
left: -42px; } }
@media (max-width: 575.98px) {
.round-layout02 {
height: 506px; } }
@keyframes rot {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-webkit-keyframes rot {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }