.index-banner .swiper-container {
  width: 100%;
  /*height: 778px;*/
}
.index-banner .swiper-slide {
  background-position: center;
  background-size: cover;
}
.index-banner .swiper-slide img{ display: block; width: 100%; }
.index-banner .swiper-pagination{ bottom: 30px; }

.index-banner .swiper-pagination-bullet {
	margin: 0 6px !important;
	transition: all .3s;
	background: none;
	border:solid 2px #aaa;
}

.index-banner .swiper-pagination-white .swiper-pagination-bullet-active {
	background: none;
	border:solid 2px #dd9112;
}
.index-banner .mobile-container { display: none; }
.index-banner .words {
	position: absolute;
	top: 35%; 
	left: 10.5%;
	z-index: 10;
	transition: all 1.5s;
	opacity: 0;
	transform: translate(0, 100px);
}
.index-banner .words h3 {
	font-size: 48px;
	color: #fff;
	font-weight: bold;
}

.index-banner .words p {
	font-size: 20px;
	color: #fff;
}

.index-banner .swiper-slide-active .words{
	opacity: 1;
	transform: translate(0, 0);
}
.index-banner .swiper-button-white { display: none; }
.index-title {
	position: relative;
	padding: 50px 0 30px;
	height: 24px;
	line-height: 24px;
	font-size: 24px;
	color: #316862;
}
.index-title:after {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	content: '';
	width: 20px;
	border-bottom: solid 1px #ee9b11;
}
.index-serve{ background: #f6f6f6; padding-bottom: 100px; }
.index-serve ul {padding: 37px 0 80px; overflow: hidden;}
.index-serve ul li { 
	position: relative;
	float: left;
	margin-right: 1.333%;
	width: 24%;
	height: 88px;
	line-height: 88px;
	border: solid 1px #aaa;
	color: #fff;
	cursor: pointer;
	box-sizing: border-box;
}
.index-serve ul li:last-child{ margin-right: 0; }
.index-serve ul li span{
	position: relative;
	margin: 25px 12px 0 25px;
	display: block;
	width: 44px;
	height: 38px;
	overflow: hidden;
	float:left;
}
.index-serve ul li span img{
	position: absolute;
	right: 0;
}

.index-serve ul li p{float: left; font-size: 18px; color: #316862; }
.index-serve ul li .plus{ 
	position: absolute;
	right: 20px;
	bottom: 20px;
	display: block;
	width: 10px; 
	height: 10px; 
	background: url(../images/server-05.png) no-repeat left center;
	cursor: pointer;
}

.index-serve ul li:hover,
.index-serve ul li.active{ background: #316862; border-color: #316862; transition: all .3s; }
.index-serve ul li:hover span img,
.index-serve ul li.active span img {left:0; transition: all .3s;}
.index-serve ul li:hover p,
.index-serve ul li.active p {color: #fff; transition: all .3s;}
.index-serve ul li:hover .plus,
.index-serve ul li.active .plus {background: url(../images/server-05.png) no-repeat right center;transition: all .3s;}

.index-serve .content { overflow: hidden; display: none;	animation: myfirst 1s 1 forwards;
	-moz-animation: myfirst 1s 1 forwards;	/* Firefox */
	-webkit-animation: myfirst 1s 1 forwards;	/* Safari 和 Chrome */
	-o-animation: myfirst 1s 1 forwards;	/* Opera */
	transform: translateY(100px);
	opacity: 0;
 }
 @keyframes myfirst
{
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@-moz-keyframes myfirst /* Firefox */
{
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
.index-serve .content .left{ width: 46%; float: left;}
.index-serve .content .left .words{
	position: relative;
	margin-top: 40px;
	padding-top: 25px;
	line-height: 30px; 
	font-size: 16px; 
	color: #666666;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	word-break: break-all;
	overflow: hidden;
}

.index-serve .content .left .words:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: '';
	width: 50px;
	border-bottom: solid 1px #ee9b11;
}
.index-serve .content .left .button {
	position: relative;
	width: 142px;
	height:42px;
}

.index-serve .content .left .button a{
	position: relative;
	z-index: 3;
	display: block;
	margin-top: 84px;
	width: 140px;
	height:40px;
	line-height: 40px;
	border: solid 1px #aaa;
	text-align: center;
	color: #316862;
	transition: all .3s;
}
.index-serve .content .left .button i{
	margin-left: 10px;
	display: inline-block;
	width: 27px; 
	height: 7px;
	background: url(../images/server-06.png) no-repeat left center;
	transition: all .3s;
}
.index-serve .content .left .button span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: block;
	width: 0;
	z-index: 0;
	background: #316862;
}
.index-serve .content .left .button:hover a{
	cursor: pointer;
	border-color: #316862;
	color: #fff;
}
.index-serve .content .left .button:hover i{
	background: url(../images/server-06.png) no-repeat right center;
}
.index-serve .content .left .button:hover span{
	transition: all .3s;
	width: 100%
}
.index-serve .content .photo{ width: 42%; overflow:hidden; float: right;}
.index-serve .content .photo img{ display: block; width: 100%; }

.index-products ul{margin-bottom: 45px;margin-top: 45px; overflow: hidden;}
.index-products li{ overflow: hidden; position: relative; float: left; }
.index-products li .imageBox {height: 100%;}
.index-products li:nth-of-type(1),
.index-products li:nth-of-type(4){ width: 60.5%; }
.index-products li:nth-of-type(2),
.index-products li:nth-of-type(3){ width: 37%; }
.index-products li .imageTit { position: absolute; top: 0; z-index: 3; left: 5%; max-width: 30%; }
.index-products li p{ width: 90%; position: absolute;  z-index: 3;  color: #fff; }
.index-products li p strong{ font-size: 18px; color: #fff; display: block; padding-bottom: 5px; }

.index-products li:nth-of-type(1),
.index-products li:nth-of-type(2){margin-bottom: 36px;}

.index-products li:nth-of-type(1) p,
.index-products li:nth-of-type(3) p{ right: 40px; bottom: 40px; text-align:right; }

.index-products li:nth-of-type(2) p,/*{ left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}*/


.index-products li:nth-of-type(4) p{ left: 40px; bottom: 40px; }
.index-products li a{ display: block; position: absolute; top: 0 ; left: 0; z-index: 4; width: 100%; height: 100%; cursor: pointer; }
.index-products li:nth-of-type(2n+1){ margin-right:2.5%; }
.index-products li:hover .imageBox{ transform: scale(1.1, 1.1); }
.index-products li .bg{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; background: rgba(0,0,0,.5); display: none;  }
.index-products li:hover .bg{ display: block; transition: all .3s; }

.index-news { background: #f6f6f6; padding: 50px 0 100px; overflow: hidden; }
.index-news .gg-width {overflow: hidden;}
.index-news .title{ height: 26px; line-height: 26px; padding-bottom: 50px;  font-size: 24px; color:#316862; }
.index-news .title a{ float: right; color: #666; font-size: 16px;  cursor: pointer;}
.index-news .left{ width:57%; float: left; }
.index-news .left ul {}
.index-news .left ul li{ width: 47.5%; float: left; }
.index-news .left ul li:last-child{float: right; }
.index-news .left ul li .photo { display: block; overflow: hidden; }
.index-news .left ul li .photo img{ width: 100%; }
.index-news .left ul li h3{ font-size: 20px; color: #333; padding-top: 28px; height: 34px; line-height: 34px; white-space:nowrap;
word-break:keep-all;
overflow:hidden;
text-overflow:ellipsis;}
.index-news .left ul li .words{ display: block; font-size: 14px; color: #666; height: 26px; line-height: 26px;white-space:nowrap;
word-break:keep-all;
overflow:hidden;
text-overflow:ellipsis;}

.index-news .right{float: left; width:40.5%; padding-left: 1.25%; margin-left: 1.25%; border-left: solid 1px #edecec; box-sizing: border-box;  }

.index-news .right ul li { position: relative; height: 84px; margin-bottom: 40px;}
.index-news .right ul li:last-child{ margin-bottom: 0; }
.index-news .right ul li .photo { display: block; position: absolute; left:0; overflow: hidden; width: 136px; height: 84px; }
.index-news .right ul li .photo img { width: 100%; }
.index-news .right ul li .wz{ padding-left: 154px; padding-right: 5px;  }
.index-news .right ul li h3{ font-size: 20px; color: #333; height: 34px; line-height: 34px; white-space:nowrap;
word-break:keep-all;
overflow:hidden;
text-overflow:ellipsis;}
.index-news .right ul li .words{ display: block; font-size: 14px; color: #666;  line-height: 26px;	
	cursor: pointer;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-all;
	overflow: hidden;}

.index-news .title a:hover,
.index-news ul li:hover h3,
.index-news ul li:hover .words{ 
	transition: all .3s;
	color:#ee9b11;
}


@media screen and (max-width:1440px){
	.index-banner .words{ left: 2% }
}

@media screen and (max-width:1160px){

}

@media screen and (max-width:1024px){ 


}

@media screen and (max-width:668px){
	.index-banner .pc-container { display: none; }
	.index-banner .mobile-container { display: block; }
	.index-banner .swiper-button-white { display: block; }
	.index-banner .words h3 { font-size: 24px; }
	.index-banner .words p { font-size: 15px; }
	
	.index-title { padding: 20px 0;  }
	
	.index-serve { padding-bottom: 30px; }
	.index-serve ul { padding: 20px 0 10px; }
	.index-serve ul li { width: 49%; margin-bottom: 10px;margin-right:2%;}
	.index-serve ul li:nth-of-type(2n){margin-right:0;}
	.index-serve ul li p { font-size: 16px; }
	.index-serve .content .photo,
	.index-serve .content .left { width:  100%; float: none; }
	.index-serve .content .left .button a { margin-top: 30px; }

	.index-products li:nth-of-type(1),
	.index-products li:nth-of-type(2),
	.index-products li:nth-of-type(3),
	.index-products li:nth-of-type(4) {
		width: 49.5%;
	}
	.index-products li:nth-of-type(1),
	.index-products li:nth-of-type(2) {
		margin-bottom: 20px;
	}
	.index-products li:nth-of-type(2n+1){
		margin-right: 1%;
	}

	.index-serve .content .left .words { margin-top: 20px; padding-top: 15px; }

	.index-news {background: #f6f6f6;padding: 30px 0;}
	.index-news .title { padding-bottom: 26px; }
	.index-news .left { width: 100%; }
	.index-news .left ul li h3 {padding-top: 10px; font-size: 16px;}
	.index-news .left ul li .photo img{ width: 100%; }
	.index-news .right { width: 100%; margin-top: 15px; border-left: 0; }
	.index-news .right ul li { margin-bottom: 20px; }
	.index-news .right ul li h3 { font-size: 16px; }
}

@media screen and (max-width:520px){ 

}


@media screen and (max-width:480px){
	.index-banner .swiper-pagination{ bottom: 14px; }

	.index-products ul{ margin-bottom: 20px;margin-top: 20px; }
	.index-serve ul li span {margin: 25px 12px 0 12px;}
	.index-products li:nth-of-type(1),
	.index-products li:nth-of-type(2),
	.index-products li:nth-of-type(3),
	.index-products li:nth-of-type(4) {
		margin-bottom: 10px;
		margin-right: 0;
		width: 100%;
	}

	.index-news .left ul li { width: 100%; margin-bottom: 16px;}

}

@media screen and (max-width:420px){ 
	.index-serve ul li { width: 100%; height: 70px; line-height: 70px; margin-right: 0;}
	.index-serve ul li span { margin: 15px 12px 0 12px;}
	.index-banner .swiper-slide-active .words { left: 20px; right: 20px; }


	
}

@media screen and (max-width:360px){ 

}