@font-face {
  font-family: 'TheJamsil5Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'TheJamsil3Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil3Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'TheJamsil4Medium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil4Medium.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@import url('https://webfontworld.github.io/pretendard/Pretendard.css');

body {overflow: hidden; width: 100%; height: 100%;}
em {display: inline-block;}
button {font-family: inherit;}

.en-font {font-family: 'TheJamsil5Bold';}
.en-font-regul {font-family: 'TheJamsil3Regular';}
.en-font-med {font-family: 'TheJamsil4Medium';}


.login-bg {background: url(../img/closing_bg.png) no-repeat center/cover; width: 100%; height: 100vh; background-position: unset; display: flex;  gap: 30px; align-items: center; }
.log-wrap {display: flex; flex-direction: column; align-items: center; gap: 60px; margin-left: 200px;}

.login {padding: 60px 55px; border-radius: 15px; box-shadow: 0 0 15px rgba(0, 0, 0, .1); backdrop-filter: blur(5px); background-color: #3d2c1ba3; width: 500px;}
.login h2 {font-size: 44px; font-weight: bold; color: #fff; margin-bottom: 50px; text-align: center;}
.login-input {display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px;}
.input-wrap {display: flex; flex-direction: column; gap: 8px;}
.input-wrap p {font-size: 16px; color: #fff; font-weight: 400; padding-left: 17px;}
.input-wrap input {width: 100%; padding: 16px 25px; border-radius: 50px; background-color: #fff; border: none; font-size: 16px;}
.label-wrap {display: flex; align-items: center; justify-content: space-between; color: #fff;}

input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {display: flex; align-items: center; gap: 8px; cursor: pointer;}
input[type="checkbox"] + label em {background: url(../img/chk.png) no-repeat center/cover; width: 20px; height: 20px;}
input[type="checkbox"]:checked + label em {background: url(../img/chked.png) no-repeat center/cover; width: 20px; height: 20px;}
.label-txt {padding-bottom: 3px; font-weight: 400;}
.label-wrap > p {font-weight: 400; border-bottom: 1px solid #fff; cursor: pointer;}
.log-btn {display: flex; flex-direction: column;gap: 10px;}
.login-btn {height: 50px; display: flex; align-items: center; justify-content: center; color: #fff; background-color: #ea632b; border-radius: 50px; font-size: 18px;}

.mo-logo {width: 450px;}



@media screen and (max-width: 1600px) {

  .login {right: 10%;}
  .mo-logo {width: 350px;}
  .log-wrap {gap: 40px; margin-left: 150px;}

}

@media screen and (max-width: 1350px) {
  .login {right: 7%; width: 470px;}
}

/* @media screen and (max-width: 1155px) {
  .main_bg .main_tit h1 {font-size: 98px;}
  .main_bg .main_tit p {font-size: 51px;}
  .main_bg .main_tit {padding-top: 75px; padding-left: 51px;}
  .login {width: 42%;}
} */

@media screen and (max-width: 1100px) {

  .login {width: 50%; left: 50%; transform: translate(-50%,-50%);}
  .login-bg {background:none; background-color: #20160c; display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center;}

  .mo-logo {display: block; width: 300px;}
  .login {position: static; transform: none;}
  .log-wrap {margin-left: 0; width: 100%;}
}

@media screen and (max-width: 820px) {

  .login {width: 60vw;}
  .login h2 {font-size: 40px; margin-bottom: 35px;}
  .input-wrap {gap: 5px;}
  .input-wrap input {font-size: 14px;}

  .label-txt {font-size: 14px;}
  input[type="checkbox"]:checked + label em {width: 18px; height: 18px;}
  input[type="checkbox"] + label em {width: 18px !important; height: 18px !important;}
  .label-wrap > p {font-size: 14px;}
  .login-btn {font-size: 16px;}
}

@media screen and (max-width: 690px) {


  .login {width: 80vw;}
  .login-bg {background-position: center;}
}

@media screen and (max-width: 550px) {
  .login {padding: 50px 30px;}
  .login h2 {font-size: 36px;}
  .input-wrap input {padding: 15px 20px;}
  .input-wrap p {font-size: 14px;}
}

@media screen and (max-width: 430px) {
  .label-wrap > p {font-size: 12px;}
  .label-txt {font-size: 12px;}
  input[type="checkbox"] + label em {width: 16px !important; height: 16px !important;}
  input[type="checkbox"]:checked + label em {width: 16px; height: 16px;}

  .login {margin-bottom: 100px;}
  /* .login-bg {justify-content:flex-start; } */
  .mo-logo {width: 200px; margin-top: 14%;}
}

@media screen and (max-width: 380px) {
  .login {width: 90vw; padding: 40px 20px;}
  .login h2 {font-size: 34px; margin-bottom: 25px;}
}

@media screen and (max-width: 300px) {

}