@charset "utf-8";

html,body{ height: 100%; min-width: 1200px;}

.wrapper{position: relative; min-height: 100%; padding-top: 88px; overflow: hidden; box-sizing: border-box;}
.container{ position: relative; width: 1200px; margin: 0 auto;}

/*--头部及导航--*/
.header{ height: 88px; overflow: hidden; }
.header .logo{ float: left; width: 253px; margin-top: 20px; animation-name: fadeInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.header .logo img{ width: 100%;}
.header .contact{ float: left; width: 140px; margin-left: 30px; margin-top: 20px; animation-name: fadeInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-delay: 0.1s; }
.header .nav{ float: right; height: 40px; margin-top: 24px; }
.header .nav li{ float: left; height: 40px; overflow: hidden; line-height: 40px; animation-name: fadeInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.header .nav li:nth-child(1){ animation-delay: 0.2s; }
.header .nav li:nth-child(2){ animation-delay: 0.3s; }
.header .nav li:nth-child(3){ animation-delay: 0.4s; }
.header .nav li:nth-child(4){ animation-delay: 0.5s; }
.header .nav li:nth-child(5){ animation-delay: 0.6s; }
.header .nav li:nth-child(6){ animation-delay: 0.7s; }
.header .nav li:nth-child(7){ animation-delay: 0.8s; }
.header .nav li:nth-child(8){ animation-delay: 0.9s; }
.header .nav li a{ position: relative; display: block; height: 80px; padding-left:24px;}
.header .nav li span{ display: block; max-width: 100px; height: 40px; text-align: center; font-size: 16px;}
.header .nav li:hover span,.header .nav li.active span{ color: #e90000; }
.header.fixed{ position: fixed; width: 100%; top: 0; background: #fff; z-index: 1; transition: all .3s ease;}
.header.shade{ box-shadow: 0 2px 10px #bbb; }
.header .nav li.active a{ color: #e90000; }

/*--banner轮播--*/
.banner{ position: relative; width: 100%; height: 600px; overflow: hidden;}
.banner .list{ position: absolute; height: 100%; }
.banner .list li{ width: 1200px; height: 100%; float: left; }
.banner .list li img{ display: block; width: 100%; height: 100%; }
.banner .dots{ position: absolute; width: 100%; bottom: 40px; height: 0; text-align: center;}
.banner .dots span{ display: inline-block; width: 24px; height: 24px; border: 1px solid #fff; border-radius: 100%; color: #fff; margin: 0 5px; cursor: pointer; line-height: 22px; font-size: 12px; box-sizing: border-box;}
.banner .dots span:hover,.banner .dots span.active{ background: #fff; color: #666;}
.banner .prev-next{ position: absolute; top: 50%; margin-top: -21px; height: 0; width: 100%;}
.banner .prev-next span{ width: 43px; height: 43px; cursor: pointer; background-color: rgba(100,100,100,0); transition: all .2s ease; border-radius: 3px; overflow: hidden; }
.banner .prev-next span:hover{ background-color: rgba(100,100,100,0.5); border-radius: 100%; }
.banner .prev-next .prev{ float: left; background-image: url(../images/prev.png); background-repeat: no-repeat; background-position: center;}
.banner .prev-next .next{ float: right; background-image: url(../images/next.png); background-repeat: no-repeat; background-position: center;}

/*--主要内容--*/
.content{ width: 100%; }
.content .cont-tit{ padding-top: 60px; color: #5a5a5a; text-align: center;}
.content .cont-tit h3{ font-size: 28px; line-height: 40px; }
.content .cont-tit span{ display: block; width: 50px; height: 1px; margin: 20px auto; background: #e10413; }
.content .cont-tit p{ font-size:16px; line-height: 48px; }

.cont-main p{ font-size: 14px; line-height: 26px; color: #666; text-align: justify; text-indent: 2em; }
.cont-main img{ display: block; margin:20px auto;}
.cont-main .pictit{ display: block; width: 100%; margin-bottom: 40px; font-size:14px; color: #999999; text-align: center;}
.case-info { padding: 20px 30px; border-radius: 4px; }
.case-info li{ margin-bottom: 10px; min-height: 26px; }
.case-info span{ float: left; text-align: right; font-size: 14px; line-height: 26px; text-align: left; margin-right: 5px;  }
.case-info p{  text-indent: 0; line-height: 26px; }

.case-content{ padding: 20px; font-size:14px; color: #666666; line-height: 22px; }

/*--首页案例分享--*/
.case-list{ width: 100%; margin-top: 40px;}
.case-list li{ width: 400px; height: 400px; float: left; }
.case-list li a{ position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.case-list li img{ display: block; width: 100%; height: 100%; transition: all .3s ease; margin: 0; }
.case-list li .shade-box{ position: absolute; top: -100%; width: 100%; height: 100%; padding: 310px 30px 20px; box-sizing: border-box; background: url(../images/shade-bg.png); transition: all .3s ease; color: #fff; }
.case-list li:hover .shade-box{ top: 0%; }
.case-list li:hover img{ transform: scale(1.1); }
.case-list li .shade-box h3{font-size: 24px; line-height: 40px; color: #fff;}
.case-list li .shade-box p{font-size: 16px; line-height: 30px; color: #fff; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}

/*--动态--*/
.news-list{ width: 100%; margin-top: 40px; }
.news-list li{ position: relative; top: 0; width: 48%; height: 112px; float: left; padding: 20px; margin-bottom: 20px; box-sizing: border-box; border: 1px solid #fff; box-shadow: 0 0 0 rgba(100,100,100,.3); transition: all .3s ease; cursor: pointer;}
.news-list li:hover{ top: -5px; box-shadow: 3px 3px 20px rgba(100,100,100,.3); }
.news-list li .date{ width: 70px; height: 70px; float: left; border: 1px solid #999; box-sizing: border-box;}
.news-list li .date h3{ line-height: 46px; font-size: 20px; text-align: center; }
.news-list li .date p{ line-height: 22px; font-size: 14px; text-align: center; background: #999; color: #fff; }
.news-list li .new-cont{ height: 70px; margin-left: 100px; }
.news-list li .new-cont .tit{ height: 30px; line-height: 30px; font-size: 18px; color: #333;}
.news-list li .new-cont p{ height: 40px; line-height: 20px; font-size: 14px; overflow: hidden;  color: #666;}

/*--footer底部--*/
.footfix{ content: ''; height: 382px; margin-top: 50px;}
.footer{ height: 382px; margin-top: -382px; background: #434343; padding-top: 60px; box-sizing: border-box;}
.footer .left{ float: left; width: 540px; margin-left: 20px;}
.footer .left span{display: inline-block; width: 27.5px; line-height: 30px; font-size: 16px; color: #fff; text-align: center;}
.footer .qr-code{ float: left; width: 120px; height: 120px;}
.footer .left p{ margin-left: 150px; color: #dfdfdf; line-height: 30px; font-size: 14px; }
.footer .right{ margin-left: 700px;}
.footer .right .block{ float: left; width: 15%; margin-left: 10%; text-align: left; color: #dfdfdf;}
.footer .right .block h3{font-size: 24px; color: #dfdfdf;}
.footer .right .block span{ color: #ccc; line-height: 30px;}
.footer .right .block li a{ line-height: 24px; font-size: 14px; color: #dfdfdf;}
.footer .right .block li a:hover{ color: #fff;}
.footer .bottom { margin-top: 70px;}
.footer .bottom .logo{ float: left; margin-left: 20px;}
.footer .bottom .copyright{ float: right; margin-right: 5px; width: 500px; text-align: right;}
.footer .bottom .copyright p{ font-size: 14px; color: #fff; line-height: 23px;}

/*--返回顶部--*/
.totop{position:fixed; display: none; right: 0px; bottom: 50px; width: 44px; height: 44px; border-radius:100%; overflow: hidden; background: url(../images/totop.png) no-repeat center; cursor: pointer;}
.totop:hover{box-shadow: 0 0 15px #ccc;}

/*--右侧悬浮--*/
.aside{ position: fixed; right: 0; top: 50%; margin-top: -70px; width: 40px; z-index: 1; background: #ccc; border-radius: 5px 0 0 5px; padding: 5px 0;}
.aside li{ position: relative; }
.aside li:first-child{ border-top: none;}
.aside li>span{ display: block; position: relative; width: 40px; height: 40px; padding-top: 5px; z-index: 1; cursor: pointer; }
.aside li.tel>span{ background: #cccccc url(../images/TEL.png) no-repeat center;}
.aside li.qq>span{ background: #cccccc url(../images/qq.png) no-repeat center;}
.aside li.qrcode>span{ background: #cccccc url(../images/QRC.png) no-repeat center;}
.aside li>div{ position: absolute; left: 40px; height: 145px; width: 145px; transition: all .3s ease-in-out; padding: 10px; box-sizing: border-box; background: #cccccc; border-radius: 5px 0 0 5px; color: #515151;}
.aside li>div span{ display: block; font-size: 16px; line-height: 30px;}
.aside li>div p{ font-size: 14px; line-height: 30px;}
.aside li.tel div { top: -5px;}
.aside li.qq div { top: -50px;}
.aside li.qrcode div { top: -95px;}
.aside li.qrcode div img{ width: 100%;}
.aside li:hover div{ left: -140px;}

/*--QQ在线咨询--*/
.aside li.qq .qq-online{ position: relative; top: 0; display: block; width: 90px; margin: 0 auto; height: 30px; line-height: 20px; border-radius: 4px; background: #515151; color: #fff; line-height: 30px; text-align: center; font-size: 14px; margin-bottom: 5px;}
.aside li.qq .qq-online:hover{ box-shadow: 1px 1px 5px #666; top: -1px; }
.aside li.qq img{ display: block; width: 90px; height: 90px; margin: 0 auto;}

/*--内页banner--*/
.banner-inside{height:auto;}
.banner-inside .list{ position: relative; height: auto; }
.banner-inside .list li{ width: 1200px; float: left; }
.banner-inside .list li img{ display: block; width: 100%; height: auto; }

/*--关于我们链接--*/
.cont-link{ height: 40px; text-align: center; padding-top: 60px;}
.cont-link li{ display: inline-block; margin: 0 10px; }
.cont-link li a{ display: block;  min-width:130px; line-height: 40px; border: 1px solid #e10413; border-radius: 40px; font-size: 16px; color: #666; padding: 0 15px; transition: all .3s ease; box-sizing: border-box; }
.cont-link li.active a,.cont-link li:hover a{ color: #fff; background: #e10413; }
.cont-link li.active a,.cont-link li:hover a{ color: #fff; background: #e10413; }

/*--分页--*/
.page{ width: 100%; height: 32px; text-align: center; margin: 30px 0;}
.page a,.page span{display: inline-block; padding: 0 10px; min-width: 30px; height: 30px; line-height: 30px; border: 1px solid #CCCCCC; text-align: center; box-sizing: border-box; margin: 0 3px; font-size: 14px; color: #666; border-radius: 3px;}
.page a:hover,.page a.active{ background: #e10413; border-color: #e10413; color: #fff; }

/*--动态--*/
.news-inside{ margin-top: 40px; }
.news-inside li{ position: relative; top: 0; float: left; width: 48%; height: 242px; transition: all .3s ease; margin-bottom: 30px;}
.news-inside li a{ display: block; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; border: 1px solid #eee;}
.news-inside .news-img{ width: 200px; height: 200px; float: left; overflow: hidden;}
.news-inside .news-img img{ width: 100%; height: 100%; transition: all .3s ease;}
.news-inside li:hover .news-img img{ transform: scale(1.1); }
.news-inside li:hover { top: -5px; box-shadow: 0px 0px 30px #ccc;}
.news-inside .news-info{ position: relative; margin-left: 220px; height: 100%;}
.news-inside .news-info h3{ line-height: 50px; font-size: 26px; color: #666;}
.news-inside .news-info span{ display: block; line-height: 20px;}
.news-inside .news-info p{ margin-top: 20px; max-height: 96px; line-height: 24px; font-size: 14px; overflow: hidden;}

/*--我们能做什么--*/
.service{ width: 600px; float: left; margin-top: 50px;}
.service-cont{ width: 280px; height: 280px; float: left; box-sizing: border-box; padding: 30px; padding-top: 20px; transition: all .3s ease; cursor: default; text-align: center; border: 1px dotted #ddd;}
.service-cont.sc01{/* border-radius: 100% 100% 0 100% ;*/ border-left: none; border-top: none; }
.service-cont.sc02{ /*border-radius: 100% 100% 100% 0 ;*/ border-right: none; border-top: none;}
.service-cont.sc03{ /*border-radius: 100% 0 100% 100% ;*/ border-left: none; border-bottom: none;}
.service-cont.sc04{ /*border-radius: 0 100% 100% 100% ;*/ border-right: none; border-bottom: none;}
.service-cont.sc01:hover{ box-shadow: 5px 5px 5px #ccc; }
.service-cont.sc02:hover{ box-shadow: -5px 5px 5px #ccc;}
.service-cont.sc03:hover{ box-shadow: 5px -5px 5px #ccc;}
.service-cont.sc04:hover{ box-shadow: -5px -5px 5px #ccc;}
.service-cont .icon{ font-size: 40px; color: #888;  -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;}
.service-list { margin-top: 10px;}
.service-cont .service-tit{ line-height: 36px; font-size: 26px; color: #888;}
.service-list li{ font-size: 14px; color: #888; line-height: 24px; }
.service-cont:hover .service-tit,.service-cont:hover li,.service-cont:hover .icon{ color: #555;}

.cl02 { width: 500px; margin-left: 700px; padding-top: 50px;}
.cl02 li .shade-box{ padding: 160px 30px 20px;}
.cl02 li{ width: 250px; height: 250px;}
.wtwd-tit{ display: block; position: relative; text-align: left;font-size: 20px; color: #666; line-height: 40px; margin-bottom: 30px; padding-left: 20px;}
.wtwd-tit i{ position: absolute; left:0; top: 10px; width: 3px; height: 20px; background: #e10413; }
.cl02 .wtwd-tit { margin-bottom: 40px;}

/*--案例详情--*/
.more-case{ display: block; width: 200px; margin: 40px auto; padding: 0 20px; height: 40px; line-height: 40px; color: #fff;  font-size: 16px; text-align: center; background: #e10413; border-radius: 4px;}
.more-case:hover{ background: #c5000d; box-shadow: 3px 3px 10px #ccc; }

/*--联系我们--*/

.contact-left{ float: left; width: 60%; box-sizing: border-box; padding-right: 50px; padding-top: 50px;}
.contact-left p{ height: 40px; line-height: 40px; padding-left: 50px; font-size: 16px; color: #515151; text-indent: 0;}
.contact-left .hotline{ background: url(../images/hotLine.png) no-repeat left center;}
.contact-left .email{ background: url(../images/email.png) no-repeat left center;}
.contact-left .address{ background: url(../images/address.png) no-repeat left center;}
.contact-tit{ position: relative; font-size: 24px; color: #515151; line-height: 40px; margin-bottom: 20px;}
.contact-tit i{display: block; float: left; margin-top: 11px; margin-right: 15px; width: 3px; height: 20px; background: #e10413; }

/*--在线留言--*/
.contact-left .map-box{ width: 80%; height: 380px; margin-top: 50px;}
.contact-right{ margin-left: 60%; padding-top: 50px;}

.contact-right .step-name{ float: left; font-size: 16px; line-height: 40px; }
.contact-right .tooltip{ float:right; display: none; text-align: right; font-size: 12px; line-height: 40px; color: #FF6666; }

.contact-right .step-name i{ color: #ff0000; font-style: normal; margin-left: 4px; }
.checkbox{ display: inline-block; margin-bottom: 10px ;height: 36px; background: #efefef; color: #333; border-radius: 4px; line-height: 34px; padding: 0 14px; font-size: 12px; cursor: pointer; border: 1px solid #efefef; box-sizing: border-box; transition: background-color .3s ease;}
.checkbox:hover{ border-color: #e10413; background: #fff;}
.checkbox.on { border-color: #e10413; background: #e10413; color: #fff;}

.feedback-box li:first-child .step-name{ float: none;}
.feedback-box .error .tooltip{ display: block; }
.feedback-box .error input,.feedback-box .error textarea{ border-color: #FF6666; }
.feedback-box input{ width: 100%; height: 36px; line-height: 36px; box-sizing: border-box; padding: 0 10px; border-radius: 4px; border: 1px solid #ccc; outline-color: #bbdefe; margin-bottom: 10px; font-size: 14px; color: #999;}
.feedback-box input:focus{ border-color: #bbdefe; }
.feedback-box textarea{ width: 100%; padding: 4px 10px; height: 100px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; outline-color: #bbdefe; font-size: 14px; color: #999; resize: none;}
.feedback-box textarea:focus{ border-color: #bbdefe;}
.feedback-box .submit{ width: 100%; border: none; border-radius: 4px; height: 40px; font-size: 16px; color: #fff; background: #e10413; margin-top: 22px; font-family: "微软雅黑"; cursor: pointer; transition: all .2s ease; outline: none;}
.feedback-box .submit:hover{ box-shadow: 2px 2px 10px #ddd; background: #c5000d;}

.feedback-box { position: relative;}
#submitted{ position: absolute; bottom: 62px; display: none; width: 100%; text-indent: 0; text-align: center; color: #666666; margin-bottom: -22px; }