.title-view{border-bottom: 1px solid #CEE0DB;text-align: center;background-color: #fff;}
.title::after{background: #28B28B;width: 136px;height: 6px;content: '';position: absolute;left: 0;bottom: 0;}
.title::before{z-index: -1;
    content: '';
    position: absolute;
    top: 0px;
    left: -20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    filter: drop-shadow(-6px 4px 16px rgba(25, 185, 85, 0.2));
    background: linear-gradient(
138.05deg, #E6FCF1 8.9%, rgba(250, 252, 251, 0.22) 90.38%);
}

.title{position: relative;font-size: 28px;padding: 20px 10px 20px;margin: 0 auto;z-index: 0;}
.video-top{padding: 20px 0px 20px 0px;}
.video-top>p:first-child{background-image: url('../../images/xczl/video-icon.png');
background-position: 0 5px;background-repeat: no-repeat;background-size: 50px 50px;padding:10px 0 10px 55px;font-size: 24px;}
.video-top>p:last-child{font-size: 16px;color: #999;cursor: pointer;}
.video-ul>li{background: #FFFFFF;
    border: 0.966549px solid #E9E9E9;
    box-sizing: border-box;
    border-radius: 4px;width: 23.5%;height: 233px;margin-right: 2%;position: relative;margin-bottom: 2%;cursor: pointer;}
    .video-ul>li:nth-child(4n){margin-right: 0;}
    .cover{width: 100%;height: 154px;object-fit: cover;}
    .video-detail{padding: 14px;}
    .video-name{font-size: 16px;margin-bottom: 10px;overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap}
    .teacher-num{color: #999;font-size: 14px;}
    .watch-num{background-repeat: no-repeat;background-position: left;background-size: 10px auto;padding-left: 15px;background-image: url('../../images/xczl/num.png');}
    .teacher{background-repeat: no-repeat;background-position: left;background-size: 19px auto;padding-left: 25px;background-image: url('../../images/xczl/teacher-icon.png');}
    .video-sign{position: absolute;left: 5px;top: 5px;font-size: 14px;color: #fff;padding: 2px 10px;background: linear-gradient(288.74deg, #FF932C 10.52%, #FFC888 99.97%);
        border-radius: 2px;}
        .article-top{padding: 20px 0px 20px 0px;}
.article-top>p:first-child{background-image: url('../../images/xczl/article-icon.png');
background-position: 0 5px;background-repeat: no-repeat;background-size: 50px 50px;padding:10px 0 10px 55px;font-size: 24px;}
.article-top>p:last-child{font-size: 16px;color: #999;cursor: pointer;}
.article-ul{padding: 20px;background-color: #fff;border-radius: 4px;}
.article-ul>li{position: relative;margin-bottom: 20px;cursor: pointer;}
.article-cover{width:24%;height: 140px;margin-right: 20px;object-fit: cover;}
.article-sign{position: absolute;left: 5px;top: 10px;font-size: 14px;color: #fff;padding: 2px 10px;background: linear-gradient(113.38deg, #C79AFF 7.16%, #A483EA 85.26%);
    border-radius: 2px;}
    .article-detail{height: 100%;border-bottom: 1px solid #E8E8E8;flex: 1;overflow: hidden;}
    .article-name{font-size: 20px;overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;}
    .article-content{font-size: 14px;color: #828282;line-height: 25px;margin: 20px 0;display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;min-height: 50px;}
        .my-action{color: #999;font-size: 16px;padding-bottom: 10px;}
        .collect-action{background-repeat: no-repeat;background-position: left;background-size: 17px auto;padding-left: 25px;background-image: url('../../images/xczl/collect.png');padding-right: 30px;margin-right: 25px;border-right: 2px solid #E8E8E8;}
        .like-action{background-repeat: no-repeat;background-position: left;background-size: 17px auto;padding-left: 25px;background-image: url('../../images/xczl/like.png');;padding-right: 30px;margin-right: 25px;border-right: 2px solid #E8E8E8;}
        .eye-num{background-repeat: no-repeat;background-position: left;background-size: 20px auto;padding-left: 30px;background-image: url('../../images/xczl/eye.png');}