body {
      margin: 0;
      padding: 0;
  }

  .login-box {
      position: relative;
  }

  .login-box .login-top {
      display: none;
  }

  .login-box .login-wrap {
      height: 100vh;
      background: url(/sso/assets/image/login-bg3-dc16f0843d5452f54da6bd28421637b7.png) no-repeat center center;
      background-size: 100% 100%;
      box-sizing: border-box;
      position: relative;
  }

  .login-box .login-wrap .login-main {
      width: 400px;
      padding: 24px;
      border-radius: 8px;
      border: 1px solid #FFF;
      background: #FFF;
      box-shadow: 0px 4px 24px 0px rgba(17, 47, 81, 0.08);
      box-sizing: border-box;
      z-index: 1000;
      position: absolute;
      top: 208px;
      right: 360px;
  }

  .login-box .login-wrap .mask2 {
      display: none;
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.3) 0%;
      z-index: 1001;
  }

  .login-box .login-wrap .login-main .logo-wrap {
      text-align: center;
  }

  .login-box .login-wrap .login-main .logo-wrap .logo {
      width: 60px;
      height: 60px;
  }

  .login-box .login-wrap .login-main .logo-wrap .logo-title {
      color: #1D1D1F;
      font-size: 18px;
      font-weight: 500;
      margin-top: 12px;
  }

  .login-box .login-wrap .login-main .login-content {
      padding: 24px 0;
  }

  .login-box .login-wrap .login-main .login-content .login-input-wrap {
      margin-bottom: 20px;
  }

  .login-box .login-wrap .login-main .login-content .login-input-wrap:last-child {
      margin-bottom: 0;
  }

  .login-box .login-wrap .login-main .login-content .login-input-wrap .login-input {
      position: relative;
  }

  .login-box .login-wrap .login-main .login-content .login-input-wrap .error-tips {
      color: #FF1616;
      font-size: 12px;
      margin-top: 4px;
  }

  .login-box .login-wrap .login-main .login-content .login-input input {
      height: 48px;
      padding: 0px 12px 0 40px;
      border-radius: 6px;
      border: 1px solid #D9D9D9;
      background: #FFF;
      width: 100%;
      box-sizing: border-box;
      color: #1D1D1F;
      font-size: 16px;
  }

  .login-box .login-wrap .login-main .login-content .login-input input:focus {
      outline: none;
  }

  .login-box .login-wrap .login-main .login-content .login-input img {
      position: absolute;
      width: 24px;
      height: 24px;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
  }

  .login-box .login-wrap .login-main .login-content .login-input .icon-eye-close {
      width: 16px;
      height: 16px;
      right: 12px;
      left: unset;
      cursor: pointer;
  }

  .login-box .login-wrap .login-main .login-content .login-input .icon-eye-open {
      display: none;
      width: 16px;
      height: 16px;
      right: 12px;
      left: unset;
      cursor: pointer;
  }

  .login-box .login-wrap .login-main .login-content .login-input .code-img {
      position: absolute;
      right: 6px;
      width: 62px;
      height: 36px;
      top: 50%;
      transform: translateY(-50%);
  }

  .login-box .login-wrap .agreement {
      position: relative;
  }

  .login-box .login-wrap .agreement input {
      margin-right: 4px;
      vertical-align: middle;
      cursor: pointer;
  }

  .login-box .login-wrap .agreement #myCheckbox {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 14px;
      height: 14px;
      border: 1px solid #dbdbdb;
      border-radius: 4px;
      background-color: #fff;
  }

  .login-box .login-wrap .agreement #myCheckbox:checked {
      background-color: #418BE0;
      border-color: #418BE0;
  }

  .login-box .login-wrap .agreement #myCheckbox:after {
      content: '\2713';
      color: #fff;
      font-size: 10px;
      font-weight: 600;
      margin-left: 2px;
      display: block;
  }

  .login-box .login-wrap .agreement .agreement-tip {
      display: none;
      position: absolute;
      padding: 8px 12px;
      border-radius: 4px;
      background: #212633;
      color: #fff;
      font-size: 13px;
      top: -42px;
      left: -24px;
  }

  .login-box .login-wrap .agreement .agreement-tip::after {
      content: '';
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #212633;
      bottom: -5px;
      left: 28px;
  }

  .login-box .login-wrap .agreement span {
      display: inline-block;
      vertical-align: middle;
      color: #6C6C73;
      font-size: 13px;
  }

  .login-box .login-wrap .agreement .privacy {
      color: #418BE0;
      font-size: 13px;
      cursor: pointer;
  }

  .login-box .login-wrap .login-button {
      width: 100%;
  }

  .login-box .login-wrap .login-button button {
      width: 100%;
      height: 40px;
      text-align: center;
      border-radius: 6px;
      background: #418BE0;
      border: none;
      margin-top: 24px;
      color: #FFF;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
  }

  .login-box .login-wrap .illustrate {
      color: #8C8C8C;
      font-size: 12px;
      line-height: 18px;
      margin-top: 32px;
      z-index: 1000;
      position: absolute;
      width: 400px;
      top: 692px;
      right: 360px;
  }

  .login-box .privacy-content {
      display: none;
      position: fixed;
      top: 164px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1002;
      background: #fff;
      width: 800px;
      border-radius: 8px;
      border: 1px solid var #E9E9E9;
      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.10);
  }

  .login-box .privacy-content .privacy-title {
      height: 51px;
      padding: 14px 14px 14px 24px;
      border-bottom: 1px solid #E9E9E9;
      text-align: center;
      color: #1D1D1F;
      font-size: 16px;
      font-weight: 600;
      box-sizing: border-box;
  }

  .login-box .privacy-text {
      padding: 16px 24px;
      height: 480px;
      box-sizing: border-box;
      overflow-y: scroll;
      line-height: 28px;
  }

  .login-box .privacy-text span {
      color: #1D1D1F;
      font-size: 16px;
      text-indent: 32px;
      display: inline-block;
  }

  .login-box .privacy-text .text-title {
      text-align: center;
      font-size: 24px;
      margin-bottom: 12px;
      font-weight: 600;
  }

  .login-box .privacy-text .third-title {
      color: #1D1D1F;
      font-size: 18px;
      font-weight: 600;
      line-height: 28px;
      text-indent: 32px;
  }

  .login-box .privacy-button {
      padding: 16px 0px;
      text-align: center;
      border-top: 1px solid #E9E9E9;
  }

  .login-box .privacy-button button {
      border-radius: 6px;
      background: #418BE0;
      width: 169px;
      height: 48px;
      border: none;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
  }

  .login-box ::-webkit-scrollbar {
      width: 6px;
  }

  .login-box ::-webkit-scrollbar-thumb {
      background-color: rgb(204, 204, 204);
      border-radius: 6px;
  }


  @media only screen and (min-width: 1px) and (max-width: 926px) {
      body {
          margin: 0;
          padding: 0;
      }

      .login-box {
          position: relative;
      }

      .login-box .login-top {
          width: 100%;
          height: 44px;
          box-shadow: 0px -0.5px 0px 0px #EBEBEB inset;
          background: rgb(237, 237, 237);
          text-align: center;
          position: relative;
          display: block;
      }

      .login-box .login-top span {
          display: inline-block;
          padding: 10px 0 12px 0;
      }

      .login-box .login-top img {
          width: 24px;
          height: 24px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
      }

      .login-box .login-top .close {
          left: 12px;
      }

      .login-box .login-top .more {
          right: 10px;
      }

      .login-box .login-wrap {
          background: url(/sso/assets/image/login-bg-426ea4ff5188eceb7ab23b272b9162d6.png) no-repeat;
          /* background: url(/sso/assets/image/login-bg2-8fafe48d16601e9cdbe68c93d3b710aa.png) no-repeat; */
          background-position: 0 -84px;
          background-size: 100% 100%;
          padding: 64px 24px 21px 24px;
          box-sizing: border-box;
          position: relative;
      }

      .login-box .login-wrap .mask {
          display: block;
          position: absolute;
          height: 100%;
          width: 100%;
          left: 0;
          top: 0;
          background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 1) 60%);
          z-index: 999;
      }

      .login-box .login-wrap .login-main {
          padding: 24px;
          border-radius: 8px;
          border: 1px solid #FFF;
          background: #FFF;
          box-shadow: 0px 4px 24px 0px rgba(17, 47, 81, 0.08);
          box-sizing: border-box;
          z-index: 1000;
          position: relative;
          width: unset;
          right: unset;
          bottom: unset;
          top:unset;
      }

      .login-box .login-wrap .login-main .logo-wrap {
          text-align: center;
      }

      .login-box .login-wrap .login-main .logo-wrap .logo {
          width: 60px;
          height: 60px;
      }

      .login-box .login-wrap .login-main .logo-wrap .logo-title {
          color: #1D1D1F;
          font-size: 16px;
          font-weight: 500;
          margin-top: 12px;
      }

      .login-box .login-wrap .login-main .login-content {
          padding: 24px 0;
      }

      .login-box .login-wrap .login-main .login-content .login-input-wrap {
          margin-bottom: 20px;
      }

      .login-box .login-wrap .login-main .login-content .login-input-wrap:last-child {
          margin-bottom: 0;
      }

      .login-box .login-wrap .login-main .login-content .login-input-wrap .login-input {
          position: relative;
      }

      .login-box .login-wrap .login-main .login-content .login-input-wrap .error-tips {
          color: #FF1616;
          font-size: 12px;
          margin-top: 4px;
      }

      .login-box .login-wrap .login-main .login-content .login-input input {
          height: 40px;
          padding: 0px 12px 0 36px;
          border-radius: 6px;
          border: 1px solid #D9D9D9;
          background: #FFF;
          width: 100%;
          box-sizing: border-box;
          color: #1D1D1F;
          font-size: 14px;
      }

      .login-box .login-wrap .login-main .login-content .login-input input:focus {
          outline: none;
      }

      .login-box .login-wrap .login-main .login-content .login-input img {
          position: absolute;
          width: 20px;
          height: 20px;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
      }

      .login-box .login-wrap .login-main .login-content .login-input .icon-eye-close {
          width: 16px;
          height: 16px;
          right: 12px;
          left: unset;
      }

      .login-box .login-wrap .login-main .login-content .login-input .icon-eye-open {
          display: none;
          width: 16px;
          height: 16px;
          right: 12px;
          left: unset;
      }

      .login-box .login-wrap .login-main .login-content .login-input .code-img {
          position: absolute;
          right: 6px;
          width: 62px;
          height: 28px;
          top: 50%;
          transform: translateY(-50%);
      }

      .login-box .login-wrap .agreement {
          position: relative;
      }

      .login-box .login-wrap .agreement input {
          margin-right: 4px;
          vertical-align: middle;
      }

      .login-box .login-wrap .agreement #myCheckbox {
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          width: 14px;
          height: 14px;
          border: 1px solid #dbdbdb;
          border-radius: 4px;
          background-color: #fff;
      }

      .login-box .login-wrap .agreement #myCheckbox:checked {
          background-color: #418BE0;
          border-color: #418BE0;
      }

      .login-box .login-wrap .agreement #myCheckbox:after {
          content: '\2713';
          color: #fff;
          font-size: 10px;
          font-weight: 600;
          margin-left: 2px;
          display: block;
      }

      .login-box .login-wrap .agreement .agreement-tip {
          display: none;
          position: absolute;
          padding: 8px 12px;
          border-radius: 4px;
          background: #212633;
          color: #fff;
          font-size: 13px;
          top: -42px;
          left: -24px;
      }

      .login-box .login-wrap .agreement .agreement-tip::after {
          content: '';
          position: absolute;
          display: block;
          width: 0;
          height: 0;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-top: 6px solid #212633;
          bottom: -5px;
          left: 28px;
      }

      .login-box .login-wrap .agreement span {
          display: inline-block;
          vertical-align: middle;
          color: #6C6C73;
          font-size: 12px;
      }

      .login-box .login-wrap .agreement .privacy {
          color: #418BE0;
          font-size: 12px;
      }

      .login-box .login-wrap .login-button {
          width: 100%;
      }

      .login-box .login-wrap .login-button button {
          width: 100%;
          height: 40px;
          text-align: center;
          border-radius: 6px;
          background: #418BE0;
          border: none;
          margin-top: 24px;
          color: #FFF;
          font-size: 16px;
          font-weight: 500;
      }

      .login-box .login-wrap .illustrate {
          color: #8C8C8C;
          font-size: 12px;
          line-height: 18px;
          margin-top: 32px;
          z-index: 1000;
          position: relative;
          width: unset;
          right: unset;
          bottom: unset;
          top:unset;
      }

      .login-box .privacy-content {
          display: none;
          position: fixed;
          top: 82px;
          left: 50%;
          z-index: 1002;
          background: #fff;
          width: 335px;
          border-radius: 8px;
          border: 1px solid var #E9E9E9;
          box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.10);
      }

      .login-box .privacy-content .privacy-title {
          height: 51px;
          padding: 14px 14px 14px 24px;
          border-bottom: 1px solid #E9E9E9;
          text-align: center;
          color: #1D1D1F;
          font-size: 16px;
          font-weight: 600;
          box-sizing: border-box;
      }

      .login-box .privacy-text {
          padding: 12px 16px;
          height: 453px;
          box-sizing: border-box;
          overflow-y: scroll;
          line-height: 28px;
      }

      .login-box .privacy-text span {
          color: #1D1D1F;
          font-size: 16px;
          text-indent: 32px;
          display: inline-block;
      }

      .login-box .privacy-text .third-title {
          color: #1D1D1F;
          font-size: 16px;
          font-weight: 600;
          line-height: 28px;
          text-indent: 32px;
      }

      .login-box .privacy-text .text-title {
          text-align: center;
          font-size: 20px;
      }

      .login-box .privacy-button {
          padding: 8px 0px;
          text-align: center;
          border-top: 1px solid #E9E9E9;
      }

      .login-box .privacy-button button {
          border-radius: 6px;
          background: #418BE0;
          width: 150px;
          height: 40px;
          border: none;
          color: #fff;
          font-size: 14px;
      }
  }

  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      .login-box .login-top {
          display: none;
      }

      .login-box .login-wrap {
          height: 100vh;
          background: url(/sso/assets/image/login-bg4-52520d4a8e70de99a29f9065ea06f690.png) no-repeat center center;
          background-size: 100% 100%;
          box-sizing: border-box;
          position: relative;
          padding: 32px;
      }

      .login-box .login-wrap .mask {
          display: none;
      }

      .login-box .login-wrap .login-main {
          width: 560px;
          padding: 40px;
          border-radius: 12px;
          border: 1px solid #FFF;
          background: #FFF;
          box-shadow: 0px 6px 36px 0px rgba(17, 47, 81, 0.12);
          box-sizing: border-box;
          z-index: 1000;
          position: relative;
          bottom: unset;
          right: unset;
          margin: 0 auto;
          margin-top: 168px;
      }

      .login-box .login-wrap .login-main .logo-wrap .logo {
          width: 90px;
          height: 90px;
      }

      .login-box .login-wrap .login-main .logo-wrap .logo-title {
          margin-top: 16px;
          font-size: 26px;
      }

      .login-box .login-wrap .login-main .login-content {
          padding: 36px 0;
      }

      .login-box .login-wrap .login-main .login-content .login-input input {
          height: 64px;
          padding: 0px 16px 0 52px;
          font-size: 24px;
      }

      .login-box .login-wrap .login-main .login-content .login-input img {
          width: 32px;
          height: 32px;
      }

      .login-box .login-wrap .login-main .login-content .login-input .code-img {
          width: 93px;
          height: 48px;
      }

      .login-box .login-wrap .login-main .login-content .login-input .icon-eye-close {
          width: 24px;
          height: 24px;
      }

      .login-box .login-wrap .login-main .login-content .login-input .icon-eye-open {
          width: 24px;
          height: 24px;
      }

      .login-box .login-wrap .agreement span {
          font-size: 18px;
      }

      .login-box .login-wrap .agreement .privacy {
          font-size: 18px;
      }

      .login-box .login-wrap .agreement #myCheckbox {
          width: 20px;
          height: 20px;
      }

      .login-box .login-wrap .agreement #myCheckbox:after {
          font-size: 14px;
      }

      .login-box .login-wrap .login-button button {
          height: 64px;
          font-size: 26px;
      }

      .login-box .login-wrap .illustrate {
          color: #8C8C8C;
          font-size: 18px;
          position: relative;
          bottom: unset;
          right: unset;
          width: 560px;
          margin: 0 auto;
          margin-top: 90px;
          top:unset;
      }

      .login-box .privacy-content {
          left: 50%;
          transform: translateX(-50%);
          width: 584px;
          top: 168px;
      }

      .login-box .privacy-text .text-title {
          font-size: 24px;
      }

      .login-box .privacy-text {
          height: 680px;
      }

      .login-box .privacy-text span {
          font-size: 16px;
          text-indent: 32px;
          display: inline-block;
      }

      .login-box .privacy-text .third-title {
          font-size: 18px;
          text-indent: 32px;
      }

      .login-box .privacy-button {
          padding: 16px 0;
      }

      .login-box .privacy-button button {
          font-size: 16px;
      }
  }

  /* @media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : portrait) {
}

  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

  @media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : landscape) {} */