.course_list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:8px}.course_list .ocl_item{position:relative;width:311px;height:294px;border-radius:4px;background:#fff;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.01),0 6px 12px 0 rgba(0,0,0,.06);box-shadow:0 1px 2px 0 rgba(0,0,0,.01),0 6px 12px 0 rgba(0,0,0,.06);margin:0 16px 24px 0;color:#353535;overflow:hidden;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.course_list .ocl_item:hover{-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.1),0 20px 40px 0 rgba(0,0,0,.1);box-shadow:0 4px 8px 0 rgba(0,0,0,.1),0 20px 40px 0 rgba(0,0,0,.1);-webkit-transform:translate3d(0,-8px,0);transform:translate3d(0,-8px,0)}.course_list .ocl_item .ocl_item_img{width:100%;height:170px;background:#909399;position:relative}.course_list .ocl_item .ocl_item_img img{width:100%;height:170px;-o-object-fit:cover;object-fit:cover;vertical-align:top}.course_list .ocl_item .ocl_item_img p{text-align:center;padding-top:74px;font-size:18px;color:#666}.course_list .ocl_item .ocl_item_img .el-tag{position:absolute;left:-4px}.course_list .ocl_item .ocl_item_img .ocl_tag1{bottom:30px}.course_list .ocl_item .ocl_item_img .ocl_tag2{bottom:4px}.course_list .ocl_item .ocl_item_img .ocl_item_svg{position:absolute;top:-4px;left:0;background:#fff;border-radius:5px;padding:5px 0 0;text-align:center;border:1px solid #9dc5ef;width:34px}.course_list .ocl_item .ocl_item_img .ocl_item_svg svg{width:16px;height:16px}.course_list .ocl_item .ocl_item_img .ocl_item_svg h5{font-size:12px;color:#409eff;margin-top:-4px}.course_list .ocl_item .ocl_item_btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:6px}.course_list .ocl_item .ocl_item_info{padding:8px 12px 0;overflow:hidden;position:relative;color:#333}.course_list .ocl_item .ocl_item_info h2{font-size:14px}.course_list .ocl_item .ocl_item_info h3{line-height:16px;margin:4px 0 0;color:#888;font-size:12px}.course_list .ocl_item .ocl_item_status{color:#333;position:absolute;width:100%;padding:4px 12px;bottom:4px;height:50px}.course_list .ocl_item .ocl_item_status h4{font-size:14px}.course_list .ocl_item .ocl_item_status p{font-size:16px;text-align:right}.course_list .ocl_item .ocl_item_status .ocl_canceled{color:#f04038}.course_list .ocl_item .ocl_item_status .ocl_success{color:#3784ff}.course_list .ocl_item .ocl_item_status .ocl_pass{color:#11ab4e}.course_list .ocl_item .ocl_item_status .ocl_to_learn{color:#e6a23c}.course_list .ocl_item .ocl_item_status .ocl_learn_finish{color:#11ab4e}.course_list .ocl_item .ocl_item_status .ocl_not_pass{color:#f04038}.course_list .ocl_item .ocl_item_address{font-size:12px;color:#999;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-flex:1;-ms-flex:1;flex:1;margin-top:4px}