/* banner */
.banner-title{
    width: 100%;
    height: 18.57142857rem;
    background: url(../img/service/banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.banner-title b{
    font-size: 1.71428571rem;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 0px 3px 9px #212121;
    margin-top: 7.28571429rem;
}
.banner-title p{
    font-size: .78571429rem;
    /* font-family: Arial; */
    font-weight: 400;
    color: #FFFFFF;
    /* margin-top: .35714286rem; */
    
}
/* step */

/* step-one */
.step-one .step-title{
    margin: 2.5rem 0 2.75rem 0;
    align-items: center;
    display: flex;
    flex-direction: column;

}
.step-one .step-title div{
    font-size: 1.28571429rem;
    color: #333333;
}
.step-one .step-title p{
    font-size: .78571429rem;
    color: #666666;
    margin-top: .35714286rem;
}
.step-one .step-content{
    width: 100%;
    height: 60.10714286rem;
    background: #434A5C;
    padding-top: 1.42857143rem;
}
.step-one .step-content .step-content1{
    height: 19.07142857rem;
    border: 1px solid #666666;
    border-radius: .14285714rem;
    margin: 1.42857143rem 9.07142857rem 0 8.21428571rem;
    display: flex;
}
.step-one .step-content1 .photo1{
    padding: .75rem 0 .71428571rem 1.82142857rem;
    width: 21.39285714rem;
    height: 17.60714286rem;
}
.step-one .step-content1 .photo2{
    padding: 6.32142857rem 0 5.03571429rem 9.17857143rem;
}
.step-one  .step-content2{
    height: 17.67857143rem;
    border: 1px solid #666666;
    border-radius: .14285714rem;
    margin: 1.42857143rem 9.07142857rem 0 8.21428571rem;
    display: flex;
}
.step-one .step-content2 .photo1{
    width: 22.25rem;
    height: 15.57142857rem;
    padding: 1.21428571rem 0 .89285714rem 1.89285714rem;
}
.step-one .step-content2 .photo2{
    padding: 5rem 0 4.89285714rem 7.64285714rem;
}
.step-one .step-content3{
    height: 16.03571429rem;
    border: 1px solid #666666;
    border-radius: .14285714rem;
    margin: 1.42857143rem 9.07142857rem 0 8.21428571rem;
    display: flex;

}
.step-one .step-content3 .photo1{
    padding: 1.21428571rem 0 .78571429rem 1.14285714rem;
    width: 23.75rem;
    height: 13.67857143rem;
}
.step-one .step-content3 .photo2{
    padding: 2.67857143rem 0 1.17857143rem 5rem;
}
.step-one img{
    width: 100%;
    height: auto;
}
/* step-two */
.step-two{
    margin-bottom: 2.14285714rem;
}
.step-two .step-title{
    font-size: 1.28571429rem;
    color: #333333;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 2.57142857rem 0 2.64285714rem 0;
}
.step-two .step-content{
    padding: 0 9.07142857rem 0 9.25rem;
    display: flex;
} 
.step-two .step-con-left{
    overflow: hidden;
    border: 8px solid #4e5669;
}
.step-two .step-con-left img:hover{
    transform: scale(1.05);
}
.step-two  .step-con-left img{
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: all 0.5s ease-out;
}
.step-two  .step-con-right{
    margin-left: 2.21428571rem;
}
.step-two .right-main{
    display: flex;
}
.step-two .r-main-circle{
    width: 4rem;
    height: 4rem;
    background: rgba(58, 65, 82, 0.25);
    border-radius: 50%;
}
.step-two .right-main2,.step-two .right-main3{
    margin-top: 1rem;
}
.step-two  .r-main-circle .r-m-circle{
    width: 3.57142857rem;
    height: 3.57142857rem;
    background: #4E5669;
    border-radius: 50%;
    margin: .21428571rem .2rem .17857143rem;
}
.step-two  .r-m-circle span{
    font-size: .57142857rem;
    font-family: Source Han Sans CN;
    color: #FFFFFF;
    display: block;
}
.step-two  .r-m-circle1 span{
    padding: 1.39285714rem .28571429rem 1.42857143rem;
}
.step-two  .r-m-circle2 span{
    padding: 1rem .64285714rem .92857143rem;
    text-align: center;
}
.step-two  .r-m-circle3 span{
    padding: 1rem .64285714rem 1.07142857rem;
    text-align: center;
}
.step-two .r-main-triangle{
    width: 0;
    height: 0;
    border-top: .48214286rem solid transparent;
    border-right: .42857143rem solid #4E5669;
    border-bottom: .42857143rem solid transparent;
    margin: 1.5rem 0 1.46428571rem .60714286rem;
}
.step-two .oblong{
    width: 15.14285714rem;
    height: 3.92857143rem;
    background: rgba(58, 65, 82, 0);
    border: 2px solid #4E5669;
    border-radius: .21428571rem;
}
.step-two .oblong p{
    font-size: .57142857rem;
    font-family: Source Han Sans CN;
    color: #333333;
    line-height: 1.28571429rem;
}
.step-two .oblong1 p{
    padding: .67857143rem 1.75rem .67857143rem .78571429rem;
}
.step-two .oblong2 p{
    padding: .67857143rem .64285714rem .67857143rem .78571429rem;
}
.step-two .oblong3 p{
    padding: 1.32142857rem 0 1.32142857rem .78571429rem;
}
/* step-three */
.step-three{
    margin-bottom: 2.85714286rem;
}
.step-three .step-title{
    font-size: 1.28571429rem;
    color: #333333;
    margin-bottom: 2.64285714rem;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.step-three .step-content{
    display: flex;
    padding: 0 9.28571429rem;
    justify-content: space-between;
}
.step-three .step-con{
    width: 23.82142857rem;
    height: 13.5rem;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px 0px rgba(145, 149, 177, 0.48);
}
.step-three .step-con div{
    overflow: hidden;
}
.step-three .step-con:hover img{
    transform: scale(1.05);
}
.step-three .step-con img{
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: all 0.5s ease-out;
}
.step-three .step-con p{
    height: 2.35714286rem;
    font-size: .75rem;
    color: #333333;
    text-align: center;
    padding: .57142857rem 0;
}
/* step-four */
.step-four{
    width: 100%;
    height: 24.17857143rem;
    background: #F0F0F0;
}
.step-four .step-title{
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: 2.53571429rem;
}
.step-four .step-title div{
    font-size: 1.28571429rem;
    color: #333333;
}
.step-four .step-title p{
    font-size: .78571429rem;
    /* font-family: Source Han Sans CN; */
    color: #666666;
    margin-top: .35714286rem;
    padding-bottom: 2.67857143rem;

}
.step-four .step-content{
    display: flex;
    justify-content: space-between;
    padding: 0 9.28571429rem;
}
.step-four .step-content div{
    width: 11.10714286rem;
    height: 12.96428571rem;
    overflow: hidden;
}
.step-four .step-content img:hover{
    transform: scale(1.05);
}
.step-four .step-content img{
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: all 0.5s ease-out;
}
/* step-five */
.step-five .step-title{
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: 2.53571429rem;
}
.step-five .step-title div{
    font-size: 1.28571429rem;
    color: #333333;
}
.step-five .step-title p{
    font-size: .78571429rem;
    /* font-family: Source Han Sans CN; */
    color: #666666;
    margin-top: .35714286rem;
    margin-bottom: 2.71428571rem;
}
.step-five .step-content{
    display: flex;
    justify-content: space-between;
    padding: 0 9.28571429rem;
    margin-bottom: 2.85714286rem;
}
.step-five .step-content img{
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: all 0.5s ease-out;
}
.step-five .step-content div{
    width: 23.78571429rem;
    height: 11.57142857rem;
    overflow: hidden;
}
.step-five .step-content img:hover{
    transform: scale(1.05);
}
@media only screen and (max-width:1919px){
    .step-two .step-content {
        padding: 0 4rem;
    }
    .step-three .step-content {
        padding: 0 4.285714rem;
    }
    .step-four .step-content {
        padding: 0 4.4rem;
    }
    .step-five .step-content {
        padding: 0 4.4rem;
    }
}
@media only screen and (max-width:1680px){
    .step-one .step-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .step-one .step-content1,.step-one .step-content2,.step-one .step-content3{
        width: 41.571429rem;
        margin: 1.42857143rem 0 0 0 !important;
    }
    .step-one .step-content1 .photo2 {
        padding: 6.321429rem 0 0.035714rem 2.178571rem;
    }
    .step-one .step-content2 .photo2 {
        padding: 6rem 1rem 4.892857rem 1.642857rem;
    }
    .step-one .step-content3 .photo2 {
        padding: 2.678571rem 1rem 1.178571rem 3rem;
    }
    .step-two .step-content {
        padding: 0 7.4rem;
        display: flex;
        align-items: center;
    }
    .step-three .step-con {
        width: 19.821429rem;
        height: 11.5rem;
    }
    .step-three .step-content {
        padding: 0 7.4rem;
    }
    .step-four .step-content {
        padding: 0 7.4rem;
    }
    .step-four .step-content div {
        width: 10rem;
        height: 11.6rem;
    }
    .step-five .step-content {
        padding: 0 7.4rem;
    }
    .step-five .step-content div {
        width: 19.785714rem;
        height: 9.571429rem;
    }
}
@media only screen and (max-width:1600px){
    .step-one .step-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .step-one .step-content1,.step-one .step-content2,.step-one .step-content3{
        width: 41.571429rem;
        margin: 1.42857143rem 0 0 0 !important;
    }
    .step-one .step-content1 .photo2 {
        padding: 6.321429rem 0 0.035714rem 2.178571rem;
    }
    .step-one .step-content2 .photo2 {
        padding: 6rem 1rem 4.892857rem 1.642857rem;
    }
    .step-one .step-content3 .photo2 {
        padding: 2.678571rem 1rem 1.178571rem 3rem;
    }
    .step-two .step-content {
        padding: 0 7.4rem;
        display: flex;
        align-items: center;
    }
    .step-three .step-con {
        width: 19.821429rem;
        height: 11.5rem;
    }
    .step-three .step-content {
        padding: 0 7.4rem;
    }
    .step-four .step-content {
        padding: 0 4.4rem;
    }
    .step-four .step-content div {
        width: 10rem;
        height: 11.6rem;
    }
    .step-five .step-content {
        padding: 0 7.4rem;
    }
    .step-five .step-content div {
        width: 19.785714rem;
        height: 9.571429rem;
    }
}
@media only screen and (max-width:1440px){
    .step-one .step-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .step-one .step-content1,.step-one .step-content2,.step-one .step-content3{
        width: 41.571429rem;
        margin: 1.42857143rem 0 0 0 !important;
    }
    .step-one .step-content1 .photo2 {
        padding: 6.321429rem 0 0.035714rem 2.178571rem;
    }
    .step-one .step-content2 .photo2 {
        padding: 6rem 1rem 4.892857rem 1.642857rem;
    }
    .step-one .step-content3 .photo2 {
        padding: 2.678571rem 1rem 1.178571rem 3rem;
    }
    .step-two .step-content {
        padding: 0 7.4rem;
        display: flex;
        align-items: center;
    }
    .step-two .oblong3 p {
        padding: 0.6rem 2.85714286rem 0 .78571429rem;
    }
    .step-three .step-con {
        width: 19.821429rem;
        height: 11.5rem;
    }
    .step-three .step-content {
        padding: 0 7.4rem;
    }
    .step-four .step-content {
        padding: 0 7.4rem;
    }
    .step-four .step-content div {
        width: 9rem;
        height: 11.6rem;
    }
    .step-five .step-content {
        padding: 0 7.4rem;
    }
    .step-five .step-content div {
        width: 19.785714rem;
        height: 9.571429rem;
    }

}
@media only screen and (max-width:1400px){
    .step-one .step-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .step-one .step-content1,.step-one .step-content2,.step-one .step-content3{
        width: 41.571429rem;
        margin: 1.42857143rem 0 0 0 !important;
    }
    .step-one .step-content1 .photo2 {
        padding: 6.321429rem 1rem 0.035714rem 2.178571rem;
    }
    .step-one .step-content2 .photo2 {
        padding: 6rem 1rem 4.892857rem 1.642857rem;
    }
    .step-one .step-content3 .photo2 {
        padding: 2.678571rem 1rem 1.178571rem 3rem;
    }
    .step-two .step-content {
        padding: 0 7.4rem;
        display: flex;
        align-items: center;
    }
    .step-two .oblong3 p {
        padding: 0.6rem 2.85714286rem 0 .78571429rem;
    }
    .step-two .step-con-left{
        height: 13.785714rem;
    }
    .step-two .step-con-left img {
        width: 137%;
    }
    .step-three .step-con {
        width: 19.821429rem;
        height: 11.5rem;
    }
    .step-three .step-content {
        padding: 0 7.4rem;
    }
    .step-four .step-content {
        padding: 0 3.4rem;
    }
    .step-four .step-content div {
        width: 10rem;
        height: 11.6rem;
    }
    .step-five .step-content {
        padding: 0 7.4rem;
    }
    .step-five .step-content div {
        width: 19.785714rem;
        height: 9.571429rem;
    }

}
@media only screen and (max-width:1366px){
    .step-two .step-content {
        padding: 0 2rem;
    }
    .step-three .step-content {
        padding: 0 3rem;
        justify-content: space-around;
    }
    .step-five .step-content {
        padding: 0 4.4rem;
    }
}
@media only screen and (max-width:1024px){
    .step-four .step-content,.step-five .step-content{
        padding: 0 2.4rem;
    }
    .step-two .step-content{
        padding: 0 1.4rem;
    }
    .step-three .step-content {
        padding: 0 1.4rem;
    }
}
@media only screen and (max-width:992px){
    .banner-title {
        text-align: center;
    }
    .step-one .step-title p {
        text-align: center;
        padding: 0 0.5rem;
    }
    .step-one .step-content1, .step-one .step-content2, .step-one .step-content3 {
        width: 80%;
    }
    .step-one .step-content .step-content1 {
        height: 13.071429rem;
    }
    .step-one .step-content1 .photo1 {
        padding: 1.5rem 0 0.821429rem 0.5rem;
        height: 10.607143rem;
    }
    .step-one .step-content1 .photo2 {
        padding: 3.5rem 0.1rem 0.035714rem 0.5rem;
    }
    .step-one .step-content2 {
        height: 12.678571rem;
    }
    .step-one .step-content2 .photo1 {
        height: 11.571429rem;
        padding: 3.214286rem 0 .89285714rem 0.5rem;
    }    
    .step-one .step-content2 .photo2 {
        padding: 4rem 0.5rem 2.892857rem 0.642857rem;
    }
    .step-one .step-content3 {
        height: 12.035714rem;
    }
    .step-one .step-content3 .photo2 {
        padding: 2.678571rem 1rem 1.178571rem 0.5rem;
    }
    .step-one .step-content3 .photo1 {
        padding: 3.214286rem 0 .78571429rem 0.5rem;
        height: 10.678571rem;
    }
    .step-one .step-content {
        height: 46.107143rem;
    }
    .step-two .step-content {
        padding: 0 5.5rem;
        flex-direction: column;
    }
    .step-two .step-con-left {
        height: 12.785714rem;
        margin-bottom: 2rem;
        width: 80%;
    }
    .step-two .oblong {
        width: 12rem;
    }
    .step-two .right-main {
        margin-left: -2.1rem;
    }
    .step-two .r-m-circle1 span {
        padding: 0.9rem 0.8rem 1.42857143rem;
        text-align: center;
    }
    .step-two .oblong p {
        line-height: 0.9999rem;
    }
    .step-two .oblong2 p {
        padding: 0.9rem .64285714rem 0.9rem .78571429rem;
    }
    .step-two .oblong3 p {
        padding: 0.9rem 2.85714286rem 0.9rem .78571429rem;
    }
    .step-three {
        margin-bottom: 0;
    }
    .step-three .step-content {
        padding: 0 0.5rem;
        flex-direction: column;
        align-items: center;
    }
    .step-three .step-con {
        width: 19.3rem;
        margin-bottom: 2.64285714rem;
        height: 12rem;
    }
    .step-three .step-con p {
        padding: 0.8rem 0;
    }
    .step-four .step-content {
        padding: 0 0.5rem;
        display: flex;
        flex-wrap: wrap;
    }
    .step-four .step-content div {
        width: 20%;
    }
    .step-four {
        height: 19.178571rem;
    }
    .step-five .step-content {
        padding: 0 0.5rem;
    }
    
    .step-five .step-content {
        flex-direction: column;
        margin-bottom: 1.857143rem;
        align-items: center;
    }
    .step-five .step-content div {
        width: 19.3rem;
        height: 10.571429rem;
    }
}
@media only screen and (max-width:768px){
    .step-two .step-content {
        padding: 0 0.5rem;
    }
}
@media only screen and (max-width:576px){
    .banner-title {
        text-align: center;
    }
    .step-one .step-title p {
        text-align: center;
        padding: 0 0.5rem;
    }
    .step-one .step-content1, .step-one .step-content2, .step-one .step-content3 {
        width: 19.571429rem;
    }
    .step-one .step-content .step-content1 {
        height: 11.071429rem;
    }
    .step-one .step-content1 .photo1 {
        padding: 1.5rem 0 0.821429rem 0.5rem;
        height: 10.607143rem;
    }
    .step-one .step-content1 .photo2 {
        padding: 3.5rem 0.1rem 0.035714rem 0.5rem;
    }
    .step-one .step-content2 {
        height: 11.678571rem;
    }
    .step-one .step-content2 .photo1 {
        height: 11.571429rem;
        padding: 3.214286rem 0 .89285714rem 0.5rem;
    }    
    .step-one .step-content2 .photo2 {
        padding: 4rem 0.5rem 2.892857rem 0.642857rem;
    }
    .step-one .step-content3 {
        height: 11.035714rem;
    }
    .step-one .step-content3 .photo2 {
        padding: 2.678571rem 1rem 1.178571rem 0.5rem;
    }
    .step-one .step-content3 .photo1 {
        padding: 3.214286rem 0 .78571429rem 0.5rem;
        height: 10.678571rem;
    }
    .step-one .step-content {
        height: 42.107143rem;
    }
    .step-two .step-content {
        padding: 0 0.5rem;
        flex-direction: column;
    }
    .step-two .step-con-left {
        height: 11.785714rem;
        margin-bottom: 2rem;
    }
    .step-two .oblong {
        width: 12rem;
    }
    .step-two .right-main {
        margin-left: -2.1rem;
    }
    .step-two .r-m-circle1 span {
        padding: 0.9rem 0.8rem 1.42857143rem;
        text-align: center;
    }
    .step-two .oblong p {
        line-height: 0.9999rem;
    }
    .step-two .oblong2 p {
        padding: 0.9rem .64285714rem 0.9rem .78571429rem;
    }
    .step-two .oblong3 p {
        padding: 0.9rem 2.85714286rem 0.9rem .78571429rem;
    }
    .step-three {
        margin-bottom: 0;
    }
    .step-three .step-content {
        padding: 0 0.5rem;
        flex-direction: column;
        align-items: center;
    }
    .step-three .step-con {
        width: 19.3rem;
        margin-bottom: 2.64285714rem;
        height: 12rem;
    }
    .step-three .step-con p {
        padding: 0.8rem 0;
    }
    .step-four .step-content {
        padding: 0 0.5rem;
        display: flex;
        flex-wrap: wrap;
    }
    .step-four .step-content div {
        width: 8.5rem;
    }
    .step-four .step-content {
        justify-content: space-around;
    }
    .step-four {
        height: 32.178571rem;
    }
    .step-five .step-content {
        padding: 0 0.5rem;
    }
    
    .step-five .step-content {
        flex-direction: column;
        margin-bottom: 1.857143rem;
        align-items: center;
    }
    .step-five .step-content div {
        width: 19.3rem;
        height: 10.571429rem;
    }
}
@media only screen and (max-width:375px){
    .banner-title {
        text-align: center;
    }
    .step-one .step-title p {
        text-align: center;
    }
    .step-one .step-content1, .step-one .step-content2, .step-one .step-content3 {
        width: 17.571429rem;
    }
    .step-one .step-content .step-content1 {
        height: 11.071429rem;
    }
    .step-one .step-content1 .photo1 {
        padding: 1.5rem 0 0.821429rem 0.5rem;
        height: 10.607143rem;
    }
    .step-one .step-content1 .photo2 {
        padding: 3.5rem 0.1rem 0.035714rem 0.5rem;
    }
    .step-one .step-content2 {
        height: 11.678571rem;
    }
    .step-one .step-content2 .photo1 {
        height: 11.571429rem;
        padding: 3.214286rem 0 .89285714rem 0.5rem;
    }    
    .step-one .step-content2 .photo2 {
        padding: 4rem 0.5rem 2.892857rem 0.642857rem;
    }
    .step-one .step-content3 {
        height: 11.035714rem;
    }
    .step-one .step-content3 .photo2 {
        padding: 2.678571rem 1rem 1.178571rem 0.5rem;
    }
    .step-one .step-content3 .photo1 {
        padding: 3.214286rem 0 .78571429rem 0.5rem;
        height: 10.678571rem;
    }
    .step-one .step-content {
        height: 42.107143rem;
    }
    .step-two .step-content {
        padding: 0 0.5rem;
        flex-direction: column;
    }
    .step-two .step-con-left {
        height: 9.785714rem;
        margin-bottom: 2rem;
    }
    .step-two .oblong {
        width: 12rem;
    }
    .step-two .right-main {
        margin-left: -2.1rem;
    }
    .step-two .r-m-circle1 span {
        padding: 0.9rem 0.8rem 1.42857143rem;
        text-align: center;
    }
    .step-two .oblong p {
        line-height: 0.9999rem;
    }
    .step-two .oblong2 p {
        padding: 0.9rem .64285714rem 0.9rem .78571429rem;
    }
    .step-two .oblong3 p {
        padding: 0.9rem 2.85714286rem 0.9rem .78571429rem;
    }
    .step-three {
        margin-bottom: 0;
    }
    .step-three .step-content {
        padding: 0 0.5rem;
        flex-direction: column;
    }
    .step-three .step-con {
        width: 17.821429rem;
        margin-bottom: 2.64285714rem;
        height: 11rem;
    }
    .step-three .step-con p {
        padding: 0.8rem 0;
    }
    .step-four .step-content {
        padding: 0 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .step-four .step-content div {
        width: 8rem;
    }
    .step-four {
        height: 55.178571rem;
    }
    .step-five .step-content {
        padding: 0 0.5rem;
    }
    
    .step-five .step-content {
        flex-direction: column;
        margin-bottom: 1.857143rem;
    }
    .step-five .step-content div {
        width: 17.785714rem;
        height: 10.571429rem;
    }
}