html, body {
	height: 100%;
	margin: 0;
	overflow: hidden;
	font-family: '΢ÈíÑźÚ';
}

.bg {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../TemplateData/background.jpg") 50% 0 no-repeat;
	background-size: cover;
}

@media screen and (min-width: 0px)
{
	.headbr {
		width: 70%;
	}
	
	.jindu_box {
		width: 878px;
		position: relative;
		padding-top: 40px;
		margin: 0 auto;
		box-sizing: border-box;
		margin-bottom: 100px;
	}
	
	.loading_tip {
		position: absolute;
		width: 100%;
		font-size: 20px;
		color: #CC0000;
		text-align: center;
		line-height: 24px;
		z-index: 10;
		margin-left:150px;
		margin-top:-90px;
	}
	
    .contactor {
		position: absolute;
		width: 100%;
		font-size: 16px;
		color: #FFFFFF;
		text-align: center;
		line-height: 30px;
		z-index: 10;
		margin-top:-115px;
    }
	
	#home_bg {
		position: relative;
		max-width: 1366px;
		text-align: center;
		margin: 30px auto 0;
	}
	
}

@media screen and (min-width: 1367px)
{
	.headbr {
		width: 80%;
	}
	
	.jindu_box {
		width: 878px;
		position: relative;
		padding-top: 50px;
		margin: 0 auto;
		box-sizing: border-box;
		margin-bottom: 100px;
	}
	
	.loading_tip {
		position: absolute;
		width: 100%;
		font-size: 24px;
		color: #CC0000;
		text-align: center;
		line-height: 24px;
		z-index: 10;
		margin-left:150px;
		margin-top:-115px;
	}
	
    .contactor {
		position: absolute;
		width: 100%;
		font-size: 16px;
		color: #FFFFFF;
		text-align: center;
		line-height: 30px;
		z-index: 10;
		margin-top:-95px;
    }
	
	#home_bg {
		position: relative;
		max-width: 1366px;
		text-align: center;
		margin: 80px auto 0;
	}
}

@media screen and (min-width: 1601px)
{
	.headbr {
		width: 100%;
	}
	
	.jindu_box {
		width: 878px;
		position: relative;
		padding-top: 100px;
		margin: 0 auto;
		box-sizing: border-box;
		margin-bottom: 100px;
	}
	
	.loading_tip {
		position: absolute;
		width: 100%;
		font-size: 28px;
		color: #CC0000;
		text-align: center;
		line-height: 30px;
		z-index: 10;
		margin-left:150px;
		margin-top:50px;
	}
	
    .contactor {
		position: absolute;
		width: 100%;
		font-size: 16px;
		color: #FFFFFF;
		text-align: center;
		line-height: 30px;
		z-index: 10;
		margin-top:-110px;
    }
	
	#home_bg {
		position: relative;
		max-width: 1366px;
		text-align: center;
		margin: 120px auto 0;
	}
}


#webgl-content {
	width: 100%; 
	height:100%;
	position: relative;
}

#gameContainer {
	width: 100%;
	height:100%;
}

#fullscreen {
	position: absolute;
	right: 0;
	bottom:0;
	z-index: 1;
	width:100;
	height:100; 
	background-image: url('../TemplateData/fullscreen.png'); 
	background-size: contain; 
	transition: all ease 300ms;
}

#mycanvas {
	width:1px;
	height:1px;
}

.jindu {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	height: 80px;
	margin-bottom: 10px;
}

.jindu-value-bg {
	padding: 0px 0px;
	width: 100%;
	box-sizing: border-box;
	background: url("../TemplateData/loadingprogressbar_bg.png") 0 0 no-repeat;
	background-size: 100%;
}

.jindu_value {
	position: relative;
	width: 0%;
	height: 21px;
	background: url("../TemplateData/loadingprogressbar.png") 0 0 repeat;
}

#jindu_num {
	position: absolute;
	right: -80px;
	top: 0;
	z-index: 1;
	font-size: 28px;
	color: #fff;
}

.versiontip_bg {
	display: none;
}

.versiontip {
	width: 600px;
	padding: 50px 20px 40px;
	box-sizing: border-box;
	margin: 0 auto;
	color: #000;
}

.versiontip .title {
	font-size: 24px;
	line-height: 30px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 40px;
}

.versiontip .tiptext {
	font-size: 16px;
	line-height: 26px;
	text-align: center;
	margin-bottom: 30px;
}

.downloadtext {
	font-size: 16px;
	line-height: 26px;
	text-align: center;
	color: #7D9682;
	margin-bottom: 10px;
}

.downloadtext:hover {
	color: #003300;
}