.course-list li { width: 280px; height: 270px; margin-right: 20px; margin-bottom: 40px;}
.course-list li:nth-child(4n) { margin-right: 0; }
.course-list li .content h2.title { line-height: 40px; height: 40px; font-weight: bold; }
.course-list li .content .labels .label { padding: 0 10px; border-radius: 10px; line-height: 20px; background: #f87620; font-size: 12px; color: #fff; }
.course-list li .content .labels .label2 { color: #696969; right: 0; line-height: 20px;}
.course-list li .content .labels .label2 .follow .icon,.course-list li .content .labels .label2 .selection .icon { background: url(/src/img/icon.png) no-repeat -38px -7px; width: 20px; height: 20px; display: inline-block; vertical-align: top; margin-right: 5px; }
.course-list li .content .labels .label2 .selection .icon { background: url(/src/img/icon.png) no-repeat -74px -5px; margin-left: 10px; }
.course-list li .floating .box { width: 260px; bottom: 0; background: rgba(0,0,0,.5); padding: 10px; color: #fff; height: 100px; overflow: hidden;display:none;}
.course-list li:hover .floating .box{display:block;}
@keyframes zoomFadeIn {
    from {
        transform-origin: center;
        transform: scale3d(.3, .3, .3);
        opacity: 0;
    }

    to {
        transform-origin: center;
        transform: none;
        opacity: 1;
    }
}

.zoomFadeIn {
    animation-name: zoomFadeIn;
}