body,
html {
	margin: 0;
	padding: 0;
	font: 14px/1.5 'Microsoft YaHei', 'Microsoft YaHei UI', 'WenQuanYi Micro Hei', Arial, sans-serif, \5b8b\4f53;
}

ul,
li ,h4,h3,h2,h1,h5,h6,p{
	margin: 0;
	padding: 0;
	list-style: none;
}
a{
	text-decoration:none;
	color: #000;
}
#menu {
	position: fixed;
	left: 0;
	top: 0;
	width: 92%;
	padding: 0 4%;
	/*height: 59px;*/
	color: #fff;
	transition: background-color, line-height .5s ease;
	-webkit-transition: background-color, line-height .5s ease;
	-o-transition: background-color, line-height .5s ease;
	-ms-transition: background-color, line-height .5s ease;
	-moz-transform: background-color, line-height .5s ease;
	line-height: 6em;
	background-color: inherit;
	-webkit-animation: gupIn 0.6s 0.4s both;
	-o-animation: gupIn 0.6s 0.4s both;
	-ms-animation: gupIn 0.6s 0.4s both;
	-moz-animation: gupIn 0.6s 0.4s both;
	animation: gupIn 0.6s 0.4s both;
}

#menu.down {
	color: #000;
	line-height: 4em;
	border-bottom: solid #e9e9e9 1px;
	background-color: #fff;
}

article p{
	padding: 0 3%;
}

#menu img {
	vertical-align: middle;
}

#menu ul {
	float: right;
}

#menu ul li {
	padding: 0 15px;
	float: left;
	cursor: pointer;
}

#menu ul li:active,
#menu ul li.active {
	color: #00948C;
	/*background-color: rgb(4, 150, 142);
	  box-shadow: inset 0px 2px 8px 0px rgba(106, 106, 106, 0.6);*/
}

.page {
	position: relative;
	width: 100%;
	height: 100%;
	display: none;
	overflow: hidden;
}
.page.active{
}

.page video {
	background-color: #000;
	object-fit: cover;
}
.page .mask{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

/*--------------------*/
.page > section{
	position: absolute;
	top: 50%;
	width:100%;
	-webkit-transform: translate3d(0,-50%, 0) scale(1, 1);
	-moz-transform: translate3d(0,-50%, 0) scale(1, 1);
	-ms-transform: translate3d(0,-50%, 0) scale(1, 1);
	-o-transform: translate3d(0,-50%, 0) scale(1, 1);
	transform: translate3d(0,-50%, 0) scale(1, 1);
}

.servers{
	background-color: #E9F3F2;
}

.servers ul {
	position: relative;
	width: 70%;
	left: 15%;
	margin-top: 4em;
	-webkit-transform: translate3d(0, -30%, 0) scale(1, 1);
	-moz-transform: translate3d(0, -30%, 0) scale(1, 1);
	-ms-transform: translate3d(0, -30%, 0) scale(1, 1);
	-o-transform: translate3d(0, -30%, 0) scale(1, 1);

	transform: translate3d(0, -30%, 0) scale(1, 1);
}

.servers ul li {
	position: relative;
	float: left;
	width: 24%;
	margin: 1% 0 0 1%;
	overflow: hidden;
	cursor: pointer;
	background-color: #00948C;
}

.servers ul li >div{
	position: absolute;
	height: 75%;
	width: 96%;
	padding: 2%;
	top: 100%;
	background-color: rgba(0, 148, 140,0.8);
	-webkit-transform:top 0.4s ease-in-out;
	-ms-transform:top 0.4s ease-in-out;
	-o-transform:top 0.4s ease-in-out;
	-moz-transform:top 0.4s ease-in-out;
	transition: top 0.4s ease-in-out;
	color: #fff;
}
.servers ul li:hover,.servers ul li:active{
	/*-webkit-transform: translate3d(0, 0, 0) scale(1.2, 1.2);
	-moz-transform: translate3d(0, 0, 0)scale(1.2, 1.2);
	transform: translate3d(0, 0, 0) scale(1.2, 1.2);*/
}
.servers ul li:hover >div,.servers ul li:active >div{
	top: 25%;
}

.servers ul li:hover >img{
	-webkit-transform:scale(1.1);
}

.servers ul li img {
	width: 100%;
	transition: 1s all ease;
}
.servers article{
	text-align: center;
	
	
}
.servers.active ul{
	-webkit-animation: gupIn 1s 0.6s both;
	-moz-animation: gupIn 1s 0.6s both;
	-o-animation: gupIn 1s 0.6s both;
	-ms-animation: gupIn 1s 0.6s both;
	animation: gupIn 1s 0.6s both;
}
.servers.active article{
	-webkit-animation: gupIn 1s 0.4s both;
	-ms-animation: gupIn 1s 0.4s both;
	-o-animation: gupIn 1s 0.4s both;
	-moz-animation: gupIn 1s 0.4s both;
	animation: gupIn 1s 0.4s both;
}

.servers article h4{
	font-size: 26px;
	padding: 0 1em;
}
article{
	text-align: center;
}


.about{
	background-color: #E6EEF1;
}

.about article{
	text-align: center;
	line-height: 2em;
}

.about div{
	position: relative;
	overflow: hidden;
	margin-top: 4em;
}
.about video{
	position: absolute;
	height: 96%;
	top: 0%;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0%, 0) scale(1, 1);
	-moz-transform: translate3d(-50%,0, 0) scale(1, 1);
	-o-transform: translate3d(-50%,0, 0) scale(1, 1);
	-ms-transform: translate3d(-50%,0, 0) scale(1, 1);
	transform: translate3d(-50%,0, 0) scale(1, 1);
}

.about.active div{
	-webkit-animation: gdownIn 1s 0.8s both;
	-moz-animation: gdownIn 1s 0.8s both;
	-o-animation: gdownIn 1s 0.8s both;
	-ms-animation: gdownIn 1s 0.8s both;
	animation: gdownIn 1s 0.8s both;
}
.about.active article{
	-webkit-animation: gupIn 1s 0.4s both;
	-moz-animation: gupIn 1s 0.4s both;
	-o-animation: gupIn 1s 0.4s both;
	-ms-animation: gupIn 1s 0.4s both;
	animation: gupIn 1s 0.4s both;
}



.recruit{
	background-color: #f6f6f5;
	
}
.recruit .joblist{
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 25.714em;
}
.recruit ul{
	/*position: absolute;*/
	padding-right:50px;
	height: 25.714em;
	bottom: 0;
}
.recruit ul li{
	float: left;
	padding-left:50px;
	display:inline;
	height: 100%;
}

.recruit ul li img{
	height: 100%;
}

.recruit ul li object{
	height: 100%;
}

.contact{
	background-color: #FBFBFF;
}
.contact section{
	top:inherit;
	bottom: 40%;
	-webkit-transform: translate3d(0,0, 0) scale(1, 1);
	-moz-transform: translate3d(0,0, 0) scale(1, 1);
	-o-transform: translate3d(0,0, 0) scale(1, 1);
	-ms-transform: translate3d(0,0, 0) scale(1, 1);
	transform: translate3d(0,0, 0) scale(1, 1);
}

.contact.active section{
	-webkit-animation: gdownIn 1s 0.4s both;
	-moz-animation: gdownIn 1s 0.4s both;
	-ms-animation: gdownIn 1s 0.4s both;
	-o-animation: gdownIn 1s 0.4s both;
	animation: gdownIn 1s 0.4s both;
}

.active .joblist{
	-webkit-animation: gdownIn 1s 0.4s both;
	-ms-animation: gdownIn 1s 0.4s both;
	-o-animation: gdownIn 1s 0.4s both;
	-moz-animation: gdownIn 1s 0.4s both;
	
	animation: gdownIn 1s 0.4s both;
}
.contact h4{
	text-align: center;
}
.contact #map{
	position: absolute;
	bottom: 0;
	width: 100%;
	min-height: 36%;
	background-color: #EFEFE7;
}
ul.news{
	text-align: left;
	padding-top: 3em;
}
ul.news li{
	padding: 0 25%;
	border-bottom: solid 1px #dcdcdc;
	height: 4.2em;
	cursor: pointer;
}
ul.news li:hover,ul.news li:active,.contact a.more:hover,.contact a.more:active{
	background-color: #8dc21f;
	color: #fff;
}
ul.news li > div{
	float: left;
	padding-top: 0.7em;
}
ul.news li > div> b{
	font-size: 16px;
}
ul.news li > div> p{
	text-align: right;
	font-size: 10px;
	line-height: 14px;
}
ul.news li > span{
	width: 70%;
	float: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 4.2em;
}
.contact a.more{
	text-align: center;
    margin: 0 auto;
    width: 4.2em;
    line-height: 4.2em;
    border: 1px solid #dcdcdc;
    border-radius: 100px;
    margin-top: 1.6em;
    display: block;
}


.copyright .yyzz{
	background: url("/img/footericon.png") no-repeat center top;
	margin-top: 10px;
	padding-top: 30px;
	display: block;
}

/*------------------------*/

.rd_1{
	color: #5E7B20;
}
.rd_2{
	color: #00756F;
}
@-webkit-keyframes gupIn {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -30px, 0);
	}
}

@-moz-keyframes gupIn {
	from {
		opacity: 0;
		-moz-transform: translate3d(0, -30px, 0);
	}
}

@-ms-keyframes gupIn {
	from {
		opacity: 0;
		-ms-transform: translate3d(0, -30px, 0);
	}
}

@-o-keyframes gupIn {
	from {
		opacity: 0;
		-o-transform: translate3d(0, -30px, 0);
	}
}

@keyframes gupIn {
	from {
		opacity: 0;
		transform: translate3d(0, -30px, 0);
	}
}

@-webkit-keyframes gdownIn {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0);
	}
}

@-moz-keyframes gdownIn {
	from {
		opacity: 0;
		-moz-transform: translate3d(0, 30px, 0);
	}
}

@-ms-keyframes gdownIn {
	from {
		opacity: 0;
		-ms-transform: translate3d(0, 30px, 0);
	}
}

@-o-keyframes gdownIn {
	from {
		opacity: 0;
		-o-transform: translate3d(0, 30px, 0);
	}
}

@keyframes gdownIn {
	from {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}
}