@media screen and (max-width: 768px){
    .header{

    }
    .header .top{
        width: 100%;
        height: 60px;
        padding: 0 10px;
        box-sizing: border-box;
        z-index: 22;
        position: fixed;
        top: 0;
        left: 0;
    }
    .header .top .slogan{
        display: none;
    }
    .header .top .contact{
        display: none;
    }
    .header .top .menu_btn{
        width: 30px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

    }
    .header .top .menu_btn .open{
        width: 100%;
    }
    .header .top .menu_btn .open img{
        width: 100%;
    }
    .header .top .menu_btn .close{
        width: 100%;
        display: none;
        padding: 0 4px;
        box-sizing: border-box;
    }
    .header .top .menu_btn .close img{
        width: 100%;
    }
    .header .top .menu_btn.active .open{
        display: none;
    }
    .header .top .menu_btn.active .close{
        display: block;
    }
    .header .nav{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        background: none;
        z-index: 20;
        background-color: #fff;
        padding-top: 60px;
    }
    .header .nav::before{
        content: none;
    }
    .header .nav.active{
        display: block;
    }
    .header .nav .list{
        width: 100%;
        flex-wrap: wrap;
        align-content: flex-start;
    }
    .header .nav .list .item{
        width: 100%;
        height: 50px;
        color: #0C0C0C;
        margin-right: 0;
        font-size: 17px;
        margin-bottom: 16px;
    }
    .header .nav .list .item.active{
        color: #fff;
    }

    .footer .friend{
        display: none;
    }
    .footer .friend .list{
        width: 100%;
        padding: 15px 12px;
        box-sizing: border-box;
    }
    .footer .friend .list span{
        font-size: 14px;
    }
    .footer .friend .list a{font-size: 14px;line-height: 20px;height: 20px;margin-right: 10px;}
    .footer .content{
        padding-bottom: 60px;
    }
    .footer .content .box{
        width: 100%;

    }
    .footer .content .box .up{
        height: auto;
        flex-wrap: wrap;
    }
    .footer .content .box .up .slogan{
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    .footer .content .box .up .slogan img{
        width: 50%;
    }
    .footer .content .box .up .list{
        display: none;
    }
    .footer .content .box .up .contact{
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
    .footer .content .box .up .contact .icon img{
        width: 30px;
    }
    .footer .content .box .up .contact .txt p:nth-child(1){
        font-size: 18px;
    }
    .footer .content .box .up .contact .txt{
        width: auto;
        margin-left: 16px;
        flex-wrap: nowrap;
        align-items: center;
    }
    .footer .content .box .up .contact .txt p{
        width: auto;
        margin-right: 10px;
    }

    .footer .content .box .up .contact .txt p:nth-child(2){
        font-size: 20px;
    }
    .footer .content .box .dw{
        flex-wrap: wrap;
        height: auto;
        padding: 12px;
        box-sizing: border-box;
    }
    .footer .content .box .dw .left{
        width: 100%;
        font-size: 12px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    .footer .content .box .dw .center{
        font-size: 12px;
        margin-bottom: 10px;
    }
    .footer .content .box .dw .right{
        font-size: 12px;
    }
    .footer .content .box .dw .right i{
        font-size: 12px;
    }
    .footer .fiexd_tel{
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        width: 100%;
        justify-content: center;
        background: linear-gradient(to right,#14af54,#19733e);
        z-index: 99;
        padding: 6px 0;
    }
    .footer .fiexd_tel img{width: 20px;}
    .footer .fiexd_tel p{width: 100%;text-align: center;font-size: 12px;color: #fff;margin-top: 4px}

    .page_banner{
        padding-top: 60px;
    }


    .banner{
        height: 300px;
        padding-top: 60px;
    }
    .Ih-service{
        height: auto;
    }
    .Ih-service .box{
        width: 100%;
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
    }
    .Ih-service .box .item{
        width: 49.8%;
        height: 100px;
        box-sizing: border-box;
        border: 1px solid #19733e1f;
    }
    .Ih-service .box .item:last-of-type{
        border-right: 1px solid #19733e1f;
    }
    .Ih-service .box .item .img img{
        width: 30px;
    }
    .Ih-service .box .item .txt p:nth-child(1){
        font-size: 17px;
    }
    .Ih-service .box .item .txt p:nth-child(2){
        font-size: 12px;
    }
    .Ih-cases .box{
        width: 100%;
    }
    .Ih-cases .box .top .t2{
        font-size: 12px;
    }

    .Ih-cases .box .part1{
        flex-wrap: wrap;
    }
    .Ih-cases .box .part1 .left{
        width: 100%;
        height: 300px;
    }
    .Ih-cases .box .part1 .right{
        width: 100%;
        padding: 20px 12px;
    }
    .Ih-cases .box .part1 .right .title{
        font-size: 20px;
    }
    .Ih-cases .box .part1 .right .desc{
        font-size: 12px;
        line-height: 24px;
    }
    .Ih-cases .box .part1 .right .tag{
        margin-top: 10px;
    }
    .Ih-cases .box .part1 .right .tag span{
        padding: 4px 8px;
        font-size: 12px;
        margin-bottom: 10px;
    }
    .Ih-cases .box .part1 .right .add{
        margin-top: 14px;
        font-size: 14px;
    }
    .Ih-cases .box .part1 .right .contact{
        height: 100px;
        box-sizing: border-box;
    }
    .Ih-cases .box .part1 .right .contact .item{
        width: 32%;
    }
    .Ih-cases .box .part1 .right .contact .item .up{
        font-size: 12px;
        padding: 4px 0;
    }
    .Ih-cases .box .part1 .right .contact .item .up .wx{
        padding: 20px 10px 10px;

    }
    .Ih-cases .box .part1 .right .contact .item .up.online{
        font-size: 12px;
    }
    .Ih-cases .box .part1 .right .contact .item .dw{
        font-size: 12px;
    }
    .Ih-cases .box .part1 .right .contact .item .up.car{
        font-size: 12px;
    }
    .Ih-cases .box .part1 .right .service .top{
        margin-top: 14px;
    }

    .Ih-cases .box .part1 .right .service .top span{
        font-size: 14px;
    }
    .Ih-cases .box .part1 .right .service .item{
        font-size: 12px;
    }
    .Ih-cases .box .part1 .right .service .item span{
        width: 36px;
        height: 20px;
    }

    .Ih-process .box{
        width: 100%;
        overflow: hidden;
    }
    .Ih-process .box .top .t2{
        font-size: 12px;
    }
    .Ih-process .box .list{
        height: auto;
        grid-template-columns: repeat(3, 1fr);
    }
    .Ih-process .box .list .item{
        height: 200px;
    }
    .Ih-process .box .list .item .img{
        width: 60px;
        height: 60px;
    }
    .Ih-process .box .list .item .t1{
        font-size: 14px;
    }
    .Ih-process .box .list .item .t2,.Ih-news .box .top .t2{
        font-size: 12px;
    }
    .Ih-process .box .list .item .arraw{
        top: 25%;
    }
    .Ih-news .box{
        width: 100%;
    }
    .Ih-news .box .content{
        flex-wrap: wrap;
        height: auto;
        padding: 0 12px;
        box-sizing: border-box;
    }

    .Ih-news .box .content .left{
        width: 100%;
        height: 334px;
        margin-bottom: 16px;
    }
    .Ih-news .box .content .left .type .l{
        font-size: 16px;
    }
    .Ih-news .box .content .left .type .r{
        font-size: 16px;
    }
    .Ih-news .box .content .left .list{
        height: 280px;
    }
    .Ih-news .box .content .left .list .item span{font-size: 14px}
    .Ih-news .box .content .left .list .item .title{
        font-size: 14px;
        margin-bottom: 8px;
    }
    .Ih-news .box .content .right{
        width: 100%;
        height: 216px;
    }
    .Ih-news .box .content .right .up .txt .t1{
        font-size: 16px;
    }
    .Ih-news .box .content .right .up .txt .t2{
        font-size: 12px;
    }
    .Ih-news .box .content .right .dw{
        height: 110px;
    }
    .Ih-news .box .content .right .dw .item img{
        width: 30px;
    }
    .Ih-news .box .content .right .dw .item p{
        font-size: 16px;
    }
    .product_main .content{
        width: 100%;
        flex-wrap: wrap;
    }

    .product_main .content .left{
        width: 100%;
    }
    .product_main .content .left .location{
        font-size: 12px;
        padding-bottom: 10px;
    }
    .product_main .content .left .list .item{
        height: auto;
    }
    .product_main .content .left .list .item .pic{
        width: 130px;
        height: 156px;
    }
    .product_main .content .left .list .item .txt .title{
        font-size: 16px;
    }
    .product_main .content .left .list .item .txt .add{
        font-size: 12px;
    }
    .product_main .content .left .list .item .txt .tag span{
        font-size: 12px;
    }
    .product_main .content .left .list .item .txt .desc{
        font-size: 12px;
    }
    .product_main .content .left .list .item .txt .service{
        flex-wrap: wrap;
    }
    .product_main .content .left .list .item .txt .service .btn_group button img{
        width: 12px;
    }
    .product_main .content .left .list .item .txt .service .price_group{
        width: 100%;
        margin-top: 10px;
        margin-left: 0;
    }
    .product_main .content .left .list .item .txt .service .price_group span{
        font-size: 12px;
        padding: 3px 6px;
        border-radius: 4px;
    }
    .product_main .content .right{
        width: 100%;
    }
    .product_main .content .right .service .item{
        height: 26px;
        font-size: 12px;
        margin-bottom: 16px;
    }
    .product_main .content .right .service .item img{
        width: 16px;
    }
    .product_main .content .right .service .btn{
        height: 34px;
        font-size: 14px;
    }
    .product_main .content .right .recommend{
        margin-top: 20px;
    }
    .product_main .content .right .recommend .top{
        font-size: 16px;
        height: 20px;
        line-height: 22px;
    }
    .product_main .content .right .recommend .list .item .txt .t1{
        font-size: 16px;
    }
    .product_main .content .right .recommend .list .item .txt .t2{
        font-size: 12px;
        line-height: 20px;
        margin-top: 10px;
    }
    .products-detail{
        padding: 60px 0 100px;
    }
    .products-detail .content{
        width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
    }
    .products-detail .content .crumb{
        font-size: 14px;
    }
    .products-detail .content .part1{
        flex-wrap: wrap;
    }
    .products-detail .content .part1 .left{
        width: 100%;
        height: 300px;
    }

    .products-detail .content .part1 .right .contact .item .up .wx{
        padding: 20px 10px 10px;
    }




    .products-detail .content .part1 .right{
        width: 100%;
        padding: 20px 12px;
    }
    .products-detail .content .part1 .right .title{
        font-size: 20px;
    }
    .products-detail .content .part1 .right .desc{
        font-size: 12px;
        line-height: 24px;
    }
    .products-detail .content .part1 .right .tag{
        margin-top: 10px;
    }
    .products-detail .content .part1 .right .tag span{
        padding: 4px 8px;
        font-size: 12px;
        margin-bottom: 10px;
    }
    .products-detail .content .part1 .right .add{
        margin-top: 14px;
        font-size: 14px;
    }
    .products-detail .content .part1 .right .contact{
        height: 100px;
        box-sizing: border-box;
    }
    .products-detail .content .part1 .right .contact .item{
        width: 32%;
    }
    .products-detail .content .part1 .right .contact .item .up{
        font-size: 12px;
        padding: 4px 0;
    }
    .products-detail .content .part1 .right .contact .item .up.online{
        font-size: 12px;
    }
    .products-detail .content .part1 .right .contact .item .dw{
        font-size: 12px;
    }
    .products-detail .content .part1 .right .contact .item .up.car{
        font-size: 12px;
    }
    .products-detail .content .part1 .right .service .top{
        margin-top: 14px;
    }

    .products-detail .content .part1 .right .service .top span{
        font-size: 14px;
    }
    .products-detail .content .part1 .right .service .item{
        font-size: 12px;
    }
    .products-detail .content .part1 .right .service .item span{
        width: 36px;
        height: 20px;
    }
    .products-detail .content .part2 .top{
        font-size: 18px;
        height: 20px;
        line-height: 20px;
        border-left: 3px solid #19733e;
    }
    .products-detail .content .part3 .top{
        font-size: 17px;
    }
    .products-detail .content .part3 .top::before{
        left: 10%;
    }
    .products-detail .content .part3 .top::after{
        right: 10%;
    }
    .products-detail .content .part3 .list{
        grid-template-columns: repeat(1, 1fr);
    }
    .products-detail .content .part3 .list .item{
        height: 260px;
    }
    .products-detail .content .part3 .list .item .img{
        height: 220px;
    }
    .products-detail .content .part3 .list .item .txt{
        height: 40px;
        font-size: 16px;
    }
    .news_content{
        padding: 60px 0 100px;

    }
    .news_content .content{
        width: 100%;
    }
    .news_content .content .crumb{
        font-size: 14px;
    }
    .news_content .content .list .item{
        height: 100px;
    }
    .news_content .content .list .item .left{
        width: 15%;
    }
    .news_content .content .list .item .left h1{
        font-size: 36px;
    }
    .news_content .content .list .item .left p{
        font-size: 14px;
    }
    .news_content .content .list .item .right .apo_one{
        font-size: 16px;
    }
    .news_content .content .list .item .right .apo_two{
        font-size: 14px;
        line-height: 20px;
    }
    .news_content .content .list .item .right .op span{
        font-size: 12px;
    }
    .article_detail{
        padding: 60px 0;
    }

    .article_detail .content{
        width: 100%;
        flex-wrap: wrap;
    }
    .article_detail .content .left .crumb{
        font-size: 14px;
    }
    .article_detail .content .left .crumb a:last-child{display: none;}
    .article_detail .content .left{
        width: 100%;
    }
    .article_detail .content .left .title{
        font-size: 20px;
        line-height: 26px;
    }
    .article_detail .content .left .time{
        margin-top: 20px;
        padding-bottom: 20px;
    }
    .article_detail .content .left .time span{
        font-size: 14px;
    }
    .article_detail .content .left .cont{
        line-height: 26px;
        font-size: 16px;
        margin-top: 20px;
    }
    .article_detail .content .right{
        width: 100%;
        margin-top: 20px;
    }
    .article_detail .content .right .top{
        font-size: 17px;
        height: 20px;
        line-height: 22px;
    }
    .article_detail .content .right .list{
        margin-top: 10px;
    }
    .article_detail .content .right .item{
        padding: 10px 0;
    }
    .article_detail .content .right .item .title{
        font-size: 16px;
        line-height: 20px;
    }
    .article_detail .content .right .item .desc{
        font-size: 12px;
        line-height: 22px;
        margin-top: 10px;
    }
    .article_detail .content .right .item .time{
        margin-top: 10px;
        font-size: 12px;
    }
    .about_content{
        padding: 20px 0;
    }
    .about_content .content{
        width: 100%;
    }
    .about_content .content .part1 .top{
        height: 20px;
    }
    .about_content .content .part1 .top::before{
        left: 5%;
        width: 50px;
    }
    .about_content .content .part1 .top::after{
        right: 5%;
        width: 50px;
    }
    .about_content .content .part1 .desc{
        font-size: 14px;
    }
    .about_content .content .part2{
        padding: 20px 0;
        font-size: 16px;
        line-height: 26px;
    }
    .about_content .content .part3{
        flex-wrap: wrap;
    }
    .about_content .content .part3 .top{
        font-size: 18px;
    }
    .about_content .content .part3 .item{
        width: 48%;
        height: 204px;
        margin-bottom: 14px;
    }
    .about_content .content .part3 .item .img img{
        width: 30px;
    }
    .about_content .content .part3 .item .txt p:nth-of-type(1){
        font-size: 14px;
    }
    .about_content .content .part3 .item .txt p:nth-of-type(2){
        font-size: 12px;
        margin-top: 10px;
        line-height: 18px;
    }
    .about_content .content2{
        width: 100%;
    }
    .about_content .content3{
        width: 100%;
    }
    .about_content .content3 .img{
        width: 156px;
    }
    .about_content .content3 .txt{
        font-size: 18px;
    }

}