body {
      --qricon: url(https://51dns.me/favicon.ico);
  }

  .umc-sub-login .qrcode_view .context:empty {
      width: 50px;
      background-image: var(--qricon);
      height: 50px;
      background-size: cover;
  }

  .umc-sub-login .qrcode_view .context~#qrcode {
      position: relative;
  }

  .umc-sub-login .qrcode_view img {
      width: 200px;
      height: 200px;
      display: block !important;
      position: absolute;
      top: 0px;
      left: 0px;
      opacity: 0;
  }

  .umc-sub-login .qrcode_view canvas {
      width: 200px !important;
      height: 200px !important;
  }

  .umc-sub-login {
      position: fixed;
      z-index: 3;
      top: 0;
      width: 100%;
      height: 100%;

      background: rgba(0, 0, 0, .5);
  }

  .umc-sub-login .qrcode_view .context b,
  .umc-sub-login .qrcode_view .context a {
      padding: 0 15px;
      display: block;
  }

  .umc-sub-login .qrcode_view .context~#qrcode::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      background-color: rgba(255, 255, 255, 0.98);
  }

  .umc-sub-login .qrcode_view .context:empty~#qrcode::after {
      display: none;
  }

  .umc-sub-login .qrcode_view .context {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      line-height: 50px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0px 4px rgb(0 21 41 / 40%);
      white-space: nowrap;
      z-index: 1;
  }

  .umc-sub-login .webauthn {
      position: absolute;
      left: 50%;
      z-index: 2;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      top: 0px;
      transform: translateX(-50%);
      z-index: 2;
      color: #88c5a8;
      border: 1px #88c5a8 solid;
      padding: 0 10px 2px 10px;
      line-height: 1;
      border-top: none;
  }

  .umc-sub-login .webauthn::before {
      content: '\f216';
      font-family: wdk;
      font-size: 14px;

  }

  .umc-sub-login .webauthn::after {
      content: ' Web\51ED\8BC1\767B\5F55';
      font-size: 12px;
      font-weight: bold;
  }

  .umc-sub-login .loginFunc {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 2;
  }

  .umc-sub-login .loginFunc .qrcode {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAALVBMVEVHcEyJxqmJxqmKxqqJx6mJx6mJxqmNza+JxqmIxamKx6qIyqyJxqqU1K6IxaiD2HwnAAAADnRSTlMAvIdhqEiYFOT0Vyt2Cx5hGksAAAHBSURBVFjD7dYxS8NQFAXgQ0pT0Df4Ficp/oIgBNcO0llcBF0EUe7Y1U10i4vg6BIE9+LqIv6C4CROQsFFLPc3OPTVJsZn3kFxUM9U8vh6KLfvtki0lgsAueoIQFQ/1Y8eNhEkPIl5ggFPYp7UagJI1J+l68h+v7/myKh0fOpIOT1HXCJVfSkdd7+HDH+kJZx0RETk1kfuRURko9rSU1Vd8JFHVVVdrpLWO9KfzcVH0KuS0vS9xPAEBU8MT5DwJOIJkhI5OT8/CyAxN0oAwIqPPGRZlmW3v/a+fIXsOHKZpquOjNNZPiImbPVVUvDE8AQFTwxPUPDE8AR3E/JsrV3arAee5JN3HCM8/0RVdXwwyR2AjnvtI73q+I5Kj3ykxZN3NUeTm/Q5afEt1ZowMscTDNnPAsyJyK6qPonIXpqm66q6KCINE52uvkPXsNH8JZiSG5780Za2qo6stV1Hjq21TWanegnyz6f/VhOwLSvZ5kk7p0m9BnxNwH7aymbJwwgafvd/P+lMd3k4Md7/lv4UPDE8QcKTiCdIeBLxBAOexDzBgCcxT3D1V6/YW9Z5cs2T+Zwm2OZJmycY8qTFExQ8Ma97diL3mQOekwAAAABJRU5ErkJggg==) 50% no-repeat;

  }

  .umc-sub-login .loginFunc .account {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAG1BMVEVHcEz///+LyqyIxqmJxqmKxqmIxaj////D4tO+WgvTAAAABnRSTlMAgB7al1nDL9LEAAABbklEQVRYw5XWPW6DUBBF4ZGV9G8JlvKzgCiitlKkjrIEY00/1Z0VsO4UYIgMj8eZ/tMBNJbHii3z2nlj+i8zi0U8+YG5mGnJdEdIb6ZAEfeLac68e/9rjXnr/GqaM9/+Yc158ZtpznT+0ybP3pvmjPu5TU7upjnjbgdmIsHJmGEkOFHhJDhRmUl9VR5IcKLCSXCiwklwooGT5EQDJ8nJfaEJCU6mhUYkOBkXmpHgRIWT4ESFk+BEAyfJST1TJ8lJNbNDkpNaZo8kJ5XMLklOtjP7JDnZzDRIcqLS/ONbTXBSy+yR4GQ7c9olsXNckcx0woHMdCjWZ6ido/XJytELM5cGyc0DXs3M6huomYFEAyfJyf2yISQ5mS4bRJKT9UK3SXCyyohnDpBxoT/PhIwLfSVkzNwQyen3CIgGThI/mDTQ15cSfuSHFThKgpN/GfGMeEY8I54Rz4hnxDPiGfGMeEY8I54Rz4hnxDPiGUziD3cmg8W9azKUAAAAAElFTkSuQmCC) 50% no-repeat;

  }

  .umc-sub-login .loginFunc .qrcode,
  .umc-sub-login .loginFunc .account {
      width: 50px;
      height: 50px;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;

  }

  .umc-sub-login .loginQR,
  .umc-sub-login .loginFunc .account,
  .umc-sub-login .showform .loginForm,
  .umc-sub-login .showform .loginFunc .qrcode {
      display: block;
  }

  .umc-sub-login .loginFunc .qrcode,
  .umc-sub-login .loginForm,
  .umc-sub-login .showform .loginQR,
  .umc-sub-login .showform .loginFunc .account {
      display: none;
  }

  .umc-sub-login .loginForm {
      padding: 15px 30px;
      min-height: 250px;
      box-sizing: border-box;

  }

  .umc-sub-login .qrcode_view .close {
      position: absolute;
      left: -20px;
      top: -20px;
      font-size: 20px;
      color: #fff;
  }

  .umc-sub-login .qrcode_view .close:hover {

      color: #1890ff;
  }

  .umc-sub-login .qrcode_view .close::before {
      content: '\e90a';
      font-family: wdk;
  }

  .umc-sub-login .qrcode_view {

      position: relative;
      z-index: 2;
      text-align: center;
      /* transform: translateY(-50%); */
      top: 50%;
      border-radius: 6px;
      box-shadow: 0 4px 8px 0 rgb(42 93 158 / 16%), 0 0 4px 0 rgb(42 93 158 / 8%);
      background-color: #fff;
      width: 300px;
      margin: auto;
      transition: transform .38s ease-out;
  }

  .umc-sub-login .qrcode_view.show {
      transform: translateY(-50%);

  }

  .umc-sub-login .qrcode_view .title {
      font-size: 26px;
      padding: 20px 0;
      text-align: center;
      font-weight: 700;
  }

  .mob {
      display: none;
  }