@charset "UTF-8";
@import url('darkmode.css?version=20260519');

.popup_bg {display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.45); position: fixed; left: 0; top: 0; z-index: 10;}
.popup {display: none; width: 380px; box-sizing: border-box; padding: 40px; border-radius: 6px; background-color: #fff; position: absolute; left: 50%; top: 33%; transform: translate(-50%, -50%); z-index: 100;}
.popup .content {text-align: center; font-size: 0;}
.popup p {line-height: 1.4;}
.popup .btn_wrap {margin-top: 40px; font-size: 0;}

/*popup title*/
.popup_tit {font-size: 24px; font-weight: 400; padding-bottom: 20px; border-bottom: 1px solid #ccc; margin-bottom: 20px;}

/*margin*/
.MT40 {margin-top: 40px;}

/*button*/
.popup .btn_close {display: inline-block; width: 24px; height: 24px; margin-top: 8px; background: url('../images/popup/icon_close.svg') center center no-repeat; font-size: 0;float: right;}
.popup .btn {display: inline-block; height: 40px; box-sizing: border-box; padding: 0 20px; border-radius: 6px; text-align: center;}
.popup .btn span {line-height: 40px; color: #fff; font-size: 16px;}

.popup .btn.gray {background-color: #8a8e99;}
.popup .btn.blue {background-color: #0098d8;}
.popup .btn.green {background-color: #2ebbc2;}
.popup .btn.brown {background-color: #9a8c72;}

/*input*/
input[type="text"]{height: 40px; box-sizing: border-box; padding: 0 16px; border: 1px solid #0098d8; border-radius: 6px; line-height: 40px; font-size: 16px;}

/*2차 인증*/
.cert .otp_wrap {margin-top: 20px; margin-bottom: 10px;}
.cert .otp_wrap .otp_form {display: flex; justify-content:space-around;}
.cert .otp_wrap input {width: 47px; padding:0 17px;font-size:22px;}
.cert .otp_wrap .btn_wrap {margin-top:16px;}
.cert .otp_wrap .btn_wrap .btn {height: 50px; padding: 0; width: 49%;}
.cert .otp_wrap .btn_wrap .btn span {line-height: 50px;}
.cert .otp_wrap .btn_wrap .btn.blue {float: right;}
.cert .otp_wrap .btn_wrap .btn.blue.login {margin-top: 15px;width:100%;}
.cert .btn.brown {width: 100%; margin-top: 15px;}

/*로그인 실패 횟수 초과*/
.fail {display: none;}
.fail .btn_wrap .btn {width: 49%;}
.fail .btn_wrap .btn.gray {float: right;}

/*2차 인증 등록/갱신*/
.enroll p {margin-top: 20px;}
.enroll fieldset {margin-top: 40px;}
.enroll fieldset input {width: 190px;}
.enroll fieldset .btn {float: right;}

/*responsive*/
@media all and (max-width: 420px) {
    .popup {width: 300px; padding: 30px; top: 60px; transform: translate(-50%, 0);}
    .popup_tit {font-size: 20px;}
    .popup_tit .btn_close {width: 22px; height: 22px; margin-top: 4px;}

    .cert .otp_wrap .btn_wrap .btn span {font-size: 14px;}

    .fail .btn_wrap .btn {padding: 0;}

    .enroll fieldset input {width: 54%;}
}