*{
	margin: 0;
	padding: 0;
}
html{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url(/images/sx/login/html_background.png);
	background-size: 100% 100%;
	box-sizing: content-box;	
	min-width: 12rem;
}
.outer-layer{
	height: 5.8rem;
	width: 10.20rem;
	border-radius: 10px;
	overflow: hidden;
	box-shadow:0px 4px 40px 0px rgba(0,114,220,0.2);
}
/*黑色阴影*/
.outer-layer-black{
	box-shadow:0px 4px 40px 0px rgba(0,0,0,0.2);
}
.outer-layer > div{
	display: inline-block;
}
.outer-layer .content-left{
	height: 100%;
	width: 4.4rem;
	background:-webkit-gradient(linear, 100% 0, 0 0, from(rgba(24,186,255,1)), to(rgba(24,144,255,1)));
	background:-webkit-linear-gradient(180deg, rgba(24,186,255,1) 0%, rgba(24,144,255,1) 100%);
	background:-moz-linear-gradient(180deg, rgba(24,186,255,1) 0%, rgba(24,144,255,1) 100%);
	background:-o-linear-gradient(180deg, rgba(24,186,255,1) 0%, rgba(24,144,255,1) 100%);
	background:linear-gradient(180deg, rgba(24,186,255,1) 0%, rgba(24,144,255,1) 100%);
	text-align: center;	
	position: relative;
}
.outer-layer .content-left img:nth-of-type(1){
	width: 1.3rem;
	height: 1.2rem;
	margin-top: .75rem;
	position: relative;
	z-index: 2;
}
/*默认蓝色*/
.outer-layer .content-left img:nth-of-type(2){
	width: 4rem;
	height: 3.03rem;
}
/*皮肤黑*/
.skin_black img:nth-of-type(2){
	position: absolute;
	left: 0;
	top: 0;
	height: 100%!important;
	width: 100%!important;
}

.outer-layer .content-rigth{
	background-color: #FFFFFF;
	width: 5.8rem;
	height: 5.8rem;
	float: right;
	/*text-align: center;*/
	display: flex;
	flex-flow: column;
	/*justify-content: center;*/
	text-align: center;
}
.outer-layer .content-rigth .content-rigth-title{
	margin-top: .8rem;
	color: #333333;
	font-size: .32rem;
	display: block;
	font-family:"PingFang-SC-Bold";
	font-weight:bold;
}
.outer-layer .content-rigth .content-rigth-form{
	width: 3.69rem;
	margin: 0 auto;
	margin-top: .49rem;
}
.outer-layer .content-rigth .content-rigth-form .content-rigth-nav{
	display: flex;
	width: 2.72rem;
	height: .50rem;	
	margin: 0 auto;
}
.outer-layer .content-rigth .content-rigth-form .content-rigth-nav div{
	color: #9A9A9A;
	font-size: .16rem;
	height: 100%;
	flex: 50%;
	line-height: .50rem;	
	cursor: pointer;
	transition: all 0.3s;
	/*transition: color 0.5s;*/
	
}
/*默认蓝色*/
.outer-layer .content-rigth .content-rigth-form .content-rigth-nav .selection-default{
	color: #1891FF;
	font-size: .18rem;
	border-bottom: 2px solid #1891FF;
}
/*皮肤黑*/
.outer-layer .content-rigth .content-rigth-form .content-rigth-nav .selection-black{
	color: #343434;
	font-size: .18rem;
	border-bottom: 2px solid #343434;
}
.outer-layer .content-rigth .content-rigth-form .form{
	width: 3.68rem;
}
.outer-layer .content-rigth .content-rigth-form .form input{
	display: block;
	width: 100%;
	height: .4rem;
	outline: none;
	padding-left: .36rem;
	border: none;
	border: 1px solid #D9D9D9;
	box-sizing: border-box;
	margin-top: .24rem;
	border-radius:4px;
}
.outer-layer .content-rigth .content-rigth-form .form input::-webkit-input-placeholder{
	color: #D9D9D9;
}
.outer-layer .content-rigth .content-rigth-form .form input:nth-of-type(1){
	background: url(/images/sx/login/user_code.png) no-repeat;
	background-size: .16rem .16rem;
	background-position-y: center;	
	background-position-x: .09rem;
}
.outer-layer .content-rigth .content-rigth-form .form input:nth-of-type(2){
	background: url(/images/sx/login/passwrod.png) no-repeat;	
	background-size: .16rem .16rem;	
	background-position-y: center;	
	background-position-x: .09rem;	
}
.outer-layer .content-rigth .content-rigth-form .form input:nth-of-type(3){
	padding-left: 0;
	background-color: #1891FF;
	border: none;
	color: #FFFFFF;
	margin-top: .48rem;
	cursor: pointer;
	transition: background-color 0.5s;
}
.outer-layer .content-rigth .content-rigth-form .form-black input:nth-of-type(3){
	background-color: #343434!important;
}
/*.outer-layer .content-rigth .content-rigth-form .form input:nth-of-type(3):hover{
	background-color: #137ad7;
}*/
.outer-layer .content-rigth .content-rigth-form .form .code{
	cursor: pointer;
	display: flex;
	/*justify-content: space-between;*/
	align-items: center;
	height: .4rem;
	margin-top: .12rem;
}
.outer-layer .content-rigth .content-rigth-form .form .code input{
	background: url(/images/sx/login/code.png) no-repeat;
	background-size: .16rem .16rem;
	background-position-y: center;
	background-position-x: .09rem;
	width: 2.5rem!important;
}
.outer-layer .content-rigth .content-rigth-form .form .code img{
	width: 1.08rem;
	height: .39rem;
	margin-top: .24rem;
}