@charset "UTF-8";
@font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: swap; src: url("../fonts/PretendardVariable.woff2") format("woff2-variations"); }

body { margin: 0; }

/* 로그인 화면 */
.login-body { padding: 0; margin: 0; min-height: 100%; }

.login-bg-wrap { background-image: url(../../images/login/bg_login2.png); background-repeat: no-repeat; background-position: bottom left; }

.login-wrap { font-family: 'Pretendard Variable', 'Malgun Gothic', sans-serif, arial; display: flex; flex-direction: column; min-height: 100vh; background-image: url(../../images/login/bg_login1.png); background-repeat: no-repeat; background-position: top right; }

.login-header, .login-footer { flex: none; }

.login-header { padding: 20px 30px; }

/* .login-header .login-ci { display: block; width: 64px; height: 35px; background: url(../../images/login/img_login_ci.svg) no-repeat 100% 100%; } */
.login-header .login-ci { display: block; width: 101px; height: 42px; background: url(../../images/login/img_login_ci2.svg) no-repeat 100% 100%; }

.login-footer { font-family: inherit; font-size: 12px; text-align: center; color: #999999; padding: 0px 30px; margin-top: 60px; }

.login { flex: 1; display: flex; align-items: center; width: 1176px; margin: 0 auto; box-sizing: border-box; padding-bottom: 70px; }

.login .greeting { flex: 1; }

.login .text-greeting { font-family: inherit; font-size: 24px; font-weight: 400; color: #1F387A; text-align: left; margin-bottom: 20px; }

.login .text-greeting b { font-weight: 600; }

.login .img-greeting { text-align: right; margin-right: 26px; }

.login .img-greeting img { width: 623px; }

.login .system-logo { font-family: inherit; font-size: 16px; font-weight: 500; color: #000000; text-align: center; }

/* .login .system-logo .system-ci { display: inline-block; width: 79px; height: 44px; background: url(../../images/login/img_login_system_ci.svg) no-repeat 100% 100%; } */
.login .system-logo .system-ci { display: inline-block; width: 147px; height: 62px; background: url(../../images/login/img_login_system_ci2.svg) no-repeat 100% 100%; }

.login .system-logo b { font-size: 20px; font-weight: 900; }

.login .login-form-box { flex: none; width: 420px; height: 562px; border-radius: 20px; box-sizing: border-box; padding: 70px 50px 20px; background-color: #FFFFFF; box-shadow: 0 2px 21px 0 rgba(54, 57, 77, 0.15); }

.login-form { box-sizing: border-box; padding-left: 0; margin-top: 58px; list-style-type: none; }

.login-form li { margin-top: 40px; }

.login-form .login-inp { margin-top: 0; margin-bottom: 20px; }

.login-form .login-inp label { color: #333333; font-family: inherit; font-size: 16px; font-weight: bold; display: block; }

.login-form .login-inp input { font-family: inherit; font-size: 16px; width: 100%; height: 36px; border-width: 0; border-bottom: 1px solid #CCCCCC; outline-width: 0; }

.login-form .login-inp input:focus { border-bottom-color: #007DF3; }

.login-form .login-inp input:-webkit-autofill, .login-form .login-inp input:-webkit-autofill:hover, .login-form .login-inp input:-webkit-autofill:focus, .login-form .login-inp input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important; }

.login-form .button-login { width: 100%; height: 50px; border-width: 0; border-radius: 5px; cursor: pointer; background-color: #1F387A; }

.login-form .button-login .button-txt { color: #FFFFFF; font-size: 18px; font-weight: 700; line-height: 1; vertical-align: middle; }

.login-form .button-login:hover { background-color: #1a2f66; }

.login-relate { display: flex; justify-content: space-between; align-items: center; color: #333333; }

.login-relate .chklabel { cursor: pointer; display: inline-flex; align-items: center; column-gap: 5px; }

.login-relate .chklabel .checkbox-icon { display: block; position: relative; width: 18px; height: 18px; border-radius: 2px; background-color: #CCCCCC; }

.login-relate .chklabel .checkbox-icon:before { content: ''; display: block; width: 8px; height: 4px; border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(-45deg); position: absolute; left: 4px; top: 4px; }

.login-relate .chklabel .checkbox-txt { font-family: inherit; font-size: 16px; line-height: 1.3; }

.login-relate .checkbox { position: relative; }

.login-relate .checkbox input[type=checkbox] { visibility: hidden; position: absolute; left: 0; top: 0; }

.login-relate .checkbox input[type=checkbox]:checked + .chklabel .checkbox-icon { border-color: #007DF3; background-color: #007DF3; }

.login-relate .checkbox input[type=checkbox]:checked + .chklabel .checkbox-icon:before { display: block; }