/* CSS Document */
.prolist{padding:55px 0;background:#fff;}
.prolist li{float:left;width:calc(25% - 24px);height:auto;margin:35px 12px;    position: relative;
}
.prolist li img{width:100%;height:auto;}
.prolist li h3{height:90px;line-height:90px;overflow:hidden;width:100%;text-align:center;background:#fff;}
.prolist li h3 a{font-size:18px;color:#333;}
.prolist li .pro-bg{display:none;position: absolute;width:100%;height:calc(100% - 90px);background:url(../images/pro-bg.png) repeat left top;transition: ease-in-out .5s; }
.prolist li:hover .pro-bg{display:block;left: 0;bottom: 90px;transition: ease-in-out .5s; }
.prolist li .pro-bg p{padding:10% 30px 0;color:#fff;font-size:18px;line-height:32px;height:96px;overflow:hidden;}
.prolist li .pro-bg .more{width:100px;height:36px;line-height:36px;padding:0 30px;border: 1px solid #fff ;margin:20px calc(50% - 81px);}
.prolist li .pro-bg .more a{font-size:12px;color:#fff;padding-left:10px;}
.prolist li .pro-bg .more span{margin:9px;width: 16px;height: 16px; line-height:14px;float: left;border-radius: 50%;border: 1px solid #fff ;color:#fff;font-size:16px;padding-left:1px;text-align:center; }

@media screen and (max-width: 768px) {
.prolist{padding:30px 0;}
.prolist li{width:calc(100% - 100px);height:auto;margin:20px 50px;}
.prolist .con .h2-tlt{height:30px;line-height:30px;font-size:20px;}
.prolist .con h6{font-size:14px;line-height:22px;}
.prolist li h3{height:40px;line-height:40px;}
.prolist li h3 a{font-size:12px;}
}