.banner img { width : 100% ; height : auto }

.nav {height : 50px ; border-top : solid 1px #D8D8D8 ; border-bottom : solid 1px #D8D8D8 }
.nav ul { height : 100% }
.nav ul li { height : 50px ; padding : 0px 28px ; border-right : solid 1px #D8D8D8 ; float : left ; line-height : 50px ; transition : .5s ; cursor : pointer }
.nav ul li:hover { background-color : #D50C0C }
.nav ul li:first-of-type { border-left : solid 1px #D8D8D8 }
.nav li a { color : #666666 ; font-size : 16px ; transition : .5s }
.nav li:hover a { color : #FFFFFF }

.list { background-color : #f8f8f8 ; overflow : hidden }
.list ul { margin-top : 70px }
.list li { width : 380px ; height : 380px ; background-color : #FFFFFF ; padding : 10px 10px ; box-sizing : border-box ; float : left ; margin-right : 80px ; margin-bottom : 60px ; position : relative }
.list li:nth-of-type(3n) { margin-right : 0px }
.list li a {}
.list li .img-box { display : table-cell ; width : 360px ; height : 360px ; text-align : center ; vertical-align : middle }
.list li img { display : inline-block ; max-width : 100% ; max-height : 100% }
.list li .hover { width : 100% ; height : 20px ; position : absolute ; left : 0px ; bottom : calc(50% - 10px) ; overflow : hidden ; transition : .5s ; z-index : 1 }
.list li:hover .hover { height : 70px }
.list li strong { display : block ; height : 20px ; padding-left : 10px ; border-left : solid 4px #D50C0C ; color : #FFFFFF ; font-size : 16px ; line-height : 20px ; position : absolute ; left : 50% ; transform : translateX(-50%) }
.list li i { display : block ; width : 60px ; height : 70px ; background : url(../image/case-icon.png) center bottom no-repeat ; margin : 0px auto }
.list li .mask { width : 360px ; height : 360px ; background-color : rgba(0,0,0,.4) ; position : absolute ;  left : 10px ; top : 10px }
.list li:hover .mask { background-color : rgba(0,0,0,.2) }

.list .pages { margin-top : 59px ; padding-bottom : 118px }
.list .pages div { display : flex ; justify-content : center ; align-items : center }
.list .pages a { display : block ; width : 42px ; height : 42px ; background-color : #E5E5E5 ; border-radius : 50% ; margin-right : 10px ; color : #444444 ; font-size : 15px ; text-align : center ; line-height : 42px ; transition : .5s }
.list .pages a.on { background-color : #D50C0C ; color : #FFFFFF }
.list .pages a:hover { background-color : #D50C0C ; color : #FFFFFF }
.list .pages div a:nth-of-type(5) { margin-right : 35px }
.list .pages i { display : block ; width : 1px ; height : 25px ; background-color : #939393 ; margin-right : 38px }
.list .pages .prev, .list .pages .next { width : 100px ; height : 42px ; border-radius : 21px }
.list .pages .prev { margin-right : 22px }
.list .pages .next { margin-right : 0px }