* {margin: 0; padding: 0;}
body {font-family:\5FAE\8F6F\96C5\9ED1; position: relative; background: #fff;}
ul {list-style:none;}
a {color:#333; text-decoration:none; -webkit-transition: color .3s; -moz-transition: color .3s; transition: color .3s;}
a:hover {color:#149EFF; text-decoration:none; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease;}
img {border:none;}
.clear {clear: both;}
.left {float: left;}
.right {float: right;}


@font-face {
	font-family: 'PingFangExtraLight';
  	src:
    url('../font/PingFangExtraLight.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;  
}
@font-face {
	font-family: 'PingFangLight';
  	src:
    url('../font/PingFangLight.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;  
}
@font-face {
	font-family: 'PingFangBold';
  	src:
    url('../font/PingFangBold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;  
}

header {width: 100%; background: #fff;}
header .headerwrap {width: 100%; max-width: 1200px; padding: 0 20px; margin: 0 auto; clear: both; height: 100px;}
header .headerwrap .logo {margin-top: 20px; width:300px; height:60px;}
header .headerwrap .logo img {width: 100%; height: 100%; object-fit: contain;}
header .headerwrap .nav {line-height: 100px; }
header .headerwrap .nav li {float: left; margin: 0 20px; font-size: 24px; font-family:'PingFangLight'; }
header .headerwrap .nav li a {color: #333;}
header .headerwrap .nav li a:hover {color: #149EFF;}
header .banner {width: 100%; height:919px; background: url(../images/banner.jpg) no-repeat center;background-size:1980px auto;position: relative;}
header .banner .btn {width: 680px; position: absolute; bottom: 80px; left: 50%; margin-left:-340px; }

.container {width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden;}
.about,.features,.download,.video {margin:60px auto; width: 100%;}
.container h2 {font-size: 48px; text-align: center; margin: 20px auto; font-family:'PingFangLight';}
.container h3,.video h3 {font-size: 30px; font-family: 'PingFangExtraLight'; text-align: center; line-height: 55px; color: #555;}
/*.container p {font-size: 16px; text-indent: 2em; line-height: 32px; color: #888; margin-bottom: 30px; }*/

.features .giflist {display: flex;}
.features .giflist li {width: 600px; float: left}
.features .giflist li .img img {width: 600px; height: 600px;}
.features .giflist li .text {width: 100%;}
.features .giflist li .text h2 {font-family:"PingFangBold"; font-size: 48px; color: #00a0e9}
.features .giflist li .text p { font-size: 24px; text-align: center; font-family:"PingFangLight"; color: #00a0e9  }

.download {height: auto; overflow: hidden;}
.download .btn {margin: 0 auto;}

.download .btn .ul1 {width: 667px; margin: 0 auto; height: 91px;}
.download .btn .ul2 {width: 245px; margin: 0 auto; height: 133px; position: relative;}
.download .btn .ul2 span {position: absolute; display: block;top: -25px; right: -200px; opacity: 0; transition: all .3s ease;-moz-transition: all .3s ease;-webkit-transition: all .3s ease;}
.download .btn .ul2 a:hover span {/*display: block; */opacity: 1;}
.download .btn .ul1,.download .btn .ul2 { margin-top: 40px; margin-bottom: 40px;}
.download .btn li {float: left; margin: 0 10px;}
.video {background: url(../images/footerbg.jpg) no-repeat center bottom; background-size: cover; width: 100%; height: 610px;}
.video video {width: 800px; height: 450px; background: #e5e5e5; margin: 0 auto; display: block;}
.video h3 {margin-bottom: 30px;}
.videobtn {background: none; border:none; width: 131px; height: 131px; display: block; margin: 0 auto; outline: none;}

.shadow {margin-top:30px;}
.shadow img{width:100%;}

.video-flash{width: 800px; height: 480px; margin: 0 auto;display: none;}
.video-h5{display: none;}
.video-js{width: 800px; margin: 0 auto;}
.video-h5 video,.video-js video{width:100%;height:100%;}
.video-dialog {font-size:0;}
.video-dialog .am-modal-dialog {width: 800px; height: 480px;}

footer {text-align: center; line-height: 24px; margin-bottom: 30px; color: #333;}
footer span {font-size: 14px; color: #999;}

@media only screen and (max-width: 1200px) {
	.features .giflist li {
		width: 50%;
	}
	.features .giflist li .img img {
		width: 100%;
		height: auto;
	}
}

@media only screen and (max-width: 800px) {
	.features .giflist li .text h2 {
		font-size: 36px;
	}
	.features .giflist li .text p {
		font-size: 20px;
	}
	footer {font-size: 14px; line-height: 1.5;}
	footer .tip{display: none;}
	.video-flash{display: none;}
	.video-h5{display: none;}
	.video-js{width:100%;}
	.video-dialog {width: 98%; height: auto;margin:0 auto;}
}

@media only screen and (max-width: 600px) {
	header {width: 100%; background: #fff; }
	header .headerwrap {display:none; height: 7rem; max-width: auto; padding-top: 1rem;}
	header .headerwrap .logo {margin: 0 auto; text-align: center; width: 226px; overflow: hidden; float: none;}
	header .headerwrap .logo  img {width: 300px; height: auto;}
	header .headerwrap .nav { display: none; }
	header .banner {width: 100%; padding-top: 90%; height: auto; position: relative; background:url(../images/banner_s.jpg) no-repeat center -20%; background-size: 100% auto;}
	header .banner .btn,.download .btn .ul1 {position: relative; bottom:0; width: 250px; height: auto; padding-bottom: 10%; overflow: hidden; left: 0; margin:0 auto;}
	header .banner .btn > div,.download .btn .ul1>div{margin-bottom:10px;}
	header .banner .btn img,.download .btn .ul1 img {display: block;}
	.container h2 { font-size: 30px; margin: 15px 0;}
	.features .giflist li { width: 80%; margin: 0 auto; float: none; }
	.features .giflist li .text h2 { font-size: 28px; }
	.features .giflist li .text p { font-size: 18px; }
	.container h3, .video h3 { font-size: 18px; line-height: 1.5; padding:0 20px;}
	.videobtn{width: 80px; height: 80px;}
	.video{background-size: 200% auto; height: 300px;}
	footer {padding: 0 20px;}
	.container {background:url(../images/shadow.png) no-repeat center top; background-size:100% auto;}
	.download .btn .ul2 span {top:-25px; right: 50%; margin-right:-90px;}
}