@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&family=Montserrat:wght@400;600;700;800;900&display=swap");

/* reset 구문 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
ol,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

.loginSection {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.loginSection .loginBg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.loginBox {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  width: 500px;
  height: 570px;
  border-radius: 30px;
  margin: 0 auto;
}

.loginTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 50px auto 30px;
  font-family: "Montserrat", sans-serif;
}

.loginTitle .qmsLogo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

    .loginTitle .qmsLogo h1 {
        font-size: 4em;
        color: #fff;
        font-family: "Urbanist", sans-serif;
    }

.loginTitle .qmsLogo span {
  font-size: 0.7em;
  color: #fff;
}

.loginTitle .userLoginText {
  color: #fff;
  font-size: 1.3em;
  font-weight: 600;
}

.loginFormGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  margin-bottom: 50px;
}

.loginFormGroup .inputWrap {
  width: 70%;
  height: 45px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background-color: rgba(221, 221, 221, 0.7);
}

.loginFormGroup .inputWrap .loginIcon {
  display: block;
  width: 60px;
  height: 60%;
  float: left;
}

.loginFormGroup .inputWrap .loginIcon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin-top: 18%;
}

.loginFormGroup .inputWrap input,
.loginFormGroup .inputWrap select {
  width: calc(100% - 65px);
  float: right;
  height: 100%;
  border: none;
  font-family: "Montserrat", sans-serif;
  background-color: transparent;
}

.loginFormGroup .inputWrap input::placeholder,
.loginFormGroup .inputWrap select::placeholder {
  color: #000;
}

.loginFormGroup .inputWrap input option,
.loginFormGroup .inputWrap select option {
  font-size: 1em;
  padding: 5px;
}

.loginFormGroup .inputWrap input:focus {
  outline: none;
}

    .loginFormGroup .loginBtn {
        display: block;
        width: 70%;
        height: 45px;
        border-radius: 3px;
        border: none;
        font: 15px/45px sans-serif;
        color: #fff;
        background-color: #004098;
        text-align: center;
        font-family: "Montserrat", sans-serif;
        cursor: pointer;
    }

.cRight {
  font-size: 0.75em;
  width: 70%;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

button.otpReg {
  border: none;
  color: #fff;
  background-color: transparent;
  text-decoration: underline;
}