.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } 
.clearfix {zoom:1;}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
html{font-size: 100px;}
body {
	margin:0;
	background: #fff;
	color: #111;
	font-family: "Open Sans", Helvetica,Tahoma, Arial,STXihei,"华文细黑","Microsoft YaHei","微软雅黑",SimSun,"宋体",Heiti,"黑体", sans-serif; 
	font-size: 13px;
	line-height: 1.5;
	overflow-y: scroll;
	
	-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 {
	line-height: 1.3
}
input,button,select,textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit
}
html, body, div, p, ul, li, ol, dl, dt, dd, pre, code, table, tr, td, form, fieldset, legend, btn, input, textarea, h1, h2, h3, h4, h5, h6, hr, blockquote {
	margin: 0;
	padding: 0;
}

ol, ul { list-style: none; }

a, a:visited{
	text-decoration: none;
}
a {
	cursor: pointer;
	/*color: #f36322;*/
	text-decoration: none
}
a:hover {
	text-decoration: none;
	color: #36C3FF;
}

.btn{
	background: transparent !important;
	border: none;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
}

.container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px
}
.container:before,.container:after {
	content: " ";
	display: table
}
.container:after {
	clear: both
}
  
@media (min-width: 768px) and (max-width: 991px) {
	.container {
	  width: 768px
	}
}
@media (min-width: 992px) and (max-width: 1099px) {
	.container {
	  width: 900px
	}
}
@media (min-width: 1100px) {
	.container {
	  width: 960px
	}
}
.hero{
	height: 400px;
	background-image: url(hero.png);
	position: relative;
}
.hero header{
	margin-top: 30px;
	position: relative;
}
header .menu{
	position: absolute;
	right: 0px;
	top: 0;
}
header .menu li{
	float: left;
	margin-right: 30px;
}
header .menu li>a{
	color: #fff;
	padding: 5px;
}
header .menu li>a.active{
	border-bottom: solid #348CFF;
}
.hero .logo{
	display: block;
	width: 151px;
	height: 30px;
	background:  no-repeat;
}
.hero h1{
	position: absolute;
	top: 160px;
	font-size: 40px;
	color: #fff;
	left: 50%;
transform: translateX(-50%);
}
.hero h2{
	position: absolute;
	top: 230px;
	font-size: 14px;
	color: #fff;
	left: 50%;
width: 420px;
margin-left: -210px;
text-align: center;
}

footer{
	background-color: #101010;
	height: 195px;
}
footer h2{
	margin-top: 25px;
	color: #fff;
	font-size: 22px;
}
.copyright{
	color: #fff;
	text-align: center;

}
.copyright a{
	color: #35C2F8;
}
.contact-list{
	margin-top: 15px;
}
.contact-list>li{
	float: left;
	color: #fff;
	margin-right: 40px;
}
.contact-list>li>a{
	color: #fff;
}
.contact-list>li>i{
	display: inline-block;
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-position: bottom;
	margin-right: 12px;
}
.line{
	border-top: solid 1px #979797;
	margin: 24px 0; 
}
.desc {
	display: flex;
flex-wrap: wrap;
}

.desc .left .ic{
	width: 30px;
	float: left;
}
.desc .left .info{
	margin-left: 38px;
}
.desc .left .info h3{
	color: #2482FF;
	font-size: 20px;
}
.desc .left ul>li{
	margin-top: 40px;
}

.desc h2{
	font-size: 40px;
	margin-top: 30px;
}
.desc .underline{
	font-size: 30px;
	border-bottom: solid 3px #0E0E0E;
	display: inline;
}

.main>ul>li:nth-of-type(odd){ background-color: #F6FAFD;}
.main>ul>li{

}
.main .feature{
	display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 55px 0;
}

.dl{
display: block;
width: 172px;
height: 60px;
position: absolute;

}

.main .feature h3{
	color: #2482FF;
	font-size: 40px;
	margin-bottom: 35px;
}

.main .feature p{
	color: #777777;
	font-size: 20px;
}
.main .reverse h3, .main .reverse p{
	//text-align: center;
}


@media(min-width: 768px){
.desc{
	flex-direction: row;
	padding: 55px 0;
}
.desc .left{
		width: 50%;
	}
	.desc .right{
		width: 30%;
	}
	.desc .right img{
		width: 100%;
	}

.main .feature h3{
		margin-left: 50px;
	}

	.main .feature .detail {
    width: 50%;
    padding-top: 50px;
}
.main .feature p{
		margin-left: 50px;
	}
	.main .reverse{
		flex-direction: row-reverse;
	}
	.main .feature figure{
	width: 30%;
}
.main .feature figure img{
	width: 100%;
}
.main .feature .detail{
		position: relative;
	}
.dl{
	left: 44px;
	top: 219px;
}

}
@media(max-width: 767px){
	header .menu{
		display: none;
	}
	.hero{
		height: 350px;
	}
	.main>ul>li:last-child{
		padding-bottom: 60px;
		position: relative;
	}
	.hero h1{
		top: 130px;
		font-size: 35px;
	}
	.hero h2{
		top: 240px;
		width: 320px;
		margin-left: -160px;
	}
	.desc .right{
		text-align: center;
	}
	.desc .right img{
		width: 50%;
	}
	.main .feature{
		flex-direction: column;
		justify-content: center;
	}
	.main .feature .detail {
		text-align: center;
	}
	.main .feature figure{
	text-align: center;
}
.main .feature figure img{
	width: 50%;
}
.dl{
	left: 50%;
	bottom: 20px;
	margin-left: -85px;
}
footer{
	height: 250px;
}
}