body {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
		background-color: #23292e;
		padding:0 10px;
	  }
	#myCanvas {
		background: url("../map.png") no-repeat center center;
		background-size: contain;
		 width: 80%;
		 height: 80%;
	}
	.rotate0{transform: rotate(0deg);}
	.rotate180{transform: rotate(180deg);}
	.canvas-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	.shadow-box {
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}
	.layui-menu{
		background-color:#23292e;
	}
	.layui-menu-body-title a{color:#FFF;}
	.layui-menu-body-title a{text-align: center;}
	.layui-menu-body-title span{color:#FFF;margin:0 10px;}
	.layui-col-md8{padding:30px;}
	.layui-col-xs12{padding:10px;}
	@media only screen 
		and (min-width: 320px) 
		and (max-width: 480px) {
			#myCanvas {
				 width: 100%;
				 height: 80%;
			}
	}
	.heroliHF{border-left: 3px solid red;}
	.heroliLF{border-left: 3px solid #258DF2;}
	.homeList_li{border-bottom: 1px solid #2f363c;}
	.homeListSelectLi{background: linear-gradient(to right, #31bdec30, #ff572230);}
	.heroTxHF{width:40px;height:40px;border: 3px solid red;border-radius:50%;}
	.heroTxLF{width:40px;height:40px;border: 3px solid #258DF2;border-radius:50%;}
	.layui-form-checkbox[lay-skin=primary]>div{color:#FFF;}