@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/main-bg2.png) no-repeat center/cover; width: 100%; height: 100vh;}

.log-wrap {position:fixed;bottom:30px;right:50px;}
.login {padding: 20px 30px ; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, .1); backdrop-filter: blur(5px); background-color: #00000066; display: flex;gap:40px;}


.login h2 {font-size: 44px; font-weight: bold; color: #fff; margin-bottom: 40px; text-align: center;}
.login-input {display: flex;gap: 30px;}
.input-wrap {display: flex; align-items: center;gap: 15px;}
.input-wrap p {font-size: 16px; color: #fff; font-weight: 400; }
.input-wrap input {padding: 10px 20px; border-radius: 5px; background-color: #fff; border: none; font-size: 16px;width:130px;}
.input-wrap input#email {width:280px;}
.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: 44px; display: flex; align-items: center; justify-content: center; color: #fff; background-color: #E52F42; border-radius: 8px; font-size: 18px;padding-left:15px;padding-right:15px;}

.main-t-wrap {width: fit-content;padding-top:60px;padding-left:80px;display: flex;flex-direction: column;}

.mo-logo {width: 300px;}
.case-name {
  /* background:#00000055;padding:5px 20px; */
  border-radius:5px;font-weight:600;font-size:24px;color:#fff;margin-top:5px;width:fit-content;
  /* text-shadow: 0 0 8px #00000099; */
}



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

  .login {right: 10%;}
  .mo-logo {width: 350px;}
  .log-wrap {gap: 40px; margin-right: 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:url(../img/close_bg_m.png); display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center;background-position: top center;}

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

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

  
  /* .login-bg {background:url(../img/close_bg_m.png) no-repeat center / cover; } */
  .login-bg {background:url(../img/close_bg2_m.png) no-repeat center / cover;}

  .main-t-wrap {padding-left:0;flex-direction: column;align-items: center;margin:0 auto;}
  .case-name {margin-top:0;}

  .log-wrap {right:unset;left:50%;transform: translateX(-50%);}
  .login-input {flex-direction: column;}
  .login {flex-direction: column;
    gap:20px;}
    .input-wrap p {width:50px;padding-left:0;}
    .input-wrap input {width:250px;}
    .input-wrap input#email {width:250px;}

  /* .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: top 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: 480px) {

  .mo-logo {width:150px;}
  .case-name {font-size:15px;}

    .input-wrap input {width:180px;padding:8px 15px;font-size:14px;}
    .input-wrap input#email {width:180px;}
    .input-wrap p {font-size:14px;width:40px;}
    .login {padding:20px;}

}