html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body,
div,
h1,
h2,
h3,
h4,
h5,
h5,
p,
ul,
ol,
li,
dl,
dt,
dd {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

ul,
ol {
	list-style-type: none;
}

em {
	font-style: normal
}

body {
	color: #444
}

input,
textarea {
	font: 14px "Microsoft Yahei", Arial, Helvetica, sans-serif;
	line-height: 30px;
	border: none;
	outline: none;
}

a {
	color: #333;
	text-decoration: none;
}

a:hover {
	color: #b62c2f;
}

body,
div {
	line-height: 26px;
	font-size: 16px
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

.cf {
	zoom: 1;
}

.cf:after {
	content: '.';
	display: block;
	visibility: hidden;
	clear: both;
	height: 0px;
}

.clear {
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	margin: 0px 6px;
}


/* CSS Document */

.wrap {
	width: 100%;
	height: 100%;
}

.clear{clear:both}
/**/


/**Ã©Â¡ÂµÃ©ÂÂ¢Ã¨Æ’Å’Ã¦â„¢Â¯**/

.wrapbg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	background: transparent url(../images/bg.png) no-repeat scroll center 0;
	height: 100%;
	background-position: center center;
	background-size: cover
}

img {
	width: 100%;
	height: 100%;
}


/****/

.g-container {
	padding-top: 110px
}

.g-c-area {
	width: 1100px;
	margin: 0px auto;
	position: relative;
	max-height: 510px;
}

.mb60 {
	margin-bottom: 60px
}

.fl-l {
	float: left
}

.fl-r {
	float: right
}

.f14 {
	font-size: 14px
}

.txt-center {
	text-align: center
}


/******/
#jPop{display: none;}
.pop {
	display: none;
	position: fixed;
	top: 14px;
	right: 10px;
	width: 100%;
	z-index: 10;
	color: #fff;
}
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes tada {
	0% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1)
	}
	10%,
	20% {
			-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
			transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
	}
	30%,
	50%,
	70%,
	90% {
			-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
			transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
	}
	40%,
	60%,
	80% {
			-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
			transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
	}
	100% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1)
	}
}

@keyframes tada {
	0% {
			-webkit-transform: scale3d(1, 1, 1);
			-ms-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1)
	}
	10%,
	20% {
			-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
			-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
			transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
	}
	30%,
	50%,
	70%,
	90% {
			-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
			-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
			transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
	}
	40%,
	60%,
	80% {
			-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
			-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
			transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
	}
	100% {
			-webkit-transform: scale3d(1, 1, 1);
			-ms-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1)
	}
}

.tada {
	-webkit-animation-name: tada;
	animation-name: tada
}
.navtop {
	height: 50px;
	padding: 14px 12px;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 20;
	margin-left: -550px;
}

.pop .fl-r {
	color: #fff
}

.navtop a {
	display: inline-block
}

.navtop a img,.pop a img {
	width: 100%;
	height: 100%
}

.navtop a.i-home {
	width: 22px;
	height: 20px;
}

.pop span.i-arrow {
	margin-left: 10px;
	width: 24px;
	height: 23px;
	display: inline-block;
}

.downloadcont {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 20;
	margin-left: -550px;
	margin-top: -250px
}

.downloadcont .fl-l {
	width: 40%
}

.downloadcont .fl-r {
	width: 45%;
	position: relative
}

.ic-apple,
.ic-and {
	display: inline-block;
	width: 22px;
	height: 26px;
	vertical-align: middle;
	margin-right: 10px;
	line-height: 0px
}

.ic-apple {
	background: transparent url(../images/i-apple.png) no-repeat scroll 0 0;
	background-size: cover;
}

.ic-and {}

.phone-1 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10;
	transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
}

.phone-2 {
	position: absolute;
	top: 40px;
	left: 180px;
	z-index: 5;
	transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
}

.phone-2:hover {
	left: 210px;
	z-index: 25
}

.main-info {
	padding-top: 20px
}

.main-info .applogo {
	width: 84px;
	margin-bottom: 20px;
}

.main-info h2 {
	font-size: 27px;
	color: #333;
	margin-bottom: 30px;
}

.main-info p {
	margin-bottom: 60px;
	font-size: 18px;
	color: #888;
	line-height: 32px
}

.downloadbtna {
	position: relative
}

.downloadbtna .ewm {
	position: absolute;
	top: 0;
	left: 250px;
	z-index: 20;
	width: 110px
}
.downloadbtna a.btn:hover{background: #52a8ff;}
.downloadbtna a.btn {
	background: #0080ff;
	border-radius: 30px;
	height: 44px;
	width: 220px;
	display: block;
	margin-bottom: 20px;
	color: #fff;
	text-align: center;
	line-height: 44px
}

.downloadbtna a.btn:active {
	background: #23befe
}

@media screen and (max-width:1100px) {
	.g-c-area {
			width: 94%;
			margin: 0px auto;
			margin-left: -47%;
			margin-top: -250px
	}.navtop {
 margin-left: -47%;
}
}

@media screen and (max-width:640px) {
	.downloadcont .fl-l {
			float: none;
			width: 80%;
			margin: 0px auto
	}
	.downloadcont .fl-r {
			display: none;
	}
	.navtop {
			display: block
	}
}

@media screen and (max-width:480px) {
	.wrapbg {
			background: transparent url(../images/bg.png) no-repeat scroll center -150px;
	}
	.g-c-area {
			margin-top: -240px;
	}
	.downloadcont .fl-l {
			float: none;
			width: 80%;
			margin: 0px auto
	}
	.downloadcont .fl-r,
	.downloadbtna .ewm {
			display: none;
	}
	.main-info .applogo {
			/* width: 40%; */
			margin: 0px auto 50px;
	}
	.main-info h2 {
			text-align: center
	}
	.downloadbtna a.btn {
			width: 100%
	}
}