html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,input,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;-webkit-background-origin:content-box;background-origin:content-box;}section,header,footer,nav{display:block;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}img{border:0;font-size:0}a{text-decoration:none;}
.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{*zoom:1}
html{
	-webkit-text-size-adjust:none;
}
html,body{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body{
	text-align:justify;
	font-family:"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",arial,Helvetica,sans-serif;
}
.music_btn{
	position: absolute;
	display: block;
	width: 5vh;
	height: 5vh;
	right: 6vh;
	top: 1.4%;
	z-index: 11;
 }
.music_btn span{
	display: block;
	width: 100%;
	height: 100%;
	background:url(../images/music_btn.png) center center no-repeat;
	background-size: contain;
}
.music_anim{
	animation: music_a 2s linear infinite;
	-webkit-animation: music_a 2s linear infinite;
}
@keyframes music_a{
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}
@-webkit-keyframes music_a{
	from{ -webkit-transform:rotate(0deg); }
	to{ -webkit-transform:rotate(360deg); }
}
.jcontent{
	position: relative;
	width: 100%;
	height: 100%;
	/*overflow: hidden;*/
}
.scene1{
	position: absolute;
	background: url(../images/bg1.jpg) center no-repeat;
	background-size: auto 100%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.scene1 div,
.scene2 div,
.scene3 div,
.scene4 div,
.scene5 div,
.scene6 div,
.scene7 div,
.scene8 div{
	position: absolute;
}
.scene1_occlusion{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
}
.icbc_logo{
	background: url(../images/icbc_logo.png) center no-repeat;
	background-size: contain;
	width: 45%;
	height: 4%;
	top: 2.5%;
	left: 27.5%;
}
.gray_bubble1{
	background: url(../images/gray_bubble1.png) center no-repeat;
	background-size: contain;
}
.gray_bubble2{
	background: url(../images/gray_bubble2.png) center no-repeat;
	background-size: contain;
}
.gray_bubble3{
	background: url(../images/gray_bubble3.png) center no-repeat;
	background-size: contain;
}
.gray_bubble4{
	background: url(../images/gray_bubble4.png) center no-repeat;
	background-size: contain;
}
.scene1_bubble1{
	width: 24%;
	height: 15%;
	top: 9%;
	left: 17%;
}
.scene1_bubble2{
	width: 31%;
	height: 21%;
	top: 19%;
	right: 4%;
}
.scene1_bubble3{
	width: 34%;
	height: 20%;
	top: 28.5%;
	left: 33%;
}
.scene1_bubble4{
	width: 28%;
	height: 18%;
	top: 36%;
	left: 4%;
}
.scene1_bubble5{
	width: 31%;
	height: 21%;
	top: 50%;
	left: -18%;
}
.scene1_bubble6{
	width: 39%;
	height: 25%;
	top: 46%;
	left: 10%;
}
.scene1_bubble7{
	width: 39%;
	height: 25%;
	top: 61%;
	left: 46%;
}
.scene1_bubble8{
	width: 31%;
	height: 20%;
	top: 61%;
	left: 20%;
	opacity: 0.9;
}
.scene1_bubble9{
	width: 39%;
	height: 25%;
	top: 68%;
	right: -6%;
}
.scene1_bubble10{
	width: 32%;
	height: 21%;
	top: 59%;
	right: -9%;
}
.scene1_bubble11{
	width: 41%;
	height: 26%;
	top: 43%;
	right: -3%;
}
.scene1_bubble12{
	width: 32%;
	height: 21%;
	bottom: -4%;
	right: -13%;
	opacity: 0.95;
}
.scene1_bubble13{
	width: 31%;
	height: 21%;
	bottom: -2%;
	left: 53%;
}
.scene1_bubble14{
	width: 35%;
	height: 22%;
	bottom: -7%;
	left: -6%;
}
.scene1_bubble15{
	width: 32%;
	height: 20%;
	top: 69%;
	left: -4%;
}
.scene1_bubble16{
	width: 32%;
	height: 20%;
	top: 94.5%;
	left: 28%;
}
.scene1_bubble17{
	width: 39%;
	height: 25%;
	bottom: 0%;
	left: 21%;
}

@keyframes hand_anim{
	50%{transform: translate(15%,-20%);}
	100%{transform: translate(0%,0%);}
}
@-webkit-keyframes hand_anim{
	50%{-webkit-transform: translate(15%,-20%);}
	100%{-webkit-transform: translate(0%,0%);}
}
.hand1,
.hand2{
	background: url(../images/hand1.png) center no-repeat;
	background-size: contain;
	width: 24%;
	height: 15%;
	top: 54%;
	left: 22%;
}
.hand1{
	animation: hand_anim 1.5s infinite ease-in-out;
	-webkit-animation: hand_anim 1.5s infinite ease-in-out;
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}

@keyframes hand2_anim{
	50%{transform: translate(15%,-20%);}
	100%{transform: translate(0%,0%);}
}
@-webkit-keyframes hand2_anim{
	50%{-webkit-transform: translate(15%,-20%);}
	100%{-webkit-transform: translate(0%,0%);}
}
.hand2{
	background: url(../images/hand2.png) center no-repeat;
	background-size: contain;
	width: 22%;
	height: 15%;
	top: 58%;
	left: 16%;
	z-index: 9;
	animation: hand2_anim 1.5s infinite ease-in-out;
	-webkit-animation: hand2_anim 1.5s infinite ease-in-out;
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
	display: none;
}
.scene1_decor1{
	background: url(../images/scene1_decor1.png) center no-repeat;
	background-size: contain;
	width: 30%;
	height: 20%;
	top: 53%;
	left: 7%;
	z-index: 9;
	opacity: 0;
}
.htip1{
	background: url(../images/htip1.png) center no-repeat;
	background-size: contain;
	width: 18%;
	height: 16%;
	top: 45%;
	left: 47%;
}
.tips_txt1,
.tips_txt2,
.tips_txt3{
	background: url(../images/tips_txt1.png) center no-repeat;
	background-size: contain;
	width: 64%;
	height: 7%;
	top: 87%;
	left: 18%;
}
.tips_txt2{
	background: url(../images/tips_txt2.png) center no-repeat;
	background-size: contain;
	display: none;
}
.tips_txt3{
	background: url(../images/tips_txt3.png) center no-repeat;
	background-size: contain;
	opacity: 0;
	animation: tips_txt3 1s;
	-webkit-animation: tips_txt3 1s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
}
@keyframes tips_txt3{
	100%{opacity: 1;}
}
@-webkit-keyframes tips_txt3{
	100%{opacity: 1;}
}

.shell1{
	background: url(../images/shell1.png) center no-repeat;
	background-size: contain;
	width: 31%;
	height: 21%;
	top: 41%;
	left: 45%;
	/*z-index: 9;*/
}
.shell1_border{
	width: 53%;
	height: 34%;
	top: 37%;
	left: 28%;
	border-radius: 50%;
	display: none;
}
.scene1_eye1{
	position: absolute;
	background: url(../images/eye1.png) center no-repeat;
	background-size: contain;
	width: 56%;
	height: 30%;
	top: 24%;
	left: 22%;
	display: none;
}

@keyframes tear{
	50%{transform: scale(1.05);}
	100%{transform: scale(0.9);}
}
@-webkit-keyframes tear{
	50%{-webkit-transform: scale(1.05);}
	100%{-webkit-transform: scale(0.9);}
}
.tearL{
	position: absolute;
	background: url(../images/tearL.png) center no-repeat;
	background-size: contain;
	width: 15%;
	height: 15%;
	top: 50%;
	left: 12%;
	display: none;
	animation: tear 0.2s infinite;
	-webkit-animation: tear 0.2s infinite;
}
.tearR{
	position: absolute;
	background: url(../images/tearR.png) center no-repeat;
	background-size: contain;
	width: 15%;
	height: 15%;
	top: 49%;
	right: 12%;
	display: none;
	animation: tear 0.2s infinite;
	-webkit-animation: tear 0.2s infinite;
}
.scene1_mouth1{
	background: url(../images/scene1_mouth1.png) center no-repeat;
	background-size: contain;
	width: 30%;
	height: 21%;
	top: 43%;
	left: 35%;
	display: none;
}
.scene1_mouth2{
	background: url(../images/scene1_mouth2.png) center no-repeat;
	background-size: contain;
	width: 16%;
	height: 21%;
	top: 36.5%;
	left: 42%;
	display: none;
}
.scene1_txt1,
.scene1_txt2,
.scene1_txt3,
.scene1_txt4,
.scene1_txt5,
.scene1_txt6{
	position: absolute;
	display: none;
}
.scene1_txt1{
	background: url(../images/scene1_txt1.png) center no-repeat;
	background-size: contain;
	width: 15%;
	height: 6%;
	top: 32%;
	left: 29%;
}
.scene1_txt2{
	background: url(../images/scene1_txt2.png) center no-repeat;
	background-size: contain;
	width: 26%;
	height: 8%;
	top: 30.3%;
	left: 24%;
}
.scene1_txt3{
	background: url(../images/scene1_txt3.png) center no-repeat;
	background-size: contain;
	width: 26%;
	height: 8%;
	top: 30.3%;
	left: 24%;
}
.scene1_txt4{
	background: url(../images/scene1_txt4.png) center no-repeat;
	background-size: contain;
	width: 15%;
	height: 6%;
	top: 32%;
	left: 29%;
}
.scene1_txt5{
	background: url(../images/scene1_txt5.png) center no-repeat;
	background-size: contain;
	width: 29%;
	height: 8%;
	top: 28%;
	left: 34%;
}
.scene1_txt6{
	background: url(../images/scene1_txt6.png) center no-repeat;
	background-size: contain;
	width: 15.5%;
	height: 6%;
	top: 32%;
	left: 29%;
}
.scene2{
	position: absolute;
	background: url(../images/bg2.jpg) center no-repeat;
	background-size: auto 100%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.scene2 div{
	position: absolute;
}
.scene2 .scene2_door_box{
	position: relative;
	width: 66%;
	height: 21%;
	top: 29%;
	margin: 0 auto;
}
.scene2_door{
	background: url(../images/door.png) center no-repeat;
	background-size: contain;
	width: 30%;
	height: 100%;
	top: 0;
}
.scene2_door1{
	left: 0;
}
.scene2 .scene2_door2{
	position: relative;
	margin: 0 auto;
}
.scene2_door3{
	right: 0;
}
.scene2_door_border{
	background: url(../images/door_border.png) center no-repeat;
	background-size: contain;
	width: 116%;
	height: 110%;
	top: -5%;
	left: -8%;
	display: none;
}
.scene2_hand{
	background: url(../images/hand2.png) center no-repeat;
	background-size: contain;
	width: 22%;
	height: 15%;
	top: 46%;
	left: 4%;
	opacity: 0;
}
.scene2_hand_anim{
	animation: scene2_hand_anim 3.9s infinite ease-in-out;
	-webkit-animation: scene2_hand_anim 3.9s infinite ease-in-out;
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
}
@keyframes scene2_hand_anim{
	20%{transform: translateX(0%); opacity: 1;}
	40%{transform: translateX(120%);}
	60%{transform: translateX(120%);}
	80%{transform: translateX(240%);}
	92%{transform: translateX(240%);opacity: 1;}
	100%{transform: translateX(240%); opacity: 0;}
}
@-webkit-keyframes scene2_hand_anim{
	20%{-webkit-transform: translateX(0%); opacity: 1;}
	40%{-webkit-transform: translateX(120%);}
	60%{-webkit-transform: translateX(120%);}
	80%{-webkit-transform: translateX(240%);}
	92%{-webkit-transform: translateX(240%);opacity: 1;}
	100%{-webkit-transform: translateX(240%); opacity: 0;}
}

.scene2_decor1{
	background: url(../images/scene2_decor1.png) center no-repeat;
	background-size: contain;
	width: 11%;
	height: 11%;
	top: 40%;
	left: 56%;
}
.scene2_shell{
	background: url(../images/shell2.png) center no-repeat;
	background-size: contain;
	width: 68%;
	height: 50%;
	bottom: -13%;
	left: -80%;
}
@keyframes scene2_shell_anim1{
	100%{transform:translateX(142%) rotate(360deg) ;}
}
@-webkit-keyframes scene2_shell_anim1{
	100%{-webkit-transform:translateX(142%) rotate(360deg) ;}
}
.scene2_shell_anim1{
	animation: scene2_shell_anim1 2s ease-in-out;
	-webkit-animation: scene2_shell_anim1 2s ease-in-out;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}
.doubt{
	background: url(../images/doubt.png) center no-repeat;
	background-size: contain;
	width: 11%;
	height: 11%;
	top: 73%;
	left: 68%;
	animation: doubt 1s ease-in-out;
	-webkit-animation: doubt 1s ease-in-out;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 1.7s;
	-webkit-animation-delay: 1.7s;
	opacity: 0;
	transform: scale(0.5);
	-webkit-transform: scale(0.5);
	transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
}
@keyframes doubt{
	100%{transform: translateY(-60%) scale(1); opacity: 1}
}
@-webkit-keyframes doubt{
	100%{-webkit-transform: translateY(-60%) scale(1); opacity: 1}
}
.scene3{
	position: absolute;
	background: url(../images/bg3.jpg) center no-repeat;
	background-size: auto 100%;
	width: 100%;
	height: 150%;
	top: -20%;
	left: 0;
}
.scene3_door{
	background: url(../images/door.png) center no-repeat;
	background-size: contain;
	width: 30%;
	height: 22%;
	top: 28%;
	left: 35%;
}
.scene3_shell{
	background: url(../images/shell2.png) center no-repeat;
	background-size: contain;
	width: 50%;
	height: 21%;
	top: 81%;
	left: 25%;
	animation: scene3_shell 1.5s ease-in-out;
	-webkit-animation: scene3_shell 1.5s ease-in-out;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}
@keyframes scene3_shell{
	100%{transform:translateY(-141%) scale(0.88);}
}
@-webkit-keyframes scene3_shell{
	100%{-webkit-transform:translateY(-141%) scale(0.88);}
}

.scene3_tip_box{
	width: 66%;
	top: 35%;
	left: 17%;
	/*opacity: 0;*/
	animation: scene3_tip_box 0.6s;
	-webkit-animation: scene3_tip_box 0.6s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 1.8s;
	-webkit-animation-delay: 1.8s;
	display: none;
}
/*@keyframes scene3_tip_box{
	100%{opacity: 1}
}
@-webkit-keyframes scene3_tip_box{
	100%{opacity: 1}
}*/

.scene3_tip_title{
	background: url(../images/scene3_tip_title1.png) center no-repeat;
	background-size: contain;
	width: 100%;
	height: 18vh;
}
.scene3_tip_back{
	background: url(../images/scene3_tip_back.png) center no-repeat;
	background-size: contain;
	width: 49%;
	height: 7vh;
	left: 0;
	margin-top: 0.5vh;
	top: 18vh;
}
.scene3_tip_open{
	background: url(../images/scene3_tip_open.png) center no-repeat;
	background-size: contain;
	width: 49%;
	height: 7vh;
	right: 0;
	margin-top: 0.5vh;
	top: 18vh;
}

.scene4{
	position: absolute;
	background: url(../images/bg4.jpg) center no-repeat;
	background-size: auto 100%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

@keyframes scene4_bg1_anim{
	100%{transform: scale(1);}
}
@-webkit-keyframes scene4_bg1_anim{
	100%{-webkit-transform: scale(1);}
}
.scene4_bg1{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform: scale(1.8);
	-webkit-transform: scale(1.8);
	transform-origin: 50% 40%;
	-webkit-transform-origin: 50% 40%;
	animation: scene4_bg1_anim 0.6s ease-in-out;
	-webkit-animation: scene4_bg1_anim 0.6s ease-in-out;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
}

.scene4_decor0{
	position: absolute;
	/*background: url(../images/address_bar.png) center no-repeat;
	background-size: contain;*/
	width: 100vw;
	top: 0;
	left: 50%;
	margin-left: -50vw;
}
.scene4_decor1{
	background: url(../images/google_logo1.png) center no-repeat;
	background-size: contain;
	width: 86%;
	height: 18%;
	top: 31%;
	left: 7%;
}

@keyframes scene4_decor2{
	100%{transform: translateY(-127%); opacity: 1}
}
@-webkit-keyframes scene4_decor2{
	100%{-webkit-transform: translateY(-127%); opacity: 1}
}
.scene4_decor2{
	background: url(../images/scene4_decor2.png) center no-repeat;
	background-size: contain;
	width: 86%;
	height: 6.8vh;
	top: 61%;
	left: 7%;
	opacity: 0;
	animation: scene4_decor2 0.5s ease-in-out;
	-webkit-animation: scene4_decor2 0.5s ease-in-out;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 1.6s;
	-webkit-animation-delay: 1.6s;
}

@keyframes scene4_decor2_span{
	16%{ background: url(../images/scene4_decor2_1.png); background-size: contain; }
	33%{ background: url(../images/scene4_decor2_2.png); background-size: contain; }
	49%{ background: url(../images/scene4_decor2_3.png); background-size: contain; }
	66%{ background: url(../images/scene4_decor2_4.png); background-size: contain; }
	82%{ background: url(../images/scene4_decor2_5.png); background-size: contain; }
	100%{ background: url(../images/scene4_decor2_6.png); background-size: contain; }
}
@-webkit-keyframes scene4_decor2_span{
	16%{ background: url(../images/scene4_decor2_1.png); background-size: contain; }
	33%{ background: url(../images/scene4_decor2_2.png); background-size: contain; }
	49%{ background: url(../images/scene4_decor2_3.png); background-size: contain; }
	66%{ background: url(../images/scene4_decor2_4.png); background-size: contain; }
	82%{ background: url(../images/scene4_decor2_5.png); background-size: contain; }
	100%{ background: url(../images/scene4_decor2_6.png); background-size: contain; }
}
.scene4_decor2 span{
	position: absolute;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 23%;
	height: 50%;
	top: 25%;
	left: 7%;
	animation: scene4_decor2_span 2s ease-in-out;
	-webkit-animation: scene4_decor2_span 2s ease-in-out;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 1.9s;
	-webkit-animation-delay: 1.9s;
}


@keyframes scene4_decor3{
	99%{transform: translate(-30%,800%);}
	100%{transform: translate(-30%,800%);}
}
@-webkit-keyframes scene4_decor3{
	99%{-webkit-transform: translate(-30%,800%);}
	100%{-webkit-transform: translate(-30%,800%);}
}
.scene4_decor3{
	background: url(../images/gogle_logo3.png) center no-repeat;
	background-size: contain;
	width: 15%;
	height: 9%;
	top: 36%;
	left: 44.7%;
	animation: scene4_decor3 1s ease-out;
	-webkit-animation: scene4_decor3 1s ease-out;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 1.15s;
	-webkit-animation-delay: 1.15s;
}

@keyframes scene4_decor4{
	90%{transform: translate(-18%,400%);background: url(../images/shell3.png) center no-repeat;background-size: contain;}
	100%{transform: translate(-18%,400%); background: url(../images/shell4.png) center no-repeat; background-size: contain;}
}
@-webkit-keyframes scene4_decor4{
	90%{-webkit-transform: translate(-18%,400%);background: url(../images/shell3.png) center no-repeat;background-size: contain;}
	100%{-webkit-transform: translate(-18%,400%); background: url(../images/shell4.png) center no-repeat; background-size: contain;}
}
.scene4_decor4{
	background: url(../images/shell3.png) center no-repeat;
	background-size: contain;
	width: 15%;
	height: 9%;
	top: 0%;
	left: 47%;
	animation: scene4_decor4 1.1s ease-in;
	-webkit-animation: scene4_decor4 1.1s ease-in;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}

@keyframes scene4_icbc_logo{
	100%{opacity: 0;}
}
@-webkit-keyframes scene4_icbc_logo{
	100%{-webkit-opacity: 0;}
}
.scene4_icbc_logo{
	animation: scene4_icbc_logo 0.3s ease-in;
	-webkit-animation: scene4_icbc_logo 0.3s ease-in;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
}

@keyframes scene4_hand{
	0%{opacity: 1;}
	50%{opacity:1; transform: translate(20%,-30%);}
	100%{opacity:1; transform: translate(0%,0%);}
}
@-webkit-keyframes scene4_hand{
	0%{opacity: 1;}
	50%{opacity:1; -webkit-transform: translate(20%,-30%);}
	100%{opacity:1; -webkit-transform: translate(0%,0%);}
}
.scene4_hand{
	background: url(../images/hand2.png) center no-repeat;
	background-size: contain;
	width: 22%;
	height: 15%;
	top: 58.5%;
	left: 56%;
	animation: scene4_hand 1.5s infinite ease-in-out;
	-webkit-animation: scene4_hand 1.5s infinite ease-in-out;
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
	opacity: 0;
}
.scene4_seach_btn{
	width: 11.4%;
	height: 6.6%;
	top: 52.6%;
	right: 8.5%;
}

@keyframes scene4_decor5{
	20%{opacity: 1;}
	40%{opacity: 0;}
	60%{opacity: 1;}
	80%{opacity: 0;}
	100%{opacity: 1;}
}
@-webkit-keyframes scene4_decor5{
	20%{opacity: 1;}
	40%{opacity: 0;}
	60%{opacity: 1;}
	80%{opacity: 0;}
	100%{opacity: 1;}
}
.scene4_decor5{
	position: absolute;
	width: 100vw;
	bottom: 1%;
	left: 50%;
	margin-left: -50vw;
	animation: scene4_decor5 1.3s linear;
	-webkit-animation: scene4_decor5 1.3s linear;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
	display: none;
}
.scene4_bg2{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9;
}
.scene4_bg2_decor1{
	background: url(../images/google_logo2.png) center no-repeat;
	background-size: contain;
	width: 40%;
	height: 9%;
	top: 13.5%;
	left: 30%;
}
.scene4_bg2_decor2{
	background: url(../images/scene4_decor2.png) center no-repeat;
	background-size: contain;
	width: 78%;
	height: 9%;
	top: 24.5%;
	left: 11%;
}
.scene4_bg2_decor3{
	background: url(../images/scene4_decor2_6.png) center no-repeat;
	background-size: contain;
	width: 23%;
	height: 34%;
	top: 33%;
	left: 6%;
}
.scene4_bg2_decor4{
	position: absolute;
	width: 100vw;
	top: 38%;
	left: 50%;
	margin-left: -50vw;
}
.scene4_bg2_decor5{
	position: absolute;
	width: 133.8vw;
	bottom: 1%;
	left: 50%;
	margin-left: -66.9vw;
}

@keyframes scene4_bg2_decor6{
	100%{background: url(../images/shell6.png) center no-repeat;background-size: contain;}
}
@-webkit-keyframes scene4_bg2_decor6{
	100%{background: url(../images/shell6.png) center no-repeat;background-size: contain;}
}
.scene4_bg2_decor6{
	background: url(../images/shell5.png) center no-repeat;
	background-size: contain;
	width: 29vh;
	height: 29vh;
	top: 60%;
	left: 5%;
	animation: scene4_bg2_decor6 1.5s ease-in-out;
	-webkit-animation: scene4_bg2_decor6 1.5s ease-in-out;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
}


/*@keyframes sceneax_tip_box_anim{
	100%{opacity: 1}
}
@-webkit-keyframes sceneax_tip_box_anim{
	100%{opacity: 1}
}
.sceneax_tip_box_anim{
	animation: sceneax_tip_box_anim 0.6s;
	-webkit-animation: sceneax_tip_box_anim 0.6s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}*/
.sceneax_tip_box{
	width: 66%;
	top: 41%;
	left: 17%;
	display: none;
}
.sceneax_tip_box2{
	animation: sceneax_tip_box2 2.7s;
	-webkit-animation: sceneax_tip_box2 2.7s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}
.sceneax_tip_box2{
	width: 66%;
	top: 41%;
	left: 17%;
	display: none;
}

.sceneax_tip_box3{
	width: 66%;
	top: 41%;
	left: 17%;
	display: none;
	animation-delay: 3.3s;
	-webkit-animation-delay: 3.3s;
}

.sceneax_tip_title{
	background: url(../images/sceneax_tip_title.png) center no-repeat;
	background-size: contain;
	width: 100%;
	height: 18vh;
}
.sceneax_tip_back{
	background: url(../images/sceneax_tip_back.png) center no-repeat;
	background-size: contain;
	width: 49%;
	height: 7vh;
	left: 0;
	margin-top: 0.5vh;
	top: 18vh;
}
.sceneax_tip_open{
	background: url(../images/sceneax_tip_open.png) center no-repeat;
	background-size: contain;
	width: 49%;
	height: 7vh;
	right: 0;
	margin-top: 0.5vh;
	top: 18vh;
}
.scene5{
	position: absolute;
	background: url(../images/bg5.jpg) center no-repeat;
	background-size: auto 100%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

@keyframes spirit_anim{
	10%{transform: translate(0%,0%);}
	33%{transform: translate(-6%,-6%) rotate(-6deg);}
	55%{transform: translate(0%,0%);}
	78%{transform: translate(6%,-6%) rotate(6deg);}
	100%{transform: translate(0%,0%);}
}
@-webkit-keyframes spirit_anim{
	10%{-webkit-transform: translate(0%,0%);}
	33%{-webkit-transform: translate(-6%,-6%) rotate(-6deg);}
	55%{-webkit-transform: translate(0%,0%);}
	78%{-webkit-transform: translate(6%,-6%) rotate(6deg);}
	100%{-webkit-transform: translate(0%,0%);}
}
.spirit_anim{
	animation: spirit_anim 1.6s infinite ease-out;
	-webkit-animation: spirit_anim 1.6s infinite ease-out;
}
.spirit,
.spirit2{
	background: url(../images/spirit.png) center no-repeat;
	background-size: contain;
	width: 26%;
	height: 22%;
	top: 39%;
	left: 57%;
	transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
}
.spirit2{
	background: url(../images/spirit2.png) center no-repeat;
	background-size: contain;
	display: none;
}

@keyframes scene5_hand{
	60%{transform: translate(15%,-20%);}
	100%{transform: translate(0%,0%);}
}
@-webkit-keyframes scene5_hand{
	60%{-webkit-transform: translate(15%,-20%);}
	100%{-webkit-transform: translate(0%,0%);}
}
.scene5_hand{
	background: url(../images/scene5_hand.png) center no-repeat;
	background-size: contain;
	width: 29%;
	height: 15%;
	top: 48.5%;
	left: 15%;
	animation: scene5_hand 1.5s infinite ease-in-out;
	-webkit-animation: scene5_hand 1.5s infinite ease-in-out;
}
.htip2{
	background: url(../images/htip2.png) center no-repeat;
	background-size: contain;
	width: 27%;
	height: 10%;
	top: 39%;
	left: 38%;
}
.scene5_tip_txt{
	background: url(../images/scene5_tip_txt.png) center no-repeat;
	background-size: contain;
	width: 74%;
	height: 7%;
	top: 63%;
	left: 13%;
}
.spirit_ball{
	background: url(../images/spirit_ball.png) center no-repeat;
	background-size: contain;
	width: 32%;
	height: 21%;
	top: 74%;
	left: 34%;
}

@keyframes scene5_decor1{
	0%{transform: rotate(-5deg);}
	100%{transform: rotate(5deg);}
}
@-webkit-keyframes scene5_decor1{
	0%{-webkit-transform: rotate(-5deg);}
	100%{-webkit-transform: rotate(5deg);}
}
.scene5_decor1{
	background: url(../images/scene5_decor1.png) center no-repeat;
	background-size: contain;
	width: 27%;
	height: 12%;
	bottom: 3%;
	left: 5%;
	animation: scene5_decor1 0.8s infinite ease-in-out;
	-webkit-animation: scene5_decor1 0.8s infinite ease-in-out;
	animation-direction:alternate;
	-webkit-animation-direction:alternate;
	transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
}
.scene5_border{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

@keyframes scene5_start{
	0%{opacity: 1;}
	100%{transform: scale(2); opacity: 0;}
}
@-webkit-keyframes scene5_start{
	0%{opacity: 1;}
	100%{-webkit-transform: scale(2); opacity: 0;}
}
.scene5_start{
	background: url(../images/start.png) center no-repeat;
	background-size: contain;
	width: 54%;
	height: 13%;
	top: 30%;
	left: 10%;
	animation: scene5_start 1s ease-in-out;
	-webkit-animation: scene5_start 1s ease-in-out;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 1.4s;
	-webkit-animation-delay: 1.4s;
	display: none;
	opacity: 0;
}

@keyframes scene5_decor2{
	50%{transform: translateY(-10%);}
	100%{transform: translateY(0%);}
}
@-webkit-keyframes scene5_decor2{
	100%{-webkit-transform: translateY(-10%);}
	100%{-webkit-transform: translateY(0%);}
}
.scene5_decor2{
	background: url(../images/scene5_decor2.png) center no-repeat;
	background-size: contain;
	width: 30%;
	height: 6%;
	top: 31%;
	left: 56%;
	animation: scene5_decor2 1s ease-in-out infinite;
	-webkit-animation: scene5_decor2 1s ease-in-out infinite;
	display: none;
}
.spirit_ball2{
	background: url(../images/spirit_ball2.png) center no-repeat;
	background-size: contain;
	width: 32%;
	height: 21%;
	top: 40.5%;
	left: 21.2%;
	display: none;
}
.scene6{
	position: absolute;
	background: url(../images/scene6.png) center no-repeat;
	background-size: auto 100%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.rings{
	background: url(../images/rings.png) center no-repeat;
	background-size: contain;
	width: 78%;
	height: 49%;
	top: 0;
	left: 11%;
}

@keyframes audience1_anim{
	50%{transform: scale(1.05,1.1);}
	100%{transform: scale(1);}
}
@-webkit-keyframes audience1_anim{
	50%{-webkit-transform: scale(1.05,1.1);}
	100%{-webkit-transform: scale(1);}
}
.audience1,
.audience2,
.audience3{
	background: url(../images/audience1.png) center no-repeat;
	background-size: contain;
	width: 120vw;
	height: 25%;
	top: 43%;
	left: 46%;
	margin-left: -54vw;
}
.audience1{
	animation: audience1_anim 1.3s infinite;
	-webkit-animation: audience1_anim 1.3s infinite;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}
.audience2{
	background: url(../images/audience2.png) center no-repeat;
	background-size: contain;
	top: 38%;
	animation: audience1_anim 1.5s infinite;
	-webkit-animation: audience1_anim 1.5s infinite;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}
.audience3{
	background: url(../images/audience3.png) center no-repeat;
	background-size: contain;
	top: 34%;
	animation: audience1_anim 1.5s infinite;
	-webkit-animation: audience1_anim 1.5s infinite;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-delay: 0.7s;
	-webkit-animation-delay: 0.7s;
}
.scene6_bg2{
	background: url(../images/scene6_bg2.png) center no-repeat;
	background-size: contain;
	width: 130%;
	height: 46%;
	bottom: 0;
	left: -15%;
}
.scene6_shell{
	background: url(../images/shell1_2.png) center no-repeat;
	background-size: contain;
	width: 52%;
	height: 33%;
	bottom: 4%;
	left: 24%;
}
.scene6_eye1,
.scene6_eye2{
	background: url(../images/eye1.png) center no-repeat;
	background-size: contain;
	width: 56%;
	height: 30%;
	top: 24%;
	left: 22%;
}
.scene6_eye2{
	background: url(../images/eye2.png) center no-repeat;
	background-size: contain;
	width: 49%;
	height: 30%;
	top: 51%;
	left: 13%;
	display: none;
}
.scene6_mouth1{
	background: url(../images/scene1_mouth1.png) center no-repeat;
	background-size: contain;
	width: 30%;
	height: 18%;
	top: 43%;
	left: 35%;
}
.hat{
	background: url(../images/hat.png) center no-repeat;
	background-size: contain;
	width: 64%;
	height: 52%;
	top: -26%;
	left: 12%;
}
.torch{
	background: url(../images/torch.png) center no-repeat;
	background-size: contain;
	width: 25%;
	height: 80%;
	top: 16%;
	right: -5%;
}

@keyframes fire{
	50%{transform: scale(1.1);}
	100%{transform: scale(0.9);}
}
@-webkit-keyframes fire{
	50%{-webkit-transform: scale(1.1);}
	100%{-webkit-transform: scale(0.9);}
}
.fire{
	background: url(../images/fire.png) center no-repeat;
	background-size: contain;
	width: 35%;
	height: 35%;
	top: -15%;
	right: -25%;
	animation: fire 0.7s infinite ease-in-out;
	-webkit-animation: fire 0.7s infinite ease-in-out;
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	transform-origin: 5% 100%;
	-webkit-transform-origin: 5% 100%;
}
.scene6_tip_txt{
	background: url(../images/scene6_tip_txt.png) center no-repeat;
	background-size: contain;
	width: 90%;
	height: 7%;
	top: 86.5%;
	left: 5%;
}


@keyframes scene6_hand{
	40%{opacity:1; transform: translate(20%,-30%);}
	100%{opacity:1; transform: translate(0%,0%);}
}
@-webkit-keyframes scene6_hand{
	40%{opacity:1; -webkit-transform: translate(20%,-30%);}
	100%{opacity:1; -webkit-transform: translate(0%,0%);}
}
.scene6_hand{
	background: url(../images/scene6_hand.png) center no-repeat;
	background-size: contain;
	width: 30%;
	height: 13%;
	top: 43%;
	left: 13%;
	animation: scene6_hand 1.5s infinite ease-in-out;
	-webkit-animation: scene6_hand 1.5s infinite ease-in-out;
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
}
.htip3{
	background: url(../images/htip3.png) center no-repeat;
	background-size: contain;
	width: 27%;
	height: 10%;
	top: 44%;
	left: 46%;
}
.scene6_border{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.scene6_txt0{
	background: url(../images/scene6_txt0.png) center no-repeat;
	background-size: contain;
	width: 56%;
	height: 12%;
	top: 51%;
	left: 12%;
	display: none;
}
.scene6_txt1{
	background: url(../images/scene6_txt1.png) center no-repeat;
	background-size: contain;
	width: 44%;
	height: 50%;
	top: 40%;
	left: 26%;
}
.scene6_txt2{
	background: url(../images/scene6_txt2.png) center no-repeat;
	background-size: contain;
	width: 58%;
	height: 12%;
	top: 62.5%;
	left: 20%;
	display: none;
}
.scene7{
	position: absolute;
	background: url(../images/bg7.jpg) center no-repeat;
	background-size: auto 100%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.scene7_1,
.scene7_2{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.scene7_shell{
	background: url(../images/shell1.png) center no-repeat;
	background-size: contain;
	width: 54%;
	height: 34%;
	top: 32%;
	left: 23%;
}
.scene7_eye1{
	background: url(../images/eye1.png) center no-repeat;
	background-size: contain;
	width: 53%;
	height: 23%;
	top: 26%;
	left: 23%;
}
.scene7_tearL{
	background: url(../images/tearL.png) center no-repeat;
	background-size: contain;
	width: 25%;
	height: 23%;
	top: 48%;
	left: 7%;
	animation: tear 0.2s infinite;
	-webkit-animation: tear 0.2s infinite;
}
.scene7_tearR{
	background: url(../images/tearR.png) center no-repeat;
	background-size: contain;
	width: 25%;
	height: 23%;
	top: 48%;
	right: 7%;
	animation: tear 0.2s infinite;
	-webkit-animation: tear 0.2s infinite;
}
.scene7_mouth1{
	background: url(../images/scene7_mouth1.png) center no-repeat;
	background-size: contain;
	width: 13%;
	height: 4%;
	top: 45%;
	left: 43.5%;
}
.scene7_mouth2{
	background: url(../images/scene1_mouth1.png) center no-repeat;
	background-size: contain;
	width: 26%;
	height: 25%;
	top: 54%;
	left: 31%;
	display: none;
}


@keyframes scene7_hand{
	50%{opacity:1; transform: translate(20%,-30%);}
	100%{opacity:1; transform: translate(0%,0%);}
}
@-webkit-keyframes scene7_hand{
	50%{opacity:1; -webkit-transform: translate(20%,-30%);}
	100%{opacity:1; -webkit-transform: translate(0%,0%);}
}
.scene7_hand{
	background: url(../images/hand2.png) center no-repeat;
	background-size: contain;
	width: 22%;
	height: 15%;
	top: 68%;
	left: 10%;
	animation: scene7_hand 1.5s infinite ease-in-out;
	-webkit-animation: scene7_hand 1.5s infinite ease-in-out;
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
}
.tips_txt7{
	background: url(../images/tips_txt7.png) center no-repeat;
	background-size: contain;
	width: 74%;
	height: 8%;
	top: 86.5%;
	left: 13%;
}

.scene7_partner1{
	background: url(../images/shell2_2.png) center no-repeat;
	background-size: contain;
	width: 33%;
	height: 21%;
	bottom: -17%;
	left: -45%;
}
.scene7_partner2{
	background: url(../images/shell1_2.png) center no-repeat;
	background-size: contain;
	width: 41%;
	height: 26%;
	bottom: -28%;
	left: -17%;
}
.scene7_partner3{
	background: url(../images/shell2_2.png) center no-repeat;
	background-size: contain;
	width: 42%;
	height: 27%;
	bottom: -30%;
	left: 28%;
}
.scene7_partner4{
	background: url(../images/shell1_2.png) center no-repeat;
	background-size: contain;
	width: 39%;
	height: 25%;
	bottom: -28%;
	right: -15%;
}
.question_decor1{
	background: url(../images/question_decor1.png) center no-repeat;
	background-size: contain;
	width: 46%;
	height: 31%;
	top: 11%;
	left: 27%;
}
.question_decor2{
	background: url(../images/question_decor2.png) center no-repeat;
	background-size: contain;
	width: 18%;
	height: 12%;
	top: 41.5%;
	left: 40%;
}
.scene7_2_shell{
	background: url(../images/shell1_2.png) center no-repeat;
	background-size: contain;
	width: 40%;
	height: 30%;
	top: 53%;
	left: 30%;
}
.scene7_2_eye1{
	background: url(../images/eye1.png) center no-repeat;
	background-size: contain;
	width: 60%;
	height: 19%;
	top: 30%;
	left: 20%;
}
.scene7_2_eye2{
	background: url(../images/eye3.png) center no-repeat;
	background-size: contain;
	width: 60%;
	height: 21%;
	top: 36%;
	left: 20%;
	display: none;
}
.scene7_2_mouth1{
	background: url(../images/scene1_mouth1.png) center no-repeat;
	background-size: contain;
	width: 40%;
	height: 15%;
	top: 43.5%;
	left: 30%;
}
.scene7_2_partner1{
	background: url(../images/scene7_2_partner1.png) center no-repeat;
	background-size: contain;
	width: 33%;
	height: 25%;
	top: 45%;
	left: -4%;
}
.scene7_2_partner2{
	background: url(../images/scene7_2_partner2.png) center no-repeat;
	background-size: contain;
	width: 33%;
	height: 25%;
	top: 72%;
	left: -10%;
}
.scene7_2_partner3{
	background: url(../images/scene7_2_partner3.png) center no-repeat;
	background-size: contain;
	width: 33%;
	height: 25%;
	top: 46%;
	left: 78%;
}
.scene7_2_partner4{
	background: url(../images/scene7_2_partner4.png) center no-repeat;
	background-size: contain;
	width: 33%;
	height: 25%;
	top: 60%;
	left: 86%;
}
.scene7_2_partner5{
	background: url(../images/scene7_2_partner5.png) center no-repeat;
	background-size: contain;
	width: 33%;
	height: 25%;
	top: 74%;
	left: 70%;
}
.scene7_2_partner6{
	background: url(../images/shell1_2.png) center no-repeat;
	background-size: contain;
	width: 33%;
	height: 25%;
	top: 49%;
	left: -26%;
}
.scene7_pop{
	width: 100vw;
	height: 100%;
	top: 0;
	left: 50%;
	margin-left: -50vw;
	background: rgba(250,250,250,0.7);
}
.scene7_pop_decor1{
	background: url(../images/scene7_pop_decor1.png) center no-repeat;
	background-size: contain;
	width: 80%;
	height: 30%;
	top: 23%;
	left: 10%;
}

@keyframes scene7_pop_btn_anim{
	100%{opacity: 1;}

}
@-webkit-keyframes scene7_pop_btn_anim{
	100%{opacity: 1;}
}
.scene7_pop_btn{
	background: url(../images/scene7_pop_btn.png) center no-repeat;
	background-size: contain;
	width: 74%;
	height: 8%;
	top: 78%;
	left: 13%;
	animation: scene7_pop_btn_anim 0.8s infinite ease-in-out;
	-webkit-animation: scene7_pop_btn_anim 0.8s infinite ease-in-out;
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	opacity: 0;
}
.scene8{
	position: absolute;
	background: url(../images/bg8.jpg) center no-repeat;
	background-size: auto 100%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 3;
}

.scene8_decor1{
	background: url(../images/scene8_decor1.png) center no-repeat;
	background-size: contain;
	width: 70%;
	height: 11%;
	top: 12%;
	left: 15%;
}
.scene8_decor2{
	background: url(../images/scene8_decor2.png) center no-repeat;
	background-size: contain;
	width: 70%;
	height: 7%;
	top: 21.5%;
	left: 11%;
}
.scene8_decor3{
	background: url(../images/scene8_decor3.png) center no-repeat;
	background-size: contain;
	width: 70%;
	height: 7.3%;
	top: 20.5%;
	left: 16%;
}
.scene8_decor4{
	position: absolute;
	width: 35%;
	height: 30.5%;
	top: 30%;
	left: 12%;
}
.scene8_decor5{
	background: url(../images/scene8_decor5.png) center no-repeat;
	background-size: contain;
	width: 76%;
	height: 5.2%;
	top: 63%;
	left: 12%;
}
.scene8_decor6{
	background: url(../images/scene8_decor6.png) center no-repeat;
	background-size: contain;
	width: 23.5%;
	height: 17.5%;
	top: 69%;
	left: 17%;
}
.scene8_decor7{
	background: url(../images/scene8_decor7.png) center no-repeat;
	background-size: contain;
	width: 32%;
	height: 12%;
	top: 78%;
	left: 35%;
}
.scene8_decor8{
	background: url(../images/scene8_decor8.png) center no-repeat;
	background-size: contain;
	width: 10%;
	height: 11%;
	top: 74.5%;
	left: 45%;
}
.scene8_decor9{
	background: url(../images/scene8_decor9.png) center no-repeat;
	background-size: contain;
	width: 21%;
	height: 17%;
	top: 69.3%;
	left: 59%;
}
.scene8_decor10{
	background: url(../images/scene8_decor10.png) center no-repeat;
	background-size: contain;
	width: 19%;
	height: 3%;
	top: 87%;
	left: 9%;
}
.scene8_decor11{
	background: url(../images/scene8_decor11.png) center no-repeat;
	background-size: contain;
	width: 21%;
	height: 5%;
	top: 89.6%;
	left: 29%;
}
.scene8_decor12{
	background: url(../images/scene8_decor12.png) center no-repeat;
	background-size: contain;
	width: 24%;
	height: 5%;
	top: 86%;
	left: 66%;
}
.scene8_txt1{
	position: absolute;
	top: 92%;
	left: 67%;
	color: #6a6969;
	font-size: 1.6vh;
}
.scene8_shell{
	background: url(../images/shell7.png) center no-repeat;
	background-size: contain;
	width: 46%;
	height: 29%;
	top: 32%;
	left: 40%;
}
.r_nav1,
.r_nav2{
	position: fixed;
	width: 9vh;
    height: 14vh;
    top: 5%;
    right: -4.1vh;
    z-index: 11;
}
.r_nav1{
	background: url(../images/r_nav1.png) center no-repeat;
	background-size: contain;
}
.r_nav2{
	background: url(../images/r_nav2.png) center no-repeat;
	background-size: contain;
	width: 10vh;
	top: 20%;
	right: -5.3vh;
}

@keyframes scene8_hand{
	0%{opacity: 1;}
	50%{opacity:1; transform: translate(20%,-30%);}
	100%{opacity:1; transform: translate(0%,0%);}
}
@-webkit-keyframes scene8_hand{
	0%{opacity: 1;}
	50%{opacity:1; -webkit-transform: translate(20%,-30%);}
	100%{opacity:1; -webkit-transform: translate(0%,0%);}
}
.scene8_hand{
	background: url(../images/hand2.png) center no-repeat;
	background-size: contain;
	width: 18%;
	height: 11%;
	top: 61%;
	left: -1%;
	animation: scene8_hand 1.5s infinite ease-in-out;
	-webkit-animation: scene8_hand 1.5s infinite ease-in-out;
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
}
.rule_page{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 12;
}
.rule_box{
	position: absolute;
	background: url(../images/rule_box.jpg) center no-repeat;
	background-size: contain;
	width: 80%;
	height: 82%;
	top: 10%;
	left: 10%;
	border-radius: 2vh;
}
.rule_txt_border{
	position: relative;
	width: 90%;
	height: 84%;
	top: 11%;
	left: 6.8%;
	overflow: hidden;
}
.rule_swiper-container,
.swiper-wrapper,
.swiper-slide{
	position: relative;
	width: 100%;
	height: 100%;
}
.rule_txt_border2{
	position: relative;
	width: 95%;
	height: 100%;
}
.rule_txt{
	width: 100%;
}
.rule_close_btn{
	position: absolute;
	width: 8%;
	height: 5.5%;
	top: 2%;
	right: 4%;
}
.prize_page{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 12;
}
.prize_img{
	position: absolute;
	background: url(../images/prize_img.png) center no-repeat;
	background-size: contain;
	width: 74%;
	height: 83%;
	top: 9%;
	left: 13%;
	border-radius: 2vh;
}
.prize_close_btn{
	position: absolute;
	width: 8%;
	height: 5%;
	top: 10.5%;
	right: 14.5%;
}