@charset "UTF-8";







/*music*/



.media-wrap {



	position: absolute;



	width: 0.6rem;



	height: 0.6rem;



	z-index: 102;



	border-radius: 50%;



	top: 0.3rem;



	right:1.1rem;



}







.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;



}







/*music*/



/*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: fixed;



	top: 0;



	left: 0;



	width: 100%;



}







.loading {



	height: 100%;



	color: #fff;



	background-color: #005082;



	z-index: 99999999999999;



}







.loading .load-content {



	width: 3.3rem;



	height: 0.3rem;



}







.loading .cell {



	width: 100%;



	height: 100%;



	border: 1px solid #fff;



	background-color: #005082;



	box-sizing: border-box;



	border-radius: 0.1rem;



	overflow: hidden;



	-webkit-transform: translateZ(0);



}







.loading .progress {



	width: 0;



	height: 100%;



	background-color: #fff;



	/* -webkit-transform: scaleX(0); */



	-webkit-transform-origin: 0 0;



}







.loading .ideal {



	position: absolute;



	left: 50%;



	width: 3rem;



	height: 2rem;



	top: -1.7rem;



	overflow: hidden;



	-webkit-transform: translate(-50%, 0) scale(0.7);



	z-index: -1;



}







.loading .ideal:before,



.loading .ideal:after,



.loading .head:before,



.loading .head,



.loading .head:after,



.loading .hat {



	background-color: #fff;



}







.loading .head {



	border: 1px solid #a6a6a6;



}







.loading .ideal:before,



.loading .ideal:after {



	content: '';



	position: absolute;



	bottom: -0.2rem;



	width: 0.4rem;



	height: 0.4rem;



	border-radius: 50%;



	-webkit-animation: hand-ani 4s ease-in 0s infinite;



}







.loading .ideal:before {



	left: 0.2rem;



}







.loading .ideal:after {



	right: 0.2rem;



}







.loading .head-wrap {



	width: 1.6rem;



	height: 1.5rem;



	position: absolute;



	bottom: -0.25rem;



	left: 50%;



	margin-left: -0.8rem;



	-webkit-animation: head-ani 4s ease-out 0s infinite;



}







.loading .head {



	width: 100%;



	height: 100%;



	padding: 0.1rem;



	box-sizing: border-box;



	border-radius: 50%;



	background-color: #fff;



}







.loading .head:before,



.loading .head:after {



	content: '';



	position: absolute;



	bottom: 0.38rem;



	width: 0.8rem;



	height: 0.8rem;



	z-index: -1;



	border-radius: 50%;



	-webkit-transform: translateY(-0rem);



}







.loading .head:before {



	left: -0.1rem;



	-webkit-animation: left-ear-ani 4s 0s infinite;



}







.loading .head:after {



	right: -0.1rem;



	-webkit-animation: right-ear-ani 4s 0s infinite;



}







.loading .face {



	width: 100%;



	height: 100%;



	position: relative;



	background-color: #005082;



	border-radius: 50%;



	-webkit-animation: face-ani 4s 0s infinite;



}







.loading .face:before,



.loading .face:after {



	content: '';



	position: absolute;



	bottom: 0.5rem;



	width: 0.2rem;



	height: 0.2rem;



	background-color: #fff;



	border-radius: 50%;



	-webkit-animation: eye-ani 4s 0s infinite;



}







.loading .face:before {



	left: 25%;



}







.loading .face:after {



	right: 25%;



}







.loading .hat {



	position: absolute;



	top: -0.06rem;



	left: 50%;



	width: 0.44rem;



	height: 0.44rem;



	border-radius: 50%;



	margin-left: -0.22rem;



	z-index: -1;



}







/* .loading .hat:before {



	content: '';



	position: absolute;



	bottom: 100%;



	left:50%;



	width: 0.04rem;



	height: 0.27rem;



	margin-left: -0.02rem;



	background-color: #fff;



} */



@-webkit-keyframes head-ani {







	0%,



	20% {



		-webkit-transform: translateY(110%);



	}







	25%,



	35% {



		-webkit-transform: translateY(60%);



	}







	40%,



	90% {



		-webkit-transform: translateY(0);



	}







	92%,



	100% {



		-webkit-transform: translateY(110%);



	}



}







@-webkit-keyframes hand-ani {







	0%,



	1% {



		-webkit-transform: translate(0, 110%);



	}







	10%,



	12% {



		-webkit-transform: translate(0, -4%);



	}







	15%,



	93% {



		-webkit-transform: translate(0, 0);



	}







	96%,



	100% {



		-webkit-transform: translate(0, 110%);



	}



}







@-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(6%, 0);



	}







	71%,



	78% {



		-webkit-transform: translate(-2%, 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(2%, 0);



	}







	71%,



	78% {



		-webkit-transform: translate(-6%, 0);



	}







	85%,



	100% {



		-webkit-transform: translate(0, 0);



	}



}







@-webkit-keyframes lightLoop {



	0% {



		-webkit-transform: scale(1, 1);



	}







	100% {



		-webkit-transform: scale(1.2, 3);



		;



	}



}







.loading .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;



	color: #fff;



}







/*loading*/



/*cover*/



.cover {



	height: 100%;



	background-color: #005082;



	z-index: 9999999999999;



	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*/