body{background-color: #fff;}
.line{height: 1px;width: 100%;background-color: #eee;}
.casecate-list{max-width: 1200px;width: 100%;margin: 0 auto;font-size: 0;padding: 12px 0;}
.casecate-list .casecate-item{display: inline-block;vertical-align: middle;padding: 10px 18px;width: 150px;box-sizing: border-box;}
.casecate-item .cate{ display: block; border:1px solid #666666;border-radius: 30px;line-height: 33px;text-align: center;font-size: 15px;transition: color 0.3s;}
.casecate-item .cate:hover{color: #3291F2;border-color:#3291F2;}
.casecate-item .cate.active{background-color: #3291F2;color: #fff;border-color:#3291F2; }
.case-list{padding: 15px 0;font-size: 0;max-width: 1200px;width: 100%;margin: 0 auto;}
.case-list .case-item{ width: 240px; display: inline-block;vertical-align: middle;padding: 15px;box-sizing: border-box;}
.case-item-con{ position: relative; font-size: 14px;border: 1px solid #F5F5F5;border-radius: 4px;padding: 18px 22px;transition-property: transform , box-shadow; transition-duration:0.3s , 0.3s;}
.case-item-con:hover{transform: scale(1.02);box-shadow: 0 2px 10px #eee;border-color: #f9f9f9;}
.case-item-con .case-code{
    /*position: absolute;top: 0;left: 0;*/
    border-radius: 4px;width: 100%;height: 100%;
    z-index: 3;background-color: #fff;
    opacity: 1;transition: all 0.3s;}
.case-item-con .case-code .case-screenshot{display: block;width: 100%;height: 100%;border-radius: 4px;}
/*.case-item-con:hover .case-code{opacity: 1;}*/
.case-item-con .case-img{display: block;width: 90px;height: 90px;border-radius: 4px;margin:0 auto 8px;background-color: #f9f9f9;}
.case-item-con .case-title{font-size: 16px;text-align: center;line-height: 35px;position: relative;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.case-item-con .case-title:after{content: '';position: absolute;bottom: 0;left: 50%;width: 20px; margin-left: -10px; height: 1px;background-color: #CCCCCC;}
.case-item-con .case-brief{
    padding: 8px 0;
    letter-spacing: 0.5px;
    line-height: 24px;
    height: 67px;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.case-item-con .case-type{width: 110px;border:1px solid #999999;color: #666666;text-align: center;line-height: 30px;margin: 10px auto 0;}