header{
	position: fixed;
	left:0;
	right:0;
	top:0;
	margin:auto;
	height: 80px;
	background-color: #fff;
	z-index: 9999;
}
header .head-nav{
	height: 100%;
	display: flex;
	justify-content: space-between;
}
header .head-nav .left-box{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
header .head-nav .left-box .logo{
	display: flex;
	width:124px;
	align-items: center;
	justify-content: center;
}
header .head-nav .left-box .hjy{
	display: block;
	/* margin-left: 30px; */
	font-size: 28px;
}
header .head-nav .right-box{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
header .head-nav .right-box .nav-group{
	position: relative;
	font-size: 16px;
	color:#000;
	margin-left: 30px;
}
header .head-nav .right-box .nav-group:after{
	position: absolute;
	left:0;
	bottom:-10px;
	content: "";
	width: 100%;
	height: 2px;
	background-color: transparent;
}
header .head-nav .right-box .nav-group.on{
	color:var(--blue);
}
header .head-nav .right-box .nav-group.on::after{
	background-color: var(--blue)
}
header .head-nav .right-box .nav-group:hover{
	color:var(--blue);
}

/*banenr*/
.banner-box{
	position: relative;
	height: 450px ;
	min-width:1170px;
	background-color: #36b093;
	/*position: relative;*/
}
.img_text{
	margin-top: 4%;
}
.img_text .img_title,.img_text .img_main{
	color: #f8fcfc;
	letter-spacing: 1.5px;
	margin-left: 35%;
	margin-bottom: 20px;
}
.img_text .img_title{
	font-size:34px;
	/*margin-top: 10%;*/
	height: 55px;
}
.img_text .img_main{
	font-size:16px;
	font-weight: 400;
	color: #c9e8e1;
}

.row{
	display: flex;
	flex-direction: row;
}
.img_btn{
	width: 150px;
	height: 45px;
	background-color: #fece2e;
	border: none;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c79729;
	margin: 0 10px;
}
.img_btn img{
	margin: 0 10px;
}
.we{
	margin: 0 15px;
	font-weight: bold;
}
.right_icon{
	display: flex;
	align-items: center;
	margin: 0 10px;

}
.banner_img{
    margin-top: 50px;
	margin-right: 5%;

}
.banner-box .banner-swiper{
	width: 100%;
	/*height: 100%;*/
}
.banner-box .banner-swiper .swiper-slide{
	/*height: 100%;*/
	width: 100%;
	display: flex;
	justify-content: center;
}
.banner-box .banner-swiper .swiper-slide .slide{
	display: block;
	width: 100%;
	height: 100%;
}
.banner-box .banner-swiper .swiper-slide img{
	height: auto;
	width: 100%;
}
.banner-box .button-box{
	position: absolute;
	bottom:0;
	right: 30%;
	width:170px;
	height: 70px;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 999;
	opacity: 0;
}
.banner-box .button-box .btn{
	width:70px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	cursor:pointer;
}
.banner-box .button-box .btn:focus{
	outline: none;
}
.banner-box .button-box .btn-pre{
	background:url('../images/icon_left.png') no-repeat center;
}
.banner-box .button-box .btn-pre:hover{
	background:url('../images/icon_left_active.png') no-repeat center;
}
.banner-box .button-box .btn-next{
	background:url('../images/icon_right.png') no-repeat center;
}
.banner-box .button-box .btn-next:hover{
	background:url('../images/icon_right_active.png') no-repeat center;
}
/*module*/
.module{
	margin:0 auto;
}
.module-title{
	padding-top:100px;
}
.module-title .title{
	font-size: 32px;
	color: var(--blue);
	text-align: center;
}
.module-title .sub{
	margin-top: 10px;
	font-size: 18px;
	color: #999;
	text-align: center;
}
/*server start*/
.server{
	width:1170px;
	padding-bottom: 40px;
	background-color: #fff;
}
.server .server-con{
	margin-top: 80px;
}
.server .server-con::after{
	content: "";
	display: block;
	clear:both;
}
.server .server-con .s-item{
	float: left;
	margin-right: 30px;
	width: 270px;
	height: 200px;
}
.server .server-con .s-item:nth-child(4n){
	margin-right: 0;
}
.server .server-con .s-item .image{
	margin:0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width:100px;
	height: 66px;
}
.server .server-con .s-item .image img{
	width:auto;
	height: 100%;
	transition: transform 0.6s;
}
.server .server-con .s-item .image img:hover{
	transform:scale(1.1);
	transition: transform 0.6s;
}
.server .server-con .s-item .text{
	margin:0 auto;
	margin-top: 30px;
	width:170px;
	text-align: center;
	font-size: 18px;
	color:#333;
}
.server .server-con .s-item .text:hover{
	color:var(--blue);
}
/*server end*/
/*showcase start*/
.showcase{
	background-color: #f6f7f6;
	padding-bottom: 100px;
}
.showcase .show-con{
	margin:0 auto;
	width:1170px;
	margin-top: 40px;
	height: 770px;
	display: flex;
	justify-content: space-between;
}
.showcase .show-con .box-mask{
	position: relative;
	display: block;
	width:100%;
	height: 100%;
}
.showcase .show-con .box-mask .black-mask{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height: 100%;
	padding:30px;
	background-color: rgba(0,0,0,0.6);
	opacity: 1;
	box-sizing: border-box;
	z-index: 9;
}
.showcase .show-con .box-mask .black-mask .white-box{
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	color:#fff;
}
.showcase .show-con .box-mask .black-mask .white-box strong.text{
	opacity: 1;
}
.showcase .show-con .box-mask .black-mask .white-box .top-line{
	position: absolute;
	top:0;
	left: 0;
	width:0;
	height: 1px;
	background-color: #fff;
}
.showcase .show-con .box-mask .black-mask .white-box .right-line{
	position: absolute;
	top:0;
	right: 0;
	width:1px;
	height: 0;
	background-color: #fff;
}
.showcase .show-con .box-mask .black-mask .white-box .bottom-line{
	position: absolute;
	bottom:0;
	right: 0;
	width:0;
	height: 1px;
	background-color: #fff;
}
.showcase .show-con .box-mask .black-mask .white-box .left-line{
	position: absolute;
	bottom:0;
	left:0;
	width:1px;
	height: 0;
	background-color: #fff;
}
@keyframes horizontal{
	from{width:0;}
	to{width: 100%;}
}
@keyframes vertical{
	from{height:0;}
	to{height: 100%;}
}
.showcase .show-con .box-mask:hover .black-mask{
	opacity: 1;
	transition: opacity 1s;
}
.showcase .show-con .box-mask:hover .black-mask .white-box strong.text{
	opacity: 1;
	padding: 0 30px;
	transition: opacity 2s;
}
.showcase .show-con .box-mask:hover .top-line{
	animation: horizontal 1.5s 1 linear forwards
}
.showcase .show-con .box-mask:hover .right-line{
	animation: vertical 1.5s 1 linear forwards
}
.showcase .show-con .box-mask:hover .bottom-line{
	animation: horizontal 1.5s 1 linear forwards
}
.showcase .show-con .box-mask:hover .left-line{
	animation: vertical 1.5s 1 linear forwards
}
.showcase .show-con .box-mask img{
	width: 100%;
	height: 100%;
}
.showcase .show-con .box-a{
	width: 380px;
	height: 100%;
}
.showcase .show-con .box-b{
	width: 780px;
	height: 90%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.showcase .show-con .box-c{
	height: 380px;
	display: flex;
	justify-content: space-between;
}
.showcase .show-con .box-d{
	margin-top: 10px;
	height: 390px;
}
.showcase .show-con .box-e{
	margin-right: 10px;
	width:400px;
	height: 370px;
}
.showcase .show-con .box-f{
	width:400px;
	height: 370px;
}
.module>.button{
	display: block;
	margin:0 auto;
	margin-top: 60px;
	width: 170px;
	height: 44px;
	border-radius: 22px;
	text-align: center;
	line-height: 44px;
	font-size: 16px;
	background-color: #e5e5e5;
	color: #999;
}
.module>.button:hover{
	color: #fff;
	background-color: var(--blue);
}
/*showcase end*/
/*plan start*/
.plan{
	background-color: #fefefe;
	padding-bottom: 100px;
}
.plan-con{
	margin:0 auto;
	margin-top: 100px;
	width:1170px;
	display: flex;
	justify-content: space-between;
}
.plan-con>.left-box{
	width:530px;
	padding:30px 15px;
}
.plan-con>.left-box .img{
	width:100%;
	height: auto;
}
.plan-con>.right-box{
	width:600px;
}
.plan-con>.right-box .plan-group{
	margin-bottom: 30px;
	width:530px;
	height: 170px;
	display: flex;
	justify-content: space-between;
}
.plan-con>.right-box .plan-group.orange{
	margin-left: 20px;
}
.plan-con>.right-box .plan-group.pink{
	margin-left: 40px;
}
.plan-con>.right-box .plan-group .left{
	width: 10px;
	height: 100%;
	opacity: 0;
	background-color: var(--green);
	border-radius: 10px 0 0 10px;
}
.plan-con>.right-box .plan-group.orange .left{
	background-color: var(--orange);
}
.plan-con>.right-box .plan-group.pink .left{
	background-color: #f11e5f;
}
.plan-con>.right-box .plan-group .p-case{
	display: block;
	width: 520px;
	height: 100%;
	background-color: #fff;
	box-shadow: 10px 0 10px #eee;
	padding:20px 30px 20px 20px;
}
.plan-con>.right-box .plan-group .p-case .title{
	font-size: 30px;
	color:var(--green);
}
.plan-con>.right-box .plan-group.orange .p-case .title{
	color:var(--orange);
}
.plan-con>.right-box .plan-group.pink .p-case .title{
	color:#f11e5f;
}
.plan-con>.right-box .plan-group .p-case .desc{
	text-indent: 2em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 14px;
	margin-top: 10px;
	line-height: 2em;
	color:#999;
}
.plan-con>.right-box .plan-group:hover .left{
	opacity: 1;
	transition: all 1s;
}
/*plan end*/

/*middle-banner*/
.middle-banner{
	height: 300px;
	background:url('../images/middle_banner.png') no-repeat center/100% auto;
}
.m-b-con{
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.m-b-con .group .number{
	color: #fff;
	font-size: 60px;
	text-align: center;
}
.m-b-con .group .name{
	color: #fff;
	font-size: 16px;
	margin-top: 30px;
	text-align: center;
}
/**/
/*industry start*/
.industry{
	background-color: #f6f6f6;
	padding-bottom: 100px;
}
.industry-con{
	margin:0 auto;
	margin-top: 60px;
	width: 1170px;
	display: flex;
	justify-content: space-between;
}
.industry-con .in-item{
	width:370px;
}
.industry-con .in-item .image{
	display: block;
	height: 278px;
}
.industry-con .in-item .image:hover img{
	transform: scale(1.1);
	transition: transform 1s;
}
.industry-con .in-item .image img{
	width:100%;
	height: 100%;
	transition: transform 1s;
}
.industry-con .in-item .title{
	display: block;
	font-size: 24px;
	color:#000;
	margin-top: 30px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.industry-con .in-item .title:hover{
	color:var(--blue);
}
.industry-con .in-item .desc{
	font-size: 16px;
	color:#999;
	margin-top: 30px;
	margin-bottom: 20px;
	line-height: 2;
	overflow:hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
}
.industry-con .in-item .detail{
	font-size:16px;
	color:#999;
}
.industry-con .in-item .detail:hover{
	color:var(--blue);
}
/*industry end*/
/*partner*/
.partner{
	background-color: #fff;
	padding-bottom: 40px;
}
.partner-con{
	margin:0 auto;
	margin-top: 60px;
	width: 1170px;

}
.partner-con:after{
	content: "";
	display: block;
	clear:both;
}
.partner-con .p-item{
	float: left;
	margin-right: 30px;
	margin-bottom: 30px;
	width:170px;
	height: 200px;
	background-color: pink;
}
.partner-con .p-item:nth-child(6n){
	margin-right: 0;
}
/**/
/*关于我们 about-us*/
.about-us{
	background-color: #202020;
}
.about-us .ab-con{
	margin:0 auto;
	width: 1170px;
	padding:30px 0;
}
.about-us .company-name{
	font-size: 20px;
	text-align: center;
	padding:20px 0;
	color:#fff;
}
.about-us .company-name-copy{
	font-size: 14px;
	text-align: center;
	padding:20px 0 0;
	color:#fff;
}
.about-us .ab-con .box{
	display: flex;
	width:100%;
	justify-content: space-between;
	font-size: 14px;
	color:#fff;
}
.about-us .ab-con .box .left{
	width:870px;
}
.about-us .ab-con .box .left>.text{
	line-height: 2;
}
.about-us .ab-con .box .left .address{
	margin-top: 10px;
	margin-bottom: 30px;
	display: flex;
	justify-content: flex-start;
}
.about-us .ab-con .box .left .address li{
	line-height: 2;
	margin-right: 30px;
}
.about-us .ab-con .box .left .friendlink{
	display: flex;
	justify-content: flex-start;
	margin-top: 10px;
}
.about-us .ab-con .box .left .friendlink li{
	margin-right: 30px;
}
.about-us .ab-con .box .left .friendlink li a{
	font-size: 14px;
	line-height: 2;
	color:#fbfbfb;
}
.about-us .ab-con .box .left .friendlink li a:hover{
	color:var(--blue);
}
.about-us .ab-con .box .right{
	width:270px;
	display: flex;
	justify-content: space-between;
}
.about-us .ab-con .box .right .code-box{
	width:100px;
}
.about-us .ab-con .box .right .code-box .text{
	font-size: 14px;
	line-height: 2;
	margin-bottom: 20px;
	text-align: center;
}
.about-us .ab-con .box .right .code-box img{
	width:100%;
	height: auto;
}
/*copyright*/
.copyright{
	font-size: 14px;
	color: #fff;
	line-height: 3;
	text-align: center;
	background-color: #202020;
	border-top:1px solid #4d4d4d;
}