@charset "utf-8";



*{
    margin: 0px;
    padding: 0px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a{
    text-decoration: none;
}
html{
    width: 100%;
    height: 100%;
    overflow-x:hidden; 
    overflow-y:auto;
}
body{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
.page-bg{
     background:url(../images/bg.jpg) no-repeat left top;
    background-size: cover;
    overflow-x: hidden;
}
@media ( min-width : 1300px) {
	.page-bg {background-size: 100% 100%;}
}


.page-box{
    margin: 60px auto 0 auto;
    box-sizing: border-box;
    width:80%;
    max-width:1000px;
    min-height:420px;
    position: relative;
    z-index: 1;
}


.wxapp-qrcode {
    position:absolute;
    top:50%;
    left:10px;
    display:block;
    width:174px;
    height:188px;
    margin-top:-300px;
    background:url(../images/wxapp-qrcode.png) no-repeat 50%;
   }


.sys-a-right {
    position:absolute;
    top:50%;
    right:30px;
    display:block;
    width:90px;
    height:300px;
    margin-top:-300px;
    background:url(../images/sys-a-right.png) no-repeat 50%;
    -webkit-animation:rotate-top-down 1s linear infinite;
    animation:rotate-top-down 1s linear infinite;
   }
   @-webkit-keyframes rotate-top-down {
    0% {     transform:translateX(0)    }
    25% {     transform:translateX(5px)    }
    50% {     transform:translateX(10px) scale(1.1,.9)    }
    75% {     transform:translateX(5px)    }
    to {     transform:translateX(0)    }
   }
   @keyframes rotate-top-down {
    0% {     transform:translateX(0)    }
    25% {     transform:translateX(5px)    }
    50% {     transform:translateX(10px) scale(1.1,.9)    }
    75% {     transform:translateX(5px)    }
    to {     transform:translateX(0)    }
   }
   @-webkit-keyframes rotate-top-down {
    0% {     transform:translateY(0)    }
    25% {     transform:translateY(5px)    }
    50% {     transform:translateY(10px)    }
    75% {     transform:translateY(5px)    }
    to {     transform:translateY(0)    }
   }
   @keyframes rotate-top-down {
    0% {     transform:translateY(0)    }
    25% {     transform:translateY(5px)    }
    50% {     transform:translateY(10px)    }
    75% {     transform:translateY(5px)    }
    to {     transform:translateY(0)    }
   }

   @media ( max-width : 1300px) {
        .wxapp-qrcode{display: none;}
        .sys-a-right {display: none;}

    }

    
    .logo-box{text-align:center;margin-bottom:40px;}
    .logo-box img{max-width: 100%;}
    
    .footer-box{position: absolute;left:20px;bottom: 20px;text-align: center;line-height: 20px;max-width: 320px;;}
    .footer-box div,.footer-box a{color:#f90;font-size: 12px;font-weight: bold;}
    

.form-box{
   text-align: center;
}
.form-box .form-container {
  
    max-width: 800px;
    height: 500px;
    background: url(../images/form3.png) no-repeat center 0;
    background-size: 100% 100%;
    margin:0 auto;
}

.loginfont {
    width: 100%;
    height: 100px;
    font-size: 22px;
    text-align: center;
    line-height: 100px;
    color: #fff;
  }
 

  .login{
    margin: 0px auto;
    padding: 40px;
    width: 88%;
    max-width: 540px;;
    box-sizing: border-box;
}


.login .username-row {padding-left:70px;background: url(../images/username.png) no-repeat left center;background-size: 40px;}

.login .password-row {padding-left:70px;background: url(../images/password.png) no-repeat left center;background-size: 40px;}

.login .verify-row {padding-left:70px;background: url(../images/verify.png) no-repeat left center;background-size: 40px;}



.login input[type=text],
.login input[type=file],
.login input[type=password],
.login input[type=email], select {
    border: 1px solid #DCDEE0;
    vertical-align: middle;
    border-radius: 3px;
    height: 50px;
    padding: 0px 16px;
    font-size: 14px;
    color: #555555;
    outline:none;
    width:100%;
    box-sizing: border-box;
}
.login input[type=text]:focus,
.login input[type=file]:focus,
.login input[type=password]:focus,
.login input[type=email]:focus, select:focus {
    border: 1px solid #fa7505;
}
.login input[type=submit],
.login input[type=button]{
    display: inline-block;
    vertical-align: middle;
    padding: 12px 24px;
    margin: 0px;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: #ffffff;
    background-color: #fa7505;
    border-radius: 3px;
    border: none;
    -webkit-appearance: none;
    outline:none;
    width:100%;
}



.login hr.hr20 {
    height: 30px;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
}


.layui-input:focus, .layui-textarea:focus {
    border-color: #fa7505!important;
}


.login .checkbox label{float:left;margin-right:6px;}
.login .checkbox span{font-size:12px;position:relative;top:-2px;color:#666;}


#login_error{font-size:12px;color:#fa7505;display:none;}


  
#slide_box {
	width: 100%;
	height: 42px;
	text-align: center;
	line-height: 42px;
	font-size: 14px;
	color: #717171;
	background-color: #e8e8e8;
	border: none;
	border-radius:42px;
}

#slide_xbox {
	width: 50px;
	height: 42px;
	text-align: center;
	line-height: 42px;
	font-size: 14px;
	color: #fff;
	position: absolute;
	background: rgba(250,117,5,0.87);
	border-radius: 44px 43px 43px 43px;
}

#btn {
	cursor: pointer;
	width: 50px;
	height: 42px;
	float: right;
	-webkit-box-shadow: 0px 0px 15px 0px #ddd;
	-moz-box-shadow: 0px 0px 15px 0px #ddd;
	box-shadow: 0px 0px 15px 0px #ddd;
	color: #8a8c97;
	background-size: 100% 100%;
	border-radius: 100%;
	
}

.slideroff {
	background:#fff url(../images/slider.png) 0 0 no-repeat;
}

.slideron {
	background:#fff url(../images/sliderok.png) 0 0 no-repeat;
}

#btn > .iconfont {
	font-size: 20px;
}