@charset "utf-8";
/*css document*/

.pro-nav-con{ width: 100%; height: 360px; background: url(../images/pro-banner.jpg) center center no-repeat; background-size: 100% 100%; position: relative;}
.l-nav{ width: 100%; height: 65px; background-color: rgba(255,255,255,.9); border-bottom: 3px solid #ccc; position: absolute; top: 0; left: 0;}
.l-nav .nav-con{ width: 1110px; margin: 0 auto;}
.l-nav .nav-con .logo{ margin-top: 16px; cursor: pointer; float: left; display: inline;}
.l-nav .nav-con ul.nav-list{ margin-left: 300px; margin-top: 16px; float: left; display: inline;}
.l-nav .nav-con ul.nav-list>li{ margin: 0 5px; padding: 0 10px; float: left; display: inline; position: relative;transition: all .1s ease;}
.l-nav .nav-con ul.nav-list>li:hover,.l-nav .nav-con ul.nav-list>li.active{ background-color: #1177cc; border-radius: 5px;}
.l-nav .nav-con ul.nav-list>li:hover>a,.l-nav .nav-con ul.nav-list>li.active>a{ color: #fff;}
.l-nav .nav-con ul.nav-list>li ul{ display: none;}
.l-nav .nav-con ul.nav-list>li:hover ul{ display: block;}
.l-nav .nav-con ul.nav-list>li>a{ line-height: 30px; color: #4a5252; font-size: 14px;}
.l-nav .nav-con ul.nav-list ul.more-menu{ width: 64px; background-color: #fff; padding: 10px; position: absolute; left: 50%; margin-left: -42px; top: 40px;}
.l-nav .nav-con ul.nav-list ul.more-menu li{ padding-bottom: 5px; border-bottom: 1px solid #ccc; text-align: center;}
.l-nav .nav-con ul.nav-list ul.more-menu li a{ color: #666; line-height: 30px;}
.l-nav .nav-con ul.nav-list ul.more-menu li:last-child{ border-bottom: none;}
.l-nav .nav-con ul.nav-list ul.more-menu li a:hover{ color: #1177cc;}

.pro-con{ width: 1110px; margin: 0 auto;}
.pro-con p.title{ margin-top: 40px; text-align: center; font-size: 24px; color: #333; line-height: 100%;}
.pro-con p.title span{ color: #ccc; font-size: 10px;}
.prolist{ margin-bottom: 120px;}
.prolist li{ width: 250px; margin-left: 30px; float: left; display: inline; border: 1px solid #dcdcdc;}
.prolist li:nth-child(1){ margin-left: 0;}
.prolist li .toppic{ height: 143px; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; position: relative;}
.prolist li .toppic .topimg{ width: 112px; height: 128px; position: absolute; left: 50%; margin-left: -56px; bottom: -64px; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; z-index: 1; transform:rotate(0); transition: all .3s ease 0s;}
.prolist li:hover .toppic .topimg{ transform: rotate(180deg);}
.prolist li .toppic .topicon{ position: absolute; left: 50%; z-index: 2;}
.prolist li:nth-child(1) .toppic{ background-image: url(../images/prolist-top-1.png);}
.prolist li:nth-child(2) .toppic{ background-image: url(../images/prolist-top-2.png);}
.prolist li:nth-child(3) .toppic{ background-image: url(../images/prolist-top-3.png);}
.prolist li:nth-child(4) .toppic{ background-image: url(../images/prolist-top-4.png);}
.prolist li:nth-child(1) .toppic .topimg{ background-image: url(../images/prolist-topimg-1.png);}
.prolist li:nth-child(2) .toppic .topimg{ background-image: url(../images/prolist-topimg-2.png);}
.prolist li:nth-child(3) .toppic .topimg{ background-image: url(../images/prolist-topimg-3.png);}
.prolist li:nth-child(4) .toppic .topimg{ background-image: url(../images/prolist-topimg-4.png);}
.prolist li .toppic .list-icon{ width: 60px; height: 60px; position: absolute; left: 50%; margin-left: -30px; bottom: -30px; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; z-index: 1; transform:rotate(0); transition: all .3s ease 0s; cursor: pointer;}
.prolist li .con{ background-color: #fff; padding: 80px 30px 12px;}
.prolist li .con h1.title{ margin-bottom: 15px; text-align: center; font-size: 28px; font-weight: bold;}
.prolist li:nth-child(1) .con h1.title{ color: #25d308;}
.prolist li:nth-child(2) .con h1.title{ color: #f5c900;}
.prolist li:nth-child(3) .con h1.title{ color: #04bad3;}
.prolist li:nth-child(4) .con h1.title{ color: #fd4e4e;}
.prolist li .con p{ color: #434e50; font-size: 14px; text-align: left; line-height: 1.6;}
.prolist li .con p.btn{ text-align: center;}
.prolist li .con p.btn a{ margin-top: 20px; color: #a0a0a0; border: 1px solid #a0a0a0; border-radius: 3px; line-height: 32px; width: 118px; transition: all .3s ease; text-transform: uppercase;display: inline-block; text-align: center;}
.prolist li:nth-child(1):hover .con p.btn a{ color: #25d308; border-color: #25d308;}
.prolist li:nth-child(2):hover .con p.btn a{ color: #f5c900; border-color: #f5c900;}
.prolist li:nth-child(3):hover .con p.btn a{ color: #04bad3; border-color: #04bad3;}
.prolist li:nth-child(4):hover .con p.btn a{ color: #fd4e4e; border-color: #fd4e4e;}

/*成功案例*/
.case{ border-top: 1px solid #c8c8c8; margin-bottom: 100px;}
.case .top{ margin-top: 20px; text-align: center;}
.case .top a{ padding: 0 30px; margin: 0 25px; border: 1px solid #c8c8c8; line-height: 36px; display: inline-block; color: #000;}
.case .top a.active,.case .top a:hover{border-color: #1379d8;color: #1379d8; background-color: #f0f0f0;}
.case .con{ margin-top: 26px;}
.case .con li{ width: 250px;height: 130px; margin-top: 28px; margin-right: 28px;float: left;display: inline;position: relative; border: 1px solid #c8c8c8; cursor: pointer;}
.case .con li:before{ content: "";position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.4);opacity: 0;transition: opacity .2s ease; z-index: 1;}
.case .con li p{ color: #fff; font-size: 20px; text-align: center; width: 80%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;display: none;}
.case .con li:hover p{ display: inline-block;}
.case .con li:hover:before{opacity: 1;}
.case .con li:nth-child(4n){margin-right: 0;}

.footer{ width: 100%; height: 60px; background-color: #000; line-height: 60px; color: #979797; font-size:12px;}