.page_banner{background:url("../images/banner/case_banner.jpg") no-repeat center}.case_list li{width:384px;margin-bottom:24px}.case_list li:nth-child(2),.case_list li:nth-child(5),.case_list li:nth-child(8),.case_list li:nth-child(11){margin:0 24px}.case_list li a{display:block;width:384px;height:277px;position:relative}.case_list li a::before{display:block;content:"";position:absolute;left:0;bottom:-231px;right:0;height:277px;background:rgba(0,0,0,0.6);-webkit-transition:bottom .4s linear;-moz-transition:bottom .4s linear;-o-transition:bottom .4s linear;-ms-transition:bottom .4s linear;transition:bottom .4s linear;z-index:2}.case_list li:hover a::before{bottom:0}.case_list li:hover h4{transform:translateY(-140px);-webkit-transform:translateY(-140px);-moz-transform:translateY(-140px);-ms-transform:translateY(-140px);-o-transform:translateY(-140px)}.case_list h4{position:absolute;left:0;bottom:0;right:0;height:46px;line-height:46px;text-align:center;color:#fff;-webkit-transition:transform .4s linear;-moz-transition:transform .4s linear;-o-transition:transform .4s linear;-ms-transition:transform .4s linear;transition:transform .4s linear;z-index:3}