body {
}

.main{
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.course-cover{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.cover-left{
    width: 730px;
    height: 410px;
}
.cover-right{
    width: 456px;
    height: 410px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}
.cover-right div{
    width: 220px;
    height: 124px;
    cursor: pointer;
}

.live-title{
    color: #333333;
    font-size: 24px;
    margin: 30px 24px;

    position: relative;
}
.live-title::after{
    content: '';
    width: 6px;
    height: 24px;
    background: #198EEE;
    border-radius: 3px;
    position: absolute;
    top: 5px;
    left: -24px;
}

.live-course{
    display: inline-block;
    width: 240px;
    height: 256px;
    background: #FFFFFF;
    border: 1px solid transparent;
    padding: 10px;
    margin-bottom: 20px;
    vertical-align: top;
    cursor: pointer;
}
.live-course:hover{
    border: 1px solid #DDDDDD;
}
.course-img{
    width: 220px;
    height: 124px;
}
.course-name{
    color: #333333;
    font-size: 16px;
    height: 45px;
    line-height: 23px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.course-detail{
    color: #666666;
    font-size: 14px;
    line-height: 30px;
}



main img{
    width: 100%;
    height: 100%;
}