/*

By  鱼 
QQ  594074555

*/
ul,li,ol,dl,dt,dd{list-style: none;}
audio,canvas,video{ display: inline-block;*display: inline;*zoom: 1;}
a:hover{text-decoration:none;cursor: pointer;}
html,body{font-family: "arial" ,'Microsoft Yahei';color: #333;overflow-x: hidden;position: relative;height: 100%;}
*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;}
img{border:0;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
.clear{clear: both;}
.mt2{margin-top: 2% !important;}
.mb2{margin-bottom: 2% !important;}
.pt2{padding-top: 2% !important;}
.pb2{padding-bottom: 2% !important;}
.mt0{margin-top: 0% !important;}
.mb0{margin-bottom: 0% !important;}
.pt0{padding-top: 0% !important;}
.pb0{padding-bottom: 0% !important;}
.after:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}
/*********************************/

/*父级*/
	#main{
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
		left: 0;
		top: 0;
		background: #cccccc;
		background: radial-gradient(#efefef 30%, #ccc 70%);
	}
	#main img{
		display: block;
	}
	#main.pa2{
		-webkit-animation-duration: 1s;
  		animation-duration: 1s;
		-webkit-animation-delay: 3s;
		animation-delay: 3s;
  		-webkit-animation-name: bgcolor;
  		animation-name: bgcolor;
	    -webkit-animation-fill-mode: both;
  		animation-fill-mode: both;
	}
	@-webkit-keyframes bgcolor{
		0%{
			background: #cccccc;
			background: radial-gradient(#efefef 30%, #ccc 70%);
		}
		100%{
			background: #fff;
		}
	}
	@keyframes bgcolor{
		0%{
			background: #cccccc;
			background: radial-gradient(#efefef 30%, #ccc 70%);
		}
		100%{
			background: #fff;
		}
	}

/*第一屏*/
	.page1{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		overflow: hidden;
		text-align: center;
		z-index: 3;
	}
	.page1 .logo img{
		display: block;
		width: 100%;
	}
	.page1 .logo{
		position: relative;
		margin: 8% auto 0 auto;
		width: 20%;
  		-webkit-transform-origin: center top;
  		-moz-transform-origin: center top;
  		-ms-transform-origin: center top;
  		-o-transform-origin: center top;
  		transform-origin: center top;
	}
	.page1.player .logo{
		-webkit-animation-duration: 50s;
  		animation-duration: 50s;
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
  		-webkit-animation-name: logo;
  		animation-name: logo;
	    -webkit-animation-fill-mode: both;
  		animation-fill-mode: both;
	}
	@-webkit-keyframes logo{
		0% {
			opacity: 0;
		    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
		    animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
		}
        2%{
        	opacity: 1;
		    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
		    animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
        }
        5%{opacity: 1;transform:rotate(5deg)}
        10%{opacity: 1;transform:rotate(-5deg)}
        15%{opacity: 1;transform:rotate(3deg)}
        20%{opacity: 1;transform:rotate(-3deg)}
        25%{opacity: 1;transform:rotate(0deg)}
        30%{opacity: 1;transform:rotate(5deg)}
        35%{opacity: 1;transform:rotate(-5deg)}
        40%{opacity: 1;transform:rotate(3deg)}
        45%{opacity: 1;transform:rotate(-3deg)}
        50%{opacity: 1;transform:rotate(0deg)}
        55%{opacity: 1;transform:rotate(5deg)}
        60%{opacity: 1;transform:rotate(-5deg)}
        65%{opacity: 1;transform:rotate(3deg)}
        70%{opacity: 1;transform:rotate(-3deg)}
        75%{opacity: 1;transform:rotate(0deg)}
        80%{opacity: 1;transform:rotate(5deg)}
        85%{opacity: 1;transform:rotate(-5deg)}
        90%{opacity: 1;transform:rotate(3deg)}
        95%{opacity: 1;transform:rotate(-3deg)}
        100%{opacity: 1;transform:rotate(0deg);}
	}
	@keyframes logo{
	    0% {
			opacity: 0;
		    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		    -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
		    animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
		}
        2%{
        	opacity: 1;
		    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		    -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
		    animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
        }
        5%{opacity: 1;-webkit-transform:rotate(5deg)}
        10%{opacity: 1;-webkit-transform:rotate(-5deg)}
        15%{opacity: 1;-webkit-transform:rotate(3deg)}
        20%{opacity: 1;-webkit-transform:rotate(-3deg)}
        25%{opacity: 1;-webkit-transform:rotate(0deg)}
        30%{opacity: 1;-webkit-transform:rotate(5deg)}
        35%{opacity: 1;-webkit-transform:rotate(-5deg)}
        40%{opacity: 1;-webkit-transform:rotate(3deg)}
        45%{opacity: 1;-webkit-transform:rotate(-3deg)}
        50%{opacity: 1;-webkit-transform:rotate(0deg)}
        55%{opacity: 1;-webkit-transform:rotate(5deg)}
        60%{opacity: 1;-webkit-transform:rotate(-5deg)}
        65%{opacity: 1;-webkit-transform:rotate(3deg)}
        70%{opacity: 1;-webkit-transform:rotate(-3deg)}
        75%{opacity: 1;-webkit-transform:rotate(0deg)}
        80%{opacity: 1;-webkit-transform:rotate(5deg)}
        85%{opacity: 1;-webkit-transform:rotate(-5deg)}
        90%{opacity: 1;-webkit-transform:rotate(3deg)}
        95%{opacity: 1;-webkit-transform:rotate(-3deg)}
        100%{opacity: 1;-webkit-transform:rotate(0deg);}
	}
	.page1 .logo.on{
		position: absolute;
		right: 50%;
		top: 0%;
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
		-webkit-animation-duration: 5s;
  		animation-duration: 5s;
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
  		-webkit-animation-name: logo2;
  		animation-name: logo2;
	    -webkit-animation-fill-mode: both;
  		animation-fill-mode: both;
  		-webkit-transform-origin: center top;
  		-moz-transform-origin: center top;
  		-ms-transform-origin: center top;
  		-o-transform-origin: center top;
  		transform-origin: center top;
	}
	@-webkit-keyframes logo2{
		10% {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
			right: 50%;
			top: 0;
			-webkit-transform: translateX(50%);
			transform: translateX(50%);
		}
		80%,100%{
			opacity: 0;
			-webkit-transform: scale(0.9);
			transform: scale(0.9);
			right: 0;
			top: -18%;
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}
	@keyframes logo2{
		10% {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
			right: 50%;
			top: 0;
			-webkit-transform: translateX(50%);
			transform: translateX(50%);
		}
		80%,100%{
			opacity: 0;
			-webkit-transform: scale(0.9);
			transform: scale(0.9);
			right: 0;
			top: -18%;
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}
	.page1 .word{
		font-size: 20px;
		text-align: center;
		color: #79574e;
		position: relative;
		cursor: pointer;
		display: inline-block;
		z-index: 2;
	}
	@media screen and (max-width: 1200px){
		.page1 .word{
			font-size: 16px;
		}
	}
	.page1 .word{
  		opacity: 0;
	}
	.page1.player .word{
		-webkit-animation-duration: 1s;
  		animation-duration: 1s;
		-webkit-animation-delay: 2.5s;
		animation-delay: 2.5s;
  		-webkit-animation-name: wordani;
  		animation-name: wordani;
	    -webkit-animation-fill-mode: both;
  		animation-fill-mode: both;
	}
	@-webkit-keyframes wordani{
	    0% {
		    opacity: 0;
		}
		100%{
		    opacity: 1;
		}
	}
	@keyframes wordani{
	    0% {
		    opacity: 0;
		}
		100%{
		    opacity: 1;
		}
	} 
	.page1 .word:hover span{
		padding: 0 0.1em;
	}
	.page1 .word span{
		font-size: 2em;
		display: inline-block;
		line-height: 1.5em;
		position: relative;
		-webkit-transition-duration: 1s;
		-o-transition-duration: 1s;
		transition-duration: 1s;
		vertical-align: middle;
		font-weight: 100;
	}
	.page1 .word em,
	.page1 .word i{
		font-style: normal;
		color: #999;
		display: block;
		text-align: center;
		font-size: 0.8em;
		margin-top: 1em;
	}
	.page1 .word i{
		display: none;
	}
	.page1 .word .none{
		font-size: 2.2em;
	}
	/* .page1 .word .text{
	  		opacity: 0;
	}
	.page1.player .word .text{
	  		-webkit-animation-name: blink;
	  		animation-name: blink;
		-webkit-animation-duration: 0.1s;
	  		animation-duration: 0.1s;
	    -webkit-animation-fill-mode: both;
	  		animation-fill-mode: both;
	}
	.page1 .word .text.blink1{
		-webkit-animation-delay: 3s;
		animation-delay: 3s;
	}
	.page1 .word .text.blink2{
		-webkit-animation-delay: 3.5s;
		animation-delay: 3.5s;
	}
	.page1 .word .text.blink3{
		-webkit-animation-delay: 4s;
		animation-delay: 4s;
	}
	.page1 .word .text.blink4{
		-webkit-animation-delay: 4.5s;
		animation-delay: 4.5s;
	}
	.page1 .word .text.blink5{
		-webkit-animation-delay: 5s;
		animation-delay: 5s;
	} */
	@-webkit-keyframes blink{
	    0% {
		    opacity: 0;
  			position: absolute;
  			-webkit-transform: translate(0, -0) scale(0.5);
  			transform: translate(0, -0) scale(0.5);
		}
		100%{
		    opacity: 1;
  			position: relative;
  			-webkit-transform: translate(0,0) scale(1);
  			transform: translate(0,0) scale(1);
		}
	}
	@keyframes blink{
	    0% {
		    opacity: 0;
  			position: absolute;
  			-webkit-transform: translate(0, -0) scale(0.5);
  			transform: translate(0, -0) scale(0.5);
		}
		100%{
		    opacity: 1;
  			position: relative;
  			-webkit-transform: translate(0,0) scale(1);
  			transform: translate(0,0) scale(1);
		}
	}
	.page1 .word .line.blinking{
  		opacity: 0;
	}
	.page1.player .word .line.blinking{
  		/* -webkit-animation-name: blinking;
  		animation-name: blinking;
  				-webkit-animation-duration: 0.5s;
  		animation-duration: 0.5s;
  			    -webkit-animation-fill-mode: both;
  		animation-fill-mode: both;
  		-webkit-animation-iteration-count: infinite;
  		animation-iteration-count: infinite; */
	}
	@-webkit-keyframes blinking{
	    0% ,70%{
		    opacity: 0;
		}
		100%{
		    opacity: 1;
		}
	}
	@keyframes blinking{
	    0% ,70%{
		    opacity: 0;
		}
		100%{
		    opacity: 1;
		}
	}
	/*视差滚动*/
	#parallax{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1400px;
		height: 700px;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
  		opacity: 0;
	}
	.page1.player #parallax{
		-webkit-animation-duration: 1s;
  		animation-duration: 1s;
		-webkit-animation-delay: 4s;
		animation-delay: 4s;
  		-webkit-animation-name: wordani;
  		animation-name: wordani;
	    -webkit-animation-fill-mode: both;
  		animation-fill-mode: both;
	}
	.parallax-layer{
		position: absolute;
	}
	#parallax .heard{
		position: absolute;
		right: 0;
		bottom: 50%;
		width: 90%;
	}
	#parallax .heard img{
		width: 100px;
		right: 10%;
		top: 10%;
		position: absolute;
	}

	#parallax .star{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 95%;
	}
	#parallax .star img{
		width: 100px;
		left: 10%;
		bottom: 10%;
		position: absolute;
	}
	.page1.on .word{
		opacity: 0;
		-webkit-animation-name: none;
		animation-name: none;
	}
	.page1.on{
		-webkit-transition: all .5s ease-in-out 0s;
		-moz-transition: all .5s ease-in-out 0s;
		-ms-transition: all .5s ease-in-out 0s;
		-o-transition: all .5s ease-in-out 0s;
		transition: all .5s ease-in-out 0s;
		background-image: none;
		z-index: 1;
	}
	.page1.on #parallax{
		-webkit-transition: all .5s ease-in-out 0s;
		-moz-transition: all .5s ease-in-out 0s;
		-ms-transition: all .5s ease-in-out 0s;
		-o-transition: all .5s ease-in-out 0s;
		transition: all .5s ease-in-out 0s;
		-webkit-animation-name: none;
		animation-name: none;
		opacity: 0;
	}
	@media screen and (max-width: 820px){
		.page1 .word{
			font-size: 12px;
		}
		.page1 .word em{
			display: none;
		}
		.page1.player #parallax{
			display: none;
		}
	}

/*第二屏*/
	.page2{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 2;
		opacity: 0;
		-webkit-transform: scale3d(0.8,0.8,1) translate3d(0,0,0);
		transform: scale3d(0.8,0.8,1) translate3d(0,0,0);
		-webkit-transition-duration: 1.5s;
		-moz-transition-duration: 1.5s;
		-ms-transition-duration: 1.5s;
		transition-duration: 1.5s;
		-webkit-transition-delay: 1s;
		-moz-transition-delay: 1s;
		-ms-transition-delay: 1s;
		transition-delay: 1s;
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		/* backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden; */
		/* overflow-x: auto;
		overflow-y: hidden; */
		-webkit-backface-visibility: hidden;  
		-moz-backface-visibility: hidden;  
		-ms-backface-visibility: hidden; 
		backface-visibility: hidden;  
		-webkit-perspective: 1000;  
		-moz-perspective: 1000;  
		-ms-perspective: 1000;  
		perspective: 1000;
	}
	/* .page2::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}
	.page2::-webkit-scrollbar-track {
		background-color:#ccc;
	}
	.page2::-webkit-scrollbar-thumb {
		background-color:#79574e;
	} */
	.page2.on{
		-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
		transform: scale3d(1,1,1) translate3d(0,0,0);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		opacity: 1;
	}
	.tishi{
		position: absolute;
		left: 50%;
		bottom: 0;
		background: #999;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		padding: 6px 10px;
		font-size: 12px;
		color: #fff;
		z-index: 90;
		opacity: 0;
		-webkit-transition-delay: 2.5s;
		-o-transition-delay: 2.5s;
		transition-delay: 2.5s;
		-webkit-transition-duration: 1s;
		-o-transition-duration: 1s;
		transition-duration: 1s;
	}
	.page2.on+.tishi{
		opacity: 0.8;
		-webkit-animation-delay: 2.5s;
		-o-animation-delay: 2.5s;
		animation-delay: 2.5s;
  		-webkit-animation-name: tishi;
  		animation-name: tishi;
  		-webkit-animation-duration: 1s;
  		animation-duration: 1s;
  		-webkit-animation-fill-mode: both;
  		animation-fill-mode: both;
  		-webkit-animation-iteration-count: infinite;
  		animation-iteration-count: infinite;
  		animation-direction:alternate;
		-webkit-animation-direction:alternate;
	}
	@-webkit-keyframes tishi{
	    0%{
		    opacity: 0;
		}
		100%{
		    opacity: 1;
		}
	}
	@keyframes tishi{
	    0%{
		    opacity: 0;
		}
		100%{
		    opacity: 1;
		}
	}
	.tishi.hide{
		opacity: 0 !important;
  		-webkit-animation-name: none !important;
  		animation-name: none !important;
	}
	.page2 .bgimg{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;
		-webkit-transition-duration: 1.5s;
		-o-transition-duration: 1.5s;
		transition-duration: 1.5s;
		background: #fff;
		opacity: 1;
	}
	.page2 .bgimg:after{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0;
		-webkit-transition-duration: 1.5s;
		-o-transition-duration: 1.5s;
		transition-duration: 1.5s;
		position: absolute;
		left: 0;
		top: 0;
	}
	.page2.player .bgimg:after{
		opacity: 0.1;
		z-index: 9;
	}
	.page2.player{
		/* background-image: url(../images/small_color_2.png);
		background-repeat: no-repeat;
		background-position: center center;
		-webkit-background-size: auto 100%;
		background-size: auto 100%; */
	}
	.page2.player .bgimg{
		-webkit-filter: blur(3px);
		-moz-filter: blur(3px);
		-ms-filter: blur(3px);
		-o-filter: blur(3px);
		filter: blur(3px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
		opacity: 0.6;
	}
	.page2.height110 .bgimg img{
		height: 110%;
		width: auto;
		margin: 0 auto;
		position: relative;
		top: -8%;
	}
	.page2.height110 .inbox{
		height: 110%;
		margin: 0 auto;
		position: relative;
		z-index: 4;
		opacity: 1;
		top: -8%;
	}
	.page2.width110 .bgimg img{
		width: 100%;
		margin: 0 auto;
		position: relative;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.page2.width110 .inbox{
		width: 100%;
		margin: 0 auto;
		position: relative;
		z-index: 4;
		opacity: 1;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

/*第三屏-右侧按钮*/
	.page3{
		position: fixed;
		right: 3em;
		bottom: 1.4em;
		z-index: 100;
		font-size: 20px;
		display: none;
	}
	.page3 a{
		display: inline-block;
		width: 4em;
	}
	.page3 a img{
		display: block;
		width: 100%;
	}
	.page3 a.back{
		margin-left: 1em;
	}
	@media screen and (max-width: 1200px){
		.page3{
			font-size: 16px;
		}
	}
	@media screen and (max-width: 820px){
		.page3{
			font-size: 12px;
			right: 1em;
			bottom: 1em;
		}
	}

/*景深部分-公共*/
	.page2 .text{
		height: auto;
		background: url(../images/word_bg.png) center no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		padding: 4% 6%;
		opacity: 0;
		-webkit-transition-delay: 0s;
		-o-transition-delay: 0s;
		transition-delay: 0s;
		position: relative;
		z-index: 11;
	}
	.page2.player{
		opacity: 1;
	}
	.page2.player .text{
		-webkit-transition-duration: 1.5s;
		-o-transition-duration: 1.5s;
		transition-duration: 1.5s;
		-webkit-transition-delay: 2s;
		-o-transition-delay: 2s;
		transition-delay: 2s;
	}
	.page2 .text h2{
		font-size: 22px;
		font-weight: normal;
		line-height: 2em;
		text-align: justify;
	}
	.page2 .text p{
		font-size: 16px;
		color: #333;
		font-weight: 200;
		line-height: 2em;
		text-align: justify;
	}
	@media screen and (max-width: 1200px){
		.page2 .text h2{
			font-size: 16px;
		}
		.page2 .text p{
			font-size: 14px;
		}
	}
	.page2 .scene{
		position: absolute;
		pointer-events: none;
	}
	.page2 .scene.on{
		z-index: 10;
	}
	.page2 .scene .imgbox{
		position: absolute;
	}
	.page2 .scene img{
		display: block;
		width: 100%;
	}
	.page2 .scene img.color,
	.page2 .scene img.color2{
		position: relative;
		opacity: 0;
		z-index: 20;
		cursor: pointer;
		pointer-events: auto;
		-webkit-transition-duration: 1.5s;
		-o-transition-duration: 1.5s;
		transition-duration: 1.5s;
	}
	.page2 .scene img.color2{
		z-index: 19;
	}
	.page2 .scene img.colorn{
		position: absolute;
		z-index: 8;
		left: 0;
		top: 0;
		opacity: 1;
		-webkit-filter: blur(0);
		-moz-filter: blur(0);
		-ms-filter: blur(0);
		-o-filter: blur(0);
		filter: blur(0);
		-webkit-transition-duration: 2s;
		-o-transition-duration: 2s;
		transition-duration: 2s;
		-webkit-transition-delay: 0s;
		-o-transition-delay: 0s;
		transition-delay: 0s;
	}
	.page2.player .scene img.colorn{
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-ms-filter: blur(5px);
		-o-filter: blur(5px);
		filter: blur(5px);
	}
	.page2 .scene img.colorn.on{
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-ms-filter: blur(5px);
		-o-filter: blur(5px);
		filter: blur(5px);
		opacity: 0;
	}

	.page2.player1 .scene1 img.color,
	.page2.player2 .scene2 img.color,
	.page2.player3 .scene3 img.color,
	.page2.player4 .scene4 img.color,
	.page2.player5 .scene5 img.color,
	.page2.player6 .scene6 img.color,
	.page2.player7 .scene7 img.color,
	.page2.player8 .scene8 img.color,
	.page2.player8 .scene8 img.color2,
	.page2.player9 .scene9 img.color,
	.page2.player10 .scene10 img.color,
	.page2.player1 .scene1 .text,
	.page2.player2 .scene2 .text,
	.page2.player3 .scene3 .text,
	.page2.player4 .scene4 .text,
	.page2.player5 .scene5 .text,
	.page2.player6 .scene6 .text,
	.page2.player7 .scene7 .text,
	.page2.player8 .scene8 .text,
	.page2.player9 .scene9 .text,
	.page2.player10 .scene10 .text{
		opacity: 1;
	}
	.page2.player1 .scene1 img.color,
	.page2.player2 .scene2 img.color,
	.page2.player3 .scene3 img.color,
	.page2.player4 .scene4 img.color,
	.page2.player5 .scene5 img.color,
	.page2.player6 .scene6 img.color,
	.page2.player7 .scene7 img.color,
	.page2.player8 .scene8 img.color,
	.page2.player8 .scene8 img.color2,
	.page2.player9 .scene9 img.color,
	.page2.player10 .scene10 img.color{
		-webkit-transition-delay: 1s;
		-o-transition-delay: 1s;
		transition-delay: 1s;
	}
	.page2 .scene1 .imgbox{
		display: block;
	    position: absolute;
	}

/*1-头上有猫的小男孩*/
	.page2 .scene1{
		z-index: 5;
		left: 11%;
   		bottom: 21%;
    	width: 30%;
    	height: 30%;
	}
	.page2 .scene1 .img1_1{
	    width: 16%;
	    left: 11.4%;
	    bottom: 10.6%;
	}
	.page2.player1{
		-webkit-transform: scale3d(3.2,3.2,1) translate3d(25%,-18%,0);
		transform: scale3d(3.2,3.2,1) translate3d(25%,-18%,0);
	}
	.page2 .scene1 .text{
		width: 80%;
		margin-left: 10%;
		margin-top: 11%;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	@media screen and (max-width: 1200px){
		.page2 .scene1 .text{
			margin-top: 9%;
		}
	}

/*2-韩剧女+足球4人组+日立人物小卖部*/
	.page2 .scene2{
		z-index: 5;
		left: 24%;
    	bottom: 5%;
    	width: 30%;
    	height: 73%;
	}
	.page2 .scene2 .img2_1{
		width: 33%;
		right: 10%;
		top: 12%;
	}
	.page2 .scene2 .img2_2{
		width: 58%;
		left: -1.9%;
		top: 26.4%;
	}
	.page2 .scene2 .img2_3{
		width: 46%;
		left: 13.6%;
		bottom: 10%;
	}
	.page2.player2{
		-webkit-transform: scale3d(1.2,1.2,1) translate3d(-6%,-10%,0);
		transform: scale3d(1.2,1.2,1) translate3d(-6%,-10%,0);
	}
	.page2 .scene2 .text h2{
		font-size: 20px;
	}
	.page2 .scene2 .text p{
		font-size: 16px;
		padding-bottom: 1em;
	}
	.page2 .scene2 .text{
		width: 90%;
		margin-left: 110%;
		margin-top: 34%;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	.page2.player2 .bgimg:after{
		opacity: 0.2;
		z-index: 9;
	}
	@media screen and (max-width: 1400px){
		.page2 .scene2 .text{
			margin-top: 20%;
		}
	}

/*3-出窍男+有钱大晒*/
	.page2 .scene3{
		z-index: 5;
	    left: 20%;
	    top: 5%;
	    width: 50%;
	    height: 50%;
	}
	.page2 .scene3 .img3_1{
		width: 26%;
		right: 33.4%;
		top: 22%;
	}
	.page2 .scene3 .img3_2{
		width: 18.2%;
		left: 25.2%;
		top: 43.5%;
	}
	.page2.player3{
		-webkit-transform: scale3d(1.6,1.6,1) translate3d(-6%,16%,0);
		transform: scale3d(1.6,1.6,1) translate3d(-6%,16%,0);
	}
	.page2 .scene3 .text{
		width: 50%;
	    margin-left: 70%;
	    margin-top: 15%;
	}

/*4-轮椅阿伯+下棋*/
	.page2 .scene4{
		z-index: 5;
		left: 24%;
		bottom: 0;
		width: 55%;
		height: 50%;
	}
	.page2 .scene4 .img4_1{
		width: 17.2%;
	    left: 31.3%;
	    top: 25.5%;
	}
	.page2 .scene4 .img4_2{
		width: 37%;
		left: 11%;
		bottom: -3.4%;
	}
	.page2.player4{
		-webkit-transform: scale3d(1.4,1.4,1) translate3d(-8%,-22%,0);
		transform: scale3d(1.4,1.4,1) translate3d(-8%,-22%,0);
	}
	.page2.player4 .scene4 .color{
		-webkit-transform: scale3d(1.1, 1.1, 1);
		-ms-transform: scale3d(1.1, 1.1, 1);
		-o-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
	.page2 .scene4 .text{
		width: 50%;
		margin-left: 54%;
		margin-top: 16%;
	}
	@media screen and (max-width: 1400px){
		.page2 .scene4 .text{
			margin-top: 8%;
		}
	}

/*5-拉狗男主+伸舌头的狗*/
	.page2 .scene5{
		z-index: 6;
		left: 20%;
		top: 0;
		width: 40%;
		height: 80%;
	}
	.page2 .scene5 .img5_1{
		width: 25.9%;
		left: 5.16%;
		top: 20.8%;
	}
	.page2 .scene5 .img5_2{
		width: 13%;
		left: 21.96%;
		bottom: 16.4%;
	}
	.page2.player5{
		-webkit-transform: scale3d(1.6,1.6,1) translate3d(8%,10%,0);
		transform: scale3d(1.6,1.6,1) translate3d(8%,10%,0);
	}
	.page2 .scene5 .text{
		width: 50%;
		margin-left: 50%;
		margin-top: 36%;
	}
	@media screen and (max-width: 1400px){
		.page2 .scene5 .text{
			margin-top: 30%;
			width: 60%;
		}
	}

/*6-公鸡男+伸手肌肉男*/
	.page2 .scene6{
		z-index: 6;
		left: 50%;
		bottom: 0;
		width: 40%;
		height: 60%;
	}
	.page2 .scene6 .img6_1{
		width: 13%;
		left: 19%;
		top: 10%;
	}
	.page2 .scene6 .img6_2{
		width: 17%;
	    left: 24%;
	    bottom: 11%;
	}
	.page2.player6{
		-webkit-transform: scale3d(1.7,1.7,1) translate3d(0%,-22%,0);
		transform: scale3d(1.7,1.7,1) translate3d(0%,-22%,0);
	}
	.page2 .scene6 .text{
		width: 50%;
		margin-left: 50%;
		margin-top: 20%;
		-webkit-transform: scale3d(0.9,0.9,1);
		transform: scale3d(0.9,0.9,1);
	}
	.page2 .scene6 .text h2{
		font-size: 20px;
	}
	.page2 .scene6 .text p{
		font-size: 14px;
	}
	@media screen and (max-width: 1400px){
		.page2 .scene6 .text{
			margin-top: 15%;
			width: 70%;
			-webkit-transform: scale3d(0.8,0.8,1);
			transform: scale3d(0.8,0.8,1);
		}
	}

/*7-钥匙男孩+钥匙妈妈*/
	.page2 .scene7{
		z-index: 10;
		left: 60%;
		bottom: 10%;
		width: 40%;
		height: 50%;
	}
	.page2 .scene7 .img7_1{
		width: 20%;
		left: 11%;
		top: -1.8%;
	}
	.page2 .scene7 .img7_2{
		width: 17%;
		left: 23.6%;
		bottom: 23%;
	}
	.page2.player7{
		-webkit-transform: scale3d(2,2,1) translate3d(-10%,-10%,0);
		transform: scale3d(2,2,1) translate3d(-10%,-10%,0);
	}
	.page2 .scene7 .text{
		width: 50%;
		margin-left: -50%;
		margin-top: 4%;
		-webkit-transform: scale3d(0.9,0.9,1);
		transform: scale3d(0.9,0.9,1);
	}
	.page2 .scene7 .text h2{
		font-size: 20px;
	}
	.page2 .scene7 .text p{
		font-size: 14px;
	}
	@media screen and (max-width: 1400px){
		.page2 .scene7 .text{
			margin-top: 0%;
			margin-left: -60%;
			width: 70%;
			-webkit-transform: scale3d(0.8,0.8,1);
			transform: scale3d(0.8,0.8,1);
		}
	}

/*8-羡慕爷爷+羡慕阿姨*/
	.page2 .scene8{
		z-index: 5;
		left: 60%;
		bottom: 10%;
		width: 40%;
		height: 50%;
	}
	.page2 .scene8 .img8_1{
		width: 8.6%;
		left: 26.8%;
		top: 18%;
	}
	.page2 .scene8 .img8_2{
		width: 11%;
		right: 37%;
		top: 18.8%;
	}
	.page2 .scene8 .img8_3{
		width: 56%;
		right: 21%;
		bottom: 4%;
	}
	.page2.player8{
		-webkit-transform: scale3d(2.2,2.2,1) translate3d(-16%,-6%,0);
		transform: scale3d(2.2,2.2,1) translate3d(-16%,-6%,0);
	}
	.page2 .scene8 .text{
		width: 50%;
		margin-left: -40%;
		margin-top: 0%;
		-webkit-transform: scale3d(0.8,0.8,1);
		transform: scale3d(0.8,0.8,1);
	}
	.page2 .scene8 .text h2{
		font-size: 18px;
	}
	.page2 .scene8 .text p{
		font-size: 14px;
	}
	@media screen and (max-width: 1400px){
		.page2.player8{
			-webkit-transform: scale3d(2.2,2.2,1) translate3d(-16%,-6%,0);
			transform: scale3d(2.2,2.2,1) translate3d(-16%,-6%,0);
		}
		.page2 .scene8 .text{
			margin-top: -5%;
			width: 70%;
			-webkit-transform: scale3d(0.7,0.7,1);
			transform: scale3d(0.7,0.7,1);
		}
	}

/*9-打招呼爷爷+记录叔叔*/
	.page2 .scene9{
		z-index: 5;
	    left: 10%;
	    bottom: 0;
	    width: 40%;
	    height: 50%;
	}
	.page2 .scene9 .img9_1{
		width: 39%;
		left: 13%;
		top: 50%;
	}
	.page2.player9{
		-webkit-transform: scale3d(2.2,2.2,1) translate3d(16%,-28%,0);
		transform: scale3d(2.2,2.2,1) translate3d(16%,-28%,0);
	}
	.page2.player9 .scene9 .img9_1{
		-webkit-transform: scale3d(1.1, 1.1, 1);
		-ms-transform: scale3d(1.1, 1.1, 1);
		-o-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
	.page2 .scene9 .text{
		width: 50%;
		margin-left: 54%;
		margin-top: 20%;
		-webkit-transform: scale3d(0.8,0.8,1);
		transform: scale3d(0.8,0.8,1);
	}
	.page2 .scene9 .text h2{
		font-size: 18px;
	}
	.page2 .scene9 .text p{
		font-size: 14px;
	}
	@media screen and (max-width: 1400px){
		.page2 .scene9 .text{
			margin-top: 15%;
			width: 70%;
			-webkit-transform: scale3d(0.7,0.7,1);
			transform: scale3d(0.7,0.7,1);
		}
	}

/*10-吹口哨爷爷+抱孩子爷爷*/
	.page2 .scene10{
		z-index: 5;
		left: 10%;
		bottom: 15%;
		width: 40%;
		height: 80%;
	}
	.page2 .scene10 .img10_1{
		width: 29%;
		left: 34.2%;
		top: 4.6%;
	}
	.page2 .scene10 .img10_2{
		width: 17%;
	    left: 29.6%;
	    top: 62%;
	}
	.page2.player10{
		-webkit-transform: scale3d(1.4,1.4,1) translate3d(8%,14%,0);
		transform: scale3d(1.4,1.4,1) translate3d(8%,14%,0);
	}
	.page2 .scene10 .text{
		width: 74%;
		margin-left: 70%;
		margin-top: 24%;
		-webkit-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1);
	}
	.page2 .scene10 .text h2{
		font-size: 24px;
	}
	.page2 .scene10 .text p{
		font-size: 20px;
	} 
	@media screen and (max-width: 1400px){
		.page2 .scene10 .text{
			margin-top: 10%;
			width: 70%;
			-webkit-transform: scale3d(0.9,0.9,1);
			transform: scale3d(0.9,0.9,1);
		}
	}

/*ipad的文字响应*/
	@media screen and (max-width: 1200px){
		.page2 .text h2{
			font-size: 16px !important;
		}
		.page2 .text p{
			font-size: 14px !important;
			line-height: 1.5em;
		}
	}

/*第四屏-文字单独展示*/
	.wap_word{
		position: absolute;
		width: 30%;
		right: 20%;
		max-height: 80%;
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		top: 50%;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 12;
		/*pointer-events: none;*/
		opacity: 0;
	}
	.page2.player6+div+div+.wap_word,
	.page2.player7+div+div+.wap_word,
	.page2.player8+div+div+.wap_word{
		right: auto;
		left: 20%;
	}
	.wap_word.on{
		-webkit-transition-duration: 1s;
		-o-transition-duration: 1s;
		transition-duration: 1s;
		-webkit-transition-delay: 2s;
		-o-transition-delay: 2s;
		transition-delay: 2s;
		opacity: 1;
	}
	.wap_word .text{
		display: none;
		width: 100%;
		background: url(../images/word_bg.png) center no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		padding: 8% 8% 6% 8%;
		font-size: 20px;
	}
	.wap_word .text.on{
		display: block;
	}
	.wap_word .text h2{
		font-size: 1.6em;
		font-weight: normal;
		line-height: 200%;
	}
	.wap_word .text p{
		font-size: 1.2em;
		line-height: 200%;
	}
	@media screen and (max-width: 1600px){
		.wap_word .text{
			font-size: 18px;
		}
	}
	@media screen and (max-width: 1400px){
		.wap_word .text{
			font-size: 16px;
		}
	}
	@media screen and (max-width: 1200px){
		.wap_word .text{
			font-size: 14px;
		}
	}
	@media screen and (max-width: 1024px){
		.wap_word .text{
			font-size: 12px;
		}
	}
	@media screen and (max-width: 820px){
		.wap_word{
			width: 40%;
			right: 15%;
		}
		.page2.player6+div+div+.wap_word,
		.page2.player7+div+div+.wap_word,
		.page2.player8+div+div+.wap_word{
			right: auto;
			left: 15%;
		}
		.wap_word .text h2{
			font-size: 14px;
			line-height: 200%;
		}
		.wap_word .text p{
			font-size: 12px;
			line-height: 150%;
		}
	}

/*wap样式调整*/
	@media screen and (max-width: 820px){
		.page2.width110 .bgimg img{
			width: auto;
			height: 114%;
			margin: 0 auto;
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			max-height: 114%;
		}
		.page2.width110 .inbox{
			width: auto;
			height: 114%;
			max-height: 114%;
			margin: 0 auto;
			position: absolute;
			z-index: 4;
			opacity: 1;
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
		.page1 .word i{
			display: block;
		}
		.page1 .word{
			margin-top: 1em;
		}
		.page1 .word span,
		.page1 .word span.none{
			font-size: 1.4em;
		}
		.page3 a{
			width: 3em;
		}
		.page3 a.back{
			margin-left: 0.5em;
		}
		/*1*/
		.page2.player1{
			-webkit-transform: scale3d(3.2,3.2,1) translate3d(22%,-20%,0);
   			transform: scale3d(3.2,3.2,1) translate3d(22%,-20%,0);
		}
		/*8*/
		.page2.player8{
			-webkit-transform: scale3d(2.2,2.2,1) translate3d(-14%,-6%,0);
			transform: scale3d(2.2,2.2,1) translate3d(-14%,-6%,0);
		}
		/*9*/
		.page2.player9{
			-webkit-transform: scale3d(2.2,2.2,1) translate3d(12%,-28%,0);
			transform: scale3d(2.2,2.2,1) translate3d(12%,-28%,0);
		}
	}
	@media screen and (min-width: 660px) and (max-width: 740px){
		.wap_word{
			width: 40%;
			right: 10%;
		}
		.page2.player6+div+div+.wap_word,
		.page2.player7+div+div+.wap_word,
		.page2.player8+div+div+.wap_word{
			right: auto;
			left: 10%;
		}
		.page2.width110 .bgimg img{
			height: 100%;
		}
		/*1*/
		.page2.player1{
			-webkit-transform: scale3d(3.2,3.2,1) translate3d(23%,-18%,0);
   			transform: scale3d(3.2,3.2,1) translate3d(23%,-18%,0);
		}
		/*9*/
		.page2.player9{
			-webkit-transform: scale3d(2.2,2.2,1) translate3d(13%,-28%,0);
			transform: scale3d(2.2,2.2,1) translate3d(13%,-28%,0);
		}
	}

/*狗狗的爱心*/
	@font-face {
	    font-family: 'iconfont';
	    src: url('../font/font_u8lcaa5uh625u3di.eot');
	    src: url('../font/font_u8lcaa5uh625u3di.eot?#iefix') format('embedded-opentype'),
	    url('../font/font_u8lcaa5uh625u3di.woff') format('woff'),
	    url('../font/font_u8lcaa5uh625u3di.ttf') format('truetype'),
	    url('../font/font_u8lcaa5uh625u3di.svg#iconfont') format('svg');
	}
	.pao{
		font-size: 20px;
	}
	.pao .paopao{
	    font-family:"iconfont" !important;
	    font-style:normal;
	    -webkit-font-smoothing: antialiased;
	    -webkit-text-stroke-width: 0.2px;
	    -moz-osx-font-smoothing: grayscale;
	    font-size:0.8em;
	    position: absolute;
	    top:-1.5em;
	    right: 0;
		opacity: 0;
	}
	.pao.on .paopao{
	    opacity: 1;
	} 
	@media screen and (max-width: 820px){
		.pao{
			font-size: 12px;
		}
	}