body, html {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.login-layout {
	width: 100%;
	height: 100%;
	background-image: linear-gradient(39deg, #188BFD 0%, #0B5DB5 100%);
}

.login-main {
	width: 100%;
	height: 90%;
	background: url(../img/bg.svg) no-repeat center center;
	-webkit-background-size: 100% 120%;
	-moz-background-size: 100% 120%;
	background-size: 100% 120%;
}

.login-main-con {
	display: table;
	width: 100%;
	height: 100%;
}

.login-panel {
	display: inline-block;
	width: 1100px;
	height: 440px;
	background: #000000b3;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 10;
}

.login-form {
	width: 90%;
	padding: 35px 20px;
	margin: -10% auto 0;
	background: rgb(255, 255, 255);
	border: 1px solid rgba(255, 255, 255, .3);
	-moz-box-shadow: 0 3px 0 rgba(12, 12, 12, .03);
	-webkit-box-shadow: 0 3px 0 rgba(12, 12, 12, .03);
	box-shadow: 0 3px 0 rgba(12, 12, 12, .03);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.logotitle {
	line-height: 13px;
	color: #fff;
}

.discription {
	font-size: 16px;
	color: #BDC5D0;
}

#errorMsg{
	font-size: 18px;
	color: red;
}

.login-form>.pui-form-group:first-child {
	padding-top: 0;
}

.login-form input[type=text], .login-form input[type=password] {
	color: #666;
	padding-left: 16px;
}

.login-form [role=username], .login-form [role=password], .login-form [role=vcode]
	{
	position: relative;
}

.login-form [role=username]>.fa, .login-form [role=password]>.fa,
	.login-form [role=vcode]>.fa {
	position: absolute;
	top: 10px;
	left: 12px;
	font-size: 15px;
}

#vcode_img {
	cursor: pointer;
	position: absolute;
	height: 38px;
	top: 4px;
	right: 8px;
	border-radius: 2px;
}

.copyright {
	position: absolute;
	bottom: 20px;
	text-align: center;
	width: 100%;
	font-size: 15px;
	font-family: Microsoft YaHei-Regular, Microsoft YaHei;
	font-weight: 400;
	letter-spacing: 3px;
	color: #FFFFFF;
	line-height: 24px;
}

.copyright p:not(:first-child){
	letter-spacing: 1px;
}

.fa-send {
	margin-top: -20px;
}

.pui-btn {
	width: 100%;
	display: block;
	margin-bottom: 10px;
}

.login-footer {
	/* height: 10%; */
	min-height: 60px;
	color: #fff;
}

.login-footer>.copyright {
	padding: 15px 0;
}

@media ( max-width : 1024px) {
	input[type=text], input[type=password] {
		padding: 12px 16px;
	}
	.pui-btn {
		padding: 12px 20px;
	}
}

@media ( max-width : 768px) {
	.login-footer {
		min-height: 80px;
	}
	.login-footer>.copyright {
		padding: 15px;
	}
}

@media ( min-width : 768px) {
	.login-form {
		width: 50%;
	}
	.pui-btn {
		width: 100px;
		display: inline-block;
		margin-right: 10px;
		margin-bottom: 0;
	}
}

@media ( min-width : 1024px) {
	.login-form {
		margin-top: 0;
		width: 36%;
	}
}

@media ( min-width : 1025px) {
	.login-form {
		margin-top: 0;
		width: 30%;
	}
	.login-form [role=username]>.fa, .login-form [role=password]>.fa,
		.login-form [role=vcode]>.fa {
		top: 10px;
	}
	#vcode_img {
		top: 0px;
	}
	.pui-btn {
		padding-top: 6px;
		padding-bottom: 6px;
		margin-right: 10px;
	}
}

@media only screen and (max-width: 1024px) and (orientation: landscape)
	{
	body, html {

	}
}