/* reset */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {display:block;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,lable,textarea,p,blockquote,th,td {margin:0;padding:0;}
html{font-size:62.5%;overflow-x:hidden;}
table{border-collapse: collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var,i{font-style:normal; font-weight:normal;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
.clear{clear:both;}
.clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.clearfix{ display:block;}
* html .clearfix{ height:1%;}
a{color:#333333;}
a:link{text-decoration:none;}
a:visited{ text-decoration:none;}
a:hover{ text-decoration:none;}
a:active{text-decoration:none;}
body, html{ overflow-x: hidden; width:100%; height: 100%; position:relative; background-color: #f3eff0;-webkit-tap-highlight-color: transparent; }
body{font-size: 100%; font-family:Helvetica,STHeiti,Droid Sans Fallback; line-height:2.2rem;}
textarea, input[type="button"],input[type="submit"],input[type="password"],input[type="text"]{-webkit-appearance:none; outline:none;border-radius:0;}

/* loading */
#loading{ background-color: #f3eff0; width: 100%; height: 100%; left: 0; top: 0; position: absolute;background-image: url(img/xwg_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center bottom;}
.jindu{ position: absolute; top: 50%; left: 20%; right: 20%; margin-top: -140px;}
.zidan{ text-align: right; }
.zidan img{ width: 80px;}
.line_go{  height: 5px; font-size: 0; overflow: hidden; width: 100%;  position: relative; background: #FFFFFF; }
.line_go span{background-color: #636363; position: absolute; top:0; left:0; height: 5px;font-size: 0; overflow: hidden;}
.logo{ position: absolute; width: 100%; bottom: 10%; left: 0; text-align: center;;}
.logo img{ width: 70%;}
.percent{ text-align: center; color: #2d2d2d; font-size: 1.5rem; line-height: 1.8rem; padding-top: 8px;}

/* cover封面 */
.cover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;background-image: url(img/xwg_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center bottom;}
.cloud_l1,.cloud_l2{position: absolute; left:0; background-image: url(img/cloud_06.png);  background-repeat: no-repeat; background-size: auto 100%; background-position: right top; }
.cloud_l1{ top:-7%; width: 26%; height: 17%;}
.cloud_l2{ top:60%; width: 25%; height: 17%;}
.cloud_r1, .cloud_r2{position: absolute;  right:0; background-repeat: no-repeat; background-size: auto 100%; background-position: left top;}
.cloud_r1{ top: 2%; width: 31%; height: 17%; background-image: url(img/cloud_03.png);}
.cloud_r2{ bottom:6%; width: 40%; height: 18%; background-image: url(img/cloud_09.png);}
.ques_bg{ position: absolute; top: 20%; left: 10%; width: 79%; height: 30%; background-image: url(img/ques_bg.png); background-position: left top; background-size: 100% 100%; background-repeat: no-repeat;}
.ques_bg:after{ position: absolute; top: -14%; left: 15%; width: 32%; height: 47%; content: " "; background-image: url(img/cover_ge.png); background-size: auto 100%; background-position: center top; background-repeat: no-repeat;}
.ques_bg p{ font-size: 2.8rem; color: #2d2d2d; line-height: 3rem; padding: 22% 14% 0 14%;}
.desc{position: absolute; top: 50%; left: 20%; right: 20%; font-size: 1.6rem; }
.start{ text-align: center; bottom: 17%; left:0; width: 100%; position: absolute; }
.start span{ display: inline-block; width: 137px; height:45px; background-image: url(img/start.png); background-size: 100% 100%;}
.start span.selected{background-image: url(img/start_active.png);}

/* main */
.main{ position: absolute; width:100%; height: 100%; top: 0; left: 0; background-image: url(img/xwg_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center bottom;}
.main_c_r1, .main_c_r2{position: absolute;  right:0; background-repeat: no-repeat; background-size: auto 100%; background-position: left top; overflow: hidden;}
.main_c_r1{ top: 45%; width: 31%; height: 17%; background-image: url(img/cloud_03.png);}
.main_c_r2{ top:-7%; width: 40%; height: 18%; background-image: url(img/cloud_09.png);}
.city_bg{position: absolute; width:100%; height: 30%; bottom: 0; left: 0; background-image: url(img/main_ctbg.png); background-repeat: no-repeat; background-size:100% auto; background-position: center bottom;}
.score{ position: absolute; top: 3%; left: 6%; width: 98px; height: 67px; background-image: url(img/num_06.png); background-repeat: no-repeat; background-size: auto 100%; background-position: center bottom; }
.score span{ position: absolute;}
.score span img{ width:50%;}
.score span.nownum{ top: 18px; left: 20px; width: 28px; text-align: right;}
.score span.skewline{top: 19px; left: 33px; width: 37px; text-align: center;}
.score span.skewline img{ width: 70%;}
.score span.totalnum{ bottom: 6px; right: 15px; width: 28px; text-align: left;}
.ques_main{ position: absolute; top: 0; left:0; width: 100%; height:100%;}
.question{ color: #4b4947; font-size: 1.6rem; padding: 33% 13% 0 13%; font-weight: bold; }
.answer_list{ margin:0 13%; padding:0;}
.answer_list li{ height: 30px; line-height: 110%; background-image: url(img/qlist_03.png); background-size: auto 100%; background-repeat: no-repeat;font-size: 1.4rem; color: #4b4947; margin-top: 12px; padding: 7px 0 0 10px; position: relative; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; }
.answer_list li.selected{ background-image: url(img/hover.png); color: #1d1c1b;}
.answer_list li span{ width:10%; height: 20px; float: left;  background-repeat: no-repeat; background-size: auto 100%;  }
.answer_list li:nth-child(1) span{ background-image: url(img/a.png);}
.answer_list li:nth-child(2) span{ background-image: url(img/b.png);}
.answer_list li:nth-child(3) span{ background-image: url(img/c.png);}
.answer_list li:nth-child(4) span{ background-image: url(img/d.png);}
.answer_list li:nth-child(1).selected span{ background-image: url(img/a_active.png);}
.answer_list li:nth-child(2).selected span{ background-image: url(img/b_active.png);}
.answer_list li:nth-child(3).selected span{ background-image: url(img/c_active.png);}
.answer_list li:nth-child(4).selected span{ background-image: url(img/d_active.png);}
.answer_list li strong{ float: left; margin: 3px 0 0 0; width:84%; white-space:nowrap;text-overflow:ellipsis;overflow: hidden;font-weight: normal;}
.next{ text-align: center; padding-top: 10%;}
.next span{ display: inline-block; background-image: url(img/next.png); background-size: 100% 100%; background-repeat: no-repeat; width: 110px; height: 44px; }
.next span.selected{background-image: url(img/next_active.png); }
.right, .error{display: block; position: absolute; top:3px; left:3px;background-repeat: no-repeat; background-size: 100% 100%;}
.right{ width: 49px; height: 28px; background-image: url(img/right.png); }
.error{ width: 36px; height: 36px; background-image: url(img/error.png); }


.audiotype{ width:84px; height: 55px; margin:4% auto 5%; position: relative;}
.audiotype span{ background-image: url(img/audio_tip.png); background-size: 111px 45px; width:111px; height: 45px; position: absolute; top: -11px; right: -113px; content: "";}
.audiotype img{ width: 100%;}

.giftype{ width: 80%; height: auto; margin: 4% auto; text-align: center; padding-top: 10px; background-image: url(img/gifbg.png); background-size: 100% 100%; background-repeat: no-repeat; overflow: hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; }
.videotype{ width: 80%; height: auto; margin: 4% auto; text-align: center; padding-top: 11px; background-image: url(img/gifbg.png); background-size: 100% 100%; background-repeat: no-repeat; overflow: hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; }
.videotype video{ background-color: #000000;}
/* result */
.result{ position: absolute; width:100%; height: 100%; top: 0; left: 0; background-image: url(img/xwg_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center bottom;}
.res_c_l1,.res_c_l2,.res_c_r2{position: absolute;  background-repeat: no-repeat; background-size: auto 100%; background-position: left top;}
.res_c_l1{ left:0; top: -7%;width: 49%; height: 21%; background-image: url(img/cloud_03.png);}
.res_c_l2{ left: -12%; bottom: 0;  width: 50%; height: 20%; background-image: url(img/cloud_06.png);}
.res_c_r2{ right:-10%; bottom:0; width: 40%; height: 18%; background-image: url(img/cloud_09.png);}
.result_box{ width: 86%; position: absolute; top: 50%; left: 50%; height: auto; background-image: url(img/result_03.png); background-repeat: no-repeat; background-size: 100% 100%; }
.result_btn{ text-align: center; width: 100%; position: absolute; bottom: 8%;left:0;}
.result_btn span{display: inline-block; width: 113px; height: 45px; margin: 0 10px; background-size: 100% 100%;}
.result_btn span.replay{ background-image: url(img/result_06.png);}
.result_btn span.replay_ac{background-image: url(img/result_06_ac.png);}
.result_btn span.share{ background-image: url(img/result_09.png);}
.result_btn span.share_ac{background-image: url(img/result_09_ac.png);}



/* share */
.sharepage{ position: absolute; width:100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.85);}
.share_main{ }
.share_main img{ width: 100%;}
.fxword{ color: #4b4947; text-align: right;}
.fxword img{ width:40%;}

.total{ position: absolute; top: 40%;  left: 4%; width: 70px; text-align: right;}
.total img{ width: 33%;}
.fanil_pic{ position: absolute; width: 50%; top: 5%; right:4%;}
.fanil_pic img{ width: 100%;}
.res_word{ position: absolute; top: 57%; left: 10%; right: 10%; font-size: 1.8rem; color:#282726;}


/* 兼容iphone6 plus */
@media (max-height:672px) and (-webkit-min-device-pixel-ratio:3.0){
    .answer_list li{ height: 35px; line-height: 110%;}
}
/* 兼容iphone6 */
@media (max-height:603px) and (-webkit-min-device-pixel-ratio:2){
    .answer_list li{ height: 35px; line-height: 110%;}
}
/* 兼容iphone5/5s */
@media (max-height:504px) and (-webkit-min-device-pixel-ratio:2){
    .jindu{ margin-top: -170px;}
    .logo{ bottom:8%;}
    .ques_bg p{font-size: 2.4rem; line-height: 2.6rem; padding: 20% 14% 0 14%;}
    .question{ padding-top: 30%;}
    .answer_list li{ margin-top: 10px; height: 30px; line-height:110%;padding: 5px 0 0 10px;}
    .next{ padding-top: 10%;}
}
/* 兼容iphone4/4s */
@media (max-height:416px) and (-webkit-min-device-pixel-ratio:2){
    .jindu{ margin-top: -172px;}
    .logo{ bottom:4%;}
    .ques_bg p{font-size: 2.0rem; line-height: 2.2rem; padding: 16% 14% 0 14%;}
    .question{ padding-top: 29%;}
    .answer_list li{ margin-top: 6px; height: 30px; line-height: 110%;padding: 4px 0 0 10px;}
    .next{ padding-top: 2%;}
    .audiotype{ margin: 2% auto;}
}




/* 动画库 */
.fadeOut{-webkit-animation: fadeOut 0.6s linear forwards; animation: fadeOut 0.6s linear forwards;}
.fadeOutFast{-webkit-animation: fadeOut 0.1s linear forwards; animation: fadeOut 0.1s linear forwards;}
.fadeInFast{-webkit-animation: fadeIn .1s linear forwards; animation: fadeIn .1s linear forwards;}
.fadeIn{-webkit-animation: fadeIn .6s linear forwards; animation: fadeIn .6s linear forwards;}

@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeIn {
    0% { opacity: 0}
    100% {opacity: 1;}
}
/*  |xGv00|31267b9b7499d851bf2a06ff71430c10 */