@charset "utf-8";

html {
-ms-touch-action: none;  /* 阻止windows Phone 的默认触摸事件 */
}
body,div,p,ul,li {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
body {
	width: 100%;
	*cursor: default;
	overflow: hidden!important;
	height:100%!important;
	/*font: 16px/1.5 "Microsoft YaHei",Helvetica,STHeiti STXihei,Microsoft JhengHei,Arial;*/
}
.none{display:none;}
.pos{position:absolute;}



.loading{ width:100%; background:#fff; position:absolute; margin:0 auto; z-index:10001; overflow:hidden; height:100%}

/* 自适应框架（设计图宽度） */
body {
	max-width: 6.4rem;
	margin: 0 auto;
}
body * {
	max-width: 6.4rem;
}
/*.word1,.word2,.word3,.zd_1,.page1_wz{display:block;}*/
/*.mask_h{text-align:center; display:none; overflow:hidden;}
@media screen and (orientation: portrait) {
  	   .mask_h{ display:block;}
	   .word1,.word2,.word3,.zd_1,.page1_wz{display:none;}
} */

/*效果*/
.word1{top:0.51rem; right:2.86rem;}
.word2{top:6.3rem; right:1.63rem;}
.word3{top:8rem; right:1.07rem;}

body>div{width:100%; height:100%; overflow:hidden; padding:0; margin:0;}
body{padding:0; margin:0;}

.op1s{
	-webkit-animation:op1 0.5s forwards;
	animation:op1 0.5s forwards;
}
@-webkit-keyframes op1 {
	0%{opacity:0}
	100%{opacity:1}
}
@keyframes op1 {
    0%{opacity:0}
	100%{opacity:1}
}

.op0s{
	-webkit-animation:op0 0.5s forwards;
	animation:op0 0.5s forwards;
}
@-webkit-keyframes op0 {
	0%{opacity:1}
	100%{opacity:0}
}
@keyframes op0 {
    0%{opacity:1}
	100%{opacity:0}
}
.scalebigs {
-webkit-animation:scalebig 3s linear 0.5s forwards;
animation:scalebig 3s linear 0.5s forwards;
}
@-webkit-keyframes scalebig {
0% {-webkit-transform:scale(1);-webkit-transform-origin:80% center; opacity:1}
100% {-webkit-transform:scale(6);-webkit-transform-origin:80% center; opacity:1}
}
@keyframes scalebig {
0% {transform:scale(1);transform-origin:80% center; opacity:1}
100% {transform:scale(6);transform-origin:80% center; opacity:1}
}
.scalebigs_back {
-webkit-animation:scalebig_back 3s linear 0.5s forwards;
animation:scalebig_back 3s linear 0.5s forwards;
}
@-webkit-keyframes scalebig_back {
0% {-webkit-transform:scale(6);-webkit-transform-origin:80% center; opacity:1}
100% {-webkit-transform:scale(1);-webkit-transform-origin:80% center; opacity:1}
}
@keyframes scalebig_back {
0% {transform:scale(6);transform-origin:80% center; opacity:1}
100% {transform:scale(1);transform-origin:80% center; opacity:1}
}
.jjbgs {
    background:url(../images/3_2.png) no-repeat;
	overflow:hidden;
	width:4.83rem;
	height:19.37rem;
	-webkit-animation:jjbg 1s steps(2) infinite;
	animation:jjbg 1s steps(2) infinite;
	position:absolute;
	background-size:100%;
	top:0.68rem;
	right:0;
}
@-webkit-keyframes jjbg {
    0%{ background-position-y:0;}
	100%{background-position-y:-38.74rem;}
}
@keyframes jjbg {
    0%{ background-position-y:0;}
	100%{background-position-y:-38.74rem;}
}
.girl{top:3.43rem; right:3.93rem}
.bikes{
    background:url(../images/3_3.png) no-repeat;
	overflow:hidden;
	width:2.19rem;
	height:1.86rem;
	-webkit-animation:bike 0.8s steps(4) infinite;
	animation:bike 0.8s steps(4) infinite;
	position:absolute;
	background-size:100%;
	top:3.99rem;
}
@-webkit-keyframes bike {
    0%{ background-position-y:0;}
	100%{background-position-y:-7.44rem;}
}
@keyframes bike {
    0%{ background-position-y:0;}
	100%{background-position-y:-7.44rem;}
}

.page3_bg{top:0;}
.girl_car{top:3.43rem;}
.car{top:-5rem;}
.wheels1{
    background:url(../images/3_6.png) no-repeat;
	overflow:hidden;
	width:0.69rem;
	height:0.73rem;
	-webkit-animation:wheel 0.2s steps(2) infinite;
	animation:wheel 0.2s steps(2) infinite;
	position:absolute;
	background-size:100%;
	top:-4.49rem;
}
.wheels2{
    background:url(../images/3_6.png) no-repeat;
	overflow:hidden;
	width:0.69rem;
	height:0.73rem;
	-webkit-animation:wheel 0.2s steps(2) infinite;
	animation:wheel 0.2s steps(2) infinite;
	position:absolute;
	background-size:100%;
	top:-1.44rem;
}
#page3_bg{top:0}
.tree_3_1{top:20.21rem;}

@-webkit-keyframes wheel {
    0%{ background-position-y:0;}
	100%{background-position-y:-1.46rem;}
}
@keyframes wheel {
    0%{ background-position-y:0;}
	100%{background-position-y:-1.46rem;}
}

.bosss{
    background:url(../images/4_3.png) no-repeat;
	overflow:hidden;
	width:5.16rem;
	height:3.37rem;
	-webkit-animation:boss 0.8s steps(4) infinite;
	animation:boss 0.8s steps(4) infinite;
	position:absolute;
	background-size:100%;
}
@-webkit-keyframes boss {
    0%{ background-position-y:0;}
	100%{background-position-y:-13.48rem;}
}
@keyframes boss {
    0%{ background-position-y:0;}
	100%{background-position-y:-13.48rem;}
}
.computers{
    background:url(../images/4_4.png) no-repeat;
	overflow:hidden;
	width:2.68rem;
	height:2.74rem;
	-webkit-animation:computer 1s steps(2) infinite;
	animation:computer 1s steps(2) infinite;
	position:absolute;
	background-size:100%;
}
@-webkit-keyframes computer {
    0%{ background-position-y:0;}
	100%{background-position-y:-5.48rem;}
}
@keyframes computer {
    0%{ background-position-y:0;}
	100%{background-position-y:-5.48rem;}
}

.computer_bigs{
    background:url(../images/4_4.png) no-repeat;
	overflow:hidden;
	width:2.68rem;
	height:2.74rem;
	-webkit-animation:computer 0.5s steps(2) infinite,computer_bigs 1s  ease-out forwards;
	animation:computer 0.5s steps(2) infinite,computer_bigs 1s  ease-out forwards;
	position:absolute;
	background-size:100%;
}
.computer_bigs_back{
    background:url(../images/4_4.png) no-repeat;
	overflow:hidden;
	width:2.68rem;
	height:2.74rem;
	-webkit-animation:computer 0.5s steps(2) infinite,computer_bigs_back 1s  ease-out forwards;
	animation:computer 0.5s steps(2) infinite,computer_bigs_back 1s  ease-out forwards;
	position:absolute;
	background-size:100%;
}

@-webkit-keyframes computer_bigs {
0% {-webkit-transform:scale(1);-webkit-transform-origin:center 70%;}
100% {-webkit-transform:scale(4);-webkit-transform-origin:center 70%;}
}
@keyframes computer_bigs {
0% {transform:scale(1);transform-origin:center 90%;}
100% {transform:scale(4);transform-origin:center 90%;}
}
@-webkit-keyframes computer_bigs_back {
0% {-webkit-transform:scale(4);-webkit-transform-origin:center 70%;}
100% {-webkit-transform:scale(1);-webkit-transform-origin:center 70%;}
}
@keyframes computer_bigs_back {
0% {transform:scale(4);transform-origin:center 90%;}
100% {transform:scale(1);transform-origin:center 90%;}
}

.itmans{
    background:url(../images/4_5.png) no-repeat;
	overflow:hidden;
	width:4.43rem;
	height:2.19rem;
	-webkit-animation:itman 0.5s steps(2) infinite;
	animation:itman 0.5s steps(2) infinite;
	position:absolute;
	background-size:100%;
}
@-webkit-keyframes itman {
    0%{ background-position-y:0;}
	100%{background-position-y:-4.38rem;}
}
@keyframes itman {
    0%{ background-position-y:0;}
	100%{background-position-y:-4.38rem;}
}
.scalemans {
-webkit-animation:scaleman 0.5s ease forwards;
animation:scaleman 0.5s ease forwards;
}
@-webkit-keyframes scaleman {
0% {-webkit-transform:scale(0.4);-webkit-transform-origin:bottom center; right:-100%;}
100% {-webkit-transform:scale(1);-webkit-transform-origin:bottom center; right:30.625%;}
}
@keyframes scaleman {
0% {transform:scale(0.4);transform-origin:bottom center; right:-100%;}
100% {transform:scale(1);transform-origin:bottom center; right:30.625%;}
}
.scalemans2 {
-webkit-animation:scaleman2 0.5s ease forwards;
animation:scaleman2 0.5s ease forwards;
}
@-webkit-keyframes scaleman2 {
0% {-webkit-transform:scale(1);-webkit-transform-origin:bottom center; right:30.625%;}
100% {-webkit-transform:scale(0.4);-webkit-transform-origin:bottom center; right:-100%;}
}
@keyframes scaleman2 {
0% {transform:scale(1);transform-origin:bottom center; right:30.625%;}
100% {transform:scale(0.4);transform-origin:bottom center; right:-100%;}
}

.page6_bgscales {
	-webkit-animation:page6_bgscale 3s forwards;
	animation:page6_bgscale 3s forwards;
}
@-webkit-keyframes page6_bgscale {
    0%{-webkit-transform:scale(1); -webkit-transform-origin:center 55%;}
	100%{-webkit-transform:scale(5); -webkit-transform-origin:center 55%;}
}
@keyframes page6_bgscale{
    0%{transform:scale(1); transform-origin:center 55%;}
	100%{transform:scale(5); transform-origin:center 55%;}
}
.page6_bgscales_back {
	-webkit-animation:page6_bgscale_back 2s forwards;
	animation:page6_bgscale_back 2s forwards;
}
@-webkit-keyframes page6_bgscale_back {
    0%{-webkit-transform:scale(5); -webkit-transform-origin:center 55%;}
	100%{-webkit-transform:scale(1); -webkit-transform-origin:center 55%;}
}
@keyframes page6_bgscale_back{
    0%{transform:scale(5); transform-origin:center 55%;}
	100%{transform:scale(1); transform-origin:center 55%;}
}

#page7{background:url(../images/7_3.jpg) repeat-y; background-size:100% auto;}
.page7_bg{top:0px;}
.tree_7_1{top:0px;}
.tree_7_2{top:9.6rem;}
.tree_7_3{top:17.31rem;}

.man_walks {
    background:url(../images/7_1.png) no-repeat;
	overflow:hidden;
	width:2.01rem;
	height:0.8rem;
	-webkit-animation:man_walk 1s steps(4) infinite;
	animation:man_walk 1s steps(4) infinite;
	position:absolute;
	background-size:100%;
	top:3.91rem;
}
@-webkit-keyframes man_walk {
    0%{ background-position-y:0;}
	100%{background-position-y:-3.2rem;}
}
@keyframes man_walk {
    0%{ background-position-y:0;}
	100%{background-position-y:-3.2rem;}
}
.woman_walks {
    background:url(../images/7_2.png) no-repeat;
	overflow:hidden;
	width:1.6rem;
	height:0.7rem;
	-webkit-animation:woman_walk 1s steps(4) infinite;
	animation:woman_walk 1s steps(4) infinite;
	position:absolute;
	background-size:100%;
	top:4.88rem;
}
@-webkit-keyframes woman_walk {
    0%{ background-position-y:0;}
	100%{background-position-y:-2.8rem;}
}
@keyframes woman_walk {
    0%{ background-position-y:0;}
	100%{background-position-y:-2.8rem;}
}

.pandan_up{top:7.77rem;}


@-webkit-keyframes pandan_right {
    0%{right:58.625%}
	100%{right:24.21875%}
}
@keyframes pandan_right {
    0%{right:58.625%}
	100%{right:24.21875%}
}
@-webkit-keyframes pandan_right_back {
    0%{right:24.21875%}
	100%{right:58.625%}
}
@keyframes pandan_right_back {
    0%{right:24.21875%}
	100%{right:58.625%}
}
.pandan {
    background:url(../images/7_4.png) no-repeat;
	overflow:hidden;
	width:1.15rem;
	height:1rem;
	-webkit-animation:pandan 0.8s steps(4) infinite;
	animation:pandan 0.8s steps(4) infinite;
	position:absolute;
	background-size:100%;
}
.pandans {
    background:url(../images/7_4.png) no-repeat;
	overflow:hidden;
	width:1.15rem;
	height:1rem;
	-webkit-animation:pandan 1s steps(4) infinite,pandan_right 5s forwards;
	animation:pandan 1s steps(4) infinite,pandan_right 5s forwards;
	position:absolute;
	background-size:100%;
	right:58.625%;
}
.pandans_back {
    background:url(../images/7_4.png) no-repeat;
	overflow:hidden;
	width:1.15rem;
	height:1rem;
	-webkit-animation:pandan 1s steps(4) infinite,pandan_right_back 5s forwards;
	animation:pandan 1s steps(4) infinite,pandan_right_back 5s forwards;
	position:absolute;
	background-size:100%;
	right:58.625%;
}
@-webkit-keyframes pandan {
    0%{ background-position-y:0;}
	100%{background-position-y:-4rem;}
}
@keyframes pandan {
    0%{ background-position-y:0;}
	100%{background-position-y:-4rem;}
}

.page7_bgpics {
	-webkit-animation:page7_bgpic 2s forwards;
	animation:page7_bgpic 2s forwards;
}
@-webkit-keyframes page7_bgpic {
    0%{-webkit-transform:scale(1); -webkit-transform-origin:32% 72%;}
	100%{-webkit-transform:scale(2.8); -webkit-transform-origin:32% 72%;}
}
@keyframes page7_bgpic {
    0%{transform:scale(1); transform-origin:32% 72%; opacity:1}
	100%{transform:scale(2.8); transform-origin:32% 72%; opacity:1}
}

.page7_bgpics_back {
	-webkit-animation:page7_bgpic_back 2s forwards;
	animation:page7_bgpic_back 2s forwards;
}
@-webkit-keyframes page7_bgpic_back {
    0%{-webkit-transform:scale(2.8); -webkit-transform-origin:32% 72%;}
	100%{-webkit-transform:scale(1); -webkit-transform-origin:32% 72%;}
}
@keyframes page7_bgpic_back {
    0%{transform:scale(2.8); transform-origin:32% 72%; opacity:1}
	100%{transform:scale(1); transform-origin:32% 72%; opacity:1}
}

.page7_mans {
	-webkit-animation:page7_man 2s forwards;
	animation:page7_man 2s forwards;
	animation-play-state:running;
}
@-webkit-keyframes page7_man {
    0%{-webkit-transform:scale(1); -webkit-transform-origin:32% center;}
	100%{-webkit-transform:scale(1.8); -webkit-transform-origin:32% center;}
}
@keyframes page7_man {
    0%{transform:scale(1); transform-origin:32% center; opacity:1}
	100%{transform:scale(1.8); transform-origin:32% center; opacity:1}
}
.page7_mans_back {
	-webkit-animation:page7_man_back 2s forwards,pandan 1s steps(4) infinite,;
	animation:page7_man_back 2s forwards,pandan 1s steps(4) infinite,;
	animation-play-state:paused;
}
@-webkit-keyframes page7_man_back {
    0%{-webkit-transform:scale(1.8); -webkit-transform-origin:32% center;}
	100%{-webkit-transform:scale(1); -webkit-transform-origin:32% center;}
}
@keyframes page7_man_back {
    0%{transform:scale(1.8); transform-origin:32% center; opacity:1}
	100%{transform:scale(1); transform-origin:32% center; opacity:1}
}

.man_sleeps {
    background:url(../images/8_2.png) no-repeat;
	overflow:hidden;
	width:3.97rem;
	height:2.15rem;
	-webkit-animation:man_sleeps 1s steps(4) infinite;
	animation:man_sleeps 1s steps(4) infinite;
	position:absolute;
	background-size:100%;
	top:1.21rem;
}
@-webkit-keyframes man_sleeps {
    0%{ background-position-y:0;}
	100%{background-position-y:-8.6rem;}
}
@keyframes man_sleeps {
    0%{ background-position-y:0;}
	100%{background-position-y:-8.6rem;}
}

.man_bikes {
    background:url(../images/9_2.png) no-repeat;
	overflow:hidden;
	width:2.99rem;
	height:2.53rem;
	-webkit-animation:man_bike 0.5s steps(2) infinite;
	animation:man_bike 0.5s steps(2) infinite;
	position:absolute;
	background-size:100%;
	right:37.34%;
	top:7rem;
}
@-webkit-keyframes man_bike {
    0%{ background-position-y:0;}
	100%{background-position-y:-5.06rem;}
}
@keyframes man_bike {
    0%{ background-position-y:0;}
	100%{background-position-y:-5.06rem;}
}

.monkey{right:-4rem;}

.man_monkeys {
    background:url(../images/10_5.png) no-repeat;
	overflow:hidden;
	width:5.8rem;
	height:5rem;
	-webkit-animation:man_monkey 0.5s steps(4) infinite;
	animation:man_monkey 0.5s steps(4) infinite;
	position:absolute;
	background-size:100%;
	left:0;
	top:23rem;
}
@-webkit-keyframes man_monkey {
    0%{ background-position-y:0;}
	100%{background-position-y:-20rem;}
}
@keyframes man_monkey {
    0%{ background-position-y:0;}
	100%{background-position-y:-20rem;}
}

.xin_bigs{top:34.21rem;right:17.5%;}
.xins {
	-webkit-animation:xin 0.5s forwards;
	animation:xin 0.5s forwards;
}
@-webkit-keyframes xin {
    0%{-webkit-transform:scale(0.1); -webkit-transform-origin:2% 10%;}
	100%{-webkit-transform:scale(1); -webkit-transform-origin:2% 10%;}
}
@keyframes xin {
    0%{transform:scale(0.1); transform-origin:2% 30%;}
	100%{transform:scale(1); transform-origin:2% 30%;}
}
.xins_back {
	-webkit-animation:xin_back 0.5s forwards;
	animation:xin_back 0.5s forwards;
}
@-webkit-keyframes xin_back {
    0%{-webkit-transform:scale(1); -webkit-transform-origin:2% 10%;}
	100%{-webkit-transform:scale(0.1); -webkit-transform-origin:2% 10%;}
}
@keyframes xin_back {
    0%{transform:scale(1); transform-origin:2% 30%;}
	100%{transform:scale(0.1); transform-origin:2% 30%;}
}
.xinbigs {
	-webkit-animation:xinbig 2s forwards;
	animation:xinbig 2s forwards;
}
@-webkit-keyframes xinbig {
    0%{-webkit-transform:scale(0.01); -webkit-transform-origin:2% 10%;}
	100%{-webkit-transform:scale(1); -webkit-transform-origin:2% 10%;}
}
@keyframes xinbig {
    0%{transform:scale(0.01); transform-origin:2% 30%;}
	100%{transform:scale(1); transform-origin:2% 30%;}
}
.xinbigs_back {
	-webkit-animation:xinbig_back 2s forwards;
	animation:xinbig_back 2s forwards;
}
@-webkit-keyframes xinbig_back {
    0%{-webkit-transform:scale(1); -webkit-transform-origin:2% 10%;}
	100%{-webkit-transform:scale(0.01); -webkit-transform-origin:2% 10%;}
}
@keyframes xinbig_back {
    0%{transform:scale(1); transform-origin:2% 30%;}
	100%{transform:scale(0.01); transform-origin:2% 30%;}
}



.man_walks_end {
    background:url(../images/7_1.png) no-repeat;
	overflow:hidden;
	width:2.01rem;
	height:0.8rem;
	-webkit-animation:man_walk 1.2s steps(4) infinite;
	animation:man_walk 1.2s steps(4) infinite;
	position:absolute;
	background-size:100%;
	top:1.08rem;
	left:8.4375%;
}
.woman_walks_end {
    background:url(../images/7_2.png) no-repeat;
	overflow:hidden;
	width:1.6rem;
	height:0.61rem;
	-webkit-animation:woman_walk 1.2s steps(4) infinite;
	animation:woman_walk 1.2s steps(4) infinite;
	position:absolute;
	background-size:100%;
	top:1.53rem;
	left:8.4375%;
}

.scr_words{right:3.34rem; }
.xin_big_end{right:2.57rem; top:-2rem}

.logos {
	-webkit-animation:logo 1s  ease-out forwards;
	animation:logo 1s ease-out forwards;
}
@-webkit-keyframes logo {
    0%{bottom:-2.5rem;}
	100%{bottom:0rem;}
}
@keyframes logo {
   0%{bottom:-2.5rem;}
   100%{bottom:0rem;}
}

.logos_bake {
	-webkit-animation:logo_bake 1s  ease-out forwards;
	animation:logo_bake 1s ease-out forwards;
}
@-webkit-keyframes logo_bake {
    0%{bottom:0rem;}
	100%{bottom:-2.5rem;}
}
@keyframes logo_bake {
   0%{bottom:0rem;}
   100%{bottom:-2.5rem;}
}

#music_btn,#audio_btn{position:absolute; z-index:9999; right:0.1rem; bottom:0.1rem; width:0.94rem}


.cloud2s {
	-webkit-animation:cloud2 3s infinite linear alternate;
	animation:cloud2 3s infinite linear alternate;
}
@-webkit-keyframes cloud2 {
    0%{top:20rem;}
	100%{top:20.36rem;}
}
@keyframes cloud2 {
   0%{top:20rem;}
	100%{top:20.36rem;}
}
.cloud1s {
	-webkit-animation:cloud1 4s infinite linear alternate;
	animation:cloud1 4s infinite linear alternate;
}
@-webkit-keyframes cloud1 {
    0%{top:20.45rem;}
	100%{top:20.75rem;}
}
@keyframes cloud1 {
   0%{top:20.45rem;}
	100%{top:20.75rem;}
}

#content2{overflow:hidden;}

html{width:100%; height:100%; overflow:hidden; margin:0; padding:0;}