*{margin:0;padding:0;}
html,body{overflow:hidden;height:100%;background-color: #fefefe;font-family: Helvetica, sans-serif;font-size: 16px;	color:#fff;}

#cubeTransition{
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
}

#cubeTransition .page{
	min-height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	transform-style: preserve-3d;
    font-size: 5em;
    color: #fff;
    overflow:hidden;
}

.ani{}


.page1{ background:url(images/p1_bg.jpg) no-repeat #a00d1d; background-size:100% auto; position:relative;}
.page1 h2{ width:38%; height:auto; position:absolute; top:40%; left:32%;}
.page1 h2 img{ width:100%; height:auto;}
.page1 .box01{ width:50%; text-align:right; position:absolute; top:-30px; right:23%;}
.page1 .box02{ width:20%; position:absolute; top:10%; left:51%;}
.page1 .box02 img{ width:100%; height:auto;}
.page1 .box03{ font-size:14px; width:42%; position:absolute; left:30%; top:72%;}
.page1 .box03 img{ float:left; margin:7px 18px 0 0;}
.page1 .box03 p{ line-height:180%; text-indent:2em; color:#fee3c9;}



.page2{background:#e7d5b2; position:relative; overflow:hidden;}
.page2 h2{ width:7.5%; position:absolute; top:9%; left:17%; z-index:10;}
.page2 h2 img{ width:100%; height:auto;}
.page2 .box01{ position:absolute; width:43%; z-index:1; top:0; left:0;}
.page2 .box01 img{ width:100%; height:auto;}
.page2 .box02{ position:absolute; width:23.8%; bottom:-3%; left:0; z-index:1;}
.page2 .box02 img{ width:100%; height:auto;}
.page2 .box03{ width:29%; position:absolute; z-index:9; right:5%; top:20%;}
.page2 .box03 img{ width:100%; height:auto;}
.page2 .box04{ position:absolute; width:auto; height:100%;right:0; top:0;}
.page2 .box04 img{ width: auto; height: 100%;}
.page2 .box05{ position:absolute; color:#583617; width:34%; left:29%; top:30%; z-index:8;}
.page2 .box05 p{ font-size:16px; line-height:180%;}
.page2 .box05 em{ font-size:18px; font-style:normal; padding-top:10px; text-align:right; display:block;}



.page3{background:#722f2f; position:relative;}
.page3 h2{ width:7.5%; position:absolute; top:9%; right:14%; z-index:10;}
.page3 h2 img{ width:100%; height:auto;}
.page3 .box01{ position:absolute; width:43%; z-index:1; top:0; right:0; }
.page3 .box01 img{ width:100%; height:auto;}
.page3 .box02{ position:absolute; width:23.8%; bottom:-3%; right:0; z-index:1;}
.page3 .box02 img{ width:100%; height:auto;}
.page3 .box03{ width:29%; position:absolute; z-index:9; left:5%; top:20%;}
.page3 .box03 img{ width:100%; height:auto;}
.page3 .box04{ position:absolute; width:auto; height:100%;left:0; top:0;}
.page3 .box04 img{ width: auto; height: 100%;}
.page3 .box05{ position:absolute; color:#fff; width:34%; left:36%; top:30%; z-index:8;}
.page3 .box05 p{ font-size:16px; line-height:180%;}
.page3 .box05 em{ font-size:18px; font-style:normal; padding-top:10px; text-align:right; display:block;}






.page4{background:#6a557c; position:relative;}
.page4 h2{ width:7.5%; position:absolute; top:9%; left:17%; z-index:10;}
.page4 h2 img{ width:100%; height:auto;}
.page4 .box01{ position:absolute; width:43%; z-index:1; top:0; left:0;}
.page4 .box01 img{ width:100%; height:auto;}
.page4 .box02{ position:absolute; width:23.8%; bottom:-3%; left:0; z-index:1;}
.page4 .box02 img{ width:100%; height:auto;}
.page4 .box03{ width:29%; position:absolute; z-index:9; right:5%; top:20%;}
.page4 .box03 img{ width:100%; height:auto;}
.page4 .box04{ position:absolute; width:auto; height:100%;right:0; top:0;}
.page4 .box04 img{ width: auto; height: 100%;}
.page4 .box05{ position:absolute; color:#fff; width:34%; left:29%; top:30%; z-index:8;}
.page4 .box05 p{ font-size:16px; line-height:180%;}
.page4 .box05 em{ font-size:18px; font-style:normal; padding-top:10px; text-align:right; display:block;}






.page5{background:#2d3c7a; position:relative;}
.page5 h2{ width:7.5%; position:absolute; top:9%; right:14%; z-index:10;}
.page5 h2 img{ width:100%; height:auto;}
.page5 .box01{ position:absolute; width:43%; z-index:1; top:0; right:0;}
.page5 .box01 img{ width:100%; height:auto;}
.page5 .box02{ position:absolute; width:23.8%; bottom:-3%; right:0; z-index:1;}
.page5 .box02 img{ width:100%; height:auto;}
.page5 .box03{ width:29%; position:absolute; z-index:9; left:5%; top:20%;}
.page5 .box03 img{ width:100%; height:auto;}
.page5 .box04{ position:absolute; width:auto; height:100%;left:0; top:0;}
.page5 .box04 img{ width: auto; height: 100%;}
.page5 .box05{ position:absolute; color:#fff; width:34%; left:36%; top:30%; z-index:8;}
.page5 .box05 p{ font-size:16px; line-height:180%;}
.page5 .box05 em{ font-size:18px; font-style:normal; padding-top:10px; text-align:right; display:block;}



.page6{background:#356c62;}
.page6 h2{ width:7.5%; position:absolute; top:9%; left:17%; z-index:10;}
.page6 h2 img{ width:100%; height:auto;}
.page6 .box01{ position:absolute; width:43%; z-index:1; top:0; left:0;}
.page6 .box01 img{ width:100%; height:auto;}
.page6 .box02{ position:absolute; width:23.8%; bottom:-3%; left:0; z-index:1;}
.page6 .box02 img{ width:100%; height:auto;}
.page6 .box03{ width:29%; position:absolute; z-index:9; right:5%; top:20%;}
.page6 .box03 img{ width:100%; height:auto;}
.page6 .box04{ position:absolute; width:auto; height:100%;right:0; top:0;}
.page6 .box04 img{ width: auto; height: 100%;}
.page6 .box05{ position:absolute; color:#fff; width:34%; left:29%; top:30%; z-index:8;}
.page6 .box05 p{ font-size:16px; line-height:180%;}
.page6 .box05 em{ font-size:18px; font-style:normal; padding-top:10px; text-align:right; display:block;}




.page7{ background:url(images/p6_bg.jpg) no-repeat; background-size:100% 100%;}
.page7 .box01{ width:46%; text-align:center; margin:12% auto 0;}
.page7 .box01 p{ color:#2c5865; font-size:16px; text-align:center; padding:1% 0;}
.page7 .box01 img{ width:28%; height:auto; margin:0 auto;}
.page7 .fx{ font-size:16px; text-align:center; margin:20px auto; width:350px;}
.page7 .go a{ padding:10px 30px; border-radius:40px; background:#3889a1; color:#fff; text-decoration:none;}
.page7 .go{}


.device {width: 100%; height:300px; position: relative;}
.device .arrow-left { display:none;}
.device .arrow-right { display:none;}
.swiper-container { height:300px; width: 100%;}
.content-slide p{ text-indent:2em;}

.pagination { position: absolute; left: 0; text-align: center; bottom:5px; width: 100%; z-index:999;}
.swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #999;  margin: 0 3px; cursor: pointer;}
.swiper-active-switch { background: #fff;}






.show{ display:block;}
.hide{ display:none;}

.top{z-index:9999}

.rotateCubeTopOut {
	transform-origin: 50% 100%;
	animation: rotateCubeTopOut .6s both ease-in;
}
.rotateCubeTopIn {
	transform-origin: 50% 0%;
	animation: rotateCubeTopIn .6s both ease-in;
}

.rotateCubeBottomOut {
	transform-origin: 50% 0%;
	animation: rotateCubeBottomOut .6s both ease-in;
}
.rotateCubeBottomIn {
	transform-origin: 50% 100%;
	animation: rotateCubeBottomIn .6s both ease-in;
}


@keyframes rotateCubeTopOut {
	50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
	100% { opacity: .3; transform: translateY(-100%) rotateX(90deg); }
}

@keyframes rotateCubeTopIn {
	0% { opacity: .3; transform: translateY(100%) rotateX(-90deg); }
	50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
}


@keyframes rotateCubeBottomOut {
	50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
	100% { opacity: .3; transform: translateY(100%) rotateX(-90deg); }
}

@keyframes rotateCubeBottomIn {
	0% { opacity: .3; transform: translateY(-100%) rotateX(90deg); }
	50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
}




#bullets {
	position: absolute;
	width: 100%;
	bottom: 20px;
	padding: 0;
	margin: 0;
	text-align: center; z-index:999;
}

	#bullets li {
		display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		margin: 0 3px;

		background: rgba( 255, 255, 255, 0.2 );
		box-shadow: 0px 0px 4px rgba( 0, 0, 0, 0.2 );
		cursor: pointer;-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
	}

		#bullets li:hover {
			/*background: rgba( 255, 255, 255, 0.8 );*/
			
		}

		#bullets li.active {
			cursor: default;
			/*background: #fff;*/
			background:url(images/icon05.png) center no-repeat #fff; width:30px; height:30px;filter:Alpha(Opacity=30); opacity: 0.3;-moz-opacity:0.3; 
		}

@media screen and (max-width: 500px) {
	body {
		font-size: 10px;
	}

	.bullets li {
		margin: 0 6px;
	}

	.credit {
		bottom: initial;
		top: 10px;
		right: 10px;
	}

	.share,
	.github-ribbon {
		display: none;
	}
}