body, h2， h3, h4, h5, h6 { margin: 0; padding:0}
body { font-family:"Microsoft YaHei","微软雅黑","Helvetica Neue", Helvetica, STHeiTi, sans-serif; color:#fff; background:#1f2e3d; }
html, body { height: 100%; min-width: 1024px; overflow: hidden; }
ul, ol { list-style:none; margin: 0; padding: 0; }
.container { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.content { height: 200%; position: absolute; left: 0; right: 0; }
.scene { height: 50%; position: relative; overflow: hidden; }

a { text-decoration:none}

.scene-in { max-width:1224px; min-width: 1024px; height: 100%; position: relative; margin: 0 auto; }

.scene-down { width:53px; height:30px; position:absolute; bottom: 3%; left:50%; margin-left:-26px; text-indent:-999px; background:url(imagesicon-down.png) no-repeat; overflow:hidden;  }
.scene-down:hover { opacity:0.88; }

.scene-down {
	-webkit-transition: all .35s;
	transition: all .35s;
}

.scene-images {
	width: 50%; height: 420px; position: absolute; top: 50%; margin-top: -210px;
}
.scene-images img, .animate {
	position: absolute;
}
.scene-images .animate img { position: static; }
.scene-texts {
	height: 100%;  text-align: center;
}
.scene-vertical {
	display: inline-block; *display: inline; *zoom: 1; max-width: 96%; vertical-align: middle; text-align: left; margin:0 auto
}
.scene-vertical + i {
	display: inline-block; width: 0; height: 100%; vertical-align: middle;
}
.scene-title { 
	font-weight:700; font-size:80px;
	-webkit-animation: scene-fadeup 800ms both;
	animation: scene-fadeup 800ms both;	line-height: 1.3; margin:0px
}
.scene-title-1 { 
	font-weight:400; font-size:60px;
	-webkit-animation: scene-fadeup1 800ms both;
	animation: scene-fadeup1 800ms both;	line-height: 1.3;margin:0px
}
.scene-title-2 { 
	font-weight:400; font-size:30px;
	-webkit-animation: scene-fadeup2 800ms  both;
	animation: scene-fadeup2 800ms  both;	line-height: 1.3;margin:0px
}
.scene-title-3 { 
	font-weight:400; font-size:24px;
	-webkit-animation: scene-fadeup3 800ms  both;
	animation: scene-fadeup3 800ms  both;	line-height: 1.3;margin:0px
}
.scene-desc { 
	max-width:500px;
	-webkit-animation: scene-fadeup4 800ms  both;
	animation: scene-fadeup4 800ms  both;
}
p.scene-desc { font-size: 18px; line-height: 1.5; }
.scene-list { 
	font-size: 18px;
	-webkit-animation: scene-fadeup5 800ms 400ms both;
	animation: scene-fadeup5 800ms 400ms both;
}
.scene-list li { margin-top: 15px; }
.scene-in strong { font-weight:700; color:#ffe678; }

img,
.animate,
.scene-title,
.scene-desc,
.scene-list,
.scene-person {
	-webkit-animation-play-state: paused!important;
	animation-play-state: paused!important;
}
.active img, 
.active .scene-title, 
.active .scene-desc, 
.active .scene-list,
.active .scene-person,
.active .animate {
	-webkit-animation-play-state: running!important;
	animation-play-state: running!important;
}

@-webkit-keyframes scene-fadeup {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
}
@keyframes scene-fadeup {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
}

@-webkit-keyframes scene-fadeup1 {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
}
@keyframes scene-fadeup1 {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
}
@-webkit-keyframes scene-fadeup2 {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
}
@keyframes scene-fadeup2 {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
}
@-webkit-keyframes scene-fadeup3 {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
}
@keyframes scene-fadeup3 {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
}
@-webkit-keyframes scene-fadeup4 {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
}
@keyframes scene-fadeup4 {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
}
/* scene-1 */
#scene1 { }
#scene1 .scene-images {
}
#scene1 .scene-texts {
	width: 60%;  position:absolute;  text-align: center; right:50px;
}

.scene1-bg { 
	left: 0; top: 229px;
}
.scene1-cloud1 { 
	left: 399px; top: 0;
	-webkit-animation: scene2-cloud 30s both infinite;
	animation: scene2-cloud 30s both infinite;
}
.scene1-cloud2 { 
	left: 206px; top: 203px;
	-webkit-animation: scene2-cloud 32s 2s both infinite;
	animation: scene2-cloud 32s 2s both infinite;
}
.scene1-dn { 
	left: 196px; bottom: 0px; width: 224px; height: 124px; z-index:10;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-animation: scene1-kl 1.8s both;
	animation: scene1-kl 1.8s both;
}
.scene1-su {left:188px; bottom:45px; z-index:1;
-webkit-animation: scene1-ss 3s both;
	animation: scene1-ss 3s both;}
.scene1-t1 { left:260px; top:0px; z-index:10; -webkit-animation: scene1-t1 3.5s both;
	animation: scene1-t1  3.5s both;}
.scene1-t2 { left:146px; top:75px; z-index:10; -webkit-animation: scene1-t2 3.5s both;
	animation: scene1-t2  3.5s both;}
.scene1-t3 { left:300px; top:90px; z-index:10; -webkit-animation: scene1-t3 3.5s both;
	animation: scene1-t3  3.5s both;}
.scene1-t4 { left:400px; top:40px; z-index:10; -webkit-animation: scene1-t4 3.5s both;
	animation: scene1-t4  3.5s both;}
.scene1-t5 { left:210px; top:140px; z-index:10;-webkit-animation: scene1-t1 3.5s both;
	animation: scene1-t1  3.5s both;}
.scene1-t6 { left:400px; top:185px; z-index:10;-webkit-animation: scene1-t2 3.5s both;
	animation: scene1-t2  3.5s both;}
.scene1-t7 { left:180px; top:210px; z-index:10; -webkit-animation: scene1-t3 3.5s both;
	animation: scene1-t3  3.5s both;}
.scene1-t8 { left:280px; top:230px; z-index:10; -webkit-animation: scene1-t1 3.5s both;
	animation: scene1-t1  3.5s both;}
.scene1-t9 { left:320px; top:160px; z-index:10; -webkit-animation: scene1-t4 3.5s both;
	animation: scene1-t4  3.5s both;}


@-webkit-keyframes scene1-kl {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-300px) rotate(-30deg);
	}
	80% {
		opacity: 1;
		-webkit-transform: translateX(1%) rotate(5deg);
	}
	90% {
		opacity: 1;
		-webkit-transform: rotate(3deg);
	}
}
@keyframes scene1-kl {
	0% {
		opacity: 0;
		transform: translateX(-300px) rotate(-30deg);
	}
	80% {
		opacity: 1;
		transform: translateX(1%) rotate(5deg);
	}
	90% {
		opacity: 1;
		transform: rotate(3deg);
	}
}
@-webkit-keyframes scene1-ss {
	0% {
		opacity: 0;
		-webkit-transform: translateY(30px);
	}
	70% {
		opacity: 0;
		-webkit-transform: translateY(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0px);
	}
}
@keyframes scene1-ss {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	70% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
@-webkit-keyframes scene1-t1 {
	0% {
		opacity: 0;
		-webkit-transform:scale(1.5,1.5);
	}
	80% {
		opacity: 0;
		-webkit-transform:scale(1.5,1.5);
	}
	100% {
		opacity: 1;
		-webkit-transform:scale(1,1);
	}
}
@keyframes scene1-t1 {
	0% {
		opacity: 0;
		transform:scale(1.5,1.5);
	}
	80% {
		opacity: 0;
		transform:scale(1.5,1.5);
	}
	100% {
		opacity: 1;
		transform:scale(1,1);
	}
}
@-webkit-keyframes scene1-t2 {
	0% {
		opacity: 0;
		-webkit-transform:scale(1.5,1.5);
	}
	90% {
		opacity: 0;
		-webkit-transform:scale(1.5,1.5);
	}
	100% {
		opacity: 1;
		-webkit-transform:scale(1,1);
	}
}
@keyframes scene1-t2 {
	0% {
		opacity: 0;
		transform:scale(1.5,1.5);
	}
	90% {
		opacity: 0;
		transform:scale(1.5,1.5);
	}
	100% {
		opacity: 1;
		transform:scale(1,1);
	}
}
@-webkit-keyframes scene1-t3 {
	0% {
		opacity: 0;
		-webkit-transform:scale(1.5,1.5);
	}
	85% {
		opacity: 0;
		-webkit-transform:scale(1.5,1.5);
	}
	100% {
		opacity: 1;
		-webkit-transform:scale(1,1);
	}
}
@keyframes scene1-t3 {
	0% {
		opacity: 0;
		transform:scale(1.5,1.5);
	}
	85% {
		opacity: 0;
		transform:scale(1.5,1.5);
	}
	100% {
		opacity: 1;
		transform:scale(1,1);
	}
}
@-webkit-keyframes scene1-t4 {
	0% {
		opacity: 0;
		-webkit-transform:scale(1.5,1.5);
	}
	82% {
		opacity: 0;
		-webkit-transform:scale(1.5,1.5);
	}
	100% {
		opacity: 1;
		-webkit-transform:scale(1,1);
	}
}
@keyframes scene1-t4 {
	0% {
		opacity: 0;
		transform:scale(1.5,1.5);
	}
	82% {
		opacity: 0;
		transform:scale(1.5,1.5);
	}
	100% {
		opacity: 1;
		transform:scale(1,1);
	}
}


@-webkit-keyframes scene2-cloud {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-400px);
	}
	50% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateX(400px);
	}
}
@keyframes scene2-cloud {
	0% {
		opacity: 0;
		transform: translateX(-400px);
	}
	50% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
		transform: translateX(400px);
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes slideDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}
}
@keyframes slideDown {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}
}
@-webkit-keyframes slideup {
	0% {
		opacity: 0;
		-webkit-transform: translateY(100%);
	}
}
@keyframes slideup {
	0% {
		opacity: 0;
		transform: translateY(100%);
	}
}
@-webkit-keyframes jianjin50 {
	0% {opacity: 0; -webkit-transform: translateY(-50%);}
	50% {opacity: 0; -webkit-transform: translateY(-50%);}
	100% {opacity: 1; -webkit-transform: translateY(0);}
}
@keyframes jianjin50
 {
	0% {opacity: 0; transform: translateY(-50%);}
	50% {opacity: 0; transform: translateY(-50%);}
	100% {opacity: 1; transform: translateY(0);}
}

@-webkit-keyframes jianjin {
	0% {opacity: 0; transform: translateY(0);}
	50% {opacity: 0; transform: translateY(0);}
	100% {opacity: 1; transform: translateY(0);}
}
@keyframes jianjin
 {
	0% {opacity: 0; transform: translateY(0);}
	50% {opacity: 0;transform: translateY(0);}
	100% {opacity: 1; transform: translateY(0);}
}

.scene-person { margin-top: 3vh; padding:0 20px 40px 20px; -webkit-animation: slideDown 3s both; animation: slideDown 3s both; }
.scene-person li { display:inline-block; *display: inline; *zoom: 1; width:150px;position:relative; margin:0 20px; }
.scene-person img { width:150px; height: 150px;  vertical-align: bottom; }
.scene-person span { display:block; width:100%; position:absolute; top:160px;  color:#fff; line-height:26px; font-size: 18px; overflow: hidden; text-align:center}




@-webkit-keyframes tinyRotate {
	0% {
		-webkit-transform: rotate(-5deg);
	}
	100% {
		-webkit-transform: rotate(5deg);
	}
}
@keyframes tinyRotate {
	0% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(5deg);
	}
}


/* scene-2 */
#scene2 { background:#1ec868; text-align: center; }
#scene2 .scene-person img { border-color: #31d19e; }
#scene2 .scene-title { text-align:center; -webkit-animation: slideDown 3s both; animation: slideDown 3s both; }
#scene2 .scene-title-1 { text-align:center;-webkit-animation: slideDown 3s both; animation: slideDown 3s both; } 
#scene2 .scene-title-2 { text-align:center; margin-top:30px; font-weight:700}
#scene2 .scene-title-3 { text-align:center; margin-top:20px}
#scene2 p {text-align:center; margin:5px auto}
.scene2-m {width:140px; height:44px; margin:10px auto}
.scene2-m a { display:block; width:140px; text-align:center; background:#fff45c; height:44px; line-height:44px; color:#a0a12c; font-size:26px; }
.scene2-m a:hover { display:block;  background:#ffb369; color:#fff;  }
#scene2 .scene-desc {  margin-left: auto; margin-right: auto; }
.scene2_t1 { width:150px; height:150px; position:absolute; bottom:50px; left:200px}
.scene2_t2 { width:150px; height:150px; position:absolute; bottom:50px;left:500px}
.scene2_t3 { width:150px; height:150px; position:absolute; bottom:50px;left:800px}
@-webkit-keyframes tinyY {
	0% {
		-webkit-transform: translateY(-5px);
	}
	100% {
		-webkit-transform: translateY(5px);
	}
}
@keyframes tinyY {
	0% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(5px);
	}
}
@-webkit-keyframes tinyX {
	0% {
		-webkit-transform: translateX(-5px);
	}
	100% {
		-webkit-transform: translateX(5px);
	}
}
@keyframes tinyX {
	0% {
		transform: translateX(-5px);
	}
	100% {
		transform: translateX(5px);
	}
}
@-webkit-keyframes tinyYScale {
	0% {
		opacity: .9;
		-webkit-transform: translateY(-5px) scale(.9,.8);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(5px) scale(1);
	}
}
@keyframes tinyYScale {
	0% {
		opacity: .9;
		transform: translateY(-5px) scale(.9,.8);
	}
	100% {
		opacity: 1;
		transform: translateY(5px) scale(1);
	}
}



/* scene-3 */
#scene3  scene-vertical { margin:0 30px; position:relative}
#scene3 { background:#1f2e3d; text-align: center; }
#scene3 .scene-person img { border-color: #31d19e; }
#scene3 .scene1-cloud2 {top: 100px; position:absolute}
#scene3 .scene-title { text-align:center; -webkit-animation: slideDown 3s both; animation: slideDown 3s both; padding:0 0 0 20px}
#scene3 .scene-title-1 { text-align:center;-webkit-animation: slideDown 3s both; animation: slideDown 3s both; padding:0 0 0 20px} 
#scene3 .scene-title-2 { text-align:center; margin-top:30px; font-weight:700}
#scene3 .scene-title-3 { text-align:center; margin-top:20px}
#scene3 p {text-align:center; margin:5px auto; padding:0 0 0 20px}
.scene3-m {width:140px; height:44px; margin:10px auto}
.scene3-m a { display:block; width:140px; text-align:center; background:#0188cc; height:44px; line-height:44px; color:#fff; font-size:26px; }
.scene3-m a:hover { display:block;  background:#2ac7e3;   }
#scene3 .scene-space { height:300px; position:relative}
.t3_1 {top:100px; position:absolute; margin-left:-240px; z-index:1;  -webkit-animation: slideup 2s both; animation: slideup 2s both; padding:0 0 0 20px}
.t3_2 { top:180px; position:absolute; margin-left:-200px;-webkit-animation: jianjin50 3s both; animation: jianjin50 4s both; z-index:5}
.t3_3 { top:200px; position:absolute; margin-left:200px;-webkit-animation: jianjin50 3s both; animation: jianjin50 4s both; z-index:5}
.t3_4 { top:200px; position:absolute; margin-left:500px;-webkit-animation: jianjin50 3s both; animation: jianjin50 4s both; z-index:5}
.t3_5 { top:200px; position:absolute; margin-left:-80px;-webkit-animation: jianjin50 3s both; animation: jianjin50 4s both; z-index:5}
.t3_6 { top:230px; position:absolute; margin-left:10px; -webkit-animation: jianjin 3s both; animation: jianjin 4s both; z-index:5}


/* scene-4 */
#scene4 .scene-images {width: 40%;  height: 420px; position: absolute; top: 50%;  }
.t4_1 {  position:absolute; right:10px; z-index:5; 
	-webkit-animation: t4_1 1.8s both;
	animation: t4_1 1.8s both;}
.t4_2 {  position:absolute; right:50px; top:-120px; z-index:1; }
.t4_3 {  position:absolute; right:-600px; top:50px; z-index:1; }
.t4_4 {  position:absolute; right:-500px; top:360px; z-index:1; }
.t4_5 {  position:absolute; right:400px; top:400px; z-index:1; }
@-webkit-keyframes t4_1 {
	0% {
		opacity: 0;
		-webkit-transform: translateY(300px) rotate(-30deg);
	}
	80% {
		opacity: 1;
		-webkit-transform: translateY(-1%) rotate(5deg);
	}
	90% {
		opacity: 1;
		-webkit-transform: rotate(3deg);
	}
}
@keyframes t4_1 {
	0% {
		opacity: 0;
		transform: translateY(300px) rotate(-30deg);
	}
	80% {
		opacity: 1;
		transform: translateY(-1%) rotate(5deg);
	}
	90% {
		opacity: 1;
		transform: rotate(3deg);
	}
}
#scene4 .scene-texts {width: 60%; top:50%; margin-top: -210px; position:absolute;  text-align: center; right:50px;}
#scene4 p {}
.scene4-m {width:140px; height:44px; margin-top:10px}
.scene4-m a { display:block; width:140px; text-align:center; background:#919cd5; height:44px; line-height:44px; color:#363d6a; font-size:26px; }
.scene4-m a:hover { display:block;  background:#9191d5; color:#fff   }



/* scene-5 */
#scene5 .scene-images {width: 50%; position:absolute;   height: 420px; top: 50%;  }
.t5_1 {top:0px; position:absolute; right:-500px;-webkit-animation: jianjin50 1s both; animation: jianjin50 1s both; z-index:2}
.t5_2 {top:70px; position:absolute; right:100px;-webkit-animation: jianjin 2.5s both; animation: jianjin 2.5s both; z-index:5}
.t5_3 {top:60px; position:absolute; right:110px;-webkit-animation: jianjin 3s both; animation: jianjin 3s both; z-index:5}
.t5_4 {top:140px; position:absolute; right:420px;-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	-webkit-animation: shake 4s 2s both infinite;
	animation: shake 4s 2s both infinite; z-index:5}
@-webkit-keyframes shake {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  1.25%, 2.5% {
    -webkit-transform: scale3d(.98, .98, .98) rotate3d(0, 0, 1, -1deg);
            transform: scale3d(.98, .98, .98) rotate3d(0, 0, 1, -1deg);
  }

  3.75%, 6.25%, 8.75%, 11.25% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01) rotate3d(0, 0, 1, 1deg);
            transform: scale3d(1.01, 1.01, 1.01) rotate3d(0, 0, 1, 1deg);
  }

  5%, 7.5%, 10% {
    -webkit-transform: scale3d(1.01, 1.01, 1.01) rotate3d(0, 0, 1, -1deg);
            transform: scale3d(1.01, 1.01, 1.01) rotate3d(0, 0, 1, -1deg);
  }

  12.5% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes shake {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  1.25%, 2.5% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  3.75%, 6.25%, 8.75%, 11.25% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, 3deg);
  }

  5%, 7.5%, 10% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, -3deg);
  }

  12.5% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.t5_5 {top:160px; position:absolute; right:110px;-webkit-animation: jianjin50 2s both; animation: jianjin50 2s both; z-index:5}
.t5_6 {top:160px; position:absolute;  right:180px;-webkit-animation: jianjin50 2s both; animation: jianjin50 2s both; z-index:5}
.t5_7 {top:160px; position:absolute;  right:260px;-webkit-animation: jianjin50 2s both; animation: jianjin50 2s both; z-index:5}
.t5_8 {top:160px; position:absolute;  right:340px;-webkit-animation: jianjin50 2s both; animation: jianjin50 2s both; z-index:5}
.t5_9 {top:-150px; position:absolute; right:0px;-webkit-animation: tinyYScale 2.5s both; animation: tinyYScale 2.5s both; z-index:5}
.t5_10 {top:100px; position:absolute; right:500px;-webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5}
.t5_11 {top:300px; position:absolute; right:80px;-webkit-animation: tinyYScale 3.5s both; animation: tinyYScale 3.5s both; z-index:5}
.t5_12 {top:40px; position:absolute; right:-500px;-webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5}

#scene5 p { margin:5px 0 15px 0}
#scene5 .scene-texts {width: 50%; top:50%; margin-top: -210px; position:absolute;  text-align: center; right:50px;}
#scene5 a { color:#F60}
#scene5 a:hover { color:#F30}
#scene5 .scene-title-1 { font-size:30px}
@-webkit-keyframes tinyYScale {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-5px) scale(2,2);
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(-5px) scale(2,2);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(5px) scale(1);
	}
}
@keyframes tinyYScale {
	0% {
		opacity: 0;
		transform: translateY(-5px) scale(2,2);
	}
	50% {
		opacity: 0;
		transform: translateY(-5px) scale(2,2);
	}
	100% {
		opacity: 1;
		transform: translateY(5px) scale(1);
	}
}


/* scene-6 */
#scene6 .scene-images {width: 50%;  height: 420px; position: absolute; top: 50%;  }
.t6_1 {  position:absolute; right:50px; top:110px; z-index:5; 
	-webkit-animation: t4_1 1.5s both;
	animation: t4_1 1.5s both;}
.t6_2 { position:absolute; right:360px; top:65px; z-index:10;-webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5 }
.t6_3 { position:absolute; right:210px; top:0px; z-index:10;-webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5 }
.t6_4 { position:absolute; right:80px; top:45px; z-index:10; -webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5}
.t6_5 { position:absolute; right:320px; top:266px; z-index:10; -webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5}
.t6_6 { position:absolute; right:90px; top:278px; z-index:10; -webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5}
.t6_7 { position:absolute; right:385px; top:195px; z-index:10; -webkit-animation: xd60  3s both; animation: xd60  4s both;}
.t6_8 { position:absolute; right:310px; top:75px; z-index:10;  -webkit-animation: xd60  3s both; animation: xd60  4s both;}
.t6_9 { position:absolute; right:60px; top:240px; z-index:10;  -webkit-animation: xd60  3s both; animation: xd60  4s both;}
.t6_10 { position:absolute; right:230px; top:340px; z-index:10;  -webkit-animation: xd60  3s both; animation: xd60  4s both;}
@-webkit-keyframes xd60 {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-5px) scale(.2,.2);
	}
	60% {
		opacity: 0;
		-webkit-transform: translateY(-5px) scale(.2,.2);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(5px) scale(1);
	}
}
@keyframes xd60 {
	0% {
		opacity: 0;
		transform: translateY(-5px) scale(.2,.2);
	}
	60% {
		opacity: 0;
		transform: translateY(-5px) scale(.2,.2);
	}
	100% {
		opacity: 1;
		transform: translateY(5px) scale(1);
	}
}
#scene6 .scene-texts {width: 50%; top:50%; margin-top: -210px; position:absolute;  text-align: center; right:50px;}
#scene6 .scene-title-1 { font-size:52px}
#scene6 p {}
.scene6-m {width:140px; height:44px; margin-top:10px}
.scene6-m a { display:block; width:140px; text-align:center; background:#de3c31; height:44px; line-height:44px; color:#fff; font-size:26px; }
.scene6-m a:hover { display:block;  background: #900; color:#fff   }


/* scene-7 */
#scene7 .scene-images {width: 48%;  height: 420px; position: absolute; top: 50%;  }
.t7_1 {position:absolute; right:80px; top:-20px; z-index:5; 
	-webkit-animation: t4_1 1.5s both;
	animation: t4_1 1.5s both;}
.t7_2 {position:absolute; right:420px; top:80px; z-index:10;  -webkit-animation: tinyYScale 2s both; animation: tinyYScale 2s both; z-index:5}
.t7_3 {position:absolute; right:410px; top:220px; z-index:10; -webkit-animation: tinyYScale 2.5s both; animation: tinyYScale 2.5s both; z-index:5}
.t7_4 {position:absolute; right:360px; top:360px; z-index:10;  -webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5}
.t7_5 {position:absolute; right:40px; top:260px; z-index:10;  -webkit-animation: tinyYScale 3.5s both; animation: tinyYScale 3.5s both; z-index:5}
.t7_6 {position:absolute; right:20px; top:90px; z-index:10;  -webkit-animation: tinyYScale 4s both; animation: tinyYScale 4s both; z-index:5}
#scene7 p { margin:5px 0 15px 0}
#scene7 .scene-texts {width: 50%; top:50%; margin-top: -210px; position:absolute;  text-align: center; right:50px;}
#scene7 a { color:#F60}
#scene7 a:hover { color:#F30}
#scene7 .scene-title-1 { font-size:30px}


/* scene-8 */
#scene8 .scene-images {width: 40%;  height: 420px; position: absolute; top: 50%;}
.t8_1 {position:absolute; right:80px; top:100px; z-index:5; 
-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-animation: scene1-kl 1.8s both;
	animation: scene1-kl 1.8s both;}
.t8_2  {position:absolute; right:110px; top:300px; z-index:10;webkit-animation: slideup 3s both; animation: slideup 3s both;}
.t8_3  {position:absolute; right:280px; top:-60px; left: 0; z-index:10; -webkit-animation: slideDown 3s both; animation: slideDown 3s both;}
.t8_4  {position:absolute; right:-780px; top:480px; z-index:1; }
.t8_5  {position:absolute; right:100px; top:-100px; z-index:1; }
.t8_6  {position:absolute; right:500px; top:500px; z-index:1; }
.t8_7  {position:absolute; right:0px; top:150px; z-index:1; }
#scene8 .scene-texts {width: 60%; top:50%; margin-top: -210px; position:absolute;  text-align: center; right:50px;}
#scene8 .scene-title-1 { font-size:52px}
#scene8 p {}
.scene8-m {width:140px; height:44px; margin-top:10px}
.scene8-m a { display:block; width:140px; text-align:center; background:#fff45c; height:44px; line-height:44px; color:#fa6c38; font-size:26px; }
.scene8-m a:hover { display:block;  background: #ffc75c; color:#fa6c38   }


/* scene-9 */
#scene9 .scene-images {width: 40%;  height: 400px; position: absolute; top: 50%;  }
.t9_1 {  position:absolute; right:180px; top:110px; z-index:5; 
	-webkit-animation: t4_1 1.5s both;
	animation: t4_1 1.5s both;}
.t9_2 { position:absolute; right:360px; top:65px; z-index:10;-webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5 }
.t9_3 { position:absolute; right:210px; top:-20px; z-index:10;-webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5 }
.t9_4 { position:absolute; right:100px; top:60px; z-index:10; -webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5}
.t9_5 { position:absolute; right:300px; top:286px; z-index:10; -webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5}
.t9_6 { position:absolute; right:120px; top:266px; z-index:10; -webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5}
.t9_7 { position:absolute; right:385px; top:195px;  -webkit-animation: tinyYScale 3s both; animation: tinyYScale 3s both; z-index:5}
.t9_8 { position:absolute; right:310px; top:75px; z-index:10;  -webkit-animation: xd60  3s both; animation: xd60  4s both;}
.t9_9 { position:absolute; right:110px; top:200px; z-index:10;  -webkit-animation: xd60  3s both; animation: xd60  4s both;}
.t9_10 { position:absolute; right:240px; top:310px; z-index:10;  -webkit-animation: xd60  3s both; animation: xd60  4s both;}
#scene9 .scene-texts {width: 60%; top:50%; margin-top: -210px; position:absolute;  text-align: center; right:50px;}
#scene9 .scene-title-1 { font-size:52px}
#scene9 .scene-title-2 { font-size:22px; margin:10px 0; background:url(imagesf8bc1257d10f1696c6f003.png) 0 5px no-repeat; padding-left:30px;}
#scene9 .scene-title-2 a { color:#fff}
#scene9 .scene-title-2 a:hover {  color:#0e6f5c}
#scene9 .scene-title-3 { font-size:24px; font-weight:600; margin:20px 0 0 0; }
.scene9-m {width:140px; height:44px; margin-top:20px}
.scene9-m a { display:block; width:200px; text-align:center; background:#179e83; height:44px; line-height:44px; color:#fff; font-size:26px; }
.scene9-m a:hover { display:block;  background: #137662; color:#fff   }



/* scene index */
.scene-ctrl { position:fixed; top:50%; right:20px; margin-top:-140px; }
.scene-ctrl a { display:block; width:20px; height:20px; margin:10px 0; background:url(bg-scene-ctrl.png) no-repeat center; font: 0/0 a; color: transparent; }
.scene-ctrl .cur { background-image:url(bg-scene-ctrl-cur.png); }

@media screen and (max-width: 1024px) {
	.scene-ctrl {
		visibility: hidden;
	}
}

/* for mobile */
@media screen and (max-width: 640px) {
	html, body, .scene-in { min-width: 320px; }
	.hidden { display: none; }
	
	.scene-images { 
		width: 612px; position: absolute; bottom: 50%; left: 50%; top: auto;
		-webkit-transform-origin: bottom center;
		transform-origin: bottom center;
		-webkit-transform: translateX(-50%) scale(0.7);
		transform: translateX(-50%) scale(0.7); 
	}
	.sce
	.scene-vertical { 
		width: 612px; position: absolute; bottom: 50%; left: 50%; top: auto;
		-webkit-transform-origin: bottom center;
		transform-origin: bottom center;
		-webkit-transform: translateX(-50%) scale(0.7);
		transform: translateX(-50%) scale(0.7); 
	}ne-down {
		-webkit-transform: scale(0.7, -0.7);
		transform: scale(0.7, -0.7);
		-webkit-animation: topFade 1.5s infinite;
		animation: topFade 1.5s infinite;
		bottom: 2%;
	}
	.scene-texts {
		 height: auto; 
		position: absolute; bottom: 0; left: 0; right: 0; top: 50%; 
		padding: 20px 100px 40px 10px;
	}
	#scene1 .scene-texts {
		padding-top: 20px; width:95%;
	}
	.scene-texts .scene-vertical + i {
		display: block;
	}
	.scene-texts .scene-title ,#scene2 .scene-title , #scene3 .scene-title {
		font-size: 40px; text-align:center
	}
	.scene-texts .scene-title-1 ,#scene2 .scene-title-1 ,#scene3 .scene-title-1 {
		font-size: 36px;text-align:center
	}
	.scene-texts .scene-title-2 ,#scene2 .scene-title-2  ,#scene3 .scene-title-2 {
		font-size: 24px;text-align:center
	}
	.scene-texts .scene-title-3 ,#scene2 .scene-title-3  ,#scene3 .scene-title-3 {
		font-size: 20px;text-align:center
	}
	#scene2 .scene-title ,#scene2 .scene-title-1 ,#scene2 .scene-title-3 {-webkit-animation: scene2-top 3s both; animation: scene2-top 3s both; }

	@-webkit-keyframes scene2-top {
	0% {
		opacity: 0;
		-webkit-transform: translateY(100%);
	}
}
    @keyframes scene2-top {
	0% {
		opacity: 0;
		transform: translateY(100%);
	}
}
	.scene-texts .scene-desc {
		font-size: 16px; line-height: 1.5; margin:10px 0;text-align:center
	}
    #scene2 .scene-title-3 { font-weight:700}
	#scene2 .scene2-m {width:100px; height:30px; }
    #scene2 .scene2-m a { width:100px; height:30px; line-height:30px; color:#a0a12c; font-size:20px; }
	.scene-list li {
		margin-top: 10px; font-size: 16px;
	}
	
	p.scene-desc { font-size: 16px; }
	.scene-person li {
		width: 70px; margin: 0 10px; 
	}
	.scene-person li img { width: 70px; height:70px;  }
	.scene-person span { font-size: 14px; line-height: 1.3; top:75px; }
	.scene-space {
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
	}
	#scene8 .scene-space {
		height: 192px;
	}
	.scene8-1 { width: 260px; margin-top: 2px;}
}
@media screen and (max-width: 375px) {
	.scene-images {
		-webkit-transform: translateX(-50%) scale(0.5);
		transform: translateX(-50%) scale(0.5); 
	}
	.scene-down {
		-webkit-transform: scale(0.5, -0.5);
		transform: scale(0.5, -0.5);
	}
    .scene-texts .scene-title ,#scene2 .scene-title {
		font-size: 36px;line-height: 1.3; text-align:center
	}
	.scene-texts .scene-title-1 ,#scene2 .scene-title-1 ,#scene3 .scene-title-1 {
		font-size: 30px;line-height: 1.3;text-align:center
	}
	.scene-texts .scene-title-2 ,#scene2 .scene-title-2 {
		font-size: 18px;line-height: 1.3;text-align:center
	}
	.scene-texts .scene-title-3 ,#scene2 .scene-title-3 {
		font-size: 18px;line-height: 1.3;text-align:center
	}
	#scene1 .scene-desc {
		font-size: 14px; line-height: 1.5; margin:10px 0;text-align:center
	}
	#scene3 p { padding:0px; width:90%}
    #scene2 .scene-title-3 { font-weight:700}
	.scene-list li {
		margin-top: 10px; font-size: 16px;
	}
	
	p.scene-desc { font-size:14px; }
	
		.scene-person li {
		width: 60px; margin: 0 8px; 
	}
	.scene-person li img { width: 60px; height:60px;  }
	#scene1 .scene-texts {
		padding-top: 20px;
	}
	.scene-list li {
		margin-top: 10px; font-size: 14px;
	}
	#scene3 .scene-space {
		-webkit-transform: scale(0.4) translateY(-40%);
		transform: scale(0.4) translateY(-40%); height:150px;}
	#scene3 .t3_1 { margin-left:-310px}
}

@-webkit-keyframes topFade {
	90%, 100% {
		opacity: 0;
		bottom: 6%;
	}
}
@keyframes topFade {
	90%, 100% {
		opacity: 0;
		bottom: 6%;
	}
}


/*list_new*/
.list_new {text-align: left;}
.list_new ul {padding-left: 30px;}
.list_new ul li a{color: #FFF; line-height: 25px; font-size: 22px;  
  background: url(imagesf8bc1257d10f1696c6f003.png) 0 5px no-repeat;
  padding-left: 30px}
.list_new ul li a:hover{color: #D28D0C;}
.list_02 ul li a:hover{color: #3f5f74;}
.list_03 ul{padding-left: 0px;}
.list_03 ul li a:hover{color: #51900B;}
.list_04 ul li a:hover{color: #404B90;}

.scene-desc{text-indent: 2em;}