.flex { display: flex; display: -webkit-flex;  align-items: center;}
.flex.left { justify-content: flex-start}
.flex.center { justify-content: center}
.flex.right { justify-content:flex-end}
.flex.around { justify-content: space-around }
.flex.between { justify-content: space-between }
.flex.top {align-items: flex-start}
.flex.bottom { align-items: flex-end}
.f1 { flex: 1}
h3 {
    padding-top: .96rem;
    font-size: .4rem;
    font-weight: bold;
}

.nav-main{height: 1.2rem;}
.top-nav { height: .9rem; background: #fff; position: fixed; top:0;left:0; z-index: 999; width: 100%;border-bottom: 1px solid #eee;padding-top: .4rem}
.top-nav  .logo{width: 1.93rem;margin-left: .32rem;}
.top-nav .more { width:.4rem;margin-right: .32rem;float: right}
.right-nav { position: fixed; left: 0; opacity: 0;  bottom: 100%; z-index: 990;  width: 100%; height: 100%;  background: #fff; box-sizing: border-box;padding: .5rem;transition: .5s; }
.show-nav .right-nav { bottom: 0; opacity: 1; }
.right-nav .logo { width: 1.93rem;}
.right-nav .close { display: block; width: .5rem;position: absolute;bottom:1rem;left: 50%;margin-left: -.25rem;}
.right-nav .warp {text-align: left;margin-left: 0.1rem;padding-top: 1.04rem;}
.right-nav .warp  .item { color: #333; font-size: .32rem; line-height: 1rem; display: block; border-bottom: 1px solid #eee;width: 6.3rem; font-weight: bold;position: relative;}
.right-nav .warp  .item .arrow{font-size: .48rem;float: right;transition: .5s;transform: rotate(180deg);}
.right-nav .warp  .item.active { color: #457DE6 }
.right-nav .warp  .item ul{display: none;}
.right-nav .warp  .item ul a{ color: #666;display: flex;align-items: center;font-weight: normal}
.right-nav .warp  .item ul li{ font-size: .32rem;}
.right-nav .warp  .item ul li i{ font-size: .4rem;margin-right: .23rem;}
.right-nav .warp  .item ul a img{
    width: .4rem;
    height: auto;
    margin-right: .23rem;
}
.right-nav .warp  .item.open{
    color: #457DE6;
}
.right-nav .warp  .item.open .arrow{
    transform: rotate(0);
    color: #457DE6;
}
.right-nav .warp  .item.open:before{
    content: "";
    position: absolute;
    width: 7.5rem;
    height: 1rem;
    background: #EBF2FF;
    top: 0;
    left: -.6rem;
    z-index: -1;
}

.banner {
    position: relative;
}

.resetImg img{
    width: 100%;
    height: 100%;
    display: block;
}

.imgIcon {
    width: .8rem !important;
    height: .8rem !important;
}

.fs-30 {
    font-size: .3rem;
}

.banner .head-text {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    top: 1.48rem;
}

.banner .head-text h2 {
    font-weight: bold;
    font-size: .56rem;
    margin-bottom: .2rem;
}

.banner .head-text p{
    font-size: .30rem;
    color: #EBF2FF;
    letter-spacing: .03rem;
}

.down-btn {
    width: 2.4rem;
    height: .8rem;
    background: #4286f5;
    border-radius: .4rem;
    box-shadow: 0 .11rem .13rem 0 rgba(69,125,230,0.12);
    font-size: .32rem;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    display: block;
    line-height: .8rem;
    margin: .9rem auto 0;
    transition: .5s background;
    -webkit-transition:.5s background;
    -moz-transition:.5s background;
    -o-transition:.5s background;
    -ms-transform: .5s background;
}

.index-info1{
    background-color: #457DE6;
    position: relative;
    z-index: 99;
    top: 2.5rem;
    opacity: 0;
    transition: 1s;
}

.public-animation {
    position: relative;
    top: 2.5rem;
    opacity: 0;
    transition: 1s;
}

.index-info2,.index-info5 {
    background-color: #01C353;
}

.index-info3,.index-info6 {
    background-color: #333333;
}

.index-info1 .info-title{
    position: absolute;
    font-size: 1.28rem;
    font-weight:bold;
    margin-left: .48rem;
    color: rgba(255,255,255,0.12);
    z-index: -99;
}

.index-info1 .info-content{
    color: #fff;
    width: 90%;
    margin: 0 auto;
}

.index-info1 .info-content p{
    font-size: .28rem;
    margin-top: .16rem;
    margin-bottom: 1.32rem;
    color: #EBF2FF;
}

.index-info1 .bg-position {
    position: absolute;
    width: 100%;
    height: 3.48rem;
    bottom: 0;
    opacity: .5;
    z-index: -1;
}

.apply {
    background: url("../images/wap/home_bg_scenes.png") 100% 100%;
    background-size: 100%;
    padding: 1.2rem 0;
}

.apply .apply-title{
    text-align: center;
    margin-bottom: .6rem;
}

.apply .apply-title h2{
    font-size: .48rem;
}

.apply .apply-title p{
    color:#999999 ;
    font-size: .28rem;
}

.apply .example {
    width: 86%;
    margin: 0 auto;
    border-radius: .2rem;
    box-shadow: 0 .04rem .24rem 0 rgba(23,35,61,0.10);;
    margin-bottom: .36rem;
    background-color: #fff;
    padding-bottom: .4rem;
    position: relative;
    top: 2.5rem;
    opacity: 0;
    transition: 1s;
}

.apply .example img{
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
}

.apply .example .info-box{
    width: 90%;
    margin-left: .4rem;
}

.apply .example h4{
    color: #333333;
    font-weight: bold;
    margin-top: .3rem;
    font-size: .4rem;
}

.apply .example p{
    font-size: .3rem;
    color: #666666;
}

.map-info {
    background-color: #457DE6;
    position: relative;
    transition: 1s;
}

.map-info img {
    padding: .5rem 0;
    width: 86%;
    margin: 0 auto;
}

.map-info .content-box{
    position: absolute;
    font-size: .28rem;
    top: 1.1rem;
    left: .9rem;
}

.map-info .content-box .item{
    display: inline-block;
    color: #fff;
    text-align: center;

}

.map-info .content-box .item h4{
    font-size: .5rem;
    font-weight: bold;
}

.map-info .content-box .item .number{
    font-size: .56rem;
}

.map-info .content-box .item p{
    color: #EBF2FF;
}

.index-down {
    background: url("../images/wap/home_bg_download.png") 100% 100%;
    background-size: cover;
    position: relative;
    transition: 1s;
}

.index-down .begin-box {
    text-align: center;
    margin: 0 auto;
    padding: .66rem 0;
    color: #fff;
}

.index-down .begin-box h2{
    font-size: .48rem;
    font-weight: bold;
    margin-bottom: .1rem;
}
.index-down .begin-box .box{
    text-align: center;
    width: 100%;
    font-size: 0;
}
.index-down .begin-box .box a{
    width: 2.76rem;
    display: inline-block;
    margin: 0 .15rem;
}



.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 0.18rem;
    background: #fff;
}

.prod-info1  {
    color: #4286F5;
    padding: .96rem 0;

}

.prod-info1 h2 {
    text-align: center;
    font-size: .48rem;
    font-weight: bold;

    margin-bottom: .48rem;
}

.prod-info1 .prod-text {
    margin: 0 auto;
    width: 80%;
    border: 1px solid #4286F5;
    border-radius: .24rem;
    font-size: .3rem;

}

.prod-info1 .prod-text2 {
    margin-left: 1rem;
}

.prod-info1 p{
    margin-top: .5rem;
    margin-left: .7rem;
}

.prod-info1 .iconFrame {
    vertical-align: middle;
    margin-right: .1rem;
}

.prod-info1 p{
    line-height: .5rem;
    height: .5rem;
}

.prod-common{
    color: #fff;
    position: relative;
}

.prod-common h2{
    font-size: .4rem;
    padding: .72rem 0 .48rem 0;
    font-weight: bold;
}

.prod-common .prod-common1{
    margin-left: .48rem;
}

.prod-common .common-content{
    margin-top: .3rem;
    font-size: .28rem;
}

.prod-common .common-content li{
    margin-bottom: 0.12rem;
}

.prod-common .common-content i{
    margin-right: .1rem;
}


.prod-common .common-content p{
    margin-left: .4rem;
}

.project-info2,.prod-info6,.prod-info2 {
    background: #457DE6;
}

.prod-down {
    background:url("../images/wap/product/product_bg_download.png") 100% 100%;
    padding: .8rem  0;
}

.prod-down .down-btn {
    background: #fff !important;
    color: #4286F5;
    font-size: .32rem;
    margin-top: 0 !important;
}

.prod-common h2{
    padding-bottom: 0;
}

.project-main  .common-content {
    margin-top: .18rem;
}

.project-info2 .project-box {
    position: absolute;
}

.project-box h2{
    background: url("../images/wap/project/img_title_bg.png")  no-repeat  left bottom  ;
    background-size: auto 20%;
}

.project-common1  h2,
.project-common2 h2{
    padding: .24rem 0 0;
}

.project-common1  img{
    position: absolute;
    top: 3.7rem;
}

.project-common2 img{
    padding-top: .72rem;
    padding-bottom: .24rem;
}


.down-main {
    background:#457DE6 ;
    color: #fff;
    text-align: center;
    position: relative;
    /*height: 10.8rem;*/
    height: 12.36rem;
}

.down-main .down-banner {
    position: relative;
    z-index: 2;
    /*background-image: url("../images/wap/img_download_bg.png");*/
    /*background-size: cover;*/
}

.down-main .down-banner h2{
    font-size: .56rem;
    font-weight: bold;
    padding-top: 1.2rem;
    padding-bottom: .1rem;
}
.down-main .bg{
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    z-index: 1;
}

.down-main .down-btn {
    background: #ffffff;
    border-radius: 0.5rem;
    color:#457DE6 ;
    width:3.42rem ;
    height: 1rem;
    font-size: .36rem;
    margin-top: .6rem;
    margin-bottom: 1.36rem;
    line-height: 1rem;
    position: relative;
    z-index: 10;
}



.about-main .text-box {
    background-image: url("../images/wap/about/img_about_logo.png");
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 75%;
    text-align: justify;
    padding: .96rem 0;
}

.about-main .text-box .text{
    width: 86%;
    margin: 0 auto;
}

.about-main h2,.footer h2{
    font-size: .48rem;
    font-weight: bold;
}

.about-main .text p {
    margin-top: .36rem;
    color: #666;
    font-size: .3rem;
}

.about-main .contact {
    position: relative;
}
.about-main .contact-text {
    position: absolute;
    background: url("../images/wap/about/img_about_map.png") #fff  no-repeat right bottom;
    background-size: 60%;
    top: 1.2rem;
    padding: .72rem 0 .72rem .72rem ;
    width: 70%;
    right: 0;
}

.about-main .contact-text img {
    width: 1.23rem;
    height: auto;
    margin-top: .44rem;
}
.about-main .contact-text p{
    color: #999;
    margin-top: .32rem;
    font-size: .28rem;
}

.about-main .contact-text .wx{
    margin-top: .1rem;
    color: #666;
}

.footer {
    background: #1F263F;
}

.footer .footer-box{
    width: 86%;
    text-align: center;
    margin: 0 auto;
}

.footer h2{
    font-size: .48rem;
    color: #fff;
}

.footer .wxColor {
    color: #fff;
}

.footer p {
    color: #757C94;
    font-size: .24rem;
}

.footer .tel {
    color: #eaecf1;
    font-size: .48rem;
    font-weight: 700;
}

.footer .toggle {
    margin: .24rem 0;
}

.footer .swiper-container img {
    width: 2.2rem;
}

.footer .swiper-container{
    overflow: inherit;
}

.footer .swiper-slide {
    background-color:#1F263F ;
}

.footer .swiper-slide img {
    margin: 0 auto;
}

.footer .swiper-pagination{
    position: initial !important;
}

.footer .swiper-container-horizontal>.swiper-pagination-bullets,.footer .swiper-pagination-custom,.footer .swiper-pagination-fraction{
    bottom: -.3rem !important;
}

.footer .swiper-pagination-bullet {
    background:#757C94 !important;
}

.footer .swiper-pagination-bullet-active {
    background: #fff !important;
}

.footer .copyright  {
    font-size: .22rem;
    color: #757C94;
    padding: .24rem 0;
    border-top: 1px solid #273050;
    margin-top: .5rem;
}

.download-dialog{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
    background: rgba(0,0,0,.8);
    text-align: right;
    font-size: 0;
    display: none;
}
.download-dialog img{
    width: 1.11rem;
    margin-right: .23rem;
}
.download-dialog p{
    font-size: .34rem;
    font-weight: bold;
    text-align: CENTER;
    color: #ffffff;
    line-height: .48rem;
    margin-bottom: .08rem;
}

.down-tab{
    height: 1rem;
    width: 100%;
    background: #fff;
    text-align: center;
    font-size: 0;
    position: relative;
}
.down-tab:before{
    position: absolute;
    content: "";
    width: 1px;
    height: .3rem;
    background: #ccc;
    left: 50%;
    top: .35rem;
}
.down-tab .item{
    width: 2.72rem;
    display: inline-block;
    height: 100%;
    line-height: 1rem;
    font-size: .36rem;
    font-weight: 500;
    color: #999999;
    position: relative;
}
.down-tab .item.active{
    color: #457DE6;
}
.down-tab .item.active:before{
    content: "";
    position: absolute;
    width:  .36rem;
    height: .04rem;
    background: #457DE6;
    left: 50%;
    margin-left: -.18rem;
    bottom: .16rem;
}

.index-base-summary{
    display: flex;
    align-items: center;
    height: 3.6rem;
    border-top: 1px solid #eee;
}
.index-base-summary .txt{
    margin-left: .6rem;
}
.index-base-summary .txt h4{
    font-size: .48rem;
    font-weight: bold;
    color: #333333;
    line-height: .56rem;
}
.index-base-summary .txt p{
    font-size: .28rem;
    font-weight: 500;
    color: #666666;
    line-height: .33rem;
    margin-top: .3rem;
    word-break:keep-all;     /* 不换行 */
    white-space:nowrap;      /* 不换行 */
}
.index-base-summary .txt span{
    display: block;
    font-size: .24rem;
    color: #999999;
    line-height: .28rem;
    margin-top: .16rem;
    position: relative;
    left: -.15rem;
}
.index-base-summary img{
    width: 3.76rem;
}
.gif{
    width:1rem;
    height:1.54rem;
    position: fixed;
    right: 0.18rem;
    left: auto;
    z-index: 999;
    bottom: 1.27rem;
}
.gif img{
    width:100%;
    height:100%;
}
.block{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top:0;
    z-index: 9999;
    overflow: hidden;
}
.block .center,.block .box{
    width:7.02rem;
    height:10.92rem;
    position: relative;
}
.block .close{
    width:.48rem;
    height:.48rem;
    position: absolute;
    top:.18rem;
    right:.28rem;
    cursor: pointer;
}
.wap-btns{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom:.34rem;
    margin-left: 50%;
    left:-2.57rem;
}
.wap-btns a{
    width: 2.4rem;
    height: 0.72rem;
    line-height: 0.72rem;
    text-align: center;
    background: #FFFFFF;
    border-radius: 0.08rem;
    font-size: 0.3rem;
    color: #0B70FF;
    border:0;
    outline: none;
}
.wap-btns .download-btn{
    margin-right:0.34rem;
}