.col3 .video-list-wrapper h3 a {
    color: #000;

}

.col3 .video-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.col3 .video-list-wrapper h3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.col3 .video-list-wrapper h3 .label {
    font-size: .875rem;
    color: #666;

    padding: 0rem .5rem;
    border-radius: 5px;
}

.col3 .video-list-wrapper h3 .label.video-course-label {
    color: #333;
    border: 1px solid #333;
}
.col3 .video-list-wrapper h3 .label.live-class-label {
    color: red;
    border: 1px solid red;
}

.col3 .tab-nav {
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;
    gap: 1rem;
}

.col3 .tab-nav a {
    padding: .25rem 1rem;
    border-radius: 5px;
    color: #666;

}
.col3 .tab-nav a:hover {
    color: #fff;
    background-color: #333;
}
.col3 .tab-nav a.active {
    color: #fff;
    background-color: #333;
}

.col3 .tab-content {
    display: flex;
    flex-direction: column;

}

.col3 .tab-content {
    display: flex;
    flex-direction: column;
}

.col3 .tab-content .video-list {
    display: flex;
    flex-direction: column;
}

.col3 .video-list .video-item {

    background-color: #fff;
    border-radius: 5px;

    display: flex;
    flex-direction: row;

    align-items: center;
    gap: 2rem;
    border-bottom:1px solid #eee;
    padding: 1.5rem .5rem;

    position: relative;
}



.col3 .video-list .video-item:hover {
    background-color: #f5f5f5;
}

.col3 .video-list .video-item .new-status {
    font-size: .875rem;
    color: red;
    position: absolute;
    top: 1rem;
    right: 1rem;
}


.col3 .video-list .video-item img {
    width: 300px;
}

.col3 .video-list .video-item .video-info {

    display: flex;
    flex-direction: column;
    gap: .6rem;
}


.col3 .video-list .video-item .video-info p a {
    font-weight: bold;
    color: #333;
}
.col3 .video-list .video-item .video-info p a:hover {
    color: #0a8be1;
}

div.video-desc {
    font-size: .875rem;
    color: #666;

}

div.video-desc ol {
    list-style: decimal;
    padding-left: 1.2rem;
}

.col3 .tab-content .info {
    text-align: left;
    font-size: .875rem;
    color: #666;
    margin-top: 5rem;
}

p.video-permission span {
    font-size: .875rem;
    padding: 0.1rem .5rem;
    margin-top: .5rem;
    
    border-radius: 5px;
    align-self: flex-start;
}

span.buy-label {
    border:1px solid #000;
    color: #000;
}
span.free-label {
    border:1px solid red;
    color: red;
}
span.login-label {
    border:1px solid #0a8be1;
    color: #0a8be1;
}


.video-cover {
    position: relative;
}

.video-cover:hover .play-button {
    opacity: 1 !important;
}
.video-cover .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
    background: rgba(0,0,0,0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-cover .play-button i {
    color: white;
    font-size: 18px;
}

.video-cover .video-duration {
    font-size: .875rem;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.4);
    color: #fff;
    padding: .1rem .3rem;
}

.problem-list {
    display: flex;
    flex-direction: column;
    gap:4rem;
}

.problem-list .problem-list-item {
    display: flex;
    flex-direction: column;
    gap:1rem;
}

.problem-list .problem-list-item h4 {
    color: #000;
}

.problem-list .problem-list-item p {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}