@charset "utf-8";

.app-header{width: 100%;height:80px;background: #fff;}
.app-header-box{width: 95%;margin: 0 auto; height: 100%;line-height: 80px;text-align: center;}
.app-header-box a{display: block;width: 30%;text-align: left;}
.app-header-box a img{object-fit: contain;}
.app-top-title{width: 40%;color: #6c637d;font-size: 1rem;}
.top-btn{width: 30%;text-align: right;}
.top-btn span{font-size: 0.9rem;padding: 10px 24px;color: #fff;border-radius: 4px;cursor: pointer;}
.top-btn .wza{background: #8764e9;margin-right: 15px;}
.top-btn .btn-change{background: url(../images/icon_zzb.png) no-repeat #f79637 10px center; background-size: 18%; padding:11px 15px 11px 38px; color:#fff; font-size:0.9rem; font-weight:bold; line-height:18px; border-radius:5px;}

.app-show-box{
    width: 100%;
    height: auto; 
    background: -moz-linear-gradient( 90deg, rgb(219,199,255) 0%, rgb(232,219,255) 30%, rgb(245,238,254) 100%);
    background: -webkit-linear-gradient( 90deg, rgb(219,199,255) 0%, rgb(232,219,255) 30%, rgb(245,238,254) 100%);
    background: -ms-linear-gradient( 90deg, rgb(219,199,255) 0%, rgb(232,219,255) 30%, rgb(245,238,254) 100%);    
    overflow: hidden;
    padding-bottom: 100px;
}

.app-show-box .app-show{
    width: 100%;
    height: auto;
    background: url(../images/app-download-bg.png) no-repeat top center;
    background-size: contain;
    padding-top: 60px;
    margin-bottom: 60px;
}
.app-show h2{font-size: 2rem;color: #6851a3;text-align: center;margin-bottom: 40px;}
.app-show .app-logo{width: 100%;height: auto;text-align: center;margin-bottom: 80px;}
.app-show .app-logo img{box-shadow: 0px 20px 48px 0px rgba(164, 120, 247, 0.51);}
.app-show h3{font-size: 2rem;color: #413657;text-align: center;letter-spacing: 25px;margin-bottom: 30px;}
.app-show .wxzhfwpt{font-size: 1.1rem;color: #5b516f;text-align: center;letter-spacing: 10px;margin-bottom: 60px;}
.app-show .app-phone{width: 100%;text-align: center;margin-bottom: 40px;}
.app-show .app-dis{width: 65%;margin: 0 auto;}
.app-show .app-dis p{font-size: 1.1rem;color: #413657;line-height: 2rem;text-align: center;}
.gzh-box{width: 80%;margin: 0 auto;overflow: hidden;}
.gzh-box li{
    width: 29%;
    margin: 2%;
    float: left;
    text-align: center; 

}
.gzh-box li>div{
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-radius: 35px;
    text-align: center; 
    background: -moz-linear-gradient( 180deg, rgb(133,98,233) 0%, rgb(160,116,245) 100%);
    background: -webkit-linear-gradient( 180deg, rgb(133,98,233) 0%, rgb(160,116,245) 100%);
    background: -ms-linear-gradient( 180deg, rgb(133,98,233) 0%, rgb(160,116,245) 100%);
    box-shadow: 0px 20px 48px 0px rgba(164, 120, 247, 0.51);
    margin-bottom: 50px;

}
.gzh-box li>div>span{width: 100%;height: 60px;background: url(../images/icon-gzh.png) no-repeat 10% center;display: inline-block;background-size: 30px;font-size: 1.1rem; color: #fff;padding-left: 5%;}
.gzh-box li:nth-child(2)>div>span{padding-left: 4%;background: url(../images/icon-gzh.png) no-repeat 5% center;background-size: 30px;}
.app-footer{
    width: 100%;
    height: 80px;
    text-align: center;
    background: #cdb5f7;
    color: #413657;
    line-height: 80px;
    font-size: 1.1rem;
}

@media(max-width:1440px){
    .gzh-box{width: 95%;}
}

@media (max-width:1200px) {
    .gzh-box{width: 95%;}
    .gzh-box li{width: 31%;margin: 1%;}
}

@media(max-width:1024px){
    .app-header-box a{width: 30%;}
    .top-btn{width: 34%;}
    .app-top-title{font-size: 0.9rem;text-align: center;width: 46%;}
    .gzh-box li>div>span{font-size: 0.9rem;}
}
@media(max-width:900px){    
    .app-top-title{font-size: 0.8rem;}
    .top-btn span{font-size: 0.8rem;padding: 10px 20px;}
    .app-show .app-dis{width: 80%;}
    .gzh-box li>div>span{font-size: 0.8rem;background:url(../images/icon-gzh.png) no-repeat 10% center;background-size: 24px;}
    .gzh-box li:nth-child(2)>div>span{padding-left: 4%;background: url(../images/icon-gzh.png) no-repeat 5% center;background-size: 24px;}
    
}
@media(max-width:550px){    
  .top-btn .btn-change{font-weight: 500; position: fixed;top: 50%;right: 0;z-index: 999; padding: 35px 10px 10px 10px;height: auto;width: 48px;text-align: center;line-height: 1.1;background-position: center 10px;background-size: 20px;font-size: 1.1rem;margin-left: 0;border-radius: 5px 0 0 5px;}
}

@media(max-width:768px){
    .app-top-title{display: none;}
    .top-btn{width: 74%;}
    .gzh-box li>div{height: 50px;line-height: 50px;}
    .gzh-box li>div>span{background: none;padding: 0;font-size: 0.7rem;}
    .gzh-box li:nth-child(2)>div>span{background: none;padding: 0;}
}

@media(max-width:640px){
    .app-header{height: 60px;}
    .app-header-box{line-height: 60px;}
    .gzh-box li{width: 100%;margin: 0 auto;text-align: center;margin-bottom: 50px;}
    .gzh-box li>div{width: 60%;margin: 0 auto 30px;}
    .gzh-box li>div>span{font-size: 1rem;background:url(../images/icon-gzh.png) no-repeat 15% center;background-size: 24px;height: 50px;padding-left: 5%;}
    .gzh-box li:nth-child(2)>div>span{padding-left: 4%;background: url(../images/icon-gzh.png) no-repeat 10% center;background-size: 24px;}
    .app-show-box{padding-bottom: 30px;}
    .top-btn span{font-size: 1rem;}
}