html body{background-color:#f6f7fa}
.main-body{padding-top:20px;justify-content:space-between}
#list{width:880px;margin-bottom:40px}
#list h1{margin-bottom:20px}
#list ._wrapper{padding:0 20px;margin-bottom:20px;background-color:#fff}
#list ._wrapper .item{padding:20px 0;border-bottom:1px solid #f3f6f9}
#list ._wrapper .item .course-img{width:260px;margin-right:30px}
#list ._wrapper .item .course-img a,#list ._wrapper .item .course-img img{width:100%;display:block}
#list ._wrapper .item .course-msg h3{margin-bottom:16px}
#list ._wrapper .item .course-msg h3 a{color:#333;font-size:18px}
#list ._wrapper .item .course-msg h3 a:hover{color:#23b8ff}
#list ._wrapper .item .course-msg .tabs{margin-bottom:16px}
#list ._wrapper .item .course-msg .tabs span{margin-right:30px;color:#999;font-size:14px}
#list ._wrapper .item .course-msg .text{width:100%;word-break:break-all;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:30px;font-size:14px;color:#555}
#pagination{margin-bottom:40px}
#pagination .active{display:inline-block;width:35px;height:35px;line-height:35px;margin-right:10px;border:1px solid var(--button--background--color);text-align:center;font-size:14px;color:var(--button--text--color);background-color:var(--button--background--color)}
#pagination a{display:inline-block;width:35px;height:35px;line-height:35px;margin-right:10px;border:1px solid #999;text-align:center;font-size:14px;color:#666}
#pagination .next,#pagination .prev{margin-right:10px;color:#666}
#side{width:300px;padding-top:60px}
#side .side-box{background-color:#fff;padding:20px;margin-bottom:16px}
#side .side-box .title{margin-bottom:14px;font-weight:700;font-size:18px}
#side .side-box ul li{position:relative;margin-bottom:14px}
#side .side-box ul li a{padding-left:20px;font-size:16px;color:#727478;word-break:break-all;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;}
#side .side-box ul li a:hover{color:#23b8ff}
#side .side-box ul li::before{content:"";position:absolute;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background-color:#e1e1e1}
.tjbox{margin-bottom:40px}
.tjbox ul li{margin-right:10px}
.tjbox ul li .img{width:200px;margin-bottom:10px}
.tjbox ul li .img a{width:100%}
.tjbox ul li .img img{width:100%;display:block}
.tjbox ul li p{text-align:center}
.tjbox ul li p a{color:#57595f;font-size:16px}

@media (max-width: 767.98px) {
    #list{margin-bottom: 20px;}
    #list ._wrapper{padding: 0 10px;}
    #list ._wrapper .item .course-img{width: 30%;margin-right: 10px;}
    #list ._wrapper .item .course-msg h3{margin-bottom: 0;}
    #list ._wrapper .item .course-msg .tabs{margin-bottom: 0;}
    #list ._wrapper .item .course-msg .tabs span{font-size: 12px;width: 48%;margin-right: 0;display: inline-block;}
    #list ._wrapper .item .course-msg .text{line-height: 24px;}
    .main-body {width: 100%;display: block;}
    .main-body #list {width: 100%;}
    .main-body #side {width: 100%;}
    #pagination{margin-bottom: 0;text-align: center;}
    #side{padding-top: 0;}
    #list h1{margin-left: 10px;}
}