.lx-modal {
  position: fixed;
  // 大于 head bar
  z-index: 2000;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: block;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

  .modal-dialog {
    left: 50%;
    top: 50%;
    max-width: 100%;
    max-height: 100%;
    margin: 0 !important;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, -50%);
  }

  .modal-content {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

  .modal-body {
    word-break: break-all;
  }


  @media (max-width: 1440px) {
    .modal-dialog {
      width: 500px;

      &.ascii {
        width: 900px;
      }
    }
  }

  &.lx-show {
    opacity: 1;

    .modal-content {
      -webkit-transform: translate(0, -20px);
      transform: translate(0, -20px);
    }
  }

  &.lx-hide {
    opacity: 0;

    .modal-content {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
}