@charset "utf-8";
.pro-show{
    margin:70px 0;
    /*overflow: hidden;*/
}
.pro-show .pro-list{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width:48%;
    padding-bottom:22.49%;
    float: left;
    margin-right:2%;
    margin-bottom:2%;
    position: relative;
    overflow: hidden;
    display: block;
}
.case-show .pro-list{
    width: 31%;
}
.pro-show .pro-list .pro-bg{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
}
.pro-show .pro-list:hover .pro-bg{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.pro-show .pro-list .pro-item{
    width:100%;
    padding: 0 20%;
    overflow: hidden;
    height:38px;
    line-height:38px;
    text-align: center;
    color: #fff;
    font-size:14px;
    position: absolute;
    left:0;
    bottom:0;
    background: rgba(0,0,0,0.8);
}
.pro-show .pro-list:hover .pro-item{
    bottom:40%;
    background: none;
    font-size:16px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.pro-show .pro-list .pro-bg:after{
    content: '';
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left:0;
    top:0;
    opacity:0;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.pro-show .pro-list:hover .pro-bg:after{
    opacity:1;
}
.pro-show .pro-list:after{
    content: '';
    width:80%;
    height:60%;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: scale(0,1);
    -moz-transform: scale(0,1);
    -ms-transform: scale(0,1);
    -o-transform: scale(0,1);
    transform: scale(0,1);
    transform-origin: center;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -o-transform-origin: center;
}
.pro-show .pro-list:before{
    content: '';
    width:70%;
    height:80%;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    z-index:1;
    right:0;
    margin:auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: scale(1,0);
    -moz-transform: scale(1,0);
    -ms-transform: scale(1,0);
    -o-transform: scale(1,0);
    transform: scale(1,0);
    transform-origin: center;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -o-transform-origin: center;
}
.pro-show .pro-list:hover:after{
-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.pro-show .pro-list:hover:before{
-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.page-list{
    overflow: hidden;
    margin:20px; auto;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display: -moz-box;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
}
.page-list > a{
    display: inline-block;
    background: #e2e2e2;
    padding:5px 10px;
    margin-right:10px;
    color: #000;
    float: left;
    text-align: center;
    font-size:16px;
}
.page-list .activeNum{
    background: #e60012;
    color:#fff;
}