/*css reset*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0;padding:0}
body,button,input,select,textarea {font-size:12px;font-family:arial,\5b8b\4f53,sans-serif}
h1,h2,h3,h4,h5,h6 {font-size:100%}
em,i{font-style:normal}
small {font-size:12px}
ul, ol, li {list-style: none; }
a, a:visited {text-decoration: none;color: #333;}
legend {color:#000}
fieldset,img {border:0}
button,input,select,textarea {font-size:100%}
table {border-collapse:collapse;border-spacing:0}
img {-ms-interpolation-mode:bicubic;display:block;}
textarea {resize:vertical}
.blank10 {clear: both;height: 10px;overflow: hidden; }
.blank15 {clear: both;height: 15px;overflow: hidden; }
.blank20 {clear: both;height: 20px;overflow: hidden; }
.tac {text-align: center; }
.fl {float: left;}
.fr {float: right;}
.gc3 {color: #333; }
.gc9 {color: #999; }
.gc6 {color: #666; }
.p0{padding:0!important;}
.mt5{margin-top:5px;}
.mb5{margin-bottom:5px;}
.clearfix:after {content: " ";clear: both;display: block;height: 0;visibility: hidden; }
.icon{background:url(icon.png) no-repeat;}

.pages{width:100%;height:100%;}
.page{width:100%;height:100%;background-color:#fbf8dc;}
.page .page-content{width:100%;height:100%;position:relative;}

.page-1{background-color:#6ac0bd;}
.page-1 .img1{width:100%;position: absolute;top:0; -webkit-animation: moveFromTop 1.5s; -moz-animation: moveFromTop 1.5s;-o-animation: moveFromTop 1.5s;animation: moveFromTop 1.5s;}
.page-1 .img2{width:80%;position: absolute;top:50%;left:10%;-webkit-animation: bounceInLeft 0.8s;animation: bounceInLeft 0.8s;-webkit-animation-delay:0.7s;animation-delay:0.7s;}
.page-1 .img3{width:100%;position:absolute;bottom:0;cursor:pointer;-webkit-animation: fadeInUpLong 1.5s;animation: fadeInUpLong 1.5s;}

.progress{width:100%;}
.progress .img4{width:100%;}
.progress .topic_shu{width:90%;border-top:1px solid #666666;height:24px;line-height:24px;margin:40px auto 0;}
.progress .topic_shu .topic_num{display:block;text-align:center;width:60px;margin:-12px auto 0;height:24px;line-height:24px;background-color:#fbf8dc;font-size:16px;color:#666;}
.topic_tit{width:90%;color:#333;line-height:26px;text-align:center;font-size:14px;margin:10px auto 0;}

.options{padding: 0px 20px;}
.options li {font-size: 18px;display: block;padding: 10px;margin-top: 15px;border-radius: 5px;color: #333; background-color:#f7eebd;border:1px solid #ecd69c;}

.tongji{width:100%;}
.tongji em{display:inline-block;width:100%;text-align:center;height:30px;line-height:30px;font-size:14px;color:#333;}
.score{width:100%;position:relative;margin-top:1%;}
.score .img5{width:90%;margin-left: 5%;}
.score span{position:absolute;left:0%;top:0%;color:#fff;font-size:50px;display:inline-block;width:100px;height:60px;line-height:60px;text-align:center;}

.conclusion{width:100%;height:60px;text-align:center;margin-top:3%;}
.conclusion span{color:#333;font-size:20px;display:inline-block;line-height:60px;}
.conclusion span i{display:inline-block;width:60px;height:60px;margin-right:5px;}
.conclusion span .bujige{background:url(ch_006.png?001) no-repeat;background-size:60px 60px;}
.conclusion span .jige{background:url(ch_007.png?001) no-repeat;background-size:60px 60px;}
.conclusion span .mianfen{background:url(ch_008.png?001) no-repeat;background-size:60px 60px;}

.discription{width:100%;line-height:24px;text-align:center;font-size:18px;color:#333;position:absolute;left:0;bottom:10%;}

.share_box{width:100%;position:absolute;left:0;bottom:45px;}
.share_box li {width:100%;}
.share_box li span.share{font-size: 18px;display: block;border-radius: 5px;color: #fff;line-height:40px;width:55%;background-color:#6ac0bd;text-align:center;margin:0 auto;}
.share_box li span.share .share_icon{display:inline-block;width:30px;background:url(ch_009.png) no-repeat 0 6px;background-size:30px auto;margin-right:5px;}


.pop_up{height:40px;line-height:40px;background-color:#32322c;width:100%;position:fixed;bottom:0;}
.pop_up a{display:inline-block;width:100%;height:30px;line-height:30px;color:#fff;font-size:16px;text-align:center;}
.pop_up span.close{display:inline-block;width:20px;height:20px;background:url(ch_010.png) no-repeat 5px 0;background-size:12px auto;position:absolute;right:5px;top:5px;}

.share_overmask {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.75);}
.share_overmask .share_arrow, .share_overmask .share_words {display: block;background-image: url(aun_share_tips.png);background-size: 308px 82px; }
.share_overmask .share_arrow {float: right;margin: 5px 20px 0 0;width: 78px;height: 76px;background-position: -230px 0;}
.share_overmask .share_words {margin: 100px auto 0;width: 222px;height: 82px;}

/*moveFromTop*/
@keyframes moveFromTop {
	from { transform: translateY(-100%); }
}
@-moz-keyframes moveFromTop {
	from { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes moveFromTop {
	from { -webkit-transform: translateY(-100%); }
}
@-o-keyframes moveFromTop {
	from { -o-transform: translateY(-100%); }
}
/*bounceInLeft*/
@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

/*fadeInUpLong*/
@-webkit-keyframes fadeInUpLong {
	0% {
		opacity: 0;
		-webkit-transform: translateY(700px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
@-moz-keyframes fadeInUpLong {
	0% {
		opacity: 0;
		-moz-transform: translateY(700px);
	}
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}
@-o-keyframes fadeInUpLong {
	0% {
		opacity: 0;
		-o-transform: translateY(700px);
	}
	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}
@keyframes fadeInUpLong {
	0% {
		opacity: 0;
		transform: translateY(700px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}