body {
	margin: 0;
	font-family: 'Poiret One', Helvetica, Georgia, Microsoft YaHei;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow:hidden;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
	body {
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		position: absolute;
		left: 100%
	}
}
@font-face {
	font-family: 'Poiret One', Microsoft YaHei;
}
@-webkit-keyframes walk {
	0% {
		-webkit-transform: rotate(30deg)
	}
	50% {
		-webkit-transform: rotate(-30deg)
	}
	100% {
		-webkit-transform: rotate(30deg)
	}
}
@keyframes walk {
	0% {
		transform: rotate(30deg)
	}
	50% {
		transform: rotate(-30deg)
	}
	100% {
		transform: rotate(30deg)
	}
}
@-webkit-keyframes ribbonup {
	0% {
		-webkit-transform: rotate(10deg)
	}
	50% {
		-webkit-transform: rotate(25deg);
		border-top-width: 2px
	}
	100% {
		-webkit-transform: rotate(10deg)
	}
}
@keyframes ribbonup {
	0% {
		transform: rotate(10deg)
	}
	50% {
		transform: rotate(20deg);
		border-top-width: 2px
	}
	100% {
		transform: rotate(10deg)
	}
}
@-webkit-keyframes ribbondown {
	0% {
		-webkit-transform: rotate(-20deg)
	}
	50% {
		-webkit-transform: rotate(-40deg)
	}
	100% {
		-webkit-transform: rotate(-20deg)
	}
}
@keyframes ribbondown {
	0% {
		transform: rotate(-20deg)
	}
	50% {
		transform: rotate(-40deg)
	}
	100% {
		transform: rotate(-20deg)
	}
}
@-webkit-keyframes fly {
	0% {
		-webkit-transform: translate3d(0, 0, 0)
	}
	50% {
		-webkit-transform: translate3d(0, 20px, 0)
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0)
	}
}
@keyframes fly {
	0% {
		transform: translate3d(0, 0, 0)
	}
	50% {
		transform: translate3d(0, -20px, 0)
	}
	100% {
		transform: translate3d(0, 0, 0)
	}
}
@-webkit-keyframes shaking {
	0% {
		-webkit-transform: translate3d(0, 0, 0)
	}
	50% {
		-webkit-transform: translate3d(0, 3px, 0)
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0)
	}
}
@keyframes shaking {
	0% {
		transform: translate3d(0, 0, 0)
	}
	50% {
		transform: translate3d(0, 3px, 0)
	}
	100% {
		transform: translate3d(0, 0, 0)
	}
}
@-webkit-keyframes bounce {
	0%, 100% {
		-webkit-transform: translate3d(0, 0, 0)
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: translate3d(0, -5px, 0)
	}
	20%,
	40%,
	60%,
	80% {
		-webkit-transform: translate3d(0, 5px, 0)
	}
}
@keyframes bounce {
	0%, 100% {
		transform: translate3d(0, 0, 0)
	}
	20%,
	60% {
		transform: translate3d(0, -3px, 0)
	}
	40%,
	80% {
		transform: translate3d(0, 3px, 0)
	}
}
@-webkit-keyframes hinge {
	0% {
		-webkit-transform: rotate3d(0, 0, 0, 0deg)
	}
	20%,
	60% {
		-webkit-transform: rotate3d(0, 0, 1, 80deg)
	}
	40%,
	80% {
		-webkit-transform: rotate3d(0, 0, 1, 60deg)
	}
	100% {
		-webkit-transform: translate3d(0, 700px, 0)
	}
}
@keyframes hinge {
	0% {
		transform: rotate3d(0, 0, 0, 0deg)
	}
	20%,
	60% {
		transform: rotate3d(0, 0, 1, 80deg)
	}
	40%,
	80% {
		transform: rotate3d(0, 0, 1, 60deg)
	}
	100% {
		transform: translate3d(0, 700px, 0)
	}
}
@-webkit-keyframes arrow {
	0% {
		-webkit-transform: translate3d(0, 0, 0)
	}
	50% {
		-webkit-transform: translate3d(0, 15px, 0)
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0)
	}
}
@keyframes arrow {
	0% {
		transform: translate3d(0, 0, 0)
	}
	50% {
		transform: translate3d(0, 15px, 0)
	}
	100% {
		transform: translate3d(0, 0, 0)
	}
}
.hero1 {
	display: none;
	border-radius: 5px;
	background: #fff;
	border: 3px solid #000;
	position: absolute;
	left: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.hero1 .ba {
	width: 3px;
	height: 9px;
	border-radius: 10px;
	background: #000;
	position: absolute;
	top: 2px
}
.hero1 .ba.left {
	-webkit-transform: rotate(40deg);
	transform: rotate(40deg);
	left: 2px
}
.hero1 .ba.right {
	-webkit-transform: rotate(-40deg);
	transform: rotate(-40deg);
	right: 2px
}
.hero1 .mouse {
	height: 5px;
	border: 3px solid #000;
	position: absolute;
	top: 11px;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0)
}
.hero1 .foot {
	position: absolute;
	width: 3px;
	height: 10px;
	bottom: -13px;
	background: #000
}
.hero1 .foot.left {
	left: 2px
}
.hero1 .foot.right {
	right: 2px
}
.hero2 {
	display: none;
	border-radius: 5px;
	background: #000;
	position: absolute;
	left: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.hero2 .hat {
	width: 20px;
	background: #ffcae6;
	height: 10px;
	position: absolute;
	left: -1px;
	top: -1px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	z-index: 2
}
.hero2 .eye {
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	right: 2px;
	top: 8px
}
.hero2 .ear-left {
	background: #ff97c8;
	width: 8px;
	height: 20px;
	z-index: 1;
	top: -12px;
	left: 6px;
	position: absolute;
	border-radius: 100%;
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg)
}
.hero2 .ear-right {
	background: #ff97c8;
	width: 8px;
	height: 20px;
	z-index: 3;
	top: -13px;
	left: -6px;
	position: absolute;
	border-radius: 100%;
	-webkit-transform: rotate(-40deg);
	transform: rotate(-40deg)
}
.hero2 .nose {
	background: #000;
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	right: -4px;
	top: 10px
}
.hero2 .hand {
	background: #000;
	position: absolute;
	border-radius: 10px;
	width: 3px;
	height: 12px;
	top: 10px;
	left: 0;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg)
}
.hero2 .foot {
	position: absolute;
	width: 3px;
	height: 5px;
	bottom: -5px;
	border-radius: 3px;
	background: #000
}
.hero2 .foot.left {
	left: 4px
}
.hero2 .foot.right {
	right: 4px
}
.hero3 {
	display: none;
	border-radius: 10px;
	background: #000;
	position: absolute;
	left: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.hero3 .hat-up {
	position: absolute;
	background: #843cc3;
	width: 18px;
	height: 5px;
	border-radius: 50%;
	top: -3px;
	left: 1px
}
.hero3 .hat-down {
	position: absolute;
	background: #843cc3;
	width: 28px;
	height: 7px;
	border-radius: 60%;
	left: -4px
}
.hero3 .eye {
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	right: 2px;
	top: 8px
}
.hero3 .hand {
	position: absolute;
	width: 2px;
	background: #000;
	height: 10px;
	-webkit-transform: rotate(50deg);
	transform: rotate(50deg);
	top: 8px;
	left: 0
}
.hero3 .foot {
	position: absolute;
	width: 2px;
	height: 15px;
	bottom: -14px;
	border-radius: 3px;
	background: #000
}
.hero3 .foot.left {
	left: 4px
}
.hero3 .foot.right {
	right: 4px
}
.hero4 {
	display: none;
	border-radius: 5px;
	position: absolute;
	background: #000;
	left: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.hero4 .hat {
	width: 20px;
	height: 4px;
	background: #843cc3;
	position: absolute;
	left: -1px;
	top: 3px
}
.hero4 .ribbon-down,
.hero4 .ribbon-up {
	border-top-color: #843cc3
}
.hero4 .eye {
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	right: 1px;
	top: 7px
}
.hero4 .eyeball {
	position: absolute;
	background: #000;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	right: 1px
}
.hero4 .mouse {
	width: 33px;
	height: 31px;
	border-radius: 50%;
	box-shadow: 4px 8px 0 -7px #fff;
	position: absolute;
	top: -16px;
	left: -4px;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg)
}
.hero4 .body {
	position: absolute;
	background: #000;
	border-radius: 40%
}
.hero4 .foot {
	position: absolute;
	width: 3px;
	height: 2px;
	bottom: -7px;
	background: #000
}
.hero4 .foot.left {
	left: 2px
}
.hero4 .foot.right {
	right: 0
}
.hero5 {
	display: none;
	background: #000;
	position: absolute;
	border-radius: 5px;
	left: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.hero5 .hair-up {
	border-radius: 50%;
	position: absolute;
	background: #000;
	top: -10px;
	left: -4px;
	-webkit-transform: rotate(-18deg);
	transform: rotate(-18deg)
}
.hero5 .hair-down {
	border-radius: 70%;
	position: absolute;
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);
	background: #000;
	top: -6px;
	left: -7px
}
.hero5 .eye {
	width: 3px;
	height: 3px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	right: 2px;
	top: 8px
}
.hero5 .ribbon {
	width: 0;
	height: 0;
	border-top: 3px solid transparent;
	border-right: 20px solid orange;
	border-bottom: 2px solid transparent;
	-webkit-transform: translate3d(-4px, 3px, 0) rotate(-20deg);
	transform: translate3d(-4px, 3px, 0) rotate(-20deg)
}
.hero5 .hand {
	position: absolute;
	background: #000;
	width: 2px;
	height: 10px;
	top: 10px;
	-webkit-transform: rotate(50deg);
	transform: rotate(50deg)
}
.hero5 .foot {
	position: absolute;
	width: 2px;
	height: 10px;
	bottom: -10px;
	border-radius: 3px;
	background: #000
}
.hero5 .foot.left {
	left: 4px
}
.hero5 .foot.right {
	right: 4px
}
.hero7 {
	display: none;
	border-radius: 5px;
	background: #004b79;
	position: absolute;
	left: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.hero7 .hat {
	width: 0;
	height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-bottom: 12px solid #fb0a2a;
	position: absolute;
	top: -11px
}
.hero7 .eye {
	width: 7px;
	height: 6px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	right: 2px;
	top: 8px
}
.hero7 .eyeball {
	position: absolute;
	background: #000;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	right: 1px;
	top: 1px
}
.hero7 .nose {
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid #ffd900;
	position: absolute;
	right: -6px;
	top: 9px
}
.hero7 .foot {
	position: absolute;
	width: 2px;
	height: 15px;
	bottom: -15px;
	border-radius: 3px;
	background: #004b79
}
.hero7 .foot.left {
	left: 4px
}
.hero7 .foot.right {
	right: 4px
}
.hero8 {
	display: none;
	border-radius: 5px;
	background: #000;
	position: absolute;
	left: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.hero8 .hat {
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-bottom: 14px solid #68217a;
	position: absolute;
	top: -11px;
	left: -4px
}
.hero8 .eye {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	right: 3px;
	top: 6px
}
.hero8 .mouse {
	width: 7px;
	height: 3px;
	background: #fff;
	border-radius: 4px;
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
	position: absolute;
	right: 0;
	top: 20px
}
.hero8 .sword {
	width: 12px;
	height: 4px;
	background: #21759b;
	border-radius: 5px;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
	position: absolute;
	top: 12px;
	left: -10px;
	z-index: -1
}
.hero8 .foot {
	position: absolute;
	width: 5px;
	height: 9px;
	bottom: -8px;
	border-radius: 3px;
	background: #000
}
.hero8 .foot.left {
	left: 2px
}
.hero8 .foot.right {
	right: 2px
}
.hero9 {
	display: none;
	position: absolute;
	left: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.hero9 .body {
	border: 1px solid #000;
	background: #fff
}
.hero9 .head {
	position: absolute;
	border: 1px solid #000;
	background: #fff;
	top: -9px;
	left: 3px
}
.hero9 .eye-left {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #000;
	left: 3px;
	top: 6px;
	position: absolute
}
.hero9 .eye-right {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #000;
	right: 3px;
	top: 6px;
	position: absolute
}
.hero9 .eye-line {
	width: 10px;
	height: 1px;
	background: #000;
	position: absolute;
	top: 7px;
	left: 3px
}
.hero9 .hand {
	border-radius: 5px/10px;
	background: #fff;
	position: absolute;
	border: 1px solid #000;
	top: 7px;
	z-index: -1
}
.hero9 .hand.left {
	left: -4px;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg)
}
.hero9 .hand.right {
	right: -6px;
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg)
}
.hero9 .heart {
	height: 5px;
	background: #fff;
	border: 1px solid #6441a5;
	position: absolute;
	top: 10px
}
.hero9 .foot {
	width: 5px;
	height: 8px;
	bottom: -8px;
	background: #fff;
	border: 1px solid #000;
	border-radius: 5px/8px;
	position: absolute;
	z-index: -1
}
.hero9 .foot.left {
	left: 3px
}
.hero9 .foot.right {
	right: 1px
}
.hero10 {
	display: none;
	border-radius: 5px;
	background: #fe7a15;
	position: absolute;
	left: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.hero10 .leaf {
	width: 0;
	height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 8px solid #0f0;
	position: absolute;
	top: -6px
}
.hero10 .leaf.left {
	-webkit-transform: rotate(-50deg);
	transform: rotate(-50deg);
	left: 1px
}
.hero10 .leaf.right {
	-webkit-transform: rotate(50deg);
	transform: rotate(50deg);
	right: 1px
}
.hero10 .ball1 {
	width: 8px;
	height: 8px;
	background: #ffe100;
	border-radius: 50%;
	position: absolute;
	top: -8px;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0)
}
.hero10 .ball2 {
	width: 5px;
	height: 5px;
	background: #ffe100;
	border-radius: 50%;
	position: absolute;
	top: -13px;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0)
}
.hero10 .eye {
	width: 8px;
	height: 9px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	right: 2px;
	top: 5px
}
.hero10 .eyeball {
	position: absolute;
	background: #000;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	right: 1px;
	top: 3px
}
.hero10 .mouse {
	background: #fd0;
	position: absolute;
	right: 0;
	bottom: 4px
}
.hero10 .foot {
	position: absolute;
	width: 3px;
	height: 7px;
	bottom: -7px;
	border-radius: 3px;
	background: #fe7a15
}
.hero10 .foot.left {
	left: 2px
}
.hero10 .foot.right {
	right: 2px
}
.hero11 {
	display: none;
	border-radius: 5px;
	background: #000;
	position: absolute;
	left: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.hero11 .hat {
	width: 20px;
	height: 4px;
	background: red;
	position: absolute;
	left: -1px;
	top: 5px
}
.hero11 .ribbon-down,
.hero11 .ribbon-up {
	border-top-color: red
}
.hero11 .eye {
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	right: 2px;
	top: 8px
}
.hero11 .foot {
	position: absolute;
	width: 3px;
	height: 5px;
	bottom: -5px;
	border-radius: 3px;
	background: #000
}
.hero11 .foot.left {
	left: 4px
}
.hero11 .foot.right {
	right: 4px
}
.hero12 {
	display: none;
	position: absolute;
	left: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.hero12 .body {
	background: #136ad5;
	border-radius: 50%;
	position: absolute;
	border: 1px solid #000;
	box-sizing: border-box
}
.hero12 .inside {
	border-radius: 50%;
	position: absolute;
	border: 1px solid #000;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	background: #fff
}
.hero12 .pocket {
	width: 6px;
	height: 4px;
	top: 8px;
	position: absolute;
	border: 1px solid #000;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0)
}
.hero12 .head {
	background: #136ad5;
	border-radius: 50%;
	position: absolute;
	border: 1px solid #000;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0);
	box-sizing: border-box;
	z-index: 10
}
.hero12 .face {
	bottom: 0;
	background: #fff;
	border-radius: 50%;
	border: 1px solid #000;
	position: absolute;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0)
}
.hero12 .eye {
	width: 4px;
	height: 8px;
	top: -4px;
	border: 1px solid #000;
	background: #fff;
	position: absolute;
	border-radius: 50%
}
.hero12 .eye.left {
	left: 4px
}
.hero12 .eye.left .eyeball {
	right: 0
}
.hero12 .eye.right {
	right: 4px
}
.hero12 .eye.right .eyeball {
	left: 0
}
.hero12 .eye .eyeball {
	width: 2px;
	height: 2px;
	top: 3px;
	position: absolute;
	background: #000
}
.hero12 .nose {
	width: 4px;
	height: 4px;
	top: 6px;
	border: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	background: red;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0)
}
.hero12 .nose-line {
	width: 1px;
	height: 8px;
	top: 12px;
	background: #000;
	position: absolute;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0);
	z-index: 10
}
.hero12 .mouse {
	height: 5px;
	background: #fff;
	border: 1px solid #000;
	border-top: none;
	bottom: 2px;
	position: absolute;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0)
}
.hero12 .m {
	height: 1px;
	background: #000;
	position: absolute;
	z-index: 10
}
.hero12 .m.m1,
.hero12 .m.m2,
.hero12 .m.m3 {
	right: 15px
}
.hero12 .m.m4,
.hero12 .m.m5,
.hero12 .m.m6 {
	left: 15px
}
.hero12 .m.m1 {
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
	top: 7px
}
.hero12 .m.m2,
.hero12 .m.m5 {
	top: 11px
}
.hero12 .m.m3 {
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);
	top: 15px
}
.hero12 .m.m4 {
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);
	top: 7px
}
.hero12 .m.m6 {
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
	top: 15px
}
.hero12 .hand {
	width: 5px;
	height: 5px;
	top: 7px;
	position: absolute;
	background: #136ad5;
	border: 1px solid #000;
	border-radius: 50%;
	z-index: -1
}
.hero12 .hand.left {
	left: -5px
}
.hero12 .hand.right {
	right: -5px
}
.hero12 .foot {
	width: 5px;
	height: 5px;
	bottom: -4px;
	background: #136ad5;
	border: 1px solid #000;
	border-radius: 80%;
	position: absolute;
	z-index: -1
}
.hero12 .foot.left {
	left: 3px
}
.hero12 .foot.right {
	right: 3px
}
.hero13 {
	display: none;
	position: absolute;
	left: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.hero13 .head {
	border-radius: 20px 20px 16px 16px;
	border: 1px solid #000;
	background: #fff;
	right: -3px;
	top: -22px;
	position: absolute;
	z-index: 10
}
.hero13 .head .hat-top {
	width: 16px;
	height: 6px;
	top: -12px;
	background: #fff;
	border: 1px solid #000;
	position: absolute;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0)
}
.hero13 .head .dot {
	width: 6px;
	height: 6px;
	border: 1px solid #000;
	background: #ff0;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	box-sizing: border-box
}
.hero13 .head .hat {
	width: 16px;
	height: 5px;
	background: red;
	top: -4px;
	position: absolute;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0)
}
.hero13 .head .half {
	border-radius: 10px 10px 0 0;
	background: #000;
	top: 0;
	position: absolute
}
.hero13 .head .eye {
	width: 6px;
	height: 7px;
	border-radius: 50%;
	background: #ff0;
	top: 5px;
	position: absolute
}
.hero13 .head .eye.left {
	left: 6px
}
.hero13 .head .eye.right {
	right: 6px
}
.hero13 .head .eyeball {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #000;
	top: 2px;
	left: 1px;
	position: absolute
}
.hero13 .head .eyeball2 {
	width: 1px;
	height: 2px;
	background: #fff;
	position: absolute;
	border-radius: 50%;
	top: 1px;
	left: 1px
}
.hero13 .head .nose {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #fff;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0)
}
.hero13 .head .mouse {
	width: 8px;
	height: 3px;
	border: 1px solid #000;
	border-top: none;
	border-radius: 0 0 5px 5px;
	background: #fff;
	position: absolute;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0)
}
.hero13 .head .m {
	height: 1px;
	background: #000;
	position: absolute
}
.hero13 .head .m.left {
	left: -6px;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg)
}
.hero13 .head .m.right {
	right: -6px;
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg)
}
.hero13 .head .ear {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid #000;
	top: -4px;
	position: absolute
}
.hero13 .head .ear.left {
	left: -4px;
	-webkit-transform: rotate(-40deg);
	transform: rotate(-40deg)
}
.hero13 .head .ear.right {
	right: -4px;
	-webkit-transform: rotate(40deg);
	transform: rotate(40deg)
}
.hero13 .body {
	background: #000;
	border-radius: 5px;
	position: absolute
}
.hero13 .body .strip1 {
	height: 3px;
	background: #fff;
	border-radius: 5px;
	position: absolute;
	bottom: 7px
}
.hero13 .body .strip2 {
	height: 3px;
	background: #fff;
	border-radius: 5px;
	position: absolute;
	bottom: 14px;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg)
}
.hero13 .body .hand {
	width: 5px;
	height: 20px;
	background: #000;
	top: -1px;
	position: absolute;
	z-index: -1
}
.hero13 .body .hand.left {
	left: -4px;
	-webkit-transform: rotate(40deg);
	transform: rotate(40deg)
}
.hero13 .body .hand.right {
	right: -4px;
	-webkit-transform: rotate(-40deg);
	transform: rotate(-40deg)
}
.hero13 .body .foot {
	width: 5px;
	height: 14px;
	bottom: -13px;
	position: absolute;
	background: #000
}
.hero13 .body .foot.left {
	left: 2px
}
.hero13 .body .foot.right {
	right: 2px
}
#game {
	position: relative;
	overflow: hidden;
	background-image: url(images/bg1.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: 0 auto
}
#game.bg1 {
	background-image: url(images/bg1.jpg)
}
#game.bg2 {
	background-image: url(images/bg2.jpg)
}
#game.bg3 {
	background-image: url(images/bg3.jpg)
}
#game.bg4 {
	background-image: url(images/bg4.jpg)
}
#game.bg5 {
	background-image: url(images/bg5.jpg)
}
#game.bg6 {
	background-image: url(images/bg6.jpg)
}
#game.bounce {
	-webkit-animation: bounce .5s linear;
	animation: bounce .5s linear
}
.stick {
	width: 4px;
	background: #000;
	position: absolute;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease;
	-webkit-transform-origin: bottom right;
	transform-origin: bottom right
}
.stick.rotate {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg)
}
.stick.died {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg)
}
.box {
	background: #000;
	position: absolute;
	bottom: 0;
	-webkit-transition: -webkit-transform .5s ease;
	transition: transform .5s ease
}
.box.init:after {
	display: none
}
.box:after {
	width: 6px;
	height: 6px;
	display: block;
	position: absolute;
	background: red;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0);
	content: ''
}
.plus-one {
	opacity: 1;
	position: absolute;
	font-size: 12px;
	font-weight: 700;
	font-family: Microsoft YaHei;
	-webkit-transition: -webkit-transform 2s, opacity 2s;
	transition: transform 2s, opacity 2s
}
.plus-one.out {
	-webkit-transform: translate3d(0, -10px, 0);
	transform: translate3d(0, -10px, 0);
	opacity: 0
}
.hero {
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: none
}
.hero.shake {
	-webkit-animation: shaking .3s infinite linear;
	animation: shaking .3s infinite linear
}
.hero .foot {
	-webkit-transform-origin: top center;
	transform-origin: top center
}
.hero .foot.left.walk {
	-webkit-animation: walk .4s infinite linear;
	animation: walk .4s infinite linear
}
.hero .foot.right.walk {
	-webkit-animation: walk .4s infinite linear .2s;
	animation: walk .4s infinite linear .2s
}
.hero .ribbon-up {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 3px solid transparent;
	border-top-width: 5px;
	border-top-style: solid;
	left: -10px;
	top: 6px;
	-webkit-transform-origin: 10px 5px;
	transform-origin: 10px 5px;
	-webkit-animation: ribbonup .4s infinite ease;
	animation: ribbonup .4s infinite ease
}
.hero .ribbon-down {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 4px solid transparent;
	border-top-width: 3px;
	border-top-style: solid;
	left: -8px;
	top: 7px;
	-webkit-transform-origin: 10px 5px;
	transform-origin: 10px 5px;
	-webkit-animation: ribbondown .4s infinite ease;
	animation: ribbondown .4s infinite ease
}
.welcome {
	display: none
}
.welcome .game-title {
	text-align: center;
	position: absolute;
	top: 10%;
	width: 150px;
	left: 0;
	right: 0;
	margin: 0 auto;
	font-size: 64px;
	line-height: 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: top left;
	transform-origin: top left;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}
.welcome .game-title.hinge {
	-webkit-animation: hinge 2s ease-in-out;
	animation: hinge 2s ease-in-out
}
.welcome .btn-play {
	position: absolute;
	color: #fff;
	cursor: pointer;
	background: #f08080;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	text-align: center;
	left: 0;
	right: 0;
	margin: 0 auto;
	font-size: 30px;
	top: 40%;
	-webkit-animation: fly 2.5s infinite linear;
	animation: fly 2.5s infinite linear
}
.welcome .btn-play>div {
	position: relative;
	top: 50%;
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0)
}
.welcome .btn-side {
	position: absolute;
	cursor: pointer;
	color: #fff;
	background: rgba(0, 0, 0, .5);
	padding: 10px 8px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	font-weight: 900;
	font-size: 12px;
	right: 40px;
	/* border: 2px solid #3d4752 */
}
.welcome .btn-side .icon {
	display: none;
	color: #fff;
	background: red;
	border-radius: 50%;
	top: 1px;
	right: 1px;
	width: 10px;
	height: 10px;
	position: absolute
}
.welcome .btn-side .icon.new {
	font-size: 8px
}
.welcome .btn-side .icon span {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0)
}
.welcome .btn-hero {
	top: 65%
}
.welcome .btn-draw {
	top: 75%
}
.live-score {
	display: none;
	font-family: Helvetica, Georgia, Microsoft YaHei;
	position: absolute;
	padding: 10px 20px 7px;
	top: 30px;
	background: rgba(0, 0, 0, .3);
	color: #fff;
	border-radius: 30px;
	font-size: 30px;
	left: 50%;
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0)
}
.watermelon {
	display: none;
	position: absolute;
	left: 15px;
	font-weight: 700;
	top:10px;
}
.watermelon img {
	width: 20px;
	position: relative;
	top: 4px;
	margin-right:5px;
}
.instruction{
	position: absolute;
	opacity: 0;
	top: 20%;
	width: 65%;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	text-align:left;
	font-size:16px;
}
.perfect {
	position: absolute;
	opacity: 0;
	top: 20%;
	width: 200px;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	font-weight: 700
}
.instruction.in,
.perfect.in {
	opacity: 1
}
.instruction {
	transition: opacity 3s ease
}
.perfect {
	transition: opacity 2s ease
}
.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000
}
.game-over {
	display: none;
	background:rgba(0,0,0,.5);
}
.game-over .title {
	top: 10%;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 35px;
	font-weight: 700;
	color:#f60;
}
.game-over .board {
	width: 200px;
	background: #fff;
	top: 20%;
	position: absolute;
	left: 0;
	right: 0;
	border-radius: 20px;
	margin: 0 auto;
	text-align: center;
	font-weight: 700;
	padding: 10px
}
.game-over .board p {
	margin: 5px 0
}
.game-over .actions {
	position: absolute;
	top: 46%;
	color: #fff;
	left: 0;
	right: 0;
	text-align: center
}
.game-over .actions .btn {
	cursor: pointer;
	background: #f08080;
	padding: 10px;
	border-radius: 20px;
	margin: 12px auto;
	width: 120px
}
.game-over .actions .btn  a{
	text-decoration:none;
}
.heropick {
	display: none;
	background: #fff;
	width: 230px;
	height: auto;
	top: 10%;
	left: 50%;
	position: absolute;
	-webkit-transform: translate3d(-50%, 250%, 0);
	transform: translate3d(-50%, 250%, 0);
	-webkit-transition: -webkit-transform .5s ease, opacity .5s;
	transition: transform .5s ease, opacity .5s;
	opacity: 0;
	border-radius: 20px;
	z-index: 1001;
	pointer-events: auto
}
.heropick.in {
	-webkit-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0);
	opacity: 1
}
.heropick .title {
	padding: 6px 12px
}
.heropick .title img {
	margin-left: 6px
}
.heropick .total {
	float: right
}
.heropick img {
	width: 18px;
	float: right
}
.heropick .heros {
	padding: 0 20px 10px;
	height: 410px
}
.heropick .wrapper {
	cursor: pointer;
	padding: 16px 10px 20px;
	display: inline-block;
	position: relative;
	width: 90px;
	height: 50px;
	box-sizing: border-box;
	border-radius: 10px
}
.heropick .wrapper.combo {
	width: 100%
}
.heropick .wrapper.combo.locked .price {
	width: 170px;
	font-size: 12px;
	line-height: 20px
}
.heropick .wrapper.locked {
	background-color: #ff6
}
.heropick .wrapper.locked .new {
	display: block;
	position: absolute;
	background: red;
	padding: 3px 4px 4px;
	border-radius: 50%;
	top: -4px;
	right: -6px;
	color: #fff;
	font-size: 10px;
	font-weight: 900
}
.heropick .wrapper.locked .price {
	position: absolute;
	display: block;
	width: 65px;
	font-size: 14px
}
.heropick .wrapper.locked .hero-c {
	visibility: hidden
}
.heropick .wrapper .new,
.heropick .wrapper .price {
	display: none
}
.heropick .wrapper .hero-c {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0)
}
.heropick .wrapper .hero12.hero-c {
	top: 38px
}
.heropick .wrapper .hero13.hero-c {
	top: 46px
}
.draw {
	display: none;
	width: 225px;
	height: auto;
	background: #fff;
	border-radius: 20px;
	position: absolute;
	opacity: 0;
	left: 50%;
	top: 50%;
	-webkit-transform: translate3d(-50%, 250%, 0);
	transform: translate3d(-50%, 250%, 0);
	-webkit-transition: -webkit-transform .5s ease, opacity .5s;
	transition: transform .5s ease, opacity .5s;
	z-index: 1001
}
.draw.in {
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	opacity: 1
}
.draw .draw-title {
	padding: 12px
}
.draw .draw-left {
	font-size: 12px;
	float: right
}
.draw .draw-total {
	color: red
}
.draw .drawer {
	padding: 10px;
	position: relative
}
.draw .draw-btn {
	background: url(images/button.png) no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
	display: block;
	color: #fff;
	height: 72px;
	width: 50px;
	position: absolute;
	left: 85px;
	top: 65px;
	z-index: 10
}
.draw .draw-plate.start {
	-webkit-transition: -webkit-transform 10s cubic-bezier(.245, 1, .665, .97);
	transition: transform 10s cubic-bezier(.245, 1, .665, .97)
}
.draw .draw-result {
	opacity: 0;
	color: red;
	padding: 0 12px;
	text-align: center;
	height: 35px;
	-webkit-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out
}
.draw .draw-result.in {
	opacity: 1
}
.draw .draw-result>p {
	margin: 0
}
.draw .draw-footer {
	font-size: 10px;
	padding: 12px;
	/*font-style: italic;*/
	margin-bottom: 0
}
.share {
	display: none;
	background: rgba(0, 0, 0, .7);
	color: #fff
}
.share .arrow {
	width: 60px;
	position: absolute;
	right: 0;
	-webkit-animation: arrow 1s infinite linear;
	animation: arrow 1s infinite linear
}
.share .text {
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	text-align: center
}
.share .like {
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 60px;
	font-size: 20px
}
.yellow {
	color: #f1c40f
}
.copyright {
	position: absolute;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	font-size: 10px;
	z-index: 1000
}
.copyright__heart {
	color: red
}
.ads {
	margin: 0;
	padding: 0;
	border: none;
	background: 0 0;
	position: absolute;
	z-index: 1002;
	bottom: 0;
	height: 50px
}
.shareicon{
	position: fixed;
	right:15px;
	top:10px;
	width:60px;
	height:67px;
	background-image:url(share.png);
	background-repeat:no-repeat;
	background-size: 60px 67px;
}