*{
	margin: 0px;
	padding: 0px;
}
html{
	font-size: 10px;
	min-height: 100%;
	position: relative;
}
body{
	font-size: 16px;
	min-height: 100%;
	font-family: Roboto, BlinkMacSystemFont, "Helvetica Neue", Arial, "Microsoft Yahei", "WenQuanYi Micro Hei", "Pingfang SC", sans-serif;
	color: #333;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
	color: #333;
}
a:hover{
	text-decoration: none;
}
img{
	max-width: 100%;
}

#body .clear-both:after{
	content: "";
	display: block;
	clear: both;
}
#body .show{
	display: block;
}
#body .hide{
	display: none;
}

.content-box{
	padding-bottom: 70px;
}
.content-box.grey{
	background:#F8F9FA
}

.prd-box{
	margin: 0 auto;
	max-width: 1025px;
}

.article-title{
	text-align: center;
	padding: 45px 0px 50px;
	font-family: "微软雅黑";
}	
	.article-title .title{
		font-size: 29px;
		color: #009FE9;
		margin-bottom: 5px;
		font-weight: 500;
	}
	.article-title .Eng{
		font-size: 16px;
		color: #999;
		margin-bottom: 15px;
	}
	.article-title .border{
		width: 80px;
		border-bottom: 3px solid #009FE9;
		margin: 0 auto;
	}
#content{
	margin-bottom: 200px;
}
.foot{
	background: #283246;
	position: absolute;
	bottom: 0px;
	width: 100%;
	margin-top: 200px;
}
	.foot .contact-box{
		max-width: 1000px;
		height: 160px;
		margin: 0 auto;
		color: white;
		text-align: justify-content;
	}
	.foot .contact-box ul{
		display: flex;
		display: -webkit-flex;
		justify-content:space-between;
		align-content:space-between;
	}
	.foot .contact-box ul li{
		position: relative;
		display: inline-block;
		
		display: inline-flex;
		justify-content:space-between;
		align-content:space-between;
	}
	.foot .contact-box ul li:after{
		content: "";
		display: block;
		clear: both;
	}
		.foot ul li .icon{
			float: left;
			width: 60px;
			line-height: 160px;
		}
			.foot ul li .icon i{
				font-size: 50px;
			}
		.foot ul li .info{
			float: left;
			max-width: 240px;
			margin-top: 60px;
			margin-left: 20px;
			text-align: left;
		}
		.foot ul li:first-of-type .info{
			margin-top: 45px;
		}
		.foot ul li:last-of-type{
			
		}
.foot .copyright-box{
	color: white;
	border-top: 1px solid #999999;
	text-align: center;
	font-size: 13.5px;
	
	height: 40px;
	line-height: 40px;
}
.nav-img{
	height: 40rem;
	background: no-repeat left center;
	background-size: 100%;
}
.prd .tip{
	text-align: center;
	color: #999;
	font-size: 18px;
	padding-bottom: 60px;
}
@media only screen and (min-width:1025px) {	
#head .logo-box .logo-title{
	display: none;
}
.logo-box .logo{
	height: 57px;
	margin-bottom: 10px;
}
.head .logo-box{
	margin-left: 10px;
}
.head .logo-box span.company-name{
	display: block;
	font-size: 18px;
	color: black;
	
}
	#body{
		min-height: 700px;
	}
	#body  .swiper-container{
	   max-height: calc(100% - 130px);
	   overflow: hidden;
	}	
.head{
	height: 130px;	
	line-height: 1;
}
.head-top{
	display: none;
}
.head .head-box{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	display: -webkit-flex; 
	align-items: center;
}
	.head .logo-box{
		text-align: center;
		float: left;
		position: absolute;
		left: 10px;
        
	}
		.head .logo-box span.logo-title{
			display: block;
			color: #009FE9;
		    font-weight: bold;
		    font-size: 38px;
		    margin-bottom: 6px;
		}
		
	.head ul.nav-bar{
		float: right;
		position: absolute;
        right: 10px;
        
	}
		.head ul.nav-bar li{
			float: left;
		}	
			.head ul.nav-bar li a{
				display: block;
				padding: 9.5px 17.5px;
				color: #333333;
				border-radius: 100px;
				font-size: 17px;
				margin-left: 30px;
			}
			.head ul.nav-bar li a.select{
				background: #009FE9;
				color: white;
			}
			.head ul.nav-bar li a:hover{
				background: #009FE9;
				color: white;
			}
			.head-box .logo-box i{
				display: none;
			}
}			
@media only screen and (max-width:1024px) {
.logo-box .logo{
	display: none;
}
	#content{
		margin-bottom: 4rem;
	}
	.head-fixd{
		position: fixed;
		width: 100%;
	}
	.head{
		position: fixed;
		top: 0px;
		width: 100%;
		z-index: 1000;
		line-height: 1;
		font-size: 1.6rem;
	}
	.head-mask{
		position: fixed;
		background: rgba(0,0,0,0.6);
		height: 100%;
		width: 100%;
		cursor: pointer;
		display: none;
		z-index: 1000;
	}
	.head .head-box{
		position: relative;
		background: #009FE9;
	}
	.head .head-box .logo-box{
		padding: 1rem 0rem;
	}
	.head .head-box .logo-box span{
	}
		.head .head-box .logo-box span.logo-title{
			margin-left: 4rem;
			color: white;
			font-weight: bold;
			font-size: 2.6rem;
			float: left;
		}
		.head .head-box .logo-box span.company-name{
			color: white;
			font-size: 1.2rem;
			display: none;
		}
		.head .head-box .logo-box i{
			float: right;
			color: white;
			font-weight: bold;
			font-size: 2.5rem;
			margin-right: 3.0rem;
			cursor: pointer;
		}
	.head .nav-bar{
		display: none;
		border-top: 0.2rem solid white;
	}
		.head .nav-bar li a{
			display: block;
			padding: 2rem;
			text-align: center;
			color: white;
		}
		.head .nav-bar li a:active{
			color: #009FE9;
			background: white;
			text-decoration: none;
		}
.content-box{
	padding-bottom: 0rem;
}
.article-title{
	text-align: center;
	padding: 2rem 0px 2.2rem;
	font-family: "微软雅黑";
}	
	.article-title .title{
		font-size: 1.8rem;
		color: #009FE9;
		margin-bottom: 0.3rem;
	}
	.article-title .Eng{
		font-size: 1.4rem;
		color: #999;
		margin-bottom: 0.8rem;
	}
	.article-title .border{
		width: 7rem;
		border-bottom: 0.2rem solid #009FE9;
		margin: 0 auto;
	}
	
	.foot .contact-box{
		display: none;
	}
	.foot .copyright-box{
		color: white;
		border-top: none;
		text-align: center;
		font-size: 1.3rem;
		height: 4rem;
		line-height: 4rem;
	}
.prd .tip{
	text-align: center;
	color: #999;
	font-size: 1.8rem;
	padding-bottom: 7rem;
}

}	


@keyframes enterUp {
  from {
    opacity: 0;
    transform: translate3d(0, 300px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
.enterUp {
  animation-name: enterUp;
}
@keyframes enterLeft {
  from {
    opacity: 0;
    transform: translate(-100px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
.enterLeft {
  animation-name: enterLeft;
}
@keyframes enterRight {
  from {
    opacity: 0;
    transform: translate(100px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
.enterRight {
  animation-name: enterRight;
}
@keyframes enterInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 300px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.enterInUp {
  animation-name: enterInUp;
  animation-delay: 0.1s;
}	
@keyframes enterUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 300px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.enterUpBig {
  animation-name: enterUpBig;
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 300px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInUp {
  animation:bounceInUp 0.5s;
  animation-fill-mode:backwards;
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
from{
	opacity: 0;
	transform: translate(0, 100px);
}
10%{
	opacity: 1;
	transform: translate(0, 0px);;
}
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
  animation-fill-mode:backwards;
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(-300px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
  }

  to {
    transform: none;
  }
}

.bounceInLeft {
  
  animation: bounceInLeft 1s linear;
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(300px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  to {
    transform: none;
  }
}

.bounceInRight {
  animation: bounceInRight 1s linear;
  
}

.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 768px) {
	.container {
		width: 750px;
	}
}

@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}
}





.prd-detail .top span {
	background: #009FE9;
	color: white;
	font-size: 16px;
	padding: 12px 20px;
	display: inline-block;
	margin-bottom: -1px;
}
.prd-detail .top .border {
	border-bottom: 2.5px solid #009FE9;
}
.prd-box .list-box {
	background-color: #f4f4f4;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 20px 0;
	width: 100%;
}*/