.class-list { padding-top: 30px; padding-bottom: 30px; background: #f8f8f8; } 
.class-list ul { margin-right:-20px; } 
.class-list ul li { float: left; width: 25%; margin-bottom: 20px; } 
.class-list ul li a { display: block; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; margin-right:20px; background: #fff; border-radius: 10px; overflow: hidden; } 
.class-list ul li a .images { height: 160px; width: 100%; text-align: center; margin-bottom: 20px; } 
.class-list ul li a .images img { height: 100%; width: 100%; object-fit: cover; display: block; } 
.class-list ul li a .title { margin-top: 10px; padding: 0 10px; font-size: 16px; color: #36404a; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 
.class-list ul li a .time { padding: 0 10px; font-size: 14px; color: #999; line-height: 42px; } 
.class-list ul li a .bottom { padding: 0 10px; } 
.class-list ul li a .bottom .jon { float: left; font-size: 14px; color: #999; line-height: 42px; } 
.class-list ul li a .bottom .price { float: right; color: #e64a3b; line-height: 42px; font-size: 18px; } 
.class-list ul li a:hover { -webkit-box-shadow: 4px 4px 10px 0px rgba(117, 148, 179, 0.2); box-shadow: 4px 4px 10px 0px rgba(117, 148, 179, 0.2); border-radius: 6px; -webkit-transform: scale(1.02); transform: scale(1.02); }