@font-face{
	font-family: 'NotoR';
	src: url('../fonts/NotoSansHans-Regular.otf') format('opentype');
}
@font-face{
	font-family: 'NotoB';
	src: url('../fonts/NotoSansHans-Bold.otf') format('opentype');
}
*{
	margin:0;
	padding:0;
	list-style:none;
	font-family:NotoR,Microsoft Yahei,Helvetica;
	font-size:24px;
}
.title-1{
	font-family:NotoB,Microsoft Yahei,Helvetica;
	font-size:64px;
}
.con-con p{
	padding:12px;
	max-width:80%;
}
a{
	color:rgb(32,98,204);
}
.clearfix:after{
	clear:both;
}
#main-container{
	overflow:hidden;
}
#main-con,#bottom-bar{
	width:100%;
}
#main-con{
	position:fixed;
	height:100%;
}
#bottom-bar{
	position:fixed;
	bottom:-100%;
	height:calc(100% + 100px);
	background-color:rgba(255,255,255,0.7);
	z-index:10000;
	box-shadow:0 0px 8px rgba(0,0,0,0.12), 0 -8px 8px rgba(0,0,0,0.24);
}
.con{
	height:100%;
	position:relative;
	overflow:hidden;
}
.con-con{
	color:white;
	margin-left:10%;
	padding:24px 36px;
	width:65%;
	background:rgba(0,0,0,0.8);
	height:100%;
}
#con-1{
	background:url(../image/bg1.jpg) center center;
	background-size: cover;
}
#con-2{
	background:url(../image/bg2.png) center center;
	background-size: cover;

}
#con-3{
	background:url(../image/bg3.png) center center;
	background-size: cover;

}
#con-4{
	background:url(../image/bg4.png) top center;
	background-size: cover;
}
#logo{
	margin-top:26px;
	margin-left:auto;
	margin-right:auto;
	height:64px;
	width:87px;
}
#logo img{
	height: 48px;
}
/*
#control{
	float:right;
	margin:10px;
	margin-right:48px;
}
*/
.ctrl-btn{
	height:50px;
	width:50px;
	border-radius:50px 50px;
	border:3px #454545 solid;
	box-shadow:0 0px 8px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.24);
}
#ctrl-right{
	right:48px;
	position:absolute;
	top:22px;
}
#ctrl-left{
	right:116px;
	position:absolute;
	top:22px;
	display:none;
}
#ctrl-up{
	left:48px;
	position:absolute;
	top:22px;
}
.ctrl-btn:hover{
	background:#aaaaaa;
}
.ctrl-btn-disabled{
	display:none;
}
.ctrl-btn img{
	margin:7px;
	color:#454545;
}
#con4-con{
	background:none;
	height:500px;
	width:700px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-350px,-300px);
}
#bottom-container{
	height:calc( 100% - 100px );
	width:100%;
	position:absolute;
	bottom:0px;
}
#bottom-con{
	height:100%;
	width:100%;
	background:white;
	position:absolute;
	/*transform:translate(-438px,0px);
	border-radius:10px;*/
	box-shadow:0 0px 8px rgba(0,0,0,0.12), 0 -4px 8px rgba(0,0,0,0.24);
}
#bottom-con-container-container{
	height:725px;
	width:876px;
	position:relative;
	bottom:0px;
	left:50%;
	transform:translate(-438px,0px);
}
#bottom-con-container{
	height:725px;
	width:876px;
	position:relative;
	color:#101010;
}
.pages{
	margin-top:50px;
	width:676px;
	padding:0px 100px;
	height:675px;
	font-size:14px;
	position:absolute;
}
#page1 img{
	float:left;
	margin-right:20px;
	margin-bottom:20px;
}
#page2{
	display:none;
	left:675px;
}
#page3{
	display:none;
	left:1350px;
}
#video-container{
	display:none;
	height:100%;
	width:100%;
	background:rgba(0,0,0,0.7);
	position:fixed;
	z-index:20000;
}
#video-con{
	width:720px;
	height:544px;
	position:fixed;
	top:50%;
	left:50%;
	margin-left:-360px;
	margin-top:-277px;
}