@charset "utf-8";
@import url("common.css"); /* Common CSS */

.login-wrap {
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4.4rem; font-family:"Noto Sans KR";
  overflow:auto; width:100%; height:100%; margin:0 auto; background:#e7ebee; box-sizing:border-box;
  }
.login_container { width:53.0rem; height:65.0rem; position:relative; border-radius:1.3rem; box-shadow:0 5px 30px rgba(0,0,0,0.1); margin-bottom:3.0rem; }
.login_box { width:100%; height:100%; box-sizing:border-box; border-radius:1.3rem; background:#fff; position:relative; overflow:hidden; }
.login_head { display:flex; align-items:center; justify-content:flex-end; flex-direction:column; gap:1.6rem; width:100%; height:20.0rem; padding-bottom:3.7rem; box-sizing:border-box; background:#0072aa; border-radius:0 0 5.0rem 5.0rem; }
.login_head .login_logo { width:100%; height:5.7rem; background:url(images/login/login_logo.png) no-repeat center; background-size:contain; text-indent:-9999px; }
.login_head .system_tit { width:100%; font-size:3.0rem; font-family:"Noto Sans KR"; font-weight:500; color:#fff; letter-spacing:-0.2rem; text-align:center; }
.login_body { width:100%; line-height:1.0; box-sizing:border-box; }
.login_body .login_tit { width:100%; font-size:2.8rem; color:#0072aa; font-weight:300; text-align:center; letter-spacing:0.8rem; padding:4.6rem 0; }
.login_body .login_con { width:34.8rem; margin:0 auto; display:flex; align-items:center; flex-direction:column; gap:2.0rem; box-sizing:border-box; }
.login_body .login_item { width:100%; position:relative; font-size:1.2rem; }
.login_item p { width:100%; font-size:1.3rem; color:#666; margin-bottom:0.5rem; }
.login_item input[type=text],
.login_item input[type=password] { width:100%; height:5.0rem !important; border:solid 1px #999; box-sizing:border-box; padding:1.0rem; border-radius:0;  }
.login_bt { width:100%; padding-top:3.3rem; text-align:center; }
.login_bt .btn_login { width:22.4rem; height:5.0rem !important; background:#16476e url(images/login/btn_login_arrow.png) no-repeat right center; color:#fff; border-radius:5.0rem; font-weight:400; font-size:2.0rem !important; }
.login_ft { display:flex; align-items:center; justify-content:space-between; width:100%; position:absolute; bottom:-20px; left:0; box-sizing:border-box; }
.login_ft .ft-copy { display:inline-block; font-size:1.1rem; color:#999; font-weight:300; }
.login_ft .ft-info { display:flex; align-items:center; justify-content:center;  }
.login_ft .ft-info div { border-right:solid 1px #d9d9d9; padding:0 0.8rem;  }
.login_ft div:last-child { padding-right:0 !important; border-right:0 !important }
.login_ft .ft-link,
.login_ft .ft-tel {  font-weight:300; font-size:1.1rem; color:#999; font-weight:400; letter-spacing:0; }
.login_ft .ft-link { cursor:pointer; }
.login_msg { display:none; }

@media screen and (max-width: 768px) {
  .login-wrap { overflow:hidden; }
  .login_container { width:100%; height:100vh;  border-radius:0; margin-bottom:0; }
  .login_body {  padding:0 4.0rem;  }
  .login_body .login_con { width:100%; }
  .login_body .login_tit { padding:4.0rem 0; font-size:2.5rem;  }
  .login_box {  border-radius:0; }
  .login_head { border-radius:0 0 3.0rem 3.0rem; padding-bottom:2.5rem; }
  .login_head .system_tit { font-size:3.2rem;  }
  .intro_logo { background:url(images/intro/top_logo_jjuniv_m.png) no-repeat center !important; background-size:contain !important; width:100%; height:7.0rem; position:inherit; }
  .intro-main-msg { width:70%; }
  .intro-main-msg p { font-size:1.25rem; font-weight:300; line-height:1.5; }
  .login_bt .btn_login { width:100%; border-radius:0; }
  .login_ft { display:grid; align-content:center; justify-content:center; gap:0.5rem; width:100%; height:6.0rem; left:0; bottom:0;  }
  .login_ft .ft-copy { order:2; }
  .login_ft .ft-info { order:1; }
  .ft-info .ft-link,
  .ft-info .ft-tel {  font-weight:400; font-size:1.3rem; color:#6c6c6c; }
  .ft-info .ft-copy { width:100%; text-align:center; font-weight:300; font-size:1.1rem; color:#6c6c6c; }
}

@media all and (min-width: 360px) and (max-width: 411px) {
  html { font-size: 60%; }
  .login_head { height:18.0rem; }
  .login_head .login_logo { height:4.5rem; }
  .login_head .system_tit { font-size:2.5rem;  }
  }

@media all and (max-width: 350px) {
   .login_head .system_tit { font-size:2.5rem;  }
}

@media all and (max-height: 430px) {
    html { font-size: 70%; }
  .login_container { margin-bottom:0; }
  .login_head { height:15.0rem; }
  .login_body { display:none;}
  .login_msg { display:flex !important; align-items:center; justify-content:center; width:90%; height:calc(90% - 20rem); background:#f8f8f8; font-size:1.4rem; color:#545454; margin:2.0rem auto; }
  .login_ft { bottom: 10px !important; padding:0 2.0rem; }
  }

/* 세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용) */
@media all and (max-width: 575px) {
  html { font-size: 70%; }
  .login_ft { height:6.5rem; }
  }

/* 가로모드 모바일 디바이스 (가로 해상도가 576px보다 크고 768px 보다 작은 화면에 적용)  */
@media all and (min-width: 576px) and (max-width: 767px) {
    html { font-size: 70%; }
  }

/*태블릿 디바이스 (가로 해상도가 768px보다 크고 991px 보다 작은 화면에 적용)  */
@media all and (min-width: 768px) and (max-width: 991px) {
  html { font-size: 70%; }
  }

/* 데스크탑 (가로 해상도가 992px보다 크고 1199px 보다 작은 화면에 적용)  */
@media all and (min-width: 992px) and (max-width: 1199px) {
  html { font-size: 70%; }
  }

/* 큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용)  */
@media all and (min-width: 1200px) {

  }