.banner { height:390px; background:url('/static/images/case_banner.jpg') center; }
.nav { margin:50px auto; width:660px; }
.nav a { display:block; float:left; width:218px; height:60px; line-height:60px; border:#ffffff solid 1px; text-align:center; font-size:22px; color:#333333; background-color:#eeeeee; transition:all 500ms ease; }
.nav a.active { color:#ffffff;background-color:#e97f4f; background-color:rgba(233,127,79,1); }
.nav a:hover { color:#333333;background-color:#e97f4f; background-color:rgba(233,127,79,0.5); }

.case{ margin-bottom:60px; text-align:center;}
.case ul { margin-left:-25px; }
.case ul li { float:left; margin:0 0 25px 25px; }
.case-item { position:relative; display:block; width:380px; height:310px; overflow:hidden;}
.case-item img { width:380px; }
.case-item h4 { position:absolute; display:block; width:100%; text-align:center; bottom:0px; height:45px; line-height:45px; color:#ffffff;  background-color:rgba(0, 0, 0, 0.8); transition:all 400ms ease-in-out;  }
.case-item:hover,.case-item:hover h4 { height:310px;}
.case-item.big { width:1190px;}
.case-item.big img{ width:1190px;}
.case-page{ line-height:100px; display:inline; }