@charset "utf-8";
/**
/*
	上海雍熙 www.yongsy.com
*/
/*banner ico*/
.s-topbanner {
	height:290px;
	background:url(../images/s-topbanner00.png) no-repeat center;
	min-width:1200px;
}
.s-topbanner .banner-ico {
	position:relative;
	width:1200px;
	height:290px;
	margin:0 auto;
}
.s-topbanner .banner-ico .banner-ico01 {
	position:absolute;
	width:180px;
	height:28px;
	background:url(../images/service-banner01.png) no-repeat center;
	left:0;
	top:106px;
}
.s-topbanner .banner-ico .banner-ico02 {
	position:absolute;
	width:460px;
	height:28px;
	background:url(../images/service-banner02.png) no-repeat center;
	left:0;
	top:160px;
}
.s-topbanner .banner-ico .banner-ico03 {
	position:absolute;
	width:51px;
	height:55px;
	background:url(../images/service-banner03.png) no-repeat center;
	left:754px;
	top:98px;
}
.s-topbanner .banner-ico .banner-ico04 {
	position:absolute;
	width:51px;
	height:55px;
	background:url(../images/service-banner04.png) no-repeat center;
	left:906px;
	top:144px;
}
.s-topbanner .banner-ico .banner-ico05 {
	position:absolute;
	width:51px;
	height:55px;
	background:url(../images/service-banner05.png) no-repeat center;
	left:1053px;
	top:100px;
}
/*动画 Start*/
.ico01-An {
	animation: myoneAn1 2s cubic-bezier(0.68, 0, 0.32, 1) 1 alternate;
	-moz-animation: myoneAn1 2s cubic-bezier(0.68, 0, 0.32, 1) 1 alternate;
	-webkit-animation: myoneAn1 2s cubic-bezier(0.68, 0, 0.32, 1) 1 alternate;
	-o-animation: myoneAn1 2s cubic-bezier(0.68, 0, 0.32, 1) 1 alternate;
}
 @keyframes myoneAn1 {
0% {
left:0;
top:196px;
opacity:0;
}
100% {
left:0;
top:106px;
opacity:1;
}
}
.ico02-An {
	animation: myoneAn2 3s cubic-bezier(0.68, 0, 0.32, 1) 0s 1 alternate;
	-moz-animation: myoneAn2 3s cubic-bezier(0.68, 0, 0.32, 1) 0s 1 alternate;
	-webkit-animation: myoneAn2 3s cubic-bezier(0.68, 0, 0.32, 1) 0s 1 alternate;
	-o-animation: myoneAn2 3s cubic-bezier(0.68, 0, 0.32, 1) 0s 1 alternate;
}
 @keyframes myoneAn2 {
0% {
left:0;
top:250px;
opacity:0;
}
100% {
left:0;
top:160px;
opacity:1;
}
}
.ico03-An {
	animation: myoneAn3 1.5s linear 0s infinite alternate;
	-moz-animation: myoneAn3 1.5s linear 0s infinite alternate;
	-webkit-animation: myoneAn3 1.5s linear 0s infinite alternate;
	-o-animation: myoneAn3 1.5s linear 0s infinite alternate;
}
 @keyframes myoneAn3 {
0% {
left:754px;
top:88px;
opacity:0.8;
}
100% {
left:754px;
top:98px;
opacity:1;
}
}
.ico04-An {
	animation: myoneAn4 1.5s linear 0s infinite alternate;
	-moz-animation: myoneAn4 1.5s linear 0s infinite alternate;
	-webkit-animation: myoneAn4 1.5s linear 0s infinite alternate;
	-o-animation: myoneAn4 1.5s linear 0s infinite alternate;
}
 @keyframes myoneAn4 {
0% {
left:906px;
top:129px;
opacity:0.8;
}
100% {
left:906px;
top:144px;
opacity:1;
}
}
.ico05-An {
	animation: myoneAn5 1.5s linear 0s infinite alternate;
	-moz-animation: myoneAn5 1.5s linear 0s infinite alternate;
	-webkit-animation: myoneAn5 1.5s linear 0s infinite alternate;
	-o-animation: myoneAn5 1.5s linear 0s infinite alternate;
}
 @keyframes myoneAn5 {
0% {
left:1053px;
top:88px;
opacity:0.8;
}
100% {
left:1053px;
top:100px;
opacity:1;
}
}
/*End*/

/*标题样式*/
.titlebox {
	
	border-bottom:1px solid #f0f0f0;
	margin-top:60px;
}
.titlebox p {
	font-size:28px;
	text-align:center;
	color:#000000;
}
.titlebox p span {
	font-size:14px;
	color:#999999;
	padding-top:23px;
	background-repeat:no-repeat;
	background-position:bottom;
}
.titlebox p i {
	background-image:url(../images/service-title01.png);
	width:82px;
	height:6px;
	display:block;
	margin:0 auto;
	;
	padding-top:23px;
	background-repeat:no-repeat;
	background-position:bottom;
}
.titlebox p .span1 {
	background-image:url(../images/service-title02.jpg);
	display:block;
	width:420px;
	height:9px;
	margin:0 auto;
}
.titlebox p .span2 {
	background-image:url(../images/service-title03.jpg);
	display:block;
	width:420px;
	height:9px;
	margin:0 auto;
}
.titlebox p .span3 {
	background-image:url(../images/service-title04.jpg);
	display:block;
	width:420px;
	height:9px;
	margin:0 auto;
}
.titlebox p .span4 {
	background-image:url(../images/service-title05.jpg);
	display:block;
	width:420px;
	height:9px;
	margin:0 auto;
}
.titlebox p .span5 {
	background-image:url(../images/service-title06.jpg);
	display:block;
	width:420px;
	height:9px;
	margin:0 auto;
}
/*第1栏*/
.s-center1 .contentbox {
	width:1200px;
	margin:0 auto;
	padding-top:60px;
	overflow:hidden;
	position:relative;
}
.s-center1 .contentbox ul {
	overflow:hidden;
}
.s-center1 .contentbox .ul1 {
	z-index:1;
}
.s-center1 .contentbox .ul1 li {
	width:240px;
	text-align:center;
	float:left;
	height:220px;
	display:inline;
	overflow:hidden;
}
.s-center1 .contentbox .ul1 li p {
	line-height:56px;
	font-size:18px;
	color:#000000;
}
.s-center1 .contentbox .ul1 li span {
	color:#999999;
}
.s-center1 .contentbox .box2 {
	overflow:hidden;
}
.s-center1 .contentbox .ul2 {
	text-align:center;
	margin:0 auto;
	width:90px;
}
.s-center1 .contentbox .ul2 li {
	float:left;
	width:31px;
	height:5px;
	margin:0 7px;
	background-color:#aeaeae;
	cursor:pointer;
	text-indent:-9999px;
}
.s-center1 .contentbox .ul2 li:before {
	content:"";
	display:block;
	height:3px;
	width:100%;
	background-color:#fff;
}
.s-center1 .contentbox .ul2 li.on {
	background-color:#000000;
}
/*第2栏*/
.s-center2 .content2_box {
	width:1200px;
	margin:0 auto;
}
.s-center2 .content2_box .topul {
	overflow:hidden;
	padding-top:40px;
}
.s-center2 .content2_box .topul li {
	float:left;
}
.s-center2 .content2_box .topul .topul_li {
	width:1200px;
	height:290px;
}
.s-center2 .content2_box .topul .topul_li div {
	float:left;
	width:50%;
	height:290px;
}
.s-center2 .content2_box .topul .topul_li .rightbox {
}
.s-center2 .content2_box .topul .topul_li .rightbox p {
	line-height:30px;
	font-size:14px;
	color:#888888;
}
.s-center2 .content2_box .topul .topul_li .rightbox h1 {
	font-size:20px;
	color:#000000;
	line-height:60px;
	margin-top:30px;
}
.s-center2 .content2_box .topul .topul_li .rightbox ul {
	margin-top:30px;
}
.s-center2 .content2_box .topul .topul_li .rightbox li {
	margin-right:50px;
}
.s-center2 .content2_box .bottomul {
	margin-top:40px;
	overflow:hidden;
}
.s-center2 .content2_box .bottomul li {
	float:left;
	width:398px;
	height:98px;
	border:solid 1px #dddddd;
	border-right:none;
	position:relative;
	cursor:pointer;
}
.s-center2 .content2_box .bottomul li.on {
	background-color:#000000;
}
.s-center2 .content2_box .bottomul li h1 {
	font-size:18px;
	line-height:18px;
	margin:30px 0 0 30px;
}
.s-center2 .content2_box .bottomul li.on h1 {
	color:#ffffff;
}
.s-center2 .content2_box .bottomul li p {
	width:268px;
	height:8px;
	display:block;
	margin:16px 0 0 30px;
}
.s-center2 .content2_box .bottomul li span {
	display:block;
	width:33px;
	height:33px;
	position:absolute;
	right:30px;
	top:34px;
}
.s-center2 .content2_box .bottomul li.on span {
	background-color:#ffffff;
	border-radius: 50%;
}
.s-center2 .content2_box .bottomul .li4 {
	width:1px;
	border-left:none;
	background-color:#dddddd;
}
.s-center2 .content2_box .bottomul .li1 p {
	background:url(../images/service-center2_1.jpg) no-repeat left;
}
.s-center2 .content2_box .bottomul .li1.on p {
	background:url(../images/service-center2_101.jpg) no-repeat left;
}
.s-center2 .content2_box .bottomul .li2 p {
	background:url(../images/service-center2_2.jpg) no-repeat left;
}
.s-center2 .content2_box .bottomul .li2.on p {
	background:url(../images/service-center2_201.jpg) no-repeat left;
}
.s-center2 .content2_box .bottomul .li3 p {
	background:url(../images/service-center2_3.jpg) no-repeat left;
}
.s-center2 .content2_box .bottomul .li3.on p {
	background:url(../images/service-center2_301.jpg) no-repeat left;
}
/*第3栏*/
.s-center3 .content3_box {
	width:1200px;
	margin:0 auto;
	overflow:hidden;
	margin-top:50px;
	padding-bottom:1px;
}
.s-center3 .content3_box .leftul {
	float:left;
	width:310px;
	position:relative;
}
.s-center3 .content3_box .leftul li {
	height:104px;
	width:265px;
	border-bottom:1px solid #d7d7d7;
	background-color:#f2f2f2;
	margin-left:25px;
	color:#333333;
	position:relative;
	z-index:3;
	cursor:pointer;
}
.s-center3 .content3_box .leftul li h1 {
	font-size:18px;
	line-height:26px;
	padding:28px 0 0 35px;
}
.s-center3 .content3_box .leftul li p {
	font-size:14px;
	line-height:22px;
	font-family:Arial, Helvetica, sans-serif;
	padding-left:35px;
}
.s-center3 .content3_box .leftul .noline {
	border:none;
}
.s-center3 .content3_box .leftul li a {
	display:block;
	width:304px;
	height:105px;
	position:absolute;
	left:0;
	top:0;
}
.s-center3 .content3_box .leftul li:hover {
}
.content3_boxleftbox {
	position:absolute;
	background:url(../images/service-center3_1.png) no-repeat center;
	left:0;
	top:0;
	width:304px;
	height:105px;
	-webkit-transition: all 400ms cubic-bezier(.45, 1, .9, 1);
	-moz-transition: all 400ms cubic-bezier(.45, 1, .9, 1);
	-o-transition: all 400ms cubic-bezier(.45, 1, .9, 1);
	-ms-transition: all 400ms cubic-bezier(.45, 1, .9, 1);
	transition: all 400ms cubic-bezier(.16, 1, .87, 1);
}

.content3_boxleftbox:before {
	content:"";
	position:absolute;
	display:block;
	width:265px;
	height:4px;
	bottom:0;
	left:25px;
	background-color:#000;
	z-index:4;
}
/* .content3_boxleftli1:hover ~.content3_boxleftbox {
top:0;
}
.content3_boxleftli2:hover ~.content3_boxleftbox {
top:105px;
}
.content3_boxleftli3:hover ~.content3_boxleftbox {
top:210px;
}
.content3_boxleftli4:hover ~.content3_boxleftbox {
top:315px;
}*/
.content3_boxleftli1.on ~.content3_boxleftbox {
top:0;
}
.content3_boxleftli2.on ~.content3_boxleftbox {
top:105px;
}
.content3_boxleftli3.on ~.content3_boxleftbox {
top:210px;
}
.content3_boxleftli4.on ~.content3_boxleftbox {
top:315px;
}
/*右侧*/
.s-center3 .rigthbox {
	width:870px;
	height:418px;
	overflow:hidden;
	float:right;
}
.s-center3 .rigthbox .slideBox {
	overflow:hidden;
	position:relative;
	width:870px;
	height:418px;
}
.s-center3 .rigthbox .slideBox ul {
	overflow:hidden;
}
.s-center3 .rigthbox .slideBox li {
	float:left;
	_display:inline;
	overflow:hidden;
	width:870px;
	height:418px;
}
.s-center3 .rigthbox .sPrev, .s-center3 .rigthbox .sNext {
	display:block;
	width:36px;
	height:36px;
	position:absolute;
	bottom:1px;
}
.s-center3 .rigthbox .sPrev {
	background:url(../images/service-center3_r_3.jpg) no-repeat center;
	right:43px;
}
.s-center3 .rigthbox .sNext {
	background:url(../images/service-center3_r_4.jpg) no-repeat center;
	right:1px;
}
.s-center3 .rigthbox .sPrev:hover {
	background-image:url(../images/service-center3_r_1.jpg);
}
.s-center3 .rigthbox .sNext:hover {
	background-image:url(../images/service-center3_r_2.jpg);
}
/*第4栏*/
.content4_box {
	width:1200px;
	margin:0 auto;
}
.content4_box ul {
	overflow:hidden;
	padding-top:24px;
}
.content4_box ul li {
	margin-top:36px;
	width:582px;
	position:relative;
	height:170px;
	background-color:#f2f2f2;
}
.content4_box ul .leftli {
	float:left;
}
.content4_box ul .rightli {
	float:right;
}
.content4_box ul li span {
	display:block;
	position:absolute;
	left:95px;
	top:30px;
	width:90px;
	height:108px;
}
.content4_box ul li h1 {
	margin-left:200px;
	font-size:18px;
	line-height:40px;
	padding-top:46px;
	color:#333333;
}
.content4_box ul li:hover h1 {
	color:#ffffff;
}
.content4_box ul li p {
	margin-left:200px;
	font-size:14px;
	line-height:26px;
	color:#888888;
}
.content4_box ul li:hover p {
	color:#ffffff;
}
.content4_box ul li a {
	display:block;
	width:100%;
	height:100%;
}
.content4_box ul li .content4_span1 {
	background:url(../images/service-center4_1.png) no-repeat center;
}
.content4_box ul li .content4_span2 {
	background:url(../images/service-center4_2.png) no-repeat center;
}
.content4_box ul li .content4_span3 {
	background:url(../images/service-center4_3.png) no-repeat center;
}
.content4_box ul li .content4_span4 {
	background:url(../images/service-center4_4.png) no-repeat center;
}
.content4_box ul li:hover .content4_span1 {
	background:url(../images/service-center4_hover1.png) no-repeat center;
}
.content4_box ul li:hover .content4_span2 {
	background:url(../images/service-center4_hover2.png) no-repeat center;
}
.content4_box ul li:hover .content4_span3 {
	background:url(../images/service-center4_hover3.png) no-repeat center;
}
.content4_box ul li:hover .content4_span4 {
	background:url(../images/service-center4_hover4.png) no-repeat center;
}
/*动画*/
.content4_box ul li h1, .content4_box ul li h1, .content4_box ul li p {
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
}
.content4_box ul li a {
	background: none;
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-0-transition: all .5s;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.content4_box ul li a:before, .content4_box ul li a:after {
	content: "";
	position: absolute;
	z-index: -1;
	background-color: #000000;
	width: 100%;
	height: 0;
	left: 0;
transition: all .25s ease;
-moz-transition: all .25s ease;
-webkit-transition: all .25s ease;
-o-transition: all .25s ease;
}
.content4_box ul li a:before {
	bottom:50%;
}
.content4_box ul li a:after {
	top:50%;
}
.content4_box ul li a:hover:before, .content4_box ul li a:hover:after {
	height:50%;
}
/*第5栏*/
.content5_box {
	
	margin:0 auto;
	padding-top:40px;
    padding-bottom: 60px
}
.content5_box ul {
	overflow:hidden;
}
.content5_box li {
	float:left;
	width:32%;
	max-height: 250px;
	position:relative;
	overflow:hidden;
}
.imgs{
    width: 100%;
   
}
.content5_box .wh377 {
	width:377px;
	height:377px;
}
.content5_box .Rmargin8 {
	margin-right:8px;
}
.content5_box .Bmargin9 {
	margin-bottom:9px;
}
.content5_box li {
	cursor:pointer;
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
/*第5栏box1*/
.content5_box li .box1 {
	position:relative;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0);
	overflow:hidden;
}
.content5_box li .box1:before {
	content: "";
	width:200px;
	height:160px;
	background:url(../images/service-center5_ioc1.png) no-repeat left top;
	position:absolute;
	left:0;
	top:0;
}
.content5_box li .box1 {
	background:rgba(0, 0, 0, .6);
	
}
.content5_box li .box1, .content5_box li .box1 > a {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:0;
	margin:0;

}
.content5_box li .box1 h1 {
	font-size:28px;
	text-align:center;
	width:100%;
	position:absolute;
	top:-50%;
	left:0;
	color:#fff;
	top:40%;
	opacity:1;

}

.content5_box li .box1 p {
	font-size:14px;
	text-align:center;
	width:100%;
	position:absolute;
color:#fff;
	top:60%;
	opacity:1;
	display:block;
	height:54px;
	background:url(../images/service-center5_ioc2.png) no-repeat center;
	line-height:54px;
	color:#fff;

}

/*第5栏box2*/

.content5_box li .box2 {
	position:relative;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0);
	-moz-backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	transform:translate3d(0, -100%, 0);
	-moz-transform:translate3d(0, -100%, 0);
	-webkit-transform:translate3d(0, -100%, 0);
	-o-transform:translate3d(0, -100%, 0);
transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
	overflow:hidden;
}
.content5_box li:hover .box2 {
	background:rgba(0, 0, 0, .6);
	transform:translate3d(0, 0, 0);
	-moz-transform:translate3d(0, 0, 0);
	-webkit-transform:translate3d(0, 0, 0);
	-o-transform:translate3d(0, 0, 0);
}
.content5_box li .box2, .content5_box li .box2 > a {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
	overflow:hidden;
}
.content5_box li .box2 p {
	text-align:center;
	width:100%;
	position:absolute;
	top:-50%;
	left:0;
transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-webkit-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
	opacity:0;
}
.content5_box li:hover .box2 p {
	color:#fff;
	top:16%;
	opacity:1;
}
.content5_box li .box2 h1 {
	font-size:18px;
	text-align:center;
	width:100%;
	position:absolute;
	top:-50%;
transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-webkit-transition:all .6s ease-in-out;
-o-transition:all .6s ease-in-out;
	opacity:0;
}
.content5_box li:hover .box2 h1 {
	color:#fff;
	top:50%;
	opacity:1;
}
.servicelist {display:none;}
@media screen and (max-width: 768px) {
    .searchelist{
        display: none;
    }
.servicelist {display:block;}
.s-center1 ,.s-center2,.s-center3,.s-center4,.s-center5 {display:none;}
    .ct{
        width: 100%
    }

}