@charset "UTF-8"; /* PC loginForm — default 서브 레이아웃(좌측메뉴·1250) 안 본문만 중앙 정렬 */ .sub_body #layout_content_body_right .auth_login_page { box-sizing: border-box; width: 100%; max-width: 630px; margin: 0 auto; padding: 0 0 2.5rem; font-family: "Noto Sans KR", sans-serif; } .sub_body #layout_content_body_right .auth_login_page.auth_login_page--loading { visibility: hidden; min-height: 26rem; } .sub_body #layout_content_body_right .auth_login_page_lead { margin: 0 0 1.25rem; font-size: 1.0625rem; line-height: 1.65; color: #6c757d; text-align: center; word-break: keep-all; } .sub_body #layout_content_body_right .auth_login_page .auth_login_card { padding: 2rem 2.25rem 2.125rem; border-radius: 14px; } .sub_body #layout_content_body_right .auth_login_page .auth_login_ty_tab.nav-tabs { gap: 0.75rem; margin-bottom: 1.5rem; padding: 0.5625rem; border-radius: 12px; } .sub_body #layout_content_body_right .auth_login_page .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link { min-height: 3.25rem; padding: 0.625rem 1rem; font-size: 1.0625rem; border-radius: 10px !important; } .sub_body #layout_content_body_right .auth_login_page .auth_login_lbl { margin-bottom: 0.5rem; font-size: 0.9375rem; } .sub_body #layout_content_body_right .auth_login_page .auth_login_inp_grp { margin-bottom: 1.25rem; } .sub_body #layout_content_body_right .auth_login_page .auth_login_inp_grp .form-control { min-height: 3.25rem; font-size: 1.0625rem; } .sub_body #layout_content_body_right .auth_login_page .auth_login_inp_grp .input-group-text { min-width: 3.25rem; font-size: 1.125rem; } .sub_body #layout_content_body_right .auth_login_page .auth_login_submit.btn-primary { min-height: 3.25rem; font-size: 1.0625rem; } .sub_body #layout_content_body_right .auth_login_page .auth_login_auto { margin-top: 1rem; } .sub_body #layout_content_body_right .auth_login_page .auth_login_auto_lbl { font-size: 0.9375rem; } .sub_body #layout_content_body_right .auth_login_page .auth_login_divider { margin: 1.75rem 0 1.375rem; font-size: 0.9375rem; } .sub_body #layout_content_body_right .auth_login_page .auth_login_social_tit { margin-bottom: 1.25rem; font-size: 1rem; } .sub_body #layout_content_body_right .auth_login_page .auth_login_social_lst.login_ico_lst { gap: 1rem; } .sub_body #layout_content_body_right .auth_login_page .auth_login_social_lst.login_ico_lst a { width: 84px; height: 84px; } .auth_login_card { box-sizing: border-box; width: 100%; padding: 1.375rem 1.5rem 1.5rem; background: #fff; border: 1px solid #dee2e6; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } .auth_login_card .auth_login_ty_tab.nav-tabs.mt-3 { margin-top: 0 !important; } .auth_login_page .auth_login_ty_tab.nav-tabs, .auth_login_card .auth_login_ty_tab.nav-tabs, .auth_login_dialog:not(.auth_login_dialog--mo) .auth_login_ty_tab.nav-tabs { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0.5rem; width: 100%; margin: 0 0 1.25rem; padding: 0.375rem; list-style: none; border: 1px solid #e0e0e0 !important; border-radius: 10px; background: #f5f5f5; box-sizing: border-box; } .auth_login_page .auth_login_ty_tab.nav-tabs > .nav-item, .auth_login_card .auth_login_ty_tab.nav-tabs > .nav-item, .auth_login_dialog:not(.auth_login_dialog--mo) .auth_login_ty_tab.nav-tabs > .nav-item { flex: 1 1 50%; min-width: 0; float: none !important; margin: 0 !important; } .auth_login_page .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link, .auth_login_card .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link, .auth_login_dialog:not(.auth_login_dialog--mo) .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.625rem; box-sizing: border-box; margin: 0 !important; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: #333; text-align: center; white-space: nowrap; background: #fff; border: 1px solid #ced4da !important; border-radius: 8px !important; border-bottom-color: #ced4da !important; opacity: 1; } .auth_login_page .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link:hover, .auth_login_page .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link:focus, .auth_login_card .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link:hover, .auth_login_card .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link:focus, .auth_login_dialog:not(.auth_login_dialog--mo) .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link:hover, .auth_login_dialog:not(.auth_login_dialog--mo) .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link:focus { color: #3366b9; border-color: #3366b9 !important; background: rgba(51, 102, 185, 0.08); text-decoration: none; opacity: 1; } .auth_login_page .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link.active, .auth_login_page .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link.active:hover, .auth_login_page .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link.active:focus, .auth_login_card .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link.active, .auth_login_card .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link.active:hover, .auth_login_card .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link.active:focus, .auth_login_dialog:not(.auth_login_dialog--mo) .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link.active, .auth_login_dialog:not(.auth_login_dialog--mo) .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link.active:hover, .auth_login_dialog:not(.auth_login_dialog--mo) .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link.active:focus { color: #fff !important; font-weight: 600; border-color: #3366b9 !important; background: #3366b9; opacity: 1; } .auth_login_lbl { display: block; margin-bottom: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: #495057; } .auth_login_inp_grp { margin-bottom: 1rem; } .auth_login_inp_grp .form-control { min-height: 2.75rem; font-size: 0.9375rem; } .auth_login_inp_grp .input-group-text { min-width: 2.75rem; justify-content: center; background: #f8f9fa; color: #495057; } .auth_login_submit.btn-primary { width: 100%; min-height: 2.75rem; margin: 0; font-size: 0.9375rem; font-weight: 600; background-color: #3366b9 !important; border-color: #3366b9 !important; color: #fff !important; opacity: 1 !important; } .auth_login_submit.btn-primary:hover, .auth_login_submit.btn-primary:focus { background-color: #2a5294 !important; border-color: #2a5294 !important; color: #fff !important; opacity: 1 !important; } .auth_login_submit.btn-primary i { color: #fff !important; opacity: 1 !important; } .auth_login_auto { margin-top: 0.75rem; } .auth_login_auto_lbl { font-size: 0.875rem; color: #495057; cursor: pointer; margin: 0; } .auth_login_divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.375rem 0 1.125rem; font-size: 0.8125rem; font-weight: 500; color: #adb5bd; } .auth_login_divider::before, .auth_login_divider::after { content: ""; flex: 1; height: 1px; background: #e9ecef; } .auth_login_social { text-align: center; } .auth_login_social_tit { margin: 0 0 1rem; font-size: 0.875rem; font-weight: 500; color: #6c757d; word-break: keep-all; } .auth_login_social_lst.login_ico_lst { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.625rem; margin: 0; padding: 0; list-style: none; } .auth_login_social_lst.login_ico_lst > li { margin: 0; padding: 0; list-style: none; } .auth_login_social_lst.login_ico_lst a { display: block; box-sizing: border-box; width: 56px; height: 56px; padding: 0; padding-bottom: 0; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .auth_login_social_lst.login_ico_lst > li { flex: 0 0 auto; width: auto; } /* 로그인 팝업(dialog) — loginForm(pcAuthLoginCard)과 동일, 가로 스크롤 방지 */ .auth_login_dialog { box-sizing: border-box; width: 100%; max-width: 100%; overflow-x: hidden; } .auth_login_dialog .auth_login_page--dialog { box-sizing: border-box; width: 100%; max-width: 100%; overflow-x: hidden; } .auth_login_dialog .auth_login_card { box-sizing: border-box; width: 100%; max-width: 100%; } .auth_login_dialog .auth_login_ty_tab.nav-tabs > .nav-item > .nav-link { overflow: hidden; text-overflow: ellipsis; } .auth_login_dialog:not(.auth_login_dialog--mo) .login_ico_lst, .auth_login_dialog:not(.auth_login_dialog--mo) .auth_login_social_lst.login_ico_lst { padding: 0 !important; margin: 0; } .auth_login_dialog:not(.auth_login_dialog--mo) .login_ico_lst > li, .auth_login_dialog:not(.auth_login_dialog--mo) .auth_login_social_lst.login_ico_lst > li { width: auto !important; padding: 0 !important; margin: 0; } .auth_login_dialog:not(.auth_login_dialog--mo) .auth_login_social_lst.login_ico_lst a { padding: 0 !important; padding-bottom: 0 !important; } .SHUVIC_JQUERY_DIALOG .ui-dialog-content:has(.auth_login_dialog) { overflow-x: hidden !important; box-sizing: border-box; } /* 모바일 로그인 팝업 — loginForm(appLoginForm)과 동일(카드·외곽선·PC 라운드 없음) */ .auth_login_dialog--mo { box-sizing: border-box; width: 100%; max-width: 100%; padding: 0; overflow-x: hidden; background: #fff; } .auth_login_dialog--mo .default_login_form { height: auto; } .auth_login_dialog--mo .default_login_body_wrap { position: static; margin-top: 0; transform: none; } .auth_login_dialog--mo .default_login_body { max-width: 500px; } .SHUVIC_JQUERY_DIALOG .ui-dialog-content:has(.auth_login_dialog--mo) { padding: 0 !important; overflow-x: hidden !important; height: auto !important; max-height: none !important; } .SHUVIC_JQUERY_DIALOG:has(.auth_login_dialog--mo) .ui-dialog-titlebar { border-radius: 0; } .ui-widget.ui-widget-content.SHUVIC_JQUERY_DIALOG:has(.auth_login_dialog--mo):not(.INDEX_POPUP_WRAP) { height: auto !important; max-height: 100dvh; overflow-y: auto; } .SHUVIC_JQUERY_DIALOG:has(.auth_login_dialog--mo) .ui-dialog-buttonpane { display: none !important; } /* 푸터·고객소통함은 항상 전체 폭(1250) 유지 */ .sub_body .layout-bottom-wrap { display: block; width: 100%; clear: both; } .sub_body .layout-bottom-wrap footer { display: block; width: 100%; } .sub_body .layout-bottom-wrap footer .dafl_foot_cus_req_bas_wrap { width: 100%; } .sub_body .layout-bottom-wrap footer .dafl_foot_cus_req_bas_container, .sub_body .layout-bottom-wrap footer .foot_body { width: 1250px; max-width: 100%; margin-left: auto; margin-right: auto; } /* SMS/이메일 인증번호 입력 (sendNumAuthForm dialog) */ .send_num_auth_form.send_num_auth_form_root, .send_num_auth_form .send_num_auth_form_root { box-sizing: border-box; width: 100%; font-family: "Noto Sans KR", sans-serif; } .send_num_auth_notice { box-sizing: border-box; margin-bottom: 1.125rem; padding: 1rem 1.125rem; border-radius: 10px; border: 1px solid rgba(51, 102, 185, 0.25); background: rgba(51, 102, 185, 0.08); } .send_num_auth_notice_main { margin: 0 0 0.375rem; font-size: 0.9375rem; line-height: 1.55; color: #212529; word-break: break-all; } .send_num_auth_notice_valu { color: #3366b9; font-weight: 700; } .send_num_auth_notice_sub { margin: 0; font-size: 0.8125rem; color: #495057; } .send_num_auth_notice_tip { margin: 0.625rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: #495057; } .send_num_auth_timer_wrap { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.125rem; padding: 0.625rem 0.75rem; border-radius: 8px; background: #f8f9fa; border: 1px solid #e9ecef; } .send_num_auth_timer_lbl { font-size: 0.875rem; font-weight: 600; color: #495057; } .send_num_auth_timer_val { font-size: 1.125rem; font-weight: 700; color: #3366b9; letter-spacing: 0.02em; } .send_num_auth_lbl { display: block; margin-bottom: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: #495057; } .send_num_auth_inp { min-height: 3rem; font-size: 1.375rem !important; font-weight: 600; text-align: center; letter-spacing: 0.35em; } .send_num_auth_inp::placeholder { letter-spacing: 0.2em; font-weight: 400; color: #adb5bd; } .send_num_auth_actions { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0.625rem; margin-top: 1.125rem; } .send_num_auth_btn { flex: 1 1 50%; min-height: 2.75rem; margin: 0; font-size: 0.9375rem; font-weight: 600; display: flex; align-items: center; justify-content: center; } .send_num_auth_btn_primary.btn-primary { background-color: #3366b9 !important; border-color: #3366b9 !important; color: #fff !important; opacity: 1 !important; } .send_num_auth_btn_primary.btn-primary:hover, .send_num_auth_btn_primary.btn-primary:focus { background-color: #2a5294 !important; border-color: #2a5294 !important; color: #fff !important; opacity: 1 !important; } .send_num_auth_help { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid #e9ecef; font-size: 0.8125rem; line-height: 1.6; text-align: center; color: #6c757d; word-break: keep-all; } .send_num_auth_help_tel { font-weight: 700; color: #3366b9 !important; opacity: 1 !important; } .send_num_auth_help_tel:hover { text-decoration: none; opacity: 1 !important; } .ui-dialog.send_num_auth_form, .login_box.dialog_login_box .send_num_auth_form { height: auto !important; } /* 미등록 이메일·휴대폰 로그인 안내 (cmnAuth.alertNotRegisteredAuthValu) */ .auth_not_reg_dlg_wrap.ui-dialog .ui-dialog-titlebar { background: #3366b9; border-color: #3366b9; color: #fff; } .auth_not_reg_dlg_wrap.ui-dialog .ui-dialog-title { font-weight: 600; font-size: 1rem; } .auth_not_reg_dlg_wrap .ui-dialog-content { padding: 1.25rem 1.375rem 1rem !important; font-family: "Noto Sans KR", sans-serif; } .auth_not_reg_dlg_lead { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.65; color: #343a40; word-break: keep-all; } .auth_not_reg_dlg_valu_box { box-sizing: border-box; margin-bottom: 1.125rem; padding: 0.875rem 1rem; border-radius: 10px; border: 1px solid rgba(51, 102, 185, 0.35); background: #f0f4fc; text-align: center; } .auth_not_reg_dlg_valu_lbl { display: block; margin-bottom: 0.375rem; font-size: 0.75rem; font-weight: 600; color: #6c757d; letter-spacing: -0.02em; } .auth_not_reg_dlg_valu { display: block; font-size: 1.0625rem; font-weight: 700; color: #3366b9; word-break: break-all; line-height: 1.45; } .auth_not_reg_dlg_valu_empty { color: #868e96; font-weight: 500; } .auth_not_reg_dlg_lst { margin: 0 0 1rem; padding-left: 1.125rem; font-size: 0.8125rem; line-height: 1.65; color: #495057; } .auth_not_reg_dlg_lst > li { margin-bottom: 0.375rem; } .auth_not_reg_dlg_lst > li:last-child { margin-bottom: 0; } .auth_not_reg_dlg_foot { margin: 0; padding-top: 0.75rem; border-top: 1px solid #e9ecef; font-size: 0.75rem; color: #868e96; text-align: center; } .auth_not_reg_dlg_wrap + .ui-dialog-buttonpane .btn { min-width: 5.5rem; font-weight: 600; } /* 오피스 로그인 팝업 (officeLoginPopForm) */ .auth_office_login_dlg_wrap.ui-dialog .ui-dialog-titlebar { background: #3366b9; border-color: #3366b9; color: #fff; } .auth_office_login_dlg_wrap.ui-dialog .ui-dialog-title { font-weight: 600; font-size: 1rem; } .auth_office_login_dlg_wrap .ui-dialog-content { padding: 1rem 1.25rem 1.125rem !important; font-family: "Noto Sans KR", sans-serif; } .auth_office_login_dialog { box-sizing: border-box; width: 100%; } .auth_office_login_dialog .auth_office_login_card.auth_login_card { padding: 0; border: none; box-shadow: none; background: transparent; } .auth_office_login_notice { box-sizing: border-box; margin-bottom: 1.25rem; padding: 1rem 1.125rem; border-radius: 10px; border: 1px solid rgba(51, 102, 185, 0.25); background: rgba(51, 102, 185, 0.08); } .auth_office_login_notice_main { margin: 0 0 0.5rem; font-size: 0.875rem; line-height: 1.6; color: #212529; word-break: keep-all; } .auth_office_login_notice_ico { margin-right: 0.375rem; color: #3366b9; } .auth_office_login_notice_sub { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: #495057; word-break: keep-all; } .auth_office_login_dialog .auth_login_submit { margin-top: 0.25rem; } .ui-dialog.auth_office_login_dlg_wrap { height: auto !important; } .auth_office_login_app_btn { box-sizing: border-box; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(51, 102, 185, 0.45); background: #f0f4fc; color: #3366b9; font-size: 1.125rem; text-decoration: none !important; } .auth_office_login_app_btn:hover, .auth_office_login_app_btn:focus { background: #3366b9; border-color: #3366b9; color: #fff; }