/* 基础样式 */
:root {
  font-size: 16px; /* 设置基准字体大小 */
}

.login {
  height: 100%;
  background: url(../images/login/login_bg.png) no-repeat center;
  background-size: cover;
  position: relative;
}

.top-logo {
  position: absolute;
  top: 1.625rem; /* 26px / 16px = 1.625rem */
  left: 2rem; /* 32px / 16px = 2rem */
  display: flex;
  align-items: center;
}

.top-logo img {
  width: 3rem; /* 48px / 16px = 3rem */
  height: 3rem; /* 48px / 16px = 3rem */
}

.top-logo span {
  margin-left: 0.75rem; /* 12px / 16px = 0.75rem */
  font-size: 1.5rem; /* 24px / 16px = 1.5rem */
  font-family: "Alibaba PuHuiTi";
}

.centre {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60rem; /* 960px / 16px = 60rem */
  height: 40rem; /* 640px / 16px = 40rem */
  border-radius: 2.5rem; /* 40px / 16px = 2.5rem */
  display: flex;
  overflow: hidden;
}

.centre-left,
.centre-right {
  flex: 1;
}

.centre-left {
  padding-left: 3.75rem; /* 60px / 16px = 3.75rem */
  background-image: linear-gradient(
    to bottom,
    rgba(26, 195, 152, 1),
    rgba(49, 216, 126, 1)
  );
}

.centre-left-textUp {
  margin-top: 5rem; /* 80px / 16px = 5rem */
  font-size: 3rem; /* 48px / 16px = 3rem */
  font-weight: 600;
  color: #fff;
  line-height: 4.1875rem; /* 67px / 16px = 4.1875rem */
  height: 4.1875rem; /* 67px / 16px = 4.1875rem */
}

.centre-left-textDown {
  margin-top: 0.25rem; /* 4px / 16px = 0.25rem */
  font-size: 1.75rem; /* 28px / 16px = 1.75rem */
  color: #fff;
  height: 2.375rem; /* 38px / 16px = 2.375rem */
  line-height: 2.375rem; /* 38px / 16px = 2.375rem */
}

.centre-left img {
  width: 25rem; /* 400px / 16px = 25rem */
  height: 22.25rem; /* 356px / 16px = 22.25rem */
  margin-left: 0.25rem; /* 4px / 16px = 0.25rem */
  margin-top: 2.1875rem; /* 35px / 16px = 2.1875rem */
}

.centre-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}

.top-font {
  width: 17.25rem; /* 276px / 16px = 17.25rem */
  height: 2.375rem; /* 38px / 16px = 2.375rem */
  line-height: 2.375rem; /* 38px / 16px = 2.375rem */
  margin-top: 5.875rem; /* 94px / 16px = 5.875rem */
  display: flex;
  justify-content: space-between;
}

.top-font-right,
.top-font-left {
  font-weight: 600;
  font-size: 1.75rem; /* 28px / 16px = 1.75rem */
  color: #000;
  opacity: 0.4;
  cursor: pointer;
}

.active-font {
  opacity: 1;
}

.right-input {
  margin-top: 2rem; /* 32px / 16px = 2rem */
}

.username,
.password {
  width: 22.5rem; /* 360px / 16px = 22.5rem */
  height: 5.25rem; /* 84px / 16px = 5.25rem */
  border-radius: 1.25rem; /* 20px / 16px = 1.25rem */
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem; /* 16px / 16px = 1rem */
}

.input-top {
  font-size: 0.875rem; /* 14px / 16px = 0.875rem */
  font-weight: 500;
  height: 1.25rem; /* 20px / 16px = 1.25rem */
  line-height: 1.25rem; /* 20px / 16px = 1.25rem */
  margin-bottom: 0.25rem; /* 4px / 16px = 0.25rem */
}

.input-bottom {
  width: 100%;
  display: flex;
  gap: 0.25rem; /* 4px / 16px = 0.25rem */
}

.input {
  display: block;
  width: calc(100% - 2rem); /* 32px / 16px = 2rem */
  border: none;
  font-weight: 500;
  font-size: 1.25rem; /* 20px / 16px = 1.25rem */
  color: rgba(0, 0, 0, 0.9);
}

.input-icon {
  cursor: pointer;
}

.input-icon img {
  width: 1.75rem; /* 28px / 16px = 1.75rem */
  height: 1.75rem; /* 28px / 16px = 1.75rem */
}

.input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.username:focus-within,
.password:focus-within {
  border: 1.5px solid rgba(21, 190, 158, 1) !important;
}

.password {
  margin-top: 0.75rem; /* 12px / 16px = 0.75rem */
}

.right-btns {
  margin-top: 2rem; /* 32px / 16px = 2rem */
}

.btn1,
.btn2 {
  width: 22.5rem; /* 360px / 16px = 22.5rem */
  height: 3.75rem; /* 60px / 16px = 3.75rem */
  text-align: center;
  line-height: 3.75rem; /* 60px / 16px = 3.75rem */
  border-radius: 3.75rem; /* 60px / 16px = 3.75rem */
  font-size: 1.25rem; /* 20px / 16px = 1.25rem */
  font-weight: 500;
  cursor: pointer;
}

.btn1 {
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(
    to right,
    rgba(20, 189, 158, 1),
    rgba(49, 216, 126, 1)
  );
}

.btn2 {
  color: rgba(0, 0, 0, 0.9);
  margin-top: 1rem; /* 16px / 16px = 1rem */
  background-color: rgba(239, 239, 239, 1);
}

.qr-content {
  margin-top: 2.5rem; /* 40px / 16px = 2.5rem */
  width: 20rem; /* 320px / 16px = 20rem */
  height: 20rem; /* 320px / 16px = 20rem */
  border-radius: 1.5rem; /* 24px / 16px = 1.5rem */
  background-color: rgba(236, 236, 236, 1);
  padding: 1.40625rem; /* 22.5px / 16px = 1.40625rem */
}

.qr-content img {
  width: 100%;
  height: 100%;
}

.qr-title {
  margin-top: 1.25rem; /* 20px / 16px = 1.25rem */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem; /* 4px / 16px = 0.25rem */
}

.qr-title img {
  width: 1.5rem; /* 24px / 16px = 1.5rem */
  height: 1.5rem; /* 24px / 16px = 1.5rem */
}

.qr-title span {
  font-size: 1.125rem; /* 18px / 16px = 1.125rem */
}

::-ms-clear,
::-ms-reveal {
  display: none;
}