body {
	background: url(../img/login_bg.png) no-repeat fixed center top;
	background-size: cover;
	behavior: url(backgroundsize.min.htc);
}
@media (min-width:100px) and (max-width: 767px)  {
	body {
		background: url(../img/login_bg_phone.png) no-repeat fixed center top;
		background-size: cover;
	}
}
.login-header{
	margin-bottom:50px;
}
input:-webkit-autofill {
    background-color: rgba(0,0,0,0);
}

.login_logo {
	padding:10px;
}
.img-logo{
	width:300px;
}
.login_relo {
	text-align: right;
}
.login_relo a img{
	width:160px;
}

.loginput {
	border-radius: 20px;
	overflow:hidden;
}
.bg_form{
	padding:15px;
	margin-left:-15px;
	margin-right:-15px;
	background: rgba(0,0,0,0.2);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
}
.loginbtn {
	margin: 35px auto;
	padding:0;
}



button:focus {
	outline: 0;
}


.group #check {
	border: 1px #fff solid;
	border-radius: 50px;
}

#myform {
	position: relative;
}

#myform label {
	margin-bottom: 5px;
	display: block;
	text-transform: uppercase;
	font-size: 13px;
	color: #fff;
	display: inline;
}

#myform .input-group{
	margin-top:40px;
	width:100%;
	padding:0;
}

#myform input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset;
	background-color:transparent;  
    background-image: none;  
    transition: background-color 50000s ease-in-out 0s;
    color:#fff !important;
}
#myform #check {
	border-radius: 50px;
	border: 1px #fff solid;
}

#loginBtn {
	font-size: 16px;
	color: #fff;
	border-radius: 50px;
	width: 100%;
	height: 50px;
	background: none;
	border: 1px #fff solid;
	position: relative;
}

#loginBtn:hover{
	background-color:#3e7883;
	border:1px solid #3e7883;
}

.loginbtn-loading{
	background-color:#3e7883;
	border:1px solid #3e7883;
}

#myform .forgetpassword {
	margin-top: 41px;
    text-align: right;
    padding:0;
}

#myform .forgetpassword a {
	text-decoration: none;
	color: #fff;
	text-style: none;
	font-size:13px;
}

.login-button {
	border-radius: 50px;
	width: 100%;
	height: 50px;
	border: 1px #fff solid;
	cursor: pointer;
	margin-left: 30px;
	margin-top: 40px;
}

.login-button span {
	color: #fff;
	text-align: center;
	padding-left: 45%;
	line-height: 50px;
}

.group {
	margin-top: 35px;
	padding:0;
}

.loginmessage {
	display: block;
	margin-top: 10px;
	font-size: 16px;
	color: #fff;
	margin-left: 35px;
}

.loginput .input-group-addon{
	background: none;
	border:1px solid #fff;
	margin:0 auto;
	height:50px;
	position:relative;
	padding:0;
	width:100%;
}
.input-group-addon .ie8_info{
	position:absolute;
	left:55px;
	top:17px;
	color:#fff;
	display:none;
}
.loginput .input-group-addon input{
	width:80%;
	height:49px;
	position:absolute;
	z-index:100;
	left:50px;
	top:0;
	color:#fff;
	line-height:50px;
	margin:0;
	outline:none;
	padding-left:5px;
	border-left:1px solid #fff;
	border-top:none;
	border-right:none;
	border-bottom:none;
	background:transparent!important;
}
.loginput .input-group-addon select{
	width:80%;
	height:49px;
	position:absolute;
	z-index:100;
	left:50px;
	top:0;
	color:#E08801;
	line-height:50px;
	margin:0;
	outline:none;
	padding-left:5px;
	border-left:1px solid #fff;
	border-top:none;
	border-right:none;
	border-bottom:none;
	background:transparent!important;
}


.loginput .input-group-addon input::-webkit-input-placeholder{
            color:#f3f3f3!important;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:#f3f3f3!important;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:#f3f3f3!important;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:#f3f3f3!important;
        }
.loginput .input-group-addon img{
	width:30px;
	height:32px;
	position:absolute;
	left:10px;
	top:9px;
}
/*在这里建个容器先，10个像素边框*/
.circle {
	background-color:#a59182;
    width: 20px;
    border: 2px solid skyblue;
    height: 20px;
    border-radius: 20px;
    margin: 20vh auto;/*20vh 很有意思的单位，感兴趣就百度吧*/
    position: relative;
    animation: roate 1.5s infinite linear;/*这里是给动画调用的时的参数*/
    display: inline-block;
    position: absolute;
    top: -115px;
    left: 200px;
}

/*旋转360度的设定，动画开始时0%，为0度，到动画结束时100%，为360度*/
@keyframes roate {
    0% {
        transform: rotateZ(0)
    }
    100% {
        transform: rotateZ(360deg)
    }
}


/*这个是渐变半透明盖在circle上的，z-index=2*/
.circle::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 2;
    /* background-image: linear-gradient(to left, #fefefe, rgba(255, 255, 255, .1)); */
}


/*这个盖最上层，遮住一半的圆，半圆效果就有了*/
.circle::before {
    content: "";
    display: block;
    width: 20px;
    height: 10px;
    position: absolute;
    z-index: 3;
    background-color: #a59386;
    /* top: -10px; */
    left: -10px;
}