.nav { height : 317px ; background : url(../images/pro-nav.jpg) center center no-repeat ; position : relative }
.title { padding-top : 65px }
.title h2 { color : #444444 ; font-family : Arial ; font-size : 30px ; font-weight : bold }
.title strong { margin-top : 21px ; display : block ; color : #444444 ; font-size : 22px }
.nav-container { width : 100% ; height : 60px ; border-top : solid 1px #EBEBEB ; border-bottom : solid 1px #EBEBEB ; position : absolute ; left : 0px ; bottom : 0px }
.nav-parent { height : 60px }
.nav-parent i { display : block ; width : 58px ; height : 58px ; background : url(../images/pro-icon.png) center center no-repeat ; border-left : solid 1px #EBEBEB ; float : left }
.nav-parent ul { height : 100% }
.nav-parent ul li { width : 120px ; height : 100% ; border-left : solid 1px #EBEBEB ; float : left ; color : #666666 ; font-size : 16px ; text-align : center ; line-height : 58px ; cursor : pointer ; transition : .5s }
.nav-parent ul li:last-of-type { border-right : solid 1px #EBEBEB }
.nav-parent ul li:hover { background-color : #D50C0C ; color : #FFFFFF }
.nav-child { width : 100% ; background-color : #FFFFFF ; position : absolute ; left : 0px ; top : calc(100% + 1px) ; z-index : 1 }
.nav-child .container { width : 100% ; height : 0px ; overflow : hidden ; transition : .5s }
.nav-child ul { height : 0px ; margin-top : 0px ; overflow : hidden ; transition : .5s }
.nav-child ul::after { content : "" ; display : block ; clear : both }
.nav-child li { height : 40px ; padding : 0px 30px ; border : solid 1px #515151 ; border-radius : 21px ; float : left ; margin-top : 20px ; margin-right : 10px ; color : #666666 ; font-size : 15px ; text-align : center ; line-height : 40px ; transition : .5s ; cursor : pointer }
.nav-child li:hover { border-color : #D50C0C }
.nav-child li a {}

.list { background-color : #F8F8F8 ; position : relative }
.list ul {  }
.list li { width : 420px ; background-color : #FFFFFF ; float : left ; margin-right : 20px ; margin-top : 60px ; position : relative }
.list ul li:nth-of-type(3n) { margin-right : 0px }
.list li a { display : block ; padding : 10px 10px }
.list li .img-box { display : table-cell ; width : 400px ; height : 340px ; text-align : center ; vertical-align : middle }
.list li img { display : inline-block ; max-width : 100% ; max-height : 100% }
.list .mask-2 { width : 400px ; height : 340px ; background-color : rgba(0,0,0,.3) ; color : #cccccc ; font-size : 30px ; font-weight : bold ; text-align : center ; line-height : 340px ; position : absolute ; left : 10px ; top : 10px ; transition : .5s ; opacity : 0}
.list li:hover .mask-2 { opacity : 1 }
.list li strong { display : block ; height : 60px ; color : #666666 ; font-size : 16px ; text-align : center ; line-height : 60px }
.list li:hover strong { color : #D50C0C }

.list .pages { margin-top : 130px ; 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 }

.list .mask-1 { display : none ; width : 100% ; height : 100% ; background-color : rgba(0,0,0,.3) ; position : absolute ; left : 0px ; top : 0px }