@charset "utf-8";

/* 로그인 */
.busi-login {display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background: url('../../images/main/bg-login.jpg') no-repeat center top; background-size: cover;}
.busi-login.pds {background: url('../../images/main/bg-login2.jpg') no-repeat center top;}
.busi-login .box {display: flex; align-items: center; width: 100%; max-width: 1200px;}
.busi-login .logo {flex-grow: 1; padding-right: 50px;}
.busi-login .logo .name {padding-left: 135px; font-family: pb; font-size: 26px; color: #ffffff;}
.busi-login .form {flex-shrink: 0; width: 530px; padding: 70px 50px; background: #fff; border-radius: 5px;}
.busi-login .form .title strong {font-family: pb; font-size: 35px; color: #000000;}
.busi-login .form .title p {margin-top: 7px; font-family: pm; font-size: 18px; color: #333333;}
.busi-login .form .input > div {position: relative;}
.busi-login .form .input > div::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #cecece;}
.busi-login .form .input > div.focus::after {height: 3px; background: #1877f2;}
.busi-login .form .input > div::before {content: ''; position: absolute; left: 10px; top: 10px; width: 20px; height: 25px;}
.busi-login .form .input .form-id {margin-top: 30px;}
.busi-login .form .input .form-id::before {background: url('../../images/main/ic-login-id.png') no-repeat center;}
.busi-login .form .input .form-id.focus::before {background: url('../../images/main/ic-login-id-on.png') no-repeat center;}
.busi-login .form .input .form-pw {margin-top: 20px;}
.busi-login .form .input .form-pw::before {background: url('../../images/main/ic-login-pw.png') no-repeat center;}
.busi-login .form .input .form-pw.focus::before {background: url('../../images/main/ic-login-pw-on.png') no-repeat center;}
.busi-login .form .input input {width: 100%; height: 50px; border: 0; line-height: 50px; font-family: pr; font-size: 18px; text-indent: 50px; color: #000;}
.busi-login .form .input input:focus {outline: none;}
.busi-login .form .input input:focus-visible {box-shadow: inset 0 0 0 0 #333}
.busi-login .form .input input::placeholder {color: #999999;}
.busi-login .form .move-row {display: flex; margin-top: 30px;}
.busi-login .form .move-sel {flex-grow: 1; padding-right: 10px;}
.busi-login .form .move-sel select {display: flex; align-items: center; width: 100%; height: 50px; padding-left: 20px; background: #fff url('../../images/main/ic-login-arrow.png') no-repeat right center; border: 1px solid #BCBCBC; border-radius: 5px; font-family: pm; font-size: 17px; color: #666; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.busi-login .form .move-button {flex-shrink: 0; width: 80px;}
.busi-login .form .btn-move {display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; background: #03203f; border-radius: 4px; font-family: pm; font-size: 17px; color: #fff;}
.busi-login .button {margin-top: 50px;}
.busi-login .button .btn-login {display: flex; justify-content: center; align-items: center; width: 100%; height: 60px; background: #1877f2; border-radius: 30px; font-family: pb; font-size: 20px; color: #fff; cursor: pointer;}
.busi-login .button .btn-login:hover {background: #0b64d8;}
.busi-login .info {margin-top: 50px; padding-top: 30px; border-top: 1px solid #cecece;}
.busi-login .info li {position: relative; padding-left: 15px; font-family: pm; font-size: 16px; color: #333333;}
.busi-login .info li::after {content: ''; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; background: #1877f2; border-radius: 100%;}
.busi-login .footer {position: absolute; left: 0; bottom: 0; width: 100%; padding-bottom: 20px; font-family: pr; font-size: 14px; text-align: center; color: #ffffff;}

@media (max-width: 1200px) {
	.busi-login .box {padding: 0 30px;}
}

@media (max-width: 1070px) {
	.busi-login .logo .name {padding-left: 32%;}
}

@media (max-width: 900px) {
	.busi-login .box {flex-wrap: wrap;}
	.busi-login .logo {width: 100%; padding-right: 0; padding-bottom: 30px; text-align: center;}
	.busi-login .logo .img {position: relative; left: -40px;}
	.busi-login .logo .name {padding-left: 0; padding-top: 10px;}
	.busi-login .form {width: 100%;}
	.busi-login .footer {padding: 20px; font-size: 12px;}
}

@media (max-width: 800px) {
	.busi-login .logo .img {position: relative; left: -30px; padding: 0 60px;}
	.busi-login .form {padding: 30px;}
	.busi-login .form .title strong {font-size: 30px;}
	.busi-login .form .title p {font-size: 16px;}
	.busi-login .form .input input {font-size: 16px;}
	.busi-login .info li {font-size: 15px;}
	.busi-login .info li::after {top: 8px;}
}

.icon-sBtn {
    display: inline-block;
    height: 30px;
    vertical-align: middle;
    padding: 3px 10px 3px 25px;
    background-color: #fff !important;
    background-repeat: no-repeat;
    background-position: 9px 9px;
    border: 1px solid #a6a6a6;
    border-radius: 5px;
    font-size: 14px;
    color: #333 !important;
}

.icon-g-pw {
    background-image: url(/Web-home/_UI/images/siteMngr/ic-login-pw.png);
    background-size: 12px;
    background-position: 6px 6px;
    font-size: 14px !important;
}