/*reset */
* { padding: 0; margin: 0; word-break: break-all; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body { height: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img, abbr { border: 0; }
address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, strong, th, var { font-weight: normal; font-style: normal; }
ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 1.0em; }
q:before, q:after { content: ''; }
a, ins { text-decoration: none; }

/* public */
body{ background: #ef9a17; }
.f { display: flex; }
.vertical { flex-flow: column wrap; }
.jc { justify-content: center; }
.ac { align-items: center; }
.tc { text-align: center; }
.r { text-align: right; }
.hidden { display: none; }
.cove { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 3; }
::-webkit-scrollbar { width: 5px; background: #c4c4c4; }
::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background: #fd5f3e; }
.btn{ padding: 2% 5%; background: url(btn-bg.png) no-repeat 0 0/100% 100%; font: normal normal .6rem Microsoft Yahei; color: #fff; text-shadow: 0 .1rem .1rem #faa626; }

/* process */
.progress { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); }
.progress progress { height: 20px; width: 80%; }
.progress .progress-word { padding: 3%; color: #fff; font-size: 0.5rem; }

/* loading */
.loading-word { position: relative; top: 3%; color: #fff; font: normal normal 0.5rem Microsoft Yahei; }

/* code */
.code img { width: 100%; }

/* share-cove */
.share-cove{ z-index: 9999; }

/* index */
.index{ position: absolute; width: 100%; height: 100%; background: url(index-bg.jpg) no-repeat 0 0/100% 100%; }
.start{    position: absolute;
    top: 6.15rem;
    width: 30%;
    margin: 0 auto;
    left: 0;
    right: 0; z-index: 2}
.windmill{    width: 76%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 3.85rem;}

/* question */
.question{ position: absolute; width: 100%; height: 100%; background: url(question-bg.jpg) no-repeat 0 0/100% 100%; }
.question-content{ width: 80%; margin: 15% auto 0 auto; }
.question-top{ width: 60%; margin: 0 auto; font: normal bold normal 0.7rem Microsoft Yahei; color: #f3a632; background: url(question-top.png) no-repeat 0 0/100% 100%; }
.question-scroll{ height: 9rem; overflow-y: auto; }
.question-title{ padding: 2% 0; font: normal normal normal 0.6rem Microsoft Yahei; color: #535353; }
.select-item{ margin: 3% 0; padding: 4%; font: normal normal normal 0.5rem Microsoft Yahei; color: #535353; background: #fff; border-radius: 0.8rem; }
.select-item.right{ background: #7fb432;color: #fff  }
.select-item.wrong{ background: #ce230a;color: #fff }
.star{ position: absolute; width: 100%; height: 100%; top: -100%; animation: top-to-down 2s linear backwards; }
.star img{ width: 1.5rem; }
.star1{ position: absolute; left: 10%; top: 25%; }
.star2{ position: absolute; left: 20%; top: 70%; }
.star3{ position: absolute; left: 45%; top: 50%; }
.star4{ position: absolute; left: 65%; top: 0; }
@keyframes top-to-down {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* hb */
.hb{ position: absolute; width: 100%; height: 100%; }
.kai{ position: absolute; top: 1rem; left: 0; right: 0; width: 90%; height: 13rem; margin: 0 auto; background: url(kai-bg.png) no-repeat 0 0/100% 100%;}
.kai img{ position: absolute; top: 7.6rem; left: 0; right: 0; margin: 0 auto; width: 3rem; height: 3rem; }
.result{ position: absolute; top:1rem; left: 0; right: 0; margin: 0 auto;width: 90%;height: 13rem; background: url(hb-result.png) no-repeat 0 0/100% 100%; }
.result p{ position: absolute; top: 10rem; width: 100%; padding: 0 7%; font: normal normal normal 0.42rem Microsoft Yahei; color: #fff; }

/* wrong */
.back{ position: absolute; top: 1rem; left: 10%; width: 80%; height: 35%; background: url(wrong-bg.png) no-repeat 0 0/100% 100%; }
.back img { position: absolute; top: 71%; left: 25%; width: 50%; }


.picture_box,.start_box{position: absolute;width: 100%;height: 100%;}
.top{margin: 1rem auto 0}


@-webkit-keyframes rotate1 {
        from {-webkit-transform:rotate(0deg);}
        to {-webkit-transform:rotate(360deg);}
}
.rotate{-webkit-animation:rotate1 0.5s linear infinite}
.windmill2{width: 22%;position: absolute;top:64%;}
.alter_box{width: 80%;position: absolute;z-index: 4;background:url(cove_bg.png) no-repeat 0 0;background-size: 100% auto; min-height: 4rem; margin: 8% auto 0 auto; left: 0; right: 0; }
.alter_content{ border: 4px solid #ffb72d; position: relative; margin-top: 3.8rem; border-radius: 5px; background-color: #fff; padding: 0.6rem;}
#close{width:12%;right: 0.6rem; position: absolute; margin: -1rem -1rem 0 0;}
.cove #content{width:100%; font-size: 0.54rem; line-height: 0.8rem;}
.act_title{ color: #ff4c3a; font-size: 0.8rem; font-weight: bold; text-align: center; padding-bottom: 0.3rem;}
.btn_share{width: 40%; margin: 0 auto; position: absolute; top: 10.9rem; left: 0; right: 0;}
.share_box{text-align: right;}
.share_box img{ width: 60%;padding-top: 4%; padding-right: 4%; }    
.result_false{background: url(false.png) no-repeat 0 0; background-size:100% auto; width: 90%; margin: 0 auto;left: 0;right: 0;top:1rem;position: absolute;height: 9rem; }
.btn_img{width: 45%;margin: 5.8rem auto 0 auto;}
.btn_share2{width: 36%;height: 1.5rem;position: absolute;z-index: 4;bottom: 6%;margin: 0 auto;left: 0;right: 0;}
.picture_box img{position: absolute;width: 100%;height: 100%;z-index: 1}
.btn_share,.btn_share2,.windmill2,.btn_img,#close,#kai{cursor: pointer;}

.btn_share2 img{width: 100%;height: auto;}