* {
	-webkit-tap-highlight-color: transparent;
	outline: 0
}

*, blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
	margin: 0;
	padding: 0;
	vertical-align: baseline
}

img {
	border: 0 none;
	vertical-align: top
}

em, i {
	font-style: normal
}

ol, ul {
	list-style: none
}

button, h1, h2, h3, h4, h5, h6, input, select {
	font-size: 100%;
	font-family: inherit
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

a {
	text-decoration: none
}

a, body {
	color: #666
}

body {
	margin: 0 auto;
	min-width: 4.26667rem;
	max-width: 10.24rem;
	width: 100%;
	height: 100%;
	font-size: .18667rem;
	font-family: -apple-system, Helvetica, Microsoft YaHei, Arial, sans-serif;
	line-height: 1.5;
	-webkit-text-size-adjust: 100% !important;
	text-size-adjust: 100% !important;
	-webkit-user-select: none;
	user-select: none
}

input[type=text], textarea {
	-webkit-appearance: none;
	appearance: none
}

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

.hide {
	display: none !important
}

.loading {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 400;
	background-color: #363535
}

.loading .inner {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2.66667rem;
	height: 2.66667rem;
	margin: -1.33333rem 0 0 -1.33333rem;
	border: .04rem solid transparent;
	border-radius: 50%;
	border-top-color: #3498db;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite
}

.loading .inner .before {
	position: absolute;
	top: .06667rem;
	left: .06667rem;
	right: .06667rem;
	bottom: .06667rem;
	border: .04rem solid transparent;
	border-radius: 50%;
	border-top-color: #e74c3c;
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite
}

.loading .inner .after {
	position: absolute;
	top: .2rem;
	left: .2rem;
	right: .2rem;
	bottom: .2rem;
	border: .04rem solid transparent;
	border-radius: 50%;
	border-top-color: #f9c922;
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite
}

.loading .text {
	width: 1.33333rem;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -.4rem 0 0 -.66667rem;
	line-height: .8rem;
	font-size: .4rem;
	text-align: center;
	color: #eadcdb
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}

}

@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}

}

@-webkit-keyframes play{
	0%{
		-webkit-transform: scale(1,1);
	}
	100%{
		-webkit-transform: scale(1.2,1.2);
	}
}

@keyframes play{
	0%{
		transform: scale(1,1);
	}
	100%{
		transform: scale(1.2,1.2);
	}
}

@-webkit-keyframes play2{
	0%{
		-webkit-transform: scale(1,1);
	}
	100%{
		-webkit-transform: scale(1.1,1.1);
	}
}

@keyframes play2{
	0%{
		transform: scale(1,1);
	}
	100%{
		transform: scale(1.1,1.1);
	}
}

.main {
	position: relative;
	width: 100%;
	height: 141.69333rem;
	background-image: url(../img/back.jpg);
	-webkit-background-size: cover;
	background-size: cover
}

.banner div {
	position: absolute;
	width: 2.21333rem;
	height: 2.18667rem;
	left: 3.89333rem
}

.banner span {
	position: absolute;
	width: 1rem;
	height: 1rem;
	left: 1.4rem
}

.banner .playing {
	background: url(../img/play.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	-webkit-animation: play 1s linear 0s infinite alternate both;
	animation: play 1s linear 0s infinite alternate both;
}

.banner span.playing {
	background: url(../img/play2.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	-webkit-animation: play2 0.8s linear 0.4s infinite alternate both;
	animation: play2 0.8s linear 0.4s infinite alternate both;
}

.banner .pause {
	background: url(../img/pause.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%
}

.banner span.pause {
	background: url(../img/pause2.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%
}

.first {
	top: 22.4rem
}

.sec {
	top: 44.8rem
}

.third {
	top: 68.7rem
}

.forth {
	top: 92.4rem
}

.fifth {
	top: 115.5rem
}
.sixth {
	top: 30.4rem;
}
.seventh{
	top: 53.5rem;
}
.eighth{
	top: 76.8rem;
}
.ninth{
	top: 100.5rem;
}
.tenth{
	top: 123.6rem;
}