html body{background-color:#f6f7fa}
.main-body{padding-top:40px;justify-content:space-between}
#list{width:880px;background-color:#fff;padding:0 20px 20px 20px;margin-bottom:40px}
#list ._wrapper{margin-bottom:20px}
#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{line-height:24px;margin-bottom:10px}
#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 .cache-click{display:flex;margin-bottom:10px}
#list ._wrapper .item .course-msg .cache-time{margin-right:40px;font-size:14px;color:#7f7f7f}
#list ._wrapper .item .course-msg .click{font-size:14px;color:#7f7f7f}
#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:3;overflow:hidden;line-height:30px;font-size:14px;color:#555}
#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}
#side .side-box{background-color:#fff;padding:20px}
#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}
#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}
.main-body h1{background-color:#fff;padding:20px}

@media (max-width: 767.98px) {
    .main-body {width: 100%;display: block;padding-top: 20px;}
    .main-body #list {width: 100%;}
    .main-body #side {width: 100%;}
    #list {margin-bottom: 20px;}
    #list ._wrapper .item {padding: 10px 0;}
    #list ._wrapper .item .course-img {width: 40%;margin-right: 10px;}
    #list ._wrapper .item .course-msg h3{margin-bottom: 0;}
    #list ._wrapper .item .course-msg h3 a{font-size: 16px;}
    #list ._wrapper .item .course-msg .cache-click{display: block;margin-bottom: 0;}
    #list ._wrapper .item .course-msg .cache-time{font-size: 12px;margin-right: 0;}
    #list ._wrapper .item .course-msg .click{font-size: 12px;}
    #list ._wrapper .item .course-msg .text{line-height: 24px;}
}