html {
  font-family: Arial, Sans-Serif, Verdana, Helvetica;
  font-size: 12px;
  margin: 0px;
  padding: 0px;
  background: #F7F7F7;
  color: #6f7583;
}

body {
  padding: 0px;
  margin: 0px;
  background: #F7F7F7;
  text-align: left;
  color: #6f7583;
}

form {
  margin: 0;
}

input[type=button], input[type=submit], input[type=reset], input[type=text], input[type=password] {
  -webkit-appearance: none;
  outline: 0;
  border-radius: 0;
}

a, a:link, a:visited {
  text-decoration: none;
  outline: none;
  border: none;
  color: #0f51b2;
  font-weight: bold;
}

a:hover {
  color: #333;
}

#main_bg, #login_form_inner {
  position: absolute;
  height: 440px;
  width: 100%;
  top: 50%;
  margin-top: -220px;
}

#main_bg {
  position: absolute;
  width: 100%;
  top: 50%;
}

#login_bg {
  position: absolute;
  width: 800px;
  height: 100%;
  left: 50%;
  margin-left: -400px;
}

#login_form_outer {
  position: absolute;
  right: 0px;
  width: 300px;
  height: 100%;
  background: #ff7800;
}

#copyright {
  position: absolute;
  width: 100%;
  bottom: 10px;
  color: #FFF;
  text-align: center;
  z-index: 1;
}

#copyright a, #copyright a:visited {
  color: #fff;
}

#copyright a:hover {
  color: #ccc;
}

#beian {
  position: absolute;
  left: 20px;
  right: 0;
  bottom: 10px;
  color: #999;
  z-index: 1;
  bottom: 10px;
}

#beian a, #beian a:visited {
  color: #999;
  font-weight: normal;
  margin-right: 10px;
}

#beian a:hover {
  color: #333;
  font-weight: normal;
}

#login_form_inner {
  background: #F4F4F4;
  z-index: 2;
}

#logo {
  padding: 20px 0;
  text-align: center;
  overflow: hidden;
}

#logo img {
  height: 60px;
  border: none;
  outline: none;
}

#login_form {
  padding: 0 20px;
}

#forget_pass {
  margin: 10px 0;
}

.login_input_wrap {
  border: 1px solid #DFDFDF;
  border-bottom: 1px solid #DCDCDC;
  padding: 0 0 0 30px;
  margin: 5px 0 10px 0;
  overflow: hidden;
}

.username_wrap {
  background: #ebebeb url('username.png') no-repeat 3px center;
}

.password_wrap {
  background: #ebebeb url('password.png') no-repeat 3px center;
}

.captcha_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  margin: 0;
  background: #ebebeb url('captcha.png') no-repeat 3px center;
}

.captcha_wrap_container {
  position: relative;
  overflow: hidden;
  height: 45px;
}

#captcha-input {
  width: 100%;
  height: 35px;
  line-height: 35px;
  outline: none;
  border: none;
  padding: 0 5px;
  border-left: 1px solid #DFDFDF;
}

#captcha-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 35px;
  border: 1px solid #bbb;
  background: #FFF;
  cursor: pointer;
}

input.login_input {
  width: 100%;
  height: 35px;
  line-height: 35px;
  outline: none;
  border: none;
  padding: 0 5px;
  border-left: 1px solid #DFDFDF;
  box-sizing: border-box;
}

#login_message {
  overflow: hidden;
  text-align: center;
}

#login_btn {
  background: #00a0e9;
  padding: 12px 15px;
  width: 200px;
  border: none;
  outline: none;
  color: #FFF;
  cursor: pointer;
}

#message {
  padding: 10px 0px;
  min-height: 30px;
  overflow: hidden;
  color: #EE0000;
}

#rememberMe {
  margin: 5px 0;
}

.rememberMe_checkbox, .rememberMe_label {
  vertical-align: middle;
  outline: none;
}

#qr {
  position: absolute;
  display: none;
  border: 1px solid #CCC !important;
  padding: 10px;
  top: -80px;
  right: -160px;
  background: #FFF;
}

.app_btn {
  position: absolute;
  width: 100%;
  bottom: 40px;
  color: #FFF;
  text-align: center;
  padding: 5px 0;
  z-index: 9999;
}

.ios_btn, .android_btn, .webapp_btn {
  display: inline-block;
  _display: inline;
  width: 80px;
  height: 25px;
  line-height: 25px;
  color: #fff;
  background-position: 10px center;
  background-repeat: no-repeat;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 12px;
  border: 1px solid #fff;
  vertical-align: middle;
}

.ios_btn:hover, .android_btn:hover, .webapp_btn:hover {
  background-color: #fff;
  color: #000;
}

.ios_btn {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.android_btn {
  border-left: none;
}

.webapp_btn {
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.ios_qrcode, .android_qrcode, .webapp_qrcode {
  display: none;
  position: absolute;
  top: -180px;
  left: 50%;
  margin-left: -74px;
  background: #fff;
  border: 1px solid #bbb;
  padding: 10px;
  color: #000;
}

.qrcode_tip {
  padding-top: 5px;
}

.qrcode_tip, .qrcode_tip .icon {
  vertical-align: middle;
}

.qrcode_scan {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 30px;
  height: 30px;
  background: url(qrcode.png) no-repeat right top;
}

#qrcode {
  position: absolute;
  top: 40px;
  right: 40px;
  padding: 10px;
  background: #FFF;
  text-align: center;
  display: none;
  border-radius: 2px;
}

#qrcode_login_btn {
  background: url('../../images/qr.gif') no-repeat right top;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 9999;
}

#qrcode_container {
  position: absolute;
  width: 300px;
  height: 400px;
  left: 50%;
  top: 50%;
  padding: 50px;
  margin-left: -150px;
  margin-top: -200px;
  background: #fff;
}

#qrcode_container.qrcode_container-2 {
  width: 660px;
  margin-left: -330px;
}

#wx_qrcode_qiye {
  float: left;
}

#dingding_qrcode_container {
  float: right;
}

#dingding_qrcode_title, #welink_qrcode_title {
  line-height: 24px;
  margin: 0 auto 5px auto;
  color: #0082EF;
  font-size: 20px;
  text-align: center;
}

#dingding_qrcode_title .icon, #welink_qrcode_title .icon {
  margin-right: 8px;
  font-size: 24px;
  line-height: 24px;
  vertical-align: middle;
}

table.thirdparty-login-list {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 10px auto 0 auto;
  table-layout: fixed;
  empty-cells: show;
  border-collapse: collapse;
  width: 100%;
}

table.thirdparty-login-list  td {
  vertical-align: middle;
  text-align: center;
  height: 30px;
  text-align: center;
}

table.thirdparty-login-list  td a {
  font-weight: normal;
  font-size: 10px;
}

table.thirdparty-login-list  td a span.icon {
  font-size: 15px;
  vertical-align: middle;
}

#whole_qrcode_container {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #F4F4F4;
}

.login_message_bottom {
  position: absolute !important;
  left: 0;
  right: 0;
  top: 540px;
}

.login_message_bottom #message {
  color: #fff;
}