.btn{width: 90px;height: 35px;line-height: 35px;font-size: 1.2rem;}
.btn i{right: 20px;}
.btn:hover>i{width: 40vw}
.banner-img{height: 200px}
.banner-img .container .txt{padding-left: 50px;box-sizing: border-box}
.banner-img .container .txt p:nth-of-type(1){font-size: 2rem}
.banner-img .container .txt p:nth-of-type(2){font-size: 1.5rem}
.way{padding: 0 0 15px 15px;display: none}
.left-menu{width: 100%; padding: 20px;box-sizing: border-box}
.left-menu .top{display: none}
.left-menu ul li{line-height: 45px;background-position: calc(90vw - 20px) center;}
.pagination .pager li{width: 25px;height: 25px}

#footer{background: url(/static/img/foot-bg.png) no-repeat top center;padding: 0 10px}
#footer::before{display: none}
#footer::after{width: 100%;bottom: 0;left: 0;height: 80%;}
#footer .container{background: none}
#footer .container .con{flex-direction: column;}
#footer .con .l{padding: 30px 0 50px 0}
#footer .con .c .menu-foot ul.first{flex-wrap: wrap;justify-content:initial}
#footer .con .c .menu-foot ul.first > li{    width: 33%;padding: 0 0 20px 0;}
#footer .con .r{padding: 20px 0 10px}
#footer .copyright{flex-direction: column-reverse;}
#footer .copyright .share{padding-bottom: 10px}

#index.index .banner{height: 200px}
#index.index .banner .container .txt .slogan{padding-left: 0 !important;}
#index.index .banner .container .txt .slogan:first-of-type{font-size: 1.5rem}
#index.index .banner .container .txt .slogan:last-of-type{font-size: 1.3rem;padding-top: 10px}
#index.index .title{font-size: 2rem}
#index.index .title img{height: 10px;margin-top: 5px}
#index.index .btn-dot{width: 30px;height: 30px;right: 30px !important}
#index.index .box{padding: 20px !important}
#index.index .about{padding-bottom: 20px}
#index.index .about .bg{height: 100%;margin-top: -20vh;}
#index.index .about .box{flex-direction: column;box-shadow:none;background: none}
#index.index .about .box .l{width: 100%}
#index.index .about .box .r{width: 100%;padding-left:0}
#index.index .about .box .r .t{font-size: 2rem;padding:20px 0 20px 0;}
#index.index .about .box .r .t::before{bottom: 10px}
#index.index .about .box .r .content{font-size: 1.5rem;}
#index.index .product{padding-bottom: 0}
#index.index .product .box{background: #f7f8fa}
#index.index .product .title .btn{right: 10px}
#index.index .product .tab-content .swiper-wrapper{width: 100%}
#index.index .product .tab-content .swiper-slide{flex-direction: column-reverse;padding: 20px 20px 20px;}
#index.index .product .tab-content .swiper-slide .l,
#index.index .product .tab-content .swiper-slide .r{width: 100%}
#index.index .product .tab-content .swiper-slide .r{text-align: center}
#index.index .product .tab-content .swiper-slide .r img{width: 50%}
#index.index .solution .title{padding: 50px 0 30px}
#index.index .solution .box{flex-direction: column;padding-top: 0 !important;}
#index.index .solution .box .item{width: 100%;height: 200px}
#index.index .solution .box .item .con img{height: 40px}
#index.index .solution .box .item .con .name{padding-top: 20px;font-size: 1.8rem}
#index.index .solution .box .item .con .txt{height:initial}

#about .main{padding: 40px 0}
#about .main .title{padding-bottom: 15px}
#about .top .container{flex-direction: column;align-items: flex-start;}
#about .top .container .menu{display: flex;justify-content: space-around;width: 100%;}
#about .top .menu a{padding: 0;width: 100%;display: block;text-align: center;}
#about.index .main .info{flex-direction: column;padding: 0 0 30px 0}
#about.index .main .info .l{width: 100%;padding-bottom: 15px;font-size: 2.5rem}
#about.index .main .info .r{width: 100%;padding: 15px;box-sizing: border-box;}
#about.index .main .info .count-up {flex-wrap: wrap;}
#about.index .main .info .count-up .item{width: 50%;margin-bottom: 20px}
#about.index .main .info .count-up .item p:first-of-type{font-size: 2rem;margin-bottom: 5px}
#about.index .main .info .count-up .item .suffix{font-size: 1.2rem}
#about.index .main .info .count-up .item p{font-size: 1.2rem}
#about.index .main .slogan{height: 220px}
#about.index .main .map{padding: 50px 0}
#about.index .main .photo{padding: 20px 0 50px}
#about.index .main .photo .container{flex-direction: column;}
#about.index .main .photo .swiper{width: 100%;height: 250px;border-radius:0}
#about.index .main .photo .txt{padding: 20px}
#about.index .main .photo .txt .item{padding-bottom: 10px}
#about.index .main .photo .txt img{width: 30px}
#about.index .main .department{padding: 0 0 50px}
#about.index .main .department > p{ padding-bottom: 10px;}
#about.index .main .department .list{flex-direction: column;padding-top: 30px;}
#about.index .main .department .list .item{width: 100%;border-radius:0;margin-bottom: 20px}
#about.index .main .department .list .item .cover{padding-bottom: 30px}
#about.index .main .department .list .item .cover span{font-size: 1.5rem}
#about.index .main .department .list .item .cover span:before{bottom: -10px}
#about.index .main .brand{padding:0}
#about.index .main .brand .swiper .swiper-slide{height: 70px;width: 31%;}
#about.culture .main .box .item{height:160px;overflow: hidden}
#about.culture .main .box .item > img{width: auto;height: 100%}
#about.culture .main .box .item .icon{width:30px;height: 30px }
#about.culture .main .box .item span{font-size: 1.5rem}
#about.certificate .main{padding-bottom: 40px}
#about.certificate .main .list{width: 100%}
#about.certificate .main .list .item{width: 50%;margin:0;padding: 15px;box-sizing: border-box;}
#about.certificate .main .list .item .img-box{height: 220px}
#about.factory .top ~ .top{padding: 0}
#about.factory .top .swiper-slide .img{border-radius: 0}
#about.factory .list{padding: 0;display: block;overflow: hidden}
#about.factory .list .item{width:45.5%;border-radius: 0;float: left;margin-bottom: 4vw}
#about.factory .list .item:nth-of-type(2n+1){margin-left:3% }
#about.factory .list .item .img{height: 45vw}
#about.factory .list .item .cover{padding: 10px}

#product .main,#solution .main {flex-direction: column;}
#product .main .way,#solution .main .way{left: 20px;right: initial;display: none}
#product .main .content,#solution .main .content{width: 100%;margin-bottom: 20px;padding-top: 10px}
#product .main .list,#solution .main .list{padding: 0;justify-content: space-around;}
#product .main .list .item,#solution .main .list .item{width: calc(50vw - 10px);margin: 0 0 30px 0;}
#product .main .list .item .img,#solution .main .list .item .img{height: 150px}
#product .main .list .item .title,#solution .main .list .item .info .title{font-size: 1.3rem;height: 39px}
#product .main .list .item .dot{width: 40px;height: 40px}
#product .main .top-menu{flex-direction: column;padding: 0 0 20px;}
#product .main .top-menu .classify{display: block;padding: 0 10px;box-sizing: border-box;}
#product .main .top-menu .classify img{display: none}
#product .main .top-menu .classify a{float: left;margin:0 10px 10px 0;border: 1px solid #ddd;border-radius: 2px;padding: 5px 10px;font-size: 1.4rem;}
#product .main .top-menu .classify a.on{border-color: #0069b2}
#product .main .top-menu .classify a.on:before{display: none}
#product.detail .main .content .info{padding: 0;flex-direction: column;}
#product.detail .main .content .info .img-box{width: 100%}
#product.detail .main .content .info .r{padding: 25px;box-sizing: border-box;}
#product.detail .main .content .info .r .btn-box{position: initial;padding-top: 30px;display: flex;justify-content: space-around;}
#product.detail .main .content .info .r .btn-box .btn{width: 40%;height: 40px;line-height: 40px}
#product.detail .main .content .detail, #product.detail .main .content .same{padding: 15px;margin-top: 30px}
#product.detail .main .same-swiper{padding-bottom: 50px}
#product.detail .main .same-swiper .swiper-wrapper{margin-bottom: 0}
#product.detail .main .same-swiper .swiper-slide .item{margin-bottom: 0;padding: 0;}
#product.detail .main .same-swiper .swiper-slide .title{font-size: 1.5rem;height: 20px;padding-top: 10px;}
#product .main .list .item .dot{margin-bottom: 0;width: 35px;height: 35px}

#solution .main .list{margin-bottom: 0}
#solution .main .list .item{padding: 0;margin-bottom: 0}
#solution .main .list .item .info{padding: 0}
#solution .main .list .item .info .dot{position: inherit;width: 40px;height: 40px;margin: 20px auto;}

#service .top .container{flex-direction: column;align-items:flex-start}
#service .main{padding: 50px 0 0}
#service .main .title{display: none}
#service .main .content{flex-direction: column;}
#service .main .content .l{text-align: center}
#service .main .content .l img{width: 80%}
#service .main .content .r{padding:40px 20px 20px;box-sizing: border-box;width: 100%}
#service .main .r img{width:25px}
#service.download .main{padding-top: 20px}
#service.download .main .menu{width: 100%;padding: 0 20px;box-sizing: border-box}
#service.download .main .menu .t{text-align: center}
#service.download .main .menu ul.class-1 > li{margin-bottom: 15px}
#service.download .main .menu ul.class-1 > li > a{font-size: 1.5rem;padding-bottom: 10px;margin-bottom: 10px}
#service.download .main .menu ul.class-1 > li > ul a{line-height: 35px;margin-bottom: 0}
#service.download .main .list{padding:0 20px 20px}
#service.download .main .list .item{padding: 15px 60px 15px 80px}
#service.download .main .list .file-type{width: 50px;height: 50px;left: 15px}
#service.download .main .list .icon{width: 35px;height: 35px;right: 15px;bottom: 10px;margin: 0;top: initial;}

#news .top .container{flex-direction: column;align-items:flex-start}
#news .main{padding: 15px;box-sizing: border-box;}
#news .main .title{display: none}
#news.index .list .first, #news.index .list .item{flex-direction: column;}
#news.index .list .first .img{width: 100%;height: 250px;}
#news.index .list .con{padding: 15px}
#news.index .list .con .time{position: initial}
#news.index .list .con .time p:nth-of-type(1){font-size: 3.5rem !important}
#news.index .list .con .time p:nth-of-type(2){padding: 0  !important}
#news.index .list .con .t{font-size: 1.6rem !important;padding: 10px 0 !important;margin-bottom: 10px;}
#news.index .list .con .t::before{bottom: 0 !important}
#news.index .list .con .desc{font-size: 1.2rem;max-height: 70px !important;height: initial}
#news.index .list .con .btn{margin-top: 30px !important}
#news.index .list .item .img{width: 100%}
#news.index .list .item .con{padding: 15px}
#news.index .list .item .dot{margin-top: 30px;margin-left: calc(100% - 50px)}
#news.index .pagination{margin: 30px 0}

#contact.index .main{position: relative}
#contact.index .main .title{display: none}
#contact.index .main .con{padding: 20px;flex-direction: column-reverse;box-sizing: border-box;margin-bottom: 50px}
#contact.index .main .con .l{width: 100%;padding: 0}
#contact.index .main .con .img{width: 100%}
#contact.index .main .con .l .company{font-size: 2rem;padding: 15px 0;margin-bottom: 10px}
#contact.index .main .con .l .company::before{bottom: 0}
#contact.index .main .con .l .sologon{margin-bottom: 30px}
#contact.index .main:after {content: '';width: 100%;height: 200px;position: absolute;left: 0;bottom: -100px;background-color: #f7f8fb;z-index: -1;}

#article.detail .banner-img{height: 200px !important;}
#article.detail .banner-img .title{font-size: 2.5rem}
#article.detail .top{padding: 10px 0}
#article.detail .top .share{padding-left: 20px}
#article.detail .detail{overflow-x: scroll;padding: 30px 20px}
#article.detail .detail img{width: 100%}
#article.detail .foot-operation .container{flex-direction: column;}
#article.detail .foot-operation .container .r{padding-top: 20px;width: 100%}
#article.detail .foot-operation .container .r .btn{margin: 0 auto}