/*-----------------------------全局样式-------------------------------------*/
body,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:rgba(0,0,0,0);background-clip:padding-box;-webkit-text-size-adjust:none}
h1,h2,h3,h4,h5,h6{font-size:.24rem;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-size:.24rem;font-family:inherit;-webkit-appearance:none}
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;font-size:.24rem;font-family:inherit}
textarea{resize:none}
html{height:100%;font-size:50px;overflow:hidden}/*.1rem=10px*/
body{font:.24rem/1 "Adobe Heiti Std R",tahoma, arial,"Hiragino Sans GB", "Microsoft Yahei", \5b8b\4f53, sans-serif;position:relative;color:#000;min-width:320px;height:100%;overflow:hidden}
a{color:#000;text-decoration:none;cursor:pointer}
a:hover,a:active,a:focus{text-decoration:none;outline:none}
*{touch-action:none}
@font-face{font-family:'font';src:url("font.ttf") format("truetype");font-weight:400;font-style:normal}
/*-----------------------------屏幕适配-------------------------------------*/
@media screen and (min-width:640px){body{width:640px;margin:auto}}
/*-----------------------------框架-------------------------------------*/
.page{width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden}
.auto-x{position:absolute;left:0;right:0;margin:auto}
.auto-y{position:absolute;top:0;bottom:0;margin:auto}
.bg{width:100%;height:100%}
img{display:block;width:100%}
.bg img{height:100%}
.natural img{/*max-width:100%;*/width:auto;margin:0 auto}
.animate{opacity:0}
.hidden{visibility:hidden}
.none{display:none}
.need-scale .no-full-top img{position:relative;height:auto;top:0}
.need-scale .no-full-center img{position:absolute;height:auto;top:-4rem;bottom:-4rem;margin:auto}
.need-scale .no-full-bottom img{position:absolute;height:auto;bottom:0;left:0}
.need-scale .scale{transform-origin:center top;-webkit-transform-origin:center top;transform:scale(1);-webkit-transform:scale(1);height:100%;overflow:visible}
.need-scale .scale .page{overflow:visible}
.need-move .scale{height:10.08rem;top:0;bottom:0;margin:auto}
.need-move .scale,.need-move .scale .page{overflow:visible}
/*-----------------------------音乐-------------------------------------*/
#music{position:absolute;width:.48rem;height:.48rem;right:.2rem;top:.2rem;z-index:50000;visibility:hidden;background:url(../images/music.png) no-repeat center bottom / 100%}
#music.play{background-position:center top}
/*-----------------------------加载页-------------------------------------*/
.loading-rotate{width:4.7rem;height:4.7rem;bottom:10%}
.ban{position:absolute;width:1.62rem;left:.84rem;top:-.54rem}
.loading-text{width:2.94rem;top:5.4rem}
.loading-rotate-ani{position:absolute;left:0;top:0;width:100%;height:100%}
.loading-boy{width:2.74rem;height:2.64rem}
.mouse{width:.72rem;height:.42rem;overflow:hidden;top:1.94rem}
.eye-1{width:.38rem;height:.38rem;position:absolute;left:.82rem;top:1.38rem}
.eye-2{width:.38rem;height:.38rem;position:absolute;left:1.52rem;top:1.38rem}
@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}
.on .loading-rotate-ani{animation:rotate 6s linear infinite;-webkit-animation:rotate 6s linear infinite}
.on .eye-1{animation:rotate 6s linear infinite;-webkit-animation:rotate 6s linear infinite}
.on .eye-2{animation:rotate 6s linear infinite;-webkit-animation:rotate 6s linear infinite}
.on .mouse img{animation:mouse 1s steps(1) infinite;-webkit-animation:mouse 1s steps(1) infinite}
@keyframes mouse{0%{transform:translateY(0)}50%{transform:translateY(-.42rem)}100%{transform:translateY(-.42rem)}}
@-webkit-keyframes mouse{0%{-webkit-transform:translateY(0)}50%{-webkit-transform:translateY(-.42rem)}100%{-webkit-transform:translateY(-.42rem)}}
#loading .hidden{font-family:'font'}
/*-----------------------------首页-------------------------------------*/
.logo{width:2.36rem;top:.2rem;opacity:0}
.bucket{top:1rem}
.bucket-1,.bucket-2,.bucket-3,.bucket-4{width:1.54rem;height:2rem;position:absolute;top:0;opacity:0}
.bucket-1{left:.04rem}
.bucket-2{left:1.62rem}
.bucket-3{left:3.24rem}
.bucket-4{left:4.78rem}
.home-boy{position:absolute;width:2.78rem;left:.38rem;top:3.28rem;opacity:0}
.home-box{width:3.32rem;height:2.92rem;position:absolute;left:2.94rem;top:3.94rem;opacity:0}
.home-text{width:2.68rem;position:absolute;left:.16rem;top:.68rem}
.home-ban{width:1.72rem;position:absolute;left:1.62rem;top:.18rem}
.home-button{width:2.56rem;height:.98rem;top:8.98rem;opacity:0}
@keyframes fade-in-up{0%{transform:translate(0,3rem);opacity:0}100%{transform:none;opacity:1}}
@-webkit-keyframes fade-in-up{0%{-webkit-transform:translate(0,3rem);opacity:0}100%{-webkit-transform:none;opacity:1}}
@keyframes fade-in-down{0%{transform:translate(0,-3rem);opacity:0}100%{transform:none;opacity:1}}
@-webkit-keyframes fade-in-down{0%{-webkit-transform:translate(0,-3rem);opacity:0}100%{-webkit-transform:none;opacity:1}}
@keyframes fade-in-right{0%{transform:translate(-3rem,0);opacity:0}100%{transform:none;opacity:1}}
@-webkit-keyframes fade-in-right{0%{-webkit-transform:translate(-3rem,0);opacity:0}100%{-webkit-transform:none;opacity:1}}
@keyframes fade-in-left{0%{transform:translate(3rem,0);opacity:0}100%{transform:none;opacity:1}}
@-webkit-keyframes fade-in-left{0%{-webkit-transform:translate(3rem,0);opacity:0}100%{-webkit-transform:none;opacity:1}}
@keyframes fade-in-big{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
@-webkit-keyframes fade-in-big{0%{-webkit-transform:scale(0);opacity:0}100%{-webkit-transform:scale(1);opacity:1}}
@keyframes fade-in-small{0%{transform:scale(3);opacity:0}100%{transform:scale(1);opacity:1}}
@-webkit-keyframes fade-in-small{0%{-webkit-transform:scale(3);opacity:0}100%{-webkit-transform:scale(1);opacity:1}}
.on .logo{animation:fade-in-up .5s ease both;-webkit-animation:fade-in-up .5s ease both}
.on .bucket-1{animation:fade-in-left .5s ease both .5s;-webkit-animation:fade-in-left .5s ease both .5s}
.on .bucket-2{animation:fade-in-left .5s ease both .6s;-webkit-animation:fade-in-left .5s ease both .6s}
.on .bucket-3{animation:fade-in-left .5s ease both .7s;-webkit-animation:fade-in-left .5s ease both .7s}
.on .bucket-4{animation:fade-in-left .5s ease both .8s;-webkit-animation:fade-in-left .5s ease both .8s}
.on .home-boy{animation:fade-in-right .5s ease both 1.2s;-webkit-animation:fade-in-right .5s ease both 1.2s}
.on .home-box{animation:fade-in-left .5s ease both 1.2s;-webkit-animation:fade-in-left .5s ease both 1.2s}
.on .home-ban{animation:tou 0.5s linear infinite alternate 1.2s;-webkit-animation:tou 0.5s linear infinite alternate 1.2s}
.on .home-text{animation:home-text 1s linear infinite 1.2s;-webkit-animation:home-text 1s linear infinite 1.2s}
@keyframes home-text{0%{opacity:1}60%{opacity:1}70%{opacity:0}80%{opacity:1}100%{opacity:1}}
@-webkit-keyframes home-text{0%{opacity:1}60%{opacity:1}70%{opacity:0}80%{opacity:1}100%{opacity:1}}
.on .home-button{animation:fade-in-up .5s ease both 1.7s;-webkit-animation:fade-in-up .5s ease both 1.7s}
.on .home-button img{animation:tou 0.5s linear infinite alternate 1.7s;-webkit-animation:tou 0.5s linear infinite alternate 1.7s}
@keyframes tou{0%{transform:translate(0,0)}100%{transform:translate(0,-.1rem)}}
@-webkit-keyframes tou{0%{-webkit-transform:translate(0,0)}100%{-webkit-transform:translate(0,-.1rem)}}
/*-----------------------------结果页-------------------------------------*/
.result-box{width:6.2rem;height:8.24rem;top:0;opacity:0}
.book-button{width:2.28rem;height:.98rem;top:6.04rem}
.result-text{text-align:center;color:#6b6965;font-size:.41rem;top:5.04rem;font-weight:bold}
.piao{left:.26rem;right:.26rem;top:.26rem;bottom:.3rem;position:absolute;overflow:hidden}
.piao img{position:absolute}
.piao-1{width:.24rem;height:.18rem;left:-.24rem;top:-.18rem}
.piao-2{width:.18rem;height:.18rem;left:-.18rem;top:-.18rem}
.piao-3{width:.48rem;height:.26rem;left:-.48rem;top:-.26rem}
.piao-4{width:.36rem;height:.56rem;left:-.36rem;top:-.56rem}
.piao-5{width:.24rem;height:.24rem;left:-.24rem;top:-.24rem}
.piao-6{width:.26rem;height:.26rem;left:-.26rem;top:-.26rem}
.piao-7{width:.26rem;height:.26rem;left:-.26rem;top:-.26rem}
.piao-8{width:.28rem;height:.28rem;left:-.28rem;top:-.28rem}
.piao-9{width:.44rem;height:.32rem;left:-.44rem;top:-.32rem}
.piao-10{width:.56rem;height:.32rem;left:-.56rem;top:-.32rem}
.again,.share{width:2.28rem;height:.98rem;position:absolute;top:8.54rem;opacity:0}
.again{left:.66rem}
.share{right:.66rem}
.result-tit{width:4.54rem;top:.9rem}
.result-title{width:2.6rem;top:2.06rem}
.result-number{text-align:center;top:1.48rem}
.result-number img{height:.5rem;display:inline-block;vertical-align:top;width:auto}
.result-number span{display:inline-block;vertical-align:top;font-size:.5rem;color:#34312a;font-family:'font';position:relative;top:-.04rem;margin:0 .1rem}
.on .result-box{animation:fade-in-big .5s cubic-bezier(.44,1.3,.67,1.04) both;-webkit-animation:fade-in-big .5s cubic-bezier(.44,1.3,.67,1.04) both}
.on .again,.on .share{animation:fade-in-up .5s ease both .3s;-webkit-animation:fade-in-up .5s ease both .3s}
.on .book-button{animation:tou 0.5s linear infinite alternate;-webkit-animation:tou 0.5s linear infinite alternate}
.result-type-1{width:2.02rem;height:3.46rem;top:2.42rem}
.result-type-2{width:3.88rem;height:2.58rem;top:2.3rem}
.result-type-3{width:2.2rem;height:3.22rem;top:2.4rem}
/*-----------------------------分享-------------------------------------*/
#share{background:rgba(0,0,0,.5)}
.share-hand{width:.8rem;right:.46rem;top:.8rem;position:absolute}
.on .share-hand{animation:tou 0.5s linear infinite alternate;-webkit-animation:tou 0.5s linear infinite alternate}
/*-----------------------------长页-------------------------------------*/
.long-scroll{height:91.38rem;position:relative}
.back{position:absolute;width:.78rem;height:.78rem;left:.2rem;top:.3rem}
/*-----------------------------游戏-------------------------------------*/
.lunzi{position:absolute;width:7.04rem;height:1.86rem;left:-.2rem;top:-.3rem}
.laji{top:1.36rem;height:2.2rem;width:6.6rem;left:0;position:absolute}
.pro{width:2rem;height:2.2rem;float:left;margin-right:.2rem;transition:transform .3s ease;-webkit-transition:-webkit-transform .3s ease}
.laji-scroll{width:44rem;position:relative;height:2.2rem;transform:translateX(-2.2rem);-webkit-transform:translateX(-2.2rem)}
.tech{width:2.26rem;position:absolute;left:3.38rem;top:2.34rem}
#game .bucket{top:5.5rem}
#game .bucket div{opacity:1;animation:none;-webkit-animation:none}
#game div.wright{position:absolute;width:1.1rem;top:0.2rem;left:.22rem;opacity:0}
#game div.wrong{position:absolute;width:1.1rem;top:0.2rem;left:.22rem;opacity:0}
#game div.explain1{position:absolute;width:1.8rem;top:0rem;left:.22rem;opacity:0;z-index: 1;}
#game div.explain2{position:absolute;width:1.8rem;top:0rem;left:.22rem;opacity:0;z-index: 1;}
#game .abandon{width:2.28rem;height:.98rem;position:absolute;top:3.54rem;opacity:0;left:2rem}
.pro-fixed{position:absolute}
.score{text-align:center;font-size:.3rem;font-family:'font';top:.96rem}