@charset "UTF-8";
/*-----------------------------全局样式-------------------------------------*/
dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, span, a, input, textarea, p, blockquote, th, td, header, nav, footer, article, section, aside, time, figure { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

h1, h2, h3, h4, h5, h6 { font-size: 14px; font-weight: normal; }

ul { list-style: none; }

legend { display: none; }

fieldset, img { border: none; vertical-align: middle; }

em, cite, i { font-style: normal; }

input, button, textarea { outline: none; border: 0; vertical-align: middle; border: 0; font-family: Microsoft YaHei; }

input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; border-radius: 0; }

select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

textarea { resize: none; }

html { height: 100%; -webkit-text-size-adjust: none; overflow: hidden; }

body { font: 12px/18px Microsoft YaHei; position: relative; margin: 0 auto; color: #000; min-width: 320px; word-break: break-all; height: 100%; overflow: hidden; max-width: 640px; }

body a { color: #000; text-decoration: none; cursor: pointer; }

body a:hover, body a:active, body a:focus { text-decoration: none; outline: none; }

/*-----------------------------动画-------------------------------------*/
.swiper-container { overflow: hidden; width: 100%; height: 100%; position: absolute; left: 0; top: 0; max-width: 640px; right: 0; margin: auto; }

.swiper-wrapper { height: 100%; overflow: hidden; }

.swiper-slide { width: 100%; height: 100%; overflow: hidden; position: relative; float: left; }

.button { position: absolute; background-image: url(../images/button.png); background-repeat: no-repeat; background-size: 171px; text-indent: -9999px; }

.go-next { position: absolute; left: 0; right: 0; bottom: 10px; width: 14px; height: 22px; z-index: 1000; margin: auto; display: none; }

.go-next img { width: 100%; display: block; }

.animate { opacity: 0; }

/*-----------------------------首屏-------------------------------------*/
.sign { position: absolute; width: 172px; height: 235px; background: url(../images/sign.png) no-repeat; background-size: 100%; top: 0; bottom: 20px; left: 0; right: 0; margin: auto; }

.parallax { position: absolute; background-repeat: no-repeat; background-size: 100%; }

.parallax-1 { width: 54px; height: 42px; left: 100px; top: 35px; background-image: url(../images/parallax-1.png); }

.parallax-2 { width: 20px; height: 29px; left: 21px; top: 123px; background-image: url(../images/parallax-2.png); }

.parallax-3 { width: 29px; height: 29px; right: 62px; top: 39px; background-image: url(../images/parallax-3.png); }

.parallax-4 { width: 22px; height: 24px; right: 18px; top: 113px; background-image: url(../images/parallax-4.png); }

.parallax-5 { width: 34px; height: 51px; right: 18px; top: 230px; background-image: url(../images/parallax-5.png); }

.parallax-6 { width: 17px; height: 46px; right: 40px; bottom: 73px; background-image: url(../images/parallax-6.png); }

.parallax-7 { width: 42px; height: 24px; left: 25px; bottom: 93px; background-image: url(../images/parallax-7.png); }

.parallax-8 { width: 38px; height: 33px; left: 51px; bottom: 25px; background-image: url(../images/parallax-8.png); }

.parallax-9 { width: 32px; height: 27px; left: 0; right: 0; margin: auto; bottom: 40px; background-image: url(../images/parallax-9.png); }

.parallax-10 { width: 61px; height: 23px; right: 52px; bottom: 32px; background-image: url(../images/parallax-10.png); }

/*-----------------------------规则-------------------------------------*/
.play-time { font-size: 15px; text-align: center; color: #ffb300; border-bottom: #ffb300 1px solid; line-height: 30px; position: absolute; top: 20px; left: 20px; right: 20px; }

.rule-box { position: absolute; left: 20px; right: 20px; top: 72px; bottom: 97px; }

.rule { border: #ffb300 1px solid; height: 100%; color: #807e7f; line-height: 16px; font-size: 14px; padding: 10px; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; }

.rule h3, .rule strong { color: #ffb300; font-weight: normal; font-size: 14px; }

.rule p, .rule h3 { margin: 0 0 16px; }

.start-button { left: 0; right: 0; margin: auto; width: 171px; height: 56px; bottom: 22px; }

.start-button:active { background-position: left -56px; }

/*-----------------------------问题-------------------------------------*/
.question-title { font-size: 15px; text-align: center; color: #ffb300; border-bottom: #ffb300 1px solid; line-height: 24px; margin: 0 20px 20px; padding: 22px 3px 4px; }

.question { border: #ffb300 1px solid; margin: 0 20px 20px; }

.ul-question { margin: -9px 0 0; padding: 0 0 16px 31px; font-size: 15px; color: #807e7f; }

.ul-question li { margin: 24px 0 0; }

.ul-question em { float: left; margin: 0 0 0 -18px; }

.answer { padding: 0 4px; height: 37px; margin: 0 20px 20px; }

.answer li { float: left; width: 25%; }

.answer a { display: block; margin: 0 auto; width: 31px; height: 31px; color: #ffb300; border: #ffb300 3px solid; border-radius: 50%; line-height: 30px; text-align: center; font-size: 15px; position: relative; }

.answer li.selected a { color: #fff; }

.answer li.selected a:before { background-color: #ffb300; position: absolute; left: -1px; right: -1px; line-height: 30px; text-align: center; border-radius: 50%; top: -1px; bottom: -1px; }

.answer li.selected:nth-child(1) a:before { content: "A"; }

.answer li.selected:nth-child(2) a:before { content: "B"; }

.answer li.selected:nth-child(3) a:before { content: "C"; }

.answer li.selected:nth-child(4) a:before { content: "D"; }

.next-button { left: 0; right: 0; margin: 0 auto; width: 134px; height: 44px; background-position: left -112px; }

.next-button:active { background-position: left -156px; }

/*-----------------------------得分-------------------------------------*/
.score { line-height: 47px; margin: 0 20px; padding: 16px 4px 0; border-bottom: #ffb300 1px solid; font-size: 15px; color: #ffb300; position: relative; }

.score-number { font-size: 36px; position: absolute; left: 130px; font-weight: bold; }

.happy { line-height: 47px; margin: 0 20px 20px; padding: 0 4px 7px; border-bottom: #ffb300 1px solid; font-size: 15px; color: #ffb300; position: relative; }

.happy-star { position: absolute; left: 129px; width: 135px; height: 25px; background: url(../images/star.png) repeat-x; background-size: 27px; top: 12px; }

.happy-star em { display: block; height: 100%; background: url(../images/star.png) repeat-x left bottom; background-size: 27px; }

.comment { color: #807e7f; margin: 0 20px 20px; border: #ffb300 1px solid; padding: 10px; height: 178px; }

.comment p { margin: 0 0 18px; }

.score-button { height: 44px; margin: 0 20px; }

.view-true { float: left; width: 134px; height: 44px; background-position: left -200px; position: relative; }

.view-true:active { background-position: left -244px; }

.again { float: right; width: 134px; height: 44px; background-position: left -288px; position: relative; }

.again:active { background-position: left -332px; }

/*-----------------------------正确答案-------------------------------------*/
.answer-show { width: 130px; height: 130px; background: #ffb300 url(../images/true.png) no-repeat center 16px; background-size: 49px; border-radius: 50%; margin: 0 auto 10px; color: #fff; text-align: center; padding: 65px 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

.answer-show h3 { font-size: 15px; }

.answer-link { line-height: 24px; font-size: 15px; padding: 0 25px 0 33px; background: url(../images/answer-link.png) no-repeat 15px center; background-size: auto 33px; margin: 0 0 10px; }

.answer-link a:link, .answer-link a:visited, .answer-link a:hover, .answer-link a:active { color: #ff5e36; text-decoration: underline; }

.ad { color: #807e7f; margin: 0 25px 15px 33px; }

.ad strong { color: #ffb300; font-weight: normal; }

.follow { width: 134px; height: 44px; left: 0; right: 0; margin: auto; background-position: left -376px; display: none; }

.follow:active { background-position: left -420px; }