ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.w {
	margin: 0 auto;
	width: 1100px;
}

.iconlist1 {
	background: url(../img/iconlist_1.png);
}

.iconlist2 {
	background: url(../img/iconlist_2.png);
}

.iconlist3 {
	background: url(../img/iconlist_3.png);
}

.header {
	height: 50px;
}

.logo {
	width: 156px;
	height: 30px;
	margin: 10px 20px;
	display: inline-block;
	background-position: -868px -98px;
}

.nav {
	float: right;
}

.nav a {
	color: #000000;
	text-decoration: none;
}

.nav li[class=selected] {
	height: 23px;
	border-bottom: 3px solid #f05157;
}

.nav li {
	padding: 12px 10px;
	float: left;
	height: 26px;
}

.down {
	float: left;
	width: 86px;
	height: 26px;
	display: inline-block;
}

.ios-down {
	background-position: -1655px -536px;
}

.android-down {
	background-position: -430px -671px;
}

.android-down:hover {
	background-position: -1655px -509px;
}

.content>div {
	height: 700px;
}

.content>div::before {
	content: " ";
	display: table;
}

.content .one {
	background: url(../img/bg_1.jpg) no-repeat;
	background-position: -250px 0px;
}

.content .one .logo {
	margin: 136px auto 0px;
	width: 455px;
	height: 51px;
	display: block;
	background-position: -868px 0px;
}

.content .one .logo-text {
	margin: 29px auto;
	width: 412px;
	height: 18px;
	display: block;
	background-position: -890px -81px;
}

.content .one ul {
	margin: 87px auto;
	width: 780px;
}

.content .one li {
	float: left;
	width: 150px;
}

.content .one li>p {
	position: relative;
	width: 173px;
	height: 173px;
	margin: 0px;
	background: url(../img/iconlist_1.png);
}

.content .one li>b {
	width: 173px;
	height: 24px;
	margin: -12px auto 0;
	display: block;
	background: url(../img/iconlist_1.png) no-repeat 11px 0px;
	background-position: -868px -128px;
}

.content .one .logo-ball-blue>p {
	background-position-x: -348px;
	animation: logoBallBlue 1s linear;
	z-index: 1;
}

.content .one .logo-ball-blue>b {
	animation: logoBallBlue 1s linear;
}

.content .one .logo-ball-green>p {
	background-position-x: 0px;
	animation: logoBallGreen 1.75s linear;
	z-index: 2;
}

.content .one .logo-ball-green>b {
	animation: logoBallGreen 1.75s linear;
}

.content .one .logo-ball-yellow>p {
	background-position-x: -174px;
	animation: logoBallYellow 2.5s linear;
	z-index: 3;
}

.content .one .logo-ball-yellow>b {
	animation: logoBallYellow 2.5s linear;
}

.content .one .logo-ball-orange>p {
	background-position-x: -696px;
	animation: logoBallOrange 3.25s linear;
	z-index: 4;
}

.content .one .logo-ball-orange>b {
	animation: logoBallOrange 3.25s linear;
}

.content .one .logo-ball-red>p {
	background-position-x: -522px;
	animation: logoBallRed 4s linear;
	z-index: 5;
}

.content .one .logo-ball-red>b {
	animation: logoBallRedShadow 4s linear;
}

@keyframes logoBallBlue {
	from {
		transform: translate(-200px, 0px);
	}

	to {
		transform: translate(0px, 0px);
	}
}

@keyframes logoBallGreen {
	from {
		transform: translate(-350px, 0px);
	}

	to {
		transform: translate(0px, 0px);
	}
}

@keyframes logoBallYellow {
	from {
		transform: translate(-500px, 0px);
	}

	to {
		transform: translate(0px, 0px);
	}
}

@keyframes logoBallOrange {
	from {
		transform: translate(-650px, 0px);
	}

	to {
		transform: translate(0px, 0px);
	}
}

@keyframes logoBallRed {
	from {
		transform: translate(-800px, 0px) rotate(0deg);
	}

	to {
		transform: translate(0px, 0px) rotate(360deg);
	}
}

@keyframes logoBallRedShadow {
	from {
		transform: translate(-800px, 0px);
	}

	to {
		transform: translate(0px, 0px);
	}
}

.content .two .logo {
	margin: 87px auto 0px;
	width: 360px;
	height: 37px;
	display: block;
	background-position: -592px -657px;
}

.content .two .logo-text {
	margin: 30px auto;
	width: 903px;
	height: 52px;
	display: block;
	background-position: -1444px -590px;
}

.content .two .logo-ball {
	width: 720px;
	height: 180px;
	margin: 55px auto 0;
}

.content .two .logo-ball-second {
	margin-top: 0;
	width: 540px;
}

.content .two .logo-ball>b {
	float: left;
	width: 148px;
	height: 148px;
	margin: 16px;
	display: block;
	background-image: url(../img/iconlist_2.png);
}

.content .two .logo-ball-second>b {
	margin-top: -12px;
}

.content .two .logo-ball>b:hover {
	animation: logoBallScale 300ms linear;
	animation-fill-mode: forwards;
}

.content .two .logo-ball-one {
	background-position: -1656px 0px;
}

.content .two .logo-ball-two {
	background-position: -1818px 0px;
}

.content .two .logo-ball-three {
	background-position: -1980px 0px;
}

.content .two .logo-ball-four {
	background-position: -2142px 0px;
}

.content .two .logo-ball-five {
	background-position: -1747px -149px;
}

.content .two .logo-ball-six {
	background-position: -1909px -149px;
}

.content .two .logo-ball-seven {
	background-position: -2071px -149px;
}

@keyframes logoBallScale {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.2);
	}
}

.content .caption {
	float: right;
	margin: 129px -30px;
}

.content .caption>div:first-child {
	height: 80px;
}

.content .caption>div:first-child::before {
	content: " ";
	display: table;
}

.content .caption>div:first-child>b {
	float: left;
	width: 80px;
	height: 80px;
	display: inline-block;
	background: url(../img/iconlist_3.png) no-repeat;
}

.content .caption>div:first-child>b:hover {
	animation: logoPoint 200ms linear 0s 2;
}
.content .caption>div:first-child>p {
	margin: 10px 10px 10px 90px;
	font-size: 34px;
	font-weight: 700;
	line-height: 60px;
}

.content .caption>div:last-child>p {
	margin: 10px 0;
	color: #787878;
	font-size: 20px;
	line-height: 38px;
	letter-spacing: 0.8px;
}

.content .three {
	background: url(../img/bg_2.jpg) no-repeat;
	background-position: -250px -400px;
}

.content .three .logo-phone {
	float: right;
	width: 253px;
	height: 534px;
	display: inline-block;
	margin-top: 83px;
    margin-right: 190px;
	background: url(../img/iconlist_2.png) no-repeat;
	background-position: -569px 0px;
}

.content .three .logo-phone:hover {
	animation: logoPhoneRight 400ms linear;
	animation-fill-mode: forwards;
}

@keyframes logoPhoneRight {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(20deg);
	}
}

.content .three .caption {
	float: left;
	text-align: right;
	margin: 179px 30px;
}
.content .three .caption>div:first-child>b {
	float: right;
	background-position: 0px 0px;
}

.content .three .caption>div:first-child>p {
	margin: 10px 90px 10px 90px;
	color: #F3CD5C;
}


.content .four {
	margin: 0 auto;
}

.content .four>div {
	width: 962px;
	height: 589px;
	margin: 55px 69px;
	background: url(../img/bg_6.jpg) no-repeat;
}

.content .four .logo-phone {
	float: left;
	width: 253px;
	height: 534px;
	display: inline-block;
	margin-left: 32px;
	background: url(../img/iconlist_5.png) no-repeat;
}

.content .four .logo-phone:hover {
	animation: logoPhoneScale 150ms linear;
	animation-fill-mode: forwards;
}

.content .four .caption>div:first-child>b {
	background-position: -85px 0px;
}

.content .four .caption>div:first-child>p {
	color: #E46468;
}

@keyframes logoPhoneScale {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.05);
	}
}

.content .five {
	background: url(../img/bg_4.jpg);
	background-position: -250px -356px;
}

.content .five .logo-phone {
	float: left;
	width: 253px;
	height: 534px;
	display: inline-block;
	margin-top: 83px;
	margin-left: 370px;
	background: url(../img/iconlist_2.png) no-repeat;
	background-position: -904px 0px;
}

.content .five .logo-phone:hover {
	animation: logoPhoneLeft 400ms linear;
	animation-fill-mode: forwards;
}

@keyframes logoPhoneLeft {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(-20deg);
	}
}
.content .five .caption {
	margin: 179px -60px;
}
.content .five .caption>div:first-child>b {
	background-position: -170px 0px;
}

.content .five .caption>div:first-child>p {
	color: #2EBCE8;
}

.content .six {
	height: 600px;
}

.content .six ul {
	width: 1050px;
	margin: 170px auto;
	height: 260px;
}

.content .six li {
	width: 330px;
	float: left;
	margin: 25px 10px;
}

.content .six b {
	width: 80px;
	height: 80px;
	float: left;
	display: inline-block;
	background: url(../img/iconlist_3.png);
}

.content .six ul div {
	width: 250px;
	height: 80px;
	margin-left: 93px;
}

.content .six p {
	margin: 0;
	width: 250px;
	height: 40px;
}

.content .six p:first-child {
	font-size: 20px;
}

.content .six p:last-child {
	font-size: 16px;
	color: #787878;
}

.content .six b:hover {
	animation: logoPoint 200ms linear 0s 2;
}

@keyframes logoPoint {
	from {
		opacity: 1;
		transform: rotate(0deg);
	}

	20% {
		opacity: 0.8;
		transform: rotate(-20deg);
	}

	50% {
		opacity: 0.5;
		transform: rotate(0deg);
	}

	80% {
		opacity: 0.8;
		transform: rotate(20deg);
	}

	to {
		opacity: 1;
		transform: rotate(0deg);
	}
}

.content .six .logo-point-two b {
	background-position: -85px 0px;
}

.content .six .logo-point-three b {
	background-position: -170px 0px;
}

.content .six .logo-point-four b {
	background-position: 0px -86px;
}

.content .six .logo-point-five b {
	background-position: -85px -86px;
}

.content .six .logo-point-six b {
	background-position: -170px -86px;
}

.content .six li div>p:first-child {
	font-size: 20px;
	font-weight: 700;
}

.content .six .logo-point-one div>p:first-child {
	color: #F3CD5C;
}

.content .six .logo-point-two div>p:first-child {
	color: #E46468;
}

.content .six .logo-point-three div>p:first-child {
	color: #2EBCE8;
}

.content .six .logo-point-four div>p:first-child {
	color: #94C967;
}

.content .six .logo-point-five div>p:first-child {
	color: #F18F54;
}

.content .six .logo-point-six div>p:first-child {
	color: #A89DCB;
}

.foot {
	color: #787878;
	height: 276px;
	background-color: #363636;
}

.foot>div::before {
	content: " ";
	display: table;
}

.foot>div>ul {
	margin: 67px auto 48px;
	width: 786px;
	height: 112px;
}

.foot>div>ul>li {
	margin: 12px 50px 0 0;
	float: left;
	height: 112px;
	width: 110px;
}

.foot>div>ul>li>p {
	margin-top: 0px;
	font-size: 20px;
	font-weight: 700;
}

.foot a {
	color: #787878;
	font-size: 14px;
	text-decoration: none;
}

.foot>div>ul .foot-qrcode {
	margin-right: 0;
	width: 233px;
}

.foot li>b:only-child {
	width: 213px;
	height: 112px;
	display: inline-block;
	background-image: url(../img/iconlist_2.png);
}

.foot .foot-sina>b {
	background-position: 0px -590px;
}

.foot .foot-wechat>b {
	background-position: -214px -590px;
}

.foot .foot-copyright {
	clear: both;
	text-align: center;
}