html,
	body,
	canvas {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		overflow: hidden;
	}
	
	canvas {
		visibility: hidden;
	}
	
	#upload,
	#enableEdit {
		width: 100px;
		margin: -5px;
		margin-left: 61px;
		bottom: 5px;
	}
	
	#debugLayerButton {
		position: absolute;
		border: white solid 1px;
		background: rgba(128, 128, 128, 0.3);
		color: white;
		left: 50%;
		width: 100px;
		height: 50px;
		margin-left: -50px;
		bottom: 10px;
	}
	
	#controlPanel {
		position: absolute;
		height: 100px;
		bottom: 0px;
		width: 220px;
		left: 50%;
		margin-left: -110px;
		transition: transform 0.25s ease-in-out;
		transform: translateY(100px);
		-webkit-transition: -webkit-transform 0.25s ease-in-out;
		-webkit-transform: translateY(100px);
		display: none;
	}
	
	#selectScenePlane {
		position: absolute;
		height: 300px;
		width: 150px;
		right: 0%;
		transition: transform 0.25s ease-in-out;
		bottom: 0%;
		background: rgba(0, 0, 0, 0.3);
		border-top-left-radius: 10px 10px;
		border-bottom-left-radius: 10px 10px;
		color: white;
		/*transform: translateY(-100px);
				-webkit-transition: -webkit-transform 0.25s ease-in-out;
				-webkit-transform: translateY(-100px);*/
	}
	
	#selectContent>div {
		text-align: center;
		width: 150px;
		font-size: 15px;
		margin-top: 10px;
		align-content: center;
	}
	
	#selectContent>div>#level {
		text-align: center;
		float: left;
		width: 60px;
		height: 50px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	#selectContent>div>.levelimg {
		text-align: center;
		border: 20px;
		float: left;
		width: 70px;
		height: 40px;
		padding: 5px;
		margin: 5px;
		background-size: cover;
	}
	
	#selectContent>div>.levelimg>img {
		text-align: center;
		border: 0px;
		width: 70px;
		height: 40px;
		padding: 5px;
	}
	
	#selectContent>div>.levelimg1 {
		visibility: hidden;
		background-image: url("../files/Asset/level1.jpg");
	}
	
	#selectContent>div>.levelimg2 {
		visibility: hidden;
		background-image: url("../files/Asset/level2.jpg");
	}
	
	#selectContent>div>.levelimg3 {
		visibility: hidden;
		background-image: url("../files/Asset/level3.jpg");
	}
	
	#selectContent>div>.levelimg4 {
		visibility: hidden;
		background-image: url("../files/Asset/level4.jpg");
	}
	
	#selectContent>div>.levelimg:hover {
		-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
		-khtml-box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
		-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
		-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
		box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
	}
	
	#selectContent>div>.levelimg:active {
		-webkit-box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0) 0px 1px 0px, inset rgba(0, 0, 0, 0.5) 0px 0px 5px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
		-khtml-box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0) 0px 1px 0px, inset rgba(0, 0, 0, 0.5) 0px 0px 5px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
		-moz-box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0) 0px 1px 0px, inset rgba(0, 0, 0, 0.5) 0px 0px 5px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
		-o-box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0) 0px 1px 0px, inset rgba(0, 0, 0, 0.5) 0px 0px 5px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
		box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0) 0px 1px 0px, inset rgba(0, 0, 0, 0.5) 0px 0px 5px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
	}
	
	#selectScenePlaneParent {
		visibility: hidden;
		transition: transform 0.25s ease-in-out;
		transform: translateX(0px);
		-webkit-transition: -webkit-transform 0.25s ease-in-out;
		-webkit-transform: translateX(0px);
		-moz-transition: transform 0.25s ease-in-out;
		-moz-transform: translateX(0px);
		-o-transition: transform 0.25s ease-in-out;
		-o-transform: translateX(0px);
	}
	
	#selectHandle {
		cursor: pointer;
		position: absolute;
		width: 1px;
		height: 1px;
		right: 150px;
		bottom: 120px;
		content: '';
		border-top: 40px solid transparent;
		border-right: 40px solid rgba(0, 0, 0, 0.6);
		border-bottom: 40px solid transparent;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	
	#selectHandleLine {
		position: absolute;
		width: 1px;
		height: 1px;
		right: 150px;
		bottom: 110px;
		content: '';
		border-top: 50px solid transparent;
		border-right: 50px solid rgba(150, 0, 0, 0.4);
		border-bottom: 50px solid transparent;
	}
	
	#selectHandle:hover {
		border-right: 40px solid rgba(0, 0, 0, 0.8);
	}
	
	.tag {
		position: absolute;
		background-color: #EEEEEE;
		height: 20px;
		width: 150px;
		left: 50%;
		padding: 5px;
		color: #888888;
		font-size: 18px;
		margin-left: -70px;
		text-align: center;
		top: -30px;
		border-top-left-radius: 10px 10px;
		border-top-right-radius: 10px 10px;
	}
	
	.button {
		display: none;
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		border: none;
		border-radius: 5px;
		color: white;
		top: 20px;
		left: 20px;
		padding: 10px 20px;
		text-align: center;
		text-decoration: none;
		font-size: 24px;
		margin: 4px 2px;
		cursor: pointer;
	}
	
	.keytags {
		display: none;
		position: absolute;
		width: 120px;
		height: 120px;
		border: none;
		border-radius: 5px;
		color: white;
		left: -15px;
		top: 80px;
		padding: 10px 20px;
		text-align: center;
		text-decoration: none;
		margin: 4px 2px;
	}
	
	.buttons {
		display: none;
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		border: none;
		border-radius: 5px;
		color: white;
		top: 20px;
		left: 200px;
		padding: 10px 20px;
		text-align: center;
		text-decoration: none;
		font-size: 20px;
		margin: 4px 2px;
		cursor: pointer;
	}
	
	.autobutton {
		display: none;
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		border: none;
		border-radius: 6px;
		color: white;
		top: 20px;
		right: 20px;
		padding: 10px 20px;
		width: 88px;
		text-align: center;
		text-decoration: none;
		font-size: 24px;
		margin: 4px 2px;
		cursor: pointer;
	}
	
	.autobuttonsp {
		display: none;
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		border: none;
		border-radius: 6px;
		color: white;
		top: 20px;
		right: 118px;
		padding: 10px 20px;
		text-align: center;
		text-decoration: none;
		font-size: 24px;
		margin: 4px 2px;
		cursor: pointer;
	}
	
	.autobuttonp {
		display: none;
		background: rgba(255, 255, 255, 1);
		position: absolute;
		border: none;
		border-radius: 6px;
		width: 250px;
		color: black;
		bottom: 10%;
		left: 50%;
		margin-left: -125px;
		padding: 10px 20px;
		text-align: center;
		text-decoration: none;
		font-size: 20px;
		cursor: pointer;
	}
	
	.selectbutton {
		display: none;
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		border: none;
		border-radius: 6px;
		color: white;
		bottom: 20px;
		right: 20px;
		padding: 10px 20px;
		text-align: center;
		text-decoration: none;
		font-size: 16px;
		margin: 4px 2px;
		cursor: pointer;
	}
	
	.buttonarea {
		display: none;
		position: absolute;
		background: rgba(0, 0, 0, 0.5);
		width: 88px;
		height: 456px;
		right: 21px;
		top: 95px;
		border-radius: 6px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.infoarea {
		display: none;
		position: absolute;
		margin: 0 auto;
		width: 1430px;
		height: 850px;
		border-radius: 6px;
		margin-left: auto;
		margin-right: auto;
		float: inherit;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		/*transform:rotate(90deg);
	-ms-transform:rotate(90deg); 	
	 -moz-transform:rotate(90deg); 	
	-webkit-transform:rotate(90deg); 
	-o-transform:rotate(90deg);*/
	}
	
	.infobg {
		display: inline-block;
		position: absolute;
		background: rgba(0, 0, 0, 0.6);
		top: 48px;
		width: 1380px;
		height: 800px;
		border-radius: 6px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	
	.imgarea {
		width: 880px;
		height: 720px;
		margin: 40px;
	}
	
	.imgarea>.img {
		width: 880px;
		height: 720px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	
	.imgarea img {
		width: auto;
		height: auto;
		display: none;
	}
	
	.linearea {
		position: absolute;
		top: 40px;
		left: 960px;
		width: 1px;
		height: 720px;
		background-color: #666666;
	}
	
	.msgarea {
		position: absolute;
		width: 340px;
		height: 720px;
		top: 40px;
		right: 40px;
	}
	
	.title {
		font-family: "微软雅黑";
		font-size: 24px;
		color: #fffefe;
	}
	
	.msglist {
		font-family: "微软雅黑";
		font-size: 18px;
		color: #ffffff;
		margin-top: 22px;
	}
	
	.msgname {
		margin-top: 40px;
	}
	
	.msgdescribe {
		word-break: break-all;
		width: 340px;
		height: 280px;
	}
	
	.msglink {
		position: absolute;
		font-family: "微软雅黑";
		font-size: 18px;
		color: #5ca1e5;
		bottom: 0px;
	}
	
	.msglink:hover {
		color: #2677c2;
	}
	
	.closeinfo {
		background: rgba(0, 0, 0, 0.5);
		text-align: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.closeinfo:hover {
		background: rgba(0, 0, 0, 0.6);
	}
	
	.closeimg:hover {
		animation: rot2 0.2s linear 1;
		-webkit-animation: rot2 0.2s linear 1;
		-moz-animation: rot2 0.2s linear 1;
		-ms-animation: rot2 0.2s linear 1;
	}
	
	.closeinfo img {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 22px;
		height: 22px;
	}
	
	.audiocontroller {
		position: absolute;
		width: 56px;
		height: 56px;
		display: none;
		border: none;
		border-radius: 6px;
		color: white;
		font-size: 24px;
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	
	.audioimgo {
		position: absolute;
		top: 45px;
		left: 30px;
		width: 30px;
		height: 30px;
		animation: rot 5s linear infinite;
		-webkit-animation: rot 5s linear infinite;
		-moz-animation: rot 5s linear infinite;
		-ms-animation: rot 5s linear infinite;
		animation-play-state: paused;
		-webkit-animation-p]lay-state: paused;
		-moz-animation-play-state: paused;
		-ms-animation-play-state: paused;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	
	.audioimgi {
		position: absolute;
		top: 30px;
		left: 16px;
		width: 56px;
		height: 56px;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	
	.audioimgo:active {}
	
	.givealike {
		position: relative;
		left: 23px;
		top: 146px;
		width: 42px;
		height: 42px;
		cursor: pointer;
	}
	
	.likeimg,
	.updateimg,
	.sharewechat {
		width: 42px;
		height: 42px;
	}
	
	.votenum {
		position: relative;
		top: -15px;
		text-align: center;
		font-size: 16px;
		color: white;
	}
	
	.update {
		position: absolute;
		top: 146px;
		right: 23px;
		width: 42px;
		height: 42px;
		cursor: pointer;
	}
	
	.updatatext {
		position: relative;
		top: -10px;
		text-align: center;
		font-size: 16px;
		color: gray;
	}
	
	.share {
		position: absolute;
		top: 254px;
		right: 23px;
		width: 42px;
		height: 42px;
		cursor: pointer;
	}
	.back-index {
		position: absolute;
		top: 362px;
		right: 23px;
		width: 42px;
		height: 42px;
		cursor: pointer;
	}
	.sharetext {
		position: relative;
		top: -10px;
		text-align: center;
		font-size: 16px;
		color: white;
	}
	
	.qrcodearea {
		display: none;
		position: absolute;
		bottom: 20px;
		right: 75px;
		width: 42px;
		height: 42px;
		cursor: pointer;
	}
	
	.qrcodeimg {
		position: absolute;
		bottom: 0px;
		right: 0px;
		width: 42px;
		height: 42px;
		width: 118px;
		height: 108px;
	}
	
	.sharewechat:hover {
		content: url(../files/Asset/03_02_icon_wechat_1.png);
	}
	
	.contentimg {
		position: absolute;
		z-index: 10;
		width: 88px;
		height: 88px;
		bottom: 10px;
		right: 20px;
	}
	
	@keyframes rot {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	
	@-webkit-keyframes rot
	/*Safari and Chrome*/
	
	{
		0% {
			-webkit-transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
		}
	}
	
	@-moz-keyframes rot {
		0% {
			-moz-transform: rotate(0deg);
		}
		100% {
			-moz-transform: rotate(360deg);
		}
	}
	
	@-ms-keyframes rot {
		0% {
			-ms-transform: rotate(0deg);
		}
		100% {
			-ms-transform: rotate(360deg);
		}
	}
	
	@keyframes rot2 {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(90deg);
		}
	}
	
	@-webkit-keyframes rot2
	/*Safari and Chrome*/
	
	{
		0% {
			-webkit-transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(90deg);
		}
	}
	
	@-moz-keyframes rot2 {
		0% {
			-moz-transform: rotate(0deg);
		}
		100% {
			-moz-transform: rotate(90deg);
		}
	}
	
	@-ms-keyframes rot2 {
		0% {
			-ms-transform: rotate(0deg);
		}
		100% {
			-ms-transform: rotate(90deg);
		}
	}
	
	#controlsZone {
		width: 100%;
		height: 80%;
		background-color: #EEEEEE;
		color: #888888;
		border-top-left-radius: 10px 10px;
		border-top-right-radius: 10px 10px;
		padding: 10px;
	}
	
	#clickableTag {
		cursor: hand;
		background-color: transparent;
	}
	
	#loadingimg {
		visibility: hidden;
	}
	
	body {
		background-color: #5e4674;
		font-size: 12px;
		-webkit-touch-callout: none;
		/* iOS Safari */
		-webkit-user-select: none;
		/* Chrome/Safari/Opera */
		-khtml-user-select: none;
		/* Konqueror */
		-moz-user-select: none;
		/* Firefox */
		-ms-user-select: none;
		/* Internet Explorer/Edge */
		user-select: none;
	}
	
	h1 {
		font-family: "Helvetica";
		text-align: center;
		text-transform: uppercase;
		color: #888888;
		padding-top: 10px;
		text-shadow: 1px 1px 0px #111111;
	}
	
	.base {
		left: 0;
		right: 0;
		position: absolute;
		top: 40%;
		text-align: center;
	}
	
	h1 {
		position: absolute;
		left: 50%;
		top: 100%;
		color: white;
		display: inline;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	
	h1.loadinghint {
		position: absolute;
		display: inline;
		top: 120%;
	}
	
	@media screen and (max-width: 1800px) and (min-width:1360px) {
		
		.skillbar {
			height: 4px;
		}
		.closeinfo {
			width: 38px;
			height: 38px;
		}
		.closeinfo img {
			top: 10px;
			right: 10px;
			width: 18px;
			height: 18px;
		}
		.infoarea {
			width: 1144px;
			height: 680px;
		}
		.infobg {
			top: 38px;
			width: 1104px;
			height: 640px;
		}
		.imgarea {
			width: 704px;
			height: 576px;
			margin: 32px;
		}
		.imgarea>.img {
			width: 704px;
			height: 576px;
		}
		.linearea {
			top: 32px;
			left: 768px;
			height: 576px;
		}
		.msgarea {
			width: 272px;
			height: 576px;
			top: 32px;
			right: 32px;
		}
		.title {
			font-size: 24px;
		}
		.msglist {
			font-size: 18px;
			margin-top: 22px;
		}
		.msgname {
			margin-top: 32px;
		}
		.msgdescribe {
			width: 272px;
			height: 224px;
		}
	}
	
	@media screen and (max-width: 1360px) and (min-width: 1180px) {
		.skillbar {
			height: 2px;
			left: -2%;
			padding: 8px;
		}
		.closeinfo {
			width: 38px;
			height: 38px;
		}
		.closeinfo img {
			top: 10px;
			right: 10px;
			width: 18px;
			height: 18px;
		}
		.infoarea {
			width: 916px;
			height: 544px;
		}
		.infobg {
			top: 31px;
			width: 883px;
			height: 512px;
		}
		.imgarea {
			width: 563px;
			height: 460px;
			margin: 26px;
		}
		.imgarea>.img {
			width: 563px;
			height: 460px;
		}
		.linearea {
			top: 26px;
			left: 615px;
			height: 460px;
		}
		.msgarea {
			width: 217px;
			height: 460px;
			top: 26px;
			right: 26px;
		}
		.title {
			font-size: 20px;
		}
		.msglist {
			font-size: 16px;
			margin-top: 17px;
		}
		.msgname {
			margin-top: 26px;
		}
		.msgdescribe {
			width: 217px;
			height: 179px;
		}
	}
	
	@media screen and (max-width: 1180px) {
		.skillbar {
			height: 1px;
			left: -2%;
			padding: 5px;
		}
		.closeinfo {
			width: 30px;
			height: 30px;
		}
		.closeinfo img {
			top: 8px;
			right: 8px;
			width: 14px;
			height: 14px;
		}
		.infoarea {
			width: 732px;
			height: 435px;
		}
		.infobg {
			top: 25px;
			width: 706px;
			height: 410px;
		}
		.imgarea {
			width: 450px;
			height: 368px;
			margin: 21px;
		}
		.imgarea>.img {
			width: 450px;
			height: 368px;
		}
		.linearea {
			top: 20px;
			left: 492px;
			height: 368px;
		}
		.msgarea {
			width: 173px;
			height: 368px;
			top: 20px;
			right: 20px;
		}
		.title {
			font-size: 19px;
		}
		.msglist {
			font-size: 14px;
			margin-top: 13px;
		}
		.msgname {
			margin-top: 21px;
		}
		.msgdescribe {
			width: 173px;
			height: 143px;
		}
	}
	/** 首页二维码弹窗begin */
	#main-qrcode-box{
		display: none;
		position:fixed;
		width: 200px;
		height: 240px;
		color: #fff;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		border-radius: 5px;
		transition: all .2s;
	}
	#main-qrcode-box .background{
		position: absolute;
		width: 200px;
		height: 240px;
		background-color: #646464;
		filter: Alpha(opacity=60);
		opacity: 0.6;
	}
	#main-qrcode-box .close-ico{
		display: block;
		position: absolute;
		right: -14px;
		top: -10px;
		border: 2px solid #00FCFF;
		width: 22px;
		height: 22px;
		text-align: center;
		font-size: 18px;
		font-weight: 600;
		line-height: 18px;
		cursor: pointer;
		border-radius: 50%;
		color: black;
		font-family: '微软雅黑'
	}
	#main-qrcode-box .close-ico:hover{
		background-color: #fff;
	}
	#main-qrcode-box .content-wrapper{
		width: 80%;
		margin: 15px auto;
		position: relative;
	}
	#main-qrcode-box .content-wrapper .qr-code{
		width: 160px;
		height: 160px;
	}
	#main-qrcode-box .content-wrapper .text{
		display: block;
		width: 148px;
		font-size: 14px;
		text-align: center;
		margin: 5px auto;
	}
	/** 首页二维码弹窗end */