.main-videos {
    margin-top: 10px;
    min-height: 600px;
    padding-bottom: 40px;
}

.main-videos_type {
    margin: 10px;
    border: solid 1px #eee;
    border-radius: 10px;
    text-align: center;
    height: 140px;
    cursor: pointer;
    padding-top: 56px;
    position: relative;
    color: #fff;
}

.t2 {
    transition: all .3s;
}

    .t2:hover {
        transform: translateX(10px)
    }

        .t2:hover i {
            transform: rotate(360deg)
        }

.t1 .t2:nth-child(4n+1) .main-videos_type {
    background: linear-gradient( 45deg,#02c7a3 10%, #00B3CC);
}

.t1 .t2:nth-child(4n+2) .main-videos_type {
    background: linear-gradient( 45deg,#fca316 10%, #fc7616);
}

.t1 .t2:nth-child(4n+3) .main-videos_type {
    background: linear-gradient( 45deg,#0999ed 10%, #0B63F6);
}

.t1 .t2:nth-child(4n+4) .main-videos_type {
    background: linear-gradient( 45deg,#e30af3 10%, #ac14fc);
}

.main-videos_type h2 {
    font-size: 20px;
    padding: 0;
    margin: 0;
}

.main-videos_type i {
    position: absolute;
    left: 10px;
    bottom: 10px;
    color: #fff;
    font-size: 30px;
    transition: all 1s;
}

.main-videos_type_bk {
    position: absolute;
    right: 0;
    top: 0;
    height: 100px;
    width: 200px;
    background-image: url(../../image/max-background.png);
    background-repeat: no-repeat;
    background-size: cover;
}



.main-video_item {
    margin: 14px 8px;
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
    position: relative;
    box-shadow: 0px 10px 60px 0px rgb(0 0 0 / 7%);
}

    .main-video_item i {
        position: absolute;
        bottom: 68px;
        font-size: 28px;
        left: 10px;
    }


.main-video_item__img {
    position: relative;
    display: block;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    overflow: hidden;
}

    .main-video_item__img::before {
        position: absolute;
        content: '';
        background-color: rgba(var(--thm-black-rgb), .20);
        width: 50%;
        height: 100%;
        left: 0px;
        top: 0px;
        border-top-left-radius: 8px;
        z-index: 1;
        transition: all 500ms ease;
    }

.main-video_item:hover .main-video_item__img::before,
.main-video_item:hover .main-video_item__img::after {
    width: 0%;
}

.main-video_item__img::after {
    position: absolute;
    content: '';
    background-color: rgba(var(--thm-black-rgb), .20);
    width: 50%;
    height: 100%;
    right: 0px;
    top: 0px;
    border-top-right-radius: 8px;
    transition: all 500ms ease;
}

.main-video_item__img img {
    width: 100%;
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
    transition: all 500ms ease;
}

.main-video_item:hover .main-video_item__img img {
    transform: scale(1.1);
}

.main-video_item_title {
    border-top: solid 6px var(--thm-primary-ain);
    padding: 10px 10px 20px;
    font-size: 14px;
    position: relative;
}

    .main-video_item_title::before {
        content: '';
        width: 50%;
        height: 6px;
        background: var(--thm-primary);
        position: absolute;
        transition: all .4s;
        left: 0;
        top: -6px;
    }

    .main-video_item_title::after {
        content: '';
        width: 50%;
        height: 6px;
        background: var(--thm-primary);
        position: absolute;
        transition: all .4s;
        right: 0;
        top: -6px;
    }
.main-video_item:hover .main-video_item_title::before {
    width: 00%;
}
.main-video_item:hover .main-video_item_title::after {
    width: 00%;
}