@charset "utf-8";
/* CSS Document */
html,body{ height:100%}
body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dd, dl, dt, input {margin: 0;padding: 0;}
body {
    color: #666;
    font-family: "微软雅黑",Arial,Helvetica,sans-serif;
    font-size: 12px;
}
ul, li, em, i {font-style: normal;font-weight: normal;list-style: outside none none;}
a {color: #666;outline: medium none;text-decoration: none;}
a:hover {text-decoration: none;}
img {border: 0 none;vertical-align: middle;}
em {font-style: normal;}
.clear {clear: both;}
.left {float: left;}
.right {float: right;}
.clear {clear: both;content: "";display: table;}
.clearfix::after {clear: both;content: " ";display: block;}
.wrapper {margin: 0 auto;position: relative;width: 1200px;}

#header{ position:absolute; left:100px; right:100px; top:0; z-index:999; padding-top:30px;}
.black #logo a{ background-image:url(../images/logo1.png) }
#logo a{ display:block; height:56px; background:url(../images/logo.png) no-repeat; width:306px;}
#nav a{ color:#fff; font-size:14px; display:inline-block; height:56px; line-height:56px; text-align:center; width:80px;}
#nav.black a{ color:#000;}
#nav img{ display:none;}
.nav_icon{ background:url(../images/icon.png) no-repeat; display:block; height:25px; width:30px; position:absolute; right:15px; top:25px; display:none;}

#banner{ position:relative;}

.swiper-container {width:100%;height:100%;}
.swiper-slide {	text-align: center;	font-size: 18px;background-position:center;	background-size:cover;	background-repeat:no-repeat;}
.swiper-slide dl{ color:#fff; font-size:48px; text-align:left; height:380px; position:absolute; left:100px; top:50%; margin-top:-190px; }
.swiper-slide dl strong{ display:block; font-size:78px;}
.swiper-slide dl em{ display:block;} 

.bot{ height:35px; color:#fff; position:absolute; left:15px; bottom:60px; right:15px; z-index:9999}
.bot .left{ padding-top:4px;}
/*TOPVE最新作品*/
.newcase{position:absolute;z-index: 8;top:50%;right: 20px;margin:-95px 0 0 0;}
.newcaset{ position: absolute; top:57px; right:112px; background:url(../images/topveico.png) no-repeat; background-position:right 0px; padding:17px 0 15px; width:22px; line-height: 115%; font-size:12px; color:#fff; text-align: center;}
.newcasepage1{ position: absolute; top:-25px; left:44px; background:url(../images/topveico.png) no-repeat; background-position:4px 4px; width:25px; height:18px; text-indent: -9999px; cursor: pointer; }
.newcasepage1:hover{background-position:-23px 4px;}
.newcasepage2{ position: absolute; top:205px; left:44px; background:url(../images/topveico.png) no-repeat; background-position:4px -13px; cursor: pointer; width:25px; height:18px; text-indent: -9999px; }
.newcasepage2:hover{ background-position:-23px -13px;} 
.newcaselist{height:195px;border:1px solid rgba(255,255,255,.5);overflow: hidden;}
.newcase ul{margin:0;padding:5px 5px 0 5px;}
.newcase ul li{margin:0;padding:3px 0;}
.newcase ul li a{margin:0;padding:0;overflow:hidden;display:block;}
.newcase ul li img{max-width:100px;border:0px solid #000;display:inline;}
@media screen and (max-width: 780px) {
.newcase{display:none}
}

/*TOPVE主屏新闻*/
.hotnews{display:inline-block;text-align: right;}
.hotnewst{float:right;background:url(../images/topveico.png) no-repeat;background-position:-111px 0;padding:0 0 0 15px;width:48px;color:#fff;font-size:12px;line-height:100%;
}
.hotnewslist{margin:5px 0 0;height: 20px;overflow: hidden;}
.hotnewslist ul{}
.hotnewslist ul li{height:20px;font-size:14px;text-indent:15px;line-height:20px;}
.hotnewslist ul li a{color:#fff;}
.hotnewslist ul li a:hover{color:#666;}



#intro{ color:#212121; padding:120px 0; text-align:center;}
#intro h1{ font-size:72px; font-family:'宋体'; font-weight:normal;}
#intro dl{ font-size:24px; padding:30px 0 70px;}
#intro ul{ margin:0 auto; max-width:960px;}
#intro li{ font-size:20px; float:left; padding:0 30px;}
#intro li span{ display:block; font-size:60px; font-weight:bold;}


.works{ position: relative; width: 100%; height: 100%; max-height:640px; background-color: #000; overflow:hidden}
.works .works-slide{ position: relative; width: 100%; height: 100%; display: table; max-height:640px;}
.works .sub-slides{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.works .sub-slides li{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0;
	transition: all 1s ease 0s;
	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
}
.works .sub-slides li:nth-of-type(1){ background: url(../images/bg1.png) no-repeat center center; background-size: 100% 100%;}
.works .sub-slides li:nth-of-type(2){ background: url(../images/bg2.png) no-repeat center center; background-size: 100% 100%;}
.works .sub-slides li:nth-of-type(3){ background: url(../images/bg3.png) no-repeat center center; background-size: 100% 100%;}
.works .sub-slides li .contsd{ position: relative; width: 100%; height: 100%; display: table; text-align: right; padding-right: 15%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.works .sub-slides li .contsd .neis{ display: table-cell; vertical-align: middle; font-size: 0;}
.works .sub-slides li .contsd .neis .imGs{ display: inline-block; margin-right: 100px; vertical-align: middle;
	opacity: 0;
	transform: translateY(100px);
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	transition: all 1.5s ease-in-out .8s; 
	-webkit-transition: all 1.5s ease-in-out .8s; 
	-moz-transition: all 1.5s ease-in-out .8s; 
}
.works .sub-slides li:nth-of-type(2) .contsd .neis .imGs{ margin-right: auto; margin-left: 100px;}
.works .sub-slides li .contsd .neis .textsz{ display: inline-block; vertical-align: middle; text-align: left;}
.works .sub-slides li .contsd .neis h3{
	opacity: 0;
	transform: translateX(100px);
	-webkit-transform: translateX(100px);
	-moz-transform: translateX(100px);
	transition: all 1s ease 1s; 
	-webkit-transition: all 1s ease 1s; 
	-moz-transition: all 1s ease 1s; 
}
.works .sub-slides li .contsd .neis h4{ margin-top: 20px; margin-bottom: 50px;
	opacity: 0;
	transform: translateX(100px);
	-webkit-transform: translateX(100px);
	-moz-transform: translateX(100px);
	transition: all 1s ease 1.2s; 
	-webkit-transition: all 1s ease 1.2s; 
	-moz-transition: all 1s ease 1.2s; 
}
.works .sub-slides li .contsd .neis p{  text-align: left; font-size: 14px; color: #fff; margin-bottom: 20px;
	opacity: 0;
	transform: translateY(50px);
	-webkit-transform: translateY(50px);
	-moz-transform: translateY(50px);
}
.works .sub-slides li .contsd .neis p font{ width: 240px; display: inline-block;}
.works .sub-slides li .contsd .neis p:nth-of-type(1){
	transition: all .5s ease 1.4s;
	-webkit-transition: all .5s ease 1.4s;
	-moz-transition: all .5s ease 1.4s;
}
.works .sub-slides li .contsd .neis p:nth-of-type(2){
	transition: all .5s ease 1.6s;
	-webkit-transition: all .5s ease 1.6s;
	-moz-transition: all .5s ease 1.6s;
}
.works .sub-slides li .contsd .neis p:nth-of-type(3){
	transition: all .5s ease 1.8s;
	-webkit-transition: all .5s ease 1.8s;
	-moz-transition: all .5s ease 1.8s;
}
.works .sub-slides li .contsd .neis p:nth-of-type(4){
	transition: all .5s ease 2s;
	-webkit-transition: all .5s ease 2s;
	-moz-transition: all .5s ease 2s;
}
.works .sub-slides li .contsd .neis p:nth-of-type(5){
	transition: all .5s ease 2.2s;
	-webkit-transition: all .5s ease 2.2s;
	-moz-transition: all .5s ease 2.2s;
}
.works .sub-slides li.cur{ opacity: 1; z-index: 1;}
.works .sub-slides li.cur .contsd .neis .imGs{
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
}
.works .sub-slides li.cur .contsd .neis h3{
	opacity: 1;
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
}
.works .sub-slides li.cur .contsd .neis h4{
	opacity: 1;
	transform: translateX(0px);
	-moz-transform: translateX(0px);
	-webkit-transform: translateX(0px);
}
.works .sub-slides li.cur .contsd .neis p{
	opacity: 1;
	transform: translateY(0px);
}

.works .words-slide{ position: absolute; left: 10%; top: 0; width: 72px; z-index: 2;}
.works .words-slide ul{ width: 100%;}
.works .words-slide ul li{ width: 100%; margin-bottom: 40px; cursor: pointer;}
.works .words-slide ul li i{ display: block; margin-left: 20px; height: 70px; width: 1px; background-color: #636267;}
.works .words-slide ul li span{ display: block; margin: 5px 0; height: 36px; font-size: 36px; color: #636267; font-family: 'ZurichBT-Light';}
.works .words-slide ul li font{ display: block; font-size: 12px; color: #636267;}

.works .words-slide ul li i,
.works .words-slide ul li span,
.works .words-slide ul li font{
	transition: all .5s ease 0s;
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
}

.works .words-slide ul li:hover i,
.works .words-slide ul li.cues i{ background-color: #fff;}
.works .words-slide ul li:hover span,
.works .words-slide ul li:hover font,
.works .words-slide ul li.cues span,
.works .words-slide ul li.cues font{ color: #fff;}

#case{ box-sizing:border-box; padding:0 10px;}
#case .title{ color:#212121; margin:70px 0 30px; text-align:center;}
#case .title strong{ font-family:'宋体';font-size:48px; font-weight:normal;}
#case .title span{ display:block; font-size:24px; line-height:normal;}
#case .title em{ color:#cecece; font-size:12px;}
#case .list{ box-sizing:border-box; float:left; width:20%; padding:10px;}
#case .list a{ display:block; overflow:hidden; position:relative;}
#case .list img{ width:100%;}
#case .list span{ 
	background: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.85)); /* Safari 5.1 - 6.0 */
	background: -o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.85)); /* Opera 11.1 - 12.0 */
	background: -moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.85)); /* Firefox 3.6 - 15 */
	background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.85)); /* 上下渐变背景标准的语法 */
	margin:0 0px; font-size:14px; height:40px; line-height:40px;  position: absolute; color:#fff;
    bottom: 0;top:0;left: 0;right: 0; text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; display:block; opacity: 0;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;top: auto;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);} 
#case .list a:hover span {
    visibility: visible;
    opacity: 1;
	-webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.more{ display:block; border:1px solid #a0a0a0; border-radius:40px; color:#a0a0a0; font-size:16px; height:40px; line-height:40px; text-align:center; margin:5% auto; width:200px;}

#news{ max-width:1680px; margin:0 auto; overflow:hidden;}
#news .inc{ width:20%}
#news .inc img{ width:100%;
opacity: 0;
transform: translateY(200px);
-webkit-transform: translateY(200px);
-moz-transform: translateY(200px);
transition: all .8s ease-out 0s;
-webkit-transition: all .8s ease-out 0s;
-moz-transition: all .8s ease-out 0s;

}
#news .inc.active img{opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
}

#news .rig{ padding-left:22%;}
#news .rig li{ box-sizing:border-box; color:#666; font-size:24px; float:left; margin:20px 0; padding:0 3%; width:50%;
	opacity: 0;
	transform: translateX(300px);
	-webkit-transform: translateX(300px);
	-moz-transform: translateX(300px);
}
#news .rig li i {
    display: inline-block;
    width: 0px;
    height: 1px;
    background-color: #000;
    vertical-align: middle;

}
#news .rig h3{ font-weight:normal; }
#news .rig h3:hover i{ margin-right: 10px; width: 30px;}
#news .rig li:nth-of-type(1),#news .rig li:nth-of-type(2){transition: all .8s ease 0s; 
	-webkit-transition: all .8s ease 0s; 
	-moz-transition: all .8s ease 0s; 
}
#news .rig li:nth-of-type(3),#news .rig li:nth-of-type(4){transition: all .8s ease .2s; 
	-webkit-transition: all .8s ease .2s;
	-moz-transition: all .8s ease .2s;
	margin-bottom:0;
}
#news .rig.active li{opacity: 1;
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
}

#news .rig li em{ font-family:'黑体'}	
#news .rig li a{ color:#333; display:inline-block; margin:20px 0;}
#news .rig li p{ font-size:14px; line-height:25px;}

#news .rig .mores{ padding-left:3%; margin-top:-20px;
	opacity: 0;
	transform: translateX(300px);
	-webkit-transform: translateX(300px);
	-moz-transform: translateX(300px);
	transition: all .8s ease .4s; 
	-webkit-transition: all .8s ease .4s; 
	-moz-transition: all .8s ease .4s; 
}
#news .rig.active .mores{
	opacity: 1;
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
}
#news .rig .mores font{ display: inline-block; width: 0px; overflow: hidden; vertical-align: middle; }
#news .rig li i,
#news .rig .mores font{
	transition: all .3s ease 0s;
	-webkit-transition: all .3s ease 0s;
	-moz-transition: all .3s ease 0s;	
}
#news .rig .mores i{ display: inline-block; width: 38px;}
#news .rig .mores:hover font{ width: 40px;margin-right: 10px;}

#add{ margin:10% 1% 0; position:relative}
#add img{ box-sizing:border-box; border:1px solid #d9d9d9; margin:0 1%; width:18%; }

.bq-contact{ width: 100%; position: relative; background-color: #fff; overflow:hidden; padding: 3% 0;}
.bq-contact .contentbox{ width: 96%; height: 502px; position: relative; margin: 0 auto; background-color: #C80000; z-index: 2; display: table;}
.bq-contact .sub-conts{ position: relative; width: 100%; height: 100%; z-index: 2; display: table;}
.bq-contact .sub-conts:after{ position: absolute; content: ''; left: 2.5%; top: 7.5%; width: 95%; height: 85%; border: 1px solid #fff; z-index: -1;
	opacity: 0;
	transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
}
.bq-contact .sub-conts .different{ position: absolute; top: 50%; width: 240px; height: 210px; margin-top: -105px; background-color: #303030; text-align: center; line-height: 210px;
	opacity: 0;
	transform: scale(0.6);
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transition: all 1s ease 0s;
	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
}
.bq-contact .sub-conts .different.active{
	opacity: 1;
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
}
.bq-contact .bigbox{ float: left; width: 25%; height: 100%; display: table;}
.bq-contact .sub-conText{ float: right; width: 75%; padding-top: 6.5%; box-sizing: border-box; -moz-box-sizing: border-box;
	opacity: 0;
	transform: translateX(200px);
	-webkit-transform: translateX(200px);
	-moz-transform: translateX(200px);
	transition: all .8s ease 0s;
	-webkit-transition: all .8s ease 0s;
	-moz-transition: all .8s ease 0s;
}
.bq-contact .sub-conts .sub-conText.active{
	opacity: 1;
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
}
.bq-contact .sub-conText h2{ font-size: 58px; font-weight: bold; color: #fff;}
.bq-contact .sub-conText h3{ padding-top: 3px;}
.bq-contact .sub-conText h3 img{ display: block; width: 74%;}
.bq-contact .tel{ padding-top: 30px; font-size: 0;}
.bq-contact .tel aside{ display: inline-block; vertical-align: middle;}
.bq-contact .tel p{ font-size: 18px; color: #FFFFFF;}
.bq-contact .tel .nubgs{ position: relative; width: 465px; height: 35px;}
.bq-contact .tel .nubgs span{ display: inline-block; height: 35px; overflow: hidden; padding-top: 3px;}
.bq-contact .tel .nubgs span i{ display: inline-block; width: 100%; height: 35px; font-size: 28px; font-family: 'HelveticaNeue';}
.bq-contact .tel .nubgs .sp1{ color: #000; position: absolute; left: 0; top: 0; z-index: 1; display: none;}
.bq-contact .tel .nubgs .sp2{ width: 100%; color: #fff; position: absolute; left: 0; top: 0; z-index: 2;}
.bq-contact .tel .nubgs:hover .sp2{ width: 100%;}
.bq-contact .tel .QQuser{ display: inline-block; vertical-align: middle; padding-left: 40px; font-size: 0;}
.bq-contact .tel .QQuser font{ display: inline-block; vertical-align: bottom; width: 62px; height: 46px; position: relative;}
.bq-contact .tel .QQuser font em{ position: absolute; left: 0; top: 0; z-index: 1;}
.bq-contact .tel .QQuser font i{ position: absolute; left: 0; top: 0; opacity: 0; z-index: 2;}
.bq-contact .tel .QQuser a{ display: inline-block; vertical-align: middle; width: 95px; height: 24px; background-color: #fff; color: #C80000; font-size: 13px; text-align: center; line-height: 24px; border-radius: 15px;}
.bq-contact .countacti{ padding-top: 40px;}
.bq-contact .countacti a font{ display: inline-block; vertical-align: middle; font-size: 14px; font-family: 'HelveticaNeue'; color: #fff; letter-spacing: 1px;}
.bq-contact .countacti a small{ display: inline-block; width: 40px; height: 1px; vertical-align: middle; background-color: #fff; margin-left: 10px;}
.bq-contact .bookmarks{ position: absolute; right: 80px; top: 70px;
	opacity: 0;
	transition: all 1s ease .4s; 
	-webkit-transition: all 1s ease .4s; 
	-moz-transition: all 1s ease .4s; 
}
.bq-contact .bookmarks.active{
	opacity: 1;
}
.bq-contact .countacti a small,
.bq-contact .tel .QQuser font em,
.bq-contact .tel .QQuser a,
.bq-contact .tel .QQuser font i,
.bq-contact .tel .nubgs .sp2{
	transition: all 0.6s ease-in-out 0s;
	-webkit-transition: all 0.6s ease-in-out 0s;
	-moz-transition: all 0.6s ease-in-out 0s;
}
.bq-contact .contentbox:before,
.bq-contact .contentbox:after,
.bq-contact .sub-conts:after{
	transition: all .3s ease-in-out 0s;
	-webkit-transition: all .3s ease-in-out 0s;
	-moz-transition: all .3s ease-in-out 0s;
}
.bq-contact .sub-conts:hover:after{
	opacity: 1;
	transform: scale(1.0,1.0);
	-webkit-transform: scale(1.0,1.0);
	-moz-transform: scale(1.0,1.0);
}
.bq-contact .countacti a:hover small{ width: 80px;}
.bq-contact .tel .QQuser:hover em{ opacity: 0;}
.bq-contact .tel .QQuser:hover i{ opacity: 1;}
.bq-contact .tel .QQuser:hover a{ background-color: #000;}

#bot{ background:#222; padding:30px 0;}
#bot .wrapper{ width:80%;}
#bot span{ color:#fff; font-size:16px; margin-right:30px; padding:0 5px;}
#bot img{ margin-right:10px;}
#bot .go{ border:1px solid #e7e7e7; border-radius:40px; color:#e7e7e7; display:block; font-size:16px; height:40px; line-height:40px; padding:0 20px;}

#footer{ color:#aaa; font-size:14px; background:#000; padding:50px 0;}
#footer .wrapper{ width:80%;}
#footer dl{ padding:10px 0;}
#footer .tel{ color:#fff; font-size:36px; font-weight:bold;}
#footer dl.msg a{ border-radius:40px; background:#fff; color:#464446; display:inline-block; height:40px; line-height:40px; margin:0 20px; padding:0 20px;}
#footer .link{ color:#ccc;}
#footer .link a{ color:#888; margin-left:20px;}
#footer .ecode{ position:absolute; right:0; top:20px;}

/*case*/
#case_ban{ background:url(../images/case_ban.png) no-repeat center; background-size:cover !important; height:420px; position:relative}
#case_ban dl{ position:absolute; left:50%; top:50%; margin-left:-350px; margin-top:-30px; height:60px; width:700px; text-align:center;}
#case_ban em{ display:inline-block; height:1px; background:#fff; margin-right:20px; vertical-align:middle; width:220px;}
#case_ban span{ display:inline-block; font-size:36px; color:#fff; font-weight:bold; vertical-align:middle}

#case_list{ margin:0 auto; padding-top:3%; width:90%;}
#case_list .col{ float:left; width:33.33%; box-sizing:border-box; margin-bottom:2%; padding:0 10px;}
#case_list .col dl{ position:relative; overflow:hidden}
#case_list .col img{ width:100%;transition: all 1.2s ease-in-out;-moz-transition: all 1.2s ease-in-out;-webkit-transition: all 1.2s ease-in-out;}
#case_list .col em{ background:rgba(255,255,255,.5); display:block; height:60px; width:100%; position:absolute; left:0; bottom:0; text-align:center;opacity: 0;transition: all .3s ease-in-out 0s;-webkit-transition: all .3s ease-in-out 0s;-moz-transition: all .3s ease-in-out 0s; transform: translateY(100%);-moz-transform: translateY(100%);-webkit-transform: translateY(100%);}
#case_list .col em img{ height:30px; margin-top:15px; width:auto;}
#case_list .col p{transition: all .3s ease-in-out 0s;-webkit-transition: all .3s ease-in-out 0s;-moz-transition: all .3s ease-in-out 0s; padding-bottom:10px; position:relative}
#case_list .col strong{ display:block; font-size:15px; color:#201f1f; padding:10px 0 5px; text-align:center;transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;}
#case_list .col span{ color:#999; display:block; font-size:13px; font-style:italic; text-align:center;transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;}
#case_list .col:hover em{opacity: 1;transform: translate(0);-moz-transform: translate(0);-webkit-transform: translate(0);}
#case_list .col:hover strong,#case_list .col:hover span{ color:#fff;}
#case_list .col small{display: block;
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
transform: translateY(-100%);
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transition: all .4s ease-in-out .2s;
-moz-transition: all .4s ease-in-out .2s;
-webkit-transition: all .4s ease-in-out .2s;
}
#case_list .col:hover small{opacity: 1;transform: translate(0);	-moz-transform: translate(0);-webkit-transform: translate(0);}
#case_list .col:hover img{transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1);}

.pages{ margin:50px 3%;}
.pages a{ color:#333; display:inline-block; height:30px; line-height:30px; text-align:center; width:30px;}
.pages a.active{ color:#c50000;}
.pages a:hover{ color:#c50000;}

/*news*/
#case_ban.news{ background-image:url(../images/news_bg.jpg);}
#news_list{ margin:0 auto; width:70%; overflow:hidden}
#news_list #top{ padding:3%;}
#news_list #top em{ display:inline-block; height:1px; background:#333; width:50px; margin-right:10px; vertical-align:middle}
#news_list #top a{ display:inline-block; height:30px; line-height:30px; color:#666; margin-right:20px;vertical-align:middle}
#news_list #top a.active{ color:#333;}
#news_list #top a:hover{ color:#333;}
#news_list .lg{ height:50px;}
#news_list  li{ box-sizing:border-box; color:#666; font-size:24px; float:left; margin:20px 0; padding:0 3%; width:50%;
	opacity: 0;
	transform: translateX(300px);
	-webkit-transform: translateX(300px);
	-moz-transform: translateX(300px);
}
#news_list  li i {
    display: inline-block;
    width: 0px;
    height: 1px;
    background-color: #000;
    vertical-align: middle;

}
#news_list  h3{ font-weight:normal; }
#news_list  h3:hover i{ margin-right: 10px; width: 30px;}
#news_list  li:nth-of-type(1),#news_list li:nth-of-type(2){transition: all .8s ease 0s; 
	-webkit-transition: all .8s ease 0s; 
	-moz-transition: all .8s ease 0s; 
}
#news_list  li:nth-of-type(3),#news_list li:nth-of-type(4){transition: all .8s ease .2s; 
	-webkit-transition: all .8s ease .2s;
	-moz-transition: all .8s ease .2s;
	margin-bottom:0;
}
#news_list ul.active li{opacity: 1;
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
}

#news_list  li em{ font-family:'黑体'; font-size:14px;}	
#news_list  li a{ color:#333; display:inline-block; font-size:18px; font-weight:normal; margin:20px 0;}
#news_list  li p{ color:#999; font-size:12px; line-height:25px;}
#news_list li i{
	transition: all .3s ease 0s;
	-webkit-transition: all .3s ease 0s;
	-moz-transition: all .3s ease 0s;	
}

#news_list #detail{ padding:3%;}
#news_list #detail .title{ font-size:24px; color:#333; font-weight:normal; text-align:center;}
#news_list #detail .title span{ display:block; font-size:12px; color:#999; margin:2% 0 3%;}
#news_list #detail .content{ line-height:25px;}

#share{ margin-top:5%;}
.bdshare-button-style2-32 .bds_more{ display:none;}
#share a{ margin-right:10px;}
#share .bds_weixin{ background:url(../images/share_weixin.png) no-repeat 0 0;}
#share .bds_tsina{ background:url(../images/share_weibo.png) no-repeat 0 0;}
#share .bds_tqq{ background:url(../images/share_tx.png) no-repeat 0 0;}
#share .bds_qzone{ background:url(../images/share_qq.png) no-repeat 0 0;}
#page{ border-top:1px solid #ccc;line-height:50px; margin-top:1%;}


/*service*/
#service .col{ position:relative;}
#service .first{ background:url(../images/s1_bg.png) no-repeat center;}
#service .second{ background:url(../images/s2_bg.png) no-repeat center;}
#service .third{ background:url(../images/s3_bg.png) no-repeat center;}
#service .wrap{ padding:0 5%; position:absolute; left:0; top:15%}
#service .bg{ width:100%;}

#service img{ max-width:100%;}
#service h1{ padding-top:10%;}
#service h2{ margin:3% 0;}
#service dl{ color:#fff; font-size:16px; padding:1% 0 3%;}
#service .last{ margin-top:3%;}
#service dt{ color:#fff; font-size:18px; margin-bottom:5px;}
#service dd{ color:#929292; font-size:12px; margin-bottom:2%;}
#service ul{ float:left; margin-right:100px;}
#service li{color:#fff; font-size:18px;  line-height:60px;}

/*联系我们*/
#case_ban.contact{ background:none; }
#case_ban.contact dl span{color:#000;}
#case_ban.contact dl em{background:#000;}
#contact{ background:#c80000; margin:0 auto 5%; width:90%; box-sizing:border-box; padding:5%; position:relative;}
#contact:after{ position: absolute; content: ''; left: 2.5%; top: 7.5%; width: 95%; height: 85%; border: 1px solid #fff; z-index: 1;
	opacity: 0;
	transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	transition: all .5s ease 0s;
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
}
#contact:hover:after{
	opacity: 1;
	transform: scale(1.0,1.0);
	-webkit-transform: scale(1.0,1.0);
	-moz-transform: scale(1.0,1.0);
}

#contact .lft{ float:left; width:60%;}
#contact .lft .tp{ margin-bottom:2%;}
#contact .lft dl{ color:#fff; font-size:14px; line-height:32px; margin-top:1%;}
#contact .lft dl img{ margin-left:20px;}
#contact .rig{ color:#fff; font-size:14px; line-height:30px; float:right; width:30%;}

/*关于我们*/
#case_ban.about{ background-image:url(../images/about_bg.jpg)}
#case_ban.about h1{ padding-top:6%; font-weight:normal; font-size:60px; text-align:center; color:#fff; font-family:'宋体'; margin-bottom:2%}
#case_ban.about ul{ margin:0 auto; max-width:960px; }
#case_ban.about li{ color:#fff; font-size:20px; float:left; padding:0 30px; text-align:center}
#case_ban.about li span{ display:block; font-size:60px; }

#about .wrap{ color:#0b0b0b; font-size:14px; line-height:25px; width:70%; margin:0 auto; padding:2% 0 ; text-align:center;}
#about .wrap h1{ font-size:24px; font-weight:normal; margin-bottom:2%;}

#about_bot{ background:#e4e4e4; padding:2% 0; text-align:center;}
#about_bot .wrap h1{ color:#0b0b0b; font-size:24px; font-weight:normal; margin-bottom:2%;}

#case_ban.case_dt{ height:135px;}
#case_dt{position: absolute;z-index: 0;width: 100%;}
.case_l{ position: fixed;z-index: 7;left: 0;background: #5376d0;width: 110px;height: 100%;}
.case_rig{position: fixed;z-index: 7;right: 0;background: #5376d0;width: 380px;height: 100%;}


@media only screen and ( max-width: 1440px) {
#case_ban.about h1{ padding-top:10%;}
}
@media only screen and ( max-width: 1680px) {
#service h1{ padding-top:5%;}

}
@media only screen and ( max-width: 1440px) {
#service h1{ padding-top:0%;}
#service h1 img,#service h3 img{ width:70%}
#service .col{ min-height:1000px;}
#service .col.first{ min-height:1000px;}
#service .bg{ display:none;}

#contact .lft .tp{ width:90%;}

}
@media only screen and ( max-width: 1366px) {
#service h1{ padding-top:5%;}
#service h1 img,#service h3 img{ width:70%}
#service h2 img{ width:30%}
#service .col{ min-height:1000px;}
#service .col.first{ min-height:1100px;}
#bot img{ width:30px;}
#bot .go{ height:30px; line-height:30px;}
}


@media only screen and ( max-width: 1024px) {
#header{ left:0; right:0px; padding-top:10px; padding-left:10px;}
.swiper-slide dl{ font-size:24px; left:50px;}
.swiper-slide dl strong{ font-size:36px;}
.works .sub-slides li .contsd{ padding-right:5%;}
.works .sub-slides li.cur .contsd .neis .imGs{ display:none;}

.bq-contact .sub-conText{ padding-top:15%;}

#service .col{ min-height:900px;}
#service .col.first{ min-height:1000px;}

#contact .rig{ line-height:25px;}
#about_bot img{ width:90%;}
#about .wrap{ width:90%;}
}
@media only screen and ( max-width: 992px) {
.nav_icon{ display:block; z-index:9999}
#nav{ background:#fff; display:none;  width:100px; text-align:center; position:absolute; right:15px; top:75px; padding:5px 0; }
#nav a{ display:block; color:#333; height:35px; line-height:35px; width:auto;}
#nav img{ position:absolute; right:5px; top:-10px; display:block;}

#news .inc{ display:none;}
#news .rig{ padding-left:0;}
#news .rig .mores{ margin-top:5%;}
.bq-contact .sub-conText h2{ font-size:36px;}
.bq-contact .sub-conText{ width:65%;}
#intro{ padding:10% 0 5%;}
#intro h1{ font-size:30px;}
#intro dl{ font-size:14px; padding:5% 0}
#intro li{ font-size:14px; padding:0 15px; float:none; display:inline-block;}
#intro li span{ font-size:30px;}
	
#news_list{ width:90%}
#case_ban.about{ text-align:center;}
#case_ban.about li{ font-size:14px; padding:0 15px; float:none; display:inline-block;}
#case_ban.about li span{ font-size:30px;}
	
#about_bot{ display:none;}
#about .wrap{ padding:5% 0}
#case_ban.about h1{ padding-top:15%;}
}

@media only screen and ( max-width: 768px) {
	#case_ban.about h1{ display:none;}
	#case_ban.about ul{ padding-top:15%;}
.bot{ display:none;}
.works{ height: 350px !important;}
.works .words-slide{ display: none;}
.works .sub-slides li .contsd{ padding-right: 0;}
.works .sub-slides li .contsd .neis .imGs{ display: none;}
.works .sub-slides li .contsd .neis .textsz{ width: 95%; padding-top:7%;}
.works .sub-slides li .contsd .neis h4 img{ width: 90%;}
.works .sub-slides li .contsd .neis h3 img{ width: 80%;}
.works .sub-slides li .contsd .neis p{ margin: 0 auto 3%; width: 100%; text-align: left; padding-left: 0;}
.works .sub-slides li .contsd .neis p font{ width: 100%;}
.works .sub-slides li .contsd .neis h4{ margin:2% 0 3%;}
.swiper-slide dl img{ margin-top:10%;} 
.swiper-slide dl strong{ margin:20px 0;}

#case .list{ width:33.33%}

#news .rig li{ font-size:16px;}
#news .rig li em{ font-size:14px;}
#news .rig li i{ display:none;}

.bq-contact{ width: 90%; left: 50%; margin-left: -45%;}
.bq-contact .sub-conts,
.bq-contact .contentbox{ width: 100%; display: inherit; height:auto;}	
.bq-contact .contentbox:after,
.bq-contact .contentbox:before{ display: none;}	
.bq-contact .bigbox{ float: none; width: 100%; height: auto;}
.bq-contact .sub-conText{ float: none; width: 100%; text-align: center; padding:5% 0;
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	opacity: 1;
}

.bq-contact .bookmarks{ display: none;}
.bq-contact .sub-conts .different{ position: relative; top: auto; margin-top: auto; left: 50%; margin-left: -120px;
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
	opacity: 1;
}	
.bq-contact .sub-conText{ padding-left: 0%; zoom: 0.7;}
.bq-contact .tel{ padding-top: 5px;}
.bq-contact .tel p{ display: none;}
.bq-contact .countacti{ display: none;}
.bq-contact .sub-conText h2{ font-size: 25px;}	
.bq-contact .tel .QQuser{ width: 100%; text-align: center; display: none;}
.bq-contact .sub-conText h3 img{ margin: 0 auto; }
.bq-contact .tel .nubgs .sp1{ width: 100%; color: #fff; display: block;}
.bq-contact .tel .nubgs .sp2{ display: none;}
.bq-contact .tel .nubgs span i{ font-size: 15px;}	
.bq-contact .tel .nubgs{ width:288px; margin:0 auto;}	
#case_ban{ height:220px;}
#case_ban dl{ text-align:left; width:100%;left:0; top:60%; margin-left:0; box-sizing:border-box; padding-left:5%}
#case_ban em{ width:150px;}
#case_ban span{ display:block; margin-top:5%; font-size:24px;}

#news_list  li{ width:100%}
#news_list #detail .title{ font-size:18px;}
#page{ padding:10px 0;}
#page .left,#page .right{ display:block; float:none; line-height:30px;}

#bot .left{ display:none;}
#bot .right{ text-align:center; float:none;}
#bot .right .go{ display:inline-block}
#footer{ padding:5% 0;}
#footer .wrapper{ width:90%;}
#footer dl.msg img{ height:30px;}
#footer dl.msg a{ height:30px; line-height:30px; margin:0 10px;}
#footer dl.msg em{ display:block; margin-top:10px;}

#contact{ padding:10% 5%;}
#contact:after{ height:90%; top:5%;}
#contact .lft{ width:100%;}
#contact .rig{ margin-top:5%; width:100%;}

}
@media only screen and ( max-width: 640px) {
#intro li{ float:left; width:50%; padding:0 0 10%;}
#case_list{ width:95%}
#case_list .col{ width:50%; margin-bottom:3%;}
#service .wrap{ top:5%;}
#service .first .wrap{ top:10%;}

#service .col{ min-height:700px;}
#service .col.first{ min-height:800px;}
#service li{ line-height:30px; font-size:14px;}

#footer .ecode{ display:block; margin:0 auto; position:relative; top:0;}
#footer .link a{ display:inline-block; margin-bottom:10px;}

#case_ban.about{ height:280px;}
#case_ban.about ul{ padding-top:12%;}
#case_ban.about li{ float:left; width:50%; padding:0 0 3%;}

}

@media only screen and ( max-width: 480px) {
#logo a{ width:100px;}
.swiper-slide dl{ font-size:18px; left:10px;}
.swiper-slide dl strong{ font-size:24px; }
#case .list{ width:50%;}
#case_list .col{ width:100%; margin-bottom:5%;}

#news_list #top{ padding:3% 0;}
#news_list #top em{ display:none;}

#service .col{ min-height:600px;}
#service .col.first{ min-height:950px;}
#service .col.second{ min-height:800px;}
#service dd{ line-height:23px;}
#service h1 img,#service h3 img{ width:90%}
#service h2{ margin:5% 0;}
#service h2 img{ width:40%;}
#footer .tel{ font-size:24px;}
#contact:after{ height:93%; top:3%;}
#case_ban.about ul{ padding-top:20%;}


}
@media only screen and ( max-width: 375px) {
#footer .tel{ font-size:18px;}
#footer dl.msg a{ font-size:12px; padding:0 10px;}
#case_ban.about ul{ padding-top:25%;}

}

.serv_dialog{position:fixed;width:590px;left:50%;top:50%;margin:-160px 0 0 -295px;background:url(../image/bg_serv.png) center center;box-shadow:5px 5px 20px rgba(0,0,0,0.4);display:none;z-index:3;}
.serv_dialog .inner{padding:40px 20px 20px;}
.serv_dialog .close{background:url(../image/close1.png) center center no-repeat;position:absolute;right:0;top:0;width:40px;height:40px;cursor:pointer;}
.serv_dialog .h3{font-size:52px;color:#fff;line-height:1.2;text-align:center;}
.serv_dialog .btns{text-align:center;margin-top:30px;}
.serv_dialog .btns a{display:inline-block;background:#fff;width:240px;height:40px;line-height:40px;font-size:22px;margin:0 12px;border:2px solid #fff;border-radius:5px;}
.serv_dialog .btns a.a1{background:none;color:#fff;}
.serv_dialog .kw{font-size:18px;color:#fff;margin-top:20px;text-align:center;}
/*.serv_dialog{left:0;bottom:0;width:0;height:0;overflow: hidden;}*/
.serv_dialog a.btn_sj,a.btn_sj{display:none;}
@media only screen and (max-width: 640px){
.wap_banner,.serv_dialog a.btn_sj,a.btn_sj {display: block;}
.banner,#client,.serv_dialog a.btn_pc,a.btn_pc{ display:none;}
.serv_dialog{ width:290px;left:50%;top:50%;margin:-74px 0 0 -148px;background:url(../image/bg_serv.png) center center;}
.serv_dialog .h3{font-size:28px;line-height:32px; font-weight:bold;}
.serv_dialog .kw{font-size:14px; margin-top:5px;}
.serv_dialog .inner{padding: 25px 20px 10px;}
.serv_dialog .btns a.a1,.serv_dialog .btns a {margin: 10px 0;}
.serv_dialog .btns{ margin-top:0px;}
}