@charset "utf-8";
/* version 1.0 | 2019-04-11 */

/********************************************************************************************************
  font
*********************************************************************************************************/
/*-------------------------------------------------------------------------------
    나눔고딕
-------------------------------------------------------------------------------*/
@font-face {
	font-family: 'NanumGothic';
	font-style: normal;
	font-weight: 400;
	src: 	local("Nanum Gothic"),
			local("NanumGothicR"),
			local("나눔고딕"),
			url(../font/NanumGothic-Regular.eot?#iefix&_xclickstatic) format('embedded-opentype'),
			url(../font/NanumGothic-Regular.woff2?_xclickstatic) format('woff2'),
			url(../font/NanumGothic-Regular.woff?_xclickstatic) format('woff'), 
			url(../font/NanumGothic-Regular.ttf?_xclickstatic) format('truetype');
} 

@font-face {
	font-family: 'NanumGothic';
	font-style: normal;
	font-weight: 600;
	src: 	local("Nanum Gothic Bold"),
			local("NanumGothicB"),
			local("나눔고딕 Bold"),
			url(../font/NanumGothic-Bold.eot?#iefix) format("embedded-opentype"),
			url(../font/NanumGothic-Bold.woff2) format("woff2"),
			url(../font/NanumGothic-Bold.woff) format("woff"),
			url(../font/NanumGothic-Bold.ttf) format('truetype');
} 

/*-------------------------------------------------------------------------------
    2025-11-12 / bjj / Noto Sans 노토산스 - customs.css에도 있었지만, 관리 편의성을 위해 여기 추가 함 (notosans_apply.css에서 사용)
-------------------------------------------------------------------------------*/
/* Noto Sans KR Regular (400) */
@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans KR Regular'),
         local('NotoSansKR-Regular'),
         url('../font/NotoSansKR-Regular.woff2') format('woff2'),
         url('../font/NotoSansKR-Regular.woff') format('woff'),
         url('../font/NotoSansKR-Regular.ttf') format('truetype');
}

/* Noto Sans KR Bold (700) */
@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans KR Bold'),
         local('NotoSansKR-Bold'),
         url('../font/NotoSansKR-Bold.woff2') format('woff2'),
         url('../font/NotoSansKR-Bold.woff') format('woff'),
         url('../font/NotoSansKR-Bold.ttf') format('truetype');
}
/********************************************************************************************************
  reset
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css
-------------------------------------------------------------------------------*/
html { width: 100%; height: 100%; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
/* 2024-01-18 / bjj / 게시판 리스트 영역(articleGenlist) 등 스크롤바 다크모드 */
html.darkmode_scrollbar::-webkit-scrollbar { width:10px; background:#363839;}
html.darkmode_scrollbar::-webkit-scrollbar-thumb { background:#737475;border:1px solid #2b2c2d;border-radius:5px;}
html.darkmode_scrollbar::-webkit-scrollbar-thumb:hover { background:#9b9c9c;}
html.darkmode_scrollbar{
	background-color:#262626;
}

body { margin: 0; width: 100%; height: 100%; box-sizing: border-box; }
.body_darkmode {background-color:#252525;color:#FFFFFF;}
article, aside, footer, header, nav, section { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
figcaption, figure, main { display: block; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; text-decoration: none; color: inherit; cursor: pointer; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
dfn { font-style: italic; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset {  padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { display: inline-block; vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details, menu { display: block; }
summary { display: list-item; }
canvas { display: inline-block; }
template { display: none; }
[hidden] { display: none; }
iframe{ display: block; border: 0}
form{ margin:0; border: 0}
/*------------------------------------------------------------------------------
  reset override
-------------------------------------------------------------------------------*/
/* reset - override - common */
img { vertical-align: top; max-width: 100%; height: auto;}
img.mid { vertical-align: middle; }
table td img { max-width: 100%; }

/* reset - override - font */
body { font-family: 'NanumGothic', 'malgun gothic', 'sans-serif', 'dotum'; font-size: 12px; color: #303030; }
.body_darkmode { font-family: 'NanumGothic', 'malgun gothic', 'sans-serif', 'dotum'; font-size: 12px; color: #FFFFFF; }
.darkmode #POPPanel body{ font-family: 'NanumGothic', 'malgun gothic', 'sans-serif', 'dotum'; font-size: 12px; color: #FFFFFF; }
button, input, optgroup, select, textarea { font-family: 'NanumGothic', 'malgun gothic', 'sans-serif', 'dotum'; }
caption { display: none; }

/*------------------------------------------------------------------------------
   2026-05-27 / bjj / 개인 설정 - 화면 글자 크기
-------------------------------------------------------------------------------*/
html.user_font_l { --ui-font-size-body: 13px; --ui-font-size-base: 14px; --ui-font-size-small: 12px; --ui-font-size-title: 17px; --ui-font-size-headline: 21px; --ui-control-height: 32px; --ui-table-row-height: 44px; }
html.user_font_xl { --ui-font-size-body: 14px; --ui-font-size-base: 15px; --ui-font-size-small: 13px; --ui-font-size-title: 18px; --ui-font-size-headline: 22px; --ui-control-height: 34px; --ui-table-row-height: 48px; }
html.user_font_xxl { --ui-font-size-body: 15px; --ui-font-size-base: 16px; --ui-font-size-small: 14px; --ui-font-size-title: 19px; --ui-font-size-headline: 23px; --ui-control-height: 36px; --ui-table-row-height: 52px; }

html[class*="user_font_"] body,
html[class*="user_font_"] .body_darkmode { font-size: var(--ui-font-size-body) !important; }

html[class*="user_font_"] button,
html[class*="user_font_"] input,
html[class*="user_font_"] optgroup,
html[class*="user_font_"] select,
html[class*="user_font_"] textarea,
html[class*="user_font_"] .eb_btn,
html[class*="user_font_"] .eb_msg,
html[class*="user_font_"] .eb_text,
html[class*="user_font_"] div.tooltip_box,
html[class*="user_font_"] div.tooltip_box .text,
html[class*="user_font_"] div.text_wrap .text,
html[class*="user_font_"] div.text_wrap .info,
html[class*="user_font_"] div.eb_tree a,
html[class*="user_font_"] div.eb_radio label,
html[class*="user_font_"] div.eb_radio > .labeltxt,
html[class*="user_font_"] div.eb_checkbox label,
html[class*="user_font_"] div.eb_checkbox label > .labeltxt,
html[class*="user_font_"] div.eb_checkbox > .labeltxt,
html[class*="user_font_"] div.lnb_body .lnb_menu,
html[class*="user_font_"] div.lnb_body .lnb_menu a,
html[class*="user_font_"] div.lnb_body .lnb_menu .sub_depth ul > li,
html[class*="user_font_"] div.lnb_body .lnb_menu .sub_depth_check .chk_text,
html[class*="user_font_"] div.lnb_body div.write_btn_wrap .lnb_btn,
html[class*="user_font_"] div.my_work_menu .menuname,
html[class*="user_font_"] div.header_list div.gnb_more_menu ul li a,
html[class*="user_font_"] div.header_menu_bottom .edit_notice,
html[class*="user_font_"] div.main_notice .notice_title,
html[class*="user_font_"] div.main_notice .notice_title_dark,
html[class*="user_font_"] div.main_notice .notice_date,
html[class*="user_font_"] div.main_notice .notice_date_dark,
html[class*="user_font_"] div.portlet .box_list span.link,
html[class*="user_font_"] div.portlet .list_type01,
html[class*="user_font_"] .portlet .list_type02,
html[class*="user_font_"] div.eb_tab_wrap.tab_box .tab_box_list_wrap .tab_list > a,
html[class*="user_font_"] div.eb_tab_wrap.tab_box .tab_box_list_wrap .tab_list.active > a,
html[class*="user_font_"] .webrule_index li,
html[class*="user_font_"] .webrule_index li .a,
html[class*="user_font_"] .lnb_menu .lnb_praise_box li,
html[class*="user_font_"] .lnb_menu .lnb_praise_box li a,
html[class*="user_font_"] .praise_wrap .card .user,
html[class*="user_font_"] .praise_wrap .card .user .user_info,
html[class*="user_font_"] .praise_wrap .card .user .user_info.darkmode,
html[class*="user_font_"] .praise_wrap .card .target .user .user_info,
html[class*="user_font_"] .praise_wrap .card .subject span,
html[class*="user_font_"] .praise_wrap .card .text,
html[class*="user_font_"] .praise_view .user .user_info,
html[class*="user_font_"] .praise_view .doc pre,
html[class*="user_font_"] .eb_tbl tbody tr td .contents_link,
html[class*="user_font_"] .tbl_base table tbody tr td .contents_link,
html[class*="user_font_"] .bbs_list_wrap .eb_tbl tbody tr td .contents_link,
html[class*="user_font_"] .teamroom_board_wrap .tbl_list .title .contents_link,
html[class*="user_font_"] .bbs_image_tab_list li .text_area .title,
html[class*="user_font_"] .bbs_image_tab_portlet .text_area .title > .title_text_main,
html[class*="user_font_"] .com_list_contents > ul > li > .contents_title .contents_link,
html[class*="user_font_"] .prev_next_wrap > div > .navi_list_title > a,
html[class*="user_font_"] div.bbs_view .bbs_writer_info .bbs_writer,
html[class*="user_font_"] div.bbs_view .bbs_writer_info .bbs_writer .writer,
html[class*="user_font_"] div.bbs_view .bbs_writer_info .bbs_writer ul li,
html[class*="user_font_"] div.bbs_view .bbs_view_body .bbs_view_textarea,
html[class*="user_font_"] div.comments .comment_body,
html[class*="user_font_"] div.comments .comment_body ul.photo_list > li > .profile_info,
html[class*="user_font_"] div.comments .comment_body ul.photo_list > li > .profile_info > .profile_info_text,
html[class*="user_font_"] div.comments .comment_body .add_comment > .eb_input input,
html[class*="user_font_"] div.comments .comment_body .add_comment > .eb_textarea textarea,
html[class*="user_font_"] div.one_comments .one_comment_body,
html[class*="user_font_"] div.one_comments .one_comment_body ul.photo_list > li > .profile_info,
html[class*="user_font_"] div.one_comments .one_comment_body ul.photo_list > li > .profile_info > .profile_info_text,
html[class*="user_font_"] div.one_comments .one_comment_body .add_one_comment > .eb_input input { font-size: var(--ui-font-size-base) !important; }

html[class*="user_font_"] table td .eb_btn,
html[class*="user_font_"] div.eb_pagination div.pagi_group,
html[class*="user_font_"] div.eb_pagination div.pagi_group.num span,
html[class*="user_font_"] .eb_msg.msg_guide,
html[class*="user_font_"] .eb_msg.msg_guide .text,
html[class*="user_font_"] div.my_work_menu .eb_btn .news,
html[class*="user_font_"] div.portal_calendar .calendar .cal_body table > thead > tr > th > span,
html[class*="user_font_"] div.portal_calendar .calendar .cal_body table > tbody > tr > td > span,
html[class*="user_font_"] div.portal_calendar .calendear_table thead th span,
html[class*="user_font_"] div.portal_calendar .calendear_table tbody td span,
html[class*="user_font_"] div.calendear_box.portlet .cal_body table > thead > tr > th > span,
html[class*="user_font_"] div.calendear_box.portlet .cal_body table > tbody > tr > td > span,
html[class*="user_font_"] .praise_wrap .card .upload_info,
html[class*="user_font_"] .praise_wrap .card .upload_info .user .user_info2,
html[class*="user_font_"] .praise_view .contents_body .writer,
html[class*="user_font_"] .praise_view .contents_body .writer p,
html[class*="user_font_"] .praise_view .user .user_info em,
html[class*="user_font_"] .praise_summary .praise_summary_total li .count_text,
html[class*="user_font_"] div.portlet ul.box_list.one .update_log,
html[class*="user_font_"] div.portlet ul.box_list.two .update_log,
html[class*="user_font_"] .bbs_list_wrap .eb_tbl tbody tr td .upload_log,
html[class*="user_font_"] .bbs_list_wrap .eb_tbl tbody tr td .author_info,
html[class*="user_font_"] div.bbs_view .bbs_view_title .upload_log,
html[class*="user_font_"] div.bbs_view .bbs_writer_info .bbs_writer li > span,
html[class*="user_font_"] div.comments .comment_header .title_name .comment_count,
html[class*="user_font_"] div.comments .comment_body ul.photo_list > li > .etc_right,
html[class*="user_font_"] div.one_comments .one_comment_header .title_name .one_comment_count,
html[class*="user_font_"] div.one_comments .one_comment_body ul.photo_list > li > .etc_right,
html[class*="user_font_"] .bbs_image_tab_list li .text_area .title .header_tag,
html[class*="user_font_"] .bbs_image_tab_list li .text_area .meta_info,
html[class*="user_font_"] .bbs_image_tab_portlet .bbs_chip { font-size: var(--ui-font-size-small) !important; }

html[class*="user_font_"] div.eb_input,
html[class*="user_font_"] div.eb_select { height: var(--ui-control-height); }

html[class*="user_font_"] div.eb_input input,
html[class*="user_font_"] div.eb_select select { font-size: var(--ui-font-size-base) !important; }

html[class*="user_font_"] div.eb_tbl > table th,
html[class*="user_font_"] div.eb_tbl > table td,
html[class*="user_font_"] div.eb_tbl_simple th,
html[class*="user_font_"] div.eb_tbl_simple td { height: auto; min-height: var(--ui-table-row-height); font-size: var(--ui-font-size-base) !important; line-height: calc(var(--ui-font-size-base) + 8px); }

html[class*="user_font_"] div.eb_tbl_search > table > tbody > tr > th,
html[class*="user_font_"] div.eb_tbl_search > table > tbody > tr > td { font-size: var(--ui-font-size-base) !important; line-height: calc(var(--ui-font-size-base) + 8px); }

html[class*="user_font_"] div.title_wrap div.title,
html[class*="user_font_"] div.title_wrap div.subtitle,
html[class*="user_font_"] div.portal_calendar .schedule_list .title_wrap .title,
html[class*="user_font_"] div.portal_calendar .businessday_list .title_wrap .title,
html[class*="user_font_"] .webrule_index > p,
html[class*="user_font_"] .praise_summary li,
html[class*="user_font_"] .praise_summary .status,
html[class*="user_font_"] div.lnb_body .lnb_menu .main_depth,
html[class*="user_font_"] div.comments .comment_header .title_name,
html[class*="user_font_"] div.one_comments .one_comment_header .title_name,
html[class*="user_font_"] div.header_wrap div.gnb_nav ul li a { font-size: var(--ui-font-size-title) !important; }

html[class*="user_font_"] div.lnb_body .lnb_menu .main_depth { line-height: calc(var(--ui-font-size-title) + 8px); }
html[class*="user_font_"] div.lnb_body .lnb_menu .sub_depth ul > li,
html[class*="user_font_"] div.bbs_view .bbs_writer_info .bbs_writer ul li { line-height: calc(var(--ui-font-size-base) + 8px); }

html[class*="user_font_"] div.header_wrap div.gnb_nav ul li .eb_btn.btn_gnb_more,
html[class*="user_font_"] div.header_wrap div.gnb_nav ul li .eb_btn.btn_gnb_close { width: auto !important; min-width: 68px; padding-right: 22px !important; white-space: nowrap !important; }

html[class*="user_font_"] div.bbs_view .bbs_view_title .title_name,
html[class*="user_font_"] div.bbs_view .bbs_view_title .title_full_name,
html[class*="user_font_"] div.main_mymain .mymain_header .portlet_title { font-size: var(--ui-font-size-headline) !important; }
html[class*="user_font_"] div.portal_calendar .calendar .cal_head table > thead > tr > th:nth-child(3) { font-size: calc(var(--ui-font-size-headline) + 1px) !important; }
html[class*="user_font_"] .praise_summary .praise_summary_total p,
html[class*="user_font_"] .praise_view h2 { font-size: var(--ui-font-size-headline) !important; }
html[class*="user_font_"] div.main_mymain .mymain_header .eb_btn.btn_portlet_setting,
html[class*="user_font_"] div.portlet .btn_group_wrap > .eb_btn,
html[class*="user_font_"] .bbs_image_tab_portlet .title .eb_btn { font-size: var(--ui-font-size-base) !important; }
html[class*="user_font_"] div.tab_box.portlet .title,
html[class*="user_font_"] div.tab_box.portlet .title > .eb_btn,
html[class*="user_font_"] div.tab_box.portlet .title .eb_btn.active,
html[class*="user_font_"] div.tab_box.portlet .title > .eb_btn > .list_count,
html[class*="user_font_"] div.mainb_portlet .portlet_header > .title_sort,
html[class*="user_font_"] div.mainb_portlet .portlet_header > .title_notice,
html[class*="user_font_"] div.portlet_setting_header .title,
html[class*="user_font_"] div.portlet_info .portlet_set .p_title { font-size: var(--ui-font-size-title) !important; }
html[class*="user_font_"] div.mainb_portlet .portlet_header > .update_time { font-size: var(--ui-font-size-base) !important; }
html[class*="user_font_"] div.title_wrap.with_etc.for_portlet .title .news { font-size: var(--ui-font-size-base) !important; }
html[class*="user_font_"] div.portlet ul.box_list.one > li { height: auto; min-height: calc(var(--ui-font-size-base) + 8px); }
html[class*="user_font_"] .otp-badge,
html[class*="user_font_"] .otp-step-num,
html[class*="user_font_"] .otp-copy-toast { font-size: var(--ui-font-size-small) !important; }
html[class*="user_font_"] .otp-step,
html[class*="user_font_"] .otp-info-box,
html[class*="user_font_"] .otp-warn-box,
html[class*="user_font_"] .otp-qr-guide ol,
html[class*="user_font_"] .otp-verify-label,
html[class*="user_font_"] .otp-verify-msg { font-size: var(--ui-font-size-body) !important; }
html[class*="user_font_"] .otp-setup-title,
html[class*="user_font_"] .otp-key-input { font-size: var(--ui-font-size-base) !important; }
html[class*="user_font_"] .otp-digit,
html[class*="user_font_"] .otp-dash { font-size: var(--ui-font-size-headline) !important; }

/********************************************************************************************************
  helper  "속성"_"설정값"
*********************************************************************************************************/
/*------------------------------------------------------------------------------
   fl = float, cb = clear
-------------------------------------------------------------------------------*/
.fl_l {float: left !important; }
.fl_r {float: right !important; }
.cb:after { content: ""; display: block; clear: both; }

/*------------------------------------------------------------------------------
   fw = font-weight, fs = font-size, fc = color, fst = style
-------------------------------------------------------------------------------*/
.fw_b { font-weight: bold !important; }
.fw_n { font-weight: normal !important; }
.fs_12 { font-size: 12px !important; }
.fs_13 { font-size: 13px !important; }
.fs_14 { font-size: 14px !important; }
.fs_18 { font-size: 18px !important; }
.fs_20 { font-size: 20px !important; }
.fs_28 { font-size: 28px !important; }
.fc_303030 { color: #303030 !important; }
.fc_707070 { color: #707070 !important; }
.fc_a0a0a0 { color: #a0a0a0 !important; }
.fc_d5d5d5 { color: #d5d5d5 !important; }
.fc_point01 { color: #eb765f !important; }
.fc_warning { color: #ff0002 !important; }
.fc_blue { color: #1617f2 !important; }
.fst_n { font-style: normal !important; }
.fst_i { font-style: italic !important; }
.fst_u { text-decoration: underline !important;}
/*------------------------------------------------------------------------------
   ta = text-align
-------------------------------------------------------------------------------*/
.ta_l { text-align: left !important; }
.ta_c { text-align: center !important; }
.ta_r { text-align: right !important; }

/*------------------------------------------------------------------------------
   2023-04-11 / bjj / 웹규정 신구 비교페이지 좌우 스크롤 추가
-------------------------------------------------------------------------------*/
.overflow-x-auto {overflow-x : auto;}

/*------------------------------------------------------------------------------
   dp = display
-------------------------------------------------------------------------------*/
.dp_n { display: none !important; }
.dp_b { display: block !important; }
.dp_ib { display: inline-block !important; }
.dp_i { display: inline !important; }

/*------------------------------------------------------------------------------
   p = padding
   pt = padding-top
   pr = padding-right
   pb = padding-bottom
   pl = padding-left
-------------------------------------------------------------------------------*/
.p_0 { padding: 0 !important; }
.p_5 { padding: 5px !important; }
.p_10 { padding: 10px !important; }
.p_15 { padding: 15px !important; }
.p_20 { padding: 20px !important; }
.p_30 { padding: 30px !important; }
.p_40 { padding: 40px !important; }
.pt_0 { padding-top: 0px !important; }
.pt_5 { padding-top: 5px !important; }
.pt_8 { padding-top: 8px !important; }
.pt_10 { padding-top: 10px !important; }
.pt_15 { padding-top: 15px !important; }
.pt_20 { padding-top: 20px !important; }
.pt_30 { padding-top: 30px !important; }
.pt_40 { padding-top: 40px !important; }
.pr_0 { padding-right: 0px !important; }
.pr_5 { padding-right: 5px !important; }
.pr_10 { padding-right: 10px !important; }
.pr_15 { padding-right: 15px !important; }
.pr_20 { padding-right: 20px !important; }
.pr_30 { padding-right: 30px !important; }
.pr_40 { padding-right: 40px !important; }
.pb_0 { padding-bottom: 0px !important; }
.pb_5 { padding-bottom: 5px !important; }
.pb_10 { padding-bottom: 10px !important; }
.pb_15 { padding-bottom: 15px !important; }
.pb_20 { padding-bottom: 20px !important; }
.pb_30 { padding-bottom: 30px !important; }
.pb_40 { padding-bottom: 40px !important; }
.pl_0 { padding-left: 0px !important; }
.pl_5 { padding-left: 5px !important; }
.pl_10 { padding-left: 10px !important; }
.pl_15 { padding-left: 15px !important; }
.pl_20 { padding-left: 20px !important; }
.pl_30 { padding-left: 30px !important; }
.pl_40 { padding-left: 40px !important; }
.pl_540 { padding-left: 540px !important; }

/*------------------------------------------------------------------------------
   m = margin
   mt = margin-top
   mr = margin-right
   mb = margin-bottom
   ml = margin-left
-------------------------------------------------------------------------------*/
.m_0 { margin: 0px !important; }
.m_5 { margin: 5px !important; }
.m_10 { margin: 10px !important; }
.m_15 { margin: 15px !important; }
.m_20 { margin: 20px !important; }
.m_30 { margin: 30px !important; }
.m_40 { margin: 40px !important; }
.mt_0 { margin-top: 0px !important; }
.mt_5 { margin-top: 5px !important; }
.mt_10 { margin-top: 10px !important; }
.mt_15 { margin-top: 15px !important; }
.mt_20 { margin-top: 20px !important; }
.mt_30 { margin-top: 30px !important; }
.mt_40 { margin-top: 40px !important; }
.mr_0 { margin-right: 0px !important; }
.mr_5 { margin-right: 5px !important; }
.mr_10 { margin-right: 10px !important; }
.mr_15 { margin-right: 15px !important; }
.mr_20 { margin-right: 20px !important; }
.mr_30 { margin-right: 30px !important; }
.mr_40 { margin-right: 40px !important; }
.mr_350 { margin-right: 350px !important; }
.mb_0 { margin-bottom: 0px !important; }
.mb_5 { margin-bottom: 5px !important; }
.mb_10 { margin-bottom: 10px !important; }
.mb_15 { margin-bottom: 15px !important; }
.mb_20 { margin-bottom: 20px !important; }
.mb_30 { margin-bottom: 30px !important; }
.mb_40 { margin-bottom: 40px !important; }
.ml_0 { margin-left: 0px !important; }
.ml_5 { margin-left: 5px !important; }
.ml_10 { margin-left: 10px !important; }
.ml_15 { margin-left: 15px !important; }
.ml_20 { margin-left: 20px !important; }
.ml_30 { margin-left: 30px !important; }
.ml_40 { margin-left: 40px !important; }
.ml_100 { margin-left: 100px !important; }

.w_50 { width: 50px !important; }
.w_150 { width: 150px !important; }
.w_200 { width: 200px !important; }
.w_210 { width: 210px !important; }
.w_220 { width: 220px !important; }
.w_230 { width: 230px !important; }
.w_240 { width: 240px !important; }
.w_250 { width: 250px !important; }
.w_260 { width: 260px !important; }
.w_270 { width: 270px !important; }
.w_280 { width: 280px !important; }
.w_290 { width: 290px !important; }
.w_300 { width: 300px !important; }
.w_310 { width: 310px !important; }
.w_320 { width: 320px !important; }
.w_330 { width: 330px !important; }
.w_340 { width: 340px !important; }
.w_350 { width: 350px !important; }
.w_360 { width: 360px !important; }
.w_380 { width: 380px !important; }
.w_400 { width: 400px !important; }
.w_450 { width: 450px !important; }
.w_475 { width: 475px !important; }
.w_500 { width: 500px !important; }
.w_520 { width: 520px !important; }
.w_550 { width: 550px !important; }
.w_600 { width: 600px !important; }
.w_700 { width: 700px !important; }
.w_860 { width: 860px !important; }
.w_960 { width: 960px !important; }
.w_full { width: 100% !important; }


/*------------------------------------------------------------------------------
   cur = cursor
-------------------------------------------------------------------------------*/
.cur_d { cursor: default !important; }
.cur_a { cursor: auto !important; }
.cur_p { cursor: pointer !important; }
.cur_m { cursor: move !important; }

/*------------------------------------------------------------------------------
   tt = text-transform
-------------------------------------------------------------------------------*/
.tt_up {text-transform:uppercase;}

/*------------------------------------------------------------------------------
   ime =  ime-mode
-------------------------------------------------------------------------------*/
.ime_disabled{ime-mode: disabled;}
.ime_auto{ime-mode: auto;}
.ime_active{ime-mode: active;}
.ime_inactive{ime-mode: inactive;}

/********************************************************************************************************
  간격정의
*********************************************************************************************************/
/* 타이틀 next */
div.title_wrap + [data-targetaccord] .eb_tbl,
div.title_wrap.for_tbl + .tbl_group .eb_tbl,
div.title_wrap.for_tbl + .tbl_group .eb_tbl_simple,
div.title_wrap + .eb_tbl { border-top: none; }
div.title_wrap .eb_text { margin-left: 10px; }

/********************************************************************************************************
  title
*********************************************************************************************************/
/*------------------------------------------------------------------------------
title - default
-------------------------------------------------------------------------------*/
div.title_wrap { padding: 26px 0 10px; box-sizing: border-box; }
div.title_wrap:after { content: ' '; display: block; clear: both; }
div.title_wrap.for_tbl { border-bottom: 1px solid #9095ab; }
.darkmode div.title_wrap.for_tbl { border-bottom: 1px solid #3a3b3e; color:white; }
div.title_wrap.none_space { padding-top: 0; }
div.title_wrap div.title { display: inline-block; font-size: 16px; line-height: 24px; font-weight: bold; vertical-align: bottom;}
.darkmode div.title_wrap div.title { display: inline-block; font-size: 16px; line-height: 24px; font-weight: bold; vertical-align: bottom;color:#FFFFFF;}

div.title_wrap div.title.sub { font-size: 14px; }
div.title_wrap.with_etc { padding-top: 20px; }
div.title_wrap.with_etc div.title { padding-top: 6px; }
div.title_wrap.with_etc div.etc_wrap { float: right; }
div.title_wrap.with_etc div.etc_wrap .eb_btn.icon_btn.icon_accordion:last-child { margin-top: 7px; }
div.title_wrap.with_etc div.etc_wrap .eb_btn.lnb_btn.print_none + .eb_btn.icon_btn.icon_accordion:last-child { margin-top: 0px; }
div.title_wrap.with_etc div.etc_wrap .text_wrap { display: inline-block; color: #303030; }
div.title_wrap.with_etc div.etc_wrap .text_wrap:last-child { margin-top: 10px; }
div.title_wrap.with_etc div.etc_wrap > .eb_radio { padding-top: 8px; }
div.title_wrap.with_etc.for_portlet { padding: 20px 0 18px 0; border-bottom:1px solid #e5e5e5;}
.darkmode div.title_wrap.with_etc.for_portlet { padding: 20px 0 18px 0; border-bottom:1px solid #484848;}
div.title_wrap.with_etc.for_portlet.no_line { border: 0; }
div.title_wrap.with_etc.for_portlet .title { padding-top: 0; line-height: 1; font-weight: bold; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; width:260px; display: inline;}
div.title_wrap.with_etc.for_portlet div.etc_wrap .text_wrap { margin: 0; font-size: 14px; color: #707070;}
.darkmode div.title_wrap.with_etc.for_portlet div.etc_wrap .text_wrap { margin: 0; font-size: 14px; color: #e5e5e5;}
div.title_wrap div.subtitle { display: inline-block; font-size: 16px; line-height: 24px; font-weight: bold; vertical-align: bottom;}

.schedule_list div.title_wrap.with_etc.for_portlet .title,
.schedule_box div.title_wrap.with_etc.for_portlet .title {  width:200px;}


div.title_wrap_bt { margin: 0 0 5px; box-sizing: border-box; }
div.title_wrap_bt div.title { display: inline-block; font-size: 16px; line-height: 24px; font-weight: bold; vertical-align: bottom; }
/********************************************************************************************************
  text
********************************************************************************************************/
/*------------------------------------------------------------------------------
  text
-------------------------------------------------------------------------------*/
/* text - 일반 메세지*/
.eb_msg { font-size: 13px; color: #303030; }
span.eb_msg { display: inline-block; }
.eb_msg .bullet { float: left; }
.eb_msg .text { overflow: hidden; display: block; padding: 0 3px 0 10px; }

/* text - 가이드메세지 ex> 통합검색 - 상세검색팝업 */
.eb_msg.msg_guide { font-size: 11px; color: #707070; }
.eb_msg.msg_guide .text{ font-size: 11px;}/*병합*/

/* text - 알림 메시지*/
.eb_text { font-size: 13px; color: #a0a0a0; }
.eb_text.dim { font-size: 13px; color: #c8c8c8; }
span.eb_text { display: inline-block; padding: 5px 0; font-size: 12px; vertical-align: middle; }

/* text - 그룹 */
div.text_wrap {}
div.text_wrap .text { display: inline-block; font-size: 13px; }
div.text_wrap .info { display: inline-block; font-size: 13px; color: #a0a0a0; }
div.text_wrap .dim { display: inline-block; font-size: 13px; color: #c8c8c8; }


.hidden { position: absolute; top: -9999px; margin: 0; padding: 0; border: none; text-indent: -9999px; font-size: 0; }

/*------------------------------------------------------------------------------
  [아이콘] 이미지
-------------------------------------------------------------------------------*/
/* 아이콘 기본설정 */
.icon { display: inline-block; vertical-align: middle; }

/* [아이콘] 공통 */
.icon_warning { width: 20px; height: 20px; background: url("../image/common/icon_warning.png") no-repeat center; }
.icon_red_warning { width: 20px; height: 20px; background: url("../image/common/icon_red_warning.png") no-repeat center; }
.icon_green_warning { width: 20px; height: 20px; background: url("../image/common/icon_green_warning.png") no-repeat center; }
.icon_favorite { width: 16px; height: 15px; background: url("../image/common/icon_favorite_off.png") no-repeat center; }
.darkmode .icon_favorite { width: 16px; height: 15px; background: url("../image/common/icon_favorite_off_darkmode.png") no-repeat center; }
.icon_favorite.active { background-image: url("../image/common/icon_favorite_on.png"); }
.icon_sche_complete { width: 15px; height: 15px; background: url("../image/common/icon_sche_complete_off.png") no-repeat center; }
.icon_sche_complete.active { background-image: url("../image/common/icon_sche_complete_on.png"); }
.icon_attached_file { width: 15px; height: 20px; background: url("../image/common/icon_attached_file.png") no-repeat center; }
.icon_attached_img { width: 15px; height: 20px; background: url("../image/common/icon_attached_img.png") no-repeat center; }
.icon_question { width: 22px; height: 22px; background: url("../image/common/icon_question.png") no-repeat center; }
.icon_phone { width: 9px; height: 13px; background: url("../image/common/icon_phone.png") no-repeat center; }
.icon_news { width: 16px; height: 16px; background: url("../image/common/icon_news.png") no-repeat center; }
.icon_share { width: 19px; height: 19px; background: url("../image/common/icon_share.png") no-repeat center; }
.icon_filter { width: 12px; height: 16px; background: url("../image/common/icon_filter.png") no-repeat center; }
.icon_move { width: 20px; height:20px; background: url("../image/common/icon_move.png") no-repeat center; }
.icon_preview { width: 12px; height: 12px; background: url("../image/common/icon_preview.png") no-repeat center; }
.icon_row_plus { width: 17px; height: 17px; background: url("../image/common/icon_plus.png") no-repeat center; }
.icon_row_minus { width: 17px; height: 17px; background: url("../image/common/icon_minus.png") no-repeat center; }
.icon_comment_rep { width: 12px; height: 12px; background: url("../image/common/icon_comment_reply.png") no-repeat center; }
.icon_comment_del { width: 12px; height: 12px; background: url("../image/common/icon_comment_delete.png") no-repeat center; }
.icon_dummy { width: 20px; height: 20px; background: url("../image/common/icon_dummy.png") no-repeat center; }

.icon_channel { width: 20px; height: 20px; background: url("../image/common/btn_arrow_down.png") no-repeat center; }
.eb_btn.icon_cw_info { width: 12px; height: 12px; background: url("../image/common/icon_cw_info.png") no-repeat center; padding: 0 }
.eb_btn.icon_cw_del { width: 12px; height: 12px; background: url("../image/common/icon_cw_del.png") no-repeat center; padding: 0}
.eb_btn.icon_cw_set { width: 12px; height: 12px; background: url("../image/common/icon_cw_set.png") no-repeat center; padding: 0;border-radius:0 !important}
.eb_btn.icon_cw_filter { width: 12px; height: 12px; background: url("../image/common/icon_cw_filter.png") no-repeat center; padding: 0}


/* 메일읽기 */
.icon_envelope { width: 17px; height: 20px; background: url("../image/common/icon_envelope_close.png") no-repeat center; }
.icon_envelope.read { width: 17px; height: 20px; background: url("../image/common/icon_envelope_open.png") no-repeat center; }
.icon_clip { width: 15px; height: 16px; background: url("../image/common/icon_attached_file.png") no-repeat center; }

.icon_envelope.retrans.active  { width: 18px; height: 20px; background: url("../image/common/icon_trans_envelope_open.png") no-repeat center; }
.icon_envelope.reply.active { width: 19px; height: 20px; background: url("../image/common/icon_re_envelope_open.png") no-repeat center; }
.icon_envelope.retrans_reply.active { width: 19px; height: 20px; background: url("../image/common/icon_retrans_envelope_open.png") no-repeat center; }

.icon_envelope.retrans  { width: 18px; height: 20px; background: url("../image/common/icon_trans_envelope_close.png") no-repeat center; }
.icon_envelope.reply { width: 19px; height: 20px; background: url("../image/common/icon_re_envelope_close.png") no-repeat center; }
.icon_envelope.retrans_reply { width: 19px; height: 20px; background: url("../image/common/icon_retrans_envelope_close.png") no-repeat center; }

/*목록 상하 좌우 이전 다음 주소록포함*/
.eb_btn.view_list, .eb_btn.view_split_hor, .eb_btn.view_split_ver, .eb_btn.view_card, .eb_btn.view_next, .eb_btn.view_pre, .eb_btn.btn_print {font-size: 0;text-indent: -9999px;}
.eb_btn.view_list{ background:url('../image/common/btn_view_list.png') 9px 9px no-repeat; }
.darkmode .eb_btn.view_list{ background:url('../image/common/btn_view_list.png') 9px 9px no-repeat; margin-right:2px;}
.eb_btn.view_list.active{background-image:url('../image/common/btn_view_list_active.png') }

.eb_btn.view_split_hor{background:url('../image/common/btn_split_hor.png') no-repeat 9px 9px}
.darkmode .eb_btn.view_split_hor{background:url('../image/common/btn_split_hor.png') no-repeat 9px 9px; margin-right:2px;}
.eb_btn.view_split_hor.active{background-image: url('../image/common/btn_split_hor_actvie.png')}

.eb_btn.view_split_ver{background:url('../image/common/btn_split_ver.png') no-repeat 9px 9px}
.eb_btn.view_split_ver.active{background-image: url('../image/common/btn_split_ver_active.png') }

.eb_btn.view_card{background:url('../image/common/view_card.png') no-repeat 9px 9px}
.eb_btn.view_card.active{background-image:url('../image/common/view_card_active.png') }


.eb_btn.view_next{background:url('../image/common/btn_next.png') no-repeat 50%}
.eb_btn.view_pre{background:url('../image/common/btn_pre.png') no-repeat 50% }



/* 메일쓰기 */
.icon_add_mail { width: 15px; height: 15px; background: url("../image/common/btn_add_mail.png") no-repeat center; }
.icon_accordion { width: 16px; height: 16px; background: url("../image/common/btn_accordion_on.png") no-repeat center;border-radius:0 !important }
.icon_accordion_darkmode { width: 16px; height: 16px; background: url("../image/common/btn_accordion_on_darkmode.png") no-repeat center;border-radius:5px !important; background-color:#3F3F3F;}
.darkmode .icon_accordion{ width: 16px; height: 16px; background: url("../image/common/btn_accordion_on_darkmode.png") no-repeat center;border-radius:5px !important; background-color:#3F3F3F;}
.darkmode th .icon_accordion{ width: 16px; height: 16px; background: url("../image/common/btn_accordion_on_darkmode.png") no-repeat center;border-radius:5px !important; transform:rotate(180deg);}
.icon_accordion_big{ width: 30px; height: 30px; background: url("../image/common/btn_accordion2_on.png") no-repeat center; }
.darkmode .icon_accordion_big{ width: 16px; height: 16px; background: url("../image/common/btn_accordion_on_darkmode.png") no-repeat center;border-radius:5px !important; background-color:#3F3F3F !important;}
.icon_accordion_arrow { width: 10px; height: 6px; background: url("../image/common/btn_accordion_arrow.png") no-repeat center; }

/*메일쓰기자동완성/주소록사용상태표시/조직도/사용자현황*/
.user_basic{width: 20px; height: 22px; background: url("../image/common/ico_user_basic.png") no-repeat center; }
.user_partner{width: 20px; height: 20px; background: url("../image/common/ico_user_partner.png") no-repeat center; border-radius: 50%; overflow: hidden;}
.user_loogoff{width: 20px; height: 22px; background: url("../image/common/ico_user_loogoff.png") no-repeat center; }
.user_basic_temp{width: 20px; height: 22px; background: url("../image/common/ico_user_basic_temp.png") no-repeat center; }
.user_addjob{width: 20px; height: 22px; background: url("../image/common/ico_user_addjob.png") no-repeat center; }
.user_addjob_temp{width: 20px; height: 22px; background: url("../image/common/ico_user_addjob_temp.png") no-repeat center; }
.user_mail{width: 20px; height: 22px; background: url("../image/common/ico_user_mail.png") no-repeat center; }
.user_delete{width: 20px; height: 22px; background: url("../image/common/ico_user_delete.png") no-repeat center; }
.user_retire{width: 20px; height: 22px; background: url("../image/common/ico_user_retire.png") no-repeat center; }
.user_role{width: 20px; height: 22px; background: url("../image/common/ico_user_role.png") no-repeat center; }
.org_folder{width: 20px; height: 22px; background: url("../image/common/ico_org_folder.png") no-repeat center; }
.send_recent{width: 20px; height: 22px; background: url("../image/common/ico_send_recent.png") no-repeat center; }
.address_book{width: 20px; height: 22px; background: url("../image/common/ico_address_book.png") no-repeat center; }
.org_upfolder{width: 20px; height: 22px; background: url("../image/common/ico_org_upfolder.png") no-repeat center; }

/*게시판아이콘*/
.icon{ text-indent: -99999px}
.browser{ width:20px;height:15px;background: url(../image/common/ico_browser.png) no-repeat; cursor: pointer}
.icon.re{ width:20px;background: url(../image/common/ico_re.png) no-repeat 50%; }
.respond,
.respond_not{ margin:0 auto; width:20px; height:20px;background: right bottom no-repeat; }
.respond{ background-image: url(../image/common/ico_respond.png); }
.respond_not{ background-image: url(../image/common/ico_respond_not.png); }
.security{margin:0 auto; width:20px; height:14px; background: url(../image/common/ico_security.png) 50% no-repeat;}
.urgency{margin:0 auto; width:20px; height:15px; background: url(../image/common/ico_urgency.png) 50% no-repeat;}

.icon.app{margin:0 auto; width:20px; height:22px; background: url(../image/common/icon_app.png) 50% no-repeat;}
.app_urgency{margin:0 auto; width:20px; height:22px; background: url(../image/common/icon_app_urgency.png)50% no-repeat;}
.app_security{margin:0 auto; width:20px; height:22px;  background: url(../image/common/icon_app_security.png)50% no-repeat;}
.app_urgency.app_security{margin:0 auto; width:20px; height:22px; display: block; background: url(../image/common/icon_app_urgency_security.png) left 50% no-repeat;}
.comment{margin:0 auto; width:20px; height:18px;  background: url(../image/common/ico_comment.png) 50% no-repeat;}
.internal_link{width:20px; height:22px; background: url(../image/common/icon_internal_link.png) 50% no-repeat;}
.route {width:14px; height:15px; background: url(../image/common/icon_route.png) 50% no-repeat;}
.notice{width:14px; height:15px; background: url(../image/common/icon_notice.png) 50% no-repeat;}

.sorting_down { width:5px; height:15px;background: url(../image/common/sorting_down.png) 50% no-repeat; text-indent: -9999px; margin-left: 5px;}
.sorting_up {  width:5px; height:15px;background: url(../image/common/sorting_up.png)50% no-repeat; text-indent: -9999px; margin-left: 5px;}

/*블로그*/
.icon_score01,
.icon_score02, 
.icon_score03, 
.icon_score04, 
.icon_score05 { width: 83px; height: 13px; margin-top: -2px; background: no-repeat center top; }
.icon_score01 { background-image: url("../image/common/icon_score01.png"); }
.icon_score02 { background-image: url("../image/common/icon_score02.png"); }
.icon_score03 { background-image: url("../image/common/icon_score03.png"); }
.icon_score04 { background-image: url("../image/common/icon_score04.png"); }
.icon_score05 { background-image: url("../image/common/icon_score05.png"); }

/*결재문서아이콘*/

.eb_btn.icon_btn.icon_doc_info{background:url(../image/common/btn_doc_info.png) no-repeat left;padding-left:16px;margin:0;text-indent: 0;}
.eb_btn.icon_btn.icon_app_attach{background:url(../image/common/btn_app_attach.png) no-repeat left;padding-left:14px;margin:0;text-indent: 0;}
.eb_btn.icon_btn.icon_app_receive{background:url(../image/common/btn_app_receive.png) no-repeat left;padding-left:16px;margin:0;text-indent: 0;}
.eb_btn.icon_btn.icon_app_history{background:url(../image/common/btn_app_history.png) no-repeat left;padding-left:16px;margin:0;text-indent: 0;}



/* 파일아이콘 */
.icon_html,
.icon_xml { width: 18px; height: 20px; background: url("../image/common/icon_html_file.png") no-repeat center; }
.icon_mht { width: 18px; height: 20px; background: url("../image/common/icon_mht_file.png") no-repeat center; }
.icon_txt { width: 18px; height: 20px; background: url("../image/common/icon_txt_file.png") no-repeat center; }
.icon_ppt, .icon_pptx { width: 18px; height: 20px; background: url("../image/common/icon_ppt_file.png") no-repeat center; }
.icon_xls, .icon_xlsx { width: 18px; height: 20px; background: url("../image/common/icon_xls_file.png") no-repeat center; }
.icon_doc, .icon_docx { width: 18px; height: 20px; background: url("../image/common/icon_doc_file.png") no-repeat center; }
.icon_vcf { width: 18px; height: 20px; background: url("../image/common/icon_vcf_file.png") no-repeat center; }
.icon_hwp { width: 18px; height: 20px; background: url("../image/common/icon_hwp_file.png") no-repeat center; }
.icon_pdf { width: 18px; height: 20px; background: url("../image/common/icon_pdf_file.png") no-repeat center; }
.icon_zip { width: 18px; height: 20px; background: url("../image/common/icon_zip_file.png") no-repeat center; }
.icon_exe { width: 18px; height: 20px; background: url("../image/common/icon_exe_file.png") no-repeat center; }
.icon_gif,
.icon_jpg,
.icon_tif,
.icon_gif,
.icon_bmp,
.icon_png { width: 18px; height: 20px; background: url("../image/common/icon_gif_file.png") no-repeat center; }
.icon_wav { width: 18px; height: 20px; background: url("../image/common/icon_wav_file.png") no-repeat center; }
.icon_avi { width: 18px; height: 20px; background: url("../image/common/icon_avi_file.png") no-repeat center; }
.icon_eml { width: 18px; height: 20px; background: url("../image/common/icon_eml_file.png") no-repeat center; }
.icon_edms { width: 18px; height: 20px; background: url("../image/common/icon_edms_file.png") no-repeat center; }
.icon_etc { width: 18px; height: 20px; background: url("../image/common/icon_etc_file.png") no-repeat center; }
.icon_unknown { width: 18px; height: 20px; background: url("../image/common/icon_etc_file.png") no-repeat center; }
.icon_edms.active { width: 18px; height: 20px; background: url("../image/common/icon_edms_file2.png") no-repeat center; }

/* 포틀릿 템플릿 */
.icon_port_sche { width: 16px; height: 40px; background: url("../image/common/icon_portlet_sche_first.png") repeat-y center bottom; }
.icon_portlet_cross { width: 20px; height: 20px; background: url("../image/common/btn_portlet_set_cross.png") no-repeat center; }
.icon_portlet_lock { width: 20px; height: 20px; background: url("../image/common/btn_portlet_set_lock.png") no-repeat center; cursor: default !important; }
.icon_portlet_more { width: 19px; height: 19px; background: url("../image/common/btn_portlet_more.png") no-repeat center;border-radius:0 !important }

/* 공지사항 */
.icon_notice_today { width: 40px; height: 44px; background: url("../image/common/icon_notice_today.png") no-repeat center; }
.icon_notice_my { width: 40px; height: 44px; background: url("../image/common/icon_notice_my.png") no-repeat center; }
.icon_notice_opi { width: 40px; height: 44px; background: url("../image/common/icon_notice_opi.png") no-repeat center; }

/* COP */
.icon_cop_off { width: 12px; height: 17px; background: url("../image/common/icon_cop_menoff.png") no-repeat center; }
.icon_cop_men { width: 12px; height: 17px; background: url("../image/common/icon_cop_men.png") no-repeat center; }
.icon_cop_crown { width: 16px; height: 13px; background: url("../image/common/icon_cop_crown.png") no-repeat center; }
.icon_cop_pen { width: 14px; height: 14px; background: url("../image/common/icon_cop_pen.png") no-repeat center; }
.icon_saved_file { width: 16px; height: 16px; background: url("../image/common/icon_saved_file.png") no-repeat center; }
.bullet_dot { width: 3px; height: 3px; background: url("../image/common/bullet_list_dot.png") no-repeat center; }

/* ToDo 기능 */
.icon_todo_add { width: 18px; height: 18px; background: url("../image/common/icon_todo_add.png") no-repeat center; }
.icon_todo_unimp { width: 9px; height: 14px; background: url("../image/common/icon_todo_unimp.png") no-repeat center; }
.darkmode .icon_todo_unimp { width: 9px; height: 14px; background: url("../image/common/icon_todo_unimp_darkmode.png") no-repeat center; }
.icon_todo_imp { width: 9px; height: 14px; background: url("../image/common/icon_todo_imp.png") no-repeat center; }
.icon_todo_link { width: 13px; height: 13px; background: url("../image/common/icon_todo_link.png") no-repeat center; }
.icon_sche_star { width: 12px; height: 11px; background: url("../image/common/icon_sche_star.png") no-repeat center; }

/* 팝업 */
.img_warning { margin:0 auto; width: 42px; height: 42px; background: url("../image/popup/img_warning.png") no-repeat; }
.img_complete { margin:0 auto; width: 42px; height: 42px; background: url("../image/popup/img_complete.png") no-repeat; }

/* 헤더 */
.icon_header_personal { width: 17px; height: 17px; background: url("../image/layout/icon_gnb_per.png") no-repeat center; }
.icon_header_coop { width: 17px; height: 17px; background: url("../image/layout/icon_gnb_coo.png") no-repeat center; }
.icon_header_board { width: 17px; height: 17px; background: url("../image/layout/icon_gnb_board.png") no-repeat center; }
.icon_header_data { width: 17px; height: 17px; background: url("../image/layout/icon_gnb_doc.png") no-repeat center; }
.icon_header_editing { width: 16px; height: 16px; background: url("../image/layout/icon_gnb_edit.png") no-repeat center; }
.icon_header_reset { width: 20px; height: 20px; background: url("../image/layout/icon_gnb_reset.png") no-repeat center; }
.icon_header_close { width: 20px; height: 20px; background: url("../image/layout/icon_gnb_close.png") no-repeat center; }
.icon_header_notice { width: 12px; height: 12px; background: url("../image/layout/icon_gnb_notice.png") no-repeat center; }

/* LNB */
.icon_lnb_doc { width: 11px; height: 13px; background: url("../image/layout/icon_lnb_doc.png") no-repeat center; }
.icon_lnb_home { width: 30px; height: 30px; background: url("../image/layout/btn_lnb_home.png") no-repeat center; }
.darkmode .icon_lnb_home { width: 30px; height: 30px; background: url("../image/layout/btn_lnb_home_darkmode.png") no-repeat center; border-radius:5 !important}
.icon_lnb_setting { width: 30px; height: 30px; background: url("../image/layout/btn_lnb_setting.png") no-repeat 0;border-radius:0 !important}
.darkmode .icon_lnb_setting { width: 30px; height: 30px; background: url("../image/layout/btn_lnb_setting_darkmode.png") no-repeat 0;border-radius:5 !important}
.icon_lnb_setting_darkmode { width: 30px; height: 30px; background: url("../image/layout/btn_lnb_setting_darkmode.png") no-repeat 0;border-radius:5 !important}
:root {
    --setting_icon_size: 0.4;
}
.icon_lnb_setting_glass {
	width: 48px;
    height: 48px;
    background: url(../image/layout/btn_lnb_setting_glass.png) no-repeat 0;
    border-radius: 0 !important;
    transform: scale(var(--setting_icon_size));
    position: absolute;
    right: 0px;
    top: 4px;
    border: 0;
    cursor:pointer;
    transition: all ease 0.3s;
}
.darkmode .icon_lnb_setting_glass {
	filter:invert(1);
}

.icon_lnb_setting_glass:hover{
	transform:scale(var(--setting_icon_size));
	animation: setting_icon_rotate 3s linear infinite;
}
@keyframes setting_icon_rotate {
  from {
    -webkit-transform: scale(var(--setting_icon_size)) rotate(0deg);
    -o-transform: scale(var(--setting_icon_size)) rotate(0deg);
    transform: scale(var(--setting_icon_size)) rotate(0deg);
  }
  to {
    -webkit-transform: scale(var(--setting_icon_size)) rotate(360deg);
    -o-transform: scale(var(--setting_icon_size)) rotate(360deg);
    transform: scale(var(--setting_icon_size)) rotate(360deg);
  }
}

.icon_pre_year { width: 9px; height: 9px; background: url("../image/layout/btn_pre_year.png") no-repeat center; }
.icon_next_year { width: 9px; height: 9px; background: url("../image/layout/btn_next_year.png") no-repeat center; }
.icon_pre_month { width: 5px; height: 9px; background: url("../image/layout/btn_pre_month.png") no-repeat center; }
.icon_next_month { width: 5px; height: 9px; background: url("../image/layout/btn_next_month.png") no-repeat center; }

.icon_lnb_alarm { width: 30px; height: 30px; background: url("../image/layout/icon_lnb_alarm.png") no-repeat 0;border-radius:0 !important }
.icon_lnb_member { width: 30px; height: 30px; background: url("../image/layout/icon_lnb_member.png") no-repeat 0;border-radius:0 !important}
.icon_lnb_tag { width: 30px; height: 30px; background: url("../image/layout/icon_lnb_tag.png") no-repeat 0;border-radius:0 !important}

/* 메인A */
.icon_ma_setting { width: 18px; height: 18px; background: url("../image/common/btn_profile_set.png") no-repeat center;border-radius:0 !important }
.icon_ma_notice { width: 22px; height: 22px; background: url("../image/common/icon_notice_wh.png") no-repeat center; border-radius:0 !important}
.icon_ma_more { width: 20px; height: 20px; background: url("../image/common/btn_notice_more.png") no-repeat center;border-radius:0 !important }
.icon_ma_portlet_setting { width: 16px; height: 16px;  background: url("../image/layout/icon_gnb_edit.png") no-repeat center; }
.icon_ma_mail { width: 24px; height: 24px; background: url("../image/common/icon_my_mailbox.png") no-repeat center;border-radius:0 !important }
.icon_ma_pencil { width: 24px; height: 24px; background: url("../image/common/icon_my_approval.png") no-repeat center;border-radius:0 !important }
.icon_ma_doc { width: 24px; height: 24px; background: url("../image/common/icon_my_draft.png") no-repeat center;border-radius:0 !important }

.icon_ma_envelope { width:38px; height:38px; background:#7d8ee1 url("../image/common/icon_bo_mail.png") no-repeat center;}
.icon_ma_quot { width:38px; height:38px; background:#62cae3 url("../image/common/icon_bo_quot.png") no-repeat center;}
.icon_ma_pen { width: 12px; height: 14px; background:#4bc076 url("../image/common/icon_bo_pen.png") no-repeat center;}
.icon_ma_calendar { width: 12px; height: 14px; background:#7bb9fe url("../image/common/icon_bo_calendar.png") no-repeat center;}
.icon_ma_card { width: 12px; height: 14px; background:#fdb858 url("../image/common/icon_bo_cowork.png") no-repeat center;}
.icon_ma_bbs { width: 12px; height: 14px; background:#e8565c url("../image/common/icon_bo_bbs.png") no-repeat center;}

.icon_portlet_mail{width: 24px; height: 24px; background: url("../image/common/icon_portlet_mail.png") no-repeat center;border-radius:0 !important }
.icon_portlet_approval01{width: 24px; height: 24px; background: url("../image/common/icon_portlet_approval01.png") no-repeat center;border-radius:0 !important }
.icon_portlet_approval02{width: 24px; height: 24px; background: url("../image/common/icon_portlet_approval02.png") no-repeat center;border-radius:0 !important }
.icon_portlet_calendar{width: 24px; height: 24px; background: url("../image/common/icon_portlet_calendar.png") no-repeat center;border-radius:0 !important }

/*------------------------------------------------------------------------------
  [아이콘] 버튼
-------------------------------------------------------------------------------*/
/* 아코디언  */
.icon_btn.icon_accordion, .icon_btn.icon_accordion_big { transition: 500ms; }
.icon_btn.icon_accordion.active, .icon_btn.icon_accordion_big.active  { transform: rotate(-180deg); }
.darkmode .icon_btn.icon_accordion_big.active { transform: rotate(-90deg); }

/* 2024-01-04 / bjj / 게시판 트리 펼침버튼 다크모드 */
.icon_btn_darkmode.icon_accordion_darkmode { transition: 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); }
.icon_btn_darkmode.icon_accordion_darkmode.active { transform: rotate(-90deg); }
.darkmode .icon_btn.icon_accordion { transition: 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); }
.darkmode .icon_btn.icon_accordion.active { transform: rotate(-90deg); }
.darkmode th .icon_btn.icon_accordion.active { transform: rotate(270deg); }
.darkmode .bbs_writer_info .icon_btn.icon_accordion {transform: rotate(180deg); transition: 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); }
.darkmode .bbs_writer_info .icon_btn.icon_accordion.active { transform: rotate(270deg); }

/* 리본메뉴  */
.icon_total_menu { width: 30px; height: 30px; background-image: url("../image/common/btn_total_menu.png"); }
.darkmode .icon_total_menu { width: 30px; height: 30px; background-image: url("../image/common/btn_total_menu_darkmode.png"); }
.icon_refresh { width: 17px; height: 16px; background-image: url("../image/common/btn_refresh.png"); }
.darkmode .icon_refresh { width: 17px; height: 16px; background-image: url("../image/common/btn_refresh_darkmode.png"); }
.icon_search { width: 17px; height: 16px; background-image: url("../image/common/input_title_search.png"); }

/* Todo 기능 */
.icon_todo_more { width: 16px; height: 26px; background: url("../image/common/btn_todo_more.png") no-repeat center; }
.icon_todo_date { width: 17px; height: 16px; background: url("../image/common/btn_todo_date.png") no-repeat center; }
.icon_todo_del { width: 17px; height: 17px; background: url("../image/common/btn_todo_del.png") no-repeat center; }
.icon_todo_del.active { width: 17px; height: 17px; background: url("../image/common/btn_todo_on.png") no-repeat center; }

/* 할일 싱세보기 */
.icon_sche_detail_close { width: 13px; height: 13px; background: url("../image/common/btn_sche_detail_close.png") no-repeat center; }
.darkmode .icon_sche_detail_close { 
	width: 13px; 
	height: 13px; 
	background: url("../image/common/btn_sche_detail_close.png") no-repeat center; 
	filter: brightness(5);
}
.icon_sche_detail_del { width: 11px; height: 14px; background: url("../image/common/btn_sche_detail_del.png") no-repeat center; }
.icon_sche_detail_modify { width: 14px; height: 14px; background: url("../image/common/btn_sche_detail_modify.png") no-repeat center; }

/* 결재선지정 */
.icon_sortable { width: 14px; height: 12px; background: url("../image/common/btn_sortable.png") no-repeat right center; }

/* COP 개인 */
.icon_arrow_prev { width: 22px; height: 22px; background: url("../image/common/icon_arrow_prev.png") no-repeat center; }
.icon_arrow_next { width: 22px; height: 22px; background: url("../image/common/icon_arrow_next.png") no-repeat center; }
.darkmode .icon_arrow_prev { width: 22px; height: 22px; background: url("../image/common/icon_arrow_prev_darkmode.png") no-repeat center; }
.darkmode .icon_arrow_next { width: 22px; height: 22px; background: url("../image/common/icon_arrow_next_darkmode.png") no-repeat center; }
/* 일정표 */
.icon_arrow_left { width: 9px; height: 14px; background: url("../image/common/btn_arrow_left.png") no-repeat center; }
.icon_arrow_right { width: 9px; height: 14px; background: url("../image/common/btn_arrow_right.png") no-repeat center; }
.darkmode .icon_arrow_left { width: 9px; height: 14px; background: url("../image/common/pagi_prev_darkmode.png") no-repeat center; }
.darkmode .icon_arrow_right { width: 9px; height: 14px; background: url("../image/common/pagi_next_darkmode.png") no-repeat center; }

/* 팝업 */
.icon_arrow { width: 20px; height: 24px; background-image: url("../image/common/btn_arrow_down.png"); }
.icon_arrow.up { background-image: url("../image/common/btn_arrow_up.png"); }
.icon_man { width: 15px; height: 15px; background: url("../image/common/icon_man.png") no-repeat top center; }

/* 포틀릿 */
.icon_portlet_btn { width: 13px; height: 13px; background: url("../image/layout/btn_portlet_title.png") no-repeat center;border-radius:0 !important }
.darkmode .icon_portlet_btn { width: 13px; height: 13px; background: url("../image/layout/btn_portlet_title_darkmode.png") no-repeat center;border-radius:0 !important }
.icon_portlet_prev { width: 16px; height: 16px; background-image: url("../image/common/btn_accordion_prev.png"); text-indent: -9999px;border-radius:0 !important }
.icon_portlet_next { width: 16px; height: 16px; background-image: url("../image/common/btn_accordion_next.png"); text-indent: -9999px;border-radius:0 !important }


/* 레이어 */
.icon_cross_bk { width: 16px; height: 16px; background-image: url("../image/popup/btn_cross_bk.png"); }

/* 퀵메뉴 */
.icon_quick_menu.quick_img_L { width: 6px; height: 16px; background: url("../image/common/icon_quick_off.png") no-repeat center; }
.icon_quick_menu.quick_img_R { width: 6px; height: 16px; background: url("../image/common/icon_quick_on.png") no-repeat center; }
.icon_quick_menu.quick_img_mdiR { width: 6px; height: 16px; background: url("../image/common/icon_quick_on.png") no-repeat center; }
.icon_quick_address { width: 28px; height: 26px; background: url("../image/common/icon_quick_address.png") no-repeat center; }
.icon_quick_system { width: 28px; height: 23px; background: url("../image/common/icon_quick_system.png") no-repeat center; }
.icon_quick_todo { width: 28px; height: 20px; background: url("../image/common/icon_quick_todo.png") no-repeat center; }
/*2025-07-07 / bjj / 퀵메뉴 설정기능으로 아이콘 종류 추가*/
.icon_quick_accounting { width: 28px; height: 20px; background: url("../image/common/icon_quick_accounting.png") no-repeat center; }
.icon_quick_board { width: 28px; height: 20px; background: url("../image/common/icon_quick_board.png") no-repeat center; }
.icon_quick_chatbot { width: 28px; height: 20px; background: url("../image/common/icon_quick_chatbot.png") no-repeat center; }
.icon_quick_education { width: 28px; height: 20px; background: url("../image/common/icon_quick_education.png") no-repeat center; }
.icon_quick_hr { width: 28px; height: 20px; background: url("../image/common/icon_quick_hr.png") no-repeat center; }
.icon_quick_idea { width: 28px; height: 20px; background: url("../image/common/icon_quick_idea.png") no-repeat center; }
.icon_quick_internet { width: 28px; height: 20px; background: url("../image/common/icon_quick_internet.png") no-repeat center; }
.icon_quick_mealmenu { width: 28px; height: 20px; background: url("../image/common/icon_quick_mealmenu.png") no-repeat center; }
.icon_quick_meeting { width: 28px; height: 20px; background: url("../image/common/icon_quick_meeting.png") no-repeat center; }
.icon_quick_partner { width: 28px; height: 20px; background: url("../image/common/icon_quick_partner.png") no-repeat center; }
.icon_quick_question { width: 28px; height: 20px; background: url("../image/common/icon_quick_question.png") no-repeat center; }
.icon_quick_approval { width: 28px; height: 20px; background: url("../image/common/icon_quick_approval.png") no-repeat center; }
.icon_quick_m365 { width: 28px; height: 20px; background: url("../image/common/icon_quick_m365.png") no-repeat center; }
/*2025-07-07 / bjj / 퀵메뉴 설정기능으로 호버 추가*/
.icon_quick_hover::after{
    content: "";
    position: absolute;
    width:0px;
    height: 20px;
    display: block;
    right: 2rem;
    top: 1.4rem;
    transform:scaleX(0);
    transform-origin:right;
    font-size: 14px;
    font-weight: 800;
}
.icon_quick_hover:hover::after{
	content: attr(data-menuname);
	width: max-content;
	text-indent:0;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    text-align: left;
    border-radius: 5px;
	padding: 0px 4px 0px 4px;
	transform:scaleX(1);
	transition: transform 0.5s ease;
}


/* MDI */
.icon_tab_home { width: 18px; height: 18px; background: url("../image/common/btn_tab_home.png") no-repeat center;background-size: 16px }
.icon_tab_close { width: 12px; height: 12px; background: url("../image/common/btn_tab_del.png") no-repeat center;background-size: 10px }
.icon_tab_pin { width: 38px; height: 38px; background: url("../image/common/btn_tab_pin.png") no-repeat center; }
.icon_tab_add { width: 18px; height: 18px; background: url("../image/common/btn_tab_add.png") no-repeat center;border-radius:0 !important; }

/* 첨부파일 이동 */
.icon_move { width: 20px; height: 20px; }
.icon_move.move_up { background-image:  url("../image/common/icon_move_up.png"); }
.icon_move.move_down { background-image:  url("../image/common/icon_move_down.png"); }

/* 슬라이드 열기 */
.btn_draw_open { width: 30px; height: 30px; }
.btn_draw_open.to_left { background-image:  url("../image/common/btn_open_left.png"); }
.btn_draw_open.to_right { background-image:  url("../image/common/btn_open_right.png"); }

/*------------------------------------------------------------------------------
  [버튼]
-------------------------------------------------------------------------------*/
/* 버튼 리셋 */
.eb_btn { display: inline-block; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; vertical-align: middle; text-align: center; text-decoration: none; -webkit-appearance: none; appearance: none; cursor: pointer; }


/*------------------------------------------------------------------------------
  [버튼] 종류
-------------------------------------------------------------------------------*/
/* button - default design */
.eb_btn { padding: 6px 9px 5px; border: 1px solid #c3c6c9; border-radius:2px; font-size: 13px; line-height: 17px; color: #707070; background-color: #ffffff; }
.eb_btn:link, .eb_btn:visited { color: #707070; }
.darkmode .eb_btn { padding: 6px 7px 5px;font-size: 13px; line-height: 17px; color: #FFFFFF;background-color:#3f3f3f; border:none;border-radius:5px; /* box-shadow:inset 0px 1px 0px 0px rgb(127 127 125 / 60%); */}
/*추가기능*/
.icon_more { width: 42px; height: 24px; background-image: url("../image/common/btn_sub_more.png"); text-indent: -9999px; }

/* 기본버튼 */
.eb_btn.btn_base { min-width: 70px; min-height: 30px; }

/* 아이콘버튼 */
.eb_btn.icon_btn { text-indent: -9999px; border: 0; background-repeat: no-repeat; background-position: center; background-color: transparent; }
.eb_btn.icon_btn:active { border: 0; }
.darkmode .eb_btn.icon_btn_darkmode { background-color: #3F3F3F; border:0px; border-radius:5px;}
.darkmode .eb_btn.icon_btn { text-indent: -9999px; border: 0; background-repeat: no-repeat; background-position: center; background-color: transparent; }

/* 확인버튼 */
.eb_btn.btn_confirm { min-width: 90px; line-height: 26px; border: 0; border-radius: 2px; font-size: 14px; color: #ffffff; background-color: #eb765f; }
.eb_btn.btn_small_confirm {  padding: 6px 9px 5px; border: 0px solid #c3c6c9; border-radius:2px; font-size: 13px; line-height: 17px; color: #ffffff; background-color: #eb765f; margin-top:4px; }
.eb_btn.btn_confirm:active { border: transparent; color: #fff; }

/* 취소버튼 */
.eb_btn.btn_cancel { min-width: 90px; line-height: 26px; border: 1px solid #d5d5d5; border-radius: 2px; font-size: 14px; color: #707070; background-color: #ffffff; }
.body_darkmode .eb_btn.btn_cancel { min-width: 90px; line-height: 26px; border: 1px solid #5e6264; border-radius: 5px; font-size: 14px; color: #707070; background-color: #636769; color:#FFFFFF;}

/* 링크 버튼 */
.btn_link { padding: 0 9px 0 0; border: 0; border-radius: 0; background: url('../image/common/btn_arrow_right_orange.png') no-repeat right 1px; }
.btn_link span { font-size: 13px; color: #303030; border-bottom: 1px solid #636363; }

/* 프린트 버튼 */
.eb_btn.btn_print { background: url(../image/common/btn_print.png) no-repeat center; }
.eb_btn.btn_print.active { background-image: url(../image/common/btn_print_active.png); }

/* 테이블 버튼 */
.eb_btn.btn_tbl { min-width: 48px; min-height: 30px; }

/* 테이블 내부 삽입 버튼 */
table td .eb_btn { padding: 3px 5px 2px; font-size: 11px; line-height: 15px; }
table td .eb_btn.btn_base { min-width: auto; min-height: auto; }
.darkmode table td .eb_btn.btn_base { min-width: auto; min-height: auto; background-color: #3f3f3f !important; box-shadow:none;}
table td .zipcode { padding: 7px 2px 6px 2px; font-size: 11px; line-height: 15px; } /*bjj / 2022-11-22 / 우편번호 버튼 */


/*좌우버튼*/
.eb_btn.btn_del{letter-spacing: -1px;padding-left:12px !important;background: url("../image/common/btn_pre.png") no-repeat 7px center}
.eb_btn.btn_add{letter-spacing: -1px;padding-right:12px !important;background: url("../image/common/btn_next.png") no-repeat 68px center}
.display_item_wrap .btn_group .eb_btn.btn_add{letter-spacing: -1px;padding-right:12px !important;background: url("../image/common/btn_next.png") no-repeat 86px center}
td .eb_btn.btn_add{letter-spacing: -1px;padding-right:12px !important;background: url("../image/common/btn_next.png") no-repeat 48px center}

.darkmode .eb_btn.btn_add{
	letter-spacing: -1px;
	padding-right:12px !important;
	background: url("../image/common/btn_next.png") no-repeat 68px center;
	background-color: #3f3f3f;
}
.darkmode .eb_btn.btn_del{
	letter-spacing: -1px;
	padding-left:12px !important;
	background: url("../image/common/btn_pre.png") no-repeat 7px center;
	background-color: #3f3f3f;
}

.darkmode .display_item_wrap .btn_group .eb_btn.btn_add{
	letter-spacing: -1px;
	padding-right:12px !important;
	background: url("../image/common/btn_next.png") no-repeat 86px center;
	background-color: #3f3f3f;
}


/*------------------------------------------------------------------------------
  [버튼] 색
-------------------------------------------------------------------------------*/
/* 버튼색 lightgray */
.eb_btn.btn_lightgray { border-color: transparent; color: #ffffff; background: #9da0ae; }

/* 버튼색 navy */
.eb_btn.btn_navy { border-color: transparent; color: #ffffff; background: #3b415d; }
.darkmode .eb_btn.btn_navy { border:none; color: #ffffff; background: #3f3f3f; border-radius:5px;}
.body_darkmode .eb_btn.btn_navy { border:none; color: #ffffff; background: #3f3f3f; border-radius:5px;}

/*------------------------------------------------------------------------------
  [버튼] 속성 
-------------------------------------------------------------------------------*/
/* button - attribute - disabled */
.btn_disabled, 
.eb_btn:disabled, 
.eb_btn[disabled="disabled"] { border: 1px solid #eaeaea; color: #c8c8c8; background: #f0f0f0; cursor: default; }

.darkmode .btn_disabled, 
.darkmode .eb_btn:disabled, 
.darkmode .eb_btn[disabled="disabled"] {border:none; color: #6d6d6d; background: #f0f0f0; cursor: no-drop; }

/* button - attribute - disabled - btn_confirm */
.eb_btn.btn_confirm:disabled, 
.eb_btn.btn_confirm[disabled="disabled"] { border-color: transparent; ; color: #c8c8c8; background: #f0f0f0; }

/* button - attribute - disabled - btn_confirm */
.eb_btn.btn_cancel:disabled, 
.eb_btn.btn_cancel[disabled="disabled"] { border: 1px solid #e4e6e9; color: #c8c8c8; background: #ffffff; }


/*------------------------------------------------------------------------------
  [버튼] 반응
-------------------------------------------------------------------------------*/
/* button - feedback */
.eb_btn:active { z-index: 100; border: 1px solid #9d9fac; color: #303030; }
.eb_btn[disabled="disabled"]:active { border: 1px solid #eaeaea; color: #c8c8c8; background: #f0f0f0; opacity: 1; filter:alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.eb_btn.icon_btn:active { opacity: .8; opacity: .8; filter:alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
.btn_lightgray:active { border-color: transparent; ; color: #ffffff; background: #9da0ae; opacity: .8; filter:alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
.btn_navy:active { border-color: transparent; color: #ffffff; background: #3b415d; opacity: .8; filter:alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
.btn_confirm:active { border: inherit; border-color: transparent; ; color: #ffffff; background: #e86451; }
.btn_confirm[disabled="disabled"]:active { border-color: transparent; ; color: #c8c8c8; background: #f0f0f0; }
.btn_cancel:active { border: 1px solid #9d9fac; color: #303030; }
div.btn_group_wrap .eb_btn[data-toggle="button"]:active { z-index: 0; }
.btn_link:active { border-color: transparent; ; }


/*------------------------------------------------------------------------------
  [버튼] 그룹
-------------------------------------------------------------------------------*/
/* button - wrap */
div.btn_wrap { margin: 20px 0 30px; text-align: center; }
div.btn_wrap.align_left { text-align: left; }
div.btn_wrap.align_right { text-align: right; }

div.btn_wrap .eb_btn { margin-right: 4px; }
div.btn_wrap .eb_btn:last-child { margin-right: 0; }

.eb_btn+.eb_text { margin-left: 14px; }

.eb_btn.eb_btn.btn_func { min-height: 30px; padding: 0 8px; border: 1px solid #c3c6c9; border-radius: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.darkmode .eb_btn.eb_btn.btn_func { min-height: 30px; padding: 0 8px; border: none; border-radius: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.eb_btn.eb_btn.btn_func:active { border: 1px solid #9d9fac; color: #303030; }
.eb_btn.eb_btn.btn_func.arrow { padding-right: 25px; background: url("../image/common/btn_arrow_down.png") no-repeat right center; }
.darkmode .eb_btn.eb_btn.btn_func.arrow { padding-right: 25px; background: url("../image/common/btn_arrow_down.png") no-repeat right center; background-color:#3f3f3f;box-shadow: inset 0px 1px 0px 0px rgba(127,127,125,0.6);}
.eb_btn.eb_btn.btn_func.arrow.up {background: url("../image/common/btn_arrow_up.png") no-repeat right center; }
.darkmode .eb_btn.eb_btn.btn_func.arrow.up {background: url("../image/common/btn_arrow_up.png") no-repeat right center; background-color:#3f3f3f;}
.eb_btn.eb_btn.btn_func.arrow:disabled, .eb_btn.eb_btn.btn_func.arrow[disabled="disabled"] { border:1px solid #eaeaea; }
.eb_btn.eb_btn.btn_func.btn_send { padding-left: 35px; border-color: #fc6e57; color: #fc6e57; background: url("../image/common/icon_send_mail.png") no-repeat 10px center}

.eb_btn.icon_question { display: inline-block; position: relative; margin: 5px 0 0 5px; background-color: transparent; }
.eb_btn.icon_question:hover > div { display: block; }
.eb_btn.icon_question > div { z-index: 200; display: none; position: absolute; top: 26px; left: -8px; min-width: 240px; min-height: 48px; padding: 14px; line-height: 18px; border: 1px solid #e5e5e5; border-radius: 3px; font-size: 13px; color: #707070; background: #fff; -webkit-box-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.1); box-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.1); box-sizing: border-box; text-align: center; font-weight: normal; }
.eb_btn.icon_question > div:before { content: ""; display: block; position: absolute; top: -5px; left: 14px; width: 7px; height: 7px; border: 1px solid #e5e5e5; border-width: 1px 0 0 1px; -ms-transform-origin: 50% }

.eb_btn.icon_btn.icon_todo_del > div { z-index: 200; display: none; position: absolute; top: 26px; left: -8px; min-width: 80px; min-height: 24px; padding: 7px; line-height: 18px; border: 1px solid #e5e5e5; border-radius: 3px; font-size: 13px; color: #707070; background: #fff; -webkit-box-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.1); box-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.1); box-sizing: border-box; text-align: center; font-weight: normal; }
.eb_btn.icon_btn.icon_ma_setting > div { z-index: 200; display: none; position: absolute; top: 20px; left: 0px; min-width: 120px; min-height: 24px; padding: 7px; line-height: 18px; border: 1px solid #e5e5e5; border-radius: 3px; font-size: 13px; color: #707070; background: #fff; -webkit-box-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.1); box-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.1); box-sizing: border-box; text-align: center; font-weight: normal; }
.eb_btn.icon_btn.icon_ma_setting.info > div { z-index: 200; display: none; position: absolute; top: 20px; left: -80px; min-width: 120px; min-height: 24px; padding: 7px; line-height: 18px; border: 1px solid #e5e5e5; border-radius: 3px; font-size: 13px; color: #707070; background: #fff; -webkit-box-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.1); box-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.1); box-sizing: border-box; text-align: center; font-weight: normal; }
/********************************************************************************************************
  [폼]
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  [폼] 인풋 - 간격
-------------------------------------------------------------------------------*/
div.eb_input { margin-right: 6px; }
div.eb_input:last-child { margin-right: 0; }
div.eb_radio { margin-right: 14px; }
div.eb_radio:last-child { margin-right: 0; }
/* 2024-01-19 / bjj / 다크모드수정으로 div,label 과 그 안의 span을 바깥으로 꺼내서, margin-right를 14px-> 1px로 줄임, labeltxt 에 대한 margin-right 추가 */
div.eb_checkbox { margin-right: 1px; }
div span.labeltxt {margin-right:5px;color:#000000;}
div span.labeltxt_bbsDispConfig{margin-right:5px;color:#000000;font-size:13px;margin-left:4px;}
.darkmode div span.labeltxt {margin-right:5px;color:#FFFFFF;}
.body_darkmode div span.labeltxt {margin-right:5px;color:#FFFFFF;}
.body_darkmode div span.labeltxt_bbsDispConfig {margin-right:5px;color:#FFFFFF;font-size:13px;margin-left:-22px;}
.search_detail div.eb_checkbox {margin-right:2px;}
.vote_target_user .labeltxt{ font-size: 12px; vertical-align: top;}

.eb_tbl div.eb_checkbox { margin-right: 0px; }
div.eb_checkbox:last-child { margin-right: 0; }
div.eb_select { margin-right: 6px; }
div.eb_select:last-child { margin-right: 0; }

/*2024-03-18 / bjj / 다크모드 분기 때문에 게시판 항목표시 설정 부분 라디오 버튼 별도 css 추가 */
div.formset_inner .eb_radio div.orderRadio {display:inline-block;}
.darkmode div.formset_inner .eb_radio div.orderRadio {display:inline-block;}
/*------------------------------------------------------------------------------
  2023-04-11 / bjj / 회사일정 부서명긴경우 개행방지
-------------------------------------------------------------------------------*/
div.white-space-nowrap {white-space : nowrap;}


/*------------------------------------------------------------------------------
  [폼] 인풋 - 초기화
-------------------------------------------------------------------------------*/
div.eb_input input { -webkit-appearance: none; -moz-appearance:none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; }
div.eb_input input::-ms-clear, div.eb_input input::-ms-reveal { display: none; }
div.eb_input input[type="number"]::-webkit-outer-spin-button,
div.eb_input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
div.eb_input input[type="number"] { -moz-appearance: textfield; }


/*------------------------------------------------------------------------------
  [폼] 인풋 - 기본
-------------------------------------------------------------------------------*/
/* form - input - type - default */
div.eb_input { display: inline-block; position: relative; width: 160px; height: 30px; vertical-align: middle; max-width: 100%; }
div.eb_input input { width: 100%; height: 100%; line-height: 1; padding: 0 9px; border: 1px solid #d5d5d5; font-size: 13px; color: #303030; background-color: #ffffff; }
.darkmode div.eb_input input { width: 100%; height: 100%; line-height: 1; padding: 0 9px; border: 1px solid #303234; font-size: 13px; color: #FFFFFF; background-color: #262626; border-radius:5px;}
.body_darkmode div.eb_input input { width: 100%; height: 100%; line-height: 1; padding: 0 9px; border: 1px solid #3f3f3f; font-size: 13px; color: #FFFFFF; background-color: #262626; border-radius:5px;}
div.eb_input input:focus { border-color: #909090; }
.darkmode div.eb_input input:focus { border: 3px solid #2C6E93; transition:500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);}
.darkmode div.eb_input input[name="title"] { width: 98%; height: 100%; line-height: 1; padding: 0 9px; border: 1px solid #303234; font-size: 13px; color: #FFFFFF; background-color: #262626; border-radius:5px;}
.body_darkmode div.eb_input input:focus { border: 3px solid #2C6E93; transition:500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);}
div.eb_input.typing input{ padding-right: 30px; }
div.eb_input span.btn_textclear,
div.eb_textarea span.btn_textclear{ display: none; position: absolute; top: 0; right: 0; width: 30px; height: 30px; background: url('../image/common/input_btn_textclear.png') no-repeat center; background-size: 14px; text-indent: -9999px; cursor: pointer; }
div.eb_input.ta_r input { text-align: right; }

/* 2023-07-05 / bjj / time picker 추가 */

.time-picker {
  display: flex;
  justify-content: center;
  flex-direction: column;
  transition: all 0.4s ease;
  height: 0;
  overflow: hidden;
}
.time-picker .set-time {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.time-picker .label {
  width: 60px;
  margin: 0 5px;
  text-align: center;
  line-height: 34px;
  display: inline-style;
}
.time-picker .label a {
  display: block;
  border: 1px solid #DDDDDD;
  cursor: pointer;
  font-size: 28px;
  font-weight: bold;
  border-radius: 3px;
}
.darkmode .time-picker .label a {
  display: block;
  border: 1px solid #484848;
  cursor: pointer;
  font-size: 28px;
  font-weight: bold;
  border-radius: 3px;
}
.time-picker .label a:hover, .time-picker .label a:active {
  background-color: red;
  color: #FFFFFF;
  text-decoration: none;
}
.body_darkmode .label a:hover, .time-picker .label a:active {
  background:linear-gradient(to bottom, #1e70dc, #1d64c4);
  color: #FFFFFF;
  text-decoration: none;
}

.time-picker .label .set {
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  line-height: 34px;
  font-size: 20px;
  font-weight: bold;
  border: transparent;
}
.body_darkmode .time-picker .label .set {
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  line-height: 34px;
  font-size: 20px;
  font-weight: bold;
  border: 1px solid #484848 !important;
  background-color:#262626 !important;
  color:#FFFFFF;
}

.time-picker #submitTime {
  text-align: center;
  line-height: 34px;
  border: 1px solid #DDDDDD;
  width: 128px;
  margin: auto;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
}
.body_darkmode .time-picker #submitTime {
  text-align: center;
  line-height: 34px;
  border: 1px solid #484848;
  width: 128px;
  margin: auto;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  background:linear-gradient(to bottom, #1e70dc, #1d64c4);
}

.time-picker.open {
  border: 1px solid #484848;
  padding: 15px;
  transition: all 0.5s ease;
  height: auto;
  background-color: #FCFCFC;
  width:9rem;
}
.body_darkmode .time-picker.open {
  border: 1px solid #484848;
  padding: 15px;
  transition: all 0.5s ease;
  height: auto;
  background-color: #262626 !important;
  width:9rem;
}

/* 2023-07-24 / bjj / turtle animation Start*/
@media (max-width: 880px) {
  .maxWidth880px {
    visibility:hidden;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.noIEmode {
	    display: none;
	}
}
.turtle {width:1.2rem;height:1.2rem;}
.divTurtleWrapper{width: 1rem;height: 1rem;transform: scaleX(0.2) scaleY(0.2);position: relative;right: 0.4rem;top: 0.2rem;z-index:1;}
.turtle-img-moving {animation: turtleAnimation 2s infinite linear;}
.turtle-container-rightwardMove {animation: rightwardMove 10s forwards linear;}
.inputTimerTime {width:2.2rem;font-size:11px;text-align: center;}
.btnTimerStart{width:1.5rem;padding:1px;font-size:11px;}
.turtle-container {
	display: flex;
	justify-content: center;
  	align-items: center;
  	margin: 0;
  	position: relative;
    width: 1.2rem;
  	left: 0%;
}
.animeVisibleByOpacity {animation: opacityShow 0.5s forwards linear; }
.animeInvisibleByOpacity {animation: opacityHide 0.5s forwards linear; }
@keyframes turtleAnimation {
  0% {
    transform: rotate(0deg);
    transform-origin: center;
  }
  25% {
    transform: rotate(10deg);
    transform-origin: center;
  }
  50% {
    transform: rotate(0deg);
    transform-origin: center;
  }
  75% {
    transform: rotate(-10deg);
    transform-origin: center;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: center;
  }
}
@keyframes rightwardMove {
  0% {
    left: 0;
  }
  100% {
    left: 90%;
  }
}
@keyframes opacityShow { 0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes opacityHide { 0% {opacity: 1;} 100% {opacity: 0;}}
.divBalloonWraper{position: absolute;top: -13.4rem;right: 15.7rem;width: 11.6rem;opacity:0;transform:scale(0);}
.divBalloonWraper > .divBalloonUpper {background-color:grey;right:18rem;top: -2rem;display: flex;padding:3px;border-radius:5px;height:12.5rem;}
.darkmode .divBalloonWraper > .divBalloonUpper {background-color:#3f3f3f;right:18rem;top: -2rem;display: flex;padding:3px;border-radius:5px;height:12.5rem;}
.divBalloonWraper > .divBalloonLower {width:0px;height:0px;border-bottom:10px solid transparent;border-left:12px solid grey;position: relative;left: 5.7rem;}
.darkmode .divBalloonWraper > .divBalloonLower {width:0px;height:0px;border-bottom:10px solid transparent;border-left:12px solid #3f3f3f;position: relative;left: 5.7rem;}
.divTurtleFixed {cursor:pointer;position: absolute;top: 0.5rem;right: 20.3rem;}
.divTurtleArea {width:12rem;right: 20.5rem;top: 0.3rem;position: absolute;display:none;}
.bar_horizon{border: 0.5px solid white;position: relative;top: 0.7rem;}
.bar_vertical{width: 0;height: 50%;border: 0.5px solid white;position: absolute;left: 0%;top: 0.4rem;}
.divMessageBalloonWraper {position: absolute;top: -2.3rem;width: 3.4rem;opacity:0;}
.divMessageBalloonWraper > .divMessageBalloonUpper {background-color:grey;right:18rem;top: -2rem;display: flex;padding:3px;border-radius:5px;justify-content: center;color:white;}
.divMessageBalloonWraper > .divMessageBalloonLower {width:0px;height:0px;border-bottom:10px solid transparent;border-left:12px solid grey;position: relative;left: 1.7rem;}
.divFlag {position: absolute;right: -8px;top: 0px;width: 15px;height: 15px;}
.hidingTurtle{
	width: 172px;
	height: 172px;
	background: url('/MOIN_resource/custom/img/turtle_hide_sprite_frame.png');
	transform: translate(-50%, -50%);
	animation: frameHide 1s steps(4, start) forwards;
}
.showingTurtle{
	width: 172px;
	height: 172px;
	background: url('/MOIN_resource/custom/img/turtle_hide_sprite_frame.png');
	transform: translate(-50%, -50%);
	animation: frameShow 1s steps(4, start) forwards;
}
@keyframes frameHide{
	100% {
    	background-position: -688px 0;
    }
}
@keyframes frameShow{
	0% {
        background-position: -688px 0;
    }
    100% {
        background-position: 0 0;
    }
}
.walkingTurtle{
	width: 172px;
	height: 172px;
	background: url('/MOIN_resource/custom/img/turtle_walking_sprite_frame.png');
	transform: translate(-50%, -50%);
	animation: frameWalking 2s steps(6, start) infinite;
}
@keyframes frameWalking{
	100% {
    	background-position: -1032px 0;
    }
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.shake {
  will-change: transform;
  animation: shake 0.7s;
}
/* 2023-07-24 / bjj / turtle animation End*/


/* 2022-11-29 / bjj / otp ui 추가 */
div.otp_wrap {padding : 1rem;text-align:left;}
div.otp_wrap > .otp_confirm_btn_wrap {text-align: center; display:inline-block;width:4rem;margin-left:0.5rem;}
div.otp_wrap > .otp_confirm_btn_wrap > .otp_confirm_btn_input {min-width:4rem;height:2rem;}
div.eb_input_digits_wrap { display: inline-block; position: relative; height: 30px; vertical-align: middle; max-width: 100%; margin-left:0.5rem;}
div.eb_input_digits_wrap { display: inline-block; position: relative; height: 30px; vertical-align: middle; max-width: 100%; margin-left:0.5rem;}
div.eb_input_digits_wrap_user {margin:0px;width:100%;margin:1rem 0 3rem 0;}
div.eb_input_digits_wrap input { width: 100%; height: 100%; line-height: 1; padding: 0 9px; border: 1px solid #d5d5d5; font-size: 13px; color: #303030; background-color: #ffffff; }
div.eb_input_digits_wrap input:focus { border-color: #909090; }
div .span_otp_message { font-size: 14px;line-height: 24px;color: #ffffff; }
/* 2023-11-16 / bjj / 사용자 otp ui 추가 */
/* 숫자 input 요소에서 화살표를 숨김 */
div.eb_input_digits_wrap input[type="number"]::-webkit-inner-spin-button,
div.eb_input_digits_wrap input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

div.eb_input_digits_wrap input[type="number"] {
      -moz-appearance: textfield; /* Firefox에서도 화살표를 숨김 */
    }
div .otp_gauge_container { position: relative;width: 100%;height: 4px;background-color: #ccc;overflow: hidden;}
div .otp_gauge { height: 100%;width: 0;background-color: #3498db; }
div .otp_timer { position: absolute;top: 0;right: 0;padding: 5px; }
div .otp_digits_innerwrap {display:flex;}

div.eb_input_digits_wrap .otp_digits { width:8px;}
div.eb_input_digits_wrap .userotp_digits { width:9%; height:3rem;text-align: center;font-size: 1.5rem;color:#303030;flex:1;}
div.guide_message {font-size: 13px;line-height: 1rem;font-family: 'Noto Sans KR',sans-serif;color: #666;-webkit-font-smoothing: antialiased; text-align: center; padding-top:1rem;height:5rem;}
.darkmode div.guide_message {font-size: 13px;line-height: 1rem;font-family: 'Noto Sans KR',sans-serif;color: #fff !important;-webkit-font-smoothing: antialiased; text-align: center; padding-top:1rem;height:5rem;}
div.header_text {font-size: 12px;line-height: 1.5;font-family: 'Noto Sans KR',sans-serif;color: #666;-webkit-font-smoothing: antialiased; text-align: center; display:inline-block;width:4rem;margin-left:1rem;}

/*
2024-09-30 / bjj / 구글 qr서비스 종료 되어, qr코드 js 라이브러리로 변경, 기존 css 수정
div.qr_google {margin-top:0.2rem;height:140px;background-position: center center;background-size: contain; background-repeat:no-repeat;
				background-image:url('https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=200x200&chld=M|0&cht=qr&chl=otpauth://totp/user@host.com%3Fsecret%3DJBSWY3DPEHPK3PXP');}
div.qr_google_blur {filter:blur(3px);margin-top:0.2rem;height:140px;background-position: center center;background-size: contain; background-repeat:no-repeat;
					background-image:url('https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=200x200&chld=M|0&cht=qr&chl=otpauth://totp/user@host.com%3Fsecret%3DJBSWY3DPEHPK3PXP');}
*/
div.qr_google {margin-top:1rem;height:140px;background-position: center center;background-size: contain; background-repeat:no-repeat;display:flex;justify-content: center;}
div.qr_google_blur {filter:blur(3px);margin-top:1rem;height:140px;background-position: center center;background-size: contain; background-repeat:no-repeat;display:flex;justify-content: center;}
#qrcode > img {all:unset;} /* div 안에 img 가 들어가면 공통 css가 먹어서 spin 애니메이션이 적용되어버림, 그거 방지 */

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
div.shake {  will-change: transform; filter: grayscale(0); animation: shake 0.7s;}
/*------------------------------------------------------------------------------
  [폼] 인풋 - 검색
-------------------------------------------------------------------------------*/
div.eb_input.input_search input { padding-right: 30px; }
div.eb_input.input_search.typing input { padding-right: 60px; }
div.eb_input.input_search .eb_btn.btn_input_search { position: absolute; top: 0; right: 0; width: 30px; height: 30px; border: 1px solid transparent; background: url("../image/common/input_title_search.png") no-repeat center; text-indent: -9999px; cursor: pointer; }
div.eb_input.input_search span.btn_textclear { right: 30px; }


/*------------------------------------------------------------------------------
  [폼] 인풋 - 데이트픽커
-------------------------------------------------------------------------------*/
/* form - input - type - date */
div.eb_input.input_date { width: 120px; }
div.eb_input.input_date input { padding-right: 30px; background: #ffffff url("../image/common/input_datepicker.png") no-repeat right center; text-align: center; }

/* form - input - type - date - calendar */
div.eb_input.input_date span.date_arrow { display: none; position: relative; width: 0px; height: 0px; z-index: 2; font-size: 13px; }
div.eb_input.input_date span.date_arrow .arrow { display: block; width: 14px; height: 7px; position: absolute; top: 22px; left: -25px; background: url('../image/common/input_cal_arrow.png') no-repeat center top; }
div.ui-datepicker { display: none; width: 235px; min-height: 260px; position: absolute !important; margin-top: 7px; margin-left: 25px; padding: 2px; border-top: solid 0px #000000; box-sizing: border-box; border-radius: 5px; background: #3b414d; }
div.ui-datepicker a.ui-state-default { text-decoration: none; color: #303030; }
.body_darkmode div.ui-datepicker a.ui-state-default { text-decoration: none; color: #FFFFFF; }
div.ui-datepicker table.ui-datepicker-calendar { width: 100%; border-top: 0; border-collapse: collapse; }
div.ui-datepicker div.ui-datepicker-header { display: table; width: 100%; height: 60px; margin-top:10px; }
div.ui-datepicker div.ui-datepicker-header .ui-datepicker-title { text-align: center; color:#3b414d; }
div.ui-datepicker div.ui-datepicker-header span.ui-datepicker-year { color: #c4c4c4; font-size: 16px; font-weight: bold; }
/*[롯데] 달력선택시 폰트 사이즈 조정 - 영어인경우 월 이동버튼이 보이지 않음*/
div.ui-datepicker div.ui-datepicker-header span.ui-datepicker-month { color: #c4c4c4; font-size: 24px; font-weight: bold; display: block;}
div.ui-datepicker div.ui-datepicker-header a { position: absolute; top: 37px; text-indent: -9999px; cursor: pointer; }
div.ui-datepicker div.ui-datepicker-header a.ui-datepicker-prev { left: 42px; width: 16px; height: 16px; background: url('../image/common/btn_datepicker_prev_month.png') no-repeat center center; background-size: 100% }
div.ui-datepicker div.ui-datepicker-header a.ui-datepicker-next { right: 42px; width: 16px; height: 16px; background: url('../image/common/btn_datepicker_next_month.png') no-repeat center center; background-size: 100% }
div.ui-datepicker div.ui-datepicker-header a.prevYear { left: 22px; width: 16px; height: 16px; background: url('../image/common/btn_datepicker_prev_year.png') no-repeat center center; background-size: 100% }
div.ui-datepicker div.ui-datepicker-header a.nextYear { right: 22px; width: 16px; height: 16px; background: url('../image/common/btn_datepicker_next_year.png') no-repeat center center; background-size: 100%; }
div.ui-datepicker .ui-datepicker-current { display: none}
div.ui-datepicker table.ui-datepicker-calendar { position: relative; }
div.ui-datepicker table.ui-datepicker-calendar thead tr th,
div.ui-datepicker table.ui-datepicker-calendar tbody tr td { z-index: 2; text-align: center; }
div.ui-datepicker table.ui-datepicker-calendar thead tr th { padding: 0 0 15px 0; }
div.ui-datepicker table.ui-datepicker-calendar thead tr th span { display: block; color: #ffffff; font-size: 11px ; font-weight: normal;  }
div.ui-datepicker table.ui-datepicker-calendar tbody tr td { position: relative; box-sizing: border-box; background: #ffffff; }
.body_darkmode div.ui-datepicker table.ui-datepicker-calendar tbody tr td { position: relative; box-sizing: border-box; background: #191B1E; }
div.ui-datepicker table.ui-datepicker-calendar tbody tr td:after { z-index: 1; content: ' '; display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 1px; background:#e1e1e1; border-radius: 0 0 3px 3px;  }
div.ui-datepicker table.ui-datepicker-calendar tbody tr:first-child td:after { display: none; }
div.ui-datepicker table.ui-datepicker-calendar tbody tr td span { z-index: 200; position: relative; display: block; height: 32px; box-sizing: border-box; line-height: 32px; font-size: 11px; }
div.ui-datepicker table.ui-datepicker-calendar tbody tr td a { z-index: 200; position: relative; display: block; height: 32px; box-sizing: border-box; line-height: 32px; font-size: 11px; }
div.ui-datepicker table.ui-datepicker-calendar tbody tr td:first-child a { color: #f04343; }
div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today:before { z-index: 100; content: ' '; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; line-height: 22px; padding: 0; margin-left: -11px; margin-top: -11px; background:url('../image/component/cal_today.png') no-repeat center top; background: #e7e6e6; border-radius: 20px}
.darkmode div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today:before { z-index: 100; content: ' '; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; line-height: 22px; padding: 0; margin-left: -11px; margin-top: -11px; background:url('../image/component/cal_today.png') no-repeat center top; background: #3b414d; border-radius: 20px}
div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-current-day:before { z-index: 100; content: ' '; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; line-height: 22px; padding: 0; margin-left: -11px; margin-top: -11px; background:url('../image/component/cal_select.png') no-repeat center top; background: #3b414d; color: #ffffff; border-radius: 20px}
.darkmode div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-current-day:before { z-index: 100; content: ' '; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; line-height: 22px; padding: 0; margin-left: -11px; margin-top: -11px; background:url('../image/component/cal_select.png') no-repeat center top; background: #0196fc; color: #ffffff; border-radius: 20px}
div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-current-day a { color: #ffffff; }
div.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-unselectable.ui-state-disabled span.ui-state-default{ color: #ccc; }


/*------------------------------------------------------------------------------
  [폼] 인풋 - 통합속성
-------------------------------------------------------------------------------*/
/* form - input - attribute - placeholder */
div.eb_input input::placeholder { -webkit-text-fill-color: #a0a0a0; color: #a0a0a0; }
div.eb_input input:-ms-input-placeholder { -webkit-text-fill-color: #a0a0a0; color: #a0a0a0; }
div.eb_input input::-webkit-input-placeholder { -webkit-text-fill-color: #a0a0a0; color: #a0a0a0; }
div.eb_input input::-moz-placeholder { opacity: 1; -webkit-text-fill-color: #a0a0a0; color: #a0a0a0; }

/* form - input - attribute - readonly */
div.eb_input input:read-only,
div.eb_input input[readonly="readonly"], 
div.eb_input input:read-only:focus,
div.eb_input input[readonly="readonly"]:focus { border: 1px solid #d5d5d5 !important; background-color: #f0f0f0 !important; cursor: default !important; -ms-user-select: none; }
.darkmode div.eb_input input:read-only,
.darkmode div.eb_input input[readonly="readonly"], 
.darkmode div.eb_input input:read-only:focus,
.darkmode div.eb_input input[readonly="readonly"]:focus { border: 1px solid #3f3f3f !important; background-color: #262626 !important; cursor: default !important; -ms-user-select: none; border-radius:5px;}
div.eb_input input.cur_p:read-only:focus,
div.eb_input input[readonly="readonly"].cur_p:focus { border: 1px solid #d5d5d5 !important; background-color: #f0f0f0 !important; cursor: pointer !important; -ms-user-select: none; }
div.eb_input.readonly input,
div.eb_input input[readonly] { border: 1px solid #d5d5d5 !important; background-color: #f0f0f0 !important; cursor: default !important; -ms-user-select: none; }
div.eb_input.readonly.cur_p input,
div.eb_input input[readonly].cur_p { border: 1px solid #d5d5d5 !important; background-color: #f0f0f0 !important; cursor: pointer !important; -ms-user-select: none; }

/* form - input - attribute - disabled */
div.eb_input input:disabled,
div.eb_input input[disabled="disabled"],
div.eb_input.input_date[dp_disabled="Y"] input { border: 1px solid #f4f4f4; color: #c8c8c8; background-color: #fbfbfb; cursor: default; }

/* form - input - attribute - disabled - type - date */
div.eb_input.input_date input:disabled,
div.eb_input.input_date input[disabled="disabled"] { background-image: url('../image/common/input_datepicker_disabled.png'); }


/*------------------------------------------------------------------------------
  [폼] 인풋 - 라디오 - 기본타입
-------------------------------------------------------------------------------*/
div.eb_radio { display: inline-block; position: relative; padding: 3px 0; vertical-align: middle; font-size: 1px; line-height: 1; }
div.eb_radio input { position: absolute; top: 50%; left: 8px; width: 1px; height: 1px; opacity: 0.01; filter:alpha(opacity=1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; }
div.eb_radio label { display: inline-block; z-index: 100; min-height: 17px; padding: 0 0 0 16px; box-sizing: border-box; font-size: 13px; line-height: 18px; color: #303030; background: url('../image/common/input_radio_off.png') no-repeat left 1px; cursor: pointer; }
div.eb_radio label > .labeltxt { display: inline-block; padding-left: 6px; }
div.eb_radio > .labeltxt { display: inline-block; font-size: 13px; line-height: 18px; padding-left: 6px; vertical-align: middle; } /* label 밖에 있는 labeltxt 처리 */
div.eb_radio label.dark_eb_radio { width: 16px; height: 18px; min-height: 18px; padding: 0; vertical-align: middle; background-position: left center; } /* 일반모드에서 빈 label 크기 */
div.eb_radio label.dark_eb_radio + .labeltxt { padding-left: 6px; } /* label과 텍스트 간격 */

.darkmode div.eb_radio { display: inline-block; position: relative; padding: 3px 0; vertical-align: middle; font-size: inherit; line-height: 1;margin-right:0px;min-width:80px;}
.darkmode .eb_radio_darkwidth {
	min-width:120px !important;
}
.darkmode .starpoint {min-width: 125px !important;}
.darkmode div.eb_radio label > .labeltxt {padding-left: 6px; width:max-content;}
.darkmode div.eb_radio label { 
	position: relative;
    display: block;
    float: left;
    width: 18px;
    height: 18px;
    border-radius: 10px;
    background-color: #606062;
    background-image: linear-gradient(#474749, #606062);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    
    margin-right:30px;
}
.darkmode div.eb_radio label:after { 
	content: "";
    position: absolute;
    display: block;
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}
.darkmode div.eb_radio .dark_eb_radio {margin-right:10px !important;} /** 설문조사 대상자 목록 라디오 텍스트 **/
.darkmode .dark_labeltxt {display:inline-block;font-size:13px;padding-right:10px;vertical-align:middle;} /** 설문조사 대상자 목록 라디오 텍스트 **/

/*------------------------------------------------------------------------------
  [폼] 인풋 - 라디오 - 속성
-------------------------------------------------------------------------------*/
/* form - radio - checked */
div.eb_radio input:checked + label { background-image: url('../image/common/input_radio_on.png'); }

.darkmode div.eb_radio input:checked + label { 
	background-color: #606062;
    background-image: linear-gradient(to bottom, #1e70dc, #1d64c4);
}
.darkmode div.eb_radio input:checked + label:after { 
	content: "";
    position: absolute;
    display: block;
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    opacity: 1;
    transform: scale(1);
    transition: all 0.15s ease;
}

/* form - radio - readonly */
div.eb_radio.readonly:before { content: ' '; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.00); }
div.eb_radio.readonly label { background-image: url('../image/common/input_radio_readonly.png'); cursor: default; }

/* form - radio - disabled */
div.eb_radio.disabled:before { content: ' '; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.00); }
div.eb_radio.disabled input + label,
div.eb_radio input:disabled,
div.eb_radio input[disabled='disabled'] + label { background-image: url('../image/common/input_radio_dim.png'); cursor: default; color: #acacac; }

.darkmode div.eb_radio.disabled input + label,
.darkmode div.eb_radio input:disabled,
.darkmode div.eb_radio input[disabled='disabled'] + label { 
	position: relative;
    display: block;
    float: left;
    border-radius: 10px;
    background-color: #474949;
    background-image: linear-gradient(#474949, #474949);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.15);
    transition: all 0.15s ease;
    cursor:no-drop;
}

/* form - radio - checked + readonly(disabled) */
div.eb_radio input[disabled="disabled"]:checked + label,
div.eb_radio.readonly input[readonly="readonly"]:checked + label,
div.eb_radio.disabled input[readonly="readonly"]:checked + label,
div.eb_radio.readonly input:checked + label,
div.eb_radio.disabled input:checked + label { background-image: url('../image/common/input_radio_on_dim.png'); cursor: default; }

.darkmode div.eb_radio input[disabled="disabled"]:checked + label,
.darkmode div.eb_radio.readonly input[readonly="readonly"]:checked + label,
.darkmode div.eb_radio.disabled input[readonly="readonly"]:checked + label,
.darkmode div.eb_radio.readonly input:checked + label,
.darkmode div.eb_radio.disabled input:checked + label { 
	background-color: #064281;
    background-image: linear-gradient(to bottom, #064281, #064281);
    cursor:no-drop;
	
}
.darkmode div.eb_radio input[disabled="disabled"]:checked + label:after,
.darkmode div.eb_radio.readonly input[readonly="readonly"]:checked + label:after,
.darkmode div.eb_radio.disabled input[readonly="readonly"]:checked + label:after,
.darkmode div.eb_radio.readonly input:checked + label:after,
.darkmode div.eb_radio.disabled input:checked + label:after { 
	content: "";
    position: absolute;
    display: block;
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #808080;
    cursor:no-drop;
}

/*------------------------------------------------------------------------------
  [폼] 인풋 - 체크박스 - 기본타입
-------------------------------------------------------------------------------*/
div.eb_checkbox { display: inline-block; position: relative; padding: 3px 0; vertical-align: middle; font-size: 0; line-height: 1; }
div.eb_checkbox input { position: absolute; top: 50%; left: 8px; width: 1px; height: 1px; opacity: 0.01; filter:alpha(opacity=1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; }
div.eb_checkbox label { display: inline-block; z-index: 100; min-height: 17px; padding: 0 0 0 16px; box-sizing: border-box; font-size: 13px; line-height: 18px; color: #303030; background: url('../image/common/input_checkbox_off.png') no-repeat left 1px; cursor: pointer;}
.darkmode div.eb_checkbox label { display: inline-block; z-index: 100; padding: 0 0 0 16px; box-sizing: border-box; font-size: 13px; color: #FFFFFF; cursor: pointer; background: linear-gradient(to bottom, #4B4B4B, #676767); border:1px solid #262626; border-radius:5px;min-width: 18px;min-height: 18px;width:18px;height:18px;}
.body_darkmode div.eb_checkbox label { display: inline-block; z-index: 100; padding: 0 0 0 16px; box-sizing: border-box; font-size: 13px; color: #FFFFFF; cursor: pointer; background: linear-gradient(to bottom, #4B4B4B, #676767); border:1px solid #262626; border-radius:5px;min-width: 18px;min-height: 18px;width:18px;height:18px;}
.darkmode .eb_tbl div.eb_checkbox label { display: inline-block; z-index: 100; padding: 0 0 0 16px; box-sizing: border-box; font-size: 13px; color: #FFFFFF; cursor: pointer; background: linear-gradient(to bottom, #4B4B4B, #676767); border:1px solid #262626; border-radius:5px;min-width: 18px;min-height: 18px;width:18px;height:18px;}
.darkmode .inner_popup_wrap div.eb_checkbox label { display: inline-block; z-index: 100; padding: 0 0 0 16px; box-sizing: border-box; font-size: 13px; color: #FFFFFF; cursor: pointer; background: linear-gradient(to bottom, #4B4B4B, #676767); border:1px solid #262626; border-radius:5px;min-width: 18px;min-height: 18px;width:18px;height:18px;}
div.eb_checkbox label > .labeltxt { display: inline-block; padding-left: 6px; }
.darkmode div.eb_checkbox label > .labeltxt { display: inline-block; padding-left: 6px; width : max-content;}


/*------------------------------------------------------------------------------
  [폼] 인풋 - 체크박스 - 속성
-------------------------------------------------------------------------------*/
/* form - checkbox - checked */
div.eb_checkbox input:checked + label { background-image: url('../image/common/input_checkbox_on.png'); }
.darkmode div.eb_checkbox input:checked + label { background-image: url('../image/common/input_checkbox_on_darkmode.png');background-repeat: no-repeat;border:none;width:18px; height:18px;background-size: 98% 98%;align-items: center; /* 세로 중앙 정렬 */justify-content: center; /* 가로 중앙 정렬 */}
.body_darkmode div.eb_checkbox input:checked + label { background-image: url('../image/common/input_checkbox_on_darkmode.png');background-repeat: no-repeat;border:none;border-radius:5px;width:18px; height:18px;background-size: 98% 98%;align-items: center; /* 세로 중앙 정렬 */justify-content: center; /* 가로 중앙 정렬 */}

/* form - checkbox - readonly */
div.eb_checkbox.readonly:before { content: ' '; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.00); }
div.eb_checkbox.readonly  label { background-image: url('../image/common/input_checkbox_readonly.png'); cursor: default; }

/* form - checkbox - disabled */
div.eb_checkbox.disabled:before { content: ' '; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.00); }
div.eb_checkbox.disabled input + label,
div.eb_checkbox input:disabled,
div.eb_checkbox input[disabled='disabled'] + label,
div.eb_checkbox.disabled input label { background-image: url('../image/common/input_checkbox_dim.png'); cursor: default; color: #acacac; }

.darkmode div.eb_checkbox input:disabled,
.darkmode div.eb_checkbox input[disabled='disabled'] + label,
.darkmode div.eb_checkbox.disabled input label { 
	display: inline-block; 
	z-index: 100; 
	padding: 0 0 0 16px; 
	box-sizing: border-box; 
	font-size: 13px; 
	color: #FFFFFF; 
	cursor: no-drop; 
	background: linear-gradient(to bottom, #6E6E6E, #6E6E6E); 
	border:1px solid #262626; 
	border-radius:5px;
	min-width: 18px;
	min-height: 18px;
	width:18px;
	height:18px;
}

/* form - checkbox - checked + readonly(disabled) */
div.eb_checkbox input:checked:disabled,
div.eb_checkbox.readonly input[readonly="readonly"]:checked + label,
div.eb_checkbox.disabled input[disabled="disabled"]:checked + label,
div.eb_checkbox.readonly input:checked + label,
div.eb_checkbox.disabled input:checked + label { background-image: url('../image/common/input_checkbox_on_dim.png'); cursor: default; }

.darkmode div.eb_checkbox input:checked:disabled + label {
	background-image: url('../image/common/input_checkbox_on_darkmode.png');
	background-repeat: no-repeat;
	border:none;
	width:18px; 
	height:18px;
	background-size: 98% 98%;
	align-items: center; /* 세로 중앙 정렬 */
	justify-content: center; /* 가로 중앙 정렬 */
	filter:brightness(50%);
	cursor:no-drop;
}

/*------------------------------------------------------------------------------
  [폼] 텍스트아레아 - 리셋
-------------------------------------------------------------------------------*/
div.eb_textarea textarea { -webkit-appearance: none; -moz-appearance:none; appearance: none; outline: 0; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; resize: none; }


/*------------------------------------------------------------------------------
  [폼] 텍스트아레아 - 기본타입
-------------------------------------------------------------------------------*/
div.eb_textarea { width: 100%; vertical-align: middle; max-width: 100%; }
div.eb_textarea textarea { width: 100%; min-height: 100px; padding: 8px 10px; border: 1px solid #d5d5d5; vertical-align: top; font-size: 13px; line-height: 22px; color: #303030; background-color: #ffffff; }
div.eb_textarea textarea:focus { border-color: #909090; }
/*2024-01-26 / bjj / 다크모드 텍스트 에이리어 */
.darkmode div.eb_textarea textarea { width: 99%; height:99%; min-height: 100px; padding: 8px 10px;border-radius:5px; border: 1px solid #3f3f3f; vertical-align: top; font-size: 13px; line-height: 22px; color: #FFFFFF; background-color: #25272a; }
.darkmode div.eb_textarea textarea#contentNEW { 
	width: 100%; 
	height:99%; 
	min-height: 100px; 
	padding: 8px 10px;
	border-radius:5px; 
	border: 1px solid #3f3f3f;
	vertical-align: top; 
	font-size: 13px; 
	line-height: 22px; 
	color: #FFFFFF; 
	background-color: #262626; 
	margin-top:5px; 
}
.darkmode div.eb_textarea textarea#contentNEW:focus { 
	border: 3px solid #2C6E93;
    transition: border 500ms cubic-bezier(0.250, 0.100, 0.250, 1.00);
} 
.darkmode div.eb_textarea textarea:focus {border: 3px solid #2C6E93; transition:500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);}
.darkmode div.eb_textarea textarea::-webkit-scrollbar { width:10px; background:#363839;}
.darkmode div.eb_textarea textarea::-webkit-scrollbar-thumb { background:#737475;border:1px solid #2b2c2d;border-radius:5px;}
.darkmode div.eb_textarea textarea::-webkit-scrollbar-thumb:hover { background:#9b9c9c;}

/*------------------------------------------------------------------------------
  [폼] 텍스트아레아 - 속성
-------------------------------------------------------------------------------*/
/* form - textarea - attribute - placeholder */
div.eb_textarea textarea::placeholder { -webkit-text-fill-color: #a0a0a0; color: #a0a0a0; }
div.eb_textarea textarea:-ms-input-placeholder { -webkit-text-fill-color: #a0a0a0; color: #a0a0a0; }
div.eb_textarea textarea::-webkit-input-placeholder { -webkit-text-fill-color: #a0a0a0; color: #a0a0a0; }
div.eb_textarea textarea::-moz-placeholder { opacity: 1; -webkit-text-fill-color: #a0a0a0; color: #a0a0a0; }

/* form - textarea - attribute - readonly */
div.eb_textarea textarea:read-only,
div.eb_textarea textarea[readonly="readonly"], 
div.eb_textarea textarea:read-only:focus,
div.eb_textarea textarea[readonly="readonly"]:focus { border: 1px solid #d5d5d5; background-color: #f0f0f0; cursor: default; }
div.eb_textarea.readonly textarea { border: 1px solid #d5d5d5; background-color: #f0f0f0; cursor: default; }

/* form - textarea - attribute - disabled */
div.eb_textarea textarea:disabled,
div.eb_textarea textarea[disabled="disabled"] { border: 1px solid #f4f4f4; color: #c8c8c8; background-color: #fbfbfb; cursor: default; }

.darkmode div.eb_textarea textarea:disabled,
.darkmode div.eb_textarea textarea[disabled="disabled"] { border: 1px solid #393B3E; color: #fff; background-color: #29292a; cursor: default; }


/*------------------------------------------------------------------------------
  [폼] 셀렉트 - 리셋
-------------------------------------------------------------------------------*/
div.eb_select select { -webkit-appearance: none; -moz-appearance:none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0px; -webkit-box-shadow: none; box-shadow: none; }
div.eb_select select::-ms-expand { display: none; }


/*------------------------------------------------------------------------------
  [폼] 셀렉트 - 기본타입
-------------------------------------------------------------------------------*/
div.eb_select { display: inline-block; position: relative; height: 30px; vertical-align: middle; max-width: 100%; }
div.eb_select select { width: 100%; height: 100%; line-height: 1; padding: 0 24px 0 5px; border: 1px solid #d5d5d5; font-size: 13px; background: #ffffff url('../image/common/input_select_off.png') no-repeat right center; background-color: #ffffff; }
.darkmode div.eb_select select { width: 100%; height: 100%; line-height: 1; padding: 0 24px 0 5px; border: none; font-size: 13px; background: #ffffff url('../image/common/input_select_off_darkmode.png') no-repeat right center; background-color: #3f3f3f !important; color:#FFFFFF !important;border-radius:5px;}
.body_darkmode div.eb_select select { width: 100%; height: 100%; line-height: 1; padding: 0 24px 0 5px; border: none; font-size: 13px; background: #ffffff url('../image/common/input_select_off_darkmode.png') no-repeat right center; background-color: #3f3f3f; color:#FFFFFF;border-radius:5px;}

div.eb_select select:focus { border: 1px solid #707070; background: #ffffff url('../image/common/input_select_on.png') no-repeat right center; }
.darkmode div.eb_select select:focus { border: none; background: #ffffff url('../image/common/input_select_on_darkmode.png') no-repeat right center; background-color: #3f3f3f; color:#FFFFFF;border-radius:5px;} 
.body_darkmode div.eb_select select:focus { border: none; background: #ffffff url('../image/common/input_select_on_darkmode.png') no-repeat right center; background-color: #3f3f3f; color:#FFFFFF;border-radius:5px;} 

/*------------------------------------------------------------------------------
  [폼] 셀렉트 - 속성
-------------------------------------------------------------------------------*/
/* form - select - attribute - readonly */
div.eb_select.readonly:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,0.01); }
div.eb_select.readonly select { background-color: #f0f0f0; }

/* form - select - attribute - disabled */
div.eb_select select:disabled,
div.eb_select select[disabled="disabled"] { border: 1px solid #f4f4f4; color: #c8c8c8; background: #fbfbfb url('../image/common/input_select_disabled.png') no-repeat right center; cursor: default; }

.darkmode div.eb_select select:disabled,
.darkmode div.eb_select select[disabled="disabled"] { border: 1px solid #3d3f40; color: #f5f5f5; background : #3f3f3f; cursor: default; }

/*------------------------------------------------------------------------------
  [폼] 셀렉트 - 다중선택
-------------------------------------------------------------------------------*/
div.eb_select.select_multiple { width: 100%; height: 80px; margin: 5px 0; }
div.eb_select.select_multiple select { padding-top: 5px; padding-bottom: 3px; background-image: none; }
div.eb_select.select_multiple select option { padding: 3px 0; }


/********************************************************************************************************
  component set
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  component set
-------------------------------------------------------------------------------*/
div.eb_input.fill { width: 100%; margin-right: 0; }
div.eb_input.less_filled { width: 70%; }
div.eb_select.fill { width: 100%; }
div.eb_input.fill.important { width: calc( 100% - 70px ); }
div.eb_input.in_charge { width: 400px; }


/*------------------------------------------------------------------------------
  form set
-------------------------------------------------------------------------------*/
/* form set - common */
div.form_set { font-size: 0; }
div.form_set div.eb_select, 
div.form_set div.eb_input { margin-right: 5px; }
div.form_set div.eb_select:last-child, 
div.form_set div.eb_input:last-child { margin-right: 0; }

div.eb_tbl div.form_set div.eb_select, 
div.eb_tbl div.form_set div.eb_input {  }
div.eb_tbl div.form_set div.eb_select:last-child, 
div.eb_tbl div.form_set div.eb_input:last-child { margin-right: 0; }

div.form_set { vertical-align: top; }
div.form_set span.input_bullet { margin: 0 6px 0 -5px; }
.input_bullet { display: inline-block; margin: 0 3px 0 -3px; line-height: 30px; font-size: 13px; text-align: center; vertical-align: middle; }
td > .input_bullet:first-child { margin-left: 0; }

/* form set - 달력 */
div.form_set.set_date {}

/* form set - 날짜 상세 조회 */
div.form_set.set_datedetail { }
div.form_set.set_datedetail div.eb_input.input_date { min-width: 115px; }

/* form set - 주소 */
div.form_set.set_addr { }
div.form_set.set_addr div.eb_input.addr_num { width: 15%; }
div.form_set.set_addr div.eb_input.addr_detail { width: 83%; }

/* form set - 생일 */
div.form_set.set_birth {}
div.form_set.set_birth div.eb_input.birth_year { width: 75px; }
div.eb_tbl div.form_set.set_birth div.eb_select,
div.eb_tbl div.form_set.set_birth div.eb_input { margin-right: 9px; }

/* form set - 핸드폰번호 */
div.form_set.set_phonenum { display: inline-block; }
div.form_set.set_phonenum div.eb_input,
div.eb_tbl div.form_set.set_phonenum div.eb_input { width: 60px; margin-right: 10px; }

div.eb_tbl div.form_set.set_phonenum.fill { width: 100%; }
div.eb_tbl div.form_set.set_phonenum.fill div.eb_input { width: 29%; margin: 0; }
div.eb_tbl div.form_set.set_phonenum.fill span.input_bullet { margin: 0; width: 6.5%; }

/* form set - 개인함, 공유함 */
div.form_set.set_storage {  }
div.form_set.set_storage div.bridge { float: left; vertical-align: middle; }
div.form_set.set_storage div.storage { overflow: hidden; display: block; padding: 6px 4px 0 10px; font-size: 14px; color: #303030; }

div.form_set.set_storage .eb_btn { margin-right: 10px; }
div.form_set.set_storage .eb_btn:last-child { margin-right: 0; }
div.form_set.set_storage .eb_btn.btn_tooltip { margin: 0; padding: 0; border: 0; vertical-align: middle; }
div.form_set.set_storage .eb_btn.btn_tooltip:hover div.tooltip_conts { z-index: 500; display: block; position: relative; }

/* form set - 체크리스트 */
div.form_set.set_checklist {}
div.form_set.set_checklist div.formset_inner {}
div.form_set.set_checklist div.formset_inner .eb_text { margin-left: 10px; }
div.form_set.set_checklist div.formset_inner div.eb_radio:last-child,
div.form_set.set_checklist div.formset_inner div.eb_checkbox:last-child { margin-right: 0; }


/* form - etc */
div.select_act { display: inline-block; }
div.select_act .normal_text { color: #a0a0a0; }
div.select_act.active .normal_text { color: #303030; }

/* form - 조혜인 추가 */
div.eb_tbl th div.form_set.set_storage { display: inline; vertical-align: middle; }
div.form_set + div.form_set { margin-top: 8px; }
div.form_set span.input_bullet:first-child { margin-left: 0; }

/* form set - 복합 요소 */
div.form_set.set_combi { margin-top: 10px; }
div.form_set.set_combi:first-child { margin-top: 0; } 
div.eb_tbl div.form_set.set_combi div.eb_select, div.eb_tbl div.form_set.set_combi div.eb_input { margin-right: 10px; }
div.form_set.set_combi div.eb_radio + div.eb_input { margin-left: -5px; }
div.form_set.set_combi.inline { display: inline-block; width: auto; margin-top: 0; margin-right: 14px; vertical-align: middle; }

/* form set -파일 업로드 */
div.form_set.set_file .eb_file { position: absolute; top: 0; right: 0; width: 0; height: 0; border: none; text-indent: -9999px; }
div.form_set.set_file .eb_input { width: calc( 100% - 70px ); } /* 버튼 너비값 + 오른쪽 마진 */
div.form_set.set_file .eb_btn { cursor: pointer; }

/* form set -업로드 */


div.bbs_manage_wrap div.tree_tab div[data-uitab="contsWrap"] { height: 100%; }


/********************************************************************************************************
  [테이블]
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  [테이블] - 공통 
-------------------------------------------------------------------------------*/
/* 필수입력 */
.essential_mark { display: inline-block; padding-left: 2px; color: #fc6e57;  }

/* 각주 */
.footnote_mark { display: inline-block; padding-left: 2px; color: #b3d3f5;  }

/* 프로필사진 */
div.eb_tbl td.profile_photo { padding: 32px 30px; border-left: 1px solid #e5e5e5; }
.darkmode div.eb_tbl td.profile_photo { padding: 32px 30px; border-left: 1px solid #3d3f40; }
table .profile_photo { margin: 0 auto; }
div.btn_profile_wrap { margin-top: 10px; text-align: center; }
td.profile_photo{border-radius:0}


/*------------------------------------------------------------------------------
  [테이블] - 리셋
-------------------------------------------------------------------------------*/
div.eb_tbl caption { display: none; }
div.eb_tbl > table,
div.eb_tbl_simple > table { width: 100%; /*border-collapse: collapse;*/ border-spacing: 0; -webkit-box-sizing: border-box; box-sizing: border-box; table-layout: fixed; }

div.eb_tbl.tbl_body,
div.eb_tbl_simple.tbl_body { border-top: 0; }

div.eb_tbl td,
div.eb_tbl_simple td { word-break: break-all; }



/*------------------------------------------------------------------------------
  [테이블] - 기본타입
-------------------------------------------------------------------------------*/
div.tbl_summary + div.eb_tbl { margin-top: -1px; }
div.eb_tbl { /*overflow: hidden;*/ border-top: 1px solid #9095ab; border-bottom: 1px solid #ddd; box-sizing: border-box; }
.darkmode div.eb_tbl { /*overflow: hidden;*/ border-top: 1px solid #9095ab; border-bottom: 1px solid #9095ab; box-sizing: border-box; }
.body_darkmode div.eb_tbl { /*overflow: hidden;*/ border-top: 1px solid #9095ab; border-bottom: 1px solid #9095ab; box-sizing: border-box; }
.darkmode .bbs_write_body div.eb_tbl { /*overflow: hidden;*/ border-top: 1px solid #3d3f40; border-bottom: 1px solid #3d3f40; box-sizing: border-box; }
div.eb_tbl > table { text-align: left; font-size: 13px; color: #a0a0a0; font-weight: normal; }
.darkmode div.eb_tbl > table { text-align: left; font-size: 13px; color: white; font-weight: normal; }
div.eb_tbl > table th,
div.eb_tbl > table td { height: 40px; padding: 5px 0; font-size: 13px; vertical-align: middle; }
div.eb_tbl > table th { padding-left: 10px; padding-right: 10px; }
div.eb_tbl > table > thead > tr > th { border-bottom: 1px solid #dbdfe1; box-sizing: border-box; text-align: left; font-weight: bold; color: #303030; vertical-align: middle; /*color: #a0a0a0; background: #f2f6f8;*/ word-break: keep-all; word-wrap: break-word; }
div.eb_tbl > table > thead > tr > th:first-child,
div.eb_tbl > table > thead > tr > td:first-child { border-left: 0; }
div.eb_tbl > table > tbody > tr > th,
div.eb_tbl > table > tbody > tr > td { border-bottom: 1px solid #dbdfe1; box-sizing: border-box; text-align: left; color: #303030; word-break: break-all; word-wrap: break-word; }
.darkmode div.eb_tbl > table > tbody > tr > th { border-bottom: 1px solid #3d3f40; box-sizing: border-box; text-align: left; color: #FFFFFF; word-break: break-all; word-wrap: break-word; background-color:#1C1D20;}
.darkmode div.eb_tbl > table > tbody > tr > td { border-bottom: 1px solid #3d3f40; box-sizing: border-box; text-align: left; color: #FFFFFF; word-break: break-all; word-wrap: break-word; background-color:#252525;}
.darkmode div.eb_tbl > table > tbody > tr > td .labeltxt { color:#FFFFFF;width: max-content;}
div.eb_tbl > table > tfoot > tr > td { border-top: 1px solid #ddd; box-sizing: border-box; text-align: left; color: #303030; word-break: break-all; word-wrap: break-word; }
div.eb_tbl > table > tbody > tr > th { font-weight: bold; }
div.eb_tbl > table > tfoot > tr > th { border-top: 1px solid #9095ab; border-bottom: 1px solid #dbdfe1;color: #303030}
div.eb_tbl > table > tfoot > tr > td { height: 44px;border-bottom: 1px solid #dbdfe1}
div.eb_tbl > table > tbody > tr:last-child > th,
div.eb_tbl > table > tbody > tr:last-child > td { border-bottom: none; }
div.eb_tbl > table > thead:last-child > tr > th { border-bottom: none; }
/* 리본 버튼 영역 부분이 비활성화 되는 화면에 대해 테이블 위치 조정 (팀룸 - 주제방관리 VIEW 모드)*/
div.eb_tbl.non_ribbon { margin-top: -13px; } 
/* 2024-03-08 / bjj / 다크모드 */
.darkmode div.eb_tbl > table > thead > tr > th { border-bottom: 1px solid #dbdfe1; box-sizing: border-box; text-align: left; font-weight: bold; color: #FFFFFF; vertical-align: middle; /*color: #a0a0a0; background: #f2f6f8;*/ word-break: keep-all; word-wrap: break-word; }
.darkmode div.eb_tbl.tbl_list > table > tbody > tr > td { text-align: center; color: #FFFFFF; border-color:#393B3E;}
.body_darkmode div.eb_tbl.tbl_list > table > tbody > tr > th { text-align: center; color: #FFFFFF; border-color:#393B3E;background-color:#262626;}

/*------------------------------------------------------------------------------
  [테이블] - 기본 디자인
-------------------------------------------------------------------------------*/
div.eb_tbl.tbl_base { border: none; }
div.eb_tbl.tbl_base > table { table-layout: fixed; }
div.eb_tbl.tbl_base > table > thead > tr > th,
div.eb_tbl.tbl_base > table > thead > tr > td,
div.eb_tbl.tbl_base > table > tbody > tr > th,
div.eb_tbl.tbl_base > table > tbody > tr > td { padding: 0; border: 1px solid #e5e5e5; background: transparent; }
.darkmode div.eb_tbl.tbl_base > table > thead > tr > th,
.darkmode div.eb_tbl.tbl_base > table > thead > tr > td,
.darkmode div.eb_tbl.tbl_base > table > tbody > tr > td { padding: 0; border: 1px solid #3a3b3e; background: transparent; }
div.eb_tbl.tbl_base > table > thead > tr > th, 
div.eb_tbl.tbl_base > table > thead > tr > td { height: 20px; }
div.eb_tbl.tbl_base > table > thead > tr > th { text-align: center; }
div.eb_tbl.tbl_base > table > thead > tr > td { color: #707070; text-align: center; vertical-align: middle; }
.darkmode div.eb_tbl.tbl_base > table > thead > tr > td { color: #FFF; text-align: center; vertical-align: middle; }
div.eb_tbl.tbl_base > table > tbody > tr > td { padding: 5px 10px; }
div.eb_tbl.tbl_base > table > tbody > tr > td > div { display: inline-block;}
div.eb_tbl.tbl_base > table > tbody > tr > td > span { display: inline-block; line-height: 30px; }
div.eb_tbl.tbl_base > table > tbody > tr > td:after { content: ""; display: block; clear: both; }


/*------------------------------------------------------------------------------
  [테이블] - 리스트 디자인
-------------------------------------------------------------------------------*/
div.eb_tbl.tbl_list > table > thead > tr > th,
div.eb_tbl.tbl_list > table > thead > tr > td,
div.eb_tbl.tbl_list > table > tfoot > tr > td { text-align: center; }
div.eb_tbl.tbl_list > table > tbody > tr > th,
div.eb_tbl.tbl_list > table > tbody > tr > td,
div.eb_tbl.tbl_list > table > tfoot > tr > td { text-align: center; color: #303030; }
div.eb_tbl.tbl_list > table > thead > tr > th { padding-left: 0; padding-right: 0; }
div.eb_tbl.tbl_list > table > tbody > tr > td { padding-left: 5px; padding-right: 5px; word-break: break-all; }
.darkmode div.eb_tbl.tbl_list > table > thead > tr > th { padding-left: 0; padding-right: 0; border-color:#393B3E;}
.darkmode div.eb_tbl.tbl_list > table > tbody > tr > td { 
	padding-left: 5px; 
	padding-right: 5px; 
	word-break: break-all; 
	border-color:#393B3E;
	background-color:#262626;
}
div.eb_tbl.tbl_list > table > tbody > tr:hover > td, 
div.eb_tbl.tbl_list > table > tbody > tr.active > td { background-color: #eff6fd; }
.body_darkmode div.eb_tbl.tbl_list > table > tbody > tr > td { padding-left: 5px; padding-right: 5px; word-break: break-all; border-color:#393B3E;color:#FFFFFF;} 

.darkmode div.eb_tbl.tbl_list > table > tbody > tr.active > td { 
	background-color: #1C79E8 !important;
	transition: background-color 500ms cubic-bezier(0.250, 0.100, 0.250, 1.00);
}
.darkmode div.eb_tbl.tbl_list > table > tbody > tr.active > td:first-child { 
	background-color: #1C79E8;
	border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.darkmode div.eb_tbl.tbl_list > table > tbody > tr.active > td:last-child { 
	background-color: #1C79E8;
	border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

}
div.eb_tbl.tbl_list > table > tbody > tr.notice > td { background-color: #fff6f0; }
.darkmode div.eb_tbl.tbl_list > table > tbody > tr.notice > td { background-color: #454646; }
.darkmode div.eb_tbl.tbl_list > table > tbody > tr:hover > td { background-color: transparent;}

div.eb_tbl.tbl_list > table > tbody > tr.disable > td { background-color: #e9ebee; }
div.eb_tbl.tbl_list > table > tfoot > tr > td { background-color: #dfe1ea; font-weight: 600; }
div.eb_tbl > table > tbody > tr.subtotal > td { background-color: #f1f3f5 !important; font-weight: 600; }

/* 체크박스 리스트 */
div.tbl_list.list_checkbox tr:first-of-type th:first-child, div.tbl_list.list_checkbox td:first-child { padding: 0; padding-left: 8px !important; text-align: left; font-size: 0; }
div.tbl_list.list_checkbox thead tr th { line-height: 15px; }
div.tbl_list.list_checkbox thead tr th > .eb_checkbox { margin-right: 1px; }
div.list_checkbox tbody tr td > .eb_radio label { width: 0; }

/* 선택형 리스트 */
div.tbl_list.list_selectable > table > tbody > tr > td:hover { cursor: pointer; }

/* th 구분선 */
div.eb_tbl.tbl_list.border_th > table > thead > tr > th { border-right: 1px solid #dbdfe1; }
div.eb_tbl.tbl_list.border_th > table > thead > tr > th:last-child { border-right: none; }

/* 캘린더 타입 */
div.eb_tbl.tbl_list > table > thead > tr > .day,
div.eb_tbl.tbl_list > table > tbody > tr > .day {}
div.eb_tbl.tbl_list > table > thead > tr > .day.sat,
div.eb_tbl.tbl_list > table > tbody > tr > .day.sat { color: #034ac0; }
div.eb_tbl.tbl_list > table > thead > tr > .day.sun,
div.eb_tbl.tbl_list > table > tbody > tr > .day.sun { color: #C00303; }

/*------------------------------------------------------------------------------
  [테이블] - 심플 디자인
-------------------------------------------------------------------------------*/
div.eb_tbl_simple { border-top: 1px solid #9095ab; border-bottom: 1px solid #ddd; }
div.eb_tbl_simple.list_bottom { border-top: 0px !important; }
div.eb_tbl_simple table { width: 100%; border-spacing: 0; }
div.eb_tbl_simple th, 
div.eb_tbl_simple td { height: 40px; padding: 5px 0; vertical-align: middle; }
div.eb_tbl_simple table > tbody > tr > th { font-weight: normal; box-sizing: border-box; text-align: left; color: #a0a0a0; }
div.eb_tbl_simple table > tbody > tr > td { padding-left: 5px; padding-right: 5px;  font-size: 13px; text-align: left; box-sizing: border-box; }


/*------------------------------------------------------------------------------
  [테이블] - 심플 목록 디자인
-------------------------------------------------------------------------------*/
div.eb_tbl_simple.tbl_list table > thead > tr > th { border-bottom: 1px solid #dddddd; /*font-weight: normal; color: #a0a0a0;*/ font-size: 13px; box-sizing: border-box; text-align: center}
.darkmode div.eb_tbl_simple.tbl_list table > thead > tr > th { border-bottom: 1px solid #dddddd; /*font-weight: normal; color: #a0a0a0;*/ font-size: 13px; box-sizing: border-box; text-align: center; color: #fff;}
div.eb_tbl_simple.tbl_list table > tbody > tr > td { text-align: center; }
.darkmode div.eb_tbl_simple.tbl_list table > tbody > tr > td { text-align: center; color:#fff;}
div.eb_tbl_simple.tbl_list table > tbody > tr > td.org_td_seq_narrow { letter-spacing:-1.5px;} /* 2024-09-20 / bjj / 조직도 검색시 번호 3자리 넘는 경우 */
.darkmode div.eb_tbl_simple.tbl_list table > tbody > tr.active > td {
	background-color: #1C79E8 !important;
    transition: background-color 500ms cubic-bezier(0.250, 0.100, 0.250, 1.00);
}
.darkmode div.eb_tbl_simple.tbl_list table > tbody > tr.active > td:first-child {
	background-color: #1C79E8;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.darkmode div.eb_tbl_simple.tbl_list table > tbody > tr.active > td:last-child {
    background-color: #1C79E8;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

div.eb_tbl_simple.tbl_list table > tbody > tr { /* cursor: pointer; */ }
div.eb_tbl_simple.tbl_list table > tbody > tr:hover { background: #eff6fd; }
.darkmode div.eb_tbl_simple.tbl_list table > tbody > tr:hover { background: transparent;}
div.eb_tbl_simple.tbl_list table > tbody > tr > td.ta_l { padding: 5px; }
div.eb_tbl_simple.tbl_list table > tbody > tr.disable > td { background-color: #e9ebee; }
div.eb_tbl_simple.tbl_list table > tfoot > tr > th { border-top: 1px solid #9095ab; border-bottom: 1px solid #dddddd;color: #303030}
div.eb_tbl_simple.tbl_list table > tfoot > tr > td { height: 44px;border-bottom: 1px solid #dddddd}


/*------------------------------------------------------------------------------
  [테이블] - 검색 디자인
-------------------------------------------------------------------------------*/
div.eb_tbl_search caption { display: none; }
div.eb_tbl_search > table { border-collapse: collapse; border-spacing: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }


/*------------------------------------------------------------------------------
  [테이블] - 검색 디자인
-------------------------------------------------------------------------------*/
/* div.eb_tbl {} */
div.eb_search_wrapper {  width: 100%; border: 1px solid #f5f5f5; border-radius: 3px; padding: 10px; box-sizing: border-box; background-color: #fbfbfb; table-layout: fixed; }
.darkmode div.eb_search_wrapper {  width: 100%; border:none;border-radius: 5px; padding: 10px; box-sizing: border-box; background: linear-gradient(#6D6E6D, #484848); table-layout: fixed; color:#FFFFFF;}
.body_darkmode div.eb_search_wrapper {  width: 100%; border:none;border-radius: 5px; padding: 10px; box-sizing: border-box; background: linear-gradient(#6D6E6D, #484848); table-layout: fixed; color:#FFFFFF;}

div.eb_search_wrapper div.eb_tbl_search { width: 100%; display: table-cell; vertical-align: middle; }
div.eb_search_wrapper .btn_search_wrap { display: table-cell; padding: 0 10px; box-sizing: border-box; vertical-align: middle; }

/* 2026-02-13 / bjj / 조직도 검색 가이드 문구 및 엔터아이콘 표시 */
div.eb_search_wrapper:has(#srchKeyword.focus) #orgPopSearchBtn.btn_search_wrap::before{
	content: attr(data-label);
    position: absolute;
    width: 17rem;
    right: 10px;
    top: 0;
    color: #6c757d;
    animation: show-label 1s ease forwards; 
}
@keyframes show-label{
	0%{opacity:0;transform:scaleY(0);transform-origin:top;}
	100%{opacity:1;transform:scaleY(1);transform-origin:top;}
}
div.eb_search_wrapper:has(#srchKeyword.focus) div.eb_input.has-text::after{
	content: "";
    position: absolute;
    top: 2px;
    right: 0px;
    width: 1.6rem;
    height: 1.6rem;
    background-image: url(../image/common/btn_enterkey_48.png);
    background-size: cover;
    background-repeat: no-repeat;
    animation: key_bounce 2s ease infinite;
}

div.eb_search_wrapper .btn_search_wrap .btn_search_inner { display: table; margin-right: 0; margin-left: auto; }
div.eb_search_wrapper .btn_search_wrap .btn_container { display: table-cell; }
div.eb_tbl_search:after { content: ' '; display: block; clear: both; }
div.eb_tbl_search > table { width: 100%; table-layout: fixed; text-align: left; font-size: 13px; color: #a0a0a0; font-weight: normal; vertical-align: middle; }
div.eb_tbl_search > table > tbody > tr > th,
div.eb_tbl_search > table > tbody > tr > td { height: 40px; box-sizing: border-box; text-align: left; vertical-align: middle; font-size: 13px; line-height: 20px; color: #303030; font-weight: normal;  word-break: keep-all; word-wrap: break-word; }
.body_darkmode div.eb_tbl_search > table > tbody > tr > th,
.body_darkmode div.eb_tbl_search > table > tbody > tr > td { height: 40px; box-sizing: border-box; text-align: left; vertical-align: middle; font-size: 13px; line-height: 20px; color: #FFFFFF; font-weight: normal;  word-break: keep-all; word-wrap: break-word; }
.darkmode div.eb_tbl_search > table > tbody > tr > th,
.darkmode div.eb_tbl_search > table > tbody > tr > td { height: 40px; box-sizing: border-box; text-align: left; vertical-align: middle; font-size: 13px; line-height: 20px; color: #FFFFFF; font-weight: normal;  word-break: keep-all; word-wrap: break-word; }

div.eb_tbl_search > table > tbody > tr > th { padding: 10px 10px 8px; vertical-align: top; /*padding: 5px 10px 5px 40px;*/ font-weight: bold; }
div.eb_tbl_search > table > tbody > tr > td { padding: 5px 10px 5px 0; }
div.eb_tbl_search > table > tbody > tr:first-child > th,
div.eb_tbl_search > table > tbody > tr:first-child > td { border-top: 0; }
div.eb_tbl_search div.eb_select { min-width: 160px; }


/* 테이블그룹 (헤더/푸터) */
div.tbl_group {}
div.tbl_group[data-scroll="true"] .tbl_head { padding-right: 17px; }
div.tbl_group[data-scroll="true"] .tbl_head th { padding: 10px 0; border-bottom: 0; }
div.tbl_group[data-scroll="true"] .tbl_body { overflow-x: hidden; overflow-y: scroll; }


/*------------------------------------------------------------------------------
  [테이블] - 데이터 없음
-------------------------------------------------------------------------------*/
.no_data { float: none !important; display: block !important; /*padding: 30px 20px;2019-08-19 상무님 요청으로 삭제*/ font-size: 13px; text-align: center; }
.darkmode .no_data { float: none !important; display: block !important; font-size: 13px; text-align: center;color:#FFF; }


/*------------------------------------------------------------------------------
  [테이블] - ul/li형 테이블 (정렬 기능 부착)
-------------------------------------------------------------------------------*/
.sortable_list { border-bottom: 1px solid #dbdfe1; }
.sortable_list ul { margin: 0; padding: 0; }
.fake_table { display: table; width: 100%; max-width: 100%; min-height: 30px; table-layout: fixed; list-style: none; }
.fake_table.selected { background-color: #eff6fd; }
.fake_cell { display: table-cell; font-size: 13px; text-align: center; vertical-align: middle; }
.fake_cell.ta_l { padding-left: 5px; }
.sortable_list .fake_table { padding: 5px 0; }
.sortable_list .fake_table .fake_cell:last-child { width: 30px; }
.sortable_list.list_checkbox .fake_cell:first-child { width: 48px; }
.sortable_list.scrollable ul { overflow-y: scroll; height: 200px; }
.sortable_list.scrollable.action_add ul { height: 400px; }


/* 기본형 ul 리스트 */
.default_list ul { margin: 0; padding: 0; }
.default_list li { margin: 0; padding: 3px 0; list-style: none; }
.default_list.scrollable ul { overflow-y: scroll; height: 200px; }
.default_list.inline li { display: inline-block; margin-right: 16px; }
.default_list.inline li:last-child { margin-right: 0; }
.default_list.has_bullet li { position: relative; padding-left: 8px; }
.default_list.has_bullet li:before { content: ""; position: absolute; display: block; width: 3px; height: 3px; left: 0; top: 0.7em; background-color: #707070; border-radius: 50%; }



/********************************************************************************************************
  트리
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  [트리] 트리기본
-------------------------------------------------------------------------------*/
/* tree - reset */
div.eb_tree { }
div.eb_tree ul { padding: 0; margin: 0; list-style: none; }
div.eb_tree li { padding: 0; margin: 0; list-style: none; }
div.eb_tree a { position: relative; line-height: 24px; font-size: 13px; /*color: #303030;*/ text-decoration: none; }
div.eb_tree > ul > #folder0 { margin-left: -8px; }
/* tree - default */
div.eb_tree .tree_title { display: inline-block; font-size: 15px; font-weight: bold; }
/* div.eb_tree ul li ul { margin-left: 7px; } */
div.eb_tree > ul ul { display: none; margin-left: 12px; }
div.eb_tree > ul a:after { content: ""; display: none; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: #303030; }
div.eb_tree > ul a.active:after { display: block; }
div.eb_tree > ul a.tree_active { color: #fc6e57;/*#303030*/ font-weight: bold; }
div.eb_tree ul > li:last-child > ul > li:last-child { position: relative; }
div.eb_tree ul > li:last-child > ul > li:last-child:before { content: ""; display: block; position: absolute; left: -15px; bottom: 0; width: 14px; height: 11px; background: #fff; } 
div.eb_tree li .tree_item #_myBoxCnt { margin-left: 3px; font-size: 12px; }
div.eb_tree li .tree_item #_myBoxCnt strong { color: #fc6e57; }
div.eb_tree li .tree_item a:hover,
div.eb_tree li .tree_item a.active { text-decoration: none; }
div.eb_tree li .tree_item a:hover #drag_text, 
div.eb_tree li .tree_item a.active #drag_text { /*text-decoration: underline; 2019-07-19 삭제 협의*/ }

div.eb_tree .icon_tree { display: inline-block; position: relative; width: 14px; height: 15px; margin-right: 5px; background: url("../image/common/icon_tree_close.png") no-repeat right center; vertical-align: middle; cursor: pointer;}
div.eb_tree .icon_tree.disabled { background-image: url("../image/common/icon_tree_disabled_close.png"); }
div.eb_tree .icon_tree.active { background-image: url("../image/common/icon_tree_open.png"); }
div.eb_tree .icon_tree.active.disabled { background-image: url("../image/common/icon_tree_disabled_open.png"); }
div.eb_tree .icon_tree_bbs { display: inline-block; position: relative; width: 14px; height: 15px; margin-right: 5px; margin-top: 1px; background: url("../image/common/icon_tree_bbs.png") no-repeat right center; vertical-align: middle; cursor: pointer;}
div.eb_tree .icon_tree_regist { display: inline-block; position: relative; width: 14px; height: 17px; margin-right: 5px; background: url("../image/common/icon_tree_regist.png") no-repeat center; vertical-align: middle; cursor: pointer;}
div.eb_tree .icon_tree_user { display: inline-block; position: relative; width: 14px; height: 17px; margin-right: 5px; background: url("../image/common/ico_user_basic.png") no-repeat center; vertical-align: middle; cursor: pointer;}
div.eb_tree .icon_tree_share { display: inline-block; position: relative; width: 18px; height: 17px; margin-right: 8px; background: url("../image/common/icon_tree_share.png") no-repeat center; vertical-align: middle; cursor: pointer;}
div.eb_tree .icon_tree_trash { display: inline-block; position: relative; width: 14px; height: 17px; margin-right: 5px; background: url("../image/common/btn_sche_detail_del.png") no-repeat center; vertical-align: middle; cursor: pointer;}


div.eb_tree .icon_tree_depth { display: inline-block; position: relative; width: 8px; height: 15px; margin-right: 8px; background: no-repeat right center; vertical-align: middle; cursor: pointer; }
div.eb_tree .icon_tree_depth.close { background-image: url("../image/common/icon_tree_depth_close.png"); }
div.eb_tree .icon_tree_depth.open { background-image: url("../image/common/icon_tree_depth_open.png"); }

div.eb_tree .icon_tree_bbs.active { background: url("../image/common/icon_tree_bbs_open.png") no-repeat right center; }
div.eb_tree .tree_item.active ~ ul { display: block; }
div.eb_tree .tree_item .unavailable { color: #acacac; cursor: default; }
div.eb_tree .tree_item .nouse { color: #acacac; }
div.eb_tree > ul ul .icon_tree { }

div.eb_tree .eb_checkbox {margin-left: 5px; margin-top: -3px; }
div.eb_tree .eb_checkbox label { vertical-align: middle; }
div.eb_tree .eb_btn.btn_base { min-width: auto; min-height: auto; padding: 3px 5px 2px; font-size: 11px; line-height: 15px; }
div.eb_tree .eb_checkbox + .eb_btn.btn_base { margin-left: -8px; margin-top: -3px; }
.webruleAuthTree div.eb_tree .eb_checkbox + .eb_btn.btn_base { margin-left: 8px; margin-top: -3px; }

/* 2019-08-06 트리 수정 */
div.eb_tree li { clear: both; overflow: hidden; margin-top: 5px; }
div.eb_tree .tree_item { padding-left: 28px; padding-top: 3px; word-break: break-all; word-wrap: break-word; }
div.eb_tree .tree_item > .icon_tree_depth { margin-left: -28px; margin-top: 1px; }
div.eb_tree .tree_item > .icon_tree, 
div.eb_tree .tree_item > .icon_tree_bbs, 
div.eb_tree .tree_item > .icon_tree_regist, 
div.eb_tree .tree_item > .icon_tree_user, 
div.eb_tree .tree_item > .icon_tree_share,
div.eb_tree .tree_item > .icon_tree_trash { margin-left: -17px; }

div.eb_tree .tree_item > a { line-height: 15px; }
div.eb_tree .tree_item > span { float: left; line-height: 15px; }



/*------------------------------------------------------------------------------
  [트리] 트리 + 탭
-------------------------------------------------------------------------------*/
/* tree - tab */
div.tree_tab {}
div.tree_tab div[data-uitab="listWrap"] { padding-bottom: 6px; } 
div.tree_tab div[data-uitab="list"] { display: inline-block; position: relative; font-size: 14px; }
div.tree_tab div[data-uitab="list"]:before { content: ""; display: none; position: absolute; top: 20px; left: 0; width: 100%; height: 2px; background: #9095ab ;}
div.tree_tab div[data-uitab="list"].active { font-weight: bold; } 
div.tree_tab div[data-uitab="list"].active:before { display: block; } 
div.tree_tab div[data-uitab="list"]+div[data-uitab="list"] { margin-left: 20px; }
div.tree_tab div[data-uitab="list"] a { color: #303030; text-decoration: none; }
div.tree_tab div[data-uitab="contsWrap"] { width: 100%; height: 205px; border-top: 1px solid #9095ab; border-bottom: 1px solid #ddd; overflow-y: auto; }
div.tree_tab div[data-uitab="ifrWrap"] { width: 100%; height: 205px; } /* EDMS 폴더이동은 IFrame으로 구현되어 width, height만 준다. 나머지는 iframe안의 페이지에서.. */
div.tree_tab div[data-uitab="manageWrap"] { width: 100%; height: 100%; border-top: 1px solid #9095ab; border-bottom: 1px solid #ddd; overflow-y: auto; }
div.tree_tab div[data-uitab="conts"],
div.tree_tab div[data-uitab="manage"] { padding: 10px; }

.darkmode div.tree_tab div[data-uitab="list"] a { color: #fff; text-decoration: none; }

/* tree - result */
div.tree_result { margin-top: 20px; }
div.tree_result > p { margin: 0; font-size: 14px; font-weight: bold; text-align: right; }

/* tree - header */
.tree_header { height: 30px; margin-bottom: 10px; }
.tree_tab_header { border: 1px solid #f5f5f5; border-bottom: none; border-radius: 3px; padding: 7px 10px; box-sizing: border-box; background-color: #fbfbfb; overflow: hidden; line-height: 12px; }
.darkmode .tree_tab_header { border: 1px solid #f5f5f5; border: none; padding: 7px 10px; box-sizing: border-box; background-color: transparent; overflow: hidden; line-height: 12px; }
.tree_tab_header .eb_checkbox { float: right; }
.tree_tab_header.multiple .tree_tab_item { display: table; width: 100%; max-width: 100%; vertical-align: middle; table-layout: fixed; }
.tree_tab_header.multiple .tree_tab_item + .tree_tab_item { margin-top: 3px; }
.tree_tab_header.multiple .tree_tab_item > div { display: table-cell; }
.tree_tab_header.multiple .tree_tab_item .th { width: 50px; font-weight: bold; }
.tree_header .input_bullet:first-child { margin-left: 0; }



/********************************************************************************************************
  [탭]
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  [텝] 기본
-------------------------------------------------------------------------------*/
div.eb_tab_wrap { position: relative; }
div.eb_tab_wrap .tab_list_wrap { display: table; table-layout: fixed; width: 100%; padding: 0px; box-sizing: border-box; text-align: center; border-top: solid 1px #ebebeb; border-bottom: solid 1px #ebebeb }
div.eb_tab_wrap .tab_list_wrap .tab_list { display: table-cell; padding: 15px 0; cursor: pointer;}
div.eb_tab_wrap .tab_list_wrap .tab_list a {  border-bottom: 2px solid transparent; font-size: 16px; text-decoration: none;  }
div.eb_tab_wrap .tab_list_wrap .tab_list.active { }
div.eb_tab_wrap .tab_list_wrap .tab_list.active a { border-bottom: 2px solid #eb765f; color: #eb765f;  font-weight: bold; }
div.eb_tab_wrap .tab_conts_wrap { padding: 20px 0 0 0; }
div.eb_tab_wrap .tab_conts_wrap .tab_conts { display: none; }
div.eb_tab_wrap .tab_conts_wrap .tab_conts.active { display: block; }

/*------------------------------------------------------------------------------
  [텝] 박스 탭
-------------------------------------------------------------------------------*/
div.eb_tab_wrap.tab_box .tab_box_list_wrap { height: 40px; margin-bottom: 10px; border-bottom: 1px solid #3b415d; text-align: center; box-sizing: border-box; }
div.eb_tab_wrap.tab_box .tab_box_list_wrap:after { content: ""; display: block; clear: both; }
div.eb_tab_wrap.tab_box .tab_box_list_wrap .tab_list { float: left; border:1px solid #c5c5c7; border-bottom: none; border-top-left-radius: 2px; border-top-right-radius: 2px; box-sizing: border-box; margin-right: 2px }
.darkmode div.eb_tab_wrap.tab_box .tab_box_list_wrap .tab_list { 
	float: left; 
	border:none; 
	box-sizing: border-box; 
	margin-right: 2px 
}

div.eb_tab_wrap.tab_box .tab_box_list_wrap .tab_list.active { border:2px solid #3b415d; border-bottom:none; background: #fff }
.darkmode div.eb_tab_wrap.tab_box .tab_box_list_wrap .tab_list.active {
	border-radius: 5px;
    background: #4a4e50;
    border:none;
}
div.eb_tab_wrap.tab_box .tab_box_list_wrap .tab_list > a { display: block; line-height: 38px; font-size: 13px; color:#707070; background: #fff; text-align: center; text-decoration: none;padding: 0 8px; min-width: 30px; }
.darkmode div.eb_tab_wrap.tab_box .tab_box_list_wrap .tab_list > a { 
	display: block; 
	line-height: 30px; 
	font-size: 13px; 
	color:#a0a2a5; 
	background: #313336; 
	text-align: center; 
	text-decoration: none;
	padding: 0 8px; 
	min-width: 30px; 
	border:none;
	border-radius:5px;
}

div.eb_tab_wrap.tab_box .tab_box_list_wrap .tab_list.active > a { font-weight: bold; color: #707070; background: #ffffff;color:#303030}
.darkmode div.eb_tab_wrap.tab_box .tab_box_list_wrap .tab_list.active > a { 
	font-weight: bold; 
	background-color: #6e6e6e;
	color:#FFFFFF;
	box-shadow: inset 0px 1px 0px 0px #8e8e8e;
	border-radius:5px;
	transition: 500ms background-color cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
.darkmode .cop_lnb div.eb_tab_wrap.tab_box  .tab_box_list_wrap .tab_list.active > a { 
	font-weight: bold; 
	background-color: #6e6e6e;
	color:#FFFFFF;
	box-shadow: inset 0px 1px 0px 0px #8e8e8e;
	border-radius:5px;
	transition: 500ms background-color cubic-bezier(0.250, 0.100, 0.250, 1.000);
}

.darkmode div.eb_tab_wrap.tab_box .tab_box_conts_wrap {
	background: #6e6e6e; 
	margin-top: -3px; 
	z-index:100;
	position:relative;
	width: 100%; 
	padding: 15px; 
	border:0; 
	border-top: none; 
	border-bottom-left-radius: 3px; 
	border-bottom-right-radius: 3px; 
	box-sizing: border-box; 
	-webkit-box-shadow: 0 2px 0 rgba( 0, 0, 0, 0.02 ) ; 
	box-shadow:0 2px 0 rgba( 0, 0, 0, 0.02 );
}
div.eb_tab_wrap.tab_box .tab_box_conts_wrap { margin-top: -1px; width: 100%; padding: 15px; border:1px solid #e5e5e5; border-top: none; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; box-sizing: border-box; -webkit-box-shadow: 0 2px 0 rgba( 0, 0, 0, 0.02 ) ; box-shadow:0 2px 0 rgba( 0, 0, 0, 0.02 ); }
div.eb_tab_wrap.tab_box .tab_box_conts_wrap .tab_conts ul { margin: 0; padding: 0; list-style: none; }
div.eb_tab_wrap.tab_box .tab_box_conts_wrap .tab_conts ul > li:after { content: ""; display: block; clear: both; }
div.eb_tab_wrap.tab_box .tab_box_conts_wrap .tab_conts ul > li > .tab_head,
div.eb_tab_wrap.tab_box .tab_box_conts_wrap .tab_conts ul > li > .tab_body { float: left; width: calc(50% - 5px); line-height: 24px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.eb_tab_wrap.tab_box .tab_box_conts_wrap .tab_conts ul > li > .tab_head { color: #707070; }
.darkmode div.eb_tab_wrap.tab_box .tab_box_conts_wrap .tab_conts ul > li > .tab_head { color: white; }
div.eb_tab_wrap.tab_box .tab_box_conts_wrap .tab_conts ul > li > .tab_head .icon.bullet_dot { margin-right: 5px; }

/*------------------------------------------------------------------------------
  [텝] 랭크 탭
-------------------------------------------------------------------------------*/
div.eb_tab_wrap.tab_rank .tab_rank_list_wrap { display: table; table-layout: fixed; width: 100%; }
div.eb_tab_wrap.tab_rank .tab_rank_list_wrap .tab_list { display: table-cell; border: 1px solid #e4e6e9; background: #f2f6f8; }
div.eb_tab_wrap.tab_rank .tab_rank_list_wrap .tab_list.active { border: 1px solid #9d9fac; background: #ffffff; }
div.eb_tab_wrap.tab_rank .eb_tab_wrap.tab_rank .tab_rank_list_wrap .tab_list + .tab_list { margin-left: -1px; }
div.eb_tab_wrap.tab_rank .tab_rank_list_wrap .tab_list .eb_btn { width: 100%; padding: 0; border: 0; box-sizing: border-box; line-height: 28px; font-size: 16px; color: #303030; background: transparent; }
div.eb_tab_wrap.tab_rank .tab_rank_conts_wrap { padding-top: 20px; }
div.eb_tab_wrap.tab_rank .tab_rank_conts_wrap .tab_conts { display: none; }
div.eb_tab_wrap.tab_rank .tab_rank_conts_wrap .tab_conts.active { display: block; }
div.eb_tab_wrap.tab_rank .tab_rank_conts_wrap .ranklist_wrap {}
div.eb_tab_wrap.tab_rank .tab_rank_conts_wrap .ranklist { padding: 13px 0; }
div.eb_tab_wrap.tab_rank .tab_rank_conts_wrap .ranklist .rank_num { margin-right: 15px; display: inline-block; width: 16px; height: 16px; border: 1px solid #e5e5e5; box-sizing: border-box; vertical-align: middle; text-align: center; line-height: 16px; font-size: 12px; }
div.eb_tab_wrap.tab_rank .tab_rank_conts_wrap .ranklist .rank_title { display: inline-block; vertical-align: middle; font-size: 16px; line-height: 1; }

/*------------------------------------------------------------------------------
  [텝] 가로 탭
-------------------------------------------------------------------------------*/
div.eb_tab_wrap.tab_horizon { width: 100%; border: 1px solid #e5e5e5; border-width: 1px 0 1px 0; clear: both; }
.darkmode div.eb_tab_wrap.tab_horizon { width: 100%; border: 1px solid #646464; border-width: 1px 0 1px 0; clear: both; }
div.eb_tab_wrap.tab_horizon:after { content: ""; display: block; clear: both; }
div.eb_tab_wrap.tab_horizon .tab_horizon_list_wrap { float:left; width: 380px; height: 100%; background: #fbfcfe; }
.darkmode div.eb_tab_wrap.tab_horizon .tab_horizon_list_wrap { float:left; width: 380px; height: 100%; background: #2c2d2e; }
div.eb_tab_wrap.tab_horizon .tab_horizon_list_wrap .tab_list { height: 90px; padding: 14px 10px; border-bottom: 1px dotted #e5e5e5; box-sizing: border-box; }
.darkmode div.eb_tab_wrap.tab_horizon .tab_horizon_list_wrap .tab_list { height: 90px; padding: 14px 10px; border-bottom: 1px dotted #929294; box-sizing: border-box; }
div.eb_tab_wrap.tab_horizon .tab_horizon_list_wrap .tab_list.active { background-color: #fff; }
.darkmode div.eb_tab_wrap.tab_horizon .tab_horizon_list_wrap .tab_list.active { background : #363839;}
div.eb_tab_wrap.tab_horizon .tab_horizon_list_wrap .tab_list:hover { cursor: pointer; }
div.eb_tab_wrap.tab_horizon .tab_horizon_conts_wrap { float:left; width: calc(100% - 410px); padding: 30px 20px; margin-left: 30px; box-sizing: border-box;}
div.eb_tab_wrap.tab_horizon .tab_horizon_conts_wrap .tab_conts {}
div.eb_tab_wrap.tab_horizon .tab_horizon_conts_wrap .tab_conts .tab_title { font-size: 24px; font-weight: bold; }
.darkmode div.eb_tab_wrap.tab_horizon .tab_horizon_conts_wrap .tab_conts .tab_title { font-size: 24px; font-weight: bold; color: #f0f0f0; }

/********************************************************************************************************
  [페이지네이션]
*********************************************************************************************************/
div.eb_pagination { text-align: center; padding: 20px 60px 20px 0; }
div.eb_pagination div.pagi_group { display: inline-block; margin: 0 16px; vertical-align: middle; font-size: 12px; color: #707070; }
div.eb_pagination div.eb_input.input_pagi { margin-right: 0; width: 34px; height: 24px; }
div.eb_pagination div.eb_input.input_pagi input { padding: 0; text-align: center; font-size: 12px; line-height: 22px; border-radius: 2px; }
div.eb_pagination .btn_pagi { display: inline-block; width: 24px; height: 24px; padding: 0; background: #ffffff no-repeat center; text-indent: -9999px; }
div.eb_pagination .btn_pagi.pagi_next { background-image: url('../image/common/pagi_next.png'); margin-right: 6px; }
div.eb_pagination .btn_pagi.pagi_next_more { background-image: url('../image/common/pagi_next_more.png'); margin-right: 6px; }
div.eb_pagination .btn_pagi.pagi_last { background-image: url('../image/common/pagi_last.png');  }
div.eb_pagination .btn_pagi.pagi_prev {background-image: url('../image/common/pagi_prev.png'); margin-left: 6px; }
div.eb_pagination .btn_pagi.pagi_prev_more { background-image: url('../image/common/pagi_prev_more.png'); margin-left: 6px; }
div.eb_pagination .btn_pagi.pagi_first { background-image: url('../image/common/pagi_first.png');}
.darkmode div.eb_pagination .btn_pagi.pagi_first { background-image: url('../image/common/pagi_first_darkmode.png');border:none;background-color:transparent;}
.darkmode div.eb_pagination .btn_pagi.pagi_last { background-image: url('../image/common/pagi_last_darkmode.png');border:none;background-color:transparent;}
.darkmode div.eb_pagination .btn_pagi.pagi_next { background-image: url('../image/common/pagi_next_darkmode.png'); margin-right: 6px; border:none;background-color:transparent;}
.darkmode div.eb_pagination .btn_pagi.pagi_prev {background-image: url('../image/common/pagi_prev_darkmode.png'); margin-left: 6px; border:none;background-color:transparent;}
.darkmode div.eb_pagination .btn_pagi.pagi_prev_more { background-image: url('../image/common/pagi_prev_more_darkmode.png'); margin-left: 6px; border:none;background-color:transparent;}
.darkmode div.eb_pagination .btn_pagi.pagi_next_more { background-image: url('../image/common/pagi_next_more_darkmode.png'); margin-right: 6px; border:none;background-color:transparent;}

div.eb_pagination .btn_pagi:disabled,
div.eb_pagination .btn_pagi[disabled="disabled"] { opacity: .6; filter:alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; background-color: #ffffff; }

div.eb_pagination div.pagi_group.num span{ display: inline-block;padding: 6px 9px 5px; font-size: 13px; line-height: 17px; color: #707070; cursor: pointer}
div.eb_pagination div.pagi_group.num span.on, div.eb_pagination div.pagi_group.num span:hover{ font-weight: 600;color:#eb765f }

div.eb_pagination+.btn_function_wrap{float: right;margin-top: -50px}
div.eb_pagination+.btn_function_wrap .eb_text {display: inline-block; vertical-align: middle; padding-right: 15px;}

/********************************************************************************************************
  [관리] 트리+컨텐츠
*********************************************************************************************************/
.manage_wrap { /*margin-top: 20px; iframe 사용으로 여백 불필요 */ }
.manage_wrap_left { float: left; width: 320px;  margin-right: 15px; padding-top: 0; }
.manage_wrap_right { overflow: hidden; }
.manage_wrap_left .btn_group_wrap, 
.manage_wrap_left .btn_function_wrap, 
.manage_wrap_left .eb_input { padding-bottom: 6px; }
.manage_wrap_left .tbl_list td .a,
.iframe_left .tbl_list td .a { display: block; cursor: pointer; text-align: left; }
.manage_wrap_right .title_wrap:first-child { padding-top: 0; }
.manage_wrap_right .btn_group_wrap + .eb_tbl, 
.manage_wrap_right .btn_function_wrap + .eb_tbl { margin-top: 16px; }



/********************************************************************************************************
  [공통] 콘텐츠
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  [공통] 콘텐츠 - 디자인
-------------------------------------------------------------------------------*/
/* [포토리스트] 왼쪽사진 오른쪽 이름 유형 배치 - COP, 메일보기 */
.profile_photo { border-radius: 50%; box-sizing: border-box; overflow: hidden; }
.profile_photo > img { width: 100%; height: 100%; }
.profile_photo.photo_lar { width: 100px; height: 100px; }
.profile_photo.photo_med { width: 50px; height: 50px; }
.profile_photo.photo_sm { width: 36px; height: 36px; }

/* 2024-10-24 / bjj / user onoff 조직도 */
.profile_photo.userStatOn{border: 1px solid #15f312;transition: all 0.8s ease;}
.profile_photo.userStatOff{border: 1px solid #262335;transition: all 0.8s ease;}
td.userOnOffList_ON{border-left:2px solid #15f312;}
td.userOnOffList_OFF{border-left:2px solid #262335;}
.td_positionRelative{position:relative;}
.userOnOff_leftBar{
	background-color:transparent; 
    width: 1px;
    height:0px;
    position: absolute;
    left: 0;
    top: 0;
}
.userOnOff_leftBar.ON{background-color:#15f312;height:100%;transition: all 3s ease;}
.userOnOff_leftBar.OFF{background-color:#262335;height:100%;transition: all 3s ease;}

/* 
	2026-05-26 / bjj / 이노 - 프로필이미지 확대 기능, 
	스티커 dimm 모드 z-index :9
	protectLayer z-index : 4
	상태메시지 z-index : 6
*/
#divProfilePhoto.profile_photo {position:relative;z-index:5;transition:transform 0.2s ease;}
#divProfilePhoto.profile_photo.profile_photo_zoom_enabled:hover {transform:scale(1.1);transition:transform 0.5s ease;cursor: zoom-in;}
.div_basic_info_summary_border_visible #divProfilePhoto.profile_photo{z-index:-10;}

/*2024-11-14 / bjj / 사용자 상태 메세지 --start-- */
:root {
    --msgBGColor_01: #f05142;
    --msgBGColor_02: #f5882f;
    --msgBGColor_03: #fdbb3c;
    --msgBGColor_04: #c5d863;
    --msgBGColor_05: #63c08c;
    --msgBGColor_06: #51bfae;
    --msgBGColor_07: #45c5e0;
    --msgBGColor_08: #086899;
    --msgBGColor_09: #484a9b;
    --msgBGColor_10: #744b9f;
    --msgBGColor_11: #AF2D59;
    --msgBGColor_12: #a9528d;
    --msg-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
}
.msgColorPal_c01{background-color: var(--msgBGColor_01);}
.msgColorPal_c02{background-color: var(--msgBGColor_02);}
.msgColorPal_c03{background-color: var(--msgBGColor_03);}
.msgColorPal_c04{background-color: var(--msgBGColor_04);}
.msgColorPal_c05{background-color: var(--msgBGColor_05);}
.msgColorPal_c06{background-color: var(--msgBGColor_06);}
.msgColorPal_c07{background-color: var(--msgBGColor_07);}
.msgColorPal_c08{background-color: var(--msgBGColor_08);}
.msgColorPal_c09{background-color: var(--msgBGColor_09);}
.msgColorPal_c10{background-color: var(--msgBGColor_10);}
.msgColorPal_c11{background-color: var(--msgBGColor_11);}
.msgColorPal_c12{background-color: var(--msgBGColor_12);}

.statMsgModify_hidden {
	background: url(../image/common/btn_todo_date.png) no-repeat center;
    position: absolute;
    width: 17px;
    height: 16px;
    cursor: pointer;
    top: 0;
    margin-top: 0px !important;
    right: -20px;
    transform:scale(0);
   	transition: all 0.5s ease;
}
.statMsgModify {
    transform:scale(1);
   	transition: all 0.5s ease;
}
.statMsgModify_rel{
    position: relative;
    right: -5px;
    margin-bottom: 5px;
}
input.statMsgModify_simple{
	position: absolute;
    left: 1.1rem;
    height: 13px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid lightgrey;
    transform:scaleX(0);
}
input.statMsgModify_simple.show{
	transform:scaleX(1) !important;
	transform-origin:left;
	transition:0.5s transform ease;
}

.statusMessageWrap{
	position:absolute;
	padding: 5px;
    border-radius: 5px;
	transform:scale(1);
	box-shadow: var(--msg-box-shadow);
	-webkit-box-shadow: var(--msg-box-shadow);
	-moz-box-shadow: var(--msg-box-shadow);
	transition: all 0.1s cubic-bezier(.3, .7, .4, 1);
	user-select: none;
	z-index:6;
}
.statusMessageWrap > input{
	font-family:'NanumGothic' !important; /* NotoSans의 사이즈 문제로 메세지 입력란의 경우 나눔고딕으로 강제변경 */
}
/* 2025-10-24 / bjj / 상태메세지 리액션 */
:root{
  	--heartCursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><defs><filter id="shadow" x="-50%" y="-50%" width="200%" height="200%"><feDropShadow dx="1" dy="1" stdDeviation="2.5" flood-color="rgba(0,0,0,1)"/></filter></defs><path fill="rgba(226,38,77,1)" stroke="black" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" filter="url(%23shadow)"/></svg>');
}
.statusMessageWrap.notme:hover .statusMessage{
	cursor:var(--heartCursor), auto;
}
.statusMessageWrap.notme:hover{
	cursor:var(--heartCursor), auto;
}
.msgHeart_click::after{ /* 클릭할때 처리 */
	content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    right: 0;
    top:0.7rem;
    background-image: var(--heartCursor);
    transform:scale(0);
    opacity:0;
    animation : msgHeartShow 1s ease forwards;
}
@keyframes msgHeartShow{
	0%{
		transform: scale(0.1);
	}
	30%{
		opacity:0.6;
		transform: translateX(1rem) scale(1.1);
	}
	100% {
		opacity:1;
	    transform: translate(1rem, -0.8rem) scale(1);
	}
}
.msgHeart{ /* 클릭한 하트는 여기에 겹쳐짐 */
    position: absolute;
    width: 12px;
    height: 12px;
    right: -1rem;
    top: -0.1rem;
    background-image: var(--heartCursor);
    cursor:default;
}
div.basic_info .basic_info_summary .msgHeart{ /* 조직도에 표시되는 하트*/
	margin-top:0;
}
.admin .msgHeart::after{
	position:absolute;
	content:attr(data-heart_cnt);
	top: 1rem;
    left: 0.2rem;
    font-size: 0.6rem;
    font-weight: 800;
    color: #e2254d;
}

.profileImgWrapper{
	display:inline-block;
}
.profileImgWrapper.nohover{
	pointer-events:none;
}
.statusMessagePresetArea{
    position: absolute;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    transform:scale(0);
}
.statusMessagePresetArea.hide{
	animation: presetAreaHide 0.5s ease forwards;
}
.statusMessageWrapPreset{
	position:relative;
	width: min-content;
	height: min-content;
	margin-bottom:4px;
	transform:scaleX(0);
	transform-origin:right;
	cursor:pointer;
}
.statusMessageWrapPreset:first-child{
	margin-top:10px;
}
.profileImgWrapper.no_hover:hover .statusMessagePresetArea{
	transform:scale(0);
}
.profileImgWrapper:hover .statusMessagePresetArea{
	transform:scale(1);
}
.profileImgWrapper:hover .statusMessageWrapPreset{
	transform:scaleX(1);
	transition:transform 0.4s ease;
}
.profileImgWrapper:hover .statusMessageWrapPreset:hover{
	transform:scale(1.1);
	transition:transform 0.1s ease;
	transform-origin:center;
	transition-delay:0s !important;
}
.statusMessageWrap.new::before{
	content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    left: -5px;
    top: -5px;
    background-color: #fc6e57;
}
@keyframes presetAreaHide{
	0% {
	    transform: translateY(0px) scale(1);
	    transform-origin:65% 0%;
	}
	100% {
	    transform: translateY(-20px) scale(0);
	    transform-origin:65% 0%;
	}
}
.moreHourWrap{
	top:3px;
	position: absolute;
    display: flex;
    transform: scaleX(0);
    opacity:0;
    transform-origin:right;
    padding-right:5px;
}
.statusMessageWrap:hover .moreHourWrap{
	opacity:1;
    transform: scaleX(1);
    transition:opacity 0.4s ease;
}

.moreHour{
	transform-origin:center;
	border-radius: 50%;
    width: 1rem;
    height: 1rem;
    line-height:1rem; /*텍스트 수직 중앙정렬 높이랑 같이 맞춤*/
    box-shadow: var(--msg-box-shadow);
	-webkit-box-shadow: var(--msg-box-shadow);
	-moz-box-shadow: var(--msg-box-shadow);
    text-align: center;
    transform:scale(0.8);
    cursor:pointer;
    font-size:x-small;
    transition:transform 0.2s ease;
}
.moreHour:hover{
	transform:scale(1.3);
}
.moreHour:hover::after{
	content:"H";
}

/* 휴지통 ---s */
:root{
  	--trash-color:#000;
}
.trash_bg{background-color:#FFF;}
.trash_middle {box-sizing: border-box;}
.trash_can.trash_tiny {box-sizing: border-box;margin:5px;}
.trash_can {box-sizing: border-box;width: 17px;height: 19px;position: relative;cursor: pointer;}
.trash_top {
  box-sizing: border-box;
  height: 3px;
  width: 100%;
  position: relative;
  top: -1px;
  -webkit-transition: all 100ms ease-out;
     -moz-transition: all 100ms ease-out;
       -o-transition: all 100ms ease-out;
          transition: all 100ms ease-out;
}

.trash_top .trash_handle {
  box-sizing: border-box;
  width: 11px;
  height: 6px;
  margin: 0 auto;
  position: relative;
  left: 0px;
  border-radius: 50% 50%;
  border: 2px solid var(--trash-color);
}

.trash_top .trash_handle:after {
  content: "";
  display: block;
  width: 65%;
  height: 50%;
  position: relative;
  top: 25%;
  left: 17.5%;
  border-radius: 50% 50%;
  background: transparent;
}

.trash_top .trash_base {box-sizing: border-box;height: 2px;position: relative;bottom: 2px;background: var(--trash-color);border-top-left-radius: 10px;border-top-right-radius: 10px;}
.trash_body {box-sizing: border-box;width: 13px;height: 16px;position: relative;margin: 0 auto;border: 2px solid var(--trash-color);background: transparent;}
.trash_body .trash_line {background: var(--trash-color);position: absolute;height: 10px;width: 1px;left: 1px;top: 1px;}
.trash_body .trash_line.second {left: 3.5px;}
.trash_body .trash_line.third {left: 7px;}
.trash_can:hover .trash_top {transform: rotate(25deg) skew(0deg) translate(2px, -7px);}
/* 휴지통 ---e */

/* 메인화면에서는 statusMessageWrap를 말풍선 형태로 표시*/
.statusMessageItem .lower_tail{
    position: absolute;
    top: 1.4rem;
    border-top: 10px solid transparent;
    border-left: 3px solid transparent;
    border-right: 10px solid transparent;
    z-index: 1;
}
.statusMessageItem .statusMessage{
    /* 메인화면에서 볼대는 width를 제한 */
    max-width:150px;
    min-width:10px;
}
/*삼각형은 색을 border-color로 설정해야 함 */
.statusMessageItem .lower_tail.msgColorPal_c01{background-color: unset;border-top-color:var(--msgBGColor_01);}
.statusMessageItem .lower_tail.msgColorPal_c02{background-color: unset;border-top-color:var(--msgBGColor_02);}
.statusMessageItem .lower_tail.msgColorPal_c03{background-color: unset;border-top-color:var(--msgBGColor_03);}
.statusMessageItem .lower_tail.msgColorPal_c04{background-color: unset;border-top-color:var(--msgBGColor_04);}
.statusMessageItem .lower_tail.msgColorPal_c05{background-color: unset;border-top-color:var(--msgBGColor_05);}
.statusMessageItem .lower_tail.msgColorPal_c06{background-color: unset;border-top-color:var(--msgBGColor_06);}
.statusMessageItem .lower_tail.msgColorPal_c07{background-color: unset;border-top-color:var(--msgBGColor_07);}
.statusMessageItem .lower_tail.msgColorPal_c08{background-color: unset;border-top-color:var(--msgBGColor_08);}
.statusMessageItem .lower_tail.msgColorPal_c09{background-color: unset;border-top-color:var(--msgBGColor_09);}
.statusMessageItem .lower_tail.msgColorPal_c10{background-color: unset;border-top-color:var(--msgBGColor_10);}
.statusMessageItem .lower_tail.msgColorPal_c11{background-color: unset;border-top-color:var(--msgBGColor_11);}
.statusMessageItem .lower_tail.msgColorPal_c12{background-color: unset;border-top-color:var(--msgBGColor_12);}
.statusMessage{
	cursor:grab;
	font-weight: 600;
    color: white;
    text-shadow: 1px 1px 2px black;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.messageNone{
	background-color: transparent;
    box-shadow: none;
}
.statusMessage_input{
	border: none;
    background-color: transparent;
    font-weight: 600;
    color: white;
    text-shadow: 1px 1px 2px black;
    width: 85%;
}
.move_active{
	transform:scale(1.2);
	transition: transform 0.5s ease;
}
.cursor_move{
	cursor:move;
}
.div_basic_info_summary_border_visible{
	border:1px dotted lightgrey;
	border-radius:5px;
	transition:all 0.5s ease;
}
.msgColorPalWrap{
	position:absolute;
	display: flex;
	padding-top:4px;
	transform:scaleX(0);
}
.msgColorPalWrap.visible{
	transform:scaleX(1);
	transition:transform 0.3s ease;
	transform-origin:left;
}
.msgColorPalWrap.visible:after{
	/* 엔터키 이미지 */
	content: "";
    position: absolute;
    top: -27px;
    right: -39px;
    width: 1.6rem;
    height: 1.6rem;
    background-image: url(../image/common/btn_enterkey_48.png);
    background-size: cover;
    background-repeat: no-repeat;
    animation: key_bounce 2s ease infinite;
}
@keyframes key_bounce{
	70% {
	    transform: translateY(0%);
	}
	80% {
	    transform: translateY(-15%);
	}
	90% {
	    transform: translateY(0%);
	}
	
	95% {
	    transform: translateY(-7%);
	}
	97% {
	    transform: translateY(0%);
	}
	99% {
	    transform: translateY(-3%);
	}
	100% {
	    transform: translateY(0);
	}
}

.msgColorPal{
	width:10px;
	height:10px;
	margin:0 !important;
	cursor:pointer;
}
.msgColorPal:hover{
	transform:scale(1.5);
	transition: transform 0.3s ease;
}
.protectLayer{
	position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
}
.profile_photo_zoom_open{
	overflow: hidden;
}
.profile_photo_zoom_dimm{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 5000;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: rgba(0, 0, 0, 0.55);
	box-sizing: border-box;
}
.profile_photo_zoom_dimm.active{
	display: flex;
}
.profile_photo_zoom_layer{
	position: relative;
	display: flex;
	width: 760px;
	max-width: 100%;
	max-height: calc(100vh - 48px);
	padding: 28px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
	box-sizing: border-box;
	overflow: hidden;
	background-clip: padding-box;
}
.darkmode .profile_photo_zoom_layer,
.body_darkmode .profile_photo_zoom_layer{
	background: #262626;
	color: #fff;
}
.profile_photo_zoom_close{
	position: absolute;
	right: 16px;
	top: 16px;
	width: 38px;
	height: 38px;
	min-width: 38px;
	min-height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	z-index: 1;
}
.profile_photo_zoom_close:hover{
	background: var(--theme-color-bold, #eb765f);
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25);
	transform: rotate(90deg) scale(1.08);
}
.profile_photo_zoom_close:active{
	transform: rotate(90deg) scale(0.96);
}
.profile_photo_zoom_close:before,
.profile_photo_zoom_close:after{
	content: "";
	position: absolute;
	left: 10px;
	top: 18px;
	width: 18px;
	height: 2px;
	background: #707070;
	transition: background-color 0.2s ease;
}
.darkmode .profile_photo_zoom_close:before,
.darkmode .profile_photo_zoom_close:after,
.body_darkmode .profile_photo_zoom_close:before,
.body_darkmode .profile_photo_zoom_close:after{
	background: #fff;
}
.profile_photo_zoom_close:hover:before,
.profile_photo_zoom_close:hover:after{
	background: #fff;
}
.profile_photo_zoom_close:before{
	transform: rotate(45deg);
}
.profile_photo_zoom_close:after{
	transform: rotate(-45deg);
}
.profile_photo_zoom_photo{
	flex: 0 0 260px;
	width: 260px;
	height: 260px;
	margin-right: 28px;
	border-radius: 50%;
	overflow: hidden;
	background: #f4f4f4;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.profile_photo_zoom_photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.profile_photo_zoom_info{
	flex: 1 1 auto;
	min-width: 0;
	max-height: calc(100vh - 104px);
	padding: 12px 12px 0 0;
	overflow-y: auto;
	box-sizing: border-box;
}
.profile_photo_zoom_name{
	margin: 0 36px 18px 36px;
	font-size: 24px;
	font-weight: 600;
	line-height: 30px;
	color: #303030;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.darkmode .profile_photo_zoom_name,
.body_darkmode .profile_photo_zoom_name{
	color: #fff;
}
.profile_photo_zoom_basic_info .eb_tbl{
	margin-top: 0;
}
.profile_photo_zoom_basic_info,
.profile_photo_zoom_basic_info *{
	cursor: default !important;
}
.profile_photo_zoom_basic_info a,
.profile_photo_zoom_basic_info copy-icon,
.profile_photo_zoom_basic_info .searchdept{
	pointer-events: none;
	text-decoration: none;
}
.profile_photo_zoom_basic_info .eb_tbl table{
	width: 100%;
}
.profile_photo_zoom_basic_info .eb_tbl th,
.profile_photo_zoom_basic_info .eb_tbl td{
	font-size: 14px;
	line-height: 21px;
}
#divProfilePhoto.profile_photo_zoom_enabled{
	cursor: pointer;
}
@media screen and (max-width: 640px){
	.profile_photo_zoom_layer{
		display: block;
		padding: 24px 18px;
		overflow: hidden;
	}
	.profile_photo_zoom_photo{
		width: 190px;
		height: 190px;
		margin: 0 auto 20px;
	}
	.profile_photo_zoom_info{
		max-height: calc(100vh - 282px);
		padding-right: 8px;
		overflow-y: auto;
	}
	.profile_photo_zoom_name{
		margin-right: 36px;
		font-size: 21px;
		line-height: 27px;
	}
}
.saveMsgAlert{
	position: absolute;
    right: -15px;
    top: -15px;
    color:transparent;
    user-select: none;
}
.saveMsgAlert.visible{
    color:inherit;
    transition:all 0.5s ease;
    user-select: none;
}
.divMeBtn{
	border:1px solid black;
	width:20px;height:20px;
}

/*2024-11-14 / bjj / 사용자 상태 메세지 --end-- */

ul.photo_list { padding: 0; margin: 0; width: 100%; list-style: none; box-sizing: border-box; }
ul.photo_list:after { content: ""; display: block; clear: both; }
ul.photo_list > li { float: left; box-sizing: border-box;}
ul.photo_list > li:after { content: ""; display: block; clear: both; }
ul.photo_list > li > .profile_photo { float: left; margin-right: 10px; }
ul.photo_list > li > .profile_info { float: left; }
ul.photo_list > li > .etc_right { float: right; display: inline-block; }

/* [전자결재] */
table .sign_image { margin: 0 auto; }
div.eb_tbl td.sign_image { padding: 30px 20px; border-left: 1px solid #e5e5e5; }
.sign_image { width: 100px; height: 100px; }


/* [게시판] 특별케이스 */
.com_list_contents .contents_head_title { margin: 16px 0; font-size: 16px; font-weight: bold; }
.com_list_contents > ul > li > .contents_title .icon.icon_saved_file+.contents_link { max-width: calc( 100% - 58px); }

tr.disabled > td, tr.disabled tr:hover > td  { background: #f5f5f5 !important; color: #a5a5a5 !important; }
.darkmode tr.disabled > td {background-color:transparent !important;color:#fd786c !important;}
tr.cancel > td, tr.cancel > td a, tr.cancel > td span{ text-decoration: line-through !important; }

/* [게시판] 리스트 */
.com_list_contents > ul { padding: 0 20px 0 20px; margin: 0; list-style: none; }
.com_list_contents > ul > li { position: relative; }
.com_list_contents > ul > li+li { margin-top: 10px; }
.com_list_contents > ul > li .author_info { display: inline-block; width: 60px; font-size: 14px; color: #707070; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.darkmode .com_list_contents > ul > li .author_info {color:#dbdfe1;}
.com_list_contents > ul > li .upload_log { display: inline-block; width: 100px; font-size: 13px; color: #a0a0a0; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.darkmode .com_list_contents > ul > li .upload_log {color:#dbdfe1}
.com_list_contents > ul > li > .contents_title { position: relative; margin-right: 160px; box-sizing: border-box; white-space: nowrap;}
.com_list_contents > ul > li > .contents_title .contents_link { display: inline-block; position: relative; max-width: calc( 100% - 30px ); padding-right: 20px; font-size: 14px; color: #707070; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; }
.darkmode .com_list_contents > ul > li > .contents_title .contents_link {color: #dbdfe1;}
.com_list_contents > ul > li > .contents_title .bullet_dot { margin-right: 4px; vertical-align: middle; }
.com_list_contents > ul > li > .contents_title .icon.icon_saved_file { margin-right: 8px; vertical-align: middle; }
.com_list_contents > ul > li > .contents_title .icon.icon_news { position: absolute; top: 0; right: 0; }
.com_list_contents > ul > li > .contents_info { position: absolute; top: 0; right: 0; }
   
/* [게시판] 리스트 - 아코디언 */
.com_list_contents.style_accordion { padding-bottom: 0;}
.com_list_contents.style_accordion > ul > li > .contents_title { padding-right: 80px; }
.com_list_contents.style_accordion { border-top: 1px solid #e5e5e5; }
.com_list_contents.style_accordion+.com_list_contents.style_accordion { margin-top: -1px; }
.com_list_contents.style_accordion .title_wrap.with_etc { padding: 18px 10px; }
.com_list_contents.style_accordion .title_wrap.with_etc .etc_wrap { padding-top: 8px; }
.com_list_contents.style_accordion .title > .count_num { color: #fc6e57; }
.com_list_contents.style_accordion > ul { margin-bottom: 20px; }

/* [아코디언] 리스트 */
.category_accord { padding: 27px 0 10px 0; border-top: 1px solid #e5e5e5; box-sizing: border-box; }
.category_accord:first-child { border-top: none; }
.category_title:after { content: ' '; display: block; clear: both; }
.category_title .category { display: inline-block; font-size: 20px; font-weight: bold; }
.category_title .eb_btn.icon_btn.icon_accordion { float: right; margin-top: 3px; }
.category_conts { margin-top: 15px; font-size: 14px; line-height: 20px; color: #707070; }

/* [게시판] 트리형 구조 관리 */
/* div.tree_manage_wrap .tree_manage_left { float: left; width: 320px;  margin-right: 15px; padding-top: 0; }
div.tree_manage_wrap .tree_manage_left .btn_group_wrap { padding: 20px 0 8px; }
div.tree_manage_wrap .tree_manage_right { overflow: hidden; }
div.tree_manage_wrap .tree_manage_right .title_wrap:first-child { padding-top: 0; } */

/* [게시판] 이전글/다음글 */
.prev_next_wrap { border-top: 1px solid #e5e5e5; }
.prev_next_wrap > div { position: relative; padding: 0 10px; border-bottom: 1px solid #e5e5e5; }
.prev_next_wrap > div > .bbs_navi { display: inline-block; margin-right: 5px; line-height: 50px; font-size: 13px; color: #909090; }
.prev_next_wrap > div > .navi_list_title { display: inline-block; padding: 0  0 18px; }
.prev_next_wrap > div > .navi_list_title > a { font-size: 14px; color: #303030; text-decoration: none; }
.darkmode .prev_next_wrap > div > .navi_list_title > a { font-size: 14px; color: #FFFFFF; text-decoration: none; }
.prev_next_wrap > div > .upload_log { position: absolute; top: 50%; right: 10px; margin-top: -5px; font-size: 12px; color: #a0a0a0;}

/* [게시판] 답글 리스트 */
.reply_wrap { margin-top: 30px; }
.reply_wrap div.eb_tbl { border-top-color: #ddd; }
.reply_wrap div.eb_tbl tr td { background-color: #f5f5f5; }
.reply_wrap div.eb_tbl tr td.current { font-weight: 600; }

/*------------------------------------------------------------------------------
  [공통] 공유대상 지정
-------------------------------------------------------------------------------*/
/* 공유 리스트 */
div.share_list_wrap { margin-top: 6px; text-align: left; font-size: 13px; }
div.share_list_wrap:after { content: ""; display: block; clear: both; }
div.share_list_wrap dl { float: left; width: 49%; margin: 0 ; padding: 0; }
div.share_list_wrap dl + dl { margin-left: 2%; }
div.share_list_wrap dl dt, div.share_list_wrap dl dd, div.share_list_wrap dl dd > ul, div.share_list_wrap dl dd > ul > li { margin: 0 ; padding: 0; }
div.share_list_wrap dl dt { position: relative; height: 20px; line-height: 20px; padding-left: 20px; background: left center no-repeat; font-weight: 600; }
div.share_list_wrap dl.disabled dd { position: relative; }
div.share_list_wrap dl.disabled dd:before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #f0f0f0; opacity: 0.6; z-index: 1; }
div.share_list_wrap dl.share_list_object dt { background-image: url('../image/common/icon_share_object.png'); }
div.share_list_wrap dl.share_list_except dt { background-image: url('../image/common/icon_share_except.png'); }
div.share_list_wrap dl dt .eb_btn { position: absolute; right: 0; top: 0; min-width: inherit; min-height: inherit; padding: 3px 5px 2px; font-size: 11px; line-height: 15px; }
div.share_list_wrap dl dd { clear: both; margin-top: 5px; }
div.share_list_wrap dl dd > ul { height: 150px; margin: 0; padding: 0; border: 1px solid #d5d5d5; list-style: none; overflow-x: hidden; }
.darkmode div.share_list_wrap dl dd > ul { height: 150px; margin: 0; padding: 0; border: 1px solid #3d3f40; list-style: none; overflow-x: hidden; }
div.share_list_wrap dl dd > ul > li { height: 30px; line-height: 30px; padding: 0 8px; list-style: none; }
div.share_list_wrap dl dd > ul > li.active { background-color: #eff6fd; }
div.share_list_wrap div.share_list_message { clear: both; padding-top: 10px; }
div.share_list_wrap div.share_list_message .dt { line-height: 20px; font-weight: 600; }

div.share_list_wrap .form_set.set_combi .eb_text  { margin-right: 10px; }
div.eb_tbl > table td div.share_list_wrap dl dd > ul { height: 90px; }
div.eb_tbl > table td > div.share_list_wrap:first-child { margin-top: 0; }
.darkmode .share_write_radio {min-width:20px !important; width:20px !important;}
.share_write_labeltxt {padding-top:2px; padding-left:5px; vertical-align: middle; font-size:13px;margin-right:0 !important;}
.share_week_labeltxt {padding: 2px 8px 0 3px; vertical-align: middle; font-size:13px;margin-right:0 !important;}

/* 레이어팝업 내 그리드 조정 */
.inner_popup_wrap div.share_list_wrap dl { float: none; width: auto; }
.inner_popup_wrap div.share_list_wrap dl + dl { margin-left: 0; margin-top: 15px; }
.inner_popup_wrap div.share_list_wrap div.share_list_message { padding-top: 15px; }

/*------------------------------------------------------------------------------
  [공통] 페이지 기능 설명
-------------------------------------------------------------------------------*/
/* 공유 리스트 */
.config_description { margin-bottom: 10px; padding: 20px 24px 18px; background-color: #f4f7fc; border-radius: 5px; }
.darkmode .config_description { margin-bottom: 10px; padding: 20px 24px 18px; background-color: #22211e;border:1px solid #4a4946; border-radius: 5px; }
.config_description dl { overflow: hidden; margin: 0; padding: 0; font-size: 13px; }
.config_description dt { float: left; width: 44px; height: 34px; background: center top no-repeat; background-size: 100%; font-size: 0; text-indent: -9999px; }
.config_description dd { margin-left: 52px; padding-left: 14px; border-left: 1px solid #e1e4e8; }
.config_description dd + dd { padding-top: 5px; }
.config_description dd .eb_text { padding-bottom: 0; font-size: 12px; }
.config_description dl ul { margin: 0; padding: 0; }
.config_description dl ul li { position: relative; padding-top: 3px; padding-left: 10px; list-style: none; }
.config_description dl ul li:before { content: "-"; position: absolute; left: 0; top: 3px; }


/*------------------------------------------------------------------------------
  [공통] 이미지 업로드
-------------------------------------------------------------------------------*/
/* 업로드 팝업창 */
.img_upload_wrap {}
.img_upload_wrap .img_wrap { margin-bottom: 15px; text-align: center; }
.img_upload_wrap .img_wrap img { max-width: 320px; max-height: 240px; }

/* 쓰기 테이블 */
.img_preview_wrap { margin-top: 5px; }
.img_preview_wrap img { max-width: 240px; max-height: 180px; }

/*------------------------------------------------------------------------------
  [공통] Drag & Drop
-------------------------------------------------------------------------------*/
.unselectable {    -moz-user-focus: ignore;    -moz-user-select: -moz-none;    -webkit-user-select: none;    -ms-user-select: none;    user-select: none;} 


/*------------------------------------------------------------------------------
  [공통] 상태 진행 그래프
-------------------------------------------------------------------------------*/
.progress_bar { overflow: hidden; background-color: #f4f7fc; text-align: center; }
.progress_bar span { float: left; padding: 4px 0 2px; background-color: #3b415d; color: #fff; }

/*------------------------------------------------------------------------------
  [공통] 백분율 그래프
-------------------------------------------------------------------------------*/
.percentage_bar { margin-top: 3px; font-size: 12px; }
.percentage_bar > span { display: block; vertical-align: middle; box-sizing: border-box; }
.percentage_bar .text { float: right; width: 5em; margin-top: -3px; padding-left: 8px; text-align: right; }
.percentage_bar .graph { margin-right: 5em; height: 6px; background-color: #f0f0f0; } 
.percentage_bar .graph .bar { display: block; height: 100%; width: 0; background-color: #9da0ae; }


/*------------------------------------------------------------------------------
  [공통] 첨부파일
-------------------------------------------------------------------------------*/
/* 첨부파일 다운로드 (목록 포함) */
.attached_file_wrap {}
.attached_file_wrap .btn_func_wrap .eb_btn { min-width: auto; min-height: auto; padding: 3px 5px 2px; font-size: 11px; line-height: 15px; }

/* 첨부파일 목록 */
.attached_file_box { margin-top: 5px; }
.attached_file_box > .attached_file_box_header { height: 24px; padding: 3px 10px; border:1px solid #d3d6d9; background: #fbfbfb; box-sizing: border-box;}
.attached_file_box > .attached_file_box_header > div { display: inline-block; color: #707070; }
.attached_file_box > .attached_file_box_header > .eb_checkbox { width: 25px; margin: -1px 0 0 0; padding: 0; }
.attached_file_box > .attached_file_box_header > .file_name { width: calc( 80% - 25px); }
.attached_file_box > .attached_file_box_header > .file_volume { width: 15%; text-align: right; padding-right: 2em; box-sizing: border-box; }

.attached_file_box > .attached_file_move { position: absolute; top: -25px; right: 0; }

.attached_file_box > ul.attached_file_box_list { height: 95px; margin: 0; padding: 0; border: 1px solid #d3d6d9; list-style: none; overflow-y: scroll; }
.darkmode .attached_file_box > ul.attached_file_box_list { height: 95px; margin: 0; padding: 0; border: 1px solid #545454; list-style: none; overflow-y: scroll; border-radius:5px;}
.darkmode .attached_file_box > ul::-webkit-scrollbar { width:10px; background:#363839;}
.darkmode .attached_file_box > ul::-webkit-scrollbar-thumb { background:#737475;border:1px solid #2b2c2d;border-radius:5px;}
.darkmode .attached_file_box > ulr::-webkit-scrollbar-thumb:hover { background:#9b9c9c;}

.attached_file_box > .attached_file_box_header + .attached_file_box_list { border-top: none; }
.attached_file_box > ul.attached_file_box_list > li.fileListPlaceHolder { display: table; width: 100%; height: 100%; table-layout: fixed; }
.attached_file_box > ul.attached_file_box_list > li.fileListPlaceHolder .no_data { display: table-cell !important; vertical-align: middle; }
.attached_file_box.file_box_innorix div[id$='_container']{border: 1px solid #d3d6d9;}
.attached_file_box > .attached_file_summary { margin-top: 5px; color: #888; text-align: right; font-size: 11px; }
.attached_file_box > .attached_file_summary .fc_point01:before { content: "|"; margin-right: 5px; padding: 0 3px; color: #a0a0a0; }



/*------------------------------------------------------------------------------
  [팝업] 오류
-------------------------------------------------------------------------------*/
.error_wrap { text-align: center; word-break: keep-all; word-wrap: break-word; }
.error_wrap .error_title { /*display: table; width: 100%; table-layout: fixed;*/ margin-bottom: 15px; }
/* .error_wrap .error_title > div { display: table-cell; } */
.error_wrap .error_title .error_icon { /*width: 56px; vertical-align: top;*/ margin: 0 auto 20px; }
.error_wrap .error_title .error_text { /*padding: 2px 0;*/ font-size: 20px; vertical-align: middle; }

.error_wrap .error_cont { margin-bottom: 20px; font-size: 13px; line-height: 1.5; }


/*------------------------------------------------------------------------------
  [validation] jquery.validationEngine.js
-------------------------------------------------------------------------------*/
.msg_box { z-index: 5000; position: absolute; left: 0; padding: 8px 12px 7px; padding-left: 24px; border: 1px solid #d5d5d5; color: #707070; border-radius: 3px; font-size: 12px; background: url("../image/common/icon_red_warning.png") no-repeat 8px 8px; background-color: #fff; -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); box-sizing: border-box; white-space: nowrap; font-weight: 600; cursor: pointer; }
.msg_box:before { content: ""; display: block; position: absolute; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-right: 3px solid transparent; border-left: 3px solid transparent; }
.msg_box.valid { color: #409069; background-image: url("../image/common/icon_green_warning.png"); }
.msg_box.invalid { color: #eb765f; background-image: url("../image/common/icon_red_warning.png"); }
.msg_box.arrow_t { margin-top: 8px; }
.msg_box.arrow_b { top: -72px; margin-bottom: 8px; }
.msg_box.arrow_l:before { left: 12px; }
.msg_box.arrow_r:before { right: 12px; }
.msg_box.arrow_t:before { top: -5px; border-bottom: 5px solid #b5b5b5; border-top: none; }
.msg_box.arrow_b:before { bottom: -5px; border-top: 5px solid #b5b5b5; border-bottom: none; }
.msg_box.valid.arrow_t:before { border-bottom-color: #409069; }
.msg_box.valid.arrow_b:before { border-top-color: #409069; }
.msg_box.invalid.arrow_t:before { border-bottom-color: #eb765f; }
.msg_box.invalid.arrow_b:before { border-top-color: #eb765f; }

@media print {
	* {
		-webkit-print-color-adjust: exact;
		printer-colors: exact;
		color-adjust: exact;
	}
}


/*------------------------------------------------------------------------------
  [팝업] 판서
-------------------------------------------------------------------------------*/
.popup_container.app_correction { background-color: #f5f5f5; }
.popup_container.app_correction .popup_scroll { overflow-x: auto; overflow-y: scroll !important; }
.app_correction_wrap { position: relative; text-align: center; }
.app_correction_wrap .draft_select_wrap { margin-top: -10px; /*margin-bottom: 20px;*/ }

.app_correction_wrap .canvas_wrap { position: absolute; left: 0; right: 0; top: 0; min-width: 740px; margin: 0 auto; padding-bottom: 30px; padding-right: 20px; }
.app_correction_wrap .canvas_wrap.content_html img { max-width: 740px; }
.app_correction_wrap .draft_select_wrap ~ .canvas_wrap { top: 50px; }

/* 판서용 툴바 */
.app_correction_tool { height: 32px; padding: 6px; border-bottom: 1px solid #e5e5e5; background-color: #fff; z-index: 1; text-align: center; }
.app_correction_tool ul, .app_correction_tool li { list-style: none; margin: 0; padding: 0; }
.app_correction_tool li { position: relative; display: inline-block; margin: 0 10px; vertical-align: middle; }

/* 툴바 메뉴 */
.app_correction_tool .eb_btn { position: relative; width: 32px; height: 32px; padding: 0; background: center / 24px no-repeat; border: none; border-radius: 50%; font-size: 0; cursor: pointer; }
/* .app_correction_tool > ul > li > .eb_btn.active { background-color: #f1f6fd; } */
.app_correction_tool .eb_btn.pen { background: center / 24px no-repeat; border-radius: 50%; }
.app_correction_tool .eb_btn.pen.pn1 { background-image: url('../image/common/btn_correction_pen1.png'); }
.app_correction_tool .eb_btn.pen.pn2 { background-image: url('../image/common/btn_correction_pen2.png'); }
.app_correction_tool .eb_btn.eraser { background-image: url('../image/common/btn_correction_eraser.png'); }
.app_correction_tool .eb_btn.color:after { opacity: 0.8; }
.app_correction_tool .eb_btn.text { background-image: url('../image/common/btn_correction_text.png'); }
.app_correction_tool .eb_btn.undo { background-image: url('../image/common/btn_correction_undo.png'); }
.app_correction_tool .eb_btn.redo { background-image: url('../image/common/btn_correction_redo.png'); }
.app_correction_tool .eb_btn.reset { background-image: url('../image/common/btn_correction_reset.png'); }

.app_correction_tool .select_opiton { display: none; position: absolute; left: -14px; top: 32px; padding: 8px 10px; background-color: #fff; border: 1px solid #c3c6c9; border-radius: 5px; white-space: nowrap; z-index: 3; }
.app_correction_tool .select_opiton .eb_btn { width: 40px; height: 40px; }
.app_correction_tool .eb_btn.active + .select_opiton { display: block; }
.app_correction_tool .select_opiton li { margin: 0 3px; }

/* 펜 */
.app_correction_tool .select_opiton .eb_btn.pen.selected { border: 3px solid #eb765f; }

/* 색상 */
.app_correction_tool .eb_btn.color:after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 50%; }
.app_correction_tool > ul > li > .eb_btn.color { width: 28px; height: 28px; margin: 2px; border: 3px solid #303030; }
.app_correction_tool .select_opiton .eb_btn.color:after { left: 4px; right: 4px; top: 4px; bottom: 4px; }
.app_correction_tool .highlighter .eb_btn.color:after { opacity: 0.35; }
.app_correction_tool .disabled .eb_btn.color { border-color: #e5e5e5; cursor: default; }
.app_correction_tool .disabled .eb_btn.color:after { opacity: 0.1; }
.app_correction_tool .disabled .select_opiton { display: none !important; }
.app_correction_tool .color.selected:after { background: url('../image/common/btn_option_selected.png') center / 100% no-repeat; }
/* .app_correction_tool .eb_btn.color.cl0:after { background-color: #101010; } */ /* 검정 */
.app_correction_tool .eb_btn.color.cl1:after { background-color: #ec3030; } /* 빨강 */
.app_correction_tool .eb_btn.color.cl2:after { background-color: #406fcf; } /* 파랑 */
.app_correction_tool .eb_btn.color.cl3:after { background-color: #ffd906; } /* 노랑 */
.app_correction_tool .eb_btn.color.cl4:after { background-color: #4c9a4c; } /* 초록 */

/* 굵기 */
.app_correction_tool .width { background: none; }
.app_correction_tool .width:after { content: ""; display: inline-block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; margin: auto; background-color: #303030; vertical-align: middle; }
.app_correction_tool .width.selected:after { border: 3px solid #eb765f; }
.app_correction_tool .pen1.width:after { border-radius: 50%; }
.app_correction_tool .pen1.width.wd1:after { width: 6px; height: 6px; }
.app_correction_tool .pen1.width.wd2:after { width: 14px; height: 14px; }
.app_correction_tool .pen1.width.wd3:after { width: 20px; height: 20px; }
.app_correction_tool .pen2.width.wd1:after { width: 6px; height: 10px; }
.app_correction_tool .pen2.width.wd2:after { width: 6px; height: 20px; }
.app_correction_tool .pen2.width.wd3:after { width: 6px; height: 28px; }

/* 지우개 크기 */
.app_correction_tool .size { background: none; }
.app_correction_tool .size:after { content: ""; display: inline-block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; margin: auto; border-radius: 50%; background-color: #d5d5d5; vertical-align: middle; }
.app_correction_tool .size.selected:after { border: 3px solid #eb765f; }
.app_correction_tool .size.sz1:after { width: 14px; height: 14px; }
.app_correction_tool .size.sz2:after { width: 18px; height: 18px; }
.app_correction_tool .size.sz3:after { width: 22px; height: 22px; }

/* 실행취소&다시실행 */
.app_correction_tool .disabled .eb_btn.redo, 
.app_correction_tool .disabled .eb_btn.undo { opacity: 0.2; cursor: default; }

/* 리셋 */
.app_correction_tool .disabled .eb_btn.reset { opacity: 0.2; cursor: default; }

/* 판서용 마우스 포인터 */
.app_correction_wrap .canvas_wrap.cursor_pen { cursor: url('../image/common/icn_action_pen.png') 0 31, auto; }
.app_correction_wrap .canvas_wrap.cursor_highlighter { cursor: url('../image/common/icn_action_highlighter.png') 0 31, auto; }
.app_correction_wrap .canvas_wrap.cursor_eraser { cursor: url('../image/common/icn_action_eraser.png') 3 31, auto; }
.app_correction_wrap .canvas_wrap.cursor_hand_release { cursor: url('../image/common/icn_action_hand_release.png') 16 16, auto; }
.app_correction_wrap .canvas_wrap.cursor_hand_catch { cursor: url('../image/common/icn_action_hand_catch.png') 16 16, auto; }

/* 2023-05-31 / bjj / sysadmin 회사선택기능 */
.filterResultDiv{width:98%;position:absolute;z-index:10;background-color:lightgray;}
.darkmode .filterResultDiv{width:98%;position:absolute;z-index:10;background: linear-gradient(#6D6E6D, #484848);}
.filteredResultElement {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;cursor:default;}
.filteredResultElement:hover {font-weight: bold}
.filteredResultElementSelectedByKey{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;cursor:default;font-weight: bold;border:1px solid darkgray;}
.darkmode .filteredResultElementSelectedByKey{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;cursor:default;font-weight: bold;background-color:#1c7ae9;}

/* 2024-03-27 / bjj / 블로그형 게시판 댓글 더보기 영역 분리 */
.darkmode .moreDiv {
	border:none !important;
}

/* 2024-05-28 / bjj / 원형 무한 로딩 */
.circle_loader {
  border: 1px solid black;
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  width: 20px;
  height: 20px;
  animation-name: loading;
  animation-duration: 700ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin:auto;
}
.darkmode .circle_loader {
  border: 1px solid #FFF;
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  width: 20px;
  height: 20px;
  animation-name: loading;
  animation-duration: 700ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin:auto;
}
@keyframes loading{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon_smile{
	position: absolute;
	top: 10px;
	right: 100px;
	width: 30px;
	height: 30px;
	background: url("../image/img_smile.png") no-repeat center;
	background-size: 16px;
}

.gif_balloon_hidden{
	transform:scale(0);
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transform-origin:75% 100%;
}
.gif_balloon_visible{
	transform:scale(1);
	transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
	transform-origin:75% 100%;
}
.gif_balloon 
{
	position: absolute;
	padding: 10px 10px 10px 10px;
	background: #FFFFFF;
	border-radius: 5px;
	border: #e5e5e5 solid 1px;
	width:400px; 
	height:150px;
	bottom:12px;
	right: 20px;
	z-index: 9997;	
	box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important;
}
.gif_balloon:after 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 22px 16px 0 16px;
	border-color: #ffff transparent;
	width: 0;
	bottom: -21px;
	left: 73%;
	z-index: 1;
}
.gif_balloon:before 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 22px 16px 0 16px;
	border-color: #e5e5e5 transparent;
	width: 0;
	bottom: -23px;
	left: 73%;
	z-index: 0;
}

.darkmode .gif_balloon 
{
	position: absolute;
	padding: 10px 10px 10px 10px;
	background: #3f3f3f;
	border-radius: 5px;
	border: #656564 solid 1px;
	width:400px; 
	height:150px;
	bottom:12px;
	right: 20px;
	z-index: 9997;	
	box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important;
}
.darkmode .gif_balloon:before 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 22px 16px 0 16px;
	border-color: #656564 transparent;
	width: 0;
	bottom: -23px;
	left: 73%;
	z-index: 0;
}
.darkmode .gif_balloon:after 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 22px 16px 0 16px;
	border-color: #3f3f3f transparent;
	width: 0;
	bottom: -21px;
	left: 73%;
	z-index: 1;
}


.gif_balloon_img{
	height:120px;
	cursor: pointer;
	margin-bottom: 5px;
}
.gif_content_item{
	position:relative;
}
.gif_content_item_btn{
	position: absolute;
	display:inline-block;
	background: none;
	border:0;
	cursor: pointer;
}
.gif_content_item_btn:after{
	display: inline-block;
	content: "\00d7"; 
	color:black;
	font-size:15pt;
}
.eb_textarea_gif{
	padding-top:5px;
}

/* 2024-05-30 / bjj / 조직도 그룹사 인물검색 시 회사명 표시 */
.tbl_group td.org_td_companyname{
	height: 8px;
    background-color: #f5f5f7;
    text-align: left !important;
    padding-left: 10px;
    color: #86858a;
    font-size: 0.7rem;
    padding-top: 2px;
    padding-bottom: 2px;
}
.darkmode .tbl_group td.org_td_companyname{
	height: 8px;
    background-color: transparent;
    text-align: left !important;
    padding-left: 10px;
    color: #929299 !important;
    font-size: 0.7rem;
    padding-top: 2px;
    padding-bottom: 2px;
   	border-top: 1px solid #4a4a4d;
    border-bottom: 1px solid #4a4a4d;
}

/* 바로가기 포틀릿 애니메이션 처리 */
.img_hover01 img:hover {
transform: translateY(-5px);
transition: all 250ms cubic-bezier(.3, .7, .4, 1.5);
box-shadow: 0px 5px 2px 0px rgb(0 0 0 / 50%);
border-radius:9px;
}
.img_hover01 img {
transition: transform 500ms cubic-bezier(.3, .7, .4, 1), filter 600ms cubic-bezier(.3, .7, .4, 1.5);
}
.img_hover01 img:active {
 box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
}
/* 2024-11-22 / bjj / input 영역 validation 필요시 */
input.need_check {
	border: 1px #eb765f solid !important;
}
/* 2024-11-25 / bjj / 관리자 페이지 system skip 페이지 */
div.skipWrap{
	display: flex;justify-content: center;align-items: center;
}
.iconConnected{
	width: 25px; height: 25px; 
	background: url("../image/common/icons_checkmark.gif") no-repeat center;
	background-size: cover;
	margin-left:10px;
}
.iconDisconnected{
	width: 25px; height: 25px; 
	background: url("../image/common/icons_unavailable.png") no-repeat center;
	background-size: cover;
	margin-left:10px;
}

/*  2024-11-29 / bjj / 인접부서 사용자 상태 확인 메뉴 */
:root{
  	--wavy-btn-color:#FFF;
}
.wavy-button-wrap{
	position: fixed;
    right: 0;
    top: 8rem;
    width: 50px;
    height: 120px;
    transform: scaleX(0.3);
    transition: transform 0.5s cubic-bezier(.3, .7, .4, 1.5);
    transform-origin: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index:10;
    filter: drop-shadow(-3px 0px 2px rgba(0, 0, 0, 0.45));
}
.wavy-button-wrap:hover{
  	transform:scaleX(0.8);
  	transition: transform 0.5s cubic-bezier(.3, .7, .4, 1.5);
}
.wavy-button-wrap.hover{
  	transform:scaleX(0.8);
  	transition: transform 0.5s ease;
}
.wavy-top{
	position: relative;
}
.wavy-bottom{
  	transform:scaleY(-1);
  	position: relative;
  	top: -1px;
}
/* Safari 7.1+ 사파리에서만 버튼이 우측 정렬이 안되어서... */
_::-webkit-full-page-media, _:future, :root .wavy-top {
	right:-7px;
}
_::-webkit-full-page-media, _:future, :root .wavy-bottom {
	right:-7px;
}
.wavy-fill-color{
  	fill:var(--wavy-btn-color);
}
.darkmode .wavy-fill-color{
  	fill:#262626 !important;
}
.wavy-body{
  	width:50px;
  	height:60px;
  	background-color:var(--wavy-btn-color) !important;
  	border-radius:40px 0 0 40px;
   	cursor:pointer;
   	position:relative;
   	top: -1px;
}
/*닫기/열기버튼이 호버일때 아이콘 추가*/
.wavy-button-wrap.on:hover .wavy-body{
	background: url(../image/common/icons_close_q_100.png) no-repeat center;
	background-size:80% 80%;
	transition:all 0.5s ease;
}
.darkmode .wavy-body{
	background-color:#262626 !important;
}
.userCircle{
	position: fixed;
    top: 10.5rem;
    right: -4rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: var(--wavy-btn-color);
    transition:all 0.5s ease;
    z-index:-1;
}
.darkmode .userCircle{
  	background-color:#262626 !important;
}
.userCircle.show{
	transform:translateX(-7.5rem);
	transition:all 0.5s ease;
	box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
}
.userCircle.show.detail{
	width:200px;
	height:60%;
	border-radius: 10px;
	display: flex;
    justify-content: center;
    align-items: center;
	transition:all 0.5s ease;
}
.usersMessageListWrap{
	width:95%;height:98%;
	overflow: hidden;
    transform:scale(0);
   	overflow-y: hidden;
   	display:block;
}
.usersMessageListWrap.show{
	transform:scale(1);
	overflow-y: auto;
}
/*관리자 페이지용*/
.usersMessageListWrap.admin{
	transform:scale(1);
	overflow-y: auto;
	display: flex;
    flex-wrap: wrap;
}

/* 설정한 사용자가 없을떄 */
.usersMessageListWrap.none{
	display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.usersMessageListWrap.none .noneIcon{
	background: url(../image/common/icon_empty.png) no-repeat center;
	width: 50px;
    height: 50px;
}
.usersMessageListWrap.none .noneIcon::after{
	content: "oh...";
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    color: #FFF;
    font-weight: 700;
    background: linear-gradient(0deg, rgba(247, 13, 25, 1) 0%, rgba(247, 99, 26, 1) 100%);
    justify-content: center;
    align-items: center;
    right: -30px;
    top: -25px;
}
.usersMessageListWrap.none .noneMsg_title{
	font-weight: 700;
	padding-bottom: 1rem;
    padding-top: 1rem;
}
.usersMessageListWrap.none .noneMsg_content{
	padding-bottom: 1rem;
}

.usersMessageListWrap::-webkit-scrollbar {
	width: 4px;
	background-color:var(--wavy-btn-color);
}
.usersMessageListWrap .statusMessage{
	cursor:default;
}

.statusMessageItem{
	height:4rem;
	padding:10px;
	position: relative;
	animation: userMessageFadeIn 0.8s cubic-bezier(.32,2,.55,.27) forwards;
	opacity: 0;
}
@keyframes userMessageFadeIn {
  0% {
    transform:translateX(4rem);
    opacity: 0;
  }
  100% {
    transform:translateX(0);
    opacity: 1;
  }
}

/* 관리자페이지 인 경우 추가*/
.usersMessageListWrap.admin .statusMessageItem{
	flex: 0 0 30%;
}
.statusMessage_Name{
	position:relative;
	top : 40px;
	user-select: none;
}
/* 사용자 메세지 툴팁 */
:root{
  --divMessageTooltipBgColor:#262626;
}
.usersMessageTooltipBtn{
	position: absolute;
    width: 15px;
    height: 15px;
    border: 1px solid black;
    border-radius: 50%;
    top: 0.3rem;
    right: 0.3rem;
    content: "?";
    cursor: pointer;
    z-index: 15;
    font-weight:bold;
    display:flex;
    justify-content: center;
    align-items: center;
    opacity:0;
}
.userCircle.show.detail .usersMessageTooltipBtn{
	transition:all 5s ease;
	opacity:1;
}
.usersMessageTooltipBtn:hover{cursor:help;}
.usersMessageTooltip{
	position: absolute;
    bottom: 2rem;
    right: 0;
    width: 180px;
    height: 50px;
    background-color: #262626;
    border-radius: 5px;
    color: #FFF;
    display:flex;
    align-items:center;
    justify-content: center;
    padding: 0.3rem;
    box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    transition:all 0.5s cubic-bezier(.3, .7, .4, 1.5);
    transform-origin:100% 100%;
    opacity:0;
    transform:scale(0);
}
.usersMessageTooltip::after{
	content: "";
    position: absolute;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 5px solid transparent;
    border-top-color: #262626;
    bottom: -0.5rem;
    right: 0.1rem;
}
.usersMessageTooltipBtn:hover .usersMessageTooltip{
	transform:scale(1);
	opacity:1;
}
.usersMessageTooltip_under{
	position: absolute;
    top: 2.5rem;
    right: 10px;
    width: 180px;
    height: fit-content;
    background-color: #262626;
    border-radius: 5px;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    transition: all 0.5s cubic-bezier(.3, .7, .4, 1.5);
    transform-origin: right top;
    opacity: 0;
    transform: scale(0);
    text-indent:0;
}
.usersMessageTooltip_under::after{
    content: "";
    position: absolute;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 5px solid transparent;
    border-bottom-color: #262626;
    top: -0.5rem;
    right: 0.2rem;
}
div:not(:has(.run)):hover > .usersMessageTooltip_under{ /* run 이 하위에 있다면 동작하지 않도록 */
	transform:scale(1);
	opacity:1;
}
.divMessageTooltip{
	position: absolute;
    width: max-content;
    height: fit-content;
    background-color: var(--divMessageTooltipBgColor);
    border-radius: 5px;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    transition: all 0.5s cubic-bezier(.3, .7, .4, 1.5);
    opacity: 0;
    transform: scale(0);
    text-indent: 0;
    z-index: 100;
}

.divMessageTooltip.under_left{
	top:2.5rem;
	left:-10rem;
	transform-origin:top right;
}
.divMessageTooltip.under_left::after{
	right:1rem;
	content: "";
    position: absolute;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 5px solid transparent;
    border-bottom-color: var(--divMessageTooltipBgColor);
    top: -0.5rem;
}

.divMessageTooltip.under_right{
	top:2.5rem;
	transform-origin:left top;
}
.divMessageTooltip.under_right::after{
	left:1rem;
	content: "";
    position: absolute;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 5px solid transparent;
    border-bottom-color: var(--divMessageTooltipBgColor);
    top: -0.5rem;
}

.divMessageTooltip.upper_right{
	bottom: 2.5rem;
	left:9rem;
	transform-origin:bottom left;
}
.divMessageTooltip.upper_right::after{
    left: 1rem;
    content: "";
    position: absolute;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 5px solid transparent;
    border-top-color: var(--divMessageTooltipBgColor);
    top: 1.5rem;
}
.divMessageTooltip.upper_left{
	bottom: 2.5rem;
	left:-10rem;
	transform-origin:bottom right;
}
.divMessageTooltip.upper_left::after{
    right: 1rem;
    content: "";
    position: absolute;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 5px solid transparent;
    border-top-color: var(--divMessageTooltipBgColor);
    top: 1.5rem;
}

[data-divtooltip="Y"]:hover + .divMessageTooltip,
[data-divtooltip="Y"]:hover .divMessageTooltip
{
	transform:scale(1);
	opacity:1;
}

/* 2024-12-27 / bjj / 클립보드 copy 아이콘 */
copy-icon{
	position:relative;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    color:rgba(48,48,48,0.8);
}
.darkmode copy-icon{color:#FFF;}
copy-icon.copied::after{
    position: absolute;
    content: 'copied!';
    font-weight: bold;
    width: 50px;
    height: 10px;
    bottom: 22px;
    transition:all 0.5s ease;
}
.svg_copytoclip{cursor:pointer;}
polyline.copy_check{opacity:0;}
polyline.copy_check.copied{
  transform-origin:left;
  animation: fadeInClip 1.5s forwards;
}
@keyframes fadeInClip {
  0% {
    clip-path: inset(0 100% 0 0); 
    /* 왼쪽부터 시작 */
    opacity: 0;
  }
  40% {
    opacity: 1; 
    /* 중간에 투명도 서서히 나타남 */
  }
  70% {
    clip-path: inset(0 0 0 0); 
    /* 전체 노출 */
    opacity: 1;
  }
  100% {
    clip-path: inset(0 100% 0 0); 
    /* 다시 가리기 */
    opacity: 0;
  }
}
/* 조직도 상세 정보 표시 전용 */
div.cef_org_div{
	user-select:none;
	display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* 메인화면 새로운 메세지 강조*/
:root{
  --stickIcon_width:15px;
  --stickIcon_Bezier:ease-out;
  --stickIcon_animTime:2s;
}
.stickIcon_wrap{
    position: fixed;
    right: 7px;
    top: 9rem;
    width: 20px;
    transform: scale(0) rotate(45deg);/*기본적으로 안보이는 상태*/
}
.stickIcon_wrap.show{
	transform: scale(1) rotate(45deg);
}
.wavy-button-wrap:hover + .stickIcon_wrap{ 
	/*열기 버튼에 호버하는 경우 아이콘에 대한 css*/
	transition:all 0.5s ease;
	opacity:0;
}
.stickIcon_wrap.msgExpanded{
	right: 15.2rem;
    top: 9.8rem;
}
.stick{
  position:absolute;
  width:var(--stickIcon_width);
  height:4px;
  border-radius:50px;
}
.stick.upper{
  transform:rotate(45deg);
  transform-origin:right;
  animation: stick_upper_anim var(--stickIcon_animTime) var(--stickIcon_Bezier) infinite;
}
.stick.middle{
  top:0.5rem;
  right: 0.5rem;
  transform-origin:right;
  animation: stick_middle_anim var(--stickIcon_animTime) var(--stickIcon_Bezier) infinite;
}
.stick.bottom{
  top:1rem;
  transform:rotate(-45deg);
  transform-origin:right;
  animation: stick_upper_bottom var(--stickIcon_animTime) var(--stickIcon_Bezier) infinite;
}
@keyframes stick_upper_anim{
  0% {transform:rotate(45deg) scaleX(0);}
  25% {transform:rotate(45deg) scaleX(1);}
  50% {transform:rotate(45deg) scaleX(1);}
  75% {transform:rotate(45deg) scaleX(1);}
  100% {transform:rotate(45deg) scaleX(0);}
}
@keyframes stick_middle_anim{
  0% {transform:scaleX(0);}
  25% {transform:scaleX(0);}
  50% {transform:scaleX(1);}
  75% {transform:scaleX(1);}
  100% {transform:scaleX(0);}
}
@keyframes stick_upper_bottom{
  0% {transform:rotate(-45deg) scaleX(0);}
  25% {transform:rotate(-45deg) scaleX(0);}
  50% {transform:rotate(-45deg) scaleX(0);}
  75% {transform:rotate(-45deg) scaleX(1);}
  100% {transform:rotate(-45deg) scaleX(0);}
}

/* 2025-04-10 /bjj / 게시판 제목 선택부터 하도록 ux 조정 */
#articleWriteTable tr{
	transition:all 0.5s ease;
}
#articleWriteTable tr.notAvailable{
	transform:scaleY(0);
}
#articleWriteTable div.bbsSelectFirst{
	content:"";
	position:relative;
	top: 0.6rem;
	opacity:0;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 8px solid #fc6e57; /* 삼각형 색 */
	animation: bounce_to_left 1.5s ease infinite;
}
@keyframes bounce_to_left{
	70% {
	    transform: translateX(0%);
	}
	80% {
	    transform: translateX(100%);
	}
	90% {
	    transform: translateX(0%);
	}
	95% {
	    transform: translateX(40%);
	}
	97% {
	    transform: translateX(0%);
	}
	99% {
	    transform: translateX(8%);
	}
	100% {
	    transform: translateX(0);
	}
}
#articleWriteTable div.bbsSelectFirst.visible{
	opacity:1;
}
#articleWriteTable div.wrapper_div_flex{
	display:flex;
}

/*2025-08-13 / bjj / 포틀릿에서 게시글 미리보기 기능, 의도적인 지연로딩을 위해 2초 기준으로 함*/
@media (min-width: 1300px) {
	div.div_bbs_preview{
		height: 60%;
	    width: 950px;
	    top: 50%;left: 50%;transform: translate(-50%, -50%); /*body 안건드리고 상하좌우 중앙정렬*/
	    position: absolute;
	    background-color: transparent;
	    z-index: 1000;
	    overflow:hidden;
	    display: flex;
        justify-content: center;
        align-items: center;
	}
	@keyframes preview_background{
		100%{background-color:rgba(0,0,0,0.8);}
	}
	iframe.ifr_bbs_preview{
		height: 95%;width: 95%;border-radius:15px;
		transform:scale(0.2);
		opacity:0.5;
		animation:ifr_fadein 1s ease forwards;
		background-color:#000;
		box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
	    -webkit-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
	    -moz-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
	}
	@keyframes ifr_fadein{
		20%{transform:scale(1);opacity:0.5;}
		60%{transform:scale(1);opacity:0.8;background-color:#000;}
		100%{transform:scale(1);opacity:1;background-color:#FFF;}
	}
	div.contentPreviewIcon{
		width: 35px;
        height: 12px;
        border-radius: 5px;
        background-color: #fc6e57;
        display: flex;
        cursor: help;
        font-size: 8px;
        font-weight: bold;
        color: #FFF;
        left: 0;
        top: 50%;
        transform: translate(0, -50%) scaleX(0);
        position: absolute;
        align-items: center;
        justify-content: center;
        transform-origin:left;
	}
	li:hover div.contentPreviewIcon{
		transform: translate(0, -50%) scaleX(1);
		transition:all 0.5s ease;
	}
	li:hover div.contentPreviewIcon::after{
		content:"preview";
	}
	/* 제목영역에 호버하고, 하위에 프리뷰아이콘클래스가 있을 경우, span.link 클래스에 마진을 준다 */
	li:hover:has(div.contentPreviewIcon) span.link{
		margin-left:40px;
		transition:all 0.5s ease;
	}
}

/* 2025-08-22 / bjj / observable 버튼 */
.observable_float_hidden{
	transform: scale(0);
    position: fixed;
}
.observable_float_visible{
	transform:scale(1);
	transform-origin:middle;
	transition:transform 0.5s cubic-bezier(.3, .7, .4, 1.5);
	position:fixed;
	top:2px;
	z-index:100;
}
.observable_float_bbswrite{
	width:45px;height:45px;border-radius:50% !important;
	min-width:45px !important;top:15px;
	background: url(../image/common/icons_write_24.png) no-repeat center;
	
	transition:all 0.5 ease;
	box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
}
.observable_float_design{
	width:45px;height:45px;border-radius:50% !important;
	min-width:45px !important;top:15px;
	background: url(../image/common/icon_design_48.png) no-repeat center;
	background-size:70% 70%;
	transition:all 0.5 ease;
	box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.6);
    opacity:0;
    user-select:none;
}
.dimm_on .observable_float_design{
	opacity:1;
}
.observable_float_bbswrite:hover{
	transition:all 0.5 ease;
	transform:scale(1.1);
}
div.inactive{
	opacity:0.2;
	transition:opacity 0.5s ease;
	pointer-events: none;
}