/* 加载页面 */
.loading{position: fixed;top:0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.8);z-index: 3;}
.mask-c{background:  #1f252a;}
.load-mask{  position: absolute;top:50%;left: 50%;margin-left: -178px;margin-top: -31px;height: 62px;}
.load-mask>img{width: 9px;height:12px;margin-bottom: 20px;  }
.load-mask>img:nth-child(1){width: 211px;height:62px;margin-bottom: 0;}
.none{
	display: none;
}

@keyframes turn {
	0% {
		opacity: .6;
	}
	100% {
		opacity: 1;
	}
}

@keyframes cloudtop {
	0% {
		left: 8.00rem;
		top: -.80rem;
		opacity: 1;
	}
	100% {
		left: 8.40rem;
		top: -1.27rem;
		opacity: .4;
	}
}

@keyframes cloudrighttop {
	0% {
		left: 17.20rem;
		top: 1.10rem;
		opacity: .4;
	}
	100% {
		left: 16.80rem;
		top: 0.90rem;
		opacity: 1;
	}
}

@keyframes cloudrightbottom {
	0% {
		left: 17.10rem;
		top: 1.50rem;
		opacity: .4;
	}
	100% {
		left: 17.50rem;
		top: 1.70rem;
		opacity: 1;
	}
}

@keyframes cloudlefttop {
	0% {
		left: .40rem;
		top: .80rem;
		opacity: .4;
	}
	100% {
		left: 0rem;
		top: .60rem;
		opacity: 1;
	}
}

@keyframes cloudleftbottom {
	0% {
		left: 1.00rem;
		top: .80rem;
		opacity: .4;
	}
	100% {
		left: 1.40rem;
		top: 1.00rem;
		opacity: 1;
	}
}

* {
	margin: 0px;
	padding: 0px;
	font-family: 'microsoft yahei','微软雅黑',"PingFangSC-Regular",'sans-serif';
	box-sizing: border-box;
}

.explorer {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding-top: 10%;
	background-color: #333;
	color: #fff;
	text-align: center;
	z-index: 4;
}

li{
	list-style: none;
}

html,body {
	/*width: 100%;
	height: 100%;
	min-width: 1024px;
	min-height: 500px;*/
	overflow: hidden;
	background-color: #1f252a;
	font-size: 100%;
}

.background {
	width: 19.20rem;
	height: 10.80rem;
	background-image: url('../image/background.jpg');
	background-size: 100% 100%;
	position: absolute;
	left: 50%;
	bottom: 50%;
	margin-left: -9.60rem;
	margin-bottom: -5.40rem;
}

.clouds {
	width: 100%;
	height: 100%;
	position: relative;
}

.cloudTop {
	width: 1.89rem;
	height: 1.87rem;
	background-image: url('../image/cloudt.png');
	background-size: 100% 100%;
	position: absolute;
	animation: cloudtop 10s linear infinite alternate;
}

.cloudRightTop {
	width: .72rem;
	height: .80rem;
	background-image: url('../image/cloudrt.png');
	background-size: 100% 100%;
	position: absolute;
	animation: cloudrighttop 10s linear infinite alternate;
}

.cloudRightBottom {
	width: 1.61rem;
	height: 1.60rem;
	background-image: url('../image/cloudrb.png');
	background-size: 100% 100%;
	position: absolute;
	animation: cloudrightbottom 10s linear infinite alternate;
}

.cloudLeftTop {
	width: .99rem;
	height: .98rem;
	background-image: url('../image/cloudlt.png');
	background-size: 100% 100%;
	position: absolute;
	animation: cloudlefttop 10s linear infinite alternate;
}

.cloudLeftBottom {
	width: 1.83rem;
	height: 1.51rem;
	background-image: url('../image/cloudlb.png');
	background-size: 100% 100%;
	position: absolute;
	animation: cloudleftbottom 10s linear infinite alternate;
}

.container {
	display: block;
	position: absolute;
	left: 5.00rem;
	top: .60rem;
	display: flex;
	flex-direction: column;	
}

.logo{
	width: 2.71rem;
	height: .56rem;
	margin: .60rem .4rem .15rem;
	background-image: url('../image/logo.png');
	background-size: 100% 100%;
}

/******************* 提示区开始 *******************/

.point {
	position: absolute;
	top: .90rem;
	left: 2.50rem;

}

.point li{
	position: absolute;
	color: #3359b0;
	font-size: .20rem;
	/*font-size: 20px;*/
	left: 0rem;
	white-space: nowrap;
}

.point li:nth-child(2){
	left: 1.20rem;
}

.point li:nth-child(3){
	left: 2.40rem;
}

/******************* 提示区结束 *******************/

/******************* 棋盘区开始 *******************/

#canvas {
	width: 6.40rem;
	height: 6.72rem;
	cursor: pointer;
}

/*#canvas:hover {
	cursor: url('../image/whitearrow.ico'),pointer;
}*/

/******************* 棋盘区结束 *******************/

/******************* 项目介绍开始 *******************/

.introduction {
	width: 4.20rem;
	height: 2.87rem;
	font-size: .16rem;
	position: absolute;
	left: 6.60rem;
	top: 1.30rem;
	padding: .30rem .20rem .30rem .16rem ;
	background-image: url('../image/intro.png');
	background-size: 100% 100%;
	color: #fff;
	overflow: hidden;
}

.introduction ul {
	width: 3.84rem;
	height: 2.27rem;
	padding-right: .20rem;
	position: absolute;
	overflow: hidden;
}

.introduction ul li {
	margin-bottom: .2rem;
}

/******************* 项目介绍结束 *******************/

/******************* 操作区开始 *******************/

.control {
	position: absolute;
	left: 6.60rem;
	top: 5.73rem;
}

.control button { 
	width: 1.56rem;
	height: .56rem;
	background-color: none;
	background-size: cover;
	border: none;
	font-size: .20rem;
	font-weight: 600;
	line-height: .56rem;
	color: #fff;
	position: absolute;
	outline: none;
	border-radius: 6px;
	z-index: 2;
	cursor: pointer;
	left: .02rem;
}

.changeRole {
	position: relative;
}

.selectDiff {
	top: .70rem;
}

.restart {
	top: 1.40rem;
}

.bluebtn {
	background-image: url('../image/bluebtn.png');
}

.greenbtn {
	background-image: url('../image/greenbtn.png');
}

.control button:active {
	color: rgba(255,255,255,.6);
}

.bluebtn:active {
	background-image: url('../image/bluebtnclick.png');
}

.greenbtn:active {
	background-image: url('../image/greenbtnclick.png');
}

.changeRoleWindow {
	width: 1.60rem;
	height: 2.01rem;
	background-image: url('../image/changerolewin.png');
	background-size: 100% 100%;
	position: absolute;
	bottom: -.58rem;
}

.changeRole:active ~ .changeRoleWindow {
	display: block;
}

.role {
	width: 100%;
	height: .70rem;
	font-size: .18rem;
	line-height: .70rem;
	color: #fff;
	position: relative;
}

.role i{
	display: inline-block;
	vertical-align: middle;
	width: .50rem;
	height: .50rem;
	margin: 0rem .22rem 0rem .31rem;
	background-size: 100% 100%;
	box-sizing: content-box;
	line-height: .70rem;
	background-image: url(../image/whiteturn.png);
	background-repeat: no-repeat;
}

.role i span {
	/*display: block;*/
	width: 100%;
	height: 100%;
	background-image: url(../image/whiteturn.png);
}

.role i.active {
	animation: turn .5s infinite alternate;
	background-image: url(../image/whiteturnin.png);
}

.role .me {
	background-image: url(../image/blackturn.png);
}

.role i span {
	background-image: url(../image/blackturn.png);
}

.role .me.active {
	background-image: url(../image/blackturnin.png);
}

/*.role:hover {
	background-image: radial-gradient(closest-side, rgba(255,255,255,.3) 0%, rgba(108,159,218,.1) 70%);
}*/

/******************* 操作区结束 *******************/

/******************* 弹窗开始 *******************/

.mask {
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.4);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
}

.mask.active {
	display: block;
}

.pop {
	width: 4.76rem;
	height: 2.26rem;
	font-size: .18rem;
	background-image: url(../image/pop.png);
	background-size: 100% 100%;
	border-radius: .03rem;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -2.38rem;
	margin-top: -1.13rem;
}

.pop h1 {
	font-size: .18rem;
	color: #fff;
	font-weight: 500;
	position: absolute;
	left:.27rem;
	top: .15rem;
}

.radio {
	display: none;
	margin: .90rem 0rem .35rem .15rem;
}

.radio.active {
	display: block;
}

.radio input {
	display: none;
}

.radio label {
	white-space: nowrap;
	position: relative;
	margin-left: .75rem;
	cursor: pointer;
}

.radio input+label span {
	display: block;
	width: 20px;
	height: 20px;
	border: 2px solid #418ed0;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: -30px;
	margin-top: -10px;
}

.radio input:checked+label span i {
	display: block;
	width: 10px;
	height: 10px;
	background-color: #418ed0;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -5px;
	margin-top: -5px;
}

.radio input:disabled+label {
	color: #d0d0d0;
}

.radio input:disabled+label span{
	border: .02rem solid #d0d0d0;
}

.confirmation,.process {
	display: none;
	margin: .90rem 0rem .35rem .15rem;
	text-align: center;
}

.confirmation.active,.process.active {
	display: block;
}

.regame {
	display: block;
	width: 1.56rem;
	height: .36rem;
	background-image: url('../image/regame.png');
	background-size: 100% 100%;
	color: #fff;
	border: none;
	border-radius: .05rem;
	outline: none;
	margin: auto;
	cursor: pointer;
}

.regame:active {
	color: rgba(255,255,255,.6);
	background-image: url('../image/regameClick.png');
}

.popExit {
	color: #fff;
	font-size: .18rem;
	position: absolute;
	right: .38rem;
	top: .15rem;
	cursor: pointer;
}

.winPop {
	width: 4.76rem;
	height: 2.26rem;
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -2.38rem;
	margin-top: -1.13rem;
}

.winPop.active {
	display: block;
}

.winPop.active ~ .optionPop{
	display: none;
}

.congrats {
	margin-top: .40rem;
	width: 100%;
	height: 1.00rem;
	line-height: 1.00rem;
	text-align: center;
}

.congrats i {
	font-style: normal;
	display: inline-block;
}

.congrats .me {
	display: none;
}

.congrats .me.active {
	display: inline-block;
}

.congrats .me.active ~ i {
	display: none;
}

/******************* 弹窗结束 *******************/

/******************* 滚动条hover开始 *******************/

.ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail {
    background-color: #eee;
    opacity: .3
}

.ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y{
    width: .11rem;
}

.ps>.ps__scrollbar-y-rail {
	width: .15rem;
}

.ps>.ps__scrollbar-y-rail>.ps__scrollbar-y {
	width: .06rem;
}

.ps>.ps__scrollbar-y-rail:hover>.ps__scrollbar-y,
.ps>.ps__scrollbar-y-rail:active>.ps__scrollbar-y {
	width: .11rem;
}

.ps:hover>.ps__scrollbar-y-rail:hover {
    background-color: #eee;
    opacity: 0.6;
}

.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y {
	width: .11rem;
}

/******************* 滚动条hover结束 *******************/