@charset "utf-8";
@import url("font.css");

/* 2차 인증 화면 전용
   1. 2차 인증 관리 (xMain/mb/cop_info_edt/mfa_adm.aspx)
   2. 로그인 2차 인증·첫 등록 팝업 (xMain/mb/mb_login/login.aspx)
   3. 회원가입 이메일 인증 (xMain/mb/mb_join/info_inpt.aspx), 마이페이지 이메일 변경 (xMain/mb/mb_info_edt/per_info_chge/per_info_chge.aspx) - 맨 아래 */

/* 타이틀 */
/* 공용 css 의 * { font-family } 가 자식마다 걸리므로 상속 대신 자식에도 직접 지정 */
.mfa-adm-title { text-align: left; margin: 22px 0 20px; }
.mfa-adm-title, .mfa-adm-title * { font-family: "Noto Sans KR", sans-serif; }
.mfa-adm-title h2 { margin: 0; padding-bottom: 12px; border-bottom: 1px solid #e5e5e5; font-size: 20px; font-weight: 700; line-height: 28px; color: #1d4b94; letter-spacing: -1px; }

/* 비밀번호 재입력 (per_info_chge.aspx 와 같은 입력란) */
.mfa-adm-pwd .box, .mfa-adm-pwd .offInput3 { font: 12px "verdana"; color: #434343; border: 1px solid #c8c8c8; padding: 4px 0 0 4px; background-color: #fff; }
.mfa-adm-pwd .onInput3 { font: 14px "verdana"; color: #434343; border: 2px solid #d93300; padding: 4px 0 0 4px; background-color: #fff; }

/* 관리 영역 */
.mfa-adm { text-align: left; font-size: 12px; color: #555; letter-spacing: -0.5px; }
.mfa-adm, .mfa-adm * { font-family: "Noto Sans KR", sans-serif; }
.mfa-adm a:link, .mfa-adm a:visited { font-family: "Noto Sans KR", sans-serif; }   /* 공용 css 의 a:link { font-family: 돋움 } 이 .mfa-adm * 보다 우선이라 링크(페이지 번호)에 직접 지정 */
.mfa-adm input, .mfa-adm select, .mfa-adm button { letter-spacing: -0.5px; }
.mfa-adm .mfa-adm-desc { margin: 0 0 20px; font-size: 14px; color: #333; }
.mfa-adm .mfa-adm-desc strong { color: #1d4b94; font-weight: 700; }
.mfa-adm .mfa-section-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #333; }

/* 회사 설정 (목록) */
.mfa-adm .mfa-settings { margin: 0 0 10px; padding: 0; list-style: none; border-top: 2px solid #2c5aa0; }
.mfa-adm .mfa-setting { display: table; width: 100%; table-layout: fixed; border-bottom: 1px solid #e6e9ee; }
.mfa-adm .mfa-setting .name, .mfa-adm .mfa-setting .ctrl, .mfa-adm .mfa-setting .help { display: table-cell; padding: 12px; vertical-align: middle; line-height: 18px; }
.mfa-adm .mfa-setting .name { width: 140px; font-size: 13px; font-weight: 700; color: #333; }
.mfa-adm .mfa-setting .ctrl { width: 180px; white-space: nowrap; }
.mfa-adm .mfa-setting .help { color: #888; word-break: keep-all; }
.mfa-adm .mfa-setting label { margin-right: 10px; cursor: pointer; }
.mfa-adm .mfa-setting input[type=radio] { vertical-align: middle; }
.mfa-adm .mfa-setting.disabled .name, .mfa-adm .mfa-setting.disabled .help, .mfa-adm .mfa-setting.disabled label { color: #bbb; cursor: default; }
.mfa-adm .mfa-setting-apply { margin-bottom: 24px; text-align: right; }

/* 표 (직원 목록) */
.mfa-adm .mfa-table { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 2px solid #2c5aa0; margin-bottom: 24px; }
.mfa-adm .mfa-table th, .mfa-adm .mfa-table td { padding: 10px 6px; border-bottom: 1px solid #e6e9ee; border-left: 1px solid #f0f2f5; text-align: center; vertical-align: middle; word-break: keep-all; line-height: 18px; }
.mfa-adm .mfa-table th:first-child, .mfa-adm .mfa-table td:first-child { border-left: 0; }
.mfa-adm .mfa-table thead th { background: #f3f6fb; font-size: 13px; font-weight: 700; color: #333; white-space: nowrap; }
.mfa-adm .mfa-table tbody th { background: #fff; font-weight: 700; color: #333; }
.mfa-adm .mfa-table tbody td { background: #fff; color: #555; }
.mfa-adm .mfa-table td.left { text-align: left; padding-left: 12px; }
.mfa-adm .mfa-table td.email { word-break: break-all; }
.mfa-adm .mfa-table tr.changed td { background: #fffbe6; }
.mfa-adm .mfa-table label { margin: 0 6px; cursor: pointer; }
.mfa-adm .mfa-table input[type=radio], .mfa-adm .mfa-table input[type=checkbox] { vertical-align: middle; }

/* 스위치 */
.mfa-adm .mfa-switch { display: inline-block; position: relative; width: 40px; height: 22px; border-radius: 11px; background: #c9ced6; vertical-align: middle; cursor: pointer; transition: background-color 0.2s; }
.mfa-adm .mfa-switch:after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.2s; }
.mfa-adm .mfa-switch.on { background: #2c5aa0; }
.mfa-adm .mfa-switch.on:after { left: 21px; }
.mfa-adm .mfa-switch.disabled { opacity: 0.4; cursor: default; }

/* 검색줄 (한 줄) */
.mfa-adm .mfa-toolbar { margin-bottom: 8px; white-space: nowrap; overflow: hidden; }
.mfa-adm .mfa-toolbar select, .mfa-adm .mfa-toolbar input { box-sizing: border-box; height: 28px; border: 1px solid #d5d9e0; padding: 0 4px; font-size: 12px; color: #333; vertical-align: middle; }
.mfa-adm .mfa-toolbar .right { float: right; }

/* 버튼 */
.mfa-adm .mfa-btn { display: inline-block; box-sizing: border-box; height: 28px; line-height: 26px; padding: 0 10px; border: 1px solid #d5d9e0; background: #fff; color: #333; vertical-align: middle; cursor: pointer; }
.mfa-adm .mfa-btn.primary { border-color: #2c5aa0; background: #2c5aa0; color: #fff; font-weight: 700; }
.mfa-adm .mfa-btn.primary.disabled { border-color: #c9ced6; background: #c9ced6; cursor: default; }
.mfa-adm .mfa-btn-s { display: inline-block; padding: 0 6px; border: 1px solid #2c5aa0; background: #fff; color: #2c5aa0; font-size: 11px; line-height: 18px; vertical-align: middle; cursor: pointer; }

.mfa-adm .mfa-total { overflow: hidden; margin-bottom: 6px; line-height: 28px; color: #333; }
.mfa-adm .mfa-total .mfa-all { float: right; }
.mfa-adm .mfa-btn.disabled { color: #bbb; cursor: default; }
.mfa-adm .mfa-table thead .mfa-switch { margin-top: 4px; }
.mfa-adm .mfa-total strong { color: #1d4b94; }

/* 상태 태그 */
.mfa-adm .mfa-tag { display: inline-block; padding: 0 6px; font-size: 11px; line-height: 18px; white-space: nowrap; }
.mfa-adm .mfa-tag.y { background: #f3f6fb; color: #1d4b94; }
.mfa-adm .mfa-tag.n { background: #f5f5f5; color: #888; }
.mfa-adm .mfa-tag.v { background: #f1f7f3; color: #3c7a52; }
.mfa-adm .mfa-tag.r { background: #fbf2f1; color: #b5483f; }

/* 페이징 */
.mfa-adm .mfa-paging { margin: -8px 0 8px; text-align: center; }
.mfa-adm .mfa-paging a, .mfa-adm .mfa-paging span { display: inline-block; min-width: 28px; height: 32px; line-height: 32px; margin: 0 2px; font-size: 13px; color: #555; text-decoration: none; vertical-align: middle; }
.mfa-adm .mfa-paging .cur { font-weight: 700; color: #1d4b94; }
.mfa-adm .mfa-paging a.box { min-width: 34px; border: 1px solid #ddd; }

/* ===== 로그인 2차 인증(01)·첫 등록(02) 팝업 (login.aspx #mfaLayer) =====
   이메일은 40자까지 한 줄에 들어가도록 폭을 잡는다 */
.mfa_dim, .mfa_dim * { font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.3px; }
.mfa_dim { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; }
.mfa_popup { position: absolute; left: 50%; top: 50%; width: 520px; padding: 32px 28px 28px; background: #fff; border-radius: 6px; text-align: left; box-sizing: border-box; transform: translate(-50%, -50%); }
.mfa_popup h2 { margin: 0 0 16px; font-size: 20px; font-weight: 700; color: #222; }
.mfa_close { position: absolute; right: 16px; top: 12px; font-size: 24px; color: #888; text-decoration: none; cursor: pointer; }
.mfa_desc { margin-bottom: 14px; font-size: 14px; line-height: 22px; color: #444; }
.mfa_masked { font-weight: 700; color: #222; word-break: break-all; }
.mfa_field { position: relative; margin-bottom: 8px; }
.mfa_field input { width: 100%; height: 42px; padding: 0 64px 0 12px; border: 1px solid #ccc; font-size: 15px; box-sizing: border-box; }
.mfa_timer { position: absolute; right: 12px; top: 11px; font-size: 14px; color: #e33; }
.mfa_error { display: none; margin-bottom: 8px; font-size: 13px; color: #e33; }
.mfa_error.mfa_info { color: #1a6ed8; }
.mfa_note { font-size: 13px; color: #888; }
.mfa_btns { overflow: hidden; margin-top: 12px; }
.mfa_btn { float: left; width: 49%; height: 44px; border: 1px solid #ccc; background: #fff; font-size: 15px; color: #333; cursor: pointer; }
.mfa_btn + .mfa_btn { margin-left: 2%; }
.mfa_btn.mfa_primary { border-color: #1a6ed8; background: #1a6ed8; color: #fff; }
.mfa_btn.mfa_disabled { color: #aaa; cursor: default; }
.mfa_reg { margin-bottom: 12px; }
.mfa_radio { display: block; margin-bottom: 10px; font-size: 14px; color: #333; white-space: nowrap; }
.mfa_radio input[type=radio] { vertical-align: middle; }
.mfa_reg_email { width: 330px; height: 32px; margin-left: 4px; padding: 0 8px; border: 1px solid #ccc; font-size: 14px; box-sizing: border-box; vertical-align: middle; }
.mfa_reg_email:disabled { background-color: #f3f3f3; color: #888; }   /* 회원가입 화면 잠금 음영과 같은 색 */

/* ===== 회원가입 이메일 인증 (info_inpt.aspx), 마이페이지 이메일 변경 (per_info_chge.aspx) 이메일·인증번호 행 ===== */
.mfa-sbtn { display: inline-block; box-sizing: border-box; height: 24px; line-height: 22px; margin-left: 4px; padding: 0 8px; border: 1px solid #2c5aa0; background: #fff; color: #2c5aa0; font-size: 12px; vertical-align: middle; cursor: pointer; }
.mfa-sbtn.blue { background: #2c5aa0; color: #fff; }
.mfa-sbtn.disabled { border-color: #c9ced6; color: #aaa; cursor: default; }
.mfa-signup-timer { margin: 0 4px; font-size: 12px; color: #e33; vertical-align: middle; }
.mfa-signup-ok { margin-top: 4px; font-size: 12px; font-weight: 700; color: #3c7a52; }
.mfa-signup-note { font-weight: 400; color: #555; }
.mfa-signup-no { margin-top: 4px; font-size: 12px; font-weight: 700; color: #e33; }
.mfa-signup-msg { margin-top: 4px; font-size: 12px; color: #555; }
.mfa-signup-msg.red { color: #e33; }
.mfa-signup-msg.blue { color: #1a6ed8; }