﻿@media screen and (min-width:786px) and (max-width:1600px) {
    .home_solotion .main li h3 {
        white-space: nowrap
    }

    .about_service {
        overflow: hidden
    }

    .products_banner .products_banner_nav {
        left: 92%
    }

    .products_banner .head {
        padding: 60px 3rem 0 0
    }

    .home_product_swiper_box .swiper_btns,.home_blog_swiper_box .swiper_btns {
        display: none
    }

    .home_product .head ul li {
        font-size: 15px;
        white-space: nowrap
    }
}

@media screen and (min-width:786px) and (max-width:1400px) {
    .content {
        padding: 0 1.2rem
    }

    .swiper_btns {
        display: none
    }

    .home_solution .main {
        grid-template-columns: repeat(3,1fr)
    }

    .about_banner .head p {
        width: 70%
    }

    .contact_banner .head {
        width: 70%
    }

    .products_banner .products_banner_nav {
        left: 90%;
        width: 140px
    }

    .products_banner .products_banner_nav .product_banner_swiper {
        padding-left: 0;
        padding-right: 0
    }
}

@media screen and (min-width:786px) and (max-width:1200px) {
    .content {
        max-width: 1000px
    }

    .swiper_content {
        max-width: 1020px
    }

    header .header .left .logo img {
        width: 138px
    }

    header .header .right nav div>ul {
        gap: 1rem
    }

    header .header .right .icon_search {
        margin: 0 1rem
    }

    header .header .right .button {
        width: 120px;
        font-size: 1rem
    }

    .home_banner .head {
        width: 100%
    }

    .home_solution .main li:hover div:first-child {
        top: 60px
    }

    .home_solution .main li div:first-child {
        width: calc(100% - 2rem)
    }

    .about_banner .head p {
        width: 80%
    }

    .about_about .imgs .pic2 {
        bottom: 0
    }

    .about_service {
        padding: 80px 0
    }

    .about_service .img {
        top: -30px
    }

    .about_factory .about_factory_swiper .swiper-slide div:first-child {
        bottom: -115px
    }

    .about_certification {
        padding: 200px 0
    }

    .about_certification .about_certification_swiper .img {
        height: auto
    }

    .about_certification .about_certification_swiper .img img {
        height: auto;
        display: block
    }

    .about_center .head p {
        width: 80%
    }

    .about_market .head p {
        width: 80%
    }

    .sidebar_mark {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .sidebar_mark p {
        font-size: .9rem;
        line-height: 1.5rem;
        margin-bottom: .5rem
    }

    .contact_banner .head {
        width: 80%
    }

    .products_banner .right h2 {
        bottom: 175px
    }

    .products_factory .imgs .pic2 {
        bottom: 0
    }

    .solution_banner .head {
        width: 70%
    }

    .solution_strength .head p {
        width: 70%
    }

    .solution_requirement1 .imgs .item .img {
        height: auto
    }

    .solution_requirement1 .imgs .item .img img {
        height: auto;
        display: block
    }

    .solution_requirement2 .imgs .item .img {
        height: auto
    }

    .solution_requirement2 .imgs .item .img img {
        height: auto;
        display: block
    }

    .solution_case .head p {
        width: 90%
    }

    .solution_case .imgs .item .img {
        height: auto
    }

    .solution_case .imgs .item .img img {
        height: auto;
        display: block
    }

    .product_intro_left .info {
        padding: 2rem 3rem 0 0
    }

    .product_intro_right .info {
        padding: 2rem 0 0 3rem
    }

    .product_aging h3+p {
        width: 80%
    }

    .product_pack h3+p {
        width: 80%
    }
}

@media screen and (min-width:786px) and (max-width:1000px) {
    .content {
        max-width: 786px
    }

    .swiper_content {
        max-width: 806px
    }

    header .header .left .logo img {
        width: 120px
    }

    header .header .right nav div>ul {
        gap: 1rem
    }

    header .header .right nav div>ul li>a {
        font-size: 1rem
    }

    header .header .right .button {
        display: none
    }

    .cta .head {
        padding-right: 2rem
    }

    footer .footer .about_us {
        display: none
    }

    .home_banner .head h1 {
        font-size: 66px
    }

    .home_about .imgs .pic1 {
        top: 8rem
    }

    .home_about .num ul li span {
        font-size: 2rem
    }

    .home_about .num ul li p {
        font-size: 14px
    }

    .home_solution .head {
        width: 100%
    }

    .home_solution .main {
        grid-template-columns: repeat(2,1fr)
    }

    .about_banner .head p {
        width: 100%
    }

    .about_about .head {
        padding-top: 1rem;
        padding-left: 1rem
    }

    .about_about .head p {
        font-size: 1rem;
        line-height: 1.5;
        padding-top: 1rem
    }

    .about_about .head .button {
        margin-top: 1rem
    }

    .about_service {
        padding: 50px 0
    }

    .about_service .img {
        top: 0
    }

    .about_step .main .items li {
        padding: 0 1rem
    }

    .about_step .main .dots {
        gap: 17%
    }

    .about_step .main .dots li {
        width: 12%
    }

    .about_certification {
        padding: 100px 0
    }

    .about_certification .about_certification_swiper_box {
        top: 50%;
        transform: translateY(-50%)
    }

    .about_market .head p {
        width: 100%
    }

    .blogs_banner .head {
        width: 80%
    }

    .case_main .main ul li:hover .info {
        padding-top: 0
    }

    .contact_banner .head {
        width: 100%
    }

    .contact_banner .nav {
        max-width: calc(100% - 2.4rem);
        gap: 1rem
    }

    .contact_banner .nav li {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .contact_banner .nav li p {
        margin: 1.5rem 0 .5rem
    }

    .contact_banner .nav li span {
        font-size: 14px;
        line-height: 1.4rem
    }

    .contact_banner .nav li a {
        word-break: break-all
    }

    .products_banner .right h2 {
        bottom: 275px
    }

    .products_factory .head {
        padding: 0 1rem 0 0
    }

    .products_factory .imgs .pic1 {
        top: 150px
    }

    .products_factory .imgs .pic2 {
        bottom: 100px
    }

    .prodcuts_service .head {
        padding-left: 45%
    }

    .solution_banner .head {
        width: 90%
    }

    .solution_nav .solution_nav_swiper .swiper-slide a {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .solution_strength .head p {
        width: 90%
    }

    .solution_requirement1 .main .right {
        padding-left: 3rem
    }

    .solution_requirement2 .main .right {
        padding-left: 3rem
    }

    .solution_case .head p {
        width: 100%
    }

    .product_intro_left .content>.flex {
        align-items: center
    }

    .product_intro_left .info {
        padding-top: 0
    }

    .product_intro_right .content>.flex {
        align-items: center
    }

    .product_intro_right .info {
        padding-top: 0
    }

    .product_test .product_test_swiper .swiper-slide .info {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .product_aging h3+p {
        width: 100%
    }

    .product_pack h3+p {
        width: 100%
    }
}