#app-loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .9);
	z-index: 4;
	font-size: 24px;
	color: #fff;
	text-align: center
}

#app-loading .loading-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 200px;
	height: 250px
}

#app-loading img {
	width: 200px;
	height: 200px
}
@font-face {
		font-family: myFirstFont;
		src: url(//img1.cache.netease.com/utf8/love/img17/special/answerbook/assets/fonts/FZXZZBJW.6851d8bb.woff)
	}

	#app,
	body,
	html {
		height: 100%
	}

	#app {
		background: #000
	}

	p {
		margin: 0
	}

	a {
		text-decoration: none;
		color: #6e553a
	}

	ul {
		margin: 0;
		padding: 0
	}

	li {
		list-style: none
	}

	.font-fz {
		font-family: myFirstFont
	}

	.font-pf {
		font-family: PingFangSC-Regular, sans-serif
	}

	.app-content {
		height: 100%
	}

	.audio-part {
		position: absolute;
		top: .27rem;
		right: .25rem;
		z-index: 6
	}

	.audio-part .audio-btn {
		width: 1.02rem;
		height: 1.03rem
	}

	.audio-part .audio-btn.play {
		background-image: url(//img1.cache.netease.com/love/image/page/special/answerbook/audio-play.png);
		-webkit-animation: rotate 3s infinite linear;
		animation: rotate 3s infinite linear
	}

	.audio-part .audio-btn.pause,
	.audio-part .audio-btn.play {
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.audio-part .audio-btn.pause {
		background-image: url(//img1.cache.netease.com/love/image/page/special/answerbook/audio-pause.png)
	}

	.section {
		position: relative;
		height: 100%;
		min-height: 17.34rem;
		width: 100%
	}

	.section-index {
		opacity: .5;
		-webkit-transition: opacity 2s ease-in-out;
		-o-transition: opacity 2s ease-in-out;
		transition: opacity 2s ease-in-out
	}

	.section-index.showing {
		opacity: 1
	}

	.book-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/bg-book.png")
	}

	.book-bg,
	.light {
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.light {
		width: .22rem;
		height: .21rem;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/light.png")
	}

	.wrapper-light {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 3;
		pointer-events: none
	}

	.wrapper-light-1 {
		-webkit-animation: vertical-animation-1 5s linear 0s infinite;
		animation: vertical-animation-1 5s linear 0s infinite
	}

	.wrapper-light-1 .light {
		-webkit-animation: hor-animation-1 5s linear 0s infinite;
		animation: hor-animation-1 5s linear 0s infinite
	}

	.wrapper-light-2 {
		left: 2rem;
		-webkit-animation: vertical-animation-2 8s linear 0s infinite;
		animation: vertical-animation-2 8s linear 0s infinite
	}

	.wrapper-light-2 .light {
		-webkit-animation: hor-animation-2 8s linear 0s infinite;
		animation: hor-animation-2 8s linear 0s infinite
	}

	.wrapper-light-3 {
		bottom: 20%;
		-webkit-animation: vertical-animation-3 4s linear 0s infinite;
		animation: vertical-animation-3 4s linear 0s infinite
	}

	.wrapper-light-3 .light {
		-webkit-animation: hor-animation-3 4s linear 0s infinite;
		animation: hor-animation-3 4s linear 0s infinite
	}

	.wrapper-light-4 {
		bottom: 20%;
		left: 10.4rem;
		-webkit-animation: vertical-animation-4 6s linear 0s infinite;
		animation: vertical-animation-4 6s linear 0s infinite
	}

	.wrapper-light-4 .light {
		-webkit-animation: hor-animation-4 6s linear 0s infinite;
		animation: hor-animation-4 6s linear 0s infinite
	}

	.wrapper-light-5 {
		left: 9rem;
		-webkit-animation: vertical-animation-5 10s linear 0s infinite;
		animation: vertical-animation-5 10s linear 0s infinite
	}

	.wrapper-light-5 .light {
		-webkit-animation: hor-animation-5 10s linear 0s infinite;
		animation: hor-animation-5 10s linear 0s infinite
	}

	.wrapper {
		position: relative;
		z-index: 2;
		height: 100%;
		min-height: 17.34rem;
		width: 100%;
		font-size: .42rem;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-text-size-adjust: 100%
	}

	.wrapper.wrapper-index {
		position: relative;
		z-index: 5;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/bg.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.wrapper.wrapper-index .bottom-link {
		color: #8f836d
	}

	.wrapper.wrapper-index.hiding {
		-webkit-transform-origin: left center;
		-ms-transform-origin: left center;
		transform-origin: left center;
		-webkit-transform: rotateX(-20deg) rotateY(90deg);
		transform: rotateX(-20deg) rotateY(90deg);
		-webkit-transition: -webkit-transform 2s ease-in-out;
		transition: -webkit-transform 2s ease-in-out;
		-o-transition: transform 2s ease-in-out;
		transition: transform 2s ease-in-out;
		transition: transform 2s ease-in-out, -webkit-transform 2s ease-in-out
	}

	.wrapper.wrapper-ask {
		/* display: none; */
		color: #6e553a;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/bg-book.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 4;
	}

	.wrapper.wrapper-ask .container {
		position: absolute;
		top: 16%;
		width: 8rem;
		left: 2.4rem;
		height: 72%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center
	}

	.wrapper.wrapper-ask .ask-title {
		text-align: center;
		font-size: .54rem;
		line-height: .8rem
	}

	.wrapper.wrapper-ask.hiding {
		-webkit-transform-origin: left center;
		-ms-transform-origin: left center;
		transform-origin: left center;
		-webkit-transform: rotateX(-20deg) rotateY(90deg);
		transform: rotateX(-20deg) rotateY(90deg);
		-webkit-transition: -webkit-transform 2s ease-in-out;
		transition: -webkit-transform 2s ease-in-out;
		-o-transition: transform 2s ease-in-out;
		transition: transform 2s ease-in-out;
		transition: transform 2s ease-in-out, -webkit-transform 2s ease-in-out
	}

	.wrapper.wrapper-result {
		display: none;
		position: absolute;
		top: 0;
		left:0;
		z-index: 7;
		color: #6e553a;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/bg-book.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.wrapper.wrapper-result .container {
		position: absolute;
		top: 16%;
		width: 8rem;
		left: 2.3rem;
		height: 73%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center
	}

	.wrapper.wrapper-result .result-title {
		font-size: .54rem;
		width: 8rem
	}

	.wrapper.wrapper-result .result-page {
		position: absolute;
		top: 0;
		right: 0;
		font-family: Microsoft YaHei
	}

	.wrapper.wrapper-result .result-text {
		position: relative;
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 700;
		text-align: center;
		height: 5rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: 50%
	}

	.wrapper.wrapper-result .result-text .img {
		position: absolute;
		width: 5rem;
		height: 5rem;
		left: 50%;
		margin-left: -2.5rem;
		top: 0;
		opacity: .2;
		z-index: -1;
		background-size: 100% 100%
	}

	.wrapper.wrapper-result .result-text-title {
		position: relative;
		display: block;
		font-size: .54rem;
		line-height: .54rem
	}

	.wrapper.wrapper-result .btn-area {
		text-align: center;
		line-height: .36rem
	}

	.wrapper.wrapper-result .btn-refine {
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/btn-refine1.png")
	}

	.wrapper.wrapper-result .btn-refine,
	.wrapper.wrapper-result .btn-result-ask {
		display: inline-block;
		width: 4.56rem;
		height: 1.76rem;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.wrapper.wrapper-result .btn-result-ask {
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/btn-result-ask.png")
	}

	.wrapper.wrapper-result .re-ask {
		color: #6e553a;
		font-size: .36rem
	}

	.wrapper.wrapper-result .re-ask:after {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-width: .12rem;
		margin-left: .15rem;
		border-color: transparent transparent transparent #6e553a;
		border-style: solid
	}

	.wrapper.wrapper-result .qrcode-area {
		position: relative;
		width: 7.94rem;
		height: 3.54rem;
		margin: 0 auto;
		background-image: url("http://img1.cache.netease.com/love/image/page/special/answerbook/qrcode-bg.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		font-size: .36rem;
		line-height: .72rem;
		text-align: center;
	}

	.wrapper.wrapper-result .qrcode-area ul {
		padding: .74rem 0 0 0rem
	}

	.wrapper.wrapper-result .qrcode-area img {
		position: absolute;
		top: .84rem;
		right: 1.2rem;
		width: 1.8rem;
		height: 1.8rem
	}

	.wrapper.wrapper-result .textarea-part {
		background: rgba(0, 0, 0, .5);
		width: 7.88rem;
		height: 4.34rem;
		margin: 2.24rem auto .86rem;
		border-radius: .1rem;
		color: #8f8e8d
	}

	.wrapper.wrapper-result .textarea-part p {
		text-align: right;
		margin: 0 .54rem
	}

	.wrapper.wrapper-result .textarea-part .red {
		color: red
	}

	.wrapper.wrapper-result textarea {
		background: none;
		border: none;
		outline: none;
		width: 6.8rem;
		height: 3.4rem;
		margin: 0 .54rem;
		font-size: .48rem;
		line-height: .96rem;
		color: #8f8e8d
	}

	.wrapper.wrapper-result .btn-part {
		width: 7.88rem;
		margin: 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		text-align: center
	}

	.wrapper.wrapper-result .btn-refine-pass {
		display: inline-block;
		width: 3.8rem;
		height: 1.2rem;
		font-size: .48rem;
		line-height: 1.2rem;
		color: #fff;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/btn-refine-bg.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.wrapper.wrapper-result .btn-refine-pass.hiding {
		opacity: .5
	}

	.wrapper.wrapper-result .btn-refine-sure {
		display: inline-block;
		width: 5.88rem;
		height: 1.2rem;
		font-size: .48rem;
		line-height: 1.2rem;
		color: #fff;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/btn-refine-bg.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin: 0 1rem;
	}

	.wrapper.wrapper-result .result-part {
		position: absolute;
		width: 10.8rem;
		height: 15.5rem;
		top: .8rem
	}

	.wrapper.wrapper-result .result-img {
		display: block;
		width: 100%;
		height: 100%
	}

	.wrapper.wrapper-result .result-tips {
		text-align: center;
		color: #fff;
		font-size: .4rem;
		position: absolute;
		top: 14.8rem;
		width: 100%
	}

	.wrapper.wrapper-result .result-tips span {
		display: inline-block;
		min-width: 5.6rem;
		padding: .15rem;
		border-radius: .15rem;
		background: rgba(0, 0, 0, .85)
	}

	.bottom-link {
		display: block;
		font-size: .36rem;
		text-align: center
	}

	.bottom-link .huatian-logo {
		display: inline-block;
		width: .62rem;
		height: .41rem;
		margin-right: .1rem;
		vertical-align: middle;
		background-image: url("/proxy?target=http://img1.cache.netease.com/love/image/page/special/answerbook/huatian-logo.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.item-wrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		height: 52%;
		width: 100%;
		position: absolute;
		top: 40%
	}

	.icon-question {
		position: absolute;
		top: .27rem;
		right: 1.7rem;
		width: 1.02rem;
		height: 1.03rem;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/icon-question1.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.ask-area {
		text-align: center;
		height: 5rem
	}

	.btn-ask {
		display: inline-block;
		width: 6rem;
		height: 2.5rem;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/btn-ask.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.text-area {
		height: 3.36rem;
		line-height: .84rem;
		width: 4.8rem;
		color: #f9eec1
	}

	.text-area p {
		display: none;
		height: .84rem;
		overflow: hidden
	}

	.text-area p.p-1 {
		text-indent: .6rem;
		
	}

	.text-area p.p-3 {
		text-indent: 1rem;
		animation-delay: 2s;
	}

	.text-area p.p-4 {
		text-indent: 1.4rem;
		animation-delay: 2s; 
	}

	.text-area p.showing {
		display: block;
		-webkit-animation: showing 1s steps(50) forwards;
		animation: showing 1s steps(50) forwards
	}

	.text-area.hiding {
		opacity: 0;
		-webkit-transition: opacity 1s ease-in-out;
		-o-transition: opacity 1s ease-in-out;
		transition: opacity 1s ease-in-out
	}

	.s-layer {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .9);
		overflow: auto
	}

	.s-help-layer {
		z-index: 4;
		font-size: .42rem;
		color: #fff;
		line-height: .6rem
	}

	.s-help-layer .font-fz {
		font-size: .4rem;
		color: #b6a9a4;
		text-align: center
	}

	.s-help-layer .s-help-bd {
		position: relative;
		width: 9.6rem;
		margin: 1.6rem auto .46rem
	}

	.s-help-layer .s-help-close {
		position: absolute;
		top: .27rem;
		right: 1.7rem;
		width: 1.02rem;
		height: 1.03rem;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/help-close-1.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.s-help-layer .help-text {
		background: #3e3733;
		border: .02rem solid #9b8670;
		border-radius: .15rem;
		padding: .46rem
	}

	.s-help-layer .help-text-1 {
		padding-top: 1.4rem
	}

	.s-help-layer .help-text-1:before {
		content: "";
		position: absolute;
		width: 9.6rem;
		height: 2.04rem;
		top: -.56rem;
		left: 0;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/help-top.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.s-help-layer .help-text-2 {
		position: relative;
		margin: .36rem 0;
		line-height: .64rem
	}

	.s-help-layer .help-text-2 p {
		padding-left: .56rem
	}

	.s-help-layer .link-line {
		position: absolute;
		width: .2rem;
		height: 1.08rem;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/link-line.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.s-help-layer .link-line.link-line-1 {
		left: .3rem;
		top: -.72rem
	}

	.s-help-layer .link-line.link-line-2 {
		right: .3rem;
		top: -.72rem
	}

	.s-help-layer .link-line.link-line-3 {
		left: .3rem;
		bottom: -.72rem
	}

	.s-help-layer .link-line.link-line-4 {
		right: .3rem;
		bottom: -.72rem
	}

	.s-help-layer .icon {
		display: inline-block;
		width: .36rem;
		height: .34rem;
		margin-left: -.56rem;
		margin-right: .2rem;
		vertical-align: middle
	}

	.s-help-layer .icon-correct {
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/icon-correct.png")
	}

	.s-help-layer .icon-correct,
	.s-help-layer .icon-wrong {
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.s-help-layer .icon-wrong {
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/icon-wrong.png")
	}

	.s-write-box .s-write-box-bd {
		width: 8.17rem;
		height: 8.15rem;
		background-image: url("../img/write-box1.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.s-write-box #mycanvas {
		width: 7.17rem;
		height: 7.15rem;
		margin: .5rem
	}

	.s-write-box p {
		text-align: center;
		font-size: .3rem
	}

	.s-submit-layer {
		opacity: 1;
		z-index: 8;
		-webkit-transition: opacity 2s ease-in-out;
		-o-transition: opacity 2s ease-in-out;
		transition: opacity 2s ease-in-out
	}

	.s-submit-layer.showing {
		opacity: 1
	}

	.s-submit-bg {
		width: 9.6rem;
		height: 11.58rem;
		margin: 2.56rem auto 0;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/bg-submit.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: hidden
	}

	.s-submit-bg .round-area {
		position: relative;
		width: 8.2rem;
		height: 8.2rem;
		margin: 2.5rem auto 0
	}

	.s-submit-bg .round {
		position: absolute
	}

	.s-submit-bg .round .out-round {
		width: 7.8rem;
		height: 7.8rem;
		border-radius: 50%;
		border: .2rem solid #fff
	}

	.s-submit-bg .round .emp-round {
		width: .8rem;
		height: .4rem;
		position: absolute;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		background-color: #403935
	}

	.s-submit-bg .round .r1 {
		left: 50%;
		top: -.1rem
	}

	.s-submit-bg .round .r2 {
		bottom: -.1rem;
		left: 50%
	}

	.s-submit-bg .round.round1 {
		-webkit-animation: rotate 3s 1 ease-out;
		animation: rotate 3s 1 ease-out
	}

	.s-submit-bg .round.round2 {
		-webkit-animation: rotate2 3s 1 linear;
		animation: rotate2 3s 1 linear;
		top: .4rem;
		left: .4rem
	}

	.s-submit-bg .round.round2 .out-round {
		width: 7rem;
		height: 7rem
	}

	.s-submit-bg .round.round3 {
		-webkit-animation: rotate3 3s 1 ease-in;
		animation: rotate3 3s 1 ease-in;
		top: .8rem;
		left: .8rem
	}

	.s-submit-bg .round.round3 .out-round {
		width: 6.2rem;
		height: 6.2rem
	}

	.s-submit-bg img {
		display: block;
		width: 4rem;
		height: 4rem;
		padding: 2.1rem
	}

	.s-refine-bg {
		width: 8.6rem;
		height: 9.66rem;
		margin: 3.8rem auto 0;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/bg-refine.png")
	}

	.s-refine-bg,
	.wrapper-result .s-result-bg {
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: hidden
	}

	.wrapper-result .s-result-bg {
		position: relative;
		width: 10.8rem;
		height: 15.5rem;
		margin: .8rem auto 0;
		background-color: #000;
		background-image: url("/proxy?target=http://img1.cache.netease.com/love/image/page/special/answerbook/bg-refine-result.png")
	}

	.wrapper-result .s-result-bg .container-1 {
		top: 1.5rem;
		height: 12.5rem;
		position: absolute;
		width: 8rem;
		left: 1.4rem
	}

	.wrapper-result .s-result-bg .container-1 p {
		font-size: .36rem;
		width: 8rem;
		color: #a69682;
		line-height: .54rem;
		margin-bottom: 1.2rem
	}

	.wrapper-result .s-result-bg .container-1 .nickname {
		font-size: .54rem;
		color: #6e553a;
		margin-right: .16rem
	}

	.wrapper-result .s-result-bg .container-1 .question {
		display: block;
		margin-top: .24rem
	}

	.wrapper-result .s-result-bg .result-text-1 {
		position: relative;
		font-size: .9rem;
		line-height: 1.4rem;
		font-weight: 700;
		text-align: center;
		height: 5rem;
		width: 8rem;
		vertical-align: middle;
		opacity: 1;
		z-index: 1
	}

	.wrapper-result .s-result-bg .result-text-1 .img {
		position: absolute;
		width: 5rem;
		height: 5rem;
		left: 50%;
		margin-left: -2.5rem;
		top: 0;
		opacity: .2;
		background-size: 100% 100%
	}

	.wrapper-result .s-result-bg .result-text-1 .results {
		position: relative;
		display: table-cell;
		height: 4rem;
		width: 8rem;
		vertical-align: middle;
		text-align: center
	}

	.wrapper-result .s-result-bg .result-text-1 .results span {
		display: block
	}

	.wrapper-result .s-result-bg .qrcode-area {
		margin: .3rem auto .5rem
	}

	.s-refining-bg {
		width: 8.6rem;
		height: 11.58rem;
		margin: 2.5rem auto 0;
		background-image: url("https://img1.cache.netease.com/love/image/page/special/answerbook/bg-submit.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: hidden
	}

	.s-refining-bg .refining-image-bd {
		width: 5.83rem;
		height: 5.83rem;
		margin: 2.8rem auto .9rem;
		-webkit-animation: scale 1s 0s linear 1;
		animation: scale 1s 0s linear 1
	}

	.s-refining-bg .refining-image {
		width: 5.83rem;
		height: 5.83rem;
		background-image: url("//img1.cache.netease.com/love/image/page/special/answerbook/refining.png");
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-webkit-animation: rotate 3s 0s linear infinite;
		animation: rotate 3s 0s linear infinite
	}

	.s-refining-bg p {
		text-align: center;
		font-size: .54rem;
		color: #fff
	}

	.toast-background {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: transparent;
		z-index: 10;
		overflow: hidden
	}

	.toast-background .toast-main {
		position: absolute;
		left: 0;
		width: 100%;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		font-size: 0;
		text-align: center
	}

	.toast-background .toast-main .text {
		display: inline-block;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: .24rem;
		min-width: 50%;
		max-width: 90%;
		font-size: .54rem;
		color: #fff;
		text-align: center;
		word-wrap: break-word;
		background: #262626;
		border-radius: .5rem
	}

	.toast-background.toast-refine .toast-main .text {
		background: rgba(63, 56, 52, .8);
		padding: .15rem;
		border-radius: .15rem;
		text-align: center;
		color: #f2f0e8;
		font-size: .4rem
	}

	.s-login-layer .on-middle {
		position: absolute;
		left: 2.4rem;
		width: 6rem;
		text-align: center;
		top: 50%;
		background: #fff;
		border-radius: .1rem;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%)
	}

	.s-login-layer .on-middle p {
		padding: .9rem;
		color: #000;
		text-align: center;
		font-size: .54rem;
		font-weight: 700
	}

	.s-login-layer .on-middle .s-login-btn {
		height: .9rem;
		line-height: .9rem;
		border-top: 1px solid #e5e5e5
	}

	.s-login-layer .on-middle a {
		display: inline-block;
		width: 2.9rem;
		height: .9rem;
		color: #5499f0
	}

	.s-login-layer .on-middle .s-login-cancel {
		border-right: 1px solid #e5e5e5
	}

	@-webkit-keyframes showing {
		0% {
			width: 0
		}

		to {
			width: 100%
		}
	}

	@keyframes showing {
		0% {
			width: 0
		}

		to {
			width: 100%
		}
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	@-webkit-keyframes hor-animation-1 {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}

		25% {
			-webkit-transform: translateX(7rem);
			transform: translateX(7rem)
		}

		50% {
			-webkit-transform: translateX(6rem);
			transform: translateX(6rem)
		}

		to {
			-webkit-transform: translateX(10.8rem);
			transform: translateX(10.8rem)
		}
	}

	@keyframes hor-animation-1 {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}

		25% {
			-webkit-transform: translateX(7rem);
			transform: translateX(7rem)
		}

		50% {
			-webkit-transform: translateX(6rem);
			transform: translateX(6rem)
		}

		to {
			-webkit-transform: translateX(10.8rem);
			transform: translateX(10.8rem)
		}
	}

	@-webkit-keyframes vertical-animation-1 {
		0% {
			bottom: 0
		}

		25% {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg)
		}

		50% {
			-webkit-transform: rotate(-50deg);
			transform: rotate(-50deg)
		}

		to {
			bottom: 100%
		}
	}

	@keyframes vertical-animation-1 {
		0% {
			bottom: 0
		}

		25% {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg)
		}

		50% {
			-webkit-transform: rotate(-50deg);
			transform: rotate(-50deg)
		}

		to {
			bottom: 100%
		}
	}

	@-webkit-keyframes hor-animation-2 {
		0% {
			-webkit-transform: translateX(2rem);
			transform: translateX(2rem)
		}

		25% {
			-webkit-transform: translateX(4rem);
			transform: translateX(4rem)
		}

		50% {
			-webkit-transform: translateX(8rem);
			transform: translateX(8rem)
		}

		to {
			-webkit-transform: translateX(9rem);
			transform: translateX(9rem)
		}
	}

	@keyframes hor-animation-2 {
		0% {
			-webkit-transform: translateX(2rem);
			transform: translateX(2rem)
		}

		25% {
			-webkit-transform: translateX(4rem);
			transform: translateX(4rem)
		}

		50% {
			-webkit-transform: translateX(8rem);
			transform: translateX(8rem)
		}

		to {
			-webkit-transform: translateX(9rem);
			transform: translateX(9rem)
		}
	}

	@-webkit-keyframes vertical-animation-2 {
		0% {
			bottom: 0
		}

		25% {
			-webkit-transform: rotate(-30deg);
			transform: rotate(-30deg)
		}

		50% {
			-webkit-transform: rotate(-40deg);
			transform: rotate(-40deg)
		}

		to {
			bottom: 100%
		}
	}

	@keyframes vertical-animation-2 {
		0% {
			bottom: 0
		}

		25% {
			-webkit-transform: rotate(-30deg);
			transform: rotate(-30deg)
		}

		50% {
			-webkit-transform: rotate(-40deg);
			transform: rotate(-40deg)
		}

		to {
			bottom: 100%
		}
	}

	@-webkit-keyframes hor-animation-3 {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}

		25% {
			-webkit-transform: translateX(4rem);
			transform: translateX(4rem)
		}

		50% {
			-webkit-transform: translateX(6rem);
			transform: translateX(6rem)
		}

		to {
			-webkit-transform: translateX(8rem);
			transform: translateX(8rem)
		}
	}

	@keyframes hor-animation-3 {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}

		25% {
			-webkit-transform: translateX(4rem);
			transform: translateX(4rem)
		}

		50% {
			-webkit-transform: translateX(6rem);
			transform: translateX(6rem)
		}

		to {
			-webkit-transform: translateX(8rem);
			transform: translateX(8rem)
		}
	}

	@-webkit-keyframes vertical-animation-3 {
		0% {
			bottom: 20%
		}

		25% {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg)
		}

		50% {
			-webkit-transform: rotate(-50deg);
			transform: rotate(-50deg)
		}

		to {
			bottom: 100%
		}
	}

	@keyframes vertical-animation-3 {
		0% {
			bottom: 20%
		}

		25% {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg)
		}

		50% {
			-webkit-transform: rotate(-50deg);
			transform: rotate(-50deg)
		}

		to {
			bottom: 100%
		}
	}

	@-webkit-keyframes hor-animation-4 {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}

		25% {
			-webkit-transform: translateX(-3rem);
			transform: translateX(-3rem)
		}

		50% {
			-webkit-transform: translateX(-6rem);
			transform: translateX(-6rem)
		}

		to {
			-webkit-transform: translateX(-9rem);
			transform: translateX(-9rem)
		}
	}

	@keyframes hor-animation-4 {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}

		25% {
			-webkit-transform: translateX(-3rem);
			transform: translateX(-3rem)
		}

		50% {
			-webkit-transform: translateX(-6rem);
			transform: translateX(-6rem)
		}

		to {
			-webkit-transform: translateX(-9rem);
			transform: translateX(-9rem)
		}
	}

	@-webkit-keyframes vertical-animation-4 {
		0% {
			bottom: 20%
		}

		25% {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg)
		}

		50% {
			-webkit-transform: rotate(-50deg);
			transform: rotate(-50deg)
		}

		to {
			bottom: 100%
		}
	}

	@keyframes vertical-animation-4 {
		0% {
			bottom: 20%
		}

		25% {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg)
		}

		50% {
			-webkit-transform: rotate(-50deg);
			transform: rotate(-50deg)
		}

		to {
			bottom: 100%
		}
	}

	@-webkit-keyframes hor-animation-5 {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}

		25% {
			-webkit-transform: translateX(-3rem);
			transform: translateX(-3rem)
		}

		50% {
			-webkit-transform: translateX(-6rem);
			transform: translateX(-6rem)
		}

		to {
			-webkit-transform: translateX(-4rem);
			transform: translateX(-4rem)
		}
	}

	@keyframes hor-animation-5 {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}

		25% {
			-webkit-transform: translateX(-3rem);
			transform: translateX(-3rem)
		}

		50% {
			-webkit-transform: translateX(-6rem);
			transform: translateX(-6rem)
		}

		to {
			-webkit-transform: translateX(-4rem);
			transform: translateX(-4rem)
		}
	}

	@-webkit-keyframes vertical-animation-5 {
		0% {
			bottom: 0
		}

		25% {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg)
		}

		50% {
			-webkit-transform: rotate(-50deg);
			transform: rotate(-50deg)
		}

		to {
			bottom: 100%
		}
	}

	@keyframes vertical-animation-5 {
		0% {
			bottom: 0
		}

		25% {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg)
		}

		50% {
			-webkit-transform: rotate(-50deg);
			transform: rotate(-50deg)
		}

		to {
			bottom: 100%
		}
	}
</style>
<style type="text/css">
	/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
	html {
		line-height: 1.15;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%
	}

	body {
		margin: 0
	}

	article,
	aside,
	footer,
	header,
	nav,
	section {
		display: block
	}

	h1 {
		font-size: 2em;
		margin: .67em 0
	}

	figcaption,
	figure,
	main {
		display: block
	}

	figure {
		margin: 1em 40px
	}

	hr {
		-webkit-box-sizing: content-box;
		box-sizing: content-box;
		height: 0;
		overflow: visible
	}

	pre {
		font-family: monospace, monospace;
		font-size: 1em
	}

	a {
		background-color: transparent;
		-webkit-text-decoration-skip: objects
	}

	abbr[title] {
		border-bottom: none;
		text-decoration: underline;
		-webkit-text-decoration: underline dotted;
		text-decoration: underline dotted
	}

	b,
	strong {
		font-weight: inherit;
		font-weight: bolder
	}

	code,
	kbd,
	samp {
		font-family: monospace, monospace;
		font-size: 1em
	}

	dfn {
		font-style: italic
	}

	mark {
		background-color: #ff0;
		color: #000
	}

	small {
		font-size: 80%
	}

	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline
	}

	sub {
		bottom: -.25em
	}

	sup {
		top: -.5em
	}

	audio,
	video {
		display: inline-block
	}

	audio:not([controls]) {
		display: none;
		height: 0
	}

	img {
		border-style: none
	}

	svg:not(:root) {
		overflow: hidden
	}

	button,
	input,
	optgroup,
	select,
	textarea {
		font-family: sans-serif;
		font-size: 100%;
		line-height: 1.15;
		margin: 0
	}

	button,
	input {
		overflow: visible
	}

	button,
	select {
		text-transform: none
	}

	[type=reset],
	[type=submit],
	button,
	html [type=button] {
		-webkit-appearance: button
	}

	[type=button]::-moz-focus-inner,
	[type=reset]::-moz-focus-inner,
	[type=submit]::-moz-focus-inner,
	button::-moz-focus-inner {
		border-style: none;
		padding: 0
	}

	[type=button]:-moz-focusring,
	[type=reset]:-moz-focusring,
	[type=submit]:-moz-focusring,
	button:-moz-focusring {
		outline: 1px dotted ButtonText
	}

	fieldset {
		padding: .35em .75em .625em
	}

	legend {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		color: inherit;
		display: table;
		max-width: 100%;
		padding: 0;
		white-space: normal
	}

	progress {
		display: inline-block;
		vertical-align: baseline
	}

	textarea {
		overflow: auto
	}

	[type=checkbox],
	[type=radio] {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0
	}

	[type=number]::-webkit-inner-spin-button,
	[type=number]::-webkit-outer-spin-button {
		height: auto
	}

	[type=search] {
		-webkit-appearance: textfield;
		outline-offset: -2px
	}

	[type=search]::-webkit-search-cancel-button,
	[type=search]::-webkit-search-decoration {
		-webkit-appearance: none
	}

	::-webkit-file-upload-button {
		-webkit-appearance: button;
		font: inherit
	}

	details,
	menu {
		display: block
	}

	summary {
		display: list-item
	}

	canvas {
		display: inline-block
	}

	[hidden],
	template {
		display: none
	}