@charset "utf-8";
/* 버튼 */
button {
  width: 29.75rem;
  height: 3.75rem;
  border-radius: 3.12rem;
  margin-bottom: 0.62rem;
  transition: all 0.3s;
}
#wrap {
  height: 62.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.login,
.loginBox {
  width: 45.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto 2.5rem;
}
.login h2 {
  font-size: 3.18rem;
  margin-bottom: 3.75rem;
}
.login input {
  width: 29.75rem;
  height: 3.5rem;
  border: 1px solid var(--light-gray);
  padding: 0.93rem 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--black);
  transition: all 0.3s;
}
.login input:focus {
  border: 1px solid var(--black);
}
.login input[type="password"] {
  margin-bottom: 1.87rem;
}
.login > button {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--white);
  background: var(--black);
  margin-bottom: 1.25rem;
}
.login > button:hover {
  background: var(--dark-gray);
}
.login .joinBox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
}
.login .joinBox > a {
  display: block;
  color: var(--deep-gray);
  transition: all 0.3s;
}
.login .joinBox > a:hover {
  color: var(--black);
}
.login .joinBox > a::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 0.12rem;
  height: 0.62rem;
  background: var(--gray);
  margin-left: -0.68rem;
}
.login .joinBox > a:first-child:after {
  display: none;
}

#wrap div:nth-child(2) {
  display: block;
  width: 29.75rem;
  height: 1px;
  background: var(--light-gray);
  margin-bottom: 2.5rem;
}
.kakao {
  background: #fee500;
  color: var(--black);
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
}
.naver {
  background: #03c75a;
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  margin-bottom: 1.87rem;
}
.naver img {
  width: 1.5rem;
}
.nonMember {
  display: block;
  width: 29.75rem;
  height: 3.75rem;
  background: var(--white);
  border: 1px solid var(--gray);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 3.75rem;
  text-align: center;
  border-radius: 3.12rem;
  transition: all 0.3s;
}
.nonMember:hover {
  background: var(--bg-gray);
}

/* ==========노트북 반응형============= */
@media screen and (max-width: 1023px) {
  /* 버튼 */
  button {
    height: 3.62rem;
  }

  .login {
    width: 100%;
    margin: 7.5rem auto 2.5rem;
  }
  .login h2 {
    font-size: 2.75rem;
  }
  .login > button {
    font-size: 1.06rem;
    font-weight: 500;
  }
  .login > button:hover {
    background: var(--black);
  }
  .login .joinBox > a:hover {
    color: var(--deep-gray);
  }

  .nonMember {
    height: 3.62rem;
    line-height: 3.62rem;
  }
  .nonMember:hover {
    background: var(--bg-gray);
  }
}

/* ==========태블릿 반응형============= */
@media screen and (max-width: 860px) {
  /* 버튼 */
  button {
    width: 33.37rem;
    height: 4.06rem;
  }
  .login,
  .loginBox {
    width: 49.56rem;
  }
  .login h2 {
    font-size: 3.12rem;
  }
  .login input {
    width: 33.37rem;
    height: 3.93rem;
    padding: 1.06rem 1.37rem;
    font-size: 1rem;
    font-weight: 500;
  }
  .login > button {
    font-size: 1.25rem;
  }
  .login .joinBox > a {
    font-size: 1.12rem;
  }

  #wrap div:nth-child(2) {
    width: 33.37rem;
    margin-bottom: 3.12rem;
  }
  .kakao {
    font-size: 1.12rem;
  }
  .kakao img {
    width: 1.68rem;
  }
  .naver {
    font-size: 1.12rem;
    margin-bottom: 2.5rem;
  }
  .naver img {
    width: 1.68rem;
  }
  .nonMember {
    width: 33.37rem;
    height: 4.06rem;
    font-size: 1.12rem;
    line-height: 4.06rem;
  }
}
/* ==========모바일 반응형============= */
@media screen and (max-width: 540px) {
  /* 버튼 */
  button {
    width: 30.31rem;
    height: 4.87rem;
  }
  #wrap {
    height: auto;
  }
  .login {
    margin: 16.25rem auto 2.5rem;
  }
  .login,
  .loginBox {
    width: 30.31rem;
  }
  .loginBox {
    margin-bottom: 7.5rem;
  }
  .login h2 {
    font-size: 3.5rem;
  }
  .login input {
    width: 30.31rem;
    height: 4.87rem;
    padding: 1.25rem 1.68rem;
    font-size: 1.25rem;
  }
  .login > button {
    font-size: 1.43rem;
  }
  .login .joinBox > a {
    font-size: 1.31rem;
  }

  #wrap div:nth-child(2) {
    width: 30.31rem;
    margin-bottom: 3.12rem;
  }
  .kakao {
    font-size: 1.31rem;
  }
  .kakao img {
    width: 2.12rem;
  }
  .naver {
    font-size: 1.31rem;
    margin-bottom: 2.5rem;
  }
  .naver img {
    width: 2.12rem;
  }
  .nonMember {
    width: 30.31rem;
    height: 4.87rem;
    font-size: 1.43rem;
    line-height: 4.87rem;
  }
}