@media (min-width: 1980px) {
    :root {
        --px: 1px;
    }
}

@media (max-width: 1580px) {}

@media (max-width: 1280px) {
    .about-us-sec2 .card-wrap {
        --col: 2;
    }
}

/* -------- <=1024: 平板竖屏/小桌面 -------- */
@media (max-width: 1024px) {}

/* -------- <=768: 手机横向/常见手机竖屏 -------- */
@media (max-width: 768px) {

    :root {
        --header-h: 65px;
        --main-margin: 20px;
    }

    header {
        padding: 0 20px;
    }

    header .main,
    header .main-thin {
        padding: 0;
    }

    header .nav {
        display: none;
    }

    .mobile-nav {
        display: block;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    }

    .mobile-nav .ph_l {
        width: 61%;
        height: 100%;
        position: fixed;
        top: var(--header-h);
        left: -61%;
        z-index: 1120;
        overflow: hidden;
        background: #fff;
        color: rgba(255, 255, 255, .6);
        transition: left .3s;
        box-shadow: 0 -1px 4px rgba(0, 0, 0, .08);
    }

    .mobile-nav .ph_l .sign {
        padding: 20px;
        border-radius: 0;
    }

    .mobile-nav .ph_l .sign-wrap {
        gap: 20px;
    }

    .mobile-nav .ph_l .btn-wrap-m {
        margin-top: 20px;
        padding: 20px;
        gap: 20px;
    }

    .mobile-nav .ph_l .btn-wrap-m .btn-lay {
        width: 100%;
        text-align: center;
    }

    .mobile-nav .ph_r {
        display: block;
        width: 40%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        position: fixed;
        right: -40%;
        top: var(--header-h);
        z-index: 1101;
        transition: right .3s;
        box-shadow: 0 -1px 4px rgba(0, 0, 0, .08);
    }

    .ph_l ul li {
        border-bottom: 1px solid #ccc;
        position: relative;
    }

    .ph_l ul li a {
        padding: 20px;
        color: #000;
        cursor: pointer;
    }

    .ph_l ul li a svg {
        transition: .3s;
    }

    .ph_l ul li a.active svg {
        transform: rotate(90deg);
    }

    .ph_l ul .mobile-nav_secont {
        margin-left: 5px;
    }

    .ph_l ul .mobile-nav_secont a {
        padding: 10px;
    }

    .btn-head-nav-toggle {
        display: block;
        margin-left: 10px;
    }

    .mob-nav-sec {
        margin-bottom: 20px;
        display: none;
    }

    .ph_l ul li .mob-nav-sec a {
        display: block;
        padding: 5px 40px;
    }

    .btn-large-nav-expand {
        display: inherit;
        flex-direction: column;
        cursor: pointer;
    }

    .btn-large-nav-expand i {
        display: block;
        width: 24px;
        height: 2px;
        flex: 0 0 auto;
        background: #000;
        margin-bottom: 4px;
        transition: .5s cubic-bezier(.15, 1, .336, 1)
    }

    .btn-large-nav-expand i:last-of-type {
        margin-bottom: 0
    }

    .btn-large-nav-expand.active i {
        transition: .4s cubic-bezier(.1, .84, .2, 1.4)
    }

    .btn-large-nav-expand.active i:first-of-type {
        transform: translateY(300%) rotate(45deg)
    }

    .btn-large-nav-expand.active i:nth-of-type(2) {
        transform: scaleX(0)
    }

    .btn-large-nav-expand.active i:nth-of-type(3) {
        transform: translateY(-300%) rotate(-45deg)
    }

    .about-us-sec6 .sec-area .item {
        padding-right: 30px;
    }

    .product-detail-sec1 .txt,
    .product-detail-sec1 .pic {
        height: auto;
    }
}

@media (max-width: 576px) {
    header {
        padding: 0;
        top: 0;
        background-color: #fff;
    }

    .header-wrap {
        margin: 0 20px;
        height: var(--header-h);
    }

    header .logo {
        height: 100%;
    }

    header .logo img {
        height: calc(100% - 35px);
    }

    .read-more {
        padding: 10px 20px;
    }

    .card-wrap,
    .solution-sec3 .card-wrap,
    .about-us-sec2 .card-wrap {
        --col: 1;
    }

    .sec-area.col {
        flex-direction: column;
    }

    .sec-area.col>div {
        width: 100%;
    }

    .solution-sec1 .sec-area .item.w3 {
        width: calc((100% - 10px) / 2);
    }

    .about-us-sec6 .sec-wrap {
        flex-direction: column;
        gap: 10px;
    }

    .about-us-sec6 .txt,
    .about-us-sec6 .pic {
        width: 100%;
    }

    .about-us-sec6 .pic {
        height: 40vh;
    }

    .about-us-sec6 .pic .sec-intro {
        font-size: 12px;
    }

    .news-top-cont {
        flex-direction: column;
    }

    .news-top .pic,
    .news-top .txt {
        width: 100%;
    }

    .news-detail-sec1 .info-wrap,
    .news-detail-sec1 .article-content .article-wrap {
        padding: 0;
    }

    .news-top .txt .title {
        font-size: max(16px, 24 * var(--px));
    }

    .yiiPager li a {
        font-size: 14px;
    }

    .product-detail-sec1 .pic {
        height: 240px;
        padding: 0 max(30px, 12%);
    }

    .solution-detail-sec2 .pic {
        padding: 0 40px;
        aspect-ratio: 506 / 255;
    }

    .solution-detail-sec1 .sec-area {
        flex-direction: column;
    }

    .about-us-sec1 .sec-area .pic {
        width: 100%;
    }

    .about-us-sec2 .item .txt .title {
        height: auto;
    }

    .factory-overview-sec1 .item .title {
        height: 3em;
    }

}