/* pc样式 */
@media screen and (min-width: 1024px){
    .ztzl-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.8rem;
    }

    .ztzl-item-img {
        width: 8rem;
        height: 4.5rem;
        background-color: var(--zt_color--);
    }
    .ztzl-item-img-left {
        transform: translate(0.3rem,0.3rem);
        width: 8rem;
        height: 5.5rem;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 8rem auto;
    }
    .ztzl-item-img-right {
        transform: translate(-0.3rem,0.3rem);
        width: 8rem;
        height: 5.5rem;
        background-position: top  center;
        background-repeat: no-repeat;
        background-size: 8rem auto;
    }
    .ztzl-item-text {
        width: 6rem;
        background-image: url(../imgs/bycg_text_bj.png);
        background-position: left top;
        background-repeat: no-repeat;
        background-size: 0.04rem auto;
    }

    .ztzl-item-text-top {
        padding-left: 20px;
        display: flex;
    }
    .ztzl-item-text-top>h2 {
       display:none;
        margin-right: 0.2rem;
        height: 100%;
        font-size: 0.5rem;
        color: var(--zt_color--);
        padding: 0 0.3rem 0.1rem 0.2rem;
        background-image: url(../imgs/F.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .ztzl-item-text-top>h3 {
        font-weight: 500;
        writing-mode: vertical-lr;
        font-size: 0.3rem;
        color: var(--zt_color--);
    }
    .ztzl-item-text-top>span {
        width: 0.3rem;
	    height: 1.2rem;
        display: block;
        background-image: url(../imgs/ztzl_xiexian.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 0.3rem auto;
    }
    .ztzl-item-text-top>h4 {
        font-weight: 500;
        writing-mode: vertical-lr;
        font-size: 0.3rem;
        color: #333333;
    }
    .ztzl-item-text-center {
        margin: 0.4rem 0;
        font-size: 0.18rem;
        line-height: 0.4rem;
        color: #333333;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 7;
        -webkit-box-orient: vertical;
    }
    .ztzl-item-text-center>p {
        text-indent: 2em;
    }
    .ztzl-item-text-bottom {
        color: var(--zt_color--);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1rem;
        height: 0.3rem;
        border: solid 1px var(--zt_color--);
    }

    .ztzl-video-box {
        margin-top: 4rem;
        position: relative;
    }
    .ztzl-video-box>img {
        height: 2.4rem;
        position: absolute;
        top: -2.3rem;
        left: 50%;
        transform: translate(-50%,0);
    }
    .ztzl-video-title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.4rem;
        font-weight: 500;
        color: #fff;
        width: 100%;
        height: 1.2rem;
        background-color: var(--zt_color--);
    }
    .ztzl-video {
        position: relative;
        height: 6.4rem;
    }
    .ztzl-video>video {
        width: 100%;
        height: 100%;
    }
    .ztzl-video-play {
        cursor: pointer;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .ztzl-video-play>img {
        width: 1rem;
    }

    .ztzl-list {
        padding: 1rem 0;
        overflow: hidden;
    }

    .swiper-ztzl-img {
        overflow: hidden;
        display: block;
        width: 4rem;
        height: 2.6rem;
        position: relative;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 4rem auto;
    }
    .swiper-ztzl-img>img {
        height: 0.4rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .ztzl-bjyy {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.4);
    }
    .swiper-ztzl .swiper-slide:nth-child(2n) {
        transform: translate(-0.2rem, 0.5rem);
    }
    
    .swiper-ztzl-title {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 0.2rem;
        color: #333333;
        padding-top: 0.2rem;
    }
}

/* 移动端样式 */
@media screen and (max-width: 1024px) {
    .ztzl-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.8rem;
    }

    .ztzl-item-img {
        width: 8rem;
        height: 4.5rem;
        background-color: var(--zt_color--);
    }
    .ztzl-item-img-left {
        transform: translate(0.3rem,0.3rem);
        width: 8rem;
        height: 5.5rem;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 8rem auto;
    }
    .ztzl-item-img-right {
        transform: translate(-0.3rem,0.3rem);
        width: 8rem;
        height: 5.5rem;
        background-position: top  center;
        background-repeat: no-repeat;
        background-size: 8rem auto;
    }
    .ztzl-item-text {
        width: 6rem;
        background-image: url(../imgs/bycg_text_bj.png);
        background-position: left top;
        background-repeat: no-repeat;
        background-size: 0.04rem auto;
    }

    .ztzl-item-text-top {
         padding-left: 20px;
        display: flex;
    }
    .ztzl-item-text-top>h2 {
       display:none;
        margin-right: 0.2rem;
        height: 100%;
        font-size: 0.5rem;
        color: var(--zt_color--);
        padding: 0 0.3rem 0.1rem 0.2rem;
        background-image: url(../imgs/F.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .ztzl-item-text-top>h3 {
        font-weight: 500;
        writing-mode: vertical-lr;
        font-size: 0.3rem;
        color: var(--zt_color--);
    }
    .ztzl-item-text-top>span {
        width: 0.3rem;
	    height: 1.2rem;
        display: block;
        background-image: url(../imgs/ztzl_xiexian.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 0.3rem auto;
    }
    .ztzl-item-text-top>h4 {
        font-weight: 500;
        writing-mode: vertical-lr;
        font-size: 0.3rem;
        color: #333333;
    }
    .ztzl-item-text-center {
        margin: 0.4rem 0;
        font-size: 0.18rem;
        line-height: 0.4rem;
        color: #333333;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 7;
        -webkit-box-orient: vertical;
    }
    .ztzl-item-text-center>p {
        text-indent: 2em;
    }
    .ztzl-item-text-bottom {
        color: var(--zt_color--);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1rem;
        height: 0.3rem;
        border: solid 1px var(--zt_color--);
    }

    .ztzl-video-box {
        margin-top: 4rem;
        position: relative;
    }
    .ztzl-video-box>img {
        height: 2.4rem;
        position: absolute;
        top: -2.3rem;
        left: 50%;
        transform: translate(-50%,0);
    }
    .ztzl-video-title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.4rem;
        font-weight: 500;
        color: #fff;
        width: 100%;
        height: 1.2rem;
        background-color: var(--zt_color--);
    }
    .ztzl-video {
        position: relative;
        height: 6.4rem;
    }
    .ztzl-video>video {
        width: 100%;
        height: 100%;
    }
    .ztzl-video-play {
        cursor: pointer;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .ztzl-video-play>img {
        width: 1rem;
    }

    .ztzl-list {
        padding: 1rem 0;
        overflow: hidden;
    }

    .swiper-ztzl-img {
        overflow: hidden;
        display: block;
        width: 4rem;
        height: 2.6rem;
        position: relative;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 4rem auto;
    }
    .swiper-ztzl-img>img {
        height: 0.4rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .ztzl-bjyy {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.4);
    }
    .swiper-ztzl .swiper-slide:nth-child(2n) {
        transform: translate(0, 0.5rem);
    }
    
    .swiper-ztzl-title {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 0.2rem;
        color: #333333;
        padding-top: 0.2rem;
    }
}

@media screen and (max-width: 800px) {

    .ztzl-item-img {
        width: 54%;
    }
    .ztzl-item-img-left,.ztzl-item-img-right {
        width: 100%;
        height: 5rem;
        background-size: auto 5rem;
    }
    .ztzl-item-text {
        width: 40%;
    }

    .swiper-ztzl .swiper-slide:nth-child(2n) {
        transform: translate(0, 0);
    }
    .ztzl-video-title {
        height: 0.6rem;
        font-size: 0.3rem;
    }
    .ztzl-video {
        height: 5rem;
    }
}

@media screen and (max-width: 600px) {
    .ztzl-item {
        display: block;
        margin-bottom: 0.8rem;
    }
    .ztzl-item-img {
        width: 100%;
    }
    .ztzl-item-img-left,.ztzl-item-img-right {
        width: 100%;
        height: 100%;
         transform: translate(0, 0);
    }
    .ztzl-item-text {
        margin: 0.5rem 0;
        width: 100%;
    }
    .ztzl-video-box {
        margin-top: 1.8rem;
    }
    .ztzl-video-box>img {
        height: 1.5rem;
        top: -1.4rem;
    }
    .ztzl-video {
        height: 3rem;
    }
}
@media screen and (max-width: 420px){
    .ztzl-video {
        height: 3rem;
    }
}