/*修改默认样式*/
html,body,div,img,ul,li,a,nav,span,p,h1,h2,h3,h4,h5,h6{margin: 0;padding: 0;border:none;}
body{font-size: 14px;font-family: "Microsoft Yahei", arial, "Hiragino Sans GB", sans-serif;}
li{list-style: none}
a,a:hover,a:link,a:visited{text-decoration:none;}
body {color: rgba(0,0,0,.6);max-width: 550px;margin: 0 auto;}
.both{clear: both}
.promptMsg{font-size: 12px;}
#debug{position: fixed;top: 0 ;left: 0;text-align: left ;color: rgba(255, 47, 54, 0.5);font-size: 16px;font-weight:900;z-index: 10000;display: none;padding: 0.5em}

#home{background: url("http://48-web.oss-cn-beijing.aliyuncs.com/48/image/indexBg.jpg") no-repeat center;background-size: cover;color: #FFF;position: relative;}
.home-top{width: 100%;text-align: center;position: absolute; left: 50%; top: 30%;transform: translate(-50%, -30%);letter-spacing:0.2em;}
.home-top h1{font-size: 30px;font-weight: 900;line-height: 2.3em}
.home-top h2{font-size: 24px;font-weight: 500;line-height: 2.6em}
.home-top h3{font-size: 18px;font-weight: 500;line-height: 2.8em}
.home-top img{width: 18%;margin: 1rem 0;}
.home-bottom{width: 100%;height: 30%;position: absolute;left: 0;bottom: 0;text-align: center}
#start{margin-top:5%;font-size: 18px;padding: 0 2.5em;height:2.6em;line-height:2.6em;border-radius: 1.3em;border: 1px solid #fff;background: none}
.home-bottom .promptMsg{width:100%;text-align:center;position: absolute;bottom: 12%;}

#subjectBox{display: none;padding-top:1em;position:relative;background: url("http://48-web.oss-cn-beijing.aliyuncs.com/48/image/subjectBg.jpg") no-repeat center;background-size: cover;}
#progress {margin: 0 auto;display: block;}
.page{display: none;}
.page-1{display: block}
.subjectBox{font-size:12px;padding: 1em 10%;color: #fff;}
.subjectBox p{font-size: 14px;}
.rb{width: 100%;height:1.7em;margin-top: 0.5em;background-color: #fff;border-radius:1em;overflow: hidden}
.rb-tab{display: inline-block;width: 20%;height:100%;cursor: pointer;transition: ease .5s;border-right: 1px solid #fff;box-sizing: border-box}
.rb-tab-active,.rb-tab-prev-active{background: #99c9ed;}
.span-box{margin-top: 0.2em;height: 1.5em;line-height: 1.5em}
.span-left,.span-right{font-size: 10px;color: #fff;}
.span-left{float: left;}
.span-right{float: right;}
.page-btn{position: absolute;right: 2rem;bottom: 2rem;width: 3rem;}
.page-btn img{width: 100%}

#result{background: #fff;text-align: center;color: #000}
#result h2{height:45px;line-height:45px;font-size: 20px;font-weight:900;margin-top:1em;letter-spacing:0.2em;}
#result .tips{font-size: 12px;height: 12px;line-height: 12px;}
#chart{margin-top: 2rem}

.chartAllBox{position:relative;width: 100%;text-align: center;font-size: 14px;margin-top: 1rem;margin-bottom: 2rem}
.chartAllBox>span{font-weight: 900}
.chartAllBox>img{height: 1.2em;margin-left: 0.2em;position: absolute;top: 50%;transform: translateY(-50%);}
.chartBox{width: 100%;display: none}


.btn-box{width: 100%;padding: 3rem 0;text-align: center;box-sizing: border-box}
.btn-box button{width: 35%;height: 2.2em;line-height: 2.2em;padding:0;font-size: 16px;font-weight:900;color: #000;border-radius: 1.1em;background: #A9B6FA;margin: 2rem 10px 0 10px;}
.qrCode{width: 100%;}

#explainBox{width: 100%;height: 100%;background: rgba(255,255,255,0.8);position: fixed;left:0;top:0;z-index: 2000;text-align: center;display: none}
#explainBox>div{width: 100%;padding:3% 0;box-sizing:border-box;position: absolute;top: 30%;left: 0;background: #fff}
#explainBox img{width: 100%}
#explain{width:76%;height:54%;font-size: 12px;position: absolute;top: 24%;left: 12%;overflow: auto;text-align: left}

#tips{display:none;position: fixed;top:40%;left:20%;z-index:10000;width: 60%;overflow:hidden;padding: 2em;box-sizing: border-box;background: rgba(0,0,0,0.6);border-radius: 5px;color: #fff;text-align: center;}