@charset "utf-8";
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
html,
body {
	position: relative;
	height: 100%
}
ul,
li {
	list-style: none;
	margin: 0;
	padding: 0;
}
h3 {
	margin: 0;
}
body {
	-webkit-user-select: none;
	user-select: none;
	margin: 0 auto;
	min-width: 320px;
	max-width: 640px;
	height: 100%;
	font-size: 14px;
	font-family: Helvetica, 'STHeiti STXihei', 'Microsoft JhengHei', 'Microsoft YaHei', Arial;
	line-height: 1.5;
	color: #666;
	background-color: #ccc;
}
a,
button {
	-webkit-tap-highlight-color: transparent;
	outline: 0
}
img {
	border: 0 none;
	vertical-align: top
}
canvas {
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor
}
p,
ol {
	margin: 0;
	padding: 0
}
.hide {
	display: none;
}
.clear {
	*zoom: 1
}
.clear:before,
.clear:after {
	display: table;
	content: ""
}
.clear:after {
	clear: both
}
/* end common */
/* loading style */

.jdc-loading {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	background: #27252d;
	-webkit-transition: opacity 0.5s
}
.jdc-loading .logo {
	position: absolute;
	width: 189px;
	height: 28px;
	top: 50%;
	left: 50%;
	margin-top: -28px;
	margin-left: -95px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXoAAAA4CAMAAADEmcNxAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEHRSTlMAV9EPvC7r3hqsBmyG+UeZAFimZAAAAzZJREFUeNrtnNl24yAMQFksIRCL//9rpzNJa4dCcULczEx1HzmOT87FFoslVAeb9Qc5bO2k74D1y4lXWM+QM5AN6i4CZfbG4QVnfNRw6BawmA+83dqz+bfAK87M4QtruMt8jsaldQcaz3REPW6/MTv1ev2xJFwiBHUI4gVbt3AFxuqdqG+QFk1qiGWz9sACov5BDNthsF6/AtmK+gdZ8pdBnnEd4EHUPwhyP+RTWceYLOofxVPPvD/WedqK+gdZaGB+gAFR/1T34ah5BxJwHsc3QkZshBbzhktVo8T6KWJQFTnVD3fRAEQEmT1uzUnLDGeChkAylXimrXcCxA/5LPP6SQxV4WYwe4dyeSuKrGanibWyHWmLRxva/RkkRP00CP2HPvb2GAzJHs4TiN2HvgTVhCLIzuUzcLSZ4WoY6CGbxk8hcXs1lbIS9Sfjt0iC++Yg6s/GUEtM0krUnw3m1vzGkKg/ncStUF+UqD+f+K7erBss6r+B0hhlMYv6b8CHz8kzDkT9+Wzq0049ifpvYBH1s8w/9RJwppmP9Sjq+8gM5z9A5vWvIunWataL+vNBkD2cF2FsUwyL+tMpzVqQdbHPUh9EfZuUOzl/ekJ9xl0fivoOJlTfZscL2lC/EARqo76RF/UduBMnNmc15Ks0nFCS7qfMFlHfxlE/D6eEXq2Pt9WvkKsCwg1Wor4J18PjnkKNgk5X5yhz+pOptl1r/boji/qK9jwmDkquoKQ6Gulry6Lt9Rp/+1qJ+haYB5nGWPJefHS73Px6MpNM5Jy5uGpzTtS3v4gP8+tx4QxEADoueOPUNhJk31hv0UrUNyjhUFVJwt+kVv0mmGGWj6hv4O1ELdVlVrOM3ytR/5lipyoIUQelGEefYUT9xr5uYcI96otMHIQbUV/jtOpiyx3F4tl9Wd8p6itSobkzEjwcOMnCgBL1t6DP42Oc0uEDFiy75kWFlKi/wVXi2wQ2x4/DgWiOdS+vPxY0hUEdg9hjq+dKyynpYtJ+GdY+ayovd2DM8mrwytw/8b6wBlJ3YKGyj6boXs8FAs3xDeZMtneRvQOyL4fesVOEoO7HUuZY/BslsgYKSvg7+AUx8tvRFZLwcQAAAABJRU5ErkJggg==) no-repeat;
	background-size: 100%;
	-webkit-transition: -webkit-transform 0.5s
}
.jdc-loading .progress {
	position: absolute;
	top: 6px;
	left: 30px;
	height: 16px;
	width: 23px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	text-align: center;
	background: #27252d;
	color: #fff;
	font-size: 14px;
	line-height: 16px
}
.jdc-loading.complete {
	opacity: 0
}
.jdc-loading.complete .logo {
	-webkit-transform: scale(2)
}
.loading2-sprite,
.loading2-0,
.loading2-100,
.loading2-25,
.loading2-50,
.loading2-75,
.loading-logo {
	background-image: url('../img/loading2-sd32167ceeb.png');
	background-repeat: no-repeat;
}
.loading2-0 {
	background-position: 0 0;
	height: 174px;
	width: 202px;
}
.loading2-25 {
	background-position: 0 -585px;
	height: 219px;
	width: 202px;
}
.loading2-50 {
	background-position: 0 -809px;
	height: 273px;
	width: 202px;
}
.loading2-75 {
	background-position: 0 -1087px;
	height: 343px;
	width: 202px;
}
.loading2-100 {
	background-position: 0 -179px;
	height: 401px;
	width: 202px;
}
.loading-logo {
	background-position: 0 -1435px;
	height: 24px;
	width: 119px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	bottom: 65px;
}
.page-loading .p {
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -100%);
}
.page-loading .txt {
	color: #4b4b4b;
	font-size: 26px;
	font-weight: bold;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, 100%);
}
.audio {
	background: url(../img/audio.png) no-repeat;
	width: 43px;
	height: 43px;
	-webkit-animation: audioRotate linear 4s infinite;
	-webkit-tap-highlight-color: transparent;
	position: absolute;
	right: 28px;
	top: 33px;
	z-index: 20;
}
@-webkit-keyframes audioRotate {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
.audio_pause:before {
	content: "";
	display: block;
	width: 90%;
	height: 3px;
	background-color: #7F7F7F;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
}
.audio.audio_pause {
	-webkit-animation: none;
}
.pages,
.page,
.pages1,
.page1 {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 1009px;
	overflow-y: auto;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: translateZ(0);
}
.page-loading,
.pages1 {
	background: url(../img/loadingbg.png) no-repeat!important;
}
.pages,
.page {
	background: url(../img/bg.jpg) no-repeat;
	background-size: 100%;
}
.btn {
	border: 0;
	outline: none;
	background-color: transparent;
}
.btn:active {
	-webkit-transform: scale(0.95);
	transform: scale(0.95);
}
/* page style */

.page-index {
	z-index: 11;
}
.page .inner {
	position: absolute;
}
.page-index .cover {
	background: url(../img/index-frame.png) no-repeat;
	z-index: 15;
	width: 640px;
	height: 1009px;
}
.page-loading .cover {
	background: url(../img/index-frame-min.png) no-repeat;
	z-index: 15;
	width: 640px;
	height: 1009px;
}
.page-index .room {
	background: url(../img/index-room.png) no-repeat;
	width: 584px;
	height: 934px;
	background-size: 100%;
	z-index: 3;
	left: 28px;
	top: 35px;
	opacity: .4;
	-webkit-transform: translateY(-100px) translateZ(0);
}
.page-index .dark {
	background-color: #acacac;
	width: 584px;
	height: 934px;
	z-index: 1;
	left: 28px;
	top: 35px;
}
.page-index .light {
	background: url(../img/index-light.png) no-repeat;
	background-size: 100%;
	z-index: 20;
	width: 100%;
	height: 100%;
	opacity: 0;
	display: none;
}
.page-index .wall {
	background: url(../img/wall.png) no-repeat;
	width: 585px;
	height: 933px;
	left: 28px;
	top: 35px;
	z-index: 5;
}
.index-sprite,
.index-door-link,
.index-tip,
.index-title {
	background-image: url('../img/index-sf2779113b3.png');
	background-repeat: no-repeat;
}
.index-door-link {
	background-position: -5px 0;
	height: 444px;
	width: 8px;
	left: 108px;
	top: 275px;
	z-index: 10;
}
.index-tip {
	background-position: -5px -449px;
	height: 73px;
	width: 155px;
	top: 315px;
	right: 71px;
	z-index: 12;
	opacity: 0;
	-webkit-transition: all 1s ease;
	-webkit-animation: tip-ani 3s infinite alternate;
}
@-webkit-keyframes tip-ani {
	0% {
		-webkit-transform: translateX(10px);
	}
	5% {
		-webkit-transform: translateX(-10px);
	}
	10% {
		-webkit-transform: translateX(10px);
	}
	15% {
		-webkit-transform: translateX(-10px);
	}
	20% {
		-webkit-transform: translateX(0px);
	}
	100% {
		-webkit-transform: translateX(0px);
	}
}
.index-title {
	background-position: -5px -527px;
	height: 65px;
	width: 497px;
	top: 68px;
	left: 73px;
	z-index: 6;
}
.door,
.door-1,
.door-10,
.door-11,
.door-2,
.door-3,
.door-4,
.door-5,
.door-6,
.door-7,
.door-8,
.door-9 {
	background-image: url('../img/door-s39331e9082.png');
	background-repeat: no-repeat;
}
.door {
	z-index: 5;
	top: 181px;
	left: 28px;
	-webkit-animation: door-ani1 .25s steps(1) 1s forwards;
}
.door.open {
	background-position: -5px -3172px;
	-webkit-animation: door-open 1000ms steps(1) 0s forwards;
}
@-webkit-keyframes door-ani1 {
	0% {
		background-position: -5px 0;
	}
	55% {
		background-position: -5px -2379px;
	}
	100% {
		background-position: -5px -3172px;
	}
}
@-webkit-keyframes door-open {
	0% {
		background-position: -5px -3172px;
	}
	30% {
		background-position: -5px -3965px;
	}
	40% {
		background-position: -5px -4758px;
	}
	50% {
		background-position: -5px -5551px;
	}
	60% {
		background-position: -5px -6344px;
	}
	70% {
		background-position: -5px -7137px;
	}
	80% {
		background-position: -5px -7930px;
	}
	90% {
		background-position: -5px -793px;
	}
	100% {
		background-position: -5px -1586px;
	}
}
.door-1 {
	background-position: -5px 0;
	height: 788px;
	width: 584px;
}
.door-10 {
	background-position: -5px -793px;
	height: 788px;
	width: 588px;
}
.door-11 {
	background-position: -5px -1586px;
	height: 788px;
	width: 588px;
}
.door-2 {
	background-position: -5px -2379px;
	height: 788px;
	width: 584px;
}
.door-3 {
	background-position: -5px -3172px;
	height: 788px;
	width: 584px;
}
.door-4 {
	background-position: -5px -3965px;
	height: 788px;
	width: 584px;
}
.door-5 {
	background-position: -5px -4758px;
	height: 788px;
	width: 584px;
}
.door-6 {
	background-position: -5px -5551px;
	height: 788px;
	width: 584px;
}
.door-7 {
	background-position: -5px -6344px;
	height: 788px;
	width: 586px;
}
.door-8 {
	background-position: -5px -7137px;
	height: 788px;
	width: 586px;
}
.door-9 {
	background-position: -5px -7930px;
	height: 788px;
	width: 586px;
}
.page .rbox {
	position: relative;
	height: 100%;
}
.page-scene {
	z-index: 2;
}
.page-share {
	z-index: 1;
}
.page-scene .title {
	background: url(../img/title.png) no-repeat;
	background-size: 100% 100%;
	width: 595px;
	height: 78px;
	left: 21px;
	top: 13px;
}
.page-scene .frame {
	background: url(../img/photo-frame.png) no-repeat;
	width: 596px;
	height: 753px;
	left: 21px;
	top: 104px;
	z-index: 20;
}
.page-scene .scene {
	z-index: 8;
	left: 21px;
	top: 104px;
	/* width: 596px; */
	
	width: 605px;
	height: 753px;
	overflow: hidden;
}
.page-scene .face {
	background: url(../img/scene-bd.png) no-repeat;
	width: 595px;
	height: 728px;
	top: 14px;
	left: 12px;
	z-index: 5;
}
.page-scene .animates {
	z-index: 1;
	width: 539px;
	height: 589px;
	left: 39px;
	top: 41px;
}
.page-scene .ctxt {
	bottom: 58px;
	z-index: 11;
	width: 100%;
}
.scene-1 .bg {
	background: url(../img/bg1.png) no-repeat;
	width: 538px;
	height: 589px;
	top: 0;
	left: 0;
	z-index: 1;
}
.scene-1 .txt {
	background: url(../img/txt1.png) no-repeat;
	width: 442px;
	height: 33px;
	margin: 0 auto;
}
.scene-2 .bg {
	background: url(../img/bg2.png) no-repeat;
	width: 538px;
	height: 589px;
	top: 0;
	left: 0;
	z-index: 1;
}
.scene-2 .txt {
	background: url(../img/txt2.png) no-repeat;
	width: 435px;
	height: 32px;
	margin: 0 auto;
}
.scene2-sprite,
.scene2-1,
.scene2-2,
.scene2-3,
.scene2-4,
.scene2-5,
.scene2-m1,
.scene2-m2,
.scene2-m3,
.scene2-m4,
.scene2-m5,
.scene2-p1,
.scene2-p2 {
	background-image: url('../img/scene2-s86f52d1335.png');
	background-repeat: no-repeat;
}
.scene2-1 {
	background-position: 0 0;
	height: 67px;
	width: 34px;
}
.scene2-2 {
	background-position: 0 -72px;
	height: 67px;
	width: 53px;
}
.scene2-3 {
	background-position: 0 -144px;
	height: 68px;
	width: 53px;
}
.scene2-4 {
	background-position: 0 -217px;
	height: 67px;
	width: 54px;
}
.scene2-5 {
	background-position: 0 -289px;
	height: 67px;
	width: 55px;
}
.scene2-m1 {
	background-position: 0 -361px;
	height: 152px;
	width: 237px;
}
.scene2-m2 {
	background-position: 0 -518px;
	height: 144px;
	width: 237px;
}
.scene2-m3 {
	background-position: 0 -667px;
	height: 137px;
	width: 237px;
}
.scene2-m4 {
	background-position: 0 -809px;
	height: 121px;
	width: 237px;
}
.scene2-m5 {
	background-position: 0 -935px;
	height: 124px;
	width: 237px;
}
.scene2-p1 {
	background-position: 0 -1064px;
	height: 437px;
	width: 462px;
}
.scene2-p2 {
	background-position: 0 -1506px;
	height: 437px;
	width: 462px;
}
.scene-2 .calendar {
	z-index: 3;
	width: 109px;
	left: 56px;
	height: 110px;
	top: 73px;
	/* -webkit-clip-path: polygon(0px 0px, 113px 0px, 113px 100px, 0px 100px); */
	
	overflow: hidden;
}
.scene-2 .calendar ul {
	-webkit-transition: -webkit-transform 1s;
}
.scene-2 .calendar li {
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 30px;
}
.scene-2 .people {
	z-index: 4;
	top: 147px;
	left: 39px;
}
.scene-2.active .people {
	-webkit-animation: scene2-people 0.5s steps(1) 1s infinite;
}
@-webkit-keyframes scene2-people {
	0% {
		background-position: 0 -1064px;
	}
	50% {
		background-position: 0 -1506px;
	}
	100% {
		background-position: 0 -1064px;
	}
}
.scene-2 .food {
	z-index: 5;
	top: 365px;
	left: 150px;
	-webkit-transform: translateX(1000px);
	display: none;
	/*  -webkit-transition:transform 1s; */
}
.scene-2 .scene2-m5 {
	top: 393px;
}
.scene-2 .scene2-m4 {
	top: 390px;
}
.scene-2 .scene2-m3 {
	top: 380px;
}
.scene-2 .scene2-m2 {
	top: 380px;
}
.active .food {
	display: block;
}
.scene-3 .bg {
	background: url(../img/bg3.png) no-repeat;
	width: 538px;
	height: 589px;
	top: 0;
	left: 0;
	z-index: 1;
}
.scene-3 .txt {
	background: url(../img/txt3.png) no-repeat;
	width: 284px;
	height: 32px;
	margin: 0 auto;
}
.scene3-sprite,
.scene3-1,
.scene3-2,
.scene3-3 {
	background-image: url('../img/scene3-s10359cd019.png');
	background-repeat: no-repeat;
}
.scene3-1 {
	background-position: 0 0;
	height: 507px;
	width: 470px;
}
.scene3-2 {
	background-position: 0 -512px;
	height: 507px;
	width: 470px;
}
.scene3-3 {
	background-position: 0 -1024px;
	height: 507px;
	width: 470px;
}
.scene3-sprite {
	z-index: 4;
	left: 10px;
}
.active .scene3-sprite {
	-webkit-animation: scene3-people 1s steps(1) 1s infinite;
}
@-webkit-keyframes scene3-people {
	0% {
		background-position: 0 -1024px;
	}
	25% {
		background-position: 0 0;
	}
	50% {
		background-position: 0 -512px;
	}
	100% {
		background-position: 0 -1024px;
	}
}
.scene-4 .bg {
	background: url(../img/bg4.png) no-repeat;
	width: 538px;
	height: 589px;
	top: 0;
	left: 0;
	z-index: 1;
}
.scene-4 .txt {
	background: url(../img/txt4.png) no-repeat;
	width: 512px;
	height: 34px;
	margin: 0 auto;
}
.scene4-sprite,
.scene4-p1,
.scene4-p2 {
	background-image: url('../img/scene4-scb6c94a961.png');
	background-repeat: no-repeat;
}
.scene4-p1 {
	background-position: 0 0;
	height: 591px;
	width: 538px;
}
.scene4-p2 {
	background-position: 0 -596px;
	height: 590px;
	width: 538px;
}
.scene4-sprite {
	z-index: 4;
	left: 0px;
}
.active .scene4-sprite {
	-webkit-animation: scene4-people 0.5s steps(1) 1s infinite;
}
@-webkit-keyframes scene4-people {
	0% {
		background-position: 0 -596px;
	}
	50% {
		background-position: 0 0;
	}
	100% {
		background-position: 0 -596px;
	}
}
.scene-6 .bg {
	background: url(../img/bg6.png) no-repeat;
	width: 538px;
	height: 589px;
	top: 0;
	left: 0;
	z-index: 1;
}
.scene-6 .txt {
	background: url(../img/txt6.png) no-repeat;
	width: 526px;
	height: 34px;
	margin: 0 auto;
}
.scene6-sprite,
.scene6-1,
.scene6-2,
.scene6-3 {
	background-image: url('../img/scene6-s7c8b630581.png');
	background-repeat: no-repeat;
}
.scene6-1 {
	background-position: 0 0;
	height: 495px;
	width: 495px;
}
.scene6-2 {
	background-position: 0 -500px;
	height: 495px;
	width: 495px;
}
.scene6-3 {
	background-position: 0 -1000px;
	height: 495px;
	width: 495px;
}
.scene6-sprite {
	z-index: 4;
	left: 32px;
	top: 85px;
}
.active .scene6-sprite {
	-webkit-animation: scene6-people 0.5s steps(1) 1s infinite;
}
@-webkit-keyframes scene6-people {
	0% {
		background-position: 0 -1000px;
	}
	25% {
		background-position: 0 -500px;
	}
	50% {
		background-position: 0 0;
	}
	75% {
		background-position: 0 -500px;
	}
	100% {
		background-position: 0 -1000px;
	}
}
.scene-7 .bg {
	background: url(../img/bg7.png) no-repeat;
	width: 538px;
	height: 589px;
	top: 0;
	left: 0;
	z-index: 1;
}
.scene-7 .txt {
	background: url(../img/txt7.png) no-repeat;
	width: 531px;
	height: 33px;
	margin: 0 auto;
}
.scene7-sprite,
.scene7-f1,
.scene7-f2 {
	background-image: url('../img/scene7-sb23ca05c1a.png');
	background-repeat: no-repeat;
}
.scene7-f1 {
	background-position: 0 0;
	height: 466px;
	width: 303px;
}
.scene7-f2 {
	background-position: 0 -471px;
	height: 466px;
	width: 303px;
}
.scene7-sprite {
	z-index: 4;
	right: -5px;
}
.active .scene7-sprite {
	-webkit-animation: scene7-people 1s steps(1) 1s infinite;
}
@-webkit-keyframes scene7-people {
	0% {
		background-position: 0 -471px;
	}
	50% {
		background-position: 0 0;
	}
	100% {
		background-position: 0 -471px;
	}
}
.scene-7 .longimg {
	z-index: 3;
	background: url(../img/p1.png);
	width: 372px;
	height: 627px;
	left: 21px;
	top: 100px;
	-webkit-mask-image: url(../img/mask.png);
	-webkit-mask-position: 15px 65px;
	-webkit-mask-repeat: no-repeat;
}
.scene-7.active .longimg {
	-webkit-animation: scene7-long 3s linear 1s infinite;
}
@-webkit-keyframes scene7-long {
	0% {
		background-position: -40px -134px;
	}
	50% {
		background-position: 8px 36px;
	}
	100% {
		background-position: -40px -134px;
	}
}
.scene-5 .bg {
	background: url(../img/bg5.png) no-repeat;
	width: 538px;
	height: 589px;
	top: 0;
	left: 0;
	z-index: 1;
}
.scene-5 .txt {
	background: url(../img/txt5.png) no-repeat;
	width: 490px;
	height: 33px;
	margin: 0 auto;
}
.scene5-sprite,
.scene5-a1,
.scene5-a2,
.scene5-a3,
.scene5-b1,
.scene5-b2,
.scene5-b3,
.scene5-p1,
.scene5-p2,
.scene5-p3 {
	background-image: url('../img/scene5-s63c698cb4a.png');
	background-repeat: no-repeat;
}
.scene5-a1 {
	background-position: 0 0;
	height: 112px;
	width: 61px;
}
.scene5-a2 {
	background-position: 0 -117px;
	height: 112px;
	width: 61px;
}
.scene5-a3 {
	background-position: 0 -234px;
	height: 112px;
	width: 61px;
}
.scene5-b1 {
	background-position: 0 -351px;
	height: 196px;
	width: 156px;
}
.scene5-b2 {
	background-position: 0 -552px;
	height: 198px;
	width: 155px;
}
.scene5-b3 {
	background-position: 0 -755px;
	height: 196px;
	width: 155px;
}
.scene5-p1 {
	background-position: 0 -956px;
	height: 413px;
	width: 154px;
}
.scene5-p2 {
	background-position: 0 -1374px;
	height: 413px;
	width: 154px;
}
.scene5-p3 {
	background-position: 0 -1792px;
	height: 413px;
	width: 161px;
}
.scene-5 .a {
	z-index: 4;
	right: 25px;
	top: 211px;
}
.scene-5 .b {
	z-index: 4;
	left: 28px;
	top: 228px;
}
.scene-5 .p {
	z-index: 4;
	left: 254px;
	top: 163px;
}
.scene-5.active .a {
	-webkit-animation: scene5-a-walk 5s linear infinite backwards;
}
.scene-5.active .b {
	-webkit-animation: scene5-b-walk 5s linear infinite forwards;
}
.scene-5.active .p {
	-webkit-animation: scene5-p 5s steps(1) 0s infinite;
}
@-webkit-keyframes scene5-a-walk {
	0% {
		-webkit-transform: translateX(200px);
	}
	100% {
		-webkit-transform: translateX(-800px);
	}
}
@-webkit-keyframes scene5-b-walk {
	0% {
		-webkit-transform: translateX(-200px);
	}
	20% {
		-webkit-transform: translateY(40px);
	}
	30% {
		-webkit-transform: translateY(0px);
	}
	40% {
		-webkit-transform: translateY(40px);
	}
	50% {
		-webkit-transform: translateY(0px);
	}
	100% {
		-webkit-transform: translateX(800px);
	}
}
@-webkit-keyframes scene5-p {
	10% {
		background-position: 0 -1792px;
	}
	12% {
		background-position: 0 -1374px;
	}
	15% {
		background-position: 0 -956px;
	}
	60% {
		background-position: 0 -956px;
	}
	62% {
		background-position: 0 -1374px;
	}
	65% {
		background-position: 0 -1792px;
	}
}
.btn1,
.btn1-1,
.btn1-2,
.btn1-3,
.btn1-4,
.btn1-5 {
	background-image: url('../img/btn1-s0b2c32a658.png');
	background-repeat: no-repeat;
}
.btn1-1 {
	background-position: -5px 0;
	height: 112px;
	width: 289px;
}
.btn1-2 {
	background-position: -5px -117px;
	height: 112px;
	width: 289px;
}
.btn1-3 {
	background-position: -5px -234px;
	height: 112px;
	width: 289px;
}
.btn1-4 {
	background-position: -5px -351px;
	height: 112px;
	width: 289px;
}
.btn1-5 {
	background-position: -5px -468px;
	height: 112px;
	width: 289px;
}
.btn2,
.btn2-1,
.btn2-2,
.btn2-3,
.btn2-4,
.btn2-5 {
	background-image: url('../img/btn2-sce994b76d4.png');
	background-repeat: no-repeat;
}
.btn2-1 {
	background-position: -5px 0;
	height: 112px;
	width: 289px;
}
.btn2-2 {
	background-position: -5px -117px;
	height: 112px;
	width: 289px;
}
.btn2-3 {
	background-position: -5px -234px;
	height: 112px;
	width: 289px;
}
.btn2-4 {
	background-position: -5px -351px;
	height: 112px;
	width: 289px;
}
.btn2-5 {
	background-position: -5px -468px;
	height: 112px;
	width: 289px;
}
.page-scene .btn1 {
	background-image: url(../img/btn1-s0b2c32a658.png);
	width: 289px;
	height: 112px;
	z-index: 21;
	top: 872px;
	left: 21px;
	-webkit-animation: btn-ani1 linear 1s, btn-ani 0.5s steps(4) 1.5s forwards;
}
.page-scene .btn2 {
	background-image: url(../img/btn2-sce994b76d4.png);
	width: 289px;
	height: 112px;
	z-index: 21;
	top: 872px;
	right: 21px;
	-webkit-animation: btn-ani1 linear 1s, btn-ani 0.5s steps(4) 2s forwards;
}
@-webkit-keyframes btn-ani1 {
	0% {
		-webkit-transform: scaleY(0.1)
	}
	100% {
		-webkit-transform: scaleY(1);
	}
}
@-webkit-keyframes btn-ani {
	100% {
		background-position: -5px bottom;
	}
}
.scene1-sprite,
.scene1-1,
.scene1-2,
.scene1-3,
.scene1-4,
.scene1-5 {
	background-image: url('../img/scene1-sc9c35557f9.png');
	background-repeat: no-repeat;
}
.scene1-sprite {
	z-index: 2;
	position: absolute;
	left: 150px;
	top: 131px;
	height: 300px;
	width: 320px;
}
.active .scene1-sprite {
	-webkit-animation: scene1-step1 1s steps(1) 2s alternate infinite;
}
.scene1-1 {
	background-position: -5px 0;
	height: 300px;
	width: 320px;
}
.scene1-2 {
	background-position: -5px -305px;
	height: 300px;
	width: 320px;
}
.scene1-3 {
	background-position: -5px -610px;
	height: 300px;
	width: 320px;
}
.scene1-4 {
	background-position: -5px -915px;
	height: 300px;
	width: 320px;
}
.scene1-5 {
	background-position: -5px -1220px;
	height: 300px;
	width: 320px;
}
@-webkit-keyframes scene1-step1 {
	0% {
		background-position: -5px 0;
	}
	20% {
		background-position: -5px -305px;
	}
	40% {
		background-position: -5px -610px;
	}
	60% {
		background-position: -5px -915px;
	}
	80% {
		background-position: -5px -1220px;
	}
	100% {
		background-position: -5px -1220px;
	}
}
@-webkit-keyframes scene1-step2 {
	0% {
		background-position: -5px -915px;
	}
	50% {
		background-position: -5px -1220px;
	}
	100% {
		background-position: -5px -915px;
	}
}
.page-scene .title {
	-webkit-animation: title-ani .5s linear 0s forwards;
}
@-webkit-keyframes title-ani {
	0% {
		-webkit-transform: rotateX(45deg) translateY(20px);
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateX(0) translateY(0);
		opacity: 1;
	}
}
.step2 .page-index .wall {
	-webkit-animation: step2-wall 3s linear 1s forwards, fadeOut 2s ease 3s forwards;
}
@-webkit-keyframes step2-wall {
	0% {
		-webkit-transform: scale(1);
	}
	100% {
		-webkit-transform: scale(1.5);
	}
}
@-webkit-keyframes step2-room {
	0% {
		-webkit-transform: scale(1) translateZ(0);
	}
	100% {
		-webkit-transform: scale(3.5) translateY(40px) translateZ(0);
		opacity: 0;
	}
}
.step2 .door.open {
	background-position: -5px -1586px;
}
.step2 .door.open,
.step2 .index-title,
.step2 .index-door-link {
	-webkit-animation: fadeOut .5s linear 1s forwards;
}
.step2 .page-index .room {
	-webkit-animation: room-move 2s linear 1s forwards;
}
.step3 .page-index .room {
	-webkit-transform: translateY(0px);
}
@-webkit-keyframes room-move {
	100% {
		opacity: 1;
		-webkit-transform: translateY(0px);
	}
}
.step3 .page-index .room {
	opacity: 1;
	-webkit-animation: step2-room 0.5s linear 0s forwards
}
.step3 .page-index .light {
	opacity: 1;
	display: block;
}
@-webkit-keyframes fadeOut {
	to {
		opacity: 0;
	}
}
@-webkit-keyframes fadeIn {
	to {
		opacity: 1;
	}
}
.page-scene .scene-1 {
	z-index: 10;
}
.page-scene .scene-2 {
	z-index: 9;
}
.page-scene .scene-3 {
	z-index: 8;
}
.page-scene .scene-4 {
	z-index: 7;
}
.page-scene .scene-5 {
	z-index: 6;
}
.page-scene .scene-6 {
	z-index: 5;
}
.page-scene .scene-7 {
	z-index: 4;
}


.share_pai,
.share_mc .mc0,
.share_mc .mc1,
.share_mc .mc2,
.share_mc .mc3,
.share_mc .mc4,
.share_mc .mc5,
.share_mc .mc6 {
	background-image: url(../img/pai.png);
	background-size: 636px 283px;
}
.share_pai {
	background-position: -532px 0
}
.share_mc .mc0 {
	background-position: -150px -193px
}
.share_mc .mc1 {
	background-position: 0 -193px
}
.share_mc .mc2 {
	background-position: -356px -193px
}
.share_mc .mc3 {
	background-position: -389px -193px
}
.share_mc .mc4 {
	background-position: -389px -242px
}
.share_mc .mc5 {
	background-position: 0 0
}
.share_mc .mc6 {
	background-position: -252px -193px
}
.share_frame .text1 {
	background-image: url(../img/text1.png);
	background-size: 331px 33px;
}
.share1 .share_frame .text1 {
	background-position: 0 0
}
.share2 .share_frame .text1 {
	background-position: -222px 0
}
.share3 .share_frame .text1 {
	background-position: -111px 0
}
.share_frame .text2 {
	background-image: url(../img/text2.png);
	background-size: 796px 60px;
}
.share1 .share_frame .text2 {
	background-position: -532px 0
}
.share2 .share_frame .text2 {
	background-position: -266px 0
}
.share3 .share_frame .text2 {
	background-position: 0 0
}
.share3 .bubble .b0,
.share3 .bubble .b1,
.share3 .bubble .b2,
.share3 .bubble .b3,
.share3 .bubble .b4,
.share3 .bubble .b5 {
	background-image: url(../img/bubble.png);
	background-size: 142px 56px;
}
.share3 .bubble .b0 {
	background-position: 0 0
}
.share3 .bubble .b1 {
	background-position: -92px 0
}
.share3 .bubble .b2 {
	background-position: -92px -26px
}
.share3 .bubble .b3 {
	background-position: -118px 0
}
.share3 .bubble .b4 {
	background-position: -52px -37px
}
.share3 .bubble .b5 {
	background-position: -52px 0
}
.share3 .shine,
.share3 .bubble2 .b0,
.share3 .bubble2 .b1,
.share3 .bubble2 .b2,
.share3 .bubble2 .b3,
.share3 .bubble2 .b4 {
	background-image: url(../img/bubble2.png);
	background-size: 243px 51px;
}
.share3 .shine {
	background-position: 0 0
}
.share3 .bubble2 .b0 {
	background-position: -167px 0
}
.share3 .bubble2 .b1 {
	background-position: -167px -26px
}
.share3 .bubble2 .b2 {
	background-position: -193px 0
}
.share3 .bubble2 .b3 {
	background-position: -193px -26px
}
.share3 .bubble2 .b4 {
	background-position: -219px 0
}
/* share妗嗘灦 */

.share {
	position: absolute;
	width: 595px;
	height: 971px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
}
.share div,
.share a,
.share span,
.share button {
	position: absolute;
	background-repeat: no-repeat;
}
.share_scene {
	width: 555.2px;
	height: 532px;
	left: 19.2px;
	top: 146.4px;
	background-size: 100%;
}
.share_frame {
	width: 100%;
	height: 711px;
	background-image: url(../img/frame.png);
	background-size: 100%;
	text-indent: -9999px;
}
.share_frame .text0 {
	width: 170px;
	height: 28px;
	top: 46px;
	left: 58px;
	background-image: url(../img/text0.png);
	background-size: 100%;
}
.share_frame .text1 {
	width: 109px;
	height: 33px;
	top: 86px;
	left: 90px;
}
.share_frame .text2 {
	width: 264px;
	height: 60px;
	top: 55px;
	left: 272px;
}
.share_title {
	width: 587px;
	height: 108px;
	top: 731px;
	text-indent: -9999px;
	background-image: url(../img/titlebg.png);
	background-size: 1176px 108px;
	z-index: 1;
	opacity: 0;
}
.share_title_text {
	width: 450px;
	height: 75px;
	top: 15px;
	left: 23px;
	background-image: url(../img/share-title.png);
	background-size: 450px 75px;
}
.share_pai {
	width: 104px;
	height: 114px;
	right: 3px;
	bottom: 3px;
}
.share_mc {
	width: 116px;
	height: 138px;
	right: -11px;
	bottom: 105px;
}
.share_mc .mc0 {
	width: 100px;
	height: 88px;
	left: -11px;
	top: -27px;
}
.share_mc .mc1 {
	width: 73px;
	height: 90px;
	left: 22px;
	top: 0;
}
.share_mc .mc2 {
	width: 31px;
	height: 65px;
	left: 43px;
	bottom: 0;
}
.share_mc .mc3 {
	width: 67px;
	height: 47px;
	left: 24px;
	bottom: 0;
}
.share_mc .mc4 {
	width: 116px;
	height: 34px;
	left: 0;
	bottom: 0;
}
.share_mc .mc5 {
	width: 264px;
	height: 191px;
	left: -248px;
	top: -185px;
	opacity: 0;
}
.share_mc .mc6 {
	width: 102px;
	height: 77px;
	left: -320px;
	top: -245px;
}
.share_btn {
	width: 289px;
	height: 112px;
	bottom: 0;
	text-indent: -9999px;
	background-size: 100%;
}
.share_btn.btn1 {
	left: 0;
	background-image: url(../img/btn1.png);
}
.share_btn.btn2 {
	right: 0;
	background-image: url(../img/btn2.png);
}
/* share鍏冪礌闅愯棌鍔ㄧ敾 */

@-webkit-keyframes share_hide {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
/* share妗嗘灦鍔ㄧ敾 */

.active .share_pai {
	-webkit-animation: share_pai1 1.5s 3s forwards, share_pai2 step-end 1.5s 3s forwards;
}
@-webkit-keyframes share_pai1 {
	0% {
		-webkit-transform: translate(-235px, -600px);
	}
	22% {
		-webkit-transform: translate(-235px, 0);
	}
	26% {
		-webkit-transform: translate(-240px, 0);
	}
	30% {
		-webkit-transform: translate(-235px, 0);
	}
	50% {
		-webkit-transform: translate(-478px, 0);
	}
}
@-webkit-keyframes share_pai2 {
	50%, 100% {
		background-position: -532px -116px;
	}
}
.active .share_title_text {
	-webkit-animation: share_title_text 1.5s 3s forwards;
}
@-webkit-keyframes share_title_text {
	0%, 50% {
		width: 0;
	}
}
.active .share_title {
	-webkit-animation: share_title steps(1) 1.5s 3s forwards;
}
@-webkit-keyframes share_title {
	0% {
		opacity: 1;
	}
	96%,
	100% {
		background-position: right 0;
		opacity: 1;
	}
}
.active .share_mc {
	-webkit-animation: share_hide step-end 1.5s 3s forwards;
}
.active .share_mc .mc0 {
	-webkit-animation: share_mc0 step-end 1.7s 4s forwards;
}
@-webkit-keyframes share_mc0 {
	0%, 100% {
		opacity: 0
	}
	54%,
	99% {
		opacity: 1
	}
}
.active .share_mc .mc5 {
	-webkit-animation: share_mc5 step-end 1.7s 4s forwards, share_mc5_2 step-end 1.7s 4s forwards;
}
@-webkit-keyframes share_mc5 {
	0%, 100% {
		opacity: 0
	}
	52%,
	99% {
		opacity: 1
	}
}
@-webkit-keyframes share_mc5_2 {
	52%, 68%, 84% {
		background-position: -264px 0;
	}
	60%,
	76%,
	92% {
		background-position: 0 0;
	}
}
.share2.active .share_mc .mc5 {
	-webkit-animation: share2_mc5 step-end 1.7s 4s forwards, share2_mc5_2 step-end 1.7s 4s forwards;
}
@-webkit-keyframes share2_mc5 {
	0%, 100% {
		opacity: 0
	}
	52%,
	99% {
		opacity: 1
	}
}
@-webkit-keyframes share2_mc5_2 {
	52%, 68%, 84% {
		background-position: 0 -329px;
	}
	60%,
	76%,
	92% {
		background-position: 0 0;
	}
}
.active .share_mc .mc6 {
	-webkit-animation: share_mc6 step-end 1.7s 4s forwards;
}
@-webkit-keyframes share_mc6 {
	0%, 100% {
		opacity: 0
	}
	60%,
	99% {
		opacity: 1
	}
}
.active .share_mc .mc4 {
	-webkit-animation: share_mc4 1.7s 4s forwards;
}
@-webkit-keyframes share_mc4 {
	0% {
		-webkit-transform: translate(0, 22px);
	}
	12% {
		-webkit-transform: translate(0, 0);
	}
}
.active .share_mc .mc3 {
	-webkit-animation: share_mc3 1.7s 4s forwards;
}
@-webkit-keyframes share_mc3 {
	0%, 12% {
		-webkit-transform: translate(0, 35px);
	}
	28% {
		-webkit-transform: translate(0, 0);
	}
}
.active .share_mc .mc2 {
	-webkit-animation: share_mc2 1.7s 4s forwards;
}
@-webkit-keyframes share_mc2 {
	0%, 24% {
		-webkit-transform: translate(0, 53px);
	}
	36% {
		-webkit-transform: translate(0, 0);
	}
}
.active .share_mc .mc1 {
	-webkit-animation: share_mc1 1.7s 4s forwards, share_mc1_2 step-end 1.7s 4s forwards;
}
@-webkit-keyframes share_mc1 {
	0%, 36% {
		-webkit-transform: translate(0, 125px);
	}
	50% {
		-webkit-transform: translate(0, 0);
	}
}
@-webkit-keyframes share_mc1_2 {
	54%, 99% {
		background-position: -75px -193px;
	}
}
.sd2-sprite,
.sd2-1,
.sd2-2 {
	background-image: url('../paiimg/sd2-s3243f17449.png');
	background-repeat: no-repeat;
}
.sd2-1 {
	background-position: 0 0;
	height: 324px;
	width: 271px;
}
.sd2-2 {
	background-position: 0 -329px;
	height: 324px;
	width: 271px;
}
/* share3 */
/* share3鍏叡閮ㄥ垎 */

.share3 .share_scene {
	background-image: url(../img/sbg3.png);
}
.share3 .people {
	width: 524px;
	height: 481px;
	bottom: 0;
	right: 0;
	background-image: url(../img/people.png);
	background-size: 1576px 481px;
	background-position: 0 0;
}
.share3 .bubble .b0 {
	width: 50px;
	height: 46px;
	left: 174px;
	top: 26px;
}
.share3 .bubble .b1 {
	width: 10px;
	height: 8px;
	left: 226px;
	top: 196px;
}
.share3 .bubble .b2 {
	width: 12px;
	height: 11px;
	left: 246px;
	top: 198px;
}
.share3 .bubble .b3 {
	width: 15px;
	height: 13px;
	left: 240px;
	top: 240px;
}
.share3 .bubble .b4 {
	width: 28px;
	height: 19px;
	left: 177px;
	top: 130px;
}
.share3 .bubble .b5 {
	width: 38px;
	height: 35px;
	left: 210px;
	top: 86px;
}
/* share3鍦烘櫙1 */

.share3 .fish {
	width: 91px;
	height: 59px;
	top: 208px;
	left: 136px;
	background-image: url(../img/fish.png);
	background-size: 100%;
}
/* share3鍦烘櫙2 */

.share3 .boom {
	width: 116px;
	height: 110px;
	top: 192px;
	left: 120px;
	background-image: url(../img/boom.png);
	background-size: 356px 110px;
}
.share3 .shine {
	width: 165px;
	height: 51px;
	left: 102px;
	top: 90px;
}
.share3 .bubble2 .b0 {
	width: 11px;
	height: 11px;
	left: 100px;
	top: 222px;
}
.share3 .bubble2 .b1 {
	width: 12px;
	height: 11px;
	left: 130px;
	top: 216px;
}
.share3 .bubble2 .b2 {
	width: 8px;
	height: 8px;
	left: 102px;
	top: 270px;
}
.share3 .bubble2 .b3 {
	width: 10px;
	height: 10px;
	left: 232px;
	top: 240px;
}
.share3 .bubble2 .b4 {
	width: 10px;
	height: 10px;
	left: 222px;
	top: 266px;
}
/* share3鍦烘櫙3 */

.share3 .mermaid {
	width: 128px;
	height: 109px;
	top: 190px;
	left: 114px;
	background-image: url(../img/mermaid.png);
	background-size: 256px 109px;
}
.share3 .hand {
	width: 134px;
	height: 132px;
	top: 206px;
	right: 40px;
	background-image: url(../img/hand.png);
	background-size: 268px 132px;
}
/* share3鍔ㄧ敾 */
/* share3鍦烘櫙1鍔ㄧ敾 */

.active.share3 .fish {
	-webkit-animation: share3_fish 6s forwards;
}
@-webkit-keyframes share3_fish {
	0% {
		opacity: 1;
		-webkit-transform: translate(-24px, 0);
	}
	90% {
		opacity: 1;
		-webkit-transform: translate(0px, 0);
	}
	100% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
}
.active.share3 .bubble {
	-webkit-animation: share3_bubble step-end 2.4s 2 forwards;
}
@-webkit-keyframes share3_bubble {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.active.share3 .bubble .b0 {
	-webkit-animation: share3_bubble_bs 1s 2 forwards;
}
.active.share3 .bubble .b1 {
	-webkit-animation: share3_bubble_bs 2.5s 2 forwards;
}
.active.share3 .bubble .b2 {
	-webkit-animation: share3_bubble_bs 3s 2 forwards;
}
.active.share3 .bubble .b3 {
	-webkit-animation: share3_bubble_bs 3.5s 2 forwards;
}
.active.share3 .bubble .b4 {
	-webkit-animation: share3_bubble_bs 2s 2 forwards;
}
.active.share3 .bubble .b5 {
	-webkit-animation: share3_bubble_bs 1.5s 2 forwards;
}
@-webkit-keyframes share3_bubble_bs {
	0%, 15% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, -20px) scale(1.2);
	}
}
/* share3鍦烘櫙2鍔ㄧ敾 */

.active.share3 .people {
	-webkit-animation: share3_people1 step-end 1.4s 5.4s forwards, share3_people2 step-end 1.4s 6.8s forwards;
}
@-webkit-keyframes share3_people1 {
	0%, 100% {
		background-position: -526px 0;
	}
}
.active.share3 .boom {
	-webkit-animation: share_hide step-end 5.4s forwards, share3_boom step-end 1.4s 5.4s forwards;
}
@-webkit-keyframes share3_boom {
	0%, 50.1% {
		background-position: 0 0;
	}
	16.7%,
	66.8% {
		background-position: 50% 0;
	}
	33.4%,
	83.5% {
		background-position: 100% 0;
	}
	100% {
		opacity: 0;
	}
}
/* share3鍦烘櫙3鍔ㄧ敾 */

@-webkit-keyframes share3_people2 {
	0%, 100% {
		background-position: -1052px 0;
	}
}
.active.share3 .mermaid,
.active.share3 .hand {
	-webkit-animation: share_hide step-end 6.8s forwards, share3_wave step-end 1.4s 7s forwards infinite;
}
@-webkit-keyframes share3_wave {
	0%, 40%, 80% {
		background-position: 0 0;
	}
	20%,
	60%,
	100% {
		background-position: 100% 0;
	}
}
.active.share3 .shine {
	-webkit-animation: share_hide step-end 6.8s forwards, share3_shine step-end 1.4s 7s;
}
@-webkit-keyframes share3_shine {
	0%, 40% {
		opacity: 0;
	}
	20%,
	60% {
		opacity: 1;
	}
}
.active.share3 .bubble2 {
	-webkit-animation: share_hide step-end 6.8s forwards
}
.active.share3 .bubble2 .b0 {
	-webkit-animation: share3_bubble2_bs 1.4s 6.8s forwards;
}
.active.share3 .bubble2 .b1 {
	-webkit-animation: share3_bubble2_bs 1.8s 6.8s forwards;
}
.active.share3 .bubble2 .b2 {
	-webkit-animation: share3_bubble2_bs 1s 6.8s forwards;
}
.active.share3 .bubble2 .b3 {
	-webkit-animation: share3_bubble2_bs 2s 6.8s forwards;
}
.active.share3 .bubble2 .b4 {
	-webkit-animation: share3_bubble2_bs 1.6s 6.8s forwards;
}
@-webkit-keyframes share3_bubble2_bs {
	50% {
		opacity: 0.4;
		-webkit-transform: scale(1.2);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}
.active.share3 .share_scene {
	-webkit-animation: share3_scene 1.4s 7s forwards infinite;
}
@-webkit-keyframes share3_scene {
	0, 57.2% {
		background-image: none;
		background-color: #FFD833;
	}
	14.3%,
	71.5% {
		background-image: none;
		background-color: #F44711;
	}
	28.6%,
	85.8% {
		background-image: none;
		background-color: #2727F2;
	}
	42.9%,
	100% {
		background-image: none;
		background-color: #A972CC;
	}
}