﻿/* pc样式 */
@media screen and (min-width: 1024px) {
    .content {
        background-image: url(../imgs/content_bj.png);
        background-repeat: no-repeat;
        background-size: auto 6.4rem;
        background-position: left calc(100% - 2.4rem);
        min-height: 12rem;
    }

    .header {
        height: 100%;
        width: 100%;
        background-image: none;
    }

    .header-fixed {
        background-color: var(--zt_color--);
    }

    .header-fixed>.top-nav>.menu>ul>li>a {
        color: #ffffff;
    }


    /* 二级导航 */
    .content-twonavbox {
        position: relative;
    }

    .content-twonavbox>ul {
        height: 1.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content-twonavbox>ul>li {
        padding: 0 0.7rem;
        border-right: 1px solid var(--zt_color--);
    }

    .content-twonavbox>ul>li:last-child {
        border-right: none;
    }

    .content-twonavbox>ul>li>a {
        transform: translate(0.35rem, 0.1rem);
        display: flex;
        align-items: center;
        padding: 0 0.7rem 0.15rem 0;
        font-size: 0.24rem;
        color: var(--zt_color--);
    }

    .twonav-active>a {
        font-weight: 700;
        background-image: url(../imgs/title_text_bj2.png);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: auto 0.26rem;
    }

    .dqwz {
        transform: translate(0px, -50%);
        position: absolute;
        right: 0;
        top: 50%;
        display: flex;
        align-items: center;
    }

    .dqwz>img {
        height: 0.18rem;
    }

    .dqwz>a {
        margin: 0 0.05rem;
        font-size: 0.16rem;
    }

    .content-box {
        box-sizing: border-box;
        padding: 0.2rem 0.5rem 0.5rem 0.5rem;
        position: relative;
        min-height: 10.8rem;
        background-image: url(../imgs/box1_top_bj.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: top center;
    }
    .two-content-title {
        padding: 0.4rem 0;
        font-size: 0.4rem;
        color: var(--zt_color--);
        text-align: center;
        font-weight: 500;
    }

    .two-content-bj {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
    }

    .two-content-bj .two-content-bj1,
    .two-content-bj2,
    .two-content-bj3,
    .two-content-bj4,
    .two-content-bj5,
    .two-content-bj6 {
        width: 0.04rem;
        height: 100%;
        position: absolute;
        top: 0.03rem;
        background-repeat: no-repeat;
        background-position: top center;
    }

    .two-content-bj1 {
        background-image: url(../imgs/box1_top_bj1.png);
        background-size: 0.04rem auto;
        left: 0px;
    }

    .two-content-bj2 {
        width: 0.01rem;
        left: 20%;
        background-image: url(../imgs/box1_top_bj2.png);
        background-size: 0.01rem auto;
    }

    .two-content-bj3 {
        width: 0.01rem;
        left: 40%;
        background-image: url(../imgs/box1_top_bj3.png);
        background-size: 0.01rem auto;
    }

    .two-content-bj4 {
        width: 0.04rem;
        right: 39.8%;
        background-image: url(../imgs/box1_top_bj4.png);
        background-size: 0.04rem auto;
    }

    .two-content-bj5 {
        width: 0.04rem;
        right: 20%;
        background-image: url(../imgs/box1_top_bj5.png);
        background-size: 0.04rem auto;
    }

    .two-content-bj6 {
        width: 0.04rem;
        right: 0px;
        background-image: url(../imgs/box1_top_bj5.png);
        background-size: 0.04rem auto;
    }
     /* 翻页样式 */
     .content-page {
        width: 100%;
        height: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content-page-box {
        min-width: 1.5rem;
        height: 0.4rem;
    }

}

/* 移动端样式 */
@media screen and (max-width: 1024px) {
    .content {
        background-image: url(../imgs/content_bj.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: left calc(100% - 2.4rem);
        min-height: 12rem;
    }
    .content-twonavbox {
        position: relative;
    }

    .content-twonavbox>ul {
        height: 1.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content-twonavbox>ul>li {
        padding: 0 0.7rem;
        border-right: 1px solid var(--zt_color--);
    }

    .content-twonavbox>ul>li:last-child {
        border-right: none;
    }

    .content-twonavbox>ul>li>a {
        transform: translate(0.35rem, 0.1rem);
        display: flex;
        align-items: center;
        padding: 0 0.7rem 0.15rem 0;
        font-size: 0.24rem;
        color: var(--zt_color--);
    }

    .twonav-active>a {
        font-weight: 700;
        background-image: url(../imgs/title_text_bj2.png);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: auto 0.26rem;
    }

    .dqwz {
        transform: translate(0px, -50%);
        position: absolute;
        right: 0;
        top: 50%;
        display: flex;
        align-items: center;
    }

    .dqwz>img {
        height: 0.18rem;
    }

    .dqwz>a {
        margin: 0 0.05rem;
        font-size: 0.16rem;
    }

    .content-box {
        box-sizing: border-box;
        padding: 0.2rem 0.2rem 0.5rem 0.2rem;
        position: relative;
        background-image: url(../imgs/box1_top_bj.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: top center;
    }
    .two-content-title {
        padding: 0.4rem 0;
        font-size: 0.4rem;
        color: var(--zt_color--);
        text-align: center;
        font-weight: 500;
    }

    .two-content-bj {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
    }

    .two-content-bj .two-content-bj1,
    .two-content-bj2,
    .two-content-bj3,
    .two-content-bj4,
    .two-content-bj5,
    .two-content-bj6 {
        width: 0.04rem;
        height: 100%;
        position: absolute;
        top: 0.03rem;
        background-repeat: no-repeat;
        background-position: top center;
    }

    .two-content-bj1 {
        background-image: url(../imgs/box1_top_bj1.png);
        background-size: 0.04rem auto;
        left: 0px;
    }

    .two-content-bj2 {
        width: 0.01rem;
        left: 20%;
        background-image: url(../imgs/box1_top_bj2.png);
        background-size: 0.01rem auto;
    }

    .two-content-bj3 {
        width: 0.01rem;
        left: 40%;
        background-image: url(../imgs/box1_top_bj3.png);
        background-size: 0.01rem auto;
    }

    .two-content-bj4 {
        width: 0.04rem;
        right: 40%;
        background-image: url(../imgs/box1_top_bj4.png);
        background-size: 0.04rem auto;
    }

    .two-content-bj5 {
        width: 0.04rem;
        right: 20%;
        background-image: url(../imgs/box1_top_bj5.png);
        background-size: 0.04rem auto;
    }

    .two-content-bj6 {
        width: 0.04rem;
        right: 0px;
        background-image: url(../imgs/box1_top_bj5.png);
        background-size: 0.04rem auto;
    }

        /* 翻页样式 */
        .content-page {
            width: 100%;
            height: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    
        .content-page-box {
            min-width: 1.5rem;
            height: 0.4rem;
        }
}

@media screen and (max-width: 800px) {
    .content-twonavbox>ul {
        height: 1rem;
    }

    .content-twonavbox>ul>li {
        padding: 0 0.7rem;
    }

    .dqwz {
        transform: none;
        position: static;
        width: 100%;
        justify-content: end;
    }

    .content-box {
        margin-top: 0.2rem;
    }
}

@media screen and (max-width: 600px) {
    .content-twonavbox>ul>li {
        padding: 0 0.1rem;
    }

    .content-twonavbox>ul>li>a {
        transform: none;
        padding: 0 0.5rem 0.1rem 0;
    }

    .twonav-active>a {
        background-size: auto 0.22rem;
    }
}