@charset "utf-8";
/* CSS Document */
*{-webkit-text-size-adjust:100%; font-size:26px; outline:none; font-family:"Microsoft YaHei"; margin:0; padding:0;}
*:focus{outline:none;}
body, button, input, select, textarea { font-size: 100%; margin:0 auto; font-family:"微软雅黑";}
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, fieldset, legend, input, button, textarea, hr { margin: 0; padding: 0;}
table { border-collapse: collapse; border-spacing: 0; }
li { list-style: none; }
fieldset, img { border: 0; vertical-align: top;}
q:before, q:after { content: ''; }
input, textarea { outline-style: none; font-size:100%;}
input[type="text"], input[type="password"] {vertical-align:middle; }
input[type="text"], input[type="password"], textarea { outline-style: none; -webkit-appearance: none; }
textarea { resize: none;  font-size:100%;}
address, caption, cite, code, dfn, em, i, th, var { font-style: normal; font-weight: normal; }
strong,b{font-weight: normal;}
abbr, acronym { border: 0; font-variant: normal;}
ul{ list-style:none; overflow:hidden;}
a{ outline:none; text-decoration:none; display:inline-block; border:none; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0);}

/*公用样式*/
body{ width:100%; height: 100%; max-width:640px;  overflow-y:hidden;position: fixed;top:0;left: 0; margin: 0 auto;}
.wrapBox{width:100%; height:100%; overflow: hidden; max-width:640px; margin:0 auto; position:relative; background: #000;}
.wrapBox img{ width:100%;}
.section{ position:relative; width:100%; height: 100%; max-width:640px; overflow:hidden;}
.box_size{ width:100%; height: 100%; position:relative; margin:0 auto;}
.box_size img{ width:100%;}

/*loading*/
.loading{ width:100%; max-width:640px; margin:0 auto; position:relative; z-index:100;}
.loading img{ width:100%;}
.loading_logo{ width:26.5625%; height:auto; position:absolute; top:30%; left:36.71875%;}
.loading_num{ width:100%; text-align:center; font-size:36px; color:#cf0000; position:absolute; top:48%; left:0;}

/*第一屏*/
.slide1{ background: #004a29;}
.slide1 .index_bottom{ width: 100%; max-width: 640px; position: fixed; bottom: 0; left: 0;}
.slide1 .begin_btn{ width: 208px; height: 73px; position: absolute; bottom: 32px; left: 216px;}

/*第二屏*/
.page_top{ width: 100%; max-width: 640px; position:absolute; top: 0; left: 0;}
.page_bottom{ width: 100%; max-width: 640px; position: fixed; bottom: 40px; left: 0; display: none;}
.question_box{ width: 526px; height: auto; position: absolute; top: 295px; left: 57px; font-size: 30px; color: #000; line-height: 48px;}
.answer_yes{ width: 528px; height: 52px; position: absolute; left: 56px; top: 438px; background: #3eb134; border-radius: 5px; text-align: center; line-height: 52px; font-size: 28px; color: #ffffff;}
.answer_no{ width: 528px; height: 52px; position: absolute; left: 56px; top: 514px; background: #3eb134; border-radius: 5px; text-align: center; line-height: 52px; font-size: 28px; color: #ffffff;}
.answer_yes b{ display: inline-block; width: 21px;height:8px; background: #ffffff;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg); position: absolute; top: 29px; left: 310px; display: none;}
.answer_yes b:after{content:'/';display:block;width: 42px;height:8px; background: #ffffff;-webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);}
.answer_yes.choose b{ display: block;}
.answer_no b{ display: inline-block; width: 21px;height:8px; background: #ffffff;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg); position: absolute; top: 29px; left: 310px; display: none;}
.answer_no b:after{content:'/';display:block;width: 42px;height:8px; background: #ffffff;-webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);}
.answer_no.choose b{ display: block;}
.prve_btn{ width: 208px; height: 72px; position: absolute; bottom: 30px; left: 100px;}
.next_btn{ width: 208px; height: 72px; position: absolute; bottom: 30px; right: 100px;}
.up_btn{ width: 208px; height: 72px; position: absolute; bottom: 30px; right: 100px;}

/*第四屏*/
.question_list{ width: 526px; height: auto; position: absolute; top: 385px; left: 57px;}
.question_list li{ width: 526px; height: 52px; float: left; margin: 17px 0 0 0; position:relative;}
.question_list li .question_word{ width: 420px; height: 52px; padding: 0 0 0 35px; float: left; background: #3eb134; border-radius: 5px; font-size: 28px; color: #ffffff; line-height: 52px;}
.question_list li .question_word strong{ width: 242px; height: 30px; display: inline-block;}
.question_list li span{ width: 48px; height: 48px; border: 2px solid #bbbbbb; float: left; border-radius: 5px; margin: 0 0 0 15px; position: relative;}
.question_list li span b{ display: inline-block; width: 21px;height:8px; background: #3eb134;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg); position: absolute; top: 29px; left: 0; display: none;}
.question_list li span b:after{content:'/';display:block;width: 42px;height:8px; background: #3eb134;-webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);}
.question_list li span.choose b{ display: block;}
.slide4 .other_input{ width: 230px; height: 28px; position: absolute; top: 10px; left: 186px; border: none; background: #3eb134; font-size: 28px; color: #ffffff; display: none; border-bottom: 3px solid #ffffff;}
.slide5 .other_input{ width: 230px; height: 28px; position: absolute; top: 10px; left: 186px; border: none; background: #3eb134; font-size: 28px; color: #ffffff; display: none; border-bottom: 3px solid #ffffff;}

.fell_down{ width:13.75%; height:auto; position:fixed; left:43.125%; bottom:42px; z-index:1; display: none;}
.fadeInDown{
	-webkit-animation:fadeInDown 1s .2s ease infinite both; 
	-moz-animation:fadeInDown 1s .2s ease infinite both;
}
.play_btn{ width:6.5625%; height:auto; position:absolute; right:4.2%; top:2.5%;}

/*音乐播放*/
.play{ -webkit-transform-origin:center center; transform-origin:center center; animation:2s linear 0s normal none infinite runAround; -webkit-animation:2s linear 0s normal none infinite runAround;}
.play_btn img{ width:100%; height:auto;}
@-webkit-keyframes runAround {
	from{-webkit-transform:rotate(0deg)}
	to{-webkit-transform:rotate(360deg)}
}
@keyframes runAround { 
    from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
}


/*结果弹窗*/
.end_zshow{ width: 100%; height: 100%; max-width: 640px; position: absolute; top: 0; left: 0; display: none;}
.end_zshow img{ width: 100%;}
.end_zshow .end_zhow_form{ color: #63AF37; width:537px; height:423px; background: url(../images/rbg.png); position: absolute; top: 130px; left: 30px;}
.end_zshow .end_zhow_form #showInfo{text-indent:2em; position: absolute; padding:5px; width:450px; top: 150px; left: 50px;}
#tip1 {color:red; font-size: 50px; font-weight: bold;}
.end_zshow .end_zhow_form #showInfo p {font-size: 32px;}
.end_zshow .end_zhow_bottom{ width: 606px; height: auto; position: absolute; top: 545px; right: 0px;}