.video-main {
    padding-top: 1rem
}

    .video-main .page-tit {
        font-size: .3rem;
        color: #333;
        font-weight: normal;
        padding-bottom: 0.35rem
    }

    .video-main .search-box {
        justify-content: flex-start;
        display: flex;
    }

        .video-main .search-box .search-con {
            position: relative;
        }

        .video-main .search-box input {
            width: 6.4rem;
            height: 0.54rem;
            outline: none;
            border: 1px solid #cbcbcb;
            padding-left: 0.5rem;
            font-size: 0.16rem;
            border-right: none;
            box-sizing: border-box;
            padding-right: 0.2rem;
        }

        .video-main .search-box .icon {
            position: absolute;
            top: 50%;
            left: 0.15rem;
            z-index: 1;
            transform: translate(0,-50%);
            width: 0.2rem;
            height: 0.2rem;
            background: url(/assets/image/video/search.png) no-repeat center;
            background-size: contain;
        }

        .video-main .search-box .search-btn {
            width: 1.04rem;
            color: #fff;
            font-size: 0.18rem;
            height: 0.54rem;
            background-color: #002784;
            border: 1px solid #002784;
        }

.video-tab-box {
    border-bottom: 1px solid #cbcbcb;
    padding-top: 0.3rem;
}

.video-tab {
    border-bottom: 1px solid #cbcbcb;
}

.video-tab a {
    display: inline-block;
    margin-right: 0.8rem;
    font-size: 0.16rem;
    padding: 0.1rem 0;
    border-bottom: 2px solid transparent;
    transition:all 0.3s;
    transform:translate(0,1px);
}
    .video-tab a:hover {
        color: #002784;
    }
    .video-tab a.on {
        color: #002784;
        border-color: #002784;
    }

.video-list ul{
    margin: 0 -0.2rem;
}
.video-list ul::after {
    content: "";
    display: block;
    clear: both;
}

.video-list .item{

    width:33.333333%;
    box-sizing:border-box;
    padding:0 0.2rem;
    float:left;
    margin-top:0.4rem;
}

    .video-list .item .cover {
        width: 100%;
        height: 2.2rem;
        position: relative;
        background-color: #f0f0f0;
        cursor:pointer;
    }

        .video-list .item .cover .icon {
            width: 0.54rem;
            height: 0.54rem;
            background: url(/assets/image/video/play.png) no-repeat center;
            background-size: contain;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: 1;
        }
            .video-list .item .cover img {
            width: 100%;
            object-fit: cover;
            height: 100%;
        }
    .video-list .item .info {
       padding:0 0.1rem;
    }
    .video-list .item .date {
        margin-top: 0.2rem;
        font-size: 0.14rem;
        color: #666;
    }
    .video-list .item .tit {
        margin-top: 0.2rem;
        height:0.6rem;
        line-height:0.3rem;
        font-size: 0.2rem;
        font-weight: normal;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        cursor:pointer;
    }


.video-play-modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .video-play-modal .video-play-main {
        width: 60%;
        height: auto;
        border: 3px solid #000;
        background-color: #000;
    }

    .video-play-modal .video-play-head {
        width: 100%;
        height: 40px;
        background: #000;
    }

    .video-play-modal .close-btn {
        float: right;
        cursor: pointer;
        height: inherit;
        width: auto;
    }

    .video-play-modal video {
        display: block;
        width: 100%;
        outline: none;
        max-height:80vh;
    }


    .video-play-modal .video-play-tool {
        height: 40px;
        background: #000;
        color: #fff;
        line-height: 40px;
        padding: 0 10px;
    }

        .video-play-modal .video-play-tool .down {
            margin-left: 30px;
        }

.empty-text {
    text-align: center;
    padding: 0.2rem;
    font-size: 0.18rem;
    color: #999;
}


@media (max-width: 992px) {
    .video-main .page-tit {
        font-size: .35rem;
    }

    .video-tab a {
        font-size: 0.24rem;
    }

    .video-main .search-box input {
        font-size: 0.2rem;
    }

    .video-main .search-box .search-btn {
        font-size: 0.22rem;
    }
}

@media (max-width: 768px) {
    .video-main .page-tit {
        font-size: .35rem;
    }

    .video-tab a {
        font-size: 0.3rem;
        margin-right:0.3rem;
    }

    .video-main .search-box input {
        font-size: 0.2rem;
    }

    .video-main .search-box .search-btn {
        font-size: 0.22rem;
    }
    .video-list .item .tit {
        font-size: 0.3rem;
        line-height:0.36rem;
        height:0.72rem;
    }
    .video-list .item .date {
        font-size: 0.26rem;
    }
    .video-list .item {
        width: 100%;
    }
    .video-list .item .cover{
        height:auto;
        min-height:2rem;
    }
    .video-main .search-box .icon {
        width: 0.3rem;
        height: 0.3rem;
    }
    .video-tab a {
        padding: 0.2rem 0;
    }
    .video-tab-box {
        padding-top: 0.6rem
    }
    .video-main .search-box .search-btn {
        height: 0.8rem;
        width: 1rem;
        flex-shrink: 0;
    }
        .video-main .search-box .search-con {
            width: calc(100% - 1rem)
        }
    .video-main .search-box .search-con input {
        width: 100%;
        height:0.8rem;
    }
    .video-play-modal .video-play-main{
        width:90%;
    }
}