.section-all-service {
position: relative;
width: 100%;
max-width: 1920px;
margin: 0 auto;
padding: 90px 0 0;
background-color: #fff;
}
.section-all-service .container {
position: relative;
z-index: 2;
}
.section-all-service-title {
font-family: "kanitregular", sans-serif !important;
font-size: 45px;
color: #435b9a;
text-align: center;
line-height: 1.35;
margin: 0;
}
.section-all-service-title br.m {
display: none;
}
.all-service-list {
display: flex;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
max-width: 973px;
height: 500px;
padding: 52px 0 0;
margin: 0 auto;
overflow: hidden;
}
.all-service-list.flickity-enabled {
display: block;
overflow: unset;
}
.all-service-item {
padding: 0 7px;
}
.all-service-item-wrapper {
width: 310px;
overflow: hidden;
border-radius: 15px;
border: 4px solid #fff;
-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
}
.all-service-img {
width: 100%;
height: 250px;
}
.all-service-img img {
width: 100%;
height: auto;
}
.all-service-detail {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
margin-top: -14px;
padding: 16px 10px 16px;
border-radius: 15px;
z-index: 2;
background: rgb(236, 239, 247);
background: linear-gradient(0deg, rgb(236, 239, 247) 35%, rgb(255, 255, 255) 100%);
}
.all-service-headline {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.all-service-subtext {
font-family: "kanitregular", sans-serif;
font-size: 16px;
color: #435ba2;
line-height: 1;
}
.all-service-title {
font-family: "kanitregular", sans-serif !important;
font-size: 32px;
color: #435ba2;
line-height: 1;
}
.all-service-btn-wrapper {
display: flex;
justify-content: center;
margin-top: 10px;
}
.all-service-btn {
font-family: "kanitregular", sans-serif;
font-size: 19px;
color: #435b99;
line-height: 1.4;
text-align: center;
padding: 7px 44px;
border-radius: 50px;
background-color: #fff;
box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.08);
transition: all 0.25s ease;
}
.all-service-btn:hover {
color: #fff;
background-color: #435b99;
}
.all-service-list .flickity-button {
background: #fff;
color: #435ba2;
transition: all 0.25s ease;
}
.all-service-list .flickity-button:hover {
color: #fff;
background: #435b99;
}
.all-service-list .flickity-prev-next-button {
width: 52px;
height: 52px;
border-radius: 100%;
-webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.07);
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.07);
}
.all-service-list .flickity-prev-next-button:focus {
outline: 0;
box-shadow: none;
}
.all-service-list .flickity-prev-next-button.previous {
left: -63px;
}
.all-service-list .flickity-prev-next-button.next {
right: -63px;
}
.all-service-list .flickity-prev-next-button .flickity-button-icon {
position: absolute;
left: 25%;
top: 25%;
width: 50%;
height: 50%;
}
@media (max-width: 1919px) {
.section-all-service {
padding: 4.6875vw 0 0;
}
.section-all-service:before {
height: 34.375vw;
border-radius: 0 8.2291666667vw 0 0;
}
.section-all-service-title {
font-size: 2.34375vw;
}
.all-service-list {
max-width: 50.6770833333vw;
height: 26.0416666667vw;
padding: 2.7083333333vw 0 0;
}
.all-service-item {
padding: 0 0.3645833333vw;
}
.all-service-item-wrapper {
width: 16.1458333333vw;
border-radius: 0.78125vw;
border: 0.2083333333vw solid #fff;
-webkit-box-shadow: 0 0 0.4166666667vw 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0.4166666667vw 0 rgba(0, 0, 0, 0.3);
}
.all-service-img {
height: 13.0208333333vw;
}
.all-service-detail {
margin-top: -0.7291666667vw;
padding: 0.8333333333vw 0.5208333333vw 0.8333333333vw;
border-radius: 0.78125vw;
}
.all-service-subtext {
font-size: 0.8333333333vw;
}
.all-service-title {
font-size: 1.6666666667vw;
}
.all-service-btn-wrapper {
margin-top: 0.5208333333vw;
}
.all-service-btn {
font-size: 0.9895833333vw;
padding: 0.3645833333vw 2.2916666667vw;
border-radius: 2.6041666667vw;
}
.all-service-list .flickity-prev-next-button {
width: 2.7083333333vw;
height: 2.7083333333vw;
-webkit-box-shadow: 0 0 0.5208333333vw 0.2604166667vw rgba(0, 0, 0, 0.07);
box-shadow: 0 0 0.5208333333vw 0.2604166667vw rgba(0, 0, 0, 0.07);
}
.all-service-list .flickity-prev-next-button.previous {
left: -3.28125vw;
}
.all-service-list .flickity-prev-next-button.next {
right: -3.28125vw;
}
}
@media (max-width: 768px) {
.section-all-service {
max-width: 100%;
margin: 10.4166666667vw auto 0;
padding: 11.71875vw 0 0;
}
.section-all-service:before {
display: none;
}
.section-all-service-title {
font-size: 6.1197916667vw;
}
.section-all-service-title br.d {
display: none;
}
.section-all-service-title br.m {
display: block;
}
.all-service-list {
width: 100%;
max-width: 92.578125vw;
height: 53.125vw;
padding: 5.2083333333vw 0 0;
}
.all-service-item {
padding: 1.8229166667vw 0.5859375vw;
}
.all-service-item-wrapper {
width: 29.6875vw;
border-radius: 1.953125vw;
border: 0.5208333333vw solid #fff;
-webkit-box-shadow: 0 0 1.0416666667vw 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1.0416666667vw 0 rgba(0, 0, 0, 0.3);
}
.all-service-img {
width: 100%;
height: 23.6979166667vw;
}
.all-service-detail {
margin-top: -1.953125vw;
padding: 2.34375vw 0.78125vw 2.34375vw;
border-radius: 1.953125vw;
}
.all-service-subtext {
font-size: 1.5625vw;
}
.all-service-title {
font-size: 2.9947916667vw;
}
.all-service-btn-wrapper {
display: flex;
justify-content: center;
margin-top: 1.0416666667vw;
}
.all-service-btn {
font-size: 2.4739583333vw;
padding: 0.78125vw 4.9479166667vw;
border-radius: 6.5104166667vw;
}
.all-service-btn:hover {
color: #435b99;
background-color: #fff;
}
.all-service-btn:active {
color: #fff;
background-color: #435b99;
}
.all-service-list .flickity-button:hover {
color: #435ba2;
background: #fff;
}
.all-service-list .flickity-button:active {
color: #fff;
background: #435b99;
}
.all-service-list .flickity-prev-next-button {
width: 6.7708333333vw;
height: 6.7708333333vw;
-webkit-box-shadow: 0 0 1.3020833333vw 0.6510416667vw rgba(0, 0, 0, 0.07);
box-shadow: 0 0 1.3020833333vw 0.6510416667vw rgba(0, 0, 0, 0.07);
}
.all-service-list .flickity-prev-next-button.previous {
left: -2.0833333333vw;
}
.all-service-list .flickity-prev-next-button.next {
right: -2.0833333333vw;
}
}