body,html{background-color:#f6f7fa}
.main-body{padding-top:40px;justify-content:space-between}
#list{width:880px}
#list ._wrapper .item{margin-bottom:20px;padding:20px;background-color:#fff}
#list ._wrapper .item .left{width:155px;margin-right:20px}
#list ._wrapper .item .left a{width:100%}
#list ._wrapper .item .left img{width:100%}
#list ._wrapper .item .right .name{margin-bottom:15px;color:#000;font-size:16px}
#list ._wrapper .item .right .label-box{display:flex;margin-bottom:10px;font-size:14px}
#list ._wrapper .item .right .label-box .label{color:#999}
#list ._wrapper .item .right .label-box .text{color:#666}
#pagination{padding:20px;background-color:#fff;margin-bottom:20px}
#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;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}
#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;flex:1}
.tjbox ul li .img{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}
.main-body h1{padding:20px;background-color:#fff}
.tjbox ul{background-color:#fff;padding:20px;width:820px}
#list ._wrapper .item:last-child{margin-bottom:0}

@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;margin-bottom: 10px;}
    #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;}
    #list ._wrapper .item .right .name {font-weight: bold;}
    #list ._wrapper .item .right .name, #list ._wrapper .item .right .label-box{margin-bottom: 4px;}
    #list ._wrapper .item .right .label-box{display: block;}
    #list ._wrapper .item .left {width: 30%;margin-right: 10px;}
    #list ._wrapper .item .right .label-box .label{margin-bottom: 6px;}
    #list ._wrapper .item .right .label-box .text {word-break:break-all;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
    .w-1200, .tjbox ul {width: 100%;}
    .tjbox ul {flex-wrap: wrap;}
    .tjbox ul li {width: 47%;flex: unset;margin-right: 6%;margin-bottom: 10px;}
    .tjbox ul li:nth-child(2n) {margin-right: 0;}
    .tjbox ul li p a {font-size: 14px;color: #666;}
    .tjbox {margin-bottom: 20px;}
}