html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font: 24px "Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }
ul, li, div, p, body { margin: 0; padding: 0; -moz-user-select: none; -khtml-user-select: none; user-select: none; text-align: left; }
input { -webkit-appearance: button; font-size: 24px;}
li { list-style: none; }
a { text-decoration: none; }
.hide { display: none; }
* { -webkit-tap-highlight-color: rgba(14, 159, 111, 0.5); -webkit-touch-callout: none; }

@-webkit-keyframes stage_show { 
	0% { -webkit-transform: translateY(100px) translateZ(0);opacity: 0;}
	100% { -webkit-transform: translateY(0) translateZ(0);opacity: 1;}
}

@-webkit-keyframes stage_hide { 
	0% { -webkit-transform: translateY(0px) translateZ(0);opacity: 1;}
	100% { -webkit-transform: translateY(-100px) translateZ(0);opacity: 0;}
}

@-webkit-keyframes show_from_big { 
	0% { -webkit-transform: scale(1.3) translateZ(0);opacity: 0;}
	100% { -webkit-transform: scale(1) translateZ(0);opacity: 1;}
}

@-webkit-keyframes show_from_top { 
	0% { -webkit-transform: translateY(-300px) translateZ(0);opacity: 0;}
	100% { -webkit-transform: translateY(0) translateZ(0);opacity: 1;}
}

@-webkit-keyframes show_from_bottom { 
	0% { -webkit-transform: translateY(300px) translateZ(0);opacity: 0;}
	100% { -webkit-transform: translateY(0) translateZ(0);opacity: 1;}
}

@-webkit-keyframes hand_ani { 
	0% { -webkit-transform: translateY(0px) translateX(0px) translateZ(0);}
	40% { -webkit-transform: translateY(30px) translateX(150px) translateZ(0);}
	70% { -webkit-transform: translateY(-30px) translateX(250px) translateZ(0);}
	100% { -webkit-transform: translateY(-10px) translateX(320px) translateZ(0);}
}

@-webkit-keyframes hand_ani_2 { 
	0% { -webkit-transform: translateY(90px) translateZ(0);}
	100% { -webkit-transform: translateY(0px) translateZ(0);}
}

@-webkit-keyframes fade_in { 
	0% { -webkit-transform: translateZ(0);opacity: 0;}
	100% { -webkit-transform: translateZ(0);opacity: 1;}
}

@-webkit-keyframes fade_out { 
	0% { -webkit-transform: translateZ(0);opacity: 1;}
	100% { -webkit-transform: translateZ(0);opacity: 0;}
}

@-webkit-keyframes silent_in { 
	0% { -webkit-transform: translateZ(0);opacity: 1;}
	100% { -webkit-transform: translateZ(0);opacity: 1;}
}

@-webkit-keyframes hide_to_width { 
	0% { -webkit-transform: translateZ(0);width: 60%;}
	100% { -webkit-transform: translateZ(0);width: 0;}
}

@-webkit-keyframes hide_to_height { 
	0% { -webkit-transform: translateZ(0);width: 60%;}
	100% { -webkit-transform: translateZ(0);width: 0;}
}

@-webkit-keyframes up_and_down { 
	0% { -webkit-transform: translateZ(0) translateY(0);}
	50% { -webkit-transform: translateZ(0) translateY(170px);}
	100% { -webkit-transform: translateZ(0) translateY(0);}
}

.blue{color: #45c3f5;}
.white{color: #fff;}

#main {position: relative; width: 640px; margin: 0 auto;overflow: hidden;background: #1b1e3a;min-height: 1008px;}

.stage{position: absolute;width: 640px;overflow: hidden;display: none;top:0px;left: 0;height: 100%;}
.stage.current{display: block;}
.stage.show{-webkit-animation: stage_show 0.25s 1 ease-in-out;display: block;}
.stage.hide{-webkit-animation: stage_hide 0.25s 1 ease-in-out;display: block;}

.stage.show .ani{display: none;}
.stage .ani{display: block;}
.stage .ani.show{display: block;}

.cartoon.fadeout{-webkit-animation: cartoon_hide 0.5s 1 ease-in-out;display: block;}

.top{position: relative; width: 100%; padding-bottom: 20px;}
.top .gzh_button{background:url(../images/gzh_button.png);width:152px;height:56px;top:50px;left:0;position: absolute;}
.top .readme_button{background:url(../images/readme_button.png);width:159px;height:56px;top:50px;right:0;position: absolute;}
.top .logo{position: relative; width: 142px;height:171px;margin:2px auto;background:url(../images/logo.png);}

.stage_1{background: url(../images/bg.jpg);}
.stage_1 .title{position: absolute;width: 100%;height: 1008px;background: url(../images/title.png);top:0;left: 0;}
.stage_1 .title.show{-webkit-animation: show_from_top 0.5s 1 ease-in-out;}
.stage_1 .hand{position: absolute;width: 100%;height: 1008px;background: url(../images/hand.png);top:0;left: 0;}
.stage_1 .hand.show{-webkit-animation: show_from_big 0.8s 1 ease-in-out;}
.stage_1 .start_button{position: absolute;width: 395px;height: 84px;background: url(../images/start_button.png);bottom: 100px;left: 122.5px;}
.stage_1 .start_button.show{-webkit-animation: show_from_big 1s 1 ease-in-out;}
.stage_1 .scan{position: absolute;width: 100%;height: 100%;background: url(../images/bg_1.jpg);top:0;left: 0;}
.stage_1 .scan.show{-webkit-animation: fade_in 0.5s 1 ease-in-out;}
.stage_1 .scan .white_hand{position: absolute;width: 389px;height: 548px;background: url(../images/hand_2.png);top: 400px;left: 115px;-webkit-animation: hand_ani_2 0.5s 1 ease-in-out;}
.stage_1 .scan .line{position: absolute;width: 640px;height: 9px;background: url(../images/line.png);-webkit-animation: up_and_down 1s infinite ease-in-out;top:540px;left: 0;}

.stage_2{background: url(../images/bg_2.jpg);}
.stage_2 .start_point_list{position: absolute;width: 100%;height: 100%;top:0;left: 0;}
.stage_2 .start_point_list .start_point{position: absolute;width: 100px;height: 100px;}
.stage_2 .start_point_list .start_point_1{top:590px;left: 90px;}
.stage_2 .start_point_list .start_point_2{top:735px;left: 105px;}
.stage_2 .start_point_list .start_point_3{top:805px;left: 155px;}
.stage_2 .start_point_list .start_point_4{top: 865px; left: 195px;}
.stage_2 .hover_line_list{position: absolute;width: 100%;height: 100%;top:0;left: 0;}
.stage_2 .hover_line_list .hover_line{position: absolute;height: 100%;width: 100%;}
.stage_2 .hover_line_list .hover_line.out_width{-webkit-animation: hide_to_width 0.4s 1 ease-in-out;}
.stage_2 .hover_line_list .hover_line.out_height{-webkit-animation: hide_to_height 0.4s 1 ease-in-out;}
.stage_2 .hover_line_list .hover_line_1{background: url(../images/line_1.png);}
.stage_2 .hover_line_list .hover_line_2{background: url(../images/line_2.png);}
.stage_2 .hover_line_list .hover_line_3{background: url(../images/line_3.png);}
.stage_2 .hover_line_list .hover_line_4{background: url(../images/line_4.png);}
.stage_2 .hand{position: absolute;width: 227px;height: 177px;background: url(../images/arrow.png);top: 500px; left: 0;}
.stage_2 .hand.show{-webkit-animation: show_from_big 0.5s 1 ease-in-out;}
.stage_2 .hand .finger{position: absolute;width: 100%;height: 100%;background: url(../images/finger.png);top:0;left: 0;-webkit-animation: hand_ani 1s 2 ease-in-out;}

.stage_3{background: url(../images/bg.jpg);}
.stage_3 .text{position: relative;width: 397px;height: 594px;background: url(../images/end_bg.png);margin: 190px auto 0;}
.stage_3 .text.show{-webkit-animation: show_from_top 0.5s 1 ease-in-out;}
.stage_3 .text .face{position: relative;width: 396px;height: 244px;margin-top: 0 auto;}
.stage_3 .text .name{position: relative;width: 397px;height: 55px;margin-top: 0 auto;}
.stage_3 .text .content{width: 80%; margin: 10px auto; color: #a65e14; font-size: 22px;}
.stage_3 .text .content .ct{font-weight: bold;color: #7a3e01;}
.stage_3 .button_list{position: relative;width: 400px;height: 60px;margin: 10px auto;}
.stage_3 .button_list.show{-webkit-animation: show_from_bottom 0.7s 1 ease-in-out;}
.stage_3 .replay_button{position: relative;width: 183px;height: 60px;background: url(../images/replay_button.png);float: left;}
.stage_3 .share_button{position: relative;width: 205px;height: 60px;background: url(../images/share_button.png);float:right;}
.stage_3 .download_button{position: relative;width: 398px;height: 88px;margin: 10px auto;background: url(../images/download_button.png);}
.stage_3 .download_button.show{-webkit-animation: show_from_bottom 0.9s 1 ease-in-out;}

.stage_4{background: url(../images/bg.jpg);}
.stage_4 .text{position: relative;width: 397px;height: 594px;background: url(../images/end_bg_2.png);margin: 190px auto 0;}
.stage_4 .text.show{-webkit-animation: show_from_top 0.5s 1 ease-in-out;}
.stage_4 .text .face{position: relative;width: 396px;height: 244px;margin-top: 0 auto;}
.stage_4 .text .name{position: relative;width: 397px;height: 55px;margin-top: 0 auto;}
.stage_4 .text .content{width: 80%; margin: 10px auto; color: #a65e14; font-size: 22px;}
.stage_4 .text .content .ct{font-weight: bold;color: #7a3e01;}
.stage_4 .replay_button{position: relative;width: 395px;height: 84px;margin: 10px auto;background: url(../images/start_button_2.png);}
.stage_4 .replay_button.show{-webkit-animation: show_from_bottom 0.9s 1 ease-in-out;}

.readme{position: absolute;width:100%;height:100%;top:0;left:0;display:none;}
.readme .bg{position: absolute;width:100%;height:100%;top:0;left:0;background:#000;opacity:0.7;}
.readme .pic{position: absolute;width:533px;height:770px;top:100px;left:53.5px;background:url(../images/readme.png)}
.readme .close_button_1{position: absolute; width: 70px; height: 70px; top: 100px; right: 60px;}
.readme .close_button_2{position: absolute; width: 250px; height: 70px; top: 785px; left: 200px;}

.wx_tips { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 15; }
.wx_tips .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.7; }
.wx_tips .tips { position: absolute; top: 0px; left: 0px; width: 640px; height: 257px; background: url(../images/wx_tips.png) no-repeat; }