//public attr
.t5s {
  transition: 0.2s !important;
  left: 14px !important;
}

.inputFocus {
  outline: none;
  border: 1px solid #b9b9bd !important;
  width: calc(100% - 65px) !important;
  color: #606063 !important;
  -webkit-text-fill-color: #606063 !important;
  box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
    inset -2px -2px 12px rgba(255, 255, 255, 0.5),
    inset 2px 2px 4px rgba(255, 255, 255, 0.1),
    inset 2px 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.op0 {
  opacity: 0 !important;
}

.js-input {
  position: relative;

  & .msg {
    position: absolute;
    left: 20px;
    font-size: 12px;
    color: red;
    bottom: -20px;
    transition: 1s;
    opacity: 1;
  }
}

//index.css
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  position: relative;
  width: 100%;
  background: #fdfbf6;

  .login-background {
    height: 100vh;
    width: 100vw;
    position: absolute;

    &>img {
      height: 100%;
      width: 100%;
      position: absolute;
    }
  }

  .login-big-box {
    z-index: 2;
    height: 650px;
    width: 70%;
    min-width: 1000px;
    max-width: 1150px;
    background: #f4faf8;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-left-box {
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 110px;

      &>img {
        height: 550px;
        width: 640px;
        position: absolute;
        object-fit: contain;
      }
    }

    .login-middle-line {
      width: 2px;
      height: 80%;
      background: #e3e3e3;
    }

    .login-right-box {
      width: 100%;
      padding: 0 80px;
      position: relative;
      height: 85%;

      &:hover .login-right-title-bottom {
        width: 100% !important;
      }

      .login-right-title-box {
        letter-spacing: 1px;
        color: #313042;
        font-weight: 550;
        font-size: 20px;
        padding-left: 20px;

        .login-right-title-bottom {
          background: #7c40fa;
          height: 4px;
          width: 50px;
          margin-top: 8px;
          margin-left: 1px;
          border-radius: 3px;
          transition: 0.4s;
        }
      }

      .login-right-form-control-box {
        margin-top: 45px;

        .login-right-form-control-item {
          margin: 30px 0;
          width: 100%;
          position: relative;
          text-align: center;

          .login-form-icon {
            position: absolute;
            left: 30px;
            top: 11px;
            transition: 0.5s;
          }

          .login-form-input-control {
            position: relative;
            width: calc(100% - 95px);
            height: 37px;
            border-radius: 20px;
            border: 1px solid #eae9ef;
            transition: 0.4s;
            padding-left: 40px;
            color: #b9b9bd;
            -webkit-text-fill-color: #b9b9bd;
            font-size: 15px;
            padding-right: 20px;
            box-shadow: -2px -2px 8px rgba(255, 255, 255, 1),
              -2px -2px 12px rgba(255, 255, 255, 0.5),
              inset 2px 2px 4px rgba(255, 255, 255, 0.1),
              2px 2px 8px rgba(0, 0, 0, 0.15);

            &::placeholder {
              color: #b9b9bd;
              transition: 0.5s;
              font-size: 13px !important;

            }
          }

          .login-right-captcha-box {
            display: flex;

            .login-right-captcha-input-box {
              text-align: left !important;

              .captcha-input {
                position: relative;
                width: calc(100% - 85px);
                height: 37px;
                border-radius: 20px;
                border: 1px solid #eae9ef;
                transition: 0.4s;
                padding-left: 40px;
                color: #b9b9bd;
                -webkit-text-fill-color: #b9b9bd;
                font-size: 15px;
                padding-right: 20px;
                margin-left: 16px;
                box-shadow: -2px -2px 8px rgba(255, 255, 255, 1),
                  -2px -2px 12px rgba(255, 255, 255, 0.5),
                  inset 2px 2px 4px rgba(255, 255, 255, 0.1),
                  2px 2px 8px rgba(0, 0, 0, 0.15);

                &:focus {
                  outline: none;
                  border: 1px solid #b9b9bd !important;
                  color: #606063 !important;
                  -webkit-text-fill-color: #606063 !important;
                  box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
                    inset -2px -2px 12px rgba(255, 255, 255, 0.5),
                    inset 2px 2px 4px rgba(255, 255, 255, 0.1),
                    inset 2px 2px 8px rgba(0, 0, 0, 0.15) !important;
                }

                &::placeholder {
                  color: #b9b9bd;
                  transition: 0.5s;
                  font-size: 13px !important;
                }
              }
            }

            .captcha-img {
              height: 40px;
              width: 126px;
              margin-right: 16px;
            }
          }

          .login-right-form-control-button {
            width: 57%;
            font-size: 16px;
            display: inline-block;
            position: relative;
            padding: 12px 16%;
            text-decoration: none;
            font-weight: 500;
            letter-spacing: 8px;
            color: #5a84a2;
            border-radius: 60px;
            box-shadow: -2px -2px 8px rgba(255, 255, 255, 1),
              -2px -2px 12px rgba(255, 255, 255, 0.5),
              inset 2px 2px 4px rgba(255, 255, 255, 0.1),
              2px 2px 8px rgba(0, 0, 0, 0.15);
            transition: 0.4s;

            &:hover {
              box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
                inset -2px -2px 12px rgba(255, 255, 255, 0.5),
                inset 2px 2px 4px rgba(255, 255, 255, 0.1),
                inset 2px 2px 8px rgba(0, 0, 0, 0.15);
            }
          }
        }
      }

      .login-right-copyright-box {
        text-align: center;
        margin-top: 90px;
        font-size: 14px;
        font-family: "Times New Roman", 楷体;
      }
    }
  }

  .login-head-box {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 30px;

    // margin-left: -10px;
    &>img {
      height: 70px;
      width: 100%;
      object-fit: contain;
      margin-right: 10px;
    }

    &>span {
      font-size: 25px;
      font-family: Gabriola serif;
    }
  }
}