/* mixin*/
/* virible */
/* styles */
html,
body {
  width: 100%;
  height: 100%; }

.clear:after {
  display: block;
  content: "";
  clear: both; }

.center_wrap {
  width: 1160px;
  margin: 0 auto; }

.top_10 {
  margin-top: 10px; }

.hide {
  display: none; }

a {
  color: #41A9FF;
  text-decoration: none; }

.bbd_col {
  margin: 0 -8px; }
  .bbd_col:after {
    content: "";
    display: block;
    clear: both; }
  .bbd_col > * {
    display: block;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 8px; }

.col2 {
  width: 50%; }

.col3 {
  width: 33.33333%; }

.col4 {
  width: 25%; }

.col5 {
  width: 20%; }

.col6 {
  width: 16.666%; }

body {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: "PingFangSC-Regular"; }

.login_container {
  position: absolute;
  top: 50%;
  margin-top: -300px;
  left: 50%;
  margin-left: -600px;
  width: 1200px;
  height: 600px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden; }
  .login_container::after {
    content: "";
    display: block;
    clear: both; }
  .login_container [class$="_container"] {
    float: left; }
  .login_container .left_container {
    width: 740px;
    height: 100%;
    text-align: center;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#EEEDFF), to(#F5F5FF));
    background-image: -o-linear-gradient(top, #EEEDFF 0%, #F5F5FF 100%);
    background-image: linear-gradient(180deg, #EEEDFF 0%, #F5F5FF 100%); }
    .login_container .left_container > img {
      width: 618px;
      margin: 0 auto;
      display: inline-block;
      margin-top: 48px; }
  .login_container .right_container {
    width: 459px;
    height: 100%; }
    .login_container .right_container .logo_wrap {
      margin-top: 130px;
      text-align: center; }
      .login_container .right_container .logo_wrap > img {
        width: 54px; }
      .login_container .right_container .logo_wrap > h3 {
        font-family: "PingFangSC-Medium";
        font-size: 20px;
        color: #000000;
        letter-spacing: 0;
        margin-top: 10px; }
    .login_container .right_container .form_wrap {
      margin: 0 auto;
      margin-top: 40px;
      width: 340px; }
      .login_container .right_container .form_wrap .form_item .input_container {
        position: relative; }
        .login_container .right_container .form_wrap .form_item .input_container > input {
          width: 100%;
          height: 50px;
          padding-left: 48px;
          padding-right: 15px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          outline: none;
          border: 0;
          background: #FFFFFF;
          border: 1px solid #E5E5E5;
          border-radius: 4px;
          font-size: 16px;
          color: #0D0D0D; }
          .login_container .right_container .form_wrap .form_item .input_container > input:focus {
            border: 1px solid #0F71FF;
            -webkit-box-shadow: 0 0 0 2px rgba(15, 113, 255, 0.3);
            box-shadow: 0 0 0 2px rgba(15, 113, 255, 0.3); }
        .login_container .right_container .form_wrap .form_item .input_container .err_input {
          border: 1px solid #ff2f2f;
          -webkit-box-shadow: 0 0 0 2px rgba(255, 47, 47, 0.3);
          box-shadow: 0 0 0 2px rgba(255, 47, 47, 0.3); }
          .login_container .right_container .form_wrap .form_item .input_container .err_input:focus {
            border: 1px solid #ff2f2f;
            -webkit-box-shadow: 0 0 0 2px rgba(255, 47, 47, 0.3);
            box-shadow: 0 0 0 2px rgba(255, 47, 47, 0.3); }
        .login_container .right_container .form_wrap .form_item .input_container > label {
          position: absolute;
          top: 16px;
          left: 16px; }
          .login_container .right_container .form_wrap .form_item .input_container > label > img {
            width: 16px; }
      .login_container .right_container .form_wrap .form_item .err_tip {
        padding-left: 16px;
        padding-bottom: 2px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #FF2F2F;
        letter-spacing: 0; }
      .login_container .right_container .form_wrap .btn {
        width: 100%;
        height: 50px;
        outline: none;
        border-style: none;
        border-radius: 4px;
        font-size: 18px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
        cursor: pointer; }
      .login_container .right_container .form_wrap .login_btn {
        background: #0F71FF; }
        .login_container .right_container .form_wrap .login_btn:focus {
          background: rgba(15, 113, 255, 0.9); }
      .login_container .right_container .form_wrap .btn_disbled {
        background: #E5E5E5;
        color: #999999; }
        .login_container .right_container .form_wrap .btn_disbled:focus {
          background: #E5E5E5; }

.clear::after {
  content: "";
  display: block;
  clear: both; }

.hide {
  display: none; }