html, body {
	width: 100%;
	height: 100%;
	font-family: "Microsoft YaHei", "Microsoft JhengHei";
	touch-action: none;
}
/*loading*/
.x {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
}
.y {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
}
.xy {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
}
.posa {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.loading {
	height: 100%;
	color: #fff;
	background-color: #005286;
	z-index: 999;
}
.load-content {
	width: 3.3rem;
	height: 0.3rem;
}
.cell {
	width: 100%;
	height: 100%;
	border: 0.02rem solid #fff;
	background-color: #005286;
	box-sizing: border-box;
	border-radius: 0.1rem;
	overflow: hidden;
}
.progress {
	width: 100%;
	height: 100%;
	background-color: #fff;
	-webkit-transform: scaleX(0);
	-webkit-transform-origin: 0 0;
}
.ideal {
	position: absolute;
	left: 50%;
	width: 3rem;
	height: 1.5rem;
	top: -1.2rem;
	overflow: hidden;
	-webkit-transform: translate(-50%, 0) scale(0.7);
	z-index: -1;
}
.ideal:before, .ideal:after, .head:before, .head, .head:after, .hat {
	background-color: #fff;
}
.head {
	border: 1px solid #a6a6a6;
}
.ideal:before, .ideal:after {
	content: '';
	position: absolute;
	bottom: -0.3rem;
	width: 0.4rem;
	height: 0.5rem;
	border-radius: 40%;
	-webkit-animation: hand-ani 4s ease-in 0s infinite;
}
.ideal:before {
	left: 0.2rem;
}
.ideal:after {
	right: 0.2rem;
}
.head-wrap {
	width: 1.6rem;
	height: 1.5rem;
	position: relative;
	top: 0.15rem;
	left: 50%;
	margin-left: -0.8rem;
	-webkit-animation: head-ani 4s ease-out 0s infinite;
}
.head {
	width: 100%;
	height: 100%;
	padding: 0.1rem;
	box-sizing: border-box;
	border-radius: 50%;
	background-color: #fff;
}
.head:before, .head:after {
	content: '';
	position: absolute;
	bottom: 0.42rem;
	width: 0.3rem;
	height: 0.6rem;
	z-index: -1;
	border-radius: 35%;
	-webkit-transform: translateY(-0rem);
}
.head:before {
	left: -0.1rem;
	-webkit-animation: left-ear-ani 4s 0s infinite;
}
.head:after {
	right: -0.1rem;
	-webkit-animation: right-ear-ani 4s 0s infinite;
}
.face {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #005286;
	border-radius: 50%;
	-webkit-animation: face-ani 4s 0s infinite;
}
.face:before, .face:after {
	content: '';
	position: absolute;
	bottom: 0.45rem;
	width: 0.14rem;
	height: 0.25rem;
	background-color: #fff;
	border-radius: 35%;
	-webkit-animation: eye-ani 4s 0s infinite;
}
.face:before {
	left: 25%;
}
.face:after {
	right: 25%;
}
.hat {
	position: absolute;
	top: -0.05rem;
	left: 50%;
	width: 0.6rem;
	height: 0.4rem;
	border-radius: 35%;
	margin-left: -0.3rem;
	z-index: -1;
}
@-webkit-keyframes head-ani {
	0%, 20% {
		-webkit-transform: translateY(100%);
	}
	25%, 35% {
		-webkit-transform: translateY(60%);
	}
	40%, 90% {
		-webkit-transform: translateY(0);
	}
	92%, 100% {
		-webkit-transform: translateY(100%);
	}
}
@-webkit-keyframes hand-ani {
	0%, 1% {
		-webkit-transform: translate(0, 100%);
	}
	10%, 12% {
		-webkit-transform: translate(0, -4%);
	}
	15%, 93% {
		-webkit-transform: translate(0, 0);
	}
	96%, 100% {
		-webkit-transform: translate(0, 100%);
	}
}
@-webkit-keyframes eye-ani {
	0%, 45% {
		-webkit-transform: scaleY(1);
	}
	47%, 48% {
		-webkit-transform: scaleY(0.1);
	}
	50%, 65% {
		-webkit-transform: scaleY(1);
	}
	67%, 68% {
		-webkit-transform: scaleY(0.1);
	}
	70%, 82% {
		-webkit-transform: scaleY(1);
	}
	84%, 85% {
		-webkit-transform: scaleY(0.1);
	}
	86%, 100% {
		-webkit-transform: scaleY(1);
	}
}
@-webkit-keyframes face-ani {
	0%, 50% {
		-webkit-transform: translate(0, 0);
	}
	57%, 64% {
		-webkit-transform: translate(-5%, 0);
	}
	71%, 78% {
		-webkit-transform: translate(5%, 0);
	}
	85%, 100% {
		-webkit-transform: translate(0, 0);
	}
}
@-webkit-keyframes left-ear-ani {
	0%, 50% {
		-webkit-transform: translate(0, 0);
	}
	57%, 64% {
		-webkit-transform: translate(20%, 0);
	}
	71%, 78% {
		-webkit-transform: translate(-10%, 0);
	}
	85%, 100% {
		-webkit-transform: translate(0, 0);
	}
}
@-webkit-keyframes right-ear-ani {
	0%, 50% {
		-webkit-transform: translate(0, 0);
	}
	57%, 64% {
		-webkit-transform: translate(10%, 0);
	}
	71%, 78% {
		-webkit-transform: translate(-20%, 0);
	}
	85%, 100% {
		-webkit-transform: translate(0, 0);
	}
}
@-webkit-keyframes lightLoop {
	0% {
		-webkit-transform: scale(1, 1);
	}
	100% {
		-webkit-transform: scale(1.2, 3);;
	}
}
.progress-num {
	position: absolute;
	top: 0;
	left: 104%;
	height: 100%;
	line-height: 0.3rem;
	font-size: 0.2rem;
}
.loading p {
	text-align: center;
	position: absolute;
	top: 0.5rem;
	left: 0;
	width: 100%;
	font-size: 0.24rem;
}
/*loading*/
/*cover*/
.cover {
	height: 100%;
	background-color: #005286;
	z-index: 998;
	display: none;
}
.cover .iphone {
	width: 2.9rem;
	height: 4.36rem;
	position: absolute;
	left: 50%;
	top: 40%;
	margin-top: -2.18rem;
	margin-left: -1.45rem;
	background: url(../images/phone.png) no-repeat;
	background-size: 100% 100%;
	animation: zhuan 1.5s 0.3s infinite;
	-webkit-animation: zhuan 1.5s 0.3s infinite
}
.cover p {
	position: absolute;
	top: 65%;
	left: 0;
	text-align: center;
	width: 100%;
	color: #fff;
	font-size: .5rem;
	line-height: 1.5;
}
@keyframes zhuan {
	0% {
		transform: rotate(-90deg)
	}
	50% {
		transform: rotate(0deg)
	}
	100% {
		transform: rotate(-90deg)
	}
}
@-webkit-keyframes zhuan {
	0% {
		-webkit-transform: rotate(-90deg)
	}
	50% {
		-webkit-transform: rotate(0deg)
	}
	100% {
		-webkit-transform: rotate(-90deg)
	}
}
@media screen and (orientation:landscape) {
	.cover {
		display: block
	}
}
/*cover*/
/*footer*/
footer {
	width: 100%;
	text-align: center;
	color: #096c65;
	line-height: 22px;
	font-size: 12px;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 200;
	padding: 6px 0;
}
footer img {
	vertical-align: text-bottom;
	margin-right: 5px;
	width: 12px;
	display: inline-block;
}
footer.white{
    color: #ffffff;
}
/*footer*/
/*music*/
.media-wrap {
	position: absolute;
	width: 0.6rem;
	height: 0.6rem;
	z-index: 102;
	border-radius: 50%;
	top: 0.6rem;
	right: 0.4rem;
}
.media-wrap img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.media-wrap .music_off {
	display: none;
}
@-webkit-keyframes music {
	0%, 50%, 100% {
		-webkit-transform: rotate(0deg)
	}
	25% {
		-webkit-transform: rotate(36deg)
	}
	75% {
		-webkit-transform: rotate(-36deg)
	}
}
.media-wrap.on {
	-webkit-animation: music 1.2s linear infinite;
	background-position: 0 0;
}
/* 公用 */
img{display:block; margin: 0 auto; height: 100%; width: auto;}
.imgW{display:block;width:100%; height: auto;}
*{ box-sizing: border-box; -webkit-box-sizing: border-box; }
/* 翻页图片动画 */
.arrow{
	position:absolute;bottom:20px;left:50%; margin-left: -.5rem; height:1rem; width: 1rem;z-index:200;
	-webkit-animation:upDown 2s both ease-out 1s infinite;
	animation:upDown 2s both ease-out 1s infinite;
}
@-webkit-keyframes upDown{
	0%{-webkit-transform:translateY(8px);opacity:0;}
	50%{-webkit-transform:translateY(0px);opacity:1;}
	100%{-webkit-transform:translateY(-8px);opacity:0;}
}
/* 页面动画end */

header{
	width: 100%;
	height: 1.14rem;
	position: relative;
	z-index: 95;
}
header a{
	position: relative;
	display: block;
	height: 100%;
}
.logo{
	position: absolute;
	left: .4rem;
    top: 0;
    height: 100%;
}
.home{
	position: absolute;
	right: .4rem;
	bottom: 0;
    height: .67rem;
}
.wrapper{
    position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.scroller{
    position: relative;
	width: 100%;
	height: auto;
}