﻿

.index01{ width: 100%; height: auto; overflow: hidden; padding: 5rem 0; padding-bottom: 10rem; background: #f5f5f5;}
.index01 .box ul{ -webkit-align-items: stretch; align-items: stretch;}
.index01 .box ul li{position: relative; width: 16%; padding:6rem 2rem; background: #fff; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start;}
.index01 .box ul li span{ display: block; width: 6rem; height: 6rem; background-repeat: no-repeat; background-size: 100%;}
.index01 .box ul li span.icon_service01{ background-image: url(../images/icon_service01.png);}
.index01 .box ul li span.icon_service02{ background-image: url(../images/icon_service02.png);}
.index01 .box ul li span.icon_service03{ background-image: url(../images/icon_service03.png);}
.index01 .box ul li span.icon_service04{ background-image: url(../images/icon_service04.png);}
.index01 .box ul li span.icon_service05{ background-image: url(../images/icon_service05.png);}
.index01 .box ul li span.icon_service06{ background-image: url(../images/icon_service06.png);}
.index01 .box ul li h3{ padding: 3rem 0; font-size: 2.4rem; font-weight: normal;}
.index01 .box ul li p{ font-size: 1.4rem; color: #666; text-align: center;}
.index01 .box ul li a{position: absolute; bottom: -2.5rem; display: block; width: 15rem; height: 5rem; line-height: 5rem; border-radius: 5rem; background: #005aff; font-size: 1.4rem; color: #fff; text-align: center;}
@media (max-width:1199px){
    .index01{ padding-bottom: 5rem;}
    .index01 .box ul{ -webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .index01 .box ul li{ width: 32%; margin-bottom: 5rem;}
}
@media (max-width:767px){
    .index01 .box ul li{ width:49%;}
}
.index02{ width: 100%; height: auto; overflow: hidden; padding: 5rem 0;}

.index02 .box{ -webkit-align-items: stretch; align-items: stretch;}
.index02 .lbox{ position: relative; width: 50%; overflow: hidden; background: url(../images/about.jpg) no-repeat center; background-size: cover;}
.index02 .lbox span{ position: absolute; right: 0; top: 10%; display: block; width: 15rem; height: 5rem; line-height: 5rem; text-align: center; background: #005aff; color: #fff;}
.index02 .rbox{ width: 50%; background: url(../images/aboutbg.jpg) no-repeat center; background-size: cover; padding: 3rem;}
.index02 .rbox p{ font-size: 1.6rem; line-height: 2; padding: 1rem 0;}
@media (max-width:1199px){
    .index02 .box{ -webkit-flex-wrap: wrap;flex-wrap: wrap;}
    .index02 .lbox{ padding-bottom: 60%;}
    .index02 .lbox,.index02 .rbox{ width: 100%;}
}
.index03{  width: 100%; height: auto; overflow: hidden; padding: 0;}
.index03 .box{ -webkit-align-items: stretch; align-items: stretch;}
.index03 .lbox{ width: 49%;}
.index03 .lbox a{ display: block; position: relative; height: 100%;}
.index03 .lbox .imgbox{ position: relative; width: 100%; height: 100%;}
.index03 .lbox .imgbox img{position:absolute;display:block;width:100%;height:100%;object-fit:cover}
.index03 .lbox p{ position: absolute; bottom: 0; left: 0; width: 100%; height: 6rem; line-height: 6rem; padding:0 1rem; color: #fff; background: rgba(0,0,0,.5); 
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.index03 .lbox a:hover p{ background: #005aff;}
.index03 .rbox{ width: 49%;}
.index03 .rbox ul{ height: 100%; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content:space-between; align-content:space-between;}
.index03 .rbox ul li{ width: calc(50% - 1rem); height:calc(50% - 1rem); background: #f5f5f5; padding: 1.5rem;}
.index03 .rbox ul li div.flex{ -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start;}
.index03 .rbox ul li b{ font-size: 2.4rem; color: #005aff; font-weight: normal;}
.index03 .rbox ul li small{ font-size: 1.2rem; color: #333;}
.index03 .rbox ul li .btn{ width: 100%;}
.index03 .rbox ul li span{ display: block; float: right; margin-top: 1rem; width: 3rem; height: 3rem; line-height: 3rem; border-radius: 50%; background: #aaa; color: #fff; font-size: 1.6rem; text-align: center;}
.index03 .rbox ul li h3{
    margin: 1.5rem 0;
    font-size: 1.6rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.index03 .rbox ul li p{
    font-size: 1.4rem;
    color: #666;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.index03 .rbox ul li:hover h3{ color: #005aff;}
.index03 .rbox ul li:hover span{ background: #005aff;}
@media (max-width:1199px){
    .index03 .box{ -webkit-flex-wrap: wrap;flex-wrap: wrap;}
    .index03 .lbox{ width: 100%; margin-bottom: 3rem;}
    .index03 .lbox .imgbox{ padding-bottom: 60%;}
    .index03 .rbox{ width: 100%;}
}
@media (max-width:480px){
    .index03 .rbox ul li{ width: 100%; height: auto; margin-bottom: 1rem;}
}
.index04{ width: 100%; height: auto; overflow: hidden; padding: 5rem 0; padding-bottom: 10rem;}
.index04 ul{ -webkit-align-items: stretch; align-items: stretch;}
.index04 ul li{ width: 25%; padding:5rem 3rem; background: #f5f5f5; -webkit-flex-direction: column; flex-direction: column; justify-content: flex-start;}
.index04 ul li:nth-child(2n){ background: #eee;}
.index04 ul li h3{ font-size: 2.4rem; padding: 3rem 0;}
.index04 ul li p{ text-align: center; padding-bottom: 3rem;}
.index04 ul li b{ display: block; width: 5rem; height: 5rem; line-height: 5rem; border-radius: 50%; text-align: center; background: #005aff; color: #fff;}
.index04 ul li span{ display: block; width: 10rem; height: 10rem; background-repeat: no-repeat; background-size: contain;}
.index04 ul li span.icon_a01{ background-image: url(../images/icon_a01.png);}
.index04 ul li span.icon_a02{ background-image: url(../images/icon_a02.png);}
.index04 ul li span.icon_a03{ background-image: url(../images/icon_a03.png);}
.index04 ul li span.icon_a04{ background-image: url(../images/icon_a04.png);}
@media (max-width:1199px){
    .index04 ul{ -webkit-flex-wrap: wrap;flex-wrap: wrap;}
    .index04 ul li{ width: calc(50% - 1px); margin-bottom: 2px;}
}