/* html, body { */
/* 	width: 100%; */
/* 	height: 100%; */
/* 	margin: 0; */
/* 	padding: 0; */
/* 	overflow: hidden; */
/* 	background: #e6e7ec; */
/* } */

#box {
	position: relative;
	margin: 50px auto;
	width: 480px;
	height: 510px;
	background: #e6e7ec;
}

#centent {
	position: absolute;
	width: 460px;
	height: 460px;
	border: 1px solid #9E9E9E;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0px 0px 5px 0px #9e9e9ed9;
	left: 10px;
	top: 20px;
}

#canvas {
	display: block;
	position: absolute;
	background: #F7E6B7;
	left: -10px;
	top: -10px;
}

#state, #winner, .btn {
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 30px;
	outline: none;
	font-size: 10px;
	box-sizing: border-box;
	color: #00BCD4;
	background: #fff;
	border: none;
	box-shadow: 1px 1px 3px 1px #9e9e9e5e;
	top: 490px;
	left: 250px;
	user-select: none;
	cursor: pointer;
}

#go {
	left: 300px;
}

#anew {
	left: 200px;
}

#state {
	left: 351px;
	width: 120px;
}

#state .state-chess, #winner .state-chess {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 5px;
	left: 5px;
}

#state .chessName, #winner .chessName {
	position: absolute;
	width: 60px;
	height: 30px;
	top: 5px;
	left: 40px;
	text-align: center;
	line-height: 30px;
	font-size: 15px;
}

#button:hover, #go:hover {
	transition: 1s all;
	background: #01BCFF;
	color: #fff;
}

#anew:hover {
	transition: 1s all;
	background: #1bb556;
	color: #fff;
}

#button:active, #anew:active, #go:active {
	transition-property: all;
	transition-duration: 1s;
	transition-timing-function: ease;
	transition-delay: 0s;
	transform: scale(.8);
}

.Bchess {
	background: radial-gradient(#9E9E9E -100%, #000000 100%);
	color: #fff;
}

.Wchess {
	background: radial-gradient(#e4e4e4 10%, #b7aaaa);
	color: #000;
}

.Bchess, .Wchess {
	box-shadow: 1px 2px 2px 0px #0000006e;
	position: absolute;
	width: 27px;
	height: 27px;
	border-radius: 30px;
	font-size: 10px;
	line-height: 27px;
	text-align: center;
	z-index: 2023;
}

#winner {
	width: 120px;
	left: 12px;
	display: none;
}

/* 扩展序号等功能start */
#rows {
	display: block;
	position: absolute;
	background: #F7E6B7;
	left: -10px;
	top: -10px;
}

.row {
	position: absolute;
	border-radius: 30px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	z-index: 2022;
	background: #ffffffdd;
	font-size: 12px;
	/* 	-webkit-transform: scale(0.8333); */
	/* 	transform: scale(0.8333); */
	color: #5d5d5daa;
	font-weight: bold;
	cursor: pointer;
	white-space: nowrap;
}

.row, .Bchess, .Wchess {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}