@charset "utf-8";
/* CSS Document */
*{-webkit-text-size-adjust:100%; font-size:28px; 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{ overflow-y:hidden; background: #ffffff;}
html,body{ height: 100%;}

/*公用样式*/
.wrapBox{ width:100%; max-width:750px; height: 100%; margin:0 auto; position:relative; display:block; background: #ffffff;}
.wrapBox img{ width:100%;}
.section{ position:relative; width:100%; height: auto; min-height: 100%; overflow:hidden; background: #87c23b;}
.slide{ position:relative; width:100%; height: auto; min-height: 100%; overflow:hidden; background: #87c23b;}
.section .top_box{ width: 100%; height: auto; float: left; position: relative;}
.section .back_box{ width: 54px; height: auto; padding: 20px 10px; position: absolute; top: 0; left: 0;}
.section .back_box img{ float: left;}

.section1{ display: block; height: 100%;}
/*.section2,.section3,.section4,.section5,.section6,.section7,.section8{ display: none;}*/

.section1 .index_logo{ width: 120px; height: auto; position: absolute; top: 55px; right: 55px;}
.section1 .index_word{ width: 60%; height: auto; position: absolute; top: 30%; left: 20%;}
.section1 .mask{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
.section1 .index_touch{ width: 140px; height: 150px; position: absolute; top: 65%; left: 308px; z-index: 10;}
.left_box{ display: none; width: 100px; height: auto; position: fixed; bottom: 25px; right: 45px; z-index: 1;}
.fadeInLeft{
    -webkit-animation:fadeInLeft 1.2s .6s ease infinite both; 
    -moz-animation:fadeInLeft 1.2s .6s ease infinite both;
}
/* Down */
@-webkit-keyframes fadeInLeft{
    0%{ opacity:0; -webkit-transform:translateX(30px)}
    100%{ opacity:1; -webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeft{
    0%{ opacity:0; -moz-transform:translateX(30px)}
    100%{ opacity:1; -moz-transform:translateX(0)}
}

.section2{ background: #ffffff; height: 100%;}
.section2 .word_list{ width: 100%; height: 85%; /*overflow-x:hidden; overflow-y:scroll;*/ float: left; margin-top: 45px;}
.section2 .word_box{ width: 100%; float: left; margin-bottom: 28px;}
/*.section2 .word_box:first-child{ margin-top: 10px;}*/
.section2 .word_box:first-child .q_box{ border-top: none; padding: 10px 0 0 0;}
.section2 .word_box:last-child{ margin: 0;}
.section2 .q_box{ width: 630px; padding: 40px 0 0 0; margin: 0 60px; display: inline-block; border-top: 1px solid #595757;}
.section2 .q_box span{ width: 65px; height: 58px; float: left; margin: 4px 0 0 0; text-align: center; line-height: 58px; font-size: 38px; background: #66ad30; color: #ffffff; display: inline-block; letter-spacing: 1px;}
.section2 .q_box .q_box_word{ width: 535px; float: right; font-size: 38px; line-height: 56px;}
.section2 .a_box{ width: 630px; margin: 25px 60px 0 60px; padding-bottom: 0; display: inline-block;}
.section2 .a_box span{ width: 65px; height: 58px; float: left; margin: 0 0 0 0; text-align: center; line-height: 58px; font-size: 38px; background: #2490ca; color: #ffffff; display: inline-block; letter-spacing: 1px;}
.section2 .a_box .a_box_word{ width: 535px; float: right; font-size: 30px; line-height: 48px;}
.section2 .a_box .a_box_word b{ width: 45px; height: 45px; display: inline-block; margin: 5px 8px 0 0;}
.up_box{ display: none; width: 100px; height: auto; position: fixed; bottom: 25px; left: 325px; z-index: 1;}
.section2 .word_btn{ width: 80px; height: auto; color: #8a8a8a; float: right; margin: 0 50px 0 0;}
.section2 .word_btn img{ width: 100%; float: left;}
.fadeInDown{
    -webkit-animation:fadeInDown 1s .2s ease infinite both; 
    -moz-animation:fadeInDown 1s .2s ease infinite both;
}
/* Down */
@-webkit-keyframes fadeInDown{
    0%{ opacity:0; -webkit-transform:translateY(-30px)}
    100%{ opacity:1; -webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{
    0%{ opacity:0; -moz-transform:translateY(-30px)}
    100%{ opacity:1; -moz-transform:translateY(0)}
}

.section3{ background: #87c23b;}
.section3 .begin_title{ width: 100%; text-align: center; font-size: 56px; color: #ffffff; position: absolute; top: 31.2%; left: 0;}
.section3 .question_btn{ width: 50%; margin: 0 25%; position: absolute; top: 54.5%; left: 0;}
.section3 .answer_btn{ width: 50%; margin: 0 25%; position: absolute; top: 67.7%; left: 0;}

.section4{ background: #ffffff;}
.section4 .question_area{ width: 560px; height: 460px; box-sizing:border-box; padding: 15px; resize: none; margin: 148px 95px 0 95px; border: 3px solid #62981d; border-radius: 30px;}
.section4 .question_submit{ width: 256px; height: auto; margin: 60px 247px 80px 247px;}
.section4 .question_tips{ width: 100%; height: auto; text-align: center; font-size: 38px; color: #9fa0a0; line-height: 65px;}

.section5{ background: #ffffff; height: 100%;}
.section5 .answer_add_size{ width: 100%; height: 92%; float: left; margin: 20px 0 0 0;}
.section5 .answer_list{ width: 662px; height: auto; margin: 0 44px 0 44px; float: left;}
.section5 .answer_list li{ width: 100%; height: auto; float: left; border-bottom: 1px solid #3c3a3a; font-size: 30px;}
.section5 .answer_list li:last-child{ border-bottom: none;}
.section5 .answer_list li span{ width: 38px; height: auto; float: left; margin: 38px 20px;}
.section5 .answer_list li .word{ width: 560px; float: left; margin: 35px 0 38px 0; line-height: 42px; }
.section5 .answer_area{ width: 560px; height: 268px; box-sizing:border-box; padding: 15px; resize: none; margin: 50px 95px 0 95px; border: 3px solid #62981d; border-radius: 30px;}
.section5 .other_question{ width: 256px; height: auto; margin: 60px 0 50px 48px;}
.section5 .answer_submit{ width: 256px; height: auto; margin: 60px 0 50px 95px;}
.section5 .answer_tips{ width: 100%; height: auto; text-align: center; font-size: 38px; color: #9fa0a0; margin: 0 0 90px 0;}

.section6{ background: #ffffff; height: 100%;}
.section6 .answer_list{ width: 662px; height: auto; margin: 20px 44px 0 44px; float: left;}
.section6 .answer_list li{ width: 100%; height: auto; float: left; border-bottom: 1px solid #3c3a3a; font-size: 30px;}
.section6 .answer_list li:last-child{ border-bottom: none;}
.section6 .answer_list li span{ width: 38px; height: auto; float: left; margin: 23px 20px;}
.section6 .answer_list li .word{ width: 560px; float: left; margin: 20px 0 25px 0; line-height: 42px; }
.section6 .answer_area{ width: 560px; height: 268px; box-sizing:border-box; padding: 15px; resize: none; margin: 50px 95px 0 95px; border: 3px solid #62981d; border-radius: 30px;}
.section6 .answer_submit{ width: 256px; height: auto; margin: 60px 247px 50px 247px;}
.section6 .answer_tips{ width: 100%; height: auto; text-align: center; font-size: 38px; color: #9fa0a0;}
.section6 .answer_list li .user_box{ width: 100%; height: 50px; float: left; box-sizing:border-box; padding: 0 20px; margin: 25px 0 0 0;}
.section6 .answer_list li .user_photo{ width: 50px; height: 50px; float: left; border-radius: 50%; overflow: hidden;}
.section6 .answer_list li .user_name{ width: 500px; height: 50px; float: left; line-height: 50px; text-align: left; font-size: 30px; margin: 0 0 0 20px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.section6 .word_list{ width: 100%; height: 85%; /*overflow-x:hidden; overflow-y:scroll;*/ float: left; margin-top: 45px;}
.section6 .word_box{ width: 100%; float: left; margin-bottom: 28px;}
.section6 .word_box:first-child .q_box{ border-top: none; padding: 10px 0 0 0;}
.section6 .word_box:last-child{ margin: 0;}
.section6 .q_box{ width: 630px; padding: 40px 0 0 0; margin: 0 60px; display: inline-block; border-top: 1px solid #595757;}
.section6 .q_box span{ width: 65px; height: 58px; float: left; margin: 4px 0 0 0; text-align: center; line-height: 58px; font-size: 38px; background: #66ad30; color: #ffffff; display: inline-block; letter-spacing: 1px;}
.section6 .q_box .q_box_word{ width: 535px; float: right; font-size: 38px; line-height: 56px;}
.section6 .a_box{ width: 630px; margin: 25px 60px 0 60px; padding-bottom: 0; display: inline-block;}
.section6 .a_box span{ width: 65px; height: 58px; float: left; margin: 0 0 0 0; text-align: center; line-height: 58px; font-size: 38px; background: #2490ca; color: #ffffff; display: inline-block; letter-spacing: 1px;}
.section6 .a_box .a_box_word{ width: 535px; float: right; font-size: 30px; line-height: 48px;}
.section6 .word_btn{ width: 80px; height: auto; color: #8a8a8a; float: right; margin: 0 50px 0 0;}
.section6 .word_btn img{ width: 100%; float: left;}
.section6 .a_box .a_box_photo{ width: 54px; height: 54px; float: left; margin: 0 15px 0 15px; border-radius: 50%; overflow: hidden;}
.section6 .a_box .a_box_photo img{ width: 100%;}
.section6 .a_box .a_box_name{ width: 480px; height: 58px; line-height: 52px; float: left; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size: 26px;}

.success_page{ display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #ffffff; z-index: 10;}
.success_page .end_title{ width: 524px; height: 140px; text-align: center; line-height: 140px; font-size: 52px; color: #ffffff; margin: 320px 113px 0 113px; background: #87c23b; display: inline-block; border-top-left-radius:30px; border-top-right-radius:30px;}
.success_page .end_word{ width: 520px; height: 275px; box-sizing:border-box; padding-top: 25px; font-size: 40px; color: #9fa0a0; line-height: 70px; text-align: center; border: 2px solid #79bb23; margin: 0 113px 0 113px; border-bottom-left-radius:30px; border-bottom-right-radius:30px;}

.end_page{ display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10;}
.end_page .index_logo{ width: 120px; height: auto; position: absolute; top: 55px; right: 55px;}
.end_page .index_word{ width: 60%; height: auto; position: absolute; top: 30%; left: 20%;}
.end_page .end_link{ width: 36%; height: 72px; line-height: 72px; position: absolute; top: 68%; left: 32%; text-align: center; font-size: 32px; color: #333333; background: #ffffff; border-radius: 16px;}

/*后台统计列表*/
.message_wrapBox{ width: 90%; height: auto; position: relative; padding: 0 5%;}
.message_wrapBox .message_title{ width: 100%; text-align: center; font-size: 36px; color: #000000; margin: 40px 0 0 0;}
.message_list{ width: 96%; height: auto; margin: 25px 2% 30px 2%;}
.message_list li{ width: 100%; height: auto; float: left; padding: 20px 0; border-bottom: 1px solid #cccccc;}
.message_list li .message_q_icon{ width: 35px; height: 35px; line-height: 35px; float: left; margin: 0 15px 0 0; text-align: center; font-size: 20px; background: #66ad30; color: #ffffff; display: inline-block;}
.message_list li .message_user_photo{ width: 35px; height: 35px; float: left; border-radius: 50%; overflow: hidden;}
.message_list li .message_user_photo img{ width: 100%; height: auto;}
.message_list li .message_user_name{ width: 50%; height: 35px; line-height: 35px; float: left; font-size: 18px; margin: 0 0 0 10px;}
.message_list li .message_question{ width: 85%; height: auto; float: left; font-size: 16px; margin: 10px 2% 18px 50px; line-height: 24px;}
.message_list li .message_answer_photo{ width: 35px; height: 35px; float: left; border-radius: 50%; overflow: hidden;}
.message_list li .message_answer_photo img{ width: 100%; height: auto;}
.message_list li .message_answer_name{ width: 50%; height: 35px; line-height: 35px; float: left; font-size: 18px; margin: 0 0 0 10px;}
.message_list li .message_a_icon{ width: 35px; height: 35px; line-height: 35px; float: left; margin: 0 15px 0 0; text-align: center; font-size: 20px; background: #2490ca; color: #ffffff; display: inline-block;}
.message_list li .message_answer{ width: 93%; height: auto; float: left; font-size: 16px; margin: 10px 2% 0 50px; line-height: 24px;}
.message_wrapBox .page_box{ width: auto; height: auto; float: left; margin: 0 0 60px 1.6%;}
.message_wrapBox .page_num{ width: auto; padding: 0 6px; height: 26px; text-align: center; line-height: 26px; border:1px solid #999999; font-size: 16px; float: left; margin: 0 5px; cursor: pointer;}
.page_box div{ width: auto; padding: 0 6px; height: 26px; text-align: center; line-height: 26px; border:1px solid #999999; font-size: 16px; float: left; margin: 0 5px; cursor: pointer;}
.message_wrapBox .num_style_con{ border: none; padding: 0; cursor: auto;}
.message_list li .message_answer_size{ width: 100%; float: left;}
.message_list li .message_answer_box{ width: 100%; float: left; margin: 18px 0 0 0;}
.message_wrapBox .page_num.active{ background: #66ad30; color: #ffffff;}