@charset "utf-8";

.login {display: flex; flex-direction: column; min-height: 100vh;}
.login > * {width: 100%;}
.login .brand {display: flex; align-items: center; justify-content: center; height: 120px; gap: 0 80px;}
.login .brand .logo {width: 247px; height: 60px; background: url('../img/logo.png') no-repeat center/100%;}
.login .brand .txt-system {font-weight: 700; font-size: 40px; letter-spacing: 0; color: #343A40; position: relative;}
.login .brand .txt-system::before {content: ""; width: 1px; height: 40px; background-color: #CED4DA; position: absolute; left: -40px; top: 50%; transform: translateY(-50%);}
.login .visual {display: flex; height: 600px; align-items: center; justify-content: center; background: url('../img/bg_login.png') no-repeat center/cover;}
.login .visual p {font-weight: 700; font-size: 50px; line-height: 1.3; text-align: center; color: #ffffff;}
.login .login-form {flex: 1 0; padding: 60px 0; display: flex; justify-content: center;}
.login .login-form .inner {display: flex; align-items: flex-start; width: 430px; gap: 0 10px;}
.login .login-form .inner .form-area {flex: 1 0;}
.login .login-form .inner .form-area .form {display: flex; align-items: center; justify-content: flex-start;}
.login .login-form .inner .form-area .form + .form {margin-top: 10px;}
.login .login-form .inner .form-area .form .form-tit {flex: none; width: 60px; display: flex; align-items: center; justify-content: flex-start;}
.login .login-form .inner .form-area .form .form-tit .tit {color: #868E96; font-size: 14px; line-height: 1.215;}
.login .login-form .inner .form-area .form .form-cont {flex: 1 0;}
.login .login-form .inner .form-area .form .form-cont input[type="text"],
.login .login-form .inner .form-area .form .form-cont input[type="password"] {display: block; width: 100%; height: 40px; border: 1px solid #CED4DA; border-radius: 4px; padding: 0 20px; font-size: 14px;}
.login .login-form .inner .login-support {flex: none; width: 150px;}
.login .login-form .inner .login-support .btn-login {width: 100%; height: 90px; background-color: #66A80F; border-radius: 4px; color: #ffffff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 0 8px;}
.login .login-form .inner .login-support .btn-login::before {content: ""; width: 20px; height: 20px; background: url('../img/ic_login.png') no-repeat center/100%; display: inline-block;}
.login .login-form .inner .login-support .check {width: fit-content; margin-top: 20px;}
.login .login-form .inner .login-support .check input[type="checkbox"] {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.login .login-form .inner .login-support .check input[type="checkbox"] + label {position: relative; min-width: 16px; min-height: 16px; width: fit-content; display: block;}
.login .login-form .inner .login-support .check input[type="checkbox"] + label::before {content: ""; width: 16px; height: 16px; background: url('../img/ic_inp_check_off.png') no-repeat center; background-size: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.login .login-form .inner .login-support .check input[type="checkbox"] + label p {font-size: 14px; line-height: 1.4; color: #343434; padding-left: 24px; font-weight: 500;}
.login .login-form .inner .login-support .check input[type="checkbox"]:checked + label::before {background: url('../img/ic_inp_check_on.png') no-repeat center/100%;}
.login .login-bottom {padding: 40px 0;}
.login .login-bottom .copyright {color: #868E96; font-size: 14px; line-height: 1.3; text-align: center;}