﻿.apptitle{
    text-align: center;
    color: #333333;font-size: 48px;
    margin-bottom: 100px;
}
.app_progress{margin-bottom: 40px;}
.app_progress .aplist{
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    padding: 72px 0;
}
.content .app_advange{padding: 90px 0 100px;}
.app_progress .aplist li{float: left;position: relative;width: 150px;}
.app_progress .aplist li+li{margin-left: 100px;}
.app_progress .aplist li .num{margin-bottom: 30px;}
.app_progress .aplist li .t1{color: #333333;font-size: 20px;margin-bottom: 24px;font-weight: bold;}
.app_progress .aplist li .t2{color: #333333;font-size: 16px;line-height: 1.8;}
.app_progress .aplist li .dot{
    position: absolute;
    top: 9px;
    left: 126px;
}
.appbox{position: relative;}
.appbox .bg{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.applist li{float: left;width: 50%;margin-bottom: 80px;}
.applist li:nth-child(odd){padding-right: 350px;}
.applist li:nth-child(even){padding-left: 350px;}
.applist li .t1{color: #333333;font-size: 20px;font-weight: bold;margin-bottom: 16px;}
.applist li .t2{color: #333333;font-size: 16px;line-height: 1.7;}
.apptitle2{color: #fff;}
.appbg{
    background-image: url(../images/bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 70px;
    padding-bottom: 90px;
}
.apptitle3{position: relative;margin-bottom: 150px;}
.apptitle3 a{
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;
    padding-left: 18px;
    z-index: 9;
    line-height: 68px;height: 68px;
}
.apptitle3 .line{
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1;
    background-color: #adadad;
    top: 50%;
    height: 1px;
}
.apptitle3 span{
    display: inline-block;
    background-color: #fff;
    padding-right: 32px;
    color: #000000;font-size: 48px;
    position: relative;
    z-index: 9;
    line-height: 68px;height: 68px;
}
.acaselist li{margin-bottom: 170px;}
.acaselist li .pic{width: 50%;text-align: center;display: inline-block;vertical-align: middle;}
/*.acaselist li .pic img{max-width: 60%;}*/
.acaselist li .txt{margin-top: 6%;display: inline-block;vertical-align: middle;}
.acaselist li .list{margin: 0 -30px;max-width: 480px;}
.acaselist li .list .item{float: left;width: 60px;text-align: center;margin-bottom: 20px;margin: 0 30px 24px;}
.acaselist li .list .icon{height: 44px;line-height: 44px;text-align: center;margin-bottom: 16px;}
.acaselist li .list .tt{color: #033333;font-size: 14px;text-align: center;}
.acaselist li:nth-child(odd) .txt{padding: 0 50px 0 120px;}
.acaselist li:nth-child(even) .txt{padding: 0 120px 0 50px;}
.acaselist li .t1{color: #033333;font-size: 42px;margin-bottom: 36px;}
.acaselist li .t2{color: #333333;font-size: 16px;line-height: 1.9;margin-bottom: 52px;}
.acaselist li .list_w1{max-width: 364px;}
.acaselist li .pic.fl{float: left;margin-top: 100px;}
.acaselist li .pic.fr{float: right;margin-top: 100px;}

.iconlist li{float: left;width: 20%;padding: 60px 10px;border-right: 1px solid rgba(255,255,255,.2);border-bottom: 1px solid rgba(255,255,255,.2);;}
.iconlist li .icon{text-align: center;height: 64px;line-height: 64px;margin-bottom: 35px;}
.iconlist li .icon img{max-height: 100%;}
.iconlist li .tt{text-align: center;color: #fff;font-size: 18px;}
.iconlist li:nth-child(5n){border-right: none;}
.iconlist li:nth-child(6),.iconlist li:nth-child(7),.iconlist li:nth-child(8),.iconlist li:nth-child(9),.iconlist li:nth-child(10){border-bottom: none;}



@media screen and (max-width:1440px){
    .app_progress .aplist li .dot{left: 80px;}
    .app_progress .aplist li+li{margin-left: 54px;}
    .appbox .bg img{max-width: 400px;max-width: 80%;}
    .applist li:nth-child(odd){padding-right: 220px;}
    .applist li:nth-child(even){padding-left: 220px;}
    .acaselist li .list{max-width: none;margin: 0 -22px;}
    .acaselist li .list_w1{max-width: none;}
    .acaselist li .list .item{margin: 0 22px 20px;}
    .acaselist li:nth-child(odd) .txt{padding: 0 0 0 60px;}
    .acaselist li:nth-child(even) .txt{padding: 0 60px 0 0;}
    .acaselist li .txt{margin-top: 0;}

}

@media screen and (max-width:1200px){
    .app_progress .aplist li+li{margin-left: 0;}
    .app_progress .aplist li{width: 33.3%;margin-bottom: 50px;}
    .app_progress .aplist{padding-bottom: 30px;}
    .apptitle{font-size: 32px;margin-bottom: 50px;}
    .apptitle3 span{font-size: 32px;}
    .apptitle3{font-size: 32px;margin-bottom: 50px;}
    .acaselist li .t1{font-size: 26px;margin-bottom: 20px;}
    .acaselist li .t2{font-size: 14px;margin-bottom: 30px;}
}
@media screen and (max-width:1000px){
    .appbox .bg{
        position: relative;text-align: center;transform: translate(0,0);
        left: 0;top: 0;margin-bottom: 40px;
    }
    .applist li:nth-child(odd){padding-right: 0;}
    .applist li:nth-child(even){padding-left: 0;}
    .acaselist li .pic{float: none;width: 100%;}
    .acaselist li .pic img{max-width: 84%;margin-bottom: 30px;}
    .acaselist li:nth-child(odd) .txt{padding: 0;}
    .acaselist li:nth-child(even) .txt{padding: 0;}
    .acaselist li{margin-bottom: 90px;}
}

@media screen and (max-width:768px){
    .app_progress .aplist li .num{margin-bottom: 15px;}
    .app_progress .aplist li .num img{height: 24px;}
    .app_progress .aplist li .dot{left: 36px;top: 3px;}
    .app_progress .aplist li .t1{font-size: 16px;margin-bottom: 10px;}
    .app_progress .aplist li{margin-bottom: 30px;}
    .app_progress .aplist{padding-top: 40px;padding-left: 30px;padding-right: 30px;}
    .apptitle{font-size: 28px;margin-bottom: 30px;}
    .content .app_advange{padding: 50px 0;}
    .app_progress{margin-bottom: 0;}
    .apptitle3 span{font-size: 24px;height: 34px;line-height: 34px; padding-right: 10px;}
    .apptitle3 a img{max-width: 24px;}
    .apptitle3 a{padding-left: 10px;height: 34px;line-height: 34px;}
    .acaselist li .t1{font-size: 24px;}
    .acaselist li .list .icon{height: 28px;line-height: 28px;margin-bottom: 10px;}
    .acaselist li .list .icon img{max-height: 100%;}
    .acaselist li .list .tt{font-size: 12px;}
    .acaselist li .list .item{margin: 0 12px 16px;}
    .acaselist li .list{margin: 0 -12px;}
    .acaselist li{margin-bottom: 50px;}
    .content .app_case{padding-top: 50px;}
    .iconlist li:nth-child(5n){border-right: 1px solid rgba(255,255,255,.2);}
    .iconlist li:nth-child(6), .iconlist li:nth-child(7), .iconlist li:nth-child(8), .iconlist li:nth-child(9), .iconlist li:nth-child(10){border-bottom: 1px solid rgba(255,255,255,.2);}
    .iconlist li{width: 50%;border-right: 1px solid rgba(255,255,255,.2);border-bottom: 1px solid rgba(255,255,255,.2);}
    .iconlist li:nth-child(2n){border-right: none;}
    .iconlist li:nth-child(9),
    .iconlist li:nth-child(10){border-bottom: none;}
}
@media screen and (max-width:680px){
    .app_progress .aplist li{width: 50%;}
    .app_progress .aplist li .t2{font-size: 14px;}
    .applist li{float: none;width: 100%;margin-bottom: 30px;}
    .applist li .t1{font-size: 16px;margin-bottom: 10px;}
    .applist li .t2{font-size: 14px;}
}
@media screen and (max-width:580px){
    .iconlist li{padding: 40px 10px;}
    .iconlist li .icon{height: 42px;line-height: 42px;margin-bottom: 20px;}
    .iconlist li .tt{font-size: 16px;}
    .apptitle{font-size: 24px;}
    .acaselist li .t1{font-size: 20px;margin-bottom: 12px;}
    .acaselist li .t2{margin-bottom: 16px;}
    .content .app_case{padding-top: 30px;}
}