/*-----------------------------全局样式-------------------------------------*/
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)}
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%;background:#fff;;overflow:hidden;color:#fff;}
body a{color:#fff;text-decoration:none;cursor:pointer}
body a:hover,body a:active,body a:focus{text-decoration:none;outline:none}
/*-----------------------------框架-------------------------------------*/
#wrapper{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;overflow:hidden;}
.iScrollVerticalScrollbar{position:absolute;right:0;top:0;height:100%;width:4px}
.iScrollIndicator{position:absolute;right:0;background:rgba(255,255,255,0.2);width:4px;border-radius:2px}
.page{width:100%;position:relative;overflow:hidden;height:100%}
.full-img img{width:100%;display:block}
.auto-x{left:0;right:0;position:absolute;margin:auto}
.auto-y{top:0;bottom:0;position:absolute;margin:auto}
.swiper-container{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;overflow:hidden}
.swiper-slide{height:100%;position:relative;overflow:hidden}
.up{position:absolute;left:0;right:0;bottom:0;width:22px;height:34px;margin:auto;display:none;z-index:1000}
.ups{width:22px;height:14px;background:url(../img/up.png) no-repeat;background-size:100%;z-index:100;animation:up 1s ease-in infinite;-moz-animation:up 1s ease-in infinite;-webkit-animation:up 1s ease-in infinite;position:absolute;left:0;bottom:10px}
@-keyframes up{0%{bottom:0;opacity:0}50%{bottom:10px;opacity:1}100%{bottom:20px;opacity:0}}
@-moz-keyframes up{0%{bottom:0;opacity:0}50%{bottom:10px;opacity:1}100%{bottom:20px;opacity:0}}
@-webkit-keyframes up{0%{bottom:0;opacity:0}50%{bottom:10px;opacity:1}100%{bottom:20px;opacity:0}}
/*-----------------------------音乐-------------------------------------*/
#music{position:absolute;width:22px;height:22px;right:16px;top:16px;z-index:400}
.music{width:100%;height:100%;background:url(../img/music.PNG) no-repeat center center;background-size:100%;z-index:10;position:relative}
.play{animation:rotate 1.2s linear infinite;-webkit-animation:rotate 1.2s linear infinite}
#music>span{color:#fff;position:absolute;left:-60px;top:0;line-height:24px;font-size:14px;opacity:0;-webkit-transition:all 0.3s linear;transition:all 0.3s linear}
#music>span.zshow{left:-30px;opacity:1}
@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}
/*-----------------------------首页-------------------------------------*/

/*----------------第一屏---------------------*/
#page-1{background:url(../img/1-bg.png) no-repeat;background-size:100% auto;}
#page-1 .p1-t1{position:relative; margin-top:60px; display:none; }
#page-1 .p1-t2{position:relative; margin-top:10px; display:none; }
#page-1 .p1-t3{bottom:90px; display:none; }

.paper-animate{animation:paper-animate 1s linear 1;-webkit-animation:paper-animate 1s linear 1}
@keyframes paper-animate{0%{transform:translate(0,60px)}100%{transform:translate(0,0)}}
@-webkit-keyframes paper-animate{0%{-webkit-transform:translate(0,60px)}100%{-webkit-transform:translate(0,-0)}}

@keyframes paper-img{0%{opacity:0;}100%{opacity:1;)}}
@-webkit-keyframes paper-img{0%{opacity:0;}100%{opacity:1;}}

/*----------------第二屏---------------------*/
#page-2{background:url(../img/2-bg.png) no-repeat;background-size:100% auto;}
#page-2 .p2-t2{position:relative; margin-top:28px; display:none; }
#page-2 .p2-t3,#page-2 .p2-t4,#page-2 .p2-t5{position:relative; margin-top:10px; display:none; }
#page-2 .p2-t1{bottom:110px; display:none; }

/*----------------第三屏---------------------*/
#page-3{background:url(../img/3-bg.png) no-repeat;background-size:100% auto;}
#page-3 .p3-t1{position:relative; margin-top:26px; display:none; }
/*----------------第四屏---------------------*/
#page-4{background:url(../img/4-bg.png) no-repeat;background-size:100% auto;}
#page-4 .p4-t1{position:relative; margin:92% auto 0; display:none; }
/*----------------第五屏---------------------*/
#page-5{background:url(../img/5-bg.png) no-repeat;background-size:100% auto;}
#page-5 .p5-t1{position:relative; margin:92% auto 0; display:none; }
/*----------------第六屏---------------------*/
#page-6{background:url(../img/6-bg.png) no-repeat;background-size:100% auto;}
#page-6 .p6-t1{position:relative; margin:92% auto 0; display:none; }
/*----------------第七屏---------------------*/
#page-7{background:url(../img/7-bg.png) no-repeat;background-size:100% auto;}
#page-7 .p7-t1{position:relative; margin:92% auto 0; display:none; }
/*----------------第八屏---------------------*/
#page-8{background:url(../img/8-bg.png) no-repeat;background-size:100% auto;}
#page-8 .p8-t1{position:relative; margin:92% auto 0; display:none; }
/*----------------第九屏---------------------*/
#page-9{background:url(../img/9-bg.png) no-repeat;background-size:100% auto;}
#page-9 .p9-t1{position:relative; margin-top:26px; display:none; }
/*----------------第十屏---------------------*/
#page-10{background:url(../img/10-bg.png) no-repeat;background-size:100% auto;}
#page-10 .p10-t1{position:relative; margin:92% auto 0; display:none; }
/*----------------第十一屏---------------------*/
#page-11{background:url(../img/1-bg.png) no-repeat;background-size:100% auto;}
#page-11 .p11-t1{position:relative; margin-top:60px; display:none; }
#page-11 .p11-t2{bottom:110px; display:none; }


/*-----------------------------结果页-------------------------------------*/
.form{position:absolute;left:0;top:0;visibility:hidden;z-index:100; background:#022b47;}
.form form{position:absolute;left:30px;right:30px;top:38px;bottom:0;margin:auto}
.form li{height:40px;border-bottom:#0090ff 1px solid;position:relative;padding:0 0 0 70px}
.form label{position:absolute;left:0;width:70px;text-align:center;line-height:40px;color:#0090ff}
.form input{height:40px;width:100%;background:none;color:#fff;font-size:12px}
.form ul{margin:0 0 40px}
.form input.submit{height:36px;color:#fff;color:#0090ff;border:#0090ff 2px solid;font-size:14px;cursor:pointer}
.form input.submit:hover{background-color:#00050c}
.result{z-index:10;visibility:hidden;position:absolute;left:0;top:0;background:#000c20}
.result-div{position:absolute;left:22px;right:22px;top:38px;bottom:0;margin:auto}
.result-div .full-img{margin:27px 10px 15px}
.result-div .text{line-height:28px;font-size:11px;margin:0 0 22px}
.gua{width:275px;height:160px;margin:0 auto 46px;background:url(img/gua.png) no-repeat;background-size:100%;border-radius:5px}
#canvas{width:100%;height:100%}
.result a.button{top:auto;bottom:52px}
.share{position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.9) url(img/share.png) no-repeat right top;background-size:81px;visibility:hidden}
.share-text{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;text-align:center;line-height:28px;font-size:15px;color:#fff;font-weight:bold;height:56px}
.share strong{color:#ff1818}