.clear::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clear {
    clear: both;
}
html,body
{
	height:100%;
}
body
{
	background:url(../images/login-bg.jpg) no-repeat scroll center center / cover;
	overflow:hidden;
	min-width:240px;
}
.wg-media
{
	position: relative;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.4);
}
.mlogin-title
{
	background:#3897d3 url("../images/login-logo.png") no-repeat scroll 88% center;
    padding: 2rem;
    position: relative;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.5rem;
    color: #fff;
}
.mlogin-title .rtl
{
	 position: absolute;
	 right: 0rem;
	 top: 0rem;
	 width: 1rem;
	 display: inline-block;
	 height:100%; width:145px;
}
.mlogin-title .rtl a
{
	 display:block;
	 width:100%;
	 height:100%;
}
.mlogin-main
{
    padding: 2rem;
    position: relative;
    font-size: 1rem;
    background: #f5f5f5;
}
.mlogin-main .item
{
    margin-bottom: 1rem;
    position: relative;
    height: 2rem;
    border: 1px solid #ccc;
    border-radius:0.3rem;
    padding: 0.5rem 4em 0.5rem 1.5rem;
}
.mlogin-main .item .wg-ipt
{
	border: 0 none;
    display: block;
    height: inherit;
    width: 100%;
    background: none;
}
.mlogin-main .item .code-btn
{
	background-color: #f0f0f0;
    border: 1px solid #e5e5e5;
    font-size: 1em;
    height: 100%;
    padding: 0 0.5em;
    position: absolute;
    right: 0;
    top: 0;
}
.mlogin-main .item1
{
    margin-bottom: 1rem;
    position: relative;
    height: 3rem;
    border-radius:0.3rem;
    width: 35%;
    text-align: center;
    float: left;
}
.mlogin-main .d1
{
     line-height: inherit;
     text-align: left;
     padding: 0 5%;
     width: 50%;
     line-height: 3rem;
     float:left;
}
.mlogin-main .item1 .wg-ipt
{
	border: 0 none;
    display: block;
    height: inherit;
    background: #3897d3;
    width: 100%;
    font-size: inherit;
    border-radius:0.3rem;
    color: #fff;
}
.mlogin-main .item2
{
    margin-bottom: 1rem;
    position: relative;
    height: 3rem;
    overflow:hidden;
}
.mlogin-main .item2 .ipt-submit, .mlogin-main .item2 .back-login
{
	border: 1px solid #3897d3;
	background: #3897d3 none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0.3rem;
    color: #fff;
    display: block;
    font-size: inherit;
    height: inherit;
    box-sizing: border-box;
}
.mlogin-main .item2 .ipt-submit
{
	width:46%;
    float:left;
}
.mlogin-main .item2 .back-login
{
	width:46%;
    float:right;
    line-height:3em;
    text-align:center;
    background-clip: padding-box;
    background-color: #fdfdfd;
    border: 1px solid #cacccd;
    color:#3897d3;
}
.mlogin-main .i-icon
{
	width: 1rem;
	height: 1rem;
	top: 1rem;
	right: 1rem;
}
.mlogin-main .user-name-icon 
{
	background:url("../images/icons.png") no-repeat scroll 0 0;
}
.mlogin-main .user-password-icon
{
	background:url("../images/icons.png") no-repeat scroll -32px 0;
}

@media (min-width:1440px){
.wg-media {
		margin: 11% auto 0;
		width: 30%;
	}
}

@media (max-width:1440px){
.wg-media {
		margin: 11% auto 0;
		width: 30%;
	}
}
@media (max-width:1366px){
	.wg-media{
		margin: 7% auto 0;
		width: 35%;
	}
}
@media (max-width:1280px){
	.wg-media{
		margin: 7% auto 0;
		width: 33%;
	}
}
@media (max-width:1024px){
	.wg-media{
		margin: 12% auto 0;
		width: 47%;
	}
}
@media (max-width:768px){
	.wg-media{
		margin: 13% auto 0;
		width: 65%;
	}
}
@media (max-width:640px){
	.wg-media{
		margin: 13% auto 0;
		width: 67%;
	}
	.mlogin-main .item1
	{
		width: 100%;
	}
}
@media (max-width:480px){
	.wg-media{
		margin: 15% auto 0;
		width:90%;
	}
	.mlogin-main .item1
	{
		width: 100%;
	}
}
@media (max-width:320px){
	.wg-media  {
		margin:8% auto 0;
		width:90%;
	}
	.mlogin-main .item1
	{
		width: 100%;
	}
}