body{font: normal 14px Arial,Helvetica,"Microsoft Yahei","Simhei",sans-serif; color: #333; box-sizing: content-box}
a{color: #333; text-decoration: none}
.wrap{width: 1140px; margin: 0 auto}

/*header*/
.header .top{background: #505866; border-bottom: 1px solid #646a74}
.header .banner{background: #454c58; border-bottom: 1px solid #383E48}
.top .top-logo{float: left; height: 95px}
.top .top-navi{float: right}
.top-logo:after{content: ""; display: inline-block; height: 100%; vertical-align: middle}
.top-logo img{vertical-align: middle}
.top-navi li{float: left; margin: 26px 5px}
.top-navi li a{display: block; padding: 12px 25px; color: rgba(255,255,255,0.7); border-radius: 5px; font-size: 16px; font-weight: lighter; transition: background 0.5s}
.top-navi li a:hover,.top-navi li.active a{background: #3e444e; color: #999; transition: background 0.5s,color 0.5s}
.banner .ban-img{width: 45%; height: 530px; float: left; background: url(../images/ban-img.png) no-repeat left 105%}
.banner .ban-text{width: 45%; margin-top: 100px; float: right; color: #c6c6c6; line-height: 1.8}
.ban-text h2{font-size: 40px; color: #fff; font-weight: lighter}
.ban-text p{margin: 1em 0}
.ban-text .lighter{color: #999; font-weight: lighter}
.ban-text .contact{display: block; margin: 3em 0 0}
.ban-text .ban-btn{background: #85ca25; margin-right: 20px; color: #505866; font-size: 18px; font-weight: bold; padding: 12px 30px; border-radius: 10px; transition: all 0.5s}
.ban-text .ban-btn:hover{background: #fff; color: #999}
.ban-text .contact .link{color: #fff; border-bottom: 1px solid #fff; font-size: 14px; font-weight: lighter; line-height: 1.5; background: url(../images/icon/ico-tv.png) no-repeat left; padding-left: 25px; display: inline-block; transition: 0.5s all ease}
.ban-text .contact .link:hover{color: #85ca25; background-image: url(../images/icon/ico-tvon.png); border-bottom-color: #85ca25}

/*footer*/
.footer{background: #454c58; color: #828d93; padding: 40px 0}
.footer .footer-nav{float: left; width: 80%}
.footer .footer-link{float: right; width: 20%}
.footer-nav dl{float: left; width: 20%; line-height: 1.8}
.footer-nav dt{font-size: 18px; margin-bottom: 1em}
.footer-nav dd a{color: #828d93}
.footer-link li{float: left; margin-right: 5px}
.footer-link li a{display: block; width: 36px; height: 36px; background: url(../images/icon/footer-sprit.png) no-repeat; transition: opacity 0.5s}
.footer-link li a:hover{opacity: 0.3}
.footer-link .wechat a{background-position: 25%}
.footer-link .weibo a{background-position: 50%}
.footer-link .qzone a{background-position: 75%}
.footer-link .tenwb a{background-position: 100%}
.footer .copyright{text-align: center; margin-top: 40px; color: #676E7B; font-size: 12px}
.footer .beian{text-align: center; margin-top: 40px; color: #676E7B; font-size: 12px}

/*home*/
.page-home{background: url(../images/bg-home.jpg) no-repeat}
.home{padding: 70px 0}
.home-info{background: #e4e4e4}
.home-info .info-list,.home-info .info-text{padding: 20px 2%; height: 180px}
.home-info .info-list{float: left; width: 26%}
.home-info .info-list h3{font-weight: bold; font-size: 16px; margin-bottom: 20px}
.home-info .info-list li{line-height: 2; padding-left: 25px; background: url(../images/icon/ico-correct.png) no-repeat left}
.home-info .info-text{float: right; width: 66%; box-shadow: inset 1px 0 0 #fff; line-height: 2}
.home-info .info-text h3{font-size: 18px; margin-bottom: 0.5em}
.home-info .info-text p{color: #666; font-weight: lighter}
.home-serv{padding: 60px 0; border-bottom: 1px solid rgba(75, 90, 101, 0.15)}
.home-serv li{float: left; width: 28.33%; margin: 0 2.5%; text-align: center}
.home-serv li .icon{width: 134px; height: 134px; margin: 0 auto; background: url(../images/icon/ico-serv1.png) no-repeat center}
.home-serv li .serv-2{background-image: url(../images/icon/ico-serv2.png)}
.home-serv li .serv-3{background-image: url(../images/icon/ico-serv3.png)}
.home-serv li h4{color: #4b5a65; font-size: 20px; font-weight: bold; margin: 20px 0 10px}
.home-serv li p{color: #a4a4a4; line-height: 1.8}
.home-serv li .serv-btn{padding: 10px; width: 30%; margin: 10px auto; display: block; border-radius: 30px; color: #fff; background: linear-gradient(to bottom, #3d93d1 0%,#207cca 0%,#21aad3 0%,#42b3d6 1%,#218cce 48%,#41acd3 99%,#207cca 100%,#21aad3 100%,#207cca 100%,#3d93d1 100%)}
.home-serv li .serv-btn:hover{background: #3e444e}
.home-superiority{padding: 60px 0; border-bottom: 1px solid rgba(75, 90, 101, 0.15)}
.home-superiority li{float: left; width: 30.33%; margin: 0 1.5%}
.home-superiority h4{color: #4b5a65; font-size: 18px}
.home-superiority p{font-weight: lighter; line-height: 1.6; margin: 1em 0 1.5em}
.home-superiority a{color: #4b5a65; border-bottom: 1px solid #999}
.home-superiority a:hover{color: #7ec623; border-bottom-color: #7ec623; transition: color 0.5s,border-color 0.5s}
.home-project{padding-top: 50px}
.home-project h3{color: #4b5a65; font-size: 20px; font-weight: bold}
.home-project h3 span{margin-left: 10px; font-weight: lighter; color: #666; font-size: 16px; text-transform: capitalize}
.home-project li{float: left; width: 22%; margin: 30px 1.5% 0; box-shadow: 0 1px 3px rgba(0,0,0,0.5); border-radius: 3px}
.home-project li img{padding: 2%; width: 96%}

/*feature*/
.page-title{font-size: 40px; text-align: center; color: #4b5a65; line-height: 1; margin: 50px 0 0}
.page-title:after{content: ""; display: block; margin: -0.5em 0 60px; border-bottom: 1px dotted #ddd}
.page-title span{background: #fff; font-weight: lighter; padding: 0 0.5em}
.feature{padding: 30px 0 60px; border-bottom: 1px solid rgba(75, 90, 101, 0.15)}
.feature li{float: left; width: 28.33%; margin: 0 2.5% 30px; text-align: center}
.feature li .icon{width: 64px; height: 64px; margin: 0 auto; background: url(../images/icon/feature-1.png) no-repeat center}
.feature li .serv-2{background-image: url(../images/icon/feature-2.png)}
.feature li .serv-3{background-image: url(../images/icon/feature-3.png)}
.feature li .serv-4{background-image: url(../images/icon/feature-4.png)}
.feature li .serv-5{background-image: url(../images/icon/feature-5.png)}
.feature li h4{color: #4b5a65; font-size: 20px; font-weight: bold; margin: 20px 0 10px}
.feature li p{color: #a4a4a4; line-height: 1.8}
.second-nav li{float: left; margin-right: 10px}
.second-nav li a{padding: 15px 40px; display: block; font-size: 18px; color: #e55353; background: #1e1e1e; border-radius: 5px; transition: background 0.5s}
.second-nav li a:hover,.second-nav li.active a{background: #434043; color: #fff; transition: color 0.5s,background 0.5s}

/*list*/
.image-list{padding: 50px 0}
.image-list li{float: left; width: 32.33%; margin: 0 0.5% 10px; background: #505866}
.image-list li img{width: 100%; display: block; margin: 0 auto; transition: opacity 0.5s}
.image-list li a:hover img{opacity: 0.5}
.new-list{padding: 30px 0 50px}
.new-list li:after{content: ""; display: block; height: 0; clear: both}
.new-list li{margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid rgba(75, 90, 101, 0.15)}
.new-list li img{float: left; width: 300px; margin-right: 20px; border: 5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.5); border-radius: 3px}
.new-list li h4{color: #4b5a65; font-size: 20px; margin-bottom: 1em}
.new-list li p{font-weight: lighter; color: #666; line-height: 1.8}
.new-list li .time{font-style: italic; color: #999; font-size: 12px}
.new-list li:last-child{border-bottom: none}

/*about*/
.company{color: #666; line-height: 2; padding: 0 200px 50px}
.company img{border-radius: 3px; display: block; margin: 0 auto 20px}
.company h3{font-size: 18px; border-top: 1px solid rgba(75, 90, 101, 0.15); margin: 1.5em 0 0; padding: 1em 0 0.5em; color: #4b5a65}
.company p{font-weight: lighter}
.company strong{color: #4b5a65}

/*article*/
.article{padding: 50px}
.article h1{text-align: center; font-size: 30px; font-weight: lighter; color: #4b5a65}
.article h2{font-size: 24px; margin: 1em 0; font-weight: lighter}
.article h3{font-size: 18px; margin: 1em 0}
.article p,.article ul,.article ol{line-height: 1.8; margin: 1em 0; color: #555}
.article img{border-radius: 3px; border: 5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3)}