#demo {
				width: 1200px;
				height: 860px;
				padding: 30px 0;
				background: url(bg0.jpg);
				position: relative;
				border-radius: 10px;
				/* display: flex; */
				/* justify-content:center; */
				box-shadow: 2px 2px 10px 2px #963;
			}

			.box {
				/* background: rgba(255,255,255,0.2); */
				/* padding: 30px 0; */
				position: absolute;
				height: 860px;
			}

			.box1 {
				width: 130px;
				left: 20px;
			}

			.box3 {
				width: 130px;
				left: 1050px;
			}

			.box4 {
				width: 130px;
				left: 910px;
			}

			.box2 {
				width: 740px;
				left: 160px;
			}

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

			#blank-0 {
				box-sizing: content-box;
				width: 640px;
				height: 720px;
				/* border-radius: 4px; */
				border-color: #990;
				position: relative;
				left: 49px;
				top: 69px;
				border-style: solid;
				border-width: 1px;
			}

			#blank-1,
			#blank-2 {
				width: 640px;
				height: 720px;
				padding: 35px;
				position: absolute;
				/* border: 1px solid #f00; */
				left: 15px;
				top: 35px;
				/* border: 1px solid #f00; */
			}

			#blank-1 {
				z-index: 99;
			}

			/**/
			#blank-2::before {
				content: '';
				display: block;
				width: 650px;
				height: 730px;
				border: 4px solid #990;
				border-radius: 5px;
				position: absolute;
				left: 26px;
				top: 26px;
				/* z-index: -1; */
			}

			#blank-0::before {
				content: '楚河';
				display: block;
				position: absolute;
				left: 150px;
				top: 260px;
				color: #880;
				font: 60px 隶书;
				width: 60px;
				line-height: 80px;
				height: 200px;
				transform: rotate(-90deg);
			}

			#blank-0::after {
				content: '漢界';
				display: block;
				position: absolute;
				right: 150px;
				top: 260px;
				color: #880;
				font: 60px 隶书;
				width: 60px;
				line-height: 80px;
				height: 200px;
				transform: rotate(90deg);
				text-decoration: #000;
			}

			#blank-0 td {
				border: 1px solid #990;
				box-sizing: border-box;
				width: 80px;
				height: 80px;
				position: relative;
			}

			.x {
				position: absolute;
				top: 0px;
				margin: 0;
				width: 220px;
				border: 1px dashed #880;
				transform-origin: 0px 2px;
				transform: rotate(45deg);
			}

			.y {
				position: absolute;
				top: 78px;
				margin: 0;
				width: 222px;
				border: 1px dashed #880;
				transform-origin: 0 2px;
				transform: rotate(-45deg);
			}

			.z::before {
				content: '';
				display: block;
				width: 12px;
				height: 12px;
				border: 2px dashed #990;
				position: absolute;
				top: -9px;
				left: -9px;
			}

			.z1::before,
			.z1::after,
			.z2::before,
			.z2::after {
				content: '';
				display: block;
				width: 6px;
				height: 6px;
				position: absolute;
				border-color: #990;
				border-style: solid;
				border-width: 0;
			}

			.z1::before {
				border-right-width: 2px;
				border-bottom-width: 2px;
				top: 68px;
				left: -12px;
			}

			.z1::after {
				border-right-width: 2px;
				border-top-width: 2px;
				top: 82px;
				left: -12px;
			}

			.z2::before {
				border-left-width: 2px;
				border-bottom-width: 2px;
				top: -12px;
				left: 2px;
			}

			.z2::after {
				border-left-width: 2px;
				border-top-width: 2px;
				top: 2px;
				left: 2px;
			}

			.z3::before {
				top: -12px;
				left: 68px;
			}

			.z3::after {
				top: 2px;
				left: 68px;
			}

			.z4::before {
				top: 68px;
				left: 68px;
			}

			.z4::after {
				top: 82px;
				left: 68px;
			}

			.qizi {
				width: 70px;
				height: 70px;
				border-radius: 50px;
				position: absolute;
				left: 0;
				top: 0;
				transform: translate(-25px, -25px);
				transition: all 0.3s ease;
			}

			/*
			.qizi:hover::before,.qizi:hover::after{
				content: '';
					display: block;
					width: 30px;
					height: 80px;
					border-top: 3px dashed #369;
					border-bottom: 3px dashed #369;
					border-radius: 20px;
					position: absolute;
					left: 20px;
					top: -8px;
					transform: rotate(45deg);
			}
			.qizi:hover::after{
				transform: rotate(-45deg);
			}
			*/
			#aside1,
			#aside2,
			#aside5 {
				/* width: 130px; */
				height: 860px;
				border: 2px solid #990;
				box-sizing: border-box;
				/* position: absolute; */
				border-radius: 4px;
				overflow: hidden;
				overflow-y: auto;
			}

			#aside1>img {
				width: 110px;
			}

			#aside2 {
				left: auto;
				right: 10px;
				text-align: center;
			}

			#aside3,
			#aside4 {
				width: 740px;
				height: 30px;
				position: absolute;
				background-color: rgba(200, 200, 200, 0.2);
			}

			#aside4 {
				top: auto;
				bottom: 0px;
			}

			.btn {
				width: 100px;
				height: 30px;
				color: #369;
				margin: 3px;
			}

			.btn4 {
				color: #f00;
				font-size: 14pt;
				font-weight: bold;
				line-height: 30px;
			}

			.btn:hover {
				cursor: pointer;
				background: #f63;
				color: #fff;
			}

			.start {
				color: #090;
			}

			.mark {
				position: absolute;
				top: 0px;
				font: 18pt '楷体';
				color: #ff0;
				line-height: 30px;
			}

			.activeqz,
			.activeqz>div {
				width: 70px;
				height: 70px;
				position: absolute;
				left: 0;
				top: 0;
				/* box-shadow: 0 0 0 1px #f00; */
			}

			.move {
				transition: all 0.5s ease;
			}

			.activeqz::before,
			.activeqz::after,
			.activeqz>div::after,
			.activeqz>div::before {
				content: '';
				display: block;
				box-sizing: border-box;
				width: 15px;
				height: 15px;
				position: absolute;
				border: 0px solid rgba(255, 255, 255, 0.5);
				/* transform: rotate(45deg); */
			}

			.activeqz::after {
				border-top-width: 4px;
				border-left-width: 4px;
				border-radius: 5px 0 0 0;
				left: 0px;
				top: 0px;
				/* transform: rotate(-45deg); */
			}

			.activeqz::before {
				border-top-width: 4px;
				border-right-width: 4px;
				border-radius: 0 5px 0 0;
				/* transform: rotate(-45deg); */
				left: 55px;
				top: 0px;
			}

			.activeqz>div::after{
				border-bottom-width: 4px;
				border-left-width: 4px;
				border-radius: 0 0 0 5px;
				left: 0px;
				bottom: 0px;
			}

			.activeqz>div::before {
				border-bottom-width: 4px;
				border-right-width: 4px;
				border-radius: 0 0 5px 0;
				left: 55px;
				bottom: 0px;
			}

			.moveqz::before,
			.moveqz::after,
			.moveqz>div::before,
			.moveqz>div::after {
				border-color: rgba(50, 150, 250, 0.8);
			}

			.hidden {
				display: none;
			}

			.poi {
				width: 20px;
				height: 20px;
				border-radius: 10px;
				box-sizing: border-box;
				border: 5px solid rgba(255, 255, 255, 0.7);
				position: absolute;
				left: 25px;
				top: 25px;
				box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.5);
				z-index: 1;
			}

			.poikill {
				/* border: 2px solid rgba(255,255,255,0.5); */
				border-color: rgba(255,255,255,0.3);
				box-shadow: 0 0 5px 3px rgba(255, 0, 0, 0.6) ;
				/* transition: all 0.5s ease-out; */
			}
			.poijiang{
				border-color: rgba(255,255,255,0.3);
				box-shadow: 0 0 15px 10px rgba(255, 0, 0, 0.6) ;
				
			}

			.kill,
			.kill>div {
				width: 70px;
				height: 70px;
				position: absolute;
				left: 0;
				top: 0;
				
				/* box-shadow: 0 0 10px 3px rgba(255,255,255,0.5) inset; */
			}

			.kill::before,
			.kill::after,.kill>div::after,.kill>div::before {
				content: '';
				display: block;
				box-sizing: border-box;
				width: 15px;
				height: 15px;
				position: absolute;
				border: 0px solid rgba(255, 0, 0, 0.8);
			}

			.kill::after {
				border-top-width: 4px;
				border-left-width: 4px;
				border-radius: 5px 0 0 0;
				left: 0px;
				top: 0px;
			}

			.kill::before {
				border-top-width: 4px;
				border-right-width: 4px;
				border-radius: 0 5px 0 0;
				/* transform: rotate(-45deg); */
				left: 55px;
				top: 0px;
			}
			.kill>div::before{
				border-bottom-width: 4px;
					border-left-width: 4px;
					border-radius: 0 0 0 5px;
					left: 0px;
					bottom: 0px;
				
			}
			.kill>div::after{
				border-bottom-width: 4px;
					border-right-width: 4px;
					border-radius: 0 0 5px 0;
					left: 55px;
					bottom: 0px;
				
			}

			.killpoi {
				box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.5) inset;
				border-radius: 20px;
			}
/*
			.killpoi::before,
			.killpoi::after {
				border-top: 3px dashed rgba(255, 0, 0, 0.3);
				border-bottom: 3px dashed rgba(255, 0, 0, 0.3);
				box-shadow: 0 0 5px 1px rgba(255, 0, 0, 0.5);
			}
*/
			#aside5 {
				position: absolute;
				width: 130px;
				height: 860px;
			}

			.tit {
				width: 100%;
				color: #fff;
				font: bold 24pt 楷体;
				text-align: center;
				position: absolute;
				line-height: 30px;
				height: 30px;
				left: 0;
				cursor: pointer;
			}

			#tit2 {
				top: 10px;
			}

			#tit1 {
				bottom: 10px;
				color: red;
			}

			.hislist {
				height: 370px;
				position: absolute;
				width: 100%;
				color: #aa0;
				/* background: rgba(255,255,0,0.3); */
				overflow: hidden;
			}

			.hisr {
				bottom: 50px;
			}

			.hisb {
				top: 50px;
			}

			.hisol {
				width: 100%;
				min-height: 370px;
				margin: 0;
				padding: 0;
				overflow-y: hidden;
				list-style: inside decimal;
				display: flex;
				position: absolute;
			}

			.olr {
				flex-direction: column-reverse;
			}

			.olb {
				flex-direction: column-reverse;
				transform: scale(-1);
				bottom: 0;
			}

			.hisli {
				flex: 0 0 25px;
				line-height: 25px;
				margin: 2px;
				padding-left: 10px;
				height: 30px;
				position: relative;
			}

			.lired {
				color: #c00;
				border-radius: 0 0 0 35px;
				background: rgba(255, 255, 255, 0.5);
				/* background: rgba(255,0,0,0.5); */
			}

			.liblack {
				color: #000;
				border-radius: 35px 0 0 0;
				background: rgba(255, 255, 255, 0.5);
				transform: scale(-1);
			}

			.jiang::after {
				content: '将';
				color: #ff0;
				height: 20px;
				width: 15px;
				line-height: 20px;
				text-align: center;
				display: block;
				overflow: hidden;
				background: rgba(0, 0, 0, 0.8);
				border-radius: 100%;
				font-size: 10pt;
				position: absolute;
				left: 105px;
				top: 3px;
			}

			.ying {
				position: absolute;
				left: 680px;
				top: 310px;
				width: 200px;
			}

			/*
			.qizi{
				display: none;
			}
			#aside2>*,#aside1>*{
				display: none;
			}
			*/
			/* */
			.dot {
				width: 70px;
				height: 70px;
				background: rgba(255, 0, 0, 0.6);
				border-radius: 70px;
				position: absolute;
				left: 0;
				top: 0;
			}

			.dot::before {
				content: '';
				display: block;
				width: 10px;
				height: 10px;
				background-color: rgba(0, 0, 0, 0.5);
				position: absolute;
				left: 35px;
				top: 35px;
			}