.width-fit{margin:0 auto;width:1440px}@media screen and (max-width:1620px){.width-fit{width:1200px}}.width-default{margin:0 auto;width:1200px}.flex-center{align-items:center;display:flex;justify-content:center}.clearfix{zoom:1}.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}#main{background:#f5f6f7}.imooc-index .imooc-index-top-banner{border-radius:10px;height:350px;margin-bottom:10px}@media screen and (max-width:1620px){.imooc-index .imooc-index-top-banner{height:292px}}.imooc-index .imooc-index-top{background:#fff;padding-bottom:20px}.imooc-index .imooc-index-bottom{background:#f5f6f7;padding-bottom:20px;padding-top:20px}.imooc-index .imooc-index-body{font-size:16px;margin:30px auto 20px}.imooc-index .imooc-index-body:last-child{margin-bottom:0}.imooc-index .imooc-index-body .body-header{display:flex;justify-content:space-between;margin-bottom:20px}.imooc-index .imooc-index-body .body-header .header-left{align-items:center;display:flex}.imooc-index .imooc-index-body .body-header .header-left .imooc-type{color:#18191a;padding-left:10px;position:relative}.imooc-index .imooc-index-body .body-header .header-left .imooc-type:after{background:#0053a6;border-radius:90px;bottom:5px;content:"";display:block;left:0;position:absolute;top:5px;width:3px}.imooc-index .imooc-index-body .body-header .header-left .imooc-type-info{color:#909499;font-size:12px;margin-left:10px;margin-right:30px}.imooc-index .imooc-index-body .body-header .header-left .create-imooc{background:#66bf39;border-radius:5px;color:#fff;cursor:pointer;font-size:14px;height:36px;line-height:36px;text-align:center;width:120px}.imooc-index .imooc-index-body .body-header .header-left .create-imooc :hover{color:#fff}.imooc-index .imooc-index-body .body-header .header-right{align-items:center;display:flex}.imooc-index .imooc-index-body .body-header .header-right .option-btn{color:#909499;font-size:14px;margin-right:20px}.imooc-index .imooc-index-body .body-header .header-right .option-btn.active{color:#0053a6}.imooc-index .imooc-index-body .body-header .header-right .option-btn:last-child{margin-right:0}.imooc-index .imooc-index-body .imooc-list{display:flex;flex-wrap:wrap;margin-bottom:-40px}.imooc-index .imooc-index-body .imooc-list .list-item{background:#fff;border-radius:10px;box-shadow:0 5px 10px rgba(0,0,0,.03);display:inline-block;height:284px;margin-bottom:22px;margin-right:24px;position:relative;transition:all .2s;width:341px}.imooc-index .imooc-index-body .imooc-list .list-item:hover{box-shadow:0 12px 20px rgba(0,0,0,.08);transform:translateY(-2px)}@media screen and (max-width:1620px){.imooc-index .imooc-index-body .imooc-list .list-item{height:222px;width:281px}}.imooc-index .imooc-index-body .imooc-list .list-item:nth-child(4n+4){margin-right:0}.imooc-index .imooc-index-body .imooc-list .list-item .imooc-status{background:#66bf39;border-bottom:2px solid #fff;border-left:2px solid #fff;border-radius:0 6px 0 6px;color:#fff;display:inline-block;font-size:12px;height:24px;line-height:24px;padding:0 9px 2px;position:absolute;right:0;text-align:center;top:0;z-index:99}.imooc-index .imooc-index-body .imooc-list .list-item .will-start{background:linear-gradient(274deg,#ff783c,#ff4000)}.imooc-index .imooc-index-body .imooc-list .list-item .starting{background:linear-gradient(274deg,#66bf39,#36a600)}.imooc-index .imooc-index-body .imooc-list .list-item .ended{background:#ff783c}.imooc-index .imooc-index-body .imooc-list .list-item .cover{background:transparent;border-radius:8px 8px 0 0;height:192px;-o-object-fit:cover;object-fit:cover;width:341px}@media screen and (max-width:1620px){.imooc-index .imooc-index-body .imooc-list .list-item .cover{height:142px;width:281px}}.imooc-index .imooc-index-body .imooc-list .list-item .title{color:#18191a;height:21px;margin:10px 0 20px 15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:260px}.imooc-index .imooc-index-body .imooc-list .list-item .user-info{align-items:center;color:#606366;display:flex;font-size:12px;margin-left:15px}.imooc-index .imooc-index-body .imooc-list .list-item .user-info .user-avatar{border-radius:50%;height:20px;margin-right:7px;width:20px}.imooc-index .imooc-index-body .imooc-list .list-item .imooc-cert{min-height:24px}.imooc-index .imooc-index-body .imooc-list .list-item .info-bottom{display:flex;justify-content:space-between;margin:0 15px}.imooc-index .imooc-index-body .imooc-list .list-item .info-bottom .price{color:#ff4533}.imooc-index .imooc-index-body .imooc-list .list-item .info-bottom .is-free{color:#66bf39;font-weight:700}.imooc-index .imooc-index-body .imooc-list .list-item .info-bottom .vip-free-tag{border:1px solid #0053a6;border-radius:3px;color:#0053a6;font-size:12px;font-weight:400;margin-left:5px;padding:2px 5px}.imooc-index .imooc-index-body .imooc-list .list-item .info-bottom .only-vip{color:#ffa628}.imooc-index .imooc-index-body .imooc-list .list-item .info-bottom .imooc-joined-num{color:#909499;font-size:12px}.imooc-index .imooc-index-body .imooc-list .list-item .info-bottom .imooc-joined-num .icon-user1{font-size:10px}.imooc-index .imooc-index-body .imooc-list .nengli-item{height:328px;width:341px}@media screen and (max-width:1620px){.imooc-index .imooc-index-body .imooc-list .nengli-item{height:268px;width:281px}}.imooc-index .imooc-index-body .imooc-list .nengli-item .imooc-cert{color:#ff783c;font-size:12px;margin-bottom:20px;margin-left:15px;min-height:24px}.imooc-index .imooc-index-body .imooc-list .nengli-item .imooc-cert>span{background:#fff9f5;border:1px solid #ffddcf;border-radius:5px;padding:4px 9px}.imooc-index .imooc-index-body .imooc-hide{display:none}.imooc-index .head .menu{align-items:center;background:#fff;border-radius:8px 8px 8px 8px;box-shadow:0 0 20px 1px rgba(102,136,204,.06);display:flex;height:64px;margin:-32px auto;opacity:1;position:relative;width:1280px}.imooc-index .head .menu .label{color:#18191a;font-size:14px;margin-left:30px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.imooc-index .head .menu .item{color:#717680;font-size:14px;margin-left:38px}.imooc-index .head .menu .item.active{align-items:center;background:#0053a6;border-radius:90px 90px 90px 90px;color:#fff;display:flex;font-weight:700;height:32px;justify-content:center;line-height:32px;opacity:1;width:108px}.imooc-index .imooc-index__main{margin:64px auto 0;width:1280px}.imooc-index .imooc-index__main .imooc-list{display:flex;flex-wrap:wrap}.imooc-index .imooc-index__main .imooc-list .list-item{background:#fff;border-radius:10px;box-shadow:0 5px 10px rgba(0,0,0,.03);display:inline-block;height:360px;margin-bottom:40px;margin-right:40px;position:relative;transition:all .2s;width:400px}.imooc-index .imooc-index__main .imooc-list .list-item:hover{box-shadow:0 12px 20px rgba(0,0,0,.08);transform:translateY(-2px)}.imooc-index .imooc-index__main .imooc-list .list-item:nth-child(3n+3){margin-right:0}.imooc-index .imooc-index__main .imooc-list .list-item .cover{background:transparent;border-radius:8px 8px 0 0;height:226px;-o-object-fit:cover;object-fit:cover;width:400px}.imooc-index .imooc-index__main .imooc-list .list-item .title{color:#18191a;height:21px;margin:20px 20px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:360px}.imooc-index .imooc-index__main .imooc-list .list-item .summary-row{height:24px;margin:12px 20px 20px}.imooc-index .imooc-index__main .imooc-list .list-item .summary-row span{background-color:#e8f3fc;border-radius:4px;color:#0053a6;font-size:12px;padding:4px 8px}.imooc-index .imooc-index__main .imooc-list .list-item .summary-row span+span{margin-left:10px}.imooc-index .imooc-index__main .imooc-list .list-item .info-bottom{display:flex;justify-content:space-between;margin:20px}.imooc-index .imooc-index__main .imooc-list .list-item .info-bottom .user{color:#949699;font-size:12px}.imooc-index .imooc-index__main .imooc-list .list-item .info-bottom .imooc-joined-num{color:#909499;font-size:12px}.imooc-index .imooc-index__main .imooc-list .list-item .info-bottom .imooc-joined-num .icon-user1{font-size:10px}