article,
aside,
audio,
blockquote,
body,
button,
dd,
div,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
header,
hgroup,
input,
legend,
li,
menu,
nav,
ol,
p,
pre,
section,
td,
textarea,
th,
ul,
video {
	margin: 0;
	padding: 0
}

address,
caption,
cite,
code,
dfn,
em,
optgroup,
th,
var {
	font-style: inherit;
	font-weight: inherit
}

body,
button,
input,
select,
textarea {
	outline: 0
}

fieldset,
img {
	border: 0
}

caption,
th {
	text-align: left
}

textarea {
	resize: none;
	outline: 0
}

input {
	-webkit-appearance: none
}

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

em {
	font-style: normal
}

a {
	text-decoration: none
}

li {
	list-style: none
}

body,
html {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-webkit-font-smoothing: antialiased;
	height: 100%;
	-webkit-overflow-scrolling: touch
}

body {
	font-size: 16px
}

.clearfix:after {
	content: "";
	height: 0;
	display: block;
	clear: both;
	visibility: hidden
}

.Button {
	display: inline-block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: .1rem .25rem;
	border-radius: .05rem;
	margin: .1rem .05rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: hsla(0, 0%, 100%, .6);
	color: #666;
	cursor: pointer
}

.Button input[type=file] {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer
}

.Button.upload {
	position: relative
}

.Button.webrtc {
	margin-top: .15rem
}

@-webkit-keyframes progress-bar-stripes {
	0% {
		background-position: 0 0
	}

	to {
		background-position: .2rem 0
	}
}

@-webkit-keyframes rotation-up {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

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

@-webkit-keyframes rotation-down {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

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

@-webkit-keyframes mirror-smile {
	25% {
		opacity: .9
	}

	37% {
		opacity: .7
	}

	50% {
		opacity: .65
	}

	62% {
		opacity: .75
	}

	75% {
		opacity: .85
	}

	0%,
	to {
		opacity: 1
	}
}

@-webkit-keyframes markSkew {
	20% {
		-webkit-transform: skew(-13deg);
		transform: skew(-13deg)
	}

	80% {
		-webkit-transform: skew(13deg);
		transform: skew(13deg)
	}
}

@-webkit-keyframes markScale {
	20% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	50% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	80% {
		-webkit-transform: skew(1.1);
		transform: skew(1.1)
	}
}

@-webkit-keyframes anima_tada {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	10%,
	5% {
		-webkit-transform: scale(.9) rotate(-5deg);
		transform: scale(.9) rotate(-5deg)
	}

	15%,
	25%,
	35%,
	45% {
		-webkit-transform: scale(1.05) rotate(3deg);
		transform: scale(1.05) rotate(3deg)
	}

	20%,
	30%,
	40% {
		-webkit-transform: scale(1.05) rotate(-3deg);
		transform: scale(1.05) rotate(-3deg)
	}

	50%,
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@-webkit-keyframes anima_jelly {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}

	15% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}

	20% {
		-webkit-transform: scale3d(.85, 1.15, 1);
		transform: scale3d(.85, 1.15, 1)
	}

	25% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}

	32.5% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1)
	}

	37.5% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1)
	}

	50%,
	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}

.Page {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	-webkit-overflow-scrolling: touch;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d
}

.Page.transition {
	-webkit-transition: all 1.2s;
	transition: all 1.2s
}

.Page.show {
	display: block
}

.Page.show .Shadow {
	-webkit-transform: translateX(-3.67rem);
	transform: translateX(-3.67rem);
	opacity: 1
}

.Page.block {
	display: block
}

.Page.show.no-animation {
	-webkit-transition: 0s;
	transition: 0s
}

.Page.hide-after {
	-webkit-transition: -webkit-transform 1.5s ease-in-out;
	transition: -webkit-transform 1.5s ease-in-out;
	transition: transform 1.5s ease-in-out;
	transition: transform 1.5s ease-in-out, -webkit-transform 1.5s ease-in-out;
	-webkit-transform: rotateY(-120deg);
	transform: rotateY(-120deg);
	display: block
}

.Page.hide-after .Paper div {
	-webkit-transform: rotateY(-15deg);
	transform: rotateY(-15deg)
}

.Page.hide-after .book__bg__home,
.Page.hide-after .question {
	opacity: 0
}

.Page__content {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d
}

@keyframes progress-bar-stripes {
	0% {
		background-position: 0 0
	}

	to {
		background-position: .2rem 0
	}
}

@keyframes rotation-up {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

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

@keyframes rotation-down {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

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

@keyframes mirror-smile {
	25% {
		opacity: .9
	}

	37% {
		opacity: .7
	}

	50% {
		opacity: .65
	}

	62% {
		opacity: .75
	}

	75% {
		opacity: .85
	}

	0%,
	to {
		opacity: 1
	}
}

@keyframes markSkew {
	20% {
		-webkit-transform: skew(-13deg);
		transform: skew(-13deg)
	}

	80% {
		-webkit-transform: skew(13deg);
		transform: skew(13deg)
	}
}

@keyframes markScale {
	20% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	50% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	80% {
		-webkit-transform: skew(1.1);
		transform: skew(1.1)
	}
}

@keyframes anima_tada {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	10%,
	5% {
		-webkit-transform: scale(.9) rotate(-5deg);
		transform: scale(.9) rotate(-5deg)
	}

	15%,
	25%,
	35%,
	45% {
		-webkit-transform: scale(1.05) rotate(3deg);
		transform: scale(1.05) rotate(3deg)
	}

	20%,
	30%,
	40% {
		-webkit-transform: scale(1.05) rotate(-3deg);
		transform: scale(1.05) rotate(-3deg)
	}

	50%,
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes anima_jelly {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}

	15% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}

	20% {
		-webkit-transform: scale3d(.85, 1.15, 1);
		transform: scale3d(.85, 1.15, 1)
	}

	25% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}

	32.5% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1)
	}

	37.5% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1)
	}

	50%,
	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}

.Widget.music-wrap {
	position: absolute;
	width: .225rem;
	height: .225rem;
	top: .14rem;
	right: .16rem;
	z-index: 9
}

.Widget.music-wrap .music {
	position: absolute;
	left: 0;
	top: 0;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.music.png?edce6d94);
	background-position: 0rem 0rem;
	background-repeat: no-repeat;
	height: 0.225rem;
	width: 0.225rem;
	background-size: 0.6rem 0.225rem
}

.Widget.music-wrap .music.on {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.music.png?edce6d94);
	background-position: -0.375rem 0rem;
	background-repeat: no-repeat;
	height: 0.225rem;
	width: 0.225rem;
	background-size: 0.6rem 0.225rem;
	-webkit-animation: rotating linear infinite 3s;
	animation: rotating linear infinite 3s
}

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

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

.Widget.download {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 9;
	height: .4rem;
	line-height: .4rem;
	background-size: 100%;
	background-color: #9bbfe6;
	background-repeat: no-repeat;
	background-position: 0 50%;
	text-align: center;
	color: #fff
}

.Widget.download:after {
	content: ""
}

.Widget.loading,
.Widget.waiting {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: -webkit-gradient(linear, left bottom, left top, from(#0c0b0d), color-stop(#282422), to(#0c0b0d));
	background-image: linear-gradient(0deg, #0c0b0d, #282422, #0c0b0d);
	z-index: 9;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all .5s;
	transition: all .5s
}

.Widget.loading.visible,
.Widget.waiting.visible {
	visibility: visible;
	opacity: 1
}

.Widget.loading.visible .icon,
.Widget.loading.visible .shadow,
.Widget.waiting.visible .icon,
.Widget.waiting.visible .shadow {
	-webkit-animation-play-state: running;
	animation-play-state: running
}

.Widget.loading .icon,
.Widget.waiting .icon {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	position: absolute;
	top: 2.6rem;
	left: 50%;
	width: .5rem;
	height: .5rem;
	margin-left: -.25rem;
	background-color: #fff;
	border-radius: .1rem;
	-webkit-animation: ball .5s ease-in infinite alternate;
	animation: ball .5s ease-in infinite alternate;
	z-index: 22
}

@-webkit-keyframes ball {
	0% {
		-webkit-transform: translateY(-.225rem) scale(1);
		transform: translateY(-.225rem) scale(1)
	}

	82% {
		-webkit-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1)
	}

	to {
		-webkit-transform: translateY(0) scale(1.15, .8);
		transform: translateY(0) scale(1.15, .8)
	}
}

.Widget.loading .shadow,
.Widget.waiting .shadow {
	width: .55rem;
	height: .15rem;
	border-radius: 100%;
	position: absolute;
	left: 50%;
	top: 3.1rem;
	margin-left: -.275rem;
	background: rgba(0, 0, 0, .2);
	-webkit-animation: shadow 1s ease-in-out infinite;
	animation: shadow 1s ease-in-out infinite;
	-webkit-animation-play-state: paused;
	animation-play-state: paused
}

@-webkit-keyframes shadow {

	0%,
	to {
		-webkit-transform: scale(.6);
		transform: scale(.6);
		opacity: .6
	}

	50% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 1
	}
}

@-webkit-keyframes magic-light {
	50% {
		opacity: .3
	}

	0%,
	to {
		opacity: 1
	}
}

@keyframes magic-light {
	50% {
		opacity: .3
	}

	0%,
	to {
		opacity: 1
	}
}

.Widget.loading .magic {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: 42%
}

.Widget.loading .magic__light {
	width: 2.24rem;
	height: 2.24rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.magic.png?b55ec75e);
	background-position: 0rem 0rem;
	background-repeat: no-repeat;
	height: 2.24rem;
	width: 2.24rem;
	background-size: 4.15rem 3.36rem;
	-webkit-animation: magic-light 2s infinite;
	animation: magic-light 2s infinite
}

.Widget.loading .magic__outside {
	position: absolute;
	-webkit-animation: rotation-up 1.5s infinite linear;
	animation: rotation-up 1.5s infinite linear;
	width: 1.76rem;
	height: 1.76rem;
	left: .24rem;
	top: .24rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.magic.png?b55ec75e);
	background-position: -2.39rem 0rem;
	background-repeat: no-repeat;
	height: 1.76rem;
	width: 1.76rem;
	background-size: 4.15rem 3.36rem
}

.Widget.loading .magic__inside {
	position: absolute;
	-webkit-animation: rotation-down 2s infinite linear;
	animation: rotation-down 2s infinite linear;
	width: .97rem;
	height: .97rem;
	left: .635rem;
	top: .635rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.magic.png?b55ec75e);
	background-position: 0rem -2.39rem;
	background-repeat: no-repeat;
	height: 0.97rem;
	width: 0.97rem;
	background-size: 4.15rem 3.36rem
}

.Widget.loading .magic__base {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.magic.png?b55ec75e);
	background-position: -1.12rem -2.39rem;
	background-repeat: no-repeat;
	height: 0.47rem;
	width: 0.585rem;
	background-size: 4.15rem 3.36rem
}

.Widget.loading .magic__eye {
	position: absolute;
	-webkit-animation: rotation-up 4s infinite linear;
	animation: rotation-up 4s infinite linear;
	width: .24rem;
	height: .24rem;
	left: 1rem;
	top: 1rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.magic.png?b55ec75e);
	background-position: -2.39rem -1.91rem;
	background-repeat: no-repeat;
	height: 0.24rem;
	width: 0.24rem;
	background-size: 4.15rem 3.36rem
}

.Widget.loading .magic__text {
	bottom: .07rem;
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: .135rem;
	font-weight: 700;
	text-shadow: .005rem .025rem .015rem rgba(212, 69, 69, .17), 0 0 .07rem rgba(154, 46, 46, .19);
	letter-spacing: .05rem
}

@-webkit-keyframes lamp-light {
	25% {
		opacity: .6
	}

	37% {
		opacity: .4
	}

	50% {
		opacity: .2
	}

	62% {
		opacity: .3
	}

	75% {
		opacity: .4
	}

	0%,
	to {
		opacity: 1
	}
}

@keyframes lamp-light {
	25% {
		opacity: .6
	}

	37% {
		opacity: .4
	}

	50% {
		opacity: .2
	}

	62% {
		opacity: .3
	}

	75% {
		opacity: .4
	}

	0%,
	to {
		opacity: 1
	}
}

.Widget.waiting .lamp {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: 42%;
	width: 1.04rem;
	height: 1.26rem
}

.Widget.waiting .lamp__body {
	height: .9rem;
	width: .49rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/skip-lamp.png?95429ddb);
	background-position: -1.115rem 0
}

.Widget.waiting .lamp__body,
.Widget.waiting .lamp__light {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-repeat: no-repeat;
	background-size: 1.6rem 1.21rem
}

.Widget.waiting .lamp__light {
	height: .965rem;
	width: .965rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/skip-lamp.png?95429ddb);
	-webkit-animation: lamp-light 1.2s infinite;
	animation: lamp-light 1.2s infinite;
	background-position: 0 0
}

.Widget.waiting .lamp__progress {
	position: absolute;
	top: .965rem;
	width: 100%;
	border-radius: .02rem;
	height: .095rem;
	border: .01rem solid #1f1c1b;
	background-color: #0d0c0b;
	-webkit-box-shadow: inset 0 .005rem 0 rgba(255, 180, 61, .07), 0 0 .025rem rgba(0, 0, 0, .55);
	box-shadow: inset 0 .005rem 0 rgba(255, 180, 61, .07), 0 0 .025rem rgba(0, 0, 0, .55);
	overflow: hidden
}

.Widget.waiting .lamp__progress__bar {
	position: absolute;
	border-radius: .01rem;
	height: .095rem;
	top: 0;
	left: 0;
	-webkit-transition: width .1s ease;
	transition: width .1s ease;
	-webkit-animation: progress-bar-stripes 1.2s linear infinite;
	animation: progress-bar-stripes 1.2s linear infinite;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/skip-lamp-progress.png?8e23cade);
	background-size: .095rem .095rem
}

.Widget.waiting .lamp__precent {
	position: absolute;
	text-align: center;
	top: 1.16rem;
	width: 100%;
	color: #9e9a98;
	font-size: .12rem;
	font-weight: 400;
	line-height: 1;
	font-family: Microsoft YaHei
}

.Widget.toast {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: fixed;
	padding: .08rem .125rem;
	background: #fff;
	text-align: center;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 .015rem rgba(0, 0, 0, .3);
	box-shadow: 0 0 3px rgba(0, 0, 0, .3);
	z-index: 99
}

.Widget.toast .content {
	font-size: .13rem;
	margin: 0;
	line-height: 1.6;
	word-break: break-all;
	word-wrap: break-word
}

@font-face {
	font-family: test;
	src: url(data:font/ttf;base64,AAEAAAAKAIAAAwAgT1MvMmPo0dIAAACsAAAAYGNtYXALfg1BAAABDAAAAWpnbHlmj3AcpQAAAngAAAGkaGVhZAkaZwYAAAQcAAAANmhoZWEHzv0EAAAEVAAAACRobXR4BCkBYQAABHgAAAAgbG9jYQImAcgAAASYAAAAEm1heHACtQKcAAAErAAAACBuYW1lYUyTugAABMwAAANCcG9zdP+4ADoAAAgQAAAAIAAEYIUBkAAFAAQCigJYAAAASwKKAlgAAAFeADIA3AAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAABXWVVFAMAAYwB0A3D/iAB4A+gBaAAEAAEAAAAAAAAAAAAAACAAAQAAAAMAAAADAAAAHAABAAAAAABkAAMAAQAAABwABABIAAAADgAIAAIABgBjAGUAaABvAHIAdP//AAAAYwBlAGgAbgByAHT///+e/53/m/+W/5T/kwABAAAAAAAAAAAAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAIAAAMAAAAAAAQFAAAGAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQCP/6oDTQMXAAMABgAJAAwADwAAFyERIQkBIQMBEQUJBI8Cvv1CAV/+6QIu+wEX/bYBFwEX/bYBF/7pVgNt/m4BZ/51AWf9MiQBZ/6ZAvL+mf6ZAAAAAAEAHv+FAlUCSAAHAAATESE3IxEzNR4CDCv66wJI/T1/AcSAAAIAHv+FArkCSwAJAA0AAAU3NSE1IREnIREBNTMVAocy/q4BUkD9pQFJe3s1f1cBe0D9OgGpYmIAAQAe/4UCpANqAAoAAAURJyMRIREhETMRAqRfxv6fAWEzewJSXgE1/BsB+v4GAAAAAQAe/4QCvgJJAAkAAAERIREnIQcRIREBpQEZcf5CcQEZAYj9/AJIfX39uAIEAAAAAgAe/4UCuQJJAAcACwAAEwcRFyE3EScDIzUzcFJSAfdSUqSvrwJJRf3GRUUCOkX+QboAAAEAHv+FAgYCSQAIAAABNSERIRE3NSMBLf7xAQ/ZgAH+S/08ATPHygABAB7/hQIpAxQADQAAExEhNyMRMzUjNSEVIxV/AXwui2xs/uFhAa7915MBlp/Hx58AAAAAAQAAAAEAALIGi4FfDzz1AAMD6AAAAADO3jAnAAAAANe58xEAHv+EA00DagAAAAMAAgAAAAAAAAABAAADcP+IAPD/5AAe/Y8DTQABAAAAAAAAAAAAAAAAAAAACAPoAI//5AAeAEgAHgAzAB4ATQAeAEgAHv+VAB7/uAAeAAAALAA+AFoAcgCKAKQAuADSAAAAAQAAAAgAEAAFAAAAAAACAAQCigJYAAAASwAAAAAAAAAAAA4ArgABAAAAAAABACEAAAABAAAAAAACAAcAIQABAAAAAAADACkAKAABAAAAAAAEAB4AUQABAAAAAAAFADYAbwABAAAAAAAGAB4ApQABAAAAAAAQABkAwwADAAEECQABAEIA3AADAAEECQACAA4BHgADAAEECQADAFIBLAADAAEECQAEADwBfgADAAEECQAFAGwBugADAAEECQAGADwCJgADAAEECQAQADICYk1GIEppbkhlaSAoTm9uY29tbWVyY2lhbCkgUmVndWxhclJlZ3VsYXIxLjAwMDtXWVVFO01GSmluSGVpX05vbmNvbW1lcmNpYWwtUmVndWxhck1GSmluSGVpX05vbmNvbW1lcmNpYWwtUmVndWxhclZlcnNpb24gMS4wMDA7UFMgMTtob3Rjb252IDEuMC41NzttYWtlb3RmLmxpYjIuMC4yMTg5NU1GSmluSGVpX05vbmNvbW1lcmNpYWwtUmVndWxhck1GIEppbkhlaSAoTm9uY29tbWVyY2lhbCkATQBGACAASgBpAG4ASABlAGkAIAAoAE4AbwBuAGMAbwBtAG0AZQByAGMAaQBhAGwAKQAgAFIAZQBnAHUAbABhAHIAUgBlAGcAdQBsAGEAcgAxAC4AMAAwADAAOwBXAFkAVQBFADsATQBGAEoAaQBuAEgAZQBpAF8ATgBvAG4AYwBvAG0AbQBlAHIAYwBpAGEAbAAtAFIAZQBnAHUAbABhAHIATQBGAEoAaQBuAEgAZQBpAF8ATgBvAG4AYwBvAG0AbQBlAHIAYwBpAGEAbAAtAFIAZQBnAHUAbABhAHIAVgBlAHIAcwBpAG8AbgAgADEALgAwADAAMAA7AFAAUwAgADEAOwBoAG8AdABjAG8AbgB2ACAAMQAuADAALgA1ADcAOwBtAGEAawBlAG8AdABmAC4AbABpAGIAMgAuADAALgAyADEAOAA5ADUATQBGAEoAaQBuAEgAZQBpAF8ATgBvAG4AYwBvAG0AbQBlAHIAYwBpAGEAbAAtAFIAZQBnAHUAbABhAHIATQBGACAASgBpAG4ASABlAGkAIAAoAE4AbwBuAGMAbwBtAG0AZQByAGMAaQBhAGwAKQAAAAMAAAAAAAD/tQAyAAAAAAAAAAAAAAAAAAAAAAAAAAg=)
}

@font-face {
	font-family: halloween;
	src: url(https://h5.meitu.com/xiuxiu/halloween/dist/fonts/halloween.ttf?b353545d)
}

.text-center {
	text-align: center
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.active {
	display: block
}

.question {
	position: absolute;
	bottom: .23rem;
	left: .3rem;
	width: 3.1rem;
	height: 4.92rem;
	-webkit-transition: opacity .35s;
	transition: opacity .35s
}

.question__tag {
	top: .23rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.question.png?c63beec3bc3780b1d91755c1635d93bd);
	background-position: -1.66rem -1.07rem;
	background-repeat: no-repeat;
	height: 0.195rem;
	width: 0.535rem;
	background-size: 2.555rem 1.65rem;
	text-align: center;
	font-size: .17rem;
	line-height: .2rem
}

.question__tag,
.question__text {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	font-weight: 400
}

.question__text {
	top: .54rem;
	width: 2.7rem;
	font-size: .135rem;
	line-height: .20335rem;
	letter-spacing: .0175rem
}

.question__content {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	top: 1.06rem
}

.question__item {
	position: absolute;
	left: .02rem;
	top: 0;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.question.png?c63beec3bc3780b1d91755c1635d93bd);
	background-position: 0rem 0rem;
	background-repeat: no-repeat;
	height: 1.65rem;
	width: 1.51rem;
	background-size: 2.555rem 1.65rem
}

.question__item__wrap {
	position: absolute;
	top: .15rem;
	left: .12rem;
	width: 1.28rem;
	height: 1.12rem
}

.question__img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.question__wood {
	bottom: 0;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.question.png?c63beec3bc3780b1d91755c1635d93bd);
	background-position: -1.66rem 0rem;
	background-repeat: no-repeat;
	height: 0.325rem;
	width: 0.895rem;
	background-size: 2.555rem 1.65rem
}

.question__wood p {
	width: .8rem;
	text-align: center;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #fcf8e9;
	font-size: .145rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .015rem
}

.question__four {
	width: 100%
}

.question__four ul {
	font-size: 0
}

.question__four ul:after,
.question__four ul:before {
	content: "";
	display: table
}

.question__four ul:after {
	clear: both
}

.question__four ul li {
	float: left;
	position: relative;
	width: 50%;
	padding-bottom: 57%
}

.question__four ul li:first-child .question__item {
	-webkit-transform: rotate(-2deg);
	transform: rotate(-2deg)
}

.question__four ul li:nth-child(2) .question__item,
.question__four ul li:nth-child(3) .question__item {
	-webkit-transform: rotate(1deg);
	transform: rotate(1deg)
}

.question__four ul li:nth-child(4) .question__item {
	-webkit-transform: rotate(0);
	transform: rotate(0)
}

.question__four--q2 .question__img.A {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.q2.png?8063aee6346ad37790dbb480e4cf8cd7);
	background-position: -2.04rem 0rem;
	background-repeat: no-repeat;
	height: 0.75rem;
	width: 0.935rem;
	background-size: 2.975rem 2.055rem
}

.question__four--q2 .question__img.B {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.q2.png?8063aee6346ad37790dbb480e4cf8cd7);
	background-position: 0rem 0rem;
	background-repeat: no-repeat;
	height: 1.055rem;
	width: 0.925rem;
	background-size: 2.975rem 2.055rem
}

.question__four--q2 .question__img.C {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.q2.png?8063aee6346ad37790dbb480e4cf8cd7);
	background-position: -1.075rem 0rem;
	background-repeat: no-repeat;
	height: 0.9rem;
	width: 0.815rem;
	background-size: 2.975rem 2.055rem
}

.question__four--q2 .question__img.D {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.q2.png?8063aee6346ad37790dbb480e4cf8cd7);
	background-position: 0rem -1.205rem;
	background-repeat: no-repeat;
	height: 0.85rem;
	width: 0.68rem;
	background-size: 2.975rem 2.055rem
}

.question__four--q3 .question__img.A {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.q3.png?96b9020a3c51c4b7d0cc8d0bfa930edf);
	background-position: -1.31rem 0rem;
	background-repeat: no-repeat;
	height: 0.93rem;
	width: 1.005rem;
	background-size: 2.315rem 2.185rem
}

.question__four--q3 .question__img.B {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.q3.png?96b9020a3c51c4b7d0cc8d0bfa930edf);
	background-position: -1.31rem -1.08rem;
	background-repeat: no-repeat;
	height: 0.87rem;
	width: 0.97rem;
	background-size: 2.315rem 2.185rem
}

.question__four--q3 .question__img.C {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.q3.png?96b9020a3c51c4b7d0cc8d0bfa930edf);
	background-position: 0rem -1.11rem;
	background-repeat: no-repeat;
	height: 1.075rem;
	width: 0.885rem;
	background-size: 2.315rem 2.185rem
}

.question__four--q3 .question__img.D {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.q3.png?96b9020a3c51c4b7d0cc8d0bfa930edf);
	background-position: 0rem 0rem;
	background-repeat: no-repeat;
	height: 0.96rem;
	width: 1.16rem;
	background-size: 2.315rem 2.185rem
}

.question__four--q5 .question__img.A {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.q5.png?6081e2e4e446a0e174e5569c6eb54801);
	background-position: 0rem 0rem;
	background-repeat: no-repeat;
	height: 1.07rem;
	width: 1.285rem;
	background-size: 2.47rem 2.3rem
}

.question__four--q5 .question__img.B {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.q5.png?6081e2e4e446a0e174e5569c6eb54801);
	background-position: -1.435rem -1.115rem;
	background-repeat: no-repeat;
	height: 0.935rem;
	width: 0.9rem;
	background-size: 2.47rem 2.3rem
}

.question__four--q5 .question__img.C {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.q5.png?6081e2e4e446a0e174e5569c6eb54801);
	background-position: -1.435rem 0rem;
	background-repeat: no-repeat;
	height: 0.965rem;
	width: 1.035rem;
	background-size: 2.47rem 2.3rem
}

.question__four--q5 .question__img.D {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.q5.png?6081e2e4e446a0e174e5569c6eb54801);
	background-position: 0rem -1.22rem;
	background-repeat: no-repeat;
	height: 1.08rem;
	width: 1.14rem;
	background-size: 2.47rem 2.3rem
}

.question__one {
	width: 2.86rem;
	height: 2.745rem;
	background-repeat: no-repeat;
	background-size: 100% auto
}

.question__one__label {
	position: absolute;
	right: -.165rem;
	top: -.125rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.question.png?c63beec3bc3780b1d91755c1635d93bd);
	background-position: -1.66rem -0.475rem;
	background-repeat: no-repeat;
	height: 0.445rem;
	width: 0.46rem;
	background-size: 2.555rem 1.65rem
}

.question__one--q1 {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/skip-q1.png?c7c50f2d)
}

.question__one--q4 {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/skip-q4.png?c485ced5)
}

.question__btns {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 2.86rem;
	top: 4rem;
	-webkit-transition: all .15s ease-out;
	transition: all .15s ease-out
}

.question__btns__bg {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#77271d), to(#351511));
	background-image: linear-gradient(180deg, #77271d 0, #351511);
	opacity: .64;
	border-radius: .135rem
}

.question__btns__bg:active,
.question__btns__bg:focus {
	background-image: -webkit-gradient(linear, left bottom, left top, from(#77271d), to(#351511));
	background-image: linear-gradient(0deg, #77271d 0, #351511)
}

.question__btns ul {
	margin-bottom: .15rem;
	font-size: 0
}

.question__btns li {
	position: relative;
	display: inline-block;
	height: .27rem
}

.question__btns li p {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-shadow: .005rem .005rem .005rem rgba(0, 0, 0, .72);
	color: #d4e2e0;
	font-size: .14rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase
}

.question__btns li p span {
	letter-spacing: .025rem
}

.question__btns--q1 li {
	width: .885rem
}

.question__btns--q1 ul:first-child li {
	margin-right: .085rem
}

.question__btns--q1 ul:first-child li:nth-child(3) {
	margin-right: 0
}

.question__btns--q1 ul:last-child li {
	margin-right: .175rem
}

.question__btns--q1 ul:last-child li:first-child {
	margin-left: .5rem
}

.question__btns--q4 li {
	width: 1.035rem;
	margin-left: .27rem
}

.cloud-wrap {
	position: absolute;
	opacity: 0.5;
	width: 1.875rem;
	height: 1.85rem;
	top: 0;
	left: 0;
	overflow: hidden;
	-webkit-transform: scale(2);
	transform: scale(2);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	pointer-events: none
}

.cloud-wrap.flip {
	top: auto;
	bottom: .4rem
}

.cloud-wrap.flip .cloud {
	-webkit-transform: rotateX(180deg) translateY(-1.2rem);
	transform: rotateX(180deg) translateY(-1.2rem)
}

.cloud {
	width: 1.875rem;
	height: 1.85rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
	background-position: -6.075rem -2.015rem;
	background-repeat: no-repeat;
	height: 1.865rem;
	width: 1.875rem;
	background-size: 7.95rem 7.93rem;
	background-repeat: no-repeat;
	-webkit-animation-name: keyframes-top2;
	animation-name: keyframes-top2;
	-webkit-animation-duration: 1.2s;
	animation-duration: 1.2s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function: steps(1);
	animation-timing-function: steps(1);
	position: absolute;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	top: 0;
	left: 0;
	z-index: 6;
	pointer-events: none
}

@-webkit-keyframes keyframes-top2 {
	0% {
		width: 1.875rem;
		height: 1.85rem;
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -6.075rem -2.015rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem;
		background-repeat: no-repeat
	}

	6.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -2.025rem -4.05rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	13.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -6.075rem -4.03rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	20.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: 0rem -6.065rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	26.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -4.05rem 0rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	33.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -4.05rem -2.015rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	40.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: 0rem -4.05rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	46.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -2.025rem -2.025rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	53.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -4.05rem -4.05rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	60.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -6.075rem 0rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	66.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 1.875rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	73.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -2.025rem 0rem;
		background-repeat: no-repeat;
		height: 1.875rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	80.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: 0rem -2.025rem;
		background-repeat: no-repeat;
		height: 1.875rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	86.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -2.025rem -6.065rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	93.33%,
	to {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -4.05rem -6.065rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}
}

@keyframes keyframes-top2 {
	0% {
		width: 1.875rem;
		height: 1.85rem;
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -6.075rem -2.015rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem;
		background-repeat: no-repeat
	}

	6.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -2.025rem -4.05rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	13.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -6.075rem -4.03rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	20.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: 0rem -6.065rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	26.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -4.05rem 0rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	33.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -4.05rem -2.015rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	40.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: 0rem -4.05rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	46.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -2.025rem -2.025rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	53.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -4.05rem -4.05rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	60.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -6.075rem 0rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	66.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 1.875rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	73.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -2.025rem 0rem;
		background-repeat: no-repeat;
		height: 1.875rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	80.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: 0rem -2.025rem;
		background-repeat: no-repeat;
		height: 1.875rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	86.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -2.025rem -6.065rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}

	93.33%,
	to {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.top_000.png?57150194);
		background-position: -4.05rem -6.065rem;
		background-repeat: no-repeat;
		height: 1.865rem;
		width: 1.875rem;
		background-size: 7.95rem 7.93rem
	}
}

.mirrow__comic {
	width: 2.15rem;
	height: 2.625rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
	background-position: -2.3rem 0rem;
	background-repeat: no-repeat;
	height: 2.625rem;
	width: 2.15rem;
	background-size: 11.35rem 8.175rem;
	background-repeat: no-repeat;
	-webkit-animation-name: keyframes-ren2;
	animation-name: keyframes-ren2;
	-webkit-animation-duration: 1.2s;
	animation-duration: 1.2s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function: steps(1);
	animation-timing-function: steps(1);
	position: absolute;
	top: .65rem;
	left: .4rem
}

@-webkit-keyframes keyframes-ren2 {
	0% {
		width: 2.15rem;
		height: 2.625rem;
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -2.3rem 0rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	6.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -6.9rem -2.775rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	13.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -4.6rem 0rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	20.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: 0rem -2.775rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	26.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -2.3rem -2.775rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	33.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -4.6rem -2.775rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	40.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -6.9rem 0rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	46.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	53.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: 0rem -5.55rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	60.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -2.3rem -5.55rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	66.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -4.6rem -5.55rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	73.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -6.9rem -5.55rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	80.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -9.2rem 0rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	86.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -9.2rem -2.775rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	93.33%,
	to {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -9.2rem -5.55rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}
}

@keyframes keyframes-ren2 {
	0% {
		width: 2.15rem;
		height: 2.625rem;
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -2.3rem 0rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	6.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -6.9rem -2.775rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	13.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -4.6rem 0rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	20.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: 0rem -2.775rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	26.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -2.3rem -2.775rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	33.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -4.6rem -2.775rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	40.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -6.9rem 0rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	46.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	53.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: 0rem -5.55rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	60.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -2.3rem -5.55rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	66.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -4.6rem -5.55rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	73.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -6.9rem -5.55rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	80.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -9.2rem 0rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	86.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -9.2rem -2.775rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}

	93.33%,
	to {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.ren_000.png?c771a1e9);
		background-position: -9.2rem -5.55rem;
		background-repeat: no-repeat;
		height: 2.625rem;
		width: 2.15rem;
		background-size: 11.35rem 8.175rem
	}
}

.glow {
	width: 3.75rem;
	height: 7.24rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
	background-position: 0rem 0rem;
	background-repeat: no-repeat;
	height: 7.24rem;
	width: 3.75rem;
	background-size: 11.55rem 7.24rem;
	background-repeat: no-repeat;
	-webkit-animation-name: keyframes-glow;
	animation-name: keyframes-glow;
	-webkit-animation-duration: 2.5s;
	animation-duration: 2.5s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function: steps(1);
	animation-timing-function: steps(1);
	position: absolute;
	top: .02rem;
	left: 0;
	pointer-events: none
}

.glow.hide {
	display: none
}

@-webkit-keyframes keyframes-glow {
	0% {
		width: 3.75rem;
		height: 7.24rem;
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	6.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	13.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: -3.9rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	20.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	26.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	33.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	40.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	46.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	53.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	60.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: -3.9rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	66.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	73.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: -7.8rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	80.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	86.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	93.33%,
	to {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}
}

@keyframes keyframes-glow {
	0% {
		width: 3.75rem;
		height: 7.24rem;
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	6.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	13.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: -3.9rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	20.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	26.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	33.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	40.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	46.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	53.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	60.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: -3.9rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	66.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	73.33% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: -7.8rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	80.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	86.67% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}

	93.33%,
	to {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.glow_000.png?295c1a8e);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 7.24rem;
		width: 3.75rem;
		background-size: 11.55rem 7.24rem
	}
}

.bat {
	width: 1.875rem;
	height: 3.62rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
	background-position: -2.025rem 0rem;
	background-repeat: no-repeat;
	height: 3.62rem;
	width: 1.875rem;
	background-size: 12rem 7.39rem;
	background-repeat: no-repeat;
	-webkit-animation-name: keyframes-bat;
	animation-name: keyframes-bat;
	-webkit-animation-duration: .8s;
	animation-duration: .8s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function: steps(1);
	animation-timing-function: steps(1);
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scale(2);
	transform: scale(2);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0
}

.bat.hide {
	display: none
}

@-webkit-keyframes keyframes-bat {
	0% {
		width: 1.875rem;
		height: 3.62rem;
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -2.025rem 0rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	5.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -2.025rem -3.77rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	15.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -4.05rem 0rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	25.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -6.075rem 0rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	35.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: 0rem -3.77rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	45.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	55.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -4.05rem -3.77rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	65.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -6.075rem -3.77rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	75.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -8.1rem 0rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	85.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -8.1rem -3.77rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	95.00%,
	to {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -10.125rem 0rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}
}

@keyframes keyframes-bat {
	0% {
		width: 1.875rem;
		height: 3.62rem;
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -2.025rem 0rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	5.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -2.025rem -3.77rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	15.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -4.05rem 0rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	25.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -6.075rem 0rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	35.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: 0rem -3.77rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	45.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: 0rem 0rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	55.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -4.05rem -3.77rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	65.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -6.075rem -3.77rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	75.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -8.1rem 0rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	85.00% {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -8.1rem -3.77rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}

	95.00%,
	to {
		background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.bg_000.png?ca9bf405);
		background-position: -10.125rem 0rem;
		background-repeat: no-repeat;
		height: 3.62rem;
		width: 1.875rem;
		background-size: 12rem 7.39rem
	}
}

.App,
body {
	background-color: #0c0b0d
}

.App {
	position: relative;
	width: 100%;
	max-width: 3.75rem;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	font-family: halloween, lucida grande, lucida sans unicode, lucida, helvetica, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
	color: #eef2fb
}

.ff-pingfang {
	font-family: PingFangSC-Light
}

.book {
	/*position: fixed;*/
	/*top: 0;*/
	/*left: 0;*/
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto
}

.book__body {
	top: .08rem;
	-webkit-perspective: 13rem;
	perspective: 13rem
}

.book__body,
.book__footer {
	position: absolute;
	width: 98vw;
	left: 0;
	height: 5.645rem;
	background-repeat: no-repeat;
	background-size: 100% auto
}

.book__footer {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/skip-book-footer.png?8c95cf65);
	top: .4rem
}

.book__mark {
	position: absolute;
	top: 5.75rem;
	right: .35rem;
	-webkit-animation: markScale 2.5s linear infinite;
	animation: markScale 2.5s linear infinite
}

.book__mark,
.book__mark span {
	width: .62rem;
	height: .29rem;
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0
}

.book__mark span {
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/skip-book-mark.png?908d4eee);
	-webkit-animation: markSkew 2.5s linear infinite;
	animation: markSkew 2.5s linear infinite;
	display: block
}

.book__mark--inside {
	top: 5.65rem
}

.book__bg__home {
	-webkit-transition: opacity .35s;
	transition: opacity .35s;
	/*background-image: url(https://p6.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/d4ab33debe0e466ab88ce173bef94071~tplv-obj:734:1129.image?from=post)*/
}

.book__bg__home,
.book__bg__question,
.book__bg__result {
	background-repeat: no-repeat;
	background-size: 100% auto
}

.book__bg__result {
	-webkit-transition: opacity .35s;
	transition: opacity .35s;
	background-image: url(https://p6.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/d4ab33debe0e466ab88ce173bef94071~tplv-obj:734:1129.image?from=post)
}

.Paper {
	left: 0;
	top: 0;
	background-image: url(https://p9.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/94a02291ddd94cff8c5f813acdf67180~tplv-obj:734:1129.image?from=post);
	background-position: 0rem 0rem;
	background-repeat: no-repeat;
	height: 5.645rem;
	width: 3.67rem;
	background-size: 3.67rem 5.645rem;
	width: .36rem
}

.Paper,
.Paper div {
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100% auto;
	height: 100%;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%
}

.Paper div {
	background-image: url(https://p9.toutiaoimg.com/img/tos-cn-i-qvj2lq49k0/94a02291ddd94cff8c5f813acdf67180~tplv-obj:734:1129.image?from=post);
	background-position: 0rem 0rem;
	background-repeat: no-repeat;
	height: 5.645rem;
	width: 3.67rem;
	background-size: 3.67rem 5.645rem;
	width: .37rem;
	left: 100%;
	margin-left: -.01rem;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform .5s ease-in-out;
	transition: -webkit-transform .5s ease-in-out;
	transition: transform .5s ease-in-out;
	transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out
}

.Paper>div {
	background-position: -.36rem 0
}

.Paper>div>div {
	background-position: -.72rem 0
}

.Paper>div>div>div {
	background-position: -1.08rem 0
}

.Paper>div>div>div>div {
	background-position: -1.44rem 0
}

.Paper>div>div>div>div>div {
	background-position: -1.8rem 0
}

.Paper>div>div>div>div>div>div {
	background-position: -2.16rem 0
}

.Paper>div>div>div>div>div>div>div {
	background-position: -2.52rem 0
}

.Paper>div>div>div>div>div>div>div>div {
	background-position: -2.88rem 0
}

.Paper>div>div>div>div>div>div>div>div>div {
	background-position: -3.24rem 0
}

.Paper>div>div>div>div>div>div>div>div>div>div {
	background-position: -3.6rem 0
}

.Shadow {
	-webkit-box-shadow: inset rgba(0, 0, 0, .5) 4rem 0 .5rem -1rem;
	box-shadow: inset 4rem 0 .5rem -1rem rgba(0, 0, 0, .5);
	position: absolute;
	top: .2rem;
	left: 0;
	right: 0;
	bottom: .1rem;
	border-radius: .05rem;
	z-index: 22;
	opacity: 0;
	-webkit-transition: -webkit-transform .6s linear .2s;
	transition: -webkit-transform .6s linear .2s;
	transition: transform .6s linear .2s;
	transition: transform .6s linear .2s, -webkit-transform .6s linear .2s;
	pointer-events: none
}

.WebRTC input {
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0
}

.WebRTC.rtc input {
	display: none
}

.WebRTC .skip-guide {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/skip-guide.png?44730d75);
	background-size: 100% 100%;
	width: 3.75rem;
	height: 3.7rem
}

.WebRTC .Camera {
	-webkit-transition: all .5s;
	transition: all .5s;
	background: #000;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9999;
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	visibility: hidden;
	-webkit-transform: scale(0);
	transform: scale(0)
}

.WebRTC .Camera .close {
	position: absolute;
	z-index: 10000;
	top: .27rem;
	right: .27rem;
	content: "";
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAJ1BMVEUAAAD///////////////////////////////////////////////+uPUo5AAAADHRSTlMA8DAQz+Cvj2BAIJ93MxjDAAAAzklEQVRIx+3RIQoCURSF4UGb0WKZ4BTzBIvZ6hIMYra4D5sbcCuCguBblGG4/NwnfxXDnHYvh6+cZsy/ZbXo82N6PqZ7X7a5sC7PdJfy6BOwK6USBgKgErogAOapMGkHAuC+5IQQAEIACAEgFIAAEAJACAAhAIwAEAJACAAhAIQAEEIAZmTUFGZkVAGEYMbWiJixMyJmjFENiFEViFEdgBAAQgAIASAEgFAA4htQAgDikAqnACDeqQAAkQoAEOm+BADxSvfs2lTZ3Joxv80Ho+CrZvV70fsAAAAASUVORK5CYII=) no-repeat;
	background-size: 100% auto;
	width: .27rem;
	height: .27rem
}

.WebRTC .Camera.show {
	visibility: visible;
	-webkit-transform: scale(1);
	transform: scale(1)
}

.WebRTC .Camera canvas {
	max-height: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

.WebRTC .Camera .video {
	width: 100%;
	height: 100%;
	position: absolute
}

.WebRTC .Camera .video video {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

.WebRTC .Camera .album {
	width: .27rem;
	height: .27rem;
	position: absolute;
	bottom: .5rem;
	left: .3rem
}

.WebRTC .Camera .control {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/skip-guide.png?44730d75) 50% 50% no-repeat;
	background-size: 100%
}

.WebRTC .Camera .album .icon {
	-webkit-transition: all .35s;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAMAAAC7m5rvAAAAflBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////vroaSAAAAKXRSTlMA7Aq/ES27BmMd8rB5+VHu58WTbBRyNyCBXEz1smfk0bgm1NqKez+kadI7uP4AAAIdSURBVEjHpZZpY4MgDIYRUetZtTq1na322vr//+AKyCHj6FY+UcjTyJtAAkwDNl3XQPCHgYraLx9klH5doFcYOIQPZYQDdDnKvIdmeJnV5UZAKrgxQnElzA6nME3D00GsVLGe2m8XgzwdZ7Y4j2m+LG/3Omq37B5bpJy3PS5bu99URneSNvq9F7UJ3c0MvsLYcOxQ629PV3uzyD21WJ0vpmpsrMGhusifUzHKzVXqQg8co1//OfKIGsA5iC4ekrVPtBo29eV8hVyCRIoCJM5aHQUv6+O0xB39m4HkRqTDWqp6weNO8mWgX2x0Br7UcLZcBUSyF2mxq5obiOQ1Ni7wJNVLFxCrbSNWUvbRNZ6MBsmL7fPYd2lhxNb1c+LjyWx8Wu4fK7FmbO0/JyW+y+Dlge97CQDE+Ol17ITtIWiUxCqmS9UjR4I1oFsJGdFIHQMdIaTs1lj0yd63wIHRjxSUlWPCN1SSM6ec3JlIwgIgqOTuW7goxwFgXgNBfQBo4QISbpZc3xIFTJxILpbKk0RZuYmkMr84E6fMnLg4PO6csnOZCNcgU3YuKsWjAD1BObib9ASBjFMOLj7IZQd5LBh2LvLJT6Q85i7uqlQKVjrs3MhLhyhUbm7HC5W7LAquZmVRW4Q7A2cq+relH8kiC3czNxil2ijFHvdlb2emMWA+52+pnXE3T/nZx81TLjdPb7dq7zeG7jb0/ab3ny32DzfcjZxtD8SwAAAAAElFTkSuQmCC) no-repeat;
	background-size: 100% auto;
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: 0
}

.WebRTC .Camera .album .icon input {
	opacity: 0;
	width: 100%;
	height: 100%
}

.WebRTC .Camera .album.switch .cancel {
	-webkit-transform: scale(1);
	opacity: 1
}

.WebRTC .Camera .album .cancel,
.WebRTC .Camera .album.switch .icon {
	-webkit-transform: scale(0);
	opacity: 0
}

.WebRTC .Camera .album .cancel {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAJ1BMVEUAAAD///////////////////////////////////////////////+uPUo5AAAADHRSTlMA8DAQz+Cvj2BAIJ93MxjDAAAAzklEQVRIx+3RIQoCURSF4UGb0WKZ4BTzBIvZ6hIMYra4D5sbcCuCguBblGG4/NwnfxXDnHYvh6+cZsy/ZbXo82N6PqZ7X7a5sC7PdJfy6BOwK6USBgKgErogAOapMGkHAuC+5IQQAEIACAEgFIAAEAJACAAhAIwAEAJACAAhAIQAEEIAZmTUFGZkVAGEYMbWiJixMyJmjFENiFEViFEdgBAAQgAIASAEgFAA4htQAgDikAqnACDeqQAAkQoAEOm+BADxSvfs2lTZ3Joxv80Ho+CrZvV70fsAAAAASUVORK5CYII=) no-repeat;
	background-size: 100% auto;
	font-size: .3rem;
	width: 100%;
	height: 100%;
	font-weight: 300;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	right: 0;
	bottom: 0;
	margin: auto;
	-webkit-transition: all .35s
}

.WebRTC .Camera .shot {
	background: hsla(0, 0%, 100%, .2);
	width: .6rem;
	height: .6rem;
	border: .06rem solid #fff;
	border-radius: 100%;
	position: absolute;
	left: 50%;
	bottom: .28rem;
	margin-left: -.33rem
}

.WebRTC .Camera .shot .yes {
	-webkit-transition: all .35s;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAALVBMVEUAAAD///////////////////////////////////////////////////////+hSKubAAAADnRSTlMAoPAwsCA/38AQ0JBvYN3iADUAAACsSURBVEjH7c4hDsJAFEXRIQQUghVgip40SCQLqECgWQQL6RaLgaTpW0NVc1Px/tg26bX/5+SlrVV0rOP7Kf/eKeoiVdF9J6krAPqHAA8W0FAAdC4A3YqAw+PThsBTqsIFjfStowVZEHOABwgAagQxBxgJAUD7LEEA0A0CgCAMAGEACAdAABgCwBET4IjrBDhCAIYAMASAIQAMAWAIAEMAOAKA6K4+xb3atLXgRg5W8cWajPYXAAAAAElFTkSuQmCC) no-repeat;
	background-size: 100% auto;
	width: .32rem;
	height: .32rem;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -.16rem 0 0 -.16rem;
	-webkit-transform: scale(0);
	opacity: 0
}

.WebRTC .Camera .shot.confirm .yes {
	-webkit-transform: scale(1);
	opacity: 1
}

@-webkit-keyframes progress-bar-stripes {
	0% {
		background-position: 0 0
	}

	to {
		background-position: .2rem 0
	}
}

@keyframes progress-bar-stripes {
	0% {
		background-position: 0 0
	}

	to {
		background-position: .2rem 0
	}
}

@-webkit-keyframes rotation-up {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

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

@keyframes rotation-up {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

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

@-webkit-keyframes rotation-down {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

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

@keyframes rotation-down {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

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

@-webkit-keyframes mirror-smile {
	25% {
		opacity: .9
	}

	37% {
		opacity: .7
	}

	50% {
		opacity: .65
	}

	62% {
		opacity: .75
	}

	75% {
		opacity: .85
	}

	0%,
	to {
		opacity: 1
	}
}

@keyframes mirror-smile {
	25% {
		opacity: .9
	}

	37% {
		opacity: .7
	}

	50% {
		opacity: .65
	}

	62% {
		opacity: .75
	}

	75% {
		opacity: .85
	}

	0%,
	to {
		opacity: 1
	}
}

@-webkit-keyframes markSkew {
	20% {
		-webkit-transform: skew(-13deg);
		transform: skew(-13deg)
	}

	80% {
		-webkit-transform: skew(13deg);
		transform: skew(13deg)
	}
}

@keyframes markSkew {
	20% {
		-webkit-transform: skew(-13deg);
		transform: skew(-13deg)
	}

	80% {
		-webkit-transform: skew(13deg);
		transform: skew(13deg)
	}
}

@-webkit-keyframes markScale {
	20% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	50% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	80% {
		-webkit-transform: skew(1.1);
		transform: skew(1.1)
	}
}

@keyframes markScale {
	20% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	50% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	80% {
		-webkit-transform: skew(1.1);
		transform: skew(1.1)
	}
}

@-webkit-keyframes anima_tada {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	10%,
	5% {
		-webkit-transform: scale(.9) rotate(-5deg);
		transform: scale(.9) rotate(-5deg)
	}

	15%,
	25%,
	35%,
	45% {
		-webkit-transform: scale(1.05) rotate(3deg);
		transform: scale(1.05) rotate(3deg)
	}

	20%,
	30%,
	40% {
		-webkit-transform: scale(1.05) rotate(-3deg);
		transform: scale(1.05) rotate(-3deg)
	}

	50%,
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes anima_tada {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	10%,
	5% {
		-webkit-transform: scale(.9) rotate(-5deg);
		transform: scale(.9) rotate(-5deg)
	}

	15%,
	25%,
	35%,
	45% {
		-webkit-transform: scale(1.05) rotate(3deg);
		transform: scale(1.05) rotate(3deg)
	}

	20%,
	30%,
	40% {
		-webkit-transform: scale(1.05) rotate(-3deg);
		transform: scale(1.05) rotate(-3deg)
	}

	50%,
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@-webkit-keyframes anima_jelly {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}

	15% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}

	20% {
		-webkit-transform: scale3d(.85, 1.15, 1);
		transform: scale3d(.85, 1.15, 1)
	}

	25% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}

	32.5% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1)
	}

	37.5% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1)
	}

	50%,
	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}

@keyframes anima_jelly {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}

	15% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}

	20% {
		-webkit-transform: scale3d(.85, 1.15, 1);
		transform: scale3d(.85, 1.15, 1)
	}

	25% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}

	32.5% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1)
	}

	37.5% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1)
	}

	50%,
	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}

.Page.home .mirror {
	position: absolute;
	top: .875rem;
	left: .23rem;
	width: 3.3rem
}

.Page.home .mirror__border {
	position: absolute;
	left: 0;
	top: 0;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.mirror.png?0a95c1fd);
	background-position: 0rem 0rem;
	background-repeat: no-repeat;
	height: 3.865rem;
	width: 3.3rem;
	background-size: 8.77rem 8.125rem
}

.Page.home .mirror__hand {
	position: absolute;
	top: .8rem;
	left: .1rem;
	width: .655rem;
	height: 1.65rem;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/skip-hand.png?ac318bfa)
}

.Page.home .mirror__wrap {
	position: absolute;
	left: .36rem;
	top: .27rem
}

.Page.home .mirror__img {
	max-width: 2.6rem
}

.Page.home .mirror__img.hide {
	display: none
}

.Page.home .mirror__bg {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.mirror.png?0a95c1fd);
	background-position: -3.45rem 0rem;
	background-repeat: no-repeat;
	height: 3.065rem;
	width: 2.585rem;
	background-size: 8.77rem 8.125rem
}

.Page.home .mirror__broken {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.mirror.png?0a95c1fd);
	background-position: -6.185rem 0rem;
	background-repeat: no-repeat;
	height: 3.065rem;
	width: 2.585rem;
	background-size: 8.77rem 8.125rem
}

.Page.home .mirror__shadow {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.mirror.png?0a95c1fd);
	background-position: 0rem -4.015rem;
	background-repeat: no-repeat;
	height: 3.065rem;
	width: 2.585rem;
	background-size: 8.77rem 8.125rem;
	-webkit-animation: mirror-smile 1.2s infinite;
	animation: mirror-smile 1.2s infinite
}

.Page.home .mirror__smile {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.mirror.png?0a95c1fd);
	background-position: -2.735rem -4.015rem;
	background-repeat: no-repeat;
	height: 3.065rem;
	width: 2.585rem;
	background-size: 8.77rem 8.125rem;
	-webkit-animation: mirror-smile 1s infinite;
	animation: mirror-smile 1s infinite
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color:  #666;
  font-size: 16px;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #666;
  font-size: 16px;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #666;
  font-size: 16px;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #666;
  font-size: 16px;
}
.qusarea{
	display: none;
	width: 2rem;
	line-height: .6rem;
	border: none;
	border-bottom: 2px solid rgba(0,0,0,0.4);
	position: absolute;
	text-align: center;
	background: rgba(0,0,0,0.1);
	left: .66rem;
	top: 1.5rem;
	z-index: 90;
	color:white;
	font-size: 24px;
	font-weight: bold;
}
.Page.home .mirror__reflect {
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.mirror.png?0a95c1fd);
	background-position: -5.47rem -4.015rem;
	background-repeat: no-repeat;
	height: 3.065rem;
	width: 2.585rem;
	background-size: 8.77rem 8.125rem
}

.Page.home .mirror--broken .mirror__shadow,
.Page.home .mirror--broken .mirror__smile,
.Page.home .mirror--broken .mirror__start,
.Page.home .mirror--shadow .mirror__broken,
.Page.home .mirror--shadow .mirror__smile,
.Page.home .mirror--shadow .mirror__start,
.Page.home .mirror--smile .mirror__broken,
.Page.home .mirror--smile .mirror__shadow,
.Page.home .mirror--smile .mirror__start,
.Page.home .mirror--start .mirror__broken,
.Page.home .mirror--start .mirror__reflect,
.Page.home .mirror--start .mirror__shadow,
.Page.home .mirror--start .mirror__smile {
	display: none
}

.Page.home .writer {
	position: absolute;
	left: .75rem;
	top: 4.4rem;
	width: 2.425rem;
	height: .4rem
}

.Page.home .writer__content {
	font-weight: 700;
	font-size: .14rem;
	line-height: .2rem;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

.Page.home .writer__content--big {
	letter-spacing: .02rem;
	font-size: .145rem
}

.Page.home .btn {
	position: absolute;
	bottom: .1rem;
	left: .875rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.mirror.png?0a95c1fd);
	background-position: 0rem -7.23rem;
	background-repeat: no-repeat;
	height: 0.895rem;
	width: 1.985rem;
	background-size: 8.77rem 8.125rem;
	-webkit-animation: anima_tada 1.5s infinite;
	animation: anima_tada 1.5s infinite
}

.Page.home .btn>div {
	-webkit-transition: all .15s ease-out;
	transition: all .15s ease-out;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-weight: 700;
	font-size: .23rem;
	color: #f7e7d9;
	letter-spacing: .04rem;
	width: 1.53rem;
	height: .405rem;
	text-align: center;
	line-height: .405rem
}

.Page.home .btn>div input[type=file] {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer
}

.Page.home .btn--photo .btn__ready,
.Page.home .btn--photo .btn__start,
.Page.home .btn--ready .btn__photo,
.Page.home .btn--ready .btn__start,
.Page.home .btn--start .btn__photo,
.Page.home .btn--start .btn__ready {
	display: none
}

@-webkit-keyframes progress-bar-stripes {
	0% {
		background-position: 0 0
	}

	to {
		background-position: .2rem 0
	}
}

@keyframes progress-bar-stripes {
	0% {
		background-position: 0 0
	}

	to {
		background-position: .2rem 0
	}
}

@-webkit-keyframes rotation-up {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

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

@keyframes rotation-up {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

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

@-webkit-keyframes rotation-down {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

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

@keyframes rotation-down {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

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

@-webkit-keyframes mirror-smile {
	25% {
		opacity: .9
	}

	37% {
		opacity: .7
	}

	50% {
		opacity: .65
	}

	62% {
		opacity: .75
	}

	75% {
		opacity: .85
	}

	0%,
	to {
		opacity: 1
	}
}

@keyframes mirror-smile {
	25% {
		opacity: .9
	}

	37% {
		opacity: .7
	}

	50% {
		opacity: .65
	}

	62% {
		opacity: .75
	}

	75% {
		opacity: .85
	}

	0%,
	to {
		opacity: 1
	}
}

@-webkit-keyframes markSkew {
	20% {
		-webkit-transform: skew(-13deg);
		transform: skew(-13deg)
	}

	80% {
		-webkit-transform: skew(13deg);
		transform: skew(13deg)
	}
}

@keyframes markSkew {
	20% {
		-webkit-transform: skew(-13deg);
		transform: skew(-13deg)
	}

	80% {
		-webkit-transform: skew(13deg);
		transform: skew(13deg)
	}
}

@-webkit-keyframes markScale {
	20% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	50% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	80% {
		-webkit-transform: skew(1.1);
		transform: skew(1.1)
	}
}

@keyframes markScale {
	20% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	50% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	80% {
		-webkit-transform: skew(1.1);
		transform: skew(1.1)
	}
}

@-webkit-keyframes anima_tada {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	10%,
	5% {
		-webkit-transform: scale(.9) rotate(-5deg);
		transform: scale(.9) rotate(-5deg)
	}

	15%,
	25%,
	35%,
	45% {
		-webkit-transform: scale(1.05) rotate(3deg);
		transform: scale(1.05) rotate(3deg)
	}

	20%,
	30%,
	40% {
		-webkit-transform: scale(1.05) rotate(-3deg);
		transform: scale(1.05) rotate(-3deg)
	}

	50%,
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes anima_tada {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	10%,
	5% {
		-webkit-transform: scale(.9) rotate(-5deg);
		transform: scale(.9) rotate(-5deg)
	}

	15%,
	25%,
	35%,
	45% {
		-webkit-transform: scale(1.05) rotate(3deg);
		transform: scale(1.05) rotate(3deg)
	}

	20%,
	30%,
	40% {
		-webkit-transform: scale(1.05) rotate(-3deg);
		transform: scale(1.05) rotate(-3deg)
	}

	50%,
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@-webkit-keyframes anima_jelly {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}

	15% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}

	20% {
		-webkit-transform: scale3d(.85, 1.15, 1);
		transform: scale3d(.85, 1.15, 1)
	}

	25% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}

	32.5% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1)
	}

	37.5% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1)
	}

	50%,
	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}

@keyframes anima_jelly {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}

	15% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}

	20% {
		-webkit-transform: scale3d(.85, 1.15, 1);
		transform: scale3d(.85, 1.15, 1)
	}

	25% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}

	32.5% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1)
	}

	37.5% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1)
	}

	50%,
	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}

.Page.result .result__mirror {
	position: absolute;
	top: .04rem;
	right: -.09rem;
	width: 3.645rem;
	height: 4.715rem
}

.Page.result .result__mirror__border {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.result.png?7185865a591e35071d3ec181016efd8f);
	background-position: 0rem 0rem;
	background-repeat: no-repeat;
	height: 4.715rem;
	width: 3.645rem;
	background-size: 5.275rem 5.06rem
}

.Page.result .result__mirror__hand {
	position: absolute;
	top: .8rem;
	left: .1rem;
	width: .655rem;
	height: 1.65rem;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/skip-hand.png?ac318bfa)
}

.Page.result .result__mirror__image {
	position: absolute;
	height: 2.9rem;
	width: 2.6rem;
	left: .52rem;
	top: .8rem;
	border-radius: .95rem;
	overflow: hidden
}

.Page.result .result__mirror__save {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	height: 5rem;
	width: 3rem;
	top: 0;
	opacity: 0
}

.Page.result .result__mirror__more {
	position: absolute;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.result.png?7185865a591e35071d3ec181016efd8f);
	background-position: -3.795rem -0.815rem;
	background-repeat: no-repeat;
	height: 1.33rem;
	width: 0.29rem;
	background-size: 5.275rem 5.06rem;
	right: .275rem;
	top: 1.6rem
}

.Page.result .result__mirror__tips {
    top: 1.425rem;
    left: 0.8rem;
    width: 2rem;
    text-shadow: 0 0.02rem 0 rgb(6 6 6 / 43%);
    color: #e0d9d9;
    font-size: .18rem;
    line-height: 2;
    letter-spacing: .015rem;
}

.Page.result .result__mirror__brand,
.Page.result .result__mirror__tips {
	text-align: center;
	position: absolute;
	font-weight: 500;
	font-family: Microsoft YaHei !important
}

.Page.result .result__mirror__brand {
	width: 1.3rem;
	height: .3rem;
	left: 1.11rem;
	top: 3.64rem;
	color: #fff;
	text-shadow: 0 .01rem 0 rgba(6, 6, 6, .43);
	font-size: .135rem;
	line-height: .27rem;
	text-transform: uppercase;
	letter-spacing: .02rem;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.Page.result .result__mirror__brand--bg {
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/skip-result-brand.png?8c36fb9f)
}



.Page.result .result__title {
	position: absolute;
	bottom: 1.1rem;
	left: .57rem;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.result.png?7185865a591e35071d3ec181016efd8f);
	background-position: 0rem -4.865rem;
	background-repeat: no-repeat;
	height: 0.195rem;
	width: 2.62rem;
	background-size: 5.275rem 5.06rem
}

.Page.result .result__nature {
	position: absolute;
	width: 2.8rem;
	height: 1.2rem;
	bottom: .45rem;
	left: .48rem
}

.Page.result .result__nature__title {
	position: absolute;
	top: .14rem;
	left: 0;
	width: 100%;
	line-height: 1;
	color: #fbf9e6;
	font-weight: 400;
	font-size: .14rem;
	text-align: center;
	letter-spacing: .025rem
}

.Page.result .result__nature__title--red {
	color: #fc5e49
}

.Page.result .result__nature__wrap {
	position: absolute;
	width: 2.55rem;
	height: .5rem;
	top: .7rem;
	left: .15rem;
	font-size: .12rem;
	color: #bab7aa;
	font-weight: 400;
	line-height: 1
}

.Page.result .result__nature__wrap:after,
.Page.result .result__nature__wrap:before {
	content: "";
	display: table
}

.Page.result .result__nature__wrap:after {
	clear: both
}

.Page.result .result__nature__item {
	float: left;
	position: relative;
	width: .825rem;
	height: .25rem
}

.Page.result .result__nature__item:first-child .result__nature__bar {
	background-color: #815292;
	background-image: -webkit-gradient(linear, left bottom, left top, from(#72662e), to(#e2b220));
	background-image: linear-gradient(0deg, #72662e 0, #e2b220)
}

.Page.result .result__nature__item:nth-child(2) .result__nature__bar {
	background-color: #8a6044;
	background-image: -webkit-gradient(linear, left bottom, left top, from(#562e1a), to(#b99880));
	background-image: linear-gradient(0deg, #562e1a 0, #b99880)
}

.Page.result .result__nature__item:nth-child(3) .result__nature__bar {
	background-color: #4d6d3e;
	background-image: -webkit-gradient(linear, left bottom, left top, from(#203a17), to(#8da780));
	background-image: linear-gradient(0deg, #203a17 0, #8da780)
}

.Page.result .result__nature__item:nth-child(4) .result__nature__bar {
	background-color: #706d6e;
	background-image: -webkit-gradient(linear, left bottom, left top, from(#3c3a39), to(#a2a0a0));
	background-image: linear-gradient(0deg, #3c3a39 0, #a2a0a0)
}

.Page.result .result__nature__item:nth-child(5) .result__nature__bar {
	background-color: #3b6381;
	background-image: -webkit-gradient(linear, left bottom, left top, from(#16314c), to(#789cb2));
	background-image: linear-gradient(0deg, #16314c 0, #789cb2)
}

.Page.result .result__nature__label {
	position: absolute;
	left: .1rem
}

.Page.result .result__nature__progress {
	position: absolute;
	left: .42rem;
	top: .02rem;
	width: .4rem;
	height: .07rem;
	-webkit-box-shadow: 0 .005rem 0 hsla(0, 0%, 100%, .15), inset 0 .005rem 0 rgba(0, 0, 0, .25);
	box-shadow: 0 .005rem 0 hsla(0, 0%, 100%, .15), inset 0 .005rem 0 rgba(0, 0, 0, .25);
	background-color: rgba(0, 0, 0, .8);
	border-radius: .035rem
}

.Page.result .result__nature__bar {
	-webkit-box-shadow: inset 0 .005rem 0 hsla(0, 0%, 100%, .25);
	box-shadow: inset 0 .005rem 0 hsla(0, 0%, 100%, .25);
	position: absolute;
	height: .05rem;
	top: .01rem;
	left: .01rem;
	border-radius: .025rem;
	background-color: #008b8b
}

.Page.result .result__btn {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: .665rem;
	z-index: 8
}

.Page.result .result__btn__common {
	position: absolute;
	top: 0;
	background-image: url(https://h5.meitu.com/xiuxiu/halloween/dist/images/sprite.result.png?7185865a591e35071d3ec181016efd8f);
	background-position: -3.795rem 0rem;
	background-repeat: no-repeat;
	height: 0.665rem;
	width: 1.48rem;
	background-size: 5.275rem 5.06rem
}

.Page.result .result__btn__common span {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-shadow: 0 .005rem .025rem rgba(0, 0, 0, .45);
	color: #f7e7d9;
	font-size: .14rem;
	font-weight: 700;
	letter-spacing: .025rem
}

.Page.result .result__btn__share {
	left: .45rem;
	-webkit-animation: anima_jelly 1.5s infinite;
	animation: anima_jelly 1.5s infinite
}

.Page.result .result__btn__save {
	right: .27rem
}

.Page.result .result__btn__try {
	left: 1.16rem;
	-webkit-animation: anima_jelly 1.5s infinite;
	animation: anima_jelly 1.5s infinite
}

.Page.result .result__btn--brower .result__btn__try,
.Page.result .result__btn--friend .result__btn__save,
.Page.result .result__btn--friend .result__btn__share,
.Page.result .result__btn--xiuxiu .result__btn__try {
	display: none
}