@charset "utf-8";

/********************************************************************************************************
  스타일 리셋
*********************************************************************************************************/
* { margin: 0; padding: 0; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

html {
    font-family: 'Segoe UI', 'Meiryo', 'Malgun Gothic', '맑은 고딕', '돋움', Dotum, sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

form {
	height: 100%;
}

a {
    text-decoration: none;
    color: inherit;
    border: none;
}

img {
    border: none;
}

input, select, textarea {
	margin: 0;
	padding: 0;
    color: inherit;
	font-family: inherit;
	font-size: inherit;
	vertical-align: middle;
	resize: none;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    background: none;
    border: none;
    color: inherit;
	font-family: inherit;
	font-size: inherit;
    cursor: pointer;
    overflow: visible;
    padding: 0;
    -webkit-appearance: button; /* for input */
    -webkit-user-select: none; /* for button */
       -moz-user-select: none;
        -ms-user-select: none;
}

input::-moz-focus-inner,
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

a, button { cursor: pointer; }
a:hover, a:focus, button:hover, button:focus { -webkit-transition: all 0.25s; transition: all 0.25s; }
img { max-width: 100%; vertical-align: top; }
table { width: 100%; max-width: 100%; }
* { box-sizing: border-box; vertical-align: top; }
::selection { text-shadow: none; background-color: #404040; color: #fff; }


/********************************************************************************************************
  레이아웃
*********************************************************************************************************/

/*------------------------------------------------------------------------------
  색상 코드
-------------------------------------------------------------------------------*/
:root {
--st_tempsave: #F6CC66; /* 임시저장 */
--st_req: #FF654F; /* 요청 */
--st_reqcancel: #B0B0B0; /* 요청취소 */
--st_rcv: #87DB6F; /* 접수 */
--st_ready: #31CED1; /* 대기 */
--st_hold: #83D2E4; /* 보류 */
--st_work: #FF9682; /* 처리 중 */ /*#FF904F*/
--st_delay: #F279BD; /* 지연 */
--st_endhold: #CF469F; /* 반영대기 */
--st_end: #439BE2; /* 처리완료 */
--st_close: #B0B0B0; /* 폐쇄(종료) */

--col_primary: #f78f1e; /* 주 색상 */
--col_secondary: #ea5803; /* 보조 색상 */
--col_warning: #de0909; /* 주의/경고 */
--col_th: #b6966f; /* th 색상 변경 */
--col_dim: #909090; /* 흐림 차리 */
}


/*------------------------------------------------------------------------------
  스크롤바
-------------------------------------------------------------------------------*/
::-webkit-scrollbar { width: 10px; height: 10px; background-color: transparent; } /* 스크롤바 영역 */
::-webkit-scrollbar-thumb { border: 2px solid transparent; background-color: rgba(61, 58, 57, 0.24); border-radius: 10px; background-clip: padding-box; } /* 스크롤바 막대 */
::-webkit-scrollbar-track { background-color: transparent; } /* 스크롤바 뒷 배경 */


/*------------------------------------------------------------------------------
  페이지 공통
-------------------------------------------------------------------------------*/
html { font-size: 14px; line-height: 1.5; letter-spacing: -0.05em; color: #404040; background-color: #F5F5F5; word-wrap: break-word; word-break: keep-all; font-weight: 100; }
html, body { width: 100%; height: 100%;  }
.wrap { overflow: hidden; display: flex; flex: 1; width: 100%; height: 100%; }
.dim { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 1; }

h1, h2, h3. h4, h5, h6 { line-height: 1.25; }
h1 { }
h2 { font-size: 2.2em; letter-spacing: -0.125em; }
h3 { font-size: 1.7em; letter-spacing: -0.08em; }
h4 { font-size: 1.44em; letter-spacing: -0.075em; }

.blind { position: absolute !important; width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; opacity: 0; }
.parens { font-size: 0.85em; font-weight: normal; }
select.center { text-align-last: center; }
.check { width: 18px; height: 18px; margin: 0; margin-top: 2px; vertical-align: middle; }
label.required,
th.required,
.th.required { position: relative; }
label.required:after,
th.required:after,
.th.required:after { position: absolute; content: "*"; top: -0.25em; display: inline-block; left: -0.5em; color: #ff6969; font-weight: bold; }

input:focus,
select:focus,
textarea:focus { outline: none; }
.input,
.select { position: relative; display: inline-block; max-width: 100%; height: 32px; line-height: 32px; background-color: #fff; vertical-align: middle; }
.input input,
.input textarea,
.select select { width: 100%; height: 100%; border: 1px solid rgba(192, 192, 192, 0.6); padding: 0 8px; font-size: 100%; vertical-align: top; -webkit-appearance: none; border-radius: 3px; }
.input textarea { padding: 8px; line-height: 1.3; }
.select select { padding-right: 32px; background: url('../img/icn_select_down.png') center right no-repeat; cursor: pointer; }
.input input:focus,
.select select:focus,
.input textarea:focus { border-color: #404040; outline: none; }
.input input[type="number"]::-webkit-outer-spin-button,
.input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input.full,
.select.full,
.input.textarea { width: 100%; }
.input.textarea { height: auto; }
.input.symbol { margin: 0 2px; background-color: inherit; }
.input.text { height: inherit; padding-top: 5px; padding-bottom: 6px; line-height: 1.5; }
.input.number { width: 4em; }
.input.tel { width: 16em; }
.input.date { width: 120px; color: inherit; font-size: inherit; }
.input.date input { padding-right: 32px; background: url('../img/icn_input_cal.png') center right / 32px no-repeat; cursor:pointer; }
.period_wrap { display: inline-block; }
.manhour_wrap .input { position: relative; }
.manhour_wrap .input input { width: 4em; /*width: 72px; padding-right: 32px;*/ }
/*
.manhour_wrap label { display: block; position: absolute; right: 0; top: 0; width: 32px; text-align: center; }
*/

/* 체크박스 & 라디오 */
.checkbox,
.radio,
.select_check { position: relative; display: inline-block; vertical-align: top; }
.checkbox label,
.radio label,
.select_check label { display: block; cursor: pointer; }
.checkbox .attr,
.radio .attr,
.select_check .attr { position: absolute; left: 0; display: inline-block; cursor: pointer; border: 2px solid rgba(192, 192, 192, 0.6); background: center no-repeat #fff; }
.checkbox .txt,
.radio .txt,
.select_check .txt { display: block; padding: 0 5px; }

/* 체크박스 */
.checkbox label { padding-left: calc( 20px + 4px ); }
.checkbox .attr { width: 18px; height: 18px; top: 0; left: 0; margin: 2px 1px; border-radius: 3px; }
.checkbox input:checked + label .attr { background-image: url('../img/icn_input_check.png'); background-size: 10px; background-color: var(--col_secondary); border-color: transparent; }
.checkbox input:checked + label .text { /*font-weight: bold;*/ }
.checkbox input:disabled + label .attr,
.checkbox input[disabled='disabled'] + label .attr { opacity: 0.5; }

/* 라디오 */
.radio label { padding-left: calc( 20px + 4px ); }
.radio .attr { width: 20px; height: 20px; top: 1px; left: 0; border-radius: 50%; }
.radio input:checked + label .attr { background-color: #fff; border-color: var(--col_secondary); }
.radio input:checked + label .attr:after { display: block; content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: 3px; background-color: var(--col_secondary); overflow: hidden; border-radius: 50%; z-index: 1; }
.radio input:disabled + label .attr,
.radio input[disabled='disabled'] + label .attr { opacity: 0.5; }

/* 선택(체크/라디오) */
.select_check { display: block; }
.select_check .attr { width: 16px; height: 16px; left: inherit; right: 12px; /*margin-top: 1px;*/ border: none; background-color: transparent; }
.select_check input:checked + label .attr { background-image: url('../img/icn_select_check.png'); background-size: 12px; border-color: transparent; }

.checkbox input:focus + label .attr,
.radio input:focus + label .attr { border-color: #404040; }

/* 읽기 전용 */
.readonly * { cursor: default; }
.input.readonly input,
.input.readonly textarea { background-color: #f5f5f5; }
.radio.readonly .txt,
.checkbox.readonly .txt,
.radio.readonly .attr,
.checkbox.readonly .attr { }
.radio.readonly input:checked + label .attr:after,
.checkbox.readonly input:checked + label .attr { background-color: #808080; }

/* 선택 불가 */
.input.disabled input { border-color: rgba(192, 192, 192, 0.15); background-color: #f5f5f5; color: #c0c0c0; }
.radio.disabled .txt,
.checkbox.disabled .txt { color: #c0c0c0; }
.radio.disabled input:checked + label .attr:after,
.checkbox.disabled input:checked + label .attr { background-color: #e0e0e0; }

/* 파일 업로드 */
.form_upload { display: flex; flex-direction: row; gap: 0 3px; align-items: center; }
.form_upload .input { position: relative; flex-grow: 1; }
.form_upload .input input { padding-right: 32px; }
.form_upload .btn { flex-shrink: 0; }
.form_upload .btn_icn.icn_del { position: absolute; right: 0; top: 0; width: 32px; height: 32px; }

.btn { display: inline-block; background-repeat: no-repeat; text-align: center; border-radius: 3px; cursor: pointer; }
.btn:hover { cursor: pointer; }
.btn:active, .btn:focus { /*outline: none;*/ }
.btn > span { display: block; }

.btn.close { background: url('/bizwellhp/resource/img/btn_close_wh.png') center / 24px no-repeat; }

.btn.box { background-color: var(--col_primary); color: #fff; }
.btn.box.submit { color: #fff; background-color: var(--col_secondary); }

.btn.line { height: 32px; padding: 0 10px; border: 1px solid; }
.btn.line.default { border-color: rgba(48, 48, 48, 0.6); }
.btn.line.confirm { color: var(--col_primary); }
.btn.line.delete { color: var(--col_warning); }
.btn.line.reset { color: #c0c0c0; }
.btn.line.cancel { color: var(--col_dim); }

.btn_icn { background: center no-repeat; font-size: 0; border: 1px solid rgba(192, 192, 192, 0.6); }
.btn_icn.icn_menu { width: 40px; height: 40px; background-image: url('../img/icn_menu.png'); background-size: 20px; background-color: #3d3a39; border: none; border-radius: 0; }
.btn_icn.icn_prev { background-image: url('../img/icn_prev.png'); background-size: 6px; }
.btn_icn.icn_next { background-image: url('../img/icn_next.png'); background-size: 6px; }
.btn_icn.icn_window { width: 24px; height: 24px; background-image: url('../img/icn_window.png'); border: none; }
.btn_icn.icn_del { width: 18px; height: 18px; background-size: 8px; border: none; }
.btn_icn.icn_del.bk { background-image: url('../img/icn_del_bk.png'); }
.btn_icn.icn_del.wh { background-image: url('../img/icn_del_wh.png'); }

.btn_icn.icn_favorite { position: relative; border: none; }
.btn_icn.icn_favorite label { display: block; width: 24px; height: 24px; background: url('../img/icn_favorite_off.png') center no-repeat; cursor: pointer; }
.btn_icn.icn_favorite input:checked + label { background-image: url('../img/icn_favorite_on.png'); }

.btn_icn.icn_lnb_config { background-image: url('../img/icn_lnb_config.png'); }
.btn_icn.icn_lnb_state { background-image: url('../img/icn_lnb_state.png'); }
.btn_icn.icn_lnb_admin { background-image: url('../img/icn_lnb_admin.png'); }
.btn_icn.icn_lnb_search { background-image: url('../img/icn_lnb_search.png'); }

.btn_icn.icn_attach_down { width: 24px; height: 24px; background-image: url('../img/icn_attach_down.png'); }

.btn_icn.icn_board_save { background-image: url('../img/icn_board_save.png'); }
.btn_icn.icn_board_down { background-image: url('../img/icn_board_down.png'); }
.btn_icn.icn_board_filter { background-image: url('../img/icn_board_filter.png'); }
.btn_icn.icn_board_print { background-image: url('../img/icn_board_print.png'); }
.btn_icn.icn_board_refresh { background-image: url('../img/icn_board_refresh.png'); }

.btn_icn.icn_pagi_first { background-image: url('../img/icn_pagi_first.png'); }
.btn_icn.icn_pagi_prev { background-image: url('../img/icn_pagi_prev.png'); }
.btn_icn.icn_pagi_prev_10 { background-image: url('../img/icn_pagi_prev_10.png'); }
.btn_icn.icn_pagi_next { background-image: url('../img/icn_pagi_next.png'); }
.btn_icn.icn_pagi_next_10 { background-image: url('../img/icn_pagi_next_10.png'); }
.btn_icn.icn_pagi_last { background-image: url('../img/icn_pagi_last.png'); }

.btn_icn.icn_expand { background-image: url('../img/icn_expand.png'); }


.reply_badge { display: inline-block; position: relative; padding: 0 2px; color: var(--col_primary); font-weight: bold; }

.date { color: var(--col_dim); font-size: 12px; letter-spacing: -0.02em; }

.scroll_wrap { display: flex; flex: 1; width: 100%; }

.no_data { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 120px; }
.no_data p { width: 100%; margin: 20px 0; text-align: center; }

#header { position: relative; display: flex; flex-direction: column; flex-shrink: 0; width: 220px; color: #fff; background-color: var(--col_primary); transition: margin ease-out 0.25s 0.1s; z-index: 1; }
#header.closed { margin-left: -220px; }
#header .icn_menu { position: absolute; left: 100%; opacity: 0.6; }
#header .logo { display: flex; flex-shrink: 0; height: 100px; background-color: #3d3a39; text-align: center; align-items: center; justify-content: center; }

#header .scroll_wrap { flex-direction: column; overflow-y: auto; height: 100%; }
#header .gnb { }
#header .gnb ul { list-style: none; }
#header .gnb li { overflow: hidden; position: relative; }
#header .gnb li.active > .btn { font-weight: bold; }
#header .gnb li.has_depth:after { content: ""; display: block; position: absolute; right: 0; top: 0; width: 48px; height: 48px; background: url('../img/icn_menu_expand.png') center / 12px no-repeat; transition: all ease-in 0.25s 0.05s; cursor: pointer; }
#header .gnb li.has_depth > .btn { padding-right: 48px; }
#header .gnb .btn { width: 100%; padding-left: 20px; text-align: left; border-radius: 0; }
#header .gnb li ul { overflow: hidden; height: 0; transition: height ease-out 0.25s 0.05s; }
#header .gnb li.active.has_depth:after { transform: rotate(180deg); }
#header .gnb li.active ul { height: auto; background-color: #f37913; }
#header .gnb > ul > li { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
#header .gnb > ul > li > .btn { height: 48px; font-size: 15px; }
#header .gnb > ul > li.active > .btn { background-color: var(--col_secondary); }
#header .gnb li > ul > li > .btn { height: 44px; font-size: 14px; }
#header .gnb li > ul > li.active > .btn { position: relative; padding-left: 30px; }
#header .gnb li > ul > li.active > .btn:before { content: ""; display: block; width: 44px; height: 44px; position: absolute; top: 0; left: 0; background: url('../img/icn_menu_expand.png') center / 8px no-repeat; transform: rotate(-90deg); }

#header .my_profile { margin-top: auto; padding: 20px 20px 24px; text-align: center; }
#header .my_profile .company { font-size: 12px; opacity: 0.75; }
#header .my_profile .greeting { margin-bottom: 8px; }
#header .my_profile .greeting:after { content: ""; display: block; width: 16px; height: 1px; margin: 8px auto 12px; background-color: #fff; opacity: 0.5; }
#header .my_profile .name {}
#header .my_profile .name strong { font-size: 17px; font-weight: bold; vertical-align: baseline; }
#header .lnb { margin-top: 12px; }
#header .lnb ul { display: flex; align-items: center; justify-content: center; gap: 0 15px; width: 100%; list-style: none; margin: 0; padding: 0; }
#header .lnb .btn { width: 24px; height: 24px; border: none; }
#header .logout { margin-top: 20px; }
#header .logout .btn { width: 100%; HEIGHT: 36px; color: #fff; }

.my_profile .portrait { overflow: hidden; width: 80px; height: 80px; margin: 0 auto 8px; border: 2px solid #fff; border-radius: 50%; }
.my_profile .portrait img { width: 100%; height: 100%; }

#container { flex: 1; overflow: auto; height: 100%; }

.contents { display: flex; flex-direction: column; width: 100%; min-width: 1440px; /*min-width: 1320px; max-width: 1680px;*/ min-height: 100%; margin: 0 auto; padding: 20px 50px 0; }
.contents_title { margin-bottom: 4px; font-size: 26px; font-weight: bold; letter-spacing: -0.08em; }

.section { margin-bottom: 40px; }
.section_title { margin-bottom: 4px; font-size: 21px; font-weight: bold; letter-spacing: -0.08em; }
.section_title .reply_badge { /*top: 6px; height: 20px; margin-left: 2px; line-height: 19px; font-size: 16px;*/ }

/*팝업 section */
.section_pop {}


.portle_title { display: flex; align-items center; width: 100%; margin-bottom: 4px; font-size: 19px; font-weight: bold; }
.portle_title .btn.more { position: relative; top: 2px; height: 28px; margin-left: auto; padding-right: 12px; color: #808080; font-size: 12px; background: url('../img/icn_tree_sub.png') right center / 8px no-repeat; }

.box_wrap { border: 1px solid #e0e0e0; background-color: #fff; }
.box_head { padding: 10px 40px 0; }
.box_body { padding: 30px 40px; line-height: 1.75; }

.box_wrap .box_head:last-child { padding-bottom: 30px; }
.box_wrap .box_title { padding: 12px 20px; color: #fff; background-color: #3d3a39/*rgba(225, 220, 215, 0.6)*/; font-weight: bold; }
.box_wrap .box_title + .box_head { padding-top: 8px; }
.box_wrap .box_title + table { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.box_wrap + .box_wrap { margin-top: 20px; }

/* CS 상태 */
.csr_state {}
span.csr_state { display: flex; align-items: center; justify-content: center; flex-grow: 1; height: 28px; padding: 0 4px; background-color: #808080; font-size: 13px; color: #fff; border-radius: 999px; white-space: nowrap; }
span.csr_state.st_tempsave { background-color: var(--st_tempsave); } /* 임시저장 */
span.csr_state.st_req { background-color: var(--st_req); } /* 요청 */
span.csr_state.st_reqcancel { background-color: var(--st_reqcancel); } /* 요청취소 */
span.csr_state.st_rcv { background-color: var(--st_rcv); } /* 접수 */
span.csr_state.st_ready { background-color: var(--st_ready); } /* 대기 */
span.csr_state.st_hold { background-color: var(--st_hold); } /* 보류 */
span.csr_state.st_work { background-color: var(--st_work); } /* 처리 중 */
span.csr_state.st_delay { background-color: var(--st_delay); } /* 지연 */
span.csr_state.st_endhold { background-color: var(--st_endhold); } /* 반영대기 */
span.csr_state.st_end { background-color: var(--st_end); } /* 처리완료 */
span.csr_state.st_close { background-color: var(--st_close); } /* 폐쇄(종료) */

/* 긴급 */
.urgency {  }
em.urgency { display: inline-block; margin-top: 1px; margin-right: 4px; padding: 0 6px; font-size: 12px; color: #fff; background-color: var(--col_warning); border-radius: 999px; font-weight: bold; font-style: normal; line-height: 21px; }

.portlet .list .st_req .a { border-left-color: var(--st_req); }
.portlet .list .st_delay .a { border-left-color: var(--st_delay); }
.portlet .list .st_rcv .a,
.portlet .list .st_ready .a,
.portlet .list .st_hold .a,
.portlet .list .st_work .a,
.portlet .list .st_endhold .a { border-left-color: var(--st_rcv); }

 /* 접수 지연 */
.portlet .list .st_req.delayed .a { border-left-color: var(--col_warning); background-color: #fff9f9; }
.portlet .list .st_req.delayed .title { color: var(--col_warning); font-weight: bold; }

.note_wrap { margin-top: 8px; font-size: 12px; color: #808080; }
.note_wrap p { position: relative; margin-top: 8px; padding-left: 0.75em; }
.note_wrap p:before { content: "*"; position: absolute; top: 1px; left: 0; }


.grid_wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(25%, auto)); grid-auto-columns: 1fr; }
.grid_wrap .grid_item { padding-right: 30px; }
.grid_wrap .grid_item.span_2 { grid-column: span 2; }
.grid_wrap .grid_item.full { grid-column: 1 / -1; padding-right: 0; }
.grid_wrap .grid_item.br { grid-column-start: 1; }

.empty_wrap { align-items: center; justify-content: center; color: #808080; font-size: 12px; }


/********************************************************************************************************
  탭 메뉴
*********************************************************************************************************/
.tab_wrap { }
.tab_wrap .tab_menu { position: relative; margin-bottom: -1px; }
.tab_wrap .tab_menu ul { display: flex; flex: 1; list-style: none; }
.tab_wrap .tab_menu li { margin-right: 4px; border: 1px solid #e0e0e0; background-color: #edebe9; color: var(--col_dim); border-radius: 3px 3px 0 0; }
.tab_wrap .tab_menu li.active { border-bottom-color: #fff; color: var(--col_secondary); border-top-color: var(--col_primary); background-color: #fff; }
.tab_wrap .tab_menu li .btn { min-width: 150px; height: 48px; padding: 0 18px; font-size: 16px; }
.tab_wrap .tab_menu li.active .btn { font-weight: bold; }


/********************************************************************************************************
  페이지네이션
*********************************************************************************************************/
.pagination_wrap { display: flex; width: 100%; margin-top: 16px; }
.pagination_wrap .pagination { display: flex; gap: 0 4px; margin: 0 auto; }
.pagination_wrap ul { display: flex; align-items: center; justify-content: center; gap: 0 4px; margin: 0 24px; list-style: none; }
.pagination_wrap .btn { height: 32px; }
.pagination_wrap span.btn { line-height: 32px; }
.pagination_wrap button.btn { min-width: 32px; padding: 0 8px; border: 1px solid rgba(192, 192, 192, 0.6); background-color: #fff; }
.pagination_wrap .active .btn { font-weight: bold; }
.pagination_wrap .active .btn,
/* [CSR] 2024-04-17 / DEV_CSR_131 / by 박상순 / 페이징 비활성화 시 흐리게 처리 */
/* .pagination_wrap button.btn:hover { border-color: #404040; } */
.pagination_wrap button.btn:hover:not(:disabled) { border-color: #404040; }
.pagination_wrap .util { display: flex; align-items: center; width: 180px; }
.pagination_wrap .pagination ~ .util { justify-content: right; }
.pagination_wrap .summary { flex-shrink: 0; }
.pagination_wrap .summary span + span:before { content: ""; display: inline-block; position: relative; top: 1px; height: 12px; margin: 0 8px; border-left: 1px solid rgba(192, 192, 192, 0.6); }
.pagination_wrap .summary .location { padding-right: 2px; }



.popup_wrap .pagination_wrap .select { height: 24px; }
.popup_wrap .pagination_wrap .select select { padding-right: 24px; background-size: 24px; }
.popup_wrap .pagination_wrap .pagination { gap: 0 3px; }
.popup_wrap .pagination_wrap ul { gap: 0 3px; margin: 0 8px; }
.popup_wrap .pagination_wrap .btn { height: 24px; }
.popup_wrap .pagination_wrap span.btn { line-height: 24px; }
.popup_wrap .pagination_wrap button.btn { min-width: 24px; }
.popup_wrap .pagination_wrap ul .btn { font-size: 12px; }
.popup_wrap .pagination_wrap .util { width: 72px; font-size: 12px; }

/* [CSR] 2024-04-17 / DEV_CSR_131 / by 박상순 / 페이징 비활성화 시 흐리게 처리 */
.pagination_wrap .btn:disabled,
.pagination_wrap .btn[disabled="disabled"] { opacity: 0.5; cursor: default; }

/********************************************************************************************************
  팝업
*********************************************************************************************************/
.popup_wrap {}
.popup_wrap .popup_head { position: relative; flex-shrink: 0; padding: 15px 15px 0; padding-right: 40px; }
.popup_wrap .popup_head .title { font-weight: bold; font-size: 15px; }
.popup_wrap .popup_head .title.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popup_wrap .popup_head .icn_del { position: absolute; right: 0; top: 0; width: 40px; height: 40px; margin: auto; }
.popup_wrap .popup_top_btn { position: relative; flex-shrink: 0; padding: 10px 15px 0; padding-right: 40px; }
.popup_wrap .popup_body { overflow-y: auto; display: flex; flex-direction: column; flex-grow: 1; word-break: break-all; word-wrap: break-word; }
.popup_wrap .popup_body .no_data { min-height: 100%; }
.popup_wrap .popup_body .no_data p { margin: 60px 0; }
.popup_wrap .popup_body .list_wrap { overflow: visible; }
.popup_wrap .popup_body .list_wrap ~ .pagination_wrap { padding: 0 15px; }
.popup_wrap .popup_foot { padding: 0 15px 15px; }
.popup_wrap .popup_foot .btn_wrap { display: flex; align-items: center; justify-content: center; width: 100%; gap: 0 5px; }
.popup_wrap .popup_foot .btn_wrap .btn { min-width: 64px; min-height: 32px; padding: 0 8px; font-size: 13px; }
.popup_wrap .popup_foot .btn_wrap .btn_group + .btn_group { margin-left: 8px; }

.popup_content { overflow: hidden; }
.popup_content body { overflow: auto; padding: 20px; background-color: #fff; }

.body_wrap .body_title { margin-top: 16px; margin-bottom: 4px; font-weight: bold; font-size: 12px; }
.body_wrap .body_title:first-child { margin-top: 0; }

.body_wrap .head_list .head_item { display: flex; align-items: flex-start; gap: 0 8px; width: 100%; min-height: 24px; margin-top: 8px; line-height: 1.3; }
.body_wrap .head_list .head_item .th { flex-shrink: 0; margin-bottom: 0; padding-top: 2px; color: var(--col_th); line-height: inherit; }
.body_wrap .head_list .head_item .td { flex-grow: 1; min-height: unset; }

.body_wrap .editor_wrap { margin-top: 15px; }

.popup_wrap .table_wrap th { height: 28px; font-size: 12px; }
.popup_wrap .table_wrap td { height: 36px; padding: 0 4px; font-size: 13px; }

.popup_wrap .input label { position: absolute; top: 0; right: 0; min-width: 32px; color: #808080; text-align: center; }

/*------------------------------------------------------------------------------
  레이어 팝업
-------------------------------------------------------------------------------*/
.popup_layer { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 1000; -webkit-transform: translate3d(0,0,0); }
.popup_layer:after { content: ""; display: block; position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; z-index: -1; }
.popup_layer.dim:after { opacity: 0.3; }

.popup_layer .popup_wrap { overflow: hidden; display: flex; flex-direction: column; flex-shrink: 0; max-height: 100%; border: 1px solid #c0c0c0; border-radius: 5px; box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.1); background-color: #fff; }

.popup_layer .popup_wrap { width: 360px; min-height: 180px; }

.popup_layer .popup_wrap .popup_head { height: 44px; }
.popup_layer .popup_wrap .popup_body { padding: 15px; }
.popup_layer .popup_wrap .popup_body:last-child { padding-bottom: 20px; }
.popup_layer .popup_wrap .popup_head + .popup_body { padding-top: 0; }

.popup_layer .popup_wrap .popup_body .input textarea { height: 80px; }
.popup_layer .popup_wrap .popup_body .head_item { margin-top: 12px; }
.popup_layer .popup_wrap .popup_body .head_item:first-child { margin-top: 8px; }

.popup_layer .popup_wrap .popup_body .grid_wrap { grid-template-columns: repeat(auto-fit, minmax(50%, auto)); }

.popup_layer .popup_wrap ul { list-style: none; }
.popup_layer .popup_wrap ul.list { padding: 8px 0; }
.popup_layer .popup_wrap ul.list li + li { margin-top: 12px; }
.popup_layer .popup_wrap ul.list .info { display: flex; width: 100%; align-items: center; }
.popup_layer .popup_wrap ul.list .info .name { color: var(--col_dim); font-size: 12px; }
.popup_layer .popup_wrap ul.list .info .date { margin-left: auto; }

.popup_layer .popup_wrap ul.border { padding: 0; }
.popup_layer .popup_wrap ul.border li { padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.popup_layer .popup_wrap ul.border li + li { margin-top: 0; }
.popup_layer .popup_wrap ul.border li:last-child { border-bottom: none; }

/* 사이트 점검 내역 체크 */
.popup_layer .popup_wrap.check_site { width: 480px; }
.popup_layer .popup_wrap.rcv_site { width: 480px; }

/* 의견 내역 */
.popup_layer .popup_wrap.list_comment { width: 400px; }
.popup_layer .popup_wrap.list_comment .popup_body { max-height: 240px; }
.popup_layer .popup_wrap.list_comment .name { margin-bottom: 2px; }

/* 작업공수 등록 */
.popup_layer .popup_wrap.write_manhour { width: 240px; height: 180px; }
.popup_layer .popup_wrap.write_manhour .input input { padding-right: 40px; }
.popup_layer .popup_wrap.write_manhour .input label { width: 48px; }

/* 작업공수 목록 */
.popup_layer .popup_wrap.list_manhour { width: 480px; height: 320px; }
.list_manhour .table_wrap col.date { width: 10em; }
.list_manhour .table_wrap col.manday { width: 6em; text-align: right; }

/* 작업자 변경 */
.popup_layer .popup_wrap.change_pic { }

/* 상태 변경 */
.popup_layer .popup_wrap.change_state {}

/* 비밀번호 변경 */
.popup_layer .popup_wrap.change_pswd { width: 400px; }


/* [CSR] 2024-01-16 / DEV_CSR_012 / by 서보경 / 팝업디자인 변경 및 업그레이드 - 사이트 관리 */
.popup_layer .popup_wrap.site_info { width: 750px; }

/* [CSR] 2024-04-18 / DEV_CSR_134 / by 박상순 / 사이트 수정 시 버전올림 / 버전유지 선택 개발 */
.popup_layer .popup_wrap.version_check { width: 300px; min-height: 160px; }
.popup_layer .popup_wrap.version_check .head_item { margin-left: 35px; }


/*------------------------------------------------------------------------------
  윈도우 팝업
-------------------------------------------------------------------------------*/
.popup_window { display: flex; flex-direction: column; height: 100%; }
.popup_window .popup_wrap { overflow: hidden; display: flex; flex-direction: column; flex-grow: 1; background-color: #fff; }
.popup_window .popup_wrap .popup_head { height: 48px; padding-top: 13px; background-color: #3d3a39; color: #fff; }
.popup_window .popup_wrap .popup_head .icn_del { bottom: 0; }

.popup_window .popup_wrap .popup_body .body_wrap { padding: 15px; }
.popup_window .popup_wrap .popup_body .body_wrap > .head_item:first-child { margin-top: 0; }

.popup_window .popup_wrap .head_list { display: grid; grid-template-columns: repeat(auto-fit, minmax(50%, auto)); margin-top: -8px; }
.popup_window .popup_wrap .head_list .full { grid-column: 1 / -1; }

.popup_window .popup_wrap .list_wrap .row:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.popup_window .popup_wrap .list_wrap.selectable .row:not(.thead) .a:hover { background-color: #fffce8; }

.popup_window .section.pop .section_title { margin-bottom: 8px; font-size: 25px; font-weight: bold; }

/* CSR 조회 */
.popup_window .popup_wrap.csr_view {}
.popup_window .popup_wrap.csr_view section { margin-bottom: 24px; }
.popup_window .popup_wrap.csr_view section:last-child {  margin-bottom: 0; }
.popup_window .popup_wrap.csr_view section .section_title { font-size: 19px; }
.popup_window .popup_wrap.csr_view .board_head,
.popup_window .popup_wrap.csr_view .board_body,
.popup_window .popup_wrap.csr_view .comment_wrap .comment_list .comment_item:not(.reply),
.popup_window .popup_wrap.csr_view .histpry_wrap ul { padding-left: 20px; padding-right: 20px; }
.popup_window .popup_wrap.csr_view .board_head { padding-top: 8px; }
.popup_window .popup_wrap.csr_view .comment_wrap .comment_list .comment_item.reply { padding-right: 20px; }
.popup_window .popup_wrap.csr_view .histpry_wrap ul { padding-top: 16px; padding-bottom: 4px; }
.popup_window .popup_wrap.csr_view .histpry_wrap ul:before { margin-left: -10px; }

/* 공지사항 */
.popup_window .popup_wrap.notice { }
.popup_window .popup_wrap.notice .notice_title { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-size: 18px; font-weight: bold; }

/* 사용자 정보 */
.popup_window .popup_wrap.user_info {  }
.popup_window .popup_wrap.user_info .my_profile .portrait { border-color: #f5f5f5; }
.popup_window .popup_wrap.user_info .head_list .th { flex-basis: 64px; }
.popup_window .popup_wrap.user_info .table_wrap { margin-top: 16px; }
.popup_window .popup_wrap.user_info .table_wrap th { background-color: #f7f7f7; color: inherit; }

/* 보고서 발송이력 */
.popup_window .popup_wrap.report_history {}
.popup_window .popup_wrap.report_history .text_wrap { margin-top: 12px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.08); }

/* 우편번호 찾기 */
.popup_window .popup_wrap.search_zipcode {}
.popup_window .popup_wrap.search_zipcode .head_item .td { display: flex; gap: 0 3px; align-items: center; }
.popup_window .popup_wrap.search_zipcode .head_item .td .input { flex-grow: 1; }
.popup_window .popup_wrap.search_zipcode .table_wrap { margin-top: 24px; }
.popup_window .popup_wrap.search_zipcode .table_wrap td { text-align: left; }

/* 사용자 선택 */
.popup_window .popup_wrap.select_user {}
.popup_window .popup_wrap.select_user .list_wrap .cell:nth-child(1) { flex-grow: 1; flex-shrink: 1; }
.popup_window .popup_wrap.select_user .list_wrap .cell:nth-child(2) { width: 10em; }
.popup_window .popup_wrap.select_user .list_wrap .cell:nth-child(3) { width: 10em; }
.popup_window .popup_wrap.select_user .list_wrap .cell:nth-child(4) { width: 6em; }
.popup_window .popup_wrap.select_user .list_wrap .cell:nth-child(5) { width: 8em; }

/* 거래처 선택 */
.popup_window .popup_wrap.select_customer {}
.popup_window .popup_wrap.select_customer .popup_body { padding-bottom: 20px; }
.popup_window .popup_wrap.select_customer .head_item .td { display: flex; align-items: center; gap: 0 3px; }
.popup_window .popup_wrap.select_customer .head_item .td .input { flex-grow: 1; }
.popup_window .popup_wrap.select_customer .list_wrap .cell:nth-child(1) { flex-grow: 1; flex-shrink: 1; }
.popup_window .popup_wrap.select_customer .list_wrap .cell:nth-child(2) { width: 7em; }
.popup_window .popup_wrap.select_customer .list_wrap .cell:nth-child(3) { width: 5em; }
.popup_window .popup_wrap.select_customer .list_wrap .cell:nth-child(4) { width: 7em; }
.popup_window .popup_wrap.select_customer .list_wrap .cell:nth-child(5) { width: 8em; }
.popup_window .popup_wrap.select_customer .list_wrap .cell:nth-child(6) { width: 6em; }

/* 중복 체크 (아이디/사번) */
.popup_window .popup_wrap.check_duplicate {}
.popup_window .popup_wrap.check_duplicate .head_item .td { display: flex; align-items: center; gap: 0 3px; }
.popup_window .popup_wrap.check_duplicate .head_item .td .input { flex-grow: 1; }

/* 공지 등록 */
.popup_window .popup_wrap.write_notice {}
.popup_window .popup_wrap.write_notice .popup_info { display: flex; flex-direction: row; gap: 0 16px; }
.popup_window .popup_wrap.write_notice .popup_info .popup_size { display: flex; flex-direction: row; flex-grow: 1; gap: 0 8px; }
.popup_window .popup_wrap.write_notice .popup_info .popup_size .input { position: relative; width: 100%; }
.popup_window .popup_wrap.write_notice .popup_info .popup_size .input input { padding-right: 24px; }
.popup_window .popup_wrap.write_notice .popup_info .popup_period { flex-shrink: 0; }
.popup_window .popup_wrap.write_notice .target_wrap { display: none; overflow: hidden; margin-bottom: 4px; padding-left: 24px; }
.popup_window .popup_wrap.write_notice .target_wrap.expand { display: block; }

/* 사이트 히스토리 */
.popup_window .popup_wrap.site_history {}
.popup_window .popup_wrap.site_history .body_wrap { display: flex; flex-direction: column; height: 100%; }
.popup_window .popup_wrap.site_history .btn_wrap { margin-bottom: 4px; }

/* 사이트 관리 */
.popup_wrap.site_view { padding: 3px 15px 15px; }
.popup_wrap.site_view .grid_wrap { grid-template-columns: repeat(auto-fit, minmax(50%, auto)); }
.popup_wrap.site_view .cont_wrap { margin-top: 15px; }

.popup_window .popup_wrap.site_view { padding: 0; }
.popup_window .popup_wrap.site_view .body_wrap { padding-top: 8px; }
.popup_window .popup_wrap.site_view .grid_wrap { grid-template-columns: repeat(auto-fit, minmax(25%, auto)); }
.popup_window .popup_wrap.site_view .cont_wrap { }

.popup_window .popup_wrap.select_template {}
.popup_wrap.select_template .popup_body .body_wrap { flex-grow: 1; }
.popup_wrap.select_template .head_item { margin-top: 0; }
.popup_wrap.select_template .iframe_wrap { gap: 0 16px; }
.popup_wrap.select_template .form_list { padding: 15px; }
.popup_wrap.select_template .form_list .select { width: 100%; }

/* 조직도 */
.popup_window .popup_wrap.org_chart {}
.popup_window .popup_wrap.org_chart .popup_body { overflow: hidden; }

.popup_window .popup_wrap.org_chart .search_box { padding: 0 15px; }
.popup_window .popup_wrap.org_chart .search_box .head_item { flex-grow: 1; }
.popup_window .popup_wrap.org_chart .search_box .head_item .td { display: flex; align-items: center; gap: 0 3px; }
.popup_window .popup_wrap.org_chart .search_box .head_item .td .input { flex-grow: 1; }

.popup_wrap.org_chart .iframe_wrap { overflow: hidden; padding: 4px 15px 12px; }
.popup_wrap.org_chart .iframe_wrap .right_wrap { padding-top: 35px; }
.popup_wrap.org_chart.left_cont { display: flex; flex-direction: column; height: 100%; }
.popup_wrap.org_chart .cont_tree { overflow-y: auto; }
.popup_wrap.org_chart .cont_tree.has_list { flex-grow: 0; height: 200px; margin-bottom: 12px; }

html.iframe_content { background-color: transparent; }
.popup_wrap .iframe_wrap { display: flex; flex-direction: row; gap: 0 8px; width: 100%; height: 100%; }
.popup_wrap .iframe_wrap > div { overflow: hidden; display: flex; flex-direction: column; flex-grow: 1; max-width: 50%; }
.popup_wrap .iframe_wrap .left_wrap { }
.popup_wrap .iframe_wrap .right_wrap { }
.popup_wrap .iframe_wrap .btn_wrap { justify-content: center; flex-shrink: 0; flex-grow: 0; gap: 8px 0; }
.popup_wrap .iframe_wrap > .btn_wrap .btn.line { height: 28px; font-size: 12px; }
.popup_wrap .iframe_content { overflow: hidden; flex-grow: 1; border: 1px solid #e0e0e0; }

.popup_wrap .tab_wrap .tab_menu li .btn { min-width: 80px; height: 36px; font-size: 14px; }
.popup_wrap .tree_wrap .tree_body { padding: 8px 8px 4px; }
.popup_wrap .tree_wrap .tree_body li { font-size: 13px; }
.popup_wrap .tree_wrap .tree_body li .a { padding-left: 20px; background-size: 16px; background-position-y: 2px; }
.popup_wrap .tree_wrap .tree_body li .attr { margin: -1px 0 0 2px; }
.popup_wrap .tree_wrap .tree_body li .radio .attr { top: -1px; }

.popup_wrap .table_wrap table { table-layout: fixed; }
.popup_wrap .table_wrap .has_chkbox .chkbox { width: 36px; }
.popup_wrap .table_wrap .has_chkbox th:first-child,
.popup_wrap .table_wrap .has_chkbox td:first-child { padding: 0; padding-left: 8px; text-align: center; vertical-align: top; }
.popup_wrap .table_wrap .has_chkbox .radio .attr { margin: 8px 0; }
.popup_wrap .table_wrap .has_chkbox .checkbox .attr { margin: 9px 0; }
.popup_wrap .table_wrap .has_chkbox th .checkbox .attr { margin: 5px 0; }

.popup_wrap .table_wrap .header_fix thead { position:sticky; top: 0; z-index: 1; }
.popup_wrap .table_wrap .header_fix thead th { border: none; }

.popup_wrap .table_wrap .org_list td img { margin: 4px 0 0 2px; }


/********************************************************************************************************
  테이블
*********************************************************************************************************/
.table_wrap {}
.table_wrap table { margin: 0; padding: 0; border: none; border-collapse: collapse; border-spacing: 0; }
.table_wrap th,
.table_wrap td { padding: 4px 8px; vertical-align: middle; }
.table_wrap th { height: 40px; background-color: #585757; color: #fff; font-weight: bold; }
.table_wrap td { height: 48px; }
.table_wrap th .a {cursor: pointer; }

.table_wrap tbody tr:nth-child(even) { background-color: #f7f7f7; }
.table_wrap tfoot { border-top: 1px solid rgba(0, 0, 0, 0.05); }
.table_wrap tfoot tr { background-color: #fff0cc; font-weight: bold; }

.table_wrap.scope_col thead th { padding-left: 0; padding-right: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-width: 0 1px 1px 0; }
.table_wrap.scope_col td { text-align: center; }

.table_wrap .no_data { min-height: 240px; }

.popup_wrap .table_wrap { /*min-height: 100%;*/ }

.popup_layer .table_wrap th,
.popup_layer .table_wrap td { height: 40px; padding: 5px 8px; font-size: 13px; }
.popup_layer .table_wrap th { height: 36px; }

.popup_wrap .table_wrap .btn.line { height: 28px; font-size: 12px; background-color: #fff; }
.popup_wrap .table_wrap .no_data { min-height: 120px; }


/* 테이블 양식 */
.table_board { }
.table_board table { margin: 0; padding: 0; border: none; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
.table_board colgroup .th { }
.table_board colgroup .td { }
.table_board th,
.table_board td { height: 40px; padding: 4px 0; /*border-bottom: 1px solid rgba(0, 0, 0, 0.08);*/ vertical-align: top; }
.table_board th { padding-top: 10px; padding-right: 20px; color: var(--col_dim); text-align: left; font-size: 12px; }
.table_board th.required:after { margin-top: 10px; }
.table_board td.full { padding-top: 10px; }

.table_board td .input.text { height: auto; }
.table_board .attach_foot .btn { font-size: 12px; }
.table_board .editor_wrap { margin-top: 24px; }


/********************************************************************************************************
  게시판
*********************************************************************************************************/
/* 게시판 상단 기능 */
.board_function_wrap { display: flex; align-items: center; gap: 0 4px; width: 100%; margin-bottom: 4px; }
.board_function_wrap .btn { width: 30px; height: 30px; background-color: #fff; background-size: 14px; }

/*------------------------------------------------------------------------------
  파일 첨부
-------------------------------------------------------------------------------*/
.attach_wrap .attach_head { display: flex; width: 100%; margin-bottom: 4px; align-items: center; font-size: 12px; }
.attach_wrap .attach_head .th { margin-bottom: 0; margin-right: auto; font-size: 12px; font-weight: bold; }
.attach_wrap .attach_head .count:after { content: ""; display: inline-block; position: relative; top: 2px; width: 1px; height: 1em; margin: 0 8px 0 10px; background-color: rgba(192, 192, 192, 0.6); }
.attach_wrap .attach_head .capacity { color: var(--col_primary); }
.attach_wrap .attach_head .btn { height: 28px; }
.attach_wrap .attach_body { border: 1px solid rgba(192, 192, 192, 0.6)/*#e0e0e0*/; border-radius: 3px; }
.attach_wrap .attach_body ul { display: flex; flex-direction: column; overflow-y: auto; height: 108px; }
.attach_wrap .attach_body li { display: flex; flex-shrink: 0; width: 100%; height: 36px; padding: 6px 0 5px; padding-left: 10px; border-bottom: 1px solid #efefef; align-items: center; }
.attach_wrap .attach_body li:last-child { border: none; }
.attach_wrap .attach_body li.empty_wrap { height: 100%; }
.attach_wrap .attach_body li .checkbox { overflow: hidden; margin-right: 1em; }
.attach_wrap .attach_body li .checkbox label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.attach_wrap .attach_body li .checkbox label .text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 20px; padding-right: 2px; background: url('../img/icn_attach_file.png') 4px 4px / 12px no-repeat; }
.attach_wrap .attach_body li .capacity { flex-shrink: 0; margin-left: auto; margin-right: 8px; color: var(--col_dim); font-size: 12px; }
.attach_wrap .attach_body li .btn { flex-shrink: 0; margin: 0 3px; border: none; }

.attach_wrap .attach_foot { margin-top: 4px; }
.attach_wrap .attach_foot .btn { height: 28px; }

.head_item.attach_wrap:first-child { margin-top: 0; }

.popup_wrap.file_attach { overflow: hidden; }
.popup_wrap.file_attach .head_item:first-child { margin-top: 0; }

/*------------------------------------------------------------------------------
  대상자 목록
-------------------------------------------------------------------------------*/
.target_list { /*margin-bottom: 8px; padding: 12px 10px 5px; border: 1px solid rgba(192, 192, 192, 0.6); border-radius: 3px;*/ }
.target_list ul { list-style: none; }
.target_list li { overflow: hidden; display: inline-block; max-width: 100%; margin-right: 3px; margin-bottom: 4px; padding: 0 12px; background-color: #f0f0f0; line-height: 32px; border-radius: 3px; text-overflow: ellipsis; white-space: nowrap; }
.target_list li.btn:hover { background-color: #e0e0e0; }
.target_list .icn_del { width: 32px; height: 32px; margin: 0 -12px 0 -6px; }
/*
.popup_wrap .target_list li { padding: 0 8px; line-height: 28px; }
.popup_wrap .target_list .icn_del { width: 28px; height: 28px; margin-right: -10px; }
*/


.head_item { margin-top: 12px; }
.head_item .th { display: block; margin-bottom: 4px; font-size: 12px; line-height: 1; color: var(--col_dim); font-weight: bold; }
.head_item .td { min-height: 32px; }

.head_item .btn.line { height: 28px; font-size: 12px; }
.head_item .td .btn.line { vertical-align: middle; }
.head_item .td .input + .btn { margin-left: 3px; }

.head_item.title { }

.head_item.alert .td .input input,
.head_item.alert .td .input textarea,
.head_item.alert .td .select select { border-color: var(--col_warning); box-shadow: 0 3px 5px rgba(223, 8, 8, 0.08); }

.group_wrap { display: flex; flex-wrap: wrap; width: 100%; }
.group_wrap.cell { flex-direction: row; }
.group_wrap.cell .item_group { flex: 1; }
.group_wrap.row { flex-direction: column; }
.group_wrap .item_wrap { display: flex; }
.group_wrap .head_item { margin-right: 20px; }
.item_list { list-style: none; /*margin-bottom: -4px;*/ }
.item_list li { display: inline-block; margin-right: 16px; /*margin-bottom: 4px;*/ }
.head_item .td .radio,
.head_item .td .checkbox { margin: 5px 0 6px; }

.head_item .td .input,
.head_item .td .select,
.head_item .td .input ~ .btn,
.head_item .td .select ~ .btn { margin-bottom: 4px; }
.head_item .td .select + .checkbox { margin-left: 5px; }

.item_list.col > li { display: block; margin-right: 0; }

.item_list.grid_wrap { grid-template-columns: repeat(auto-fit, minmax(33%, auto)); }
.item_list.grid_wrap.col_3 { grid-template-columns: repeat(auto-fit, minmax(33%, auto)); }
.item_list.grid_wrap.col_4 { grid-template-columns: repeat(auto-fit, minmax(25%, auto)); }
.item_list.grid_wrap.col_5 { grid-template-columns: repeat(auto-fit, minmax(20%, auto)); }
.item_list.grid_wrap.col_6 { grid-template-columns: repeat(auto-fit, minmax(16%, auto)); }

.item_list .target_list li { display: inline-block; margin-right: 3px; }


/*------------------------------------------------------------------------------
  목록
-------------------------------------------------------------------------------*/
/* 공통 */
.list_wrap { overflow: hidden; }
.list_wrap ul { list-style: none; }
.list_wrap .row { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.list_wrap .row:last-child { border-bottom: none; }
.list_wrap .row .a { display: flex; flex: 1; width: 100%; height: 48px;/*60px*/ align-items: center; }
.list_wrap .row.thead { color: #fff; background-color: #585757; font-weight: bold; }
.list_wrap .row.thead .a { height: 40px; }
.list_wrap .row.thead .btn_icn.icn_sort { margin: 2px 0 2px -3px; }
.list_wrap .cell { margin-right: 12px; flex-shrink: 0; }
.list_wrap .cell.title { flex-grow: 1; }
.list_wrap .cell.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list_wrap .cell.ellipsis.title { display: flex; flex-shrink: 1; align-items: center; }
.list_wrap .cell.time.ymd { width: 6em; }
.list_wrap .cell.time.ymdhms { width: 9em; }
.list_wrap .cell.title .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list_wrap .cell.title .reply_badge { flex-shrink: 0; /* height: 20px; margin-top: -1px; line-height: 19px; */ margin-top: 1px; margin-left: 4px; font-size: 13px; }
.list_wrap .cell:first-child { margin-left: 18px; }
.list_wrap .cell a:hover { color: var(--col_secondary); }
.list_wrap .cell .access.accept {  }
.list_wrap .cell .access.reject { color: var(--col_warning); }

/* 검색 박스 */
.search_wrap { margin-bottom: 24px; }
.search_wrap.has_expand { margin-bottom: 40px; }
.search_box { position: relative; padding: 0 30px; }
.search_wrap .search_box { display: flex; align-items: center; }
.search_wrap .search_box > .grid_wrap { flex: 1; grid-template-columns: repeat(auto-fit, minmax(320px, auto)); margin: 8px 0 16px; }

.search_wrap .table_board { margin-right: 30px; padding: 12px 0; }
.search_wrap .table_board colgroup .th { width: 80px; }
.search_wrap .table_board colgroup .td { width: calc((100% / 3) - 80px); }
.search_wrap .table_board .item_list { margin-top: 4px; }


.search_wrap .btn_wrap { width: 80px; flex-shrink: 0; }
.search_wrap .btn_wrap .btn { width: 100%; margin: 2px 0; }

.search_wrap .function_wrap { }
.search_wrap .function_wrap .icn_expand { position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; margin: 0 -1px -32px 0; background-color: #fff; transition: all ease-in 0.25s 0.05s; }
.icn_expand.active {transform: rotate(180deg);}

/* 중요도 */
.list_wrap .cell .priority { display: block; width: 16px; height: 16px; margin-top: 1px; background: left center no-repeat; }
.list_wrap .cell .priority.lv1 { background-image: url('../img/icn_priority_lv1.png'); }
.list_wrap .cell .priority.lv2 { background-image: url('../img/icn_priority_lv2.png'); }
.list_wrap .cell .priority.lv3 { background-image: url('../img/icn_priority_lv3.png'); }

.group_wrap .item_wrap.schedule_wrap { flex-shrink: 0; margin-left: auto; }
.group_wrap .item_wrap.schedule_wrap .head_item { width: 120px; }
.group_wrap .item_wrap.schedule_wrap .head_item:last-child { margin-right: 0; }



/********************************************************************************************************
 로그인
*********************************************************************************************************/
#login { overflow-y: auto; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 20px 30px 30px; align-items: center; justify-content: safe center; background: url('../img/bg_login.jpg') center no-repeat; background-size: cover; }
.login_wrap { width: 402px; margin: auto; padding: 90px 40px 60px; border: 1px solid #e0e0e0; background-color: #fff; }
.login_wrap .header { position: relative; }
.login_wrap .header .logo { position: absolute; left: -20px; top: -70px; margin-top: 4px; }
.login_wrap .header .title { margin-bottom: 32px; }
.login_wrap .content .input { width: 100%; }
.login_wrap .tab_wrap .tab_menu ul { border-bottom: 1px solid #e0e0e0; }
.login_wrap .tab_wrap .tab_menu li { flex-grow: 1; margin-bottom: -1px; }
.login_wrap .tab_wrap .tab_menu li:last-child { margin-right: 0; }
.login_wrap .tab_wrap .tab_menu li .btn { width: 100%; min-width: inherit; height: 44px; font-size: 14px; }
.login_wrap .tab_wrap .tab_content { margin: 24px 0 24px; }
.login_wrap .tab_wrap .tab_content .option_wrap { margin-top: 8px; }
.login_wrap .btn.submit { width: 100%; height: 48px; }



/********************************************************************************************************
  메인
*********************************************************************************************************/
/* 포틀릿 공통 */
.portlet_wrap { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 40px; }
.portlet_wrap.cell { flex-direction: column; }
.portlet_wrap.row { flex-direction: row; }
.portlet_wrap .portlet { overflow: hidden; display: flex; flex-direction: column; flex: 1; }

/* 요약정보 */
.portlet .csr_summary { display: flex; flex-flow: row wrap; width: 100%; align-items: center; margin-bottom: 24px; padding-bottom: 8px; border-bottom: 1px solid #e0e0e0; }
.portlet .csr_summary .date { display: flex; align-items: center; gap: 0 16px; margin-top: 2px; color: #404040; }
.portlet .csr_summary .date span { margin-top: -1px; font-size: 28px; /*font-weight: bold;*/ }
.portlet .csr_summary .btn_icn { width: 24px; height: 24px; background-color: #fff; }

.portlet .csr_summary ul { display: flex; flex-grow: 1; margin-right: auto; list-style: none; }
.portlet .csr_summary li { display: flex; align-items: center; /*flex-basis: 100px;*/ gap: 0 8px; margin-right: 60px; }
.portlet .csr_summary .count { margin-top: -6px; font-size: 44px; font-weight: bold; font-style: normal; }
.portlet .csr_summary .csr_state { flex-grow: 0; width: 60px; font-size: 14px; }

.portlet .csr_summary li.st_req .frame { border-color: var(--st_req); } /* 요청 */
.portlet .csr_summary li.st_delay .frame { border-color: var(--st_delay); } /* 지연 */
.portlet .csr_summary li.st_rcv .frame { border-color: var(--st_rcv); } /* 접수 */

.portlet .list {  }
.portlet .list ul { border: 1px solid #e0e0e0; background-color: #fff; }
.portlet .list li { border-bottom: 1px solid rgba(0, 0, 0, 0.08); list-style: none; }
.portlet .list li:last-child { border-bottom: 0; }
.portlet .list li > a { display: flex; flex-wrap: wrap; padding: 11px 16px 9px; border-left: 8px solid; }
.portlet .list li:first-child > a { padding-top: 13px; }
.portlet .list li:last-child > a { padding-bottom: 11px; }

.portlet .list .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; margin-bottom: 1px; align-self: stretch; -webkit-transition: all 0.25s; transition: all 0.25s; }
.portlet .list .name { color: var(--col_dim); font-size: 12px; }
.portlet .list .date { margin-left: auto; }

.portlet .list li > a:hover,
.portlet .list li > a:focus { /*background-color: rgba(0, 0, 0, 0.025);*/ }
.portlet .list li > a:hover .title,
.portlet .list li > a:focus .title { color: var(--col_secondary); }

.portlet .list .no_data { min-height: 72px; }

/********************************************************************************************************
  CSR 조회
*********************************************************************************************************/

/*------------------------------------------------------------------------------
  CSR 조회
-------------------------------------------------------------------------------*/
.csr_list .list_wrap .cell.chk { width: 20px; } /* 선택(체크박스) */
.csr_list .list_wrap .cell.impt { width: 24px; } /* 즐겨찾기 */
.csr_list .list_wrap .cell.reqid { width: 6em; } /* 등록 ID */
.csr_list .list_wrap .cell.softwaregubun { width: 4em; } /* 버전 */
.csr_list .list_wrap .cell.deptname { width: 11em; } /* 사이트 */
.csr_list .list_wrap .cell.requser { width: 5em; } /* 요청자 */
.csr_list .list_wrap .cell.systemid { width: 5em; } /* 시스템 */
.csr_list .list_wrap .cell.reqtype { width: 6em; } /* 요청 구분 */
.csr_list .list_wrap .cell.status { width: 5em; } /* 상태 */
.csr_list .list_wrap .cell.workerusername { width: 5em; } /* 작업자 */
.csr_list .list_wrap .cell.icnbtn { width: 24px; } /* 아이콘 버튼 (새 창 열기) */
.csr_list .list_wrap .cell:last-child { margin-left: auto; }

.list_wrap .row.st_req { color: #101010; font-weight: bold; }
.list_wrap .row.st_delay { background-color: #fff6fa; color: var(--st_delay); }
.list_wrap .row.st_close { color: #c0c0c0; }
.list_wrap .row.st_close .cell.title .reply_badge { color: #c0c0c0; }
.list_wrap .row.selected { background-color: #fffce8; }
.list_wrap .row.dimmed { color: var(--col_dim); }
.list_wrap .row.disabled { color: #c0c0c0; }

.list_wrap .cell .csr_state { margin: 0 4px 0 -4px; }
/*
.list_wrap .row .a { border-left: 10px solid transparent; }
.list_wrap .row.st_tempsave .a { border-left-color: var(--st_tempsave); }
.list_wrap .row.st_req .a { border-left-color: var(--st_req); }
.list_wrap .row.st_reqcancel .a { border-left-color: var(--st_reqcancel); }
.list_wrap .row.st_rcv .a { border-left-color: var(--st_rcv); }
.list_wrap .row.st_ready .a { border-left-color: var(--st_ready); }
.list_wrap .row.st_hold .a { border-left-color: var(--st_hold); }
.list_wrap .row.st_work .a { border-left-color: var(--st_work); }
.list_wrap .row.st_delay .a { border-left-color: var(--st_delay); }
.list_wrap .row.st_endhold .a { border-left-color: var(--st_endhold); }
.list_wrap .row.st_end .a { border-left-color: var(--st_end); }
.list_wrap .row.st_close .a { border-left-color: var(--st_close); }
*/

/* [CSR] 2024-04-09 / DEV_CSR_098 / by 박상순 / 요청구분 변경 기능 추가 */
#reqTypeSpan .select { padding: 0px 12px 0px 10px;}

/********************************************************************************************************
  CSR 등록
*********************************************************************************************************/







/********************************************************************************************************
 보고서
*********************************************************************************************************/
.report_wrap { flex-grow: 1; }
.report_wrap .box_head { }
.report_wrap .box_body {}
.report_wrap .box_body.editor { padding: 5px 10px; line-height: 1.75; }

/*------------------------------------------------------------------------------
  CSR 보고서
-------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------
  보고서 검색
-------------------------------------------------------------------------------*/
.list_wrap.report_search .cell:nth-child(1) { width: 20px; }
.list_wrap.report_search .cell:nth-child(2) { width: 6em; }
.list_wrap.report_search .cell:nth-child(3) { width: 10em; }
.list_wrap.report_search .cell:nth-child(7) { width: calc(4em + 20px); }
.list_wrap.report_search .cell:nth-child(8) { width: calc(2em + 20px); margin-right: 30px; }
.list_wrap.report_search .cell.button { margin-left: auto; }

.btn_wrap.function_list{padding : 5px 5px;}


/*------------------------------------------------------------------------------
  보고서 발송 이력
-------------------------------------------------------------------------------*/
.list_wrap.report_history .cell:nth-child(1) { width: 6em; }
.list_wrap.report_history .cell:nth-child(2) { width: 10em; }
.list_wrap.report_history .cell:nth-child(5) { width: 5em; }
.list_wrap.report_history .send_state { color: var(--col_dim); }
.list_wrap.report_history .send_state.fail { color: var(--col_warning); }


/*------------------------------------------------------------------------------
  템플릿 관리
-------------------------------------------------------------------------------*/
.report_templete .grid_wrap { grid-template-columns: repeat(auto-fit, minmax(50%, auto)); }
.report_templete .box_body .editor_wrap .input { height: 400px; }



/*------------------------------------------------------------------------------
  사이트별 보고서 관리
-------------------------------------------------------------------------------*/
.report_site .list_report li { display: grid; grid-template-columns: minmax(180px, auto) repeat(2, 1fr); gap: 0 8px; }
.report_site .list_templete li { display: grid; grid-template-columns: minmax(180px, auto) 1fr; gap: 0 8px; }



/********************************************************************************************************
 사이트
*********************************************************************************************************/
.site_wrap { display: flex; flex-direction: column; flex-grow: 1; }
.site_wrap .box_head { }
.site_wrap .box_head > .grid_wrap { grid-template-columns: repeat(auto-fit, minmax(350px, auto)); }

.site_wrap .box_body { }

.site_wrap .explorer_cont { margin-bottom: -40px; }
.explorer_cont .box_btn_wrap.floating { margin-top: 0; }

.manager_list { list-style: none; }
.manager_list li { margin-bottom: 4px; }
.manager_list em { display: inline-block; margin: -1px 3px 0 0; padding: 3px 5px 2px; font-size: 11px; border-radius: 2em; background-color: #f0f0f0; font-style: normal; vertical-align: middle; }
.manager_list .main em { background-color: #ffdcb5; }
.manager_list .sub em { background-color: #e1dcd7; }

.box_body .editor_wrap .input { width: 100%; height: 240px; }


/*------------------------------------------------------------------------------
  사이트 관리
-------------------------------------------------------------------------------*/
.site_view { }
.site_view .head_item .th { color: var(--col_th); }
.site_view .head_item .td { min-height: inherit; }
.site_view .head_item div.input { height: auto; line-height: 1.5; }
.site_view .head_item div.input.text { padding-top: 0; padding-bottom: 0; }

.site_write .item_list.system_using li .input { width: 100%; }
/* [CSR] 2024-03-26 / DEV_CSR_062 / by 박상순 / 특이사항란 textarea 크기 변경 시 다른 영역 침범 오류 수정 */
/* .site_write .input.textarea.remark { height: 80px; } */
.site_write .input.textarea.remark { height: 100%; }
.site_write .input.textarea.remark textarea { height: 360px; }


/*------------------------------------------------------------------------------
  사용자 관리
-------------------------------------------------------------------------------*/
/* 사용자 목록 */
.list_wrap.site_user_manage .cell:nth-child(1) { width: 20px; }
.list_wrap.site_user_manage .cell:nth-child(3) { width: 30%; }
.list_wrap.site_user_manage .cell:nth-child(4) { width: 10em; }
.list_wrap.site_user_manage .cell:nth-child(5) { width: 8em; }

/* 사용자 추가/수정 */
.site_user_add { padding: 12px 30px 24px; }
.site_user_add .grid_wrap { grid-template-columns: repeat(auto-fit, minmax(400px, auto));}


/*------------------------------------------------------------------------------
  업무구분 관리
-------------------------------------------------------------------------------*/
.search_box.site_work_manage { padding-top: 12px; padding-bottom: 24px; }
.search_box.site_work_manage .item_list.grid_wrap { grid-template-columns: repeat(auto-fit, minmax(10em, auto)); }

.list_wrap.user_concurrent .cell .select { width: 100%; }
.list_wrap.user_concurrent .cell:nth-child(1) { width: 20px; }
.list_wrap.user_concurrent .cell:nth-child(3),
.list_wrap.user_concurrent .cell:nth-child(4),
.list_wrap.user_concurrent .cell:nth-child(5),
.list_wrap.user_concurrent .cell:nth-child(6) { width: 12%; }

/*------------------------------------------------------------------------------
  자동 체크 현황
  사이트 자동체크현황 체크박스 미사용으로 수정 - 박성덕
-------------------------------------------------------------------------------*/
.list_wrap.site_check .cell:nth-child(2) { width: 10em; }
.list_wrap.site_check .cell:nth-child(4) { width: 30%; }
.list_wrap.site_check .cell:nth-child(5) { width: 8em; }
.list_wrap.site_check .cell:nth-child(6) { width: 6em; }



/********************************************************************************************************
  통계
*********************************************************************************************************/

/*------------------------------------------------------------------------------
  CSR 통계
-------------------------------------------------------------------------------*/
/* 작업자별 */
.table_wrap .by_worker {}
.table_wrap .by_worker col.grade { width: 10em; }
.table_wrap .by_worker col.manday { width: 10%; }

/* 사이트별 */
.table_wrap .by_site {}
.table_wrap .by_site col.count { width: 7em; }
.table_wrap .by_site col.manday { width: 5em; }

/* 업무구분별 */
.table_wrap .by_task {}
.table_wrap .by_task col.count { width: 7em; }
.table_wrap .by_task col.manday { width: 5em; }

/* 요청구분별 */
.table_wrap .by_request {}
.table_wrap .by_request col.count { width: 7em; }
.table_wrap .by_request col.manday { width: 5em; }

/* 견적개발별 */

/*------------------------------------------------------------------------------
  CSR 요청 현황
-------------------------------------------------------------------------------*/
.stat_request .list_wrap .cell:nth-child(1) { width: 20px; }
.stat_request .list_wrap .cell:nth-child(2) { width: 8em; }
.stat_request .list_wrap .cell:nth-child(3) { width: 5em; }
.stat_request .list_wrap .cell:nth-child(4) { width: 5em; }
.stat_request .list_wrap .cell:nth-child(5) { width: 5em; }
.stat_request .list_wrap .cell:nth-child(9) { width: 4em; }
.stat_request .list_wrap .cell:nth-child(10) { width: 5em; }
.stat_request .list_wrap .cell:nth-child(11) { width: 5em; }
.stat_request .list_wrap .cell:last-child { width: 24px; margin-left: auto; }

/*------------------------------------------------------------------------------
  암호화 해제
-------------------------------------------------------------------------------*/
.code_wrap { display: flex; flex: 1; align-items: stretch; width: 100%; }
.code_wrap .box_wrap { flex: 1; }
.code_wrap .input { display: flex; flex: 1; height: 100%; min-height: 480px; }
.code_wrap .input textarea { width: 100%; height: 100%; border: none; resize: none; }
.code_wrap .option_wrap { display: flex; flex-direction: column; flex-shrink: 0; width: 130px; margin: 0 16px; margin-bottom: 20px; }
.code_wrap .option_wrap .option_list { flex-grow: 1; }
.code_wrap .option_wrap .box_btn_wrap { flex-direction: column; flex-grow: 0; margin-top: auto; padding-top: 80px; background: url('../img/img_code_encrypt.png') top center no-repeat; }
.code_wrap .option_wrap .box_btn_wrap .btn { margin-bottom: 8px; }

/*------------------------------------------------------------------------------
  로그 분석기
-------------------------------------------------------------------------------*/
.popup_wrap.log_check {}
.popup_wrap.log_check .body_wrap { display: flex; flex-direction: column; flex-grow: 1; }
.popup_wrap.log_check .body_wrap .input.full { flex-grow: 1; }

.popup_wrap.log_check .table_wrap .by_time col { width: 8.3%; }
.popup_wrap.log_check .table_wrap .by_time tbody th { background-color: #f7f7f7; color: inherit; }
.popup_wrap.log_check .table_wrap .by_time tbody tr:nth-child(even) { background-color: transparent; }


/********************************************************************************************************
 라이센스
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  라이센스 관리
-------------------------------------------------------------------------------*/
/* 사이트 라이센스 관리 */
.license_manage .list_wrap .cell:nth-child(1) { width: 3em; }
.license_manage .list_wrap .cell:nth-child(3) { width: 5em; }
.license_manage .list_wrap .cell:nth-child(4) { width: 9em; }
.license_manage .list_wrap .cell:nth-child(5),
.license_manage .list_wrap .cell:nth-child(6),
.license_manage .list_wrap .cell:nth-child(7),
.license_manage .list_wrap .cell:nth-child(8) { width: 9em; }

/* 사이트 사용자 관리 */
/* .license_user .list_wrap .cell:nth-child(1) { width: 20px; } */ /* 라이센스 운영 사이트 접속 리스트 체크박스 제거 */
.license_user .list_wrap .cell:nth-child(2) { width: 8em; }
.license_user .list_wrap .cell:nth-child(3),
.license_user .list_wrap .cell:nth-child(4),
.license_user .list_wrap .cell:nth-child(6) { width: 6em; }
.license_user .list_wrap .cell:nth-child(5) { width: 7em; }
.license_user .list_wrap .cell:nth-child(7) { width: 8em; }
.license_user .list_wrap .cell:nth-child(8) { width: 6em; }


/*------------------------------------------------------------------------------
 사이트 접속 관리
-------------------------------------------------------------------------------*/


/********************************************************************************************************
 공지사항
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  팝업 관리
-------------------------------------------------------------------------------*/
/* 팝업 목록 */
.notice_popup .section { flex-grow: 1; }



/* 공지 팝업 관리 */
.noti .list_wrap .cell:nth-child(1) { width: 20px; }
.noti .list_wrap .cell:nth-child(3) { width: 13em; }
.noti .list_wrap .cell:nth-child(4),
.noti .list_wrap .cell:nth-child(5),
.noti .list_wrap .cell:nth-child(6) { width: 13em; }

.noti .search_wrap .search_box > .grid_wrap { flex: 1; grid-template-columns: repeat(auto-fit, minmax(150px, auto)); margin: 0 0 30px; }

.notiview .eb_checkbox input {
	margin: 5px;
	padding: 0;
    color: inherit;
	font-family: inherit;
	font-size: inherit;
	vertical-align: middle;
}


/********************************************************************************************************
 환경설정
*********************************************************************************************************/
.config_wrap {}
.config_personal .grid_wrap { /*grid-template-columns: repeat(auto-fit, minmax(33%, auto));*/ }
.config_wrap .existing { width: 50%; }



/*------------------------------------------------------------------------------
  읽기
-------------------------------------------------------------------------------*/
/* 공통 */
.board_wrap.view { }
.board_wrap.view .board_head {  }
.board_wrap.view .board_body { padding: 20px 30px; }
.box_btn_wrap { overflow: hidden; display: flex; flex-grow: 1; margin-top: 12px; }
.box_btn_wrap .btn_group_wrap { display: flex; margin: 0 auto; }
.box_btn_wrap .btn_group_wrap.l { margin-left: inherit; }
.box_btn_wrap .btn_group_wrap.r { margin-right: inherit; }
.box_btn_wrap .btn_group { display: flex; margin: 0 10px; }
.box_btn_wrap .btn_group:first-child { margin-left: 0; }
.box_btn_wrap .btn_group:last-child { margin-right: 0; }
.box_btn_wrap .btn { min-width: 80px; height: 40px; padding: 0 16px; font-size: 15px; background-color: #fff; }
.box_btn_wrap .btn_group_wrap .btn + .btn { margin-left: 5px; }

.box_btn_wrap.floating { position: sticky; bottom: 0; left: 0; right: 0; flex-grow: unset; padding: 12px 0 24px; /*border-top: 1px solid #e0e0e0;*/ background-color: #f5f5f5; background: linear-gradient(180deg, transparent, #f5f5f5 25%); z-index: 1; }
.section + .box_btn_wrap.floating { margin-top: -40px; }
/*.box_btn_wrap.floating.after_tree { padding-left: 300px; }*/


.board_wrap.view .head_item .th { /*color: var(--col_dim); font-weight: normal;*/ }
.board_wrap.view .board_head { padding-bottom: 24px; border-bottom: 1px solid #e0e0e0; }
.board_wrap.view .board_head .csr_type { display: flex; gap: 0 8px; width: 100%; margin-bottom: 8px; align-items: center; }
.board_wrap.view .board_head .csr_type .req_no { margin-right: 4px; font-size: 19px; }
.board_wrap.view .board_head .csr_type .req_type { display: inline-block; padding: 0 12px 0 10px; background-color: #ffedd9; border-radius: 999px; line-height: 29px; }
.board_wrap.view .board_head .csr_type .req_no:before
/*.board_wrap.view .board_head .csr_type .req_type:before*/ { content: "#"; margin-right: 2px; }
.board_wrap.view .board_head .csr_type .req_site { margin-left: auto; margin-top: 1px; color: var(--col_secondary); }

.board_wrap.view .board_head .title { position: relative; display: flex; gap: 0 8px; width: 100%; align-items: baseline; margin-top: 0; padding-left: 24px; }
.board_wrap.view .board_head .title .text { font-size: 21px; font-weight: bold; line-height: 1.3; }
.board_wrap.view .board_head .title .icn_favorite { position: absolute; top: 1px; left: -4px; }
.board_wrap.view .board_head .title .name { flex-shrink: 0; margin-left: auto; }
.board_wrap.view .board_head .title .date { flex-shrink: 0; }

.board_wrap.view .board_head .csr_info { padding: 20px 0 18px; border: 1px solid #e0e0e0; border-width: 1px 0; }
.board_wrap.view .board_head .csr_info:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.board_wrap.view .board_head .csr_info > div { display: flex; flex-wrap: wrap; }
.board_wrap.view .board_head .csr_info > div + div { margin-top: 20px; }
.board_wrap.view .board_head .csr_info ul { display: flex; list-style: none; }
.board_wrap.view .board_head .csr_info ul + ul { min-width: 500px; margin-left: auto; }
.board_wrap.view .board_head .csr_info .th { margin-bottom: 0; }
.board_wrap.view .board_head .csr_info .td { position: relative; top: 3px; display: flex; align-items: center; font-size: 16px; }
.board_wrap.view .board_head .csr_info .td .btn { /*margin-top: -4px 0 -2px;*/ margin-left: 4px; }
.board_wrap.view .board_head .csr_info .info_req { }
.board_wrap.view .board_head .csr_info .info_rcv { justify-content: flex-end; }
.board_wrap.view .board_head .csr_info .info_rcv ul:first-child li:first-child { min-width: 190px; }
.board_wrap.view .board_head .csr_info .info_rcv .td .time { display: inline-block; margin-right: 3px; }
.board_wrap.view .board_head .csr_info .info_rcv .td .time + .time { margin-left: 12px; }
.board_wrap.view .board_head .csr_info li { min-width: 80px; margin-right: 24px; padding-left: 6px; border-left: 4px solid #efefef; }
.board_wrap.view .board_head .csr_info li.disabled { opacity: 0.5; }
.board_wrap.view .board_head .csr_info .csr_state { min-width: 60px; margin-left: -1px; margin-right: 4px; padding: 0 12px; }
.board_wrap.view .board_head .csr_info .st_tempsave { background-color: var(--st_tempsave); }
.board_wrap.view .board_head .csr_info .st_req { background-color: var(--st_req); }
.board_wrap.view .board_head .csr_info .st_reqcancel { background-color: var(--st_reqcancel); }
.board_wrap.view .board_head .csr_info .st_rcv { background-color:var(--st_rcv); }
.board_wrap.view .board_head .csr_info .st_ready { background-color: var(--st_ready); }
.board_wrap.view .board_head .csr_info .st_hold { background-color: var(--st_hold); }
.board_wrap.view .board_head .csr_info .st_work { background-color: var(--st_work); }
.board_wrap.view .board_head .csr_info .st_delay { background-color: var(--st_delay); }
.board_wrap.view .board_head .csr_info .st_endhold { background-color: var(--st_endhold); }
.board_wrap.view .board_head .csr_info .st_end { background-color: var(--st_end); }
.board_wrap.view .board_head .csr_info .st_close { background-color: var(--st_close); }


.board_head .a,
.table_board .a { position: relative; overflow: hidden; display: inline-block; max-width: 100%; /*margin-right: 4px;*/ margin-bottom: 3px; padding: 0 12px 0 10px; line-height: 32px; border-radius: 3px; text-overflow: ellipsis; white-space: nowrap; }
.board_head .a.btn,
.table_board .a.btn { line-height: 32px; }
.board_head .a .icn_del,
.table_board .a .icn_del { width: 32px; height: 32px; margin: 0 -12px 0 -6px; }

/* 관련 CSR */
.csr_chain .a { background-color: #f0f0f0; }
.csr_chain .a.btn:hover,
.csr_chain .a.btn:focus { background-color: #e0e0e0; }

/* 태그 */
.csr_tag .a { background-color: #e0f9ff; }
.csr_tag .a:before { content: "#"; }
.csr_tag .a.btn:hover,
.csr_tag .a.btn:focus { background-color: #d3eaf0; }
.board_wrap.write .csr_tag .td input { flex: 1; height: 24px; margin-bottom: 3px; padding: 0 5px; border: none; line-height: 24px; }

.board_wrap.view .attach_wrap { }

.board_wrap.view .board_body { padding-bottom: 36px; }

/* 개발자 처리사항 */
.board_wrap.view.develop { }

.popup_wrap.develop {}
.popup_wrap.develop .board_head { padding: 0; }
.popup_wrap.develop .csr_chain { margin-top: 0; margin-bottom: 12px; }

/* 댓글 */
.comment_wrap {}
.comment_wrap .comment_list {}
.comment_wrap .comment_list .comment_item { position: relative; display: flex; width: 100%; padding: 16px 30px; border-bottom: 1px solid rgba(192, 192, 192, 0.15); }
.comment_wrap .comment_list .comment_item:first-child { padding-top: 24px; }
.comment_wrap .comment_list .comment_item:last-child { padding-bottom: 25px; }
.comment_wrap .comment_list .comment_item .portrait { overflow: hidden; position: relative; flex-shrink: 0; width: 48px; height: 48px; margin-right: 8px; border: 1px solid #e0e0e0; border-radius: 50%; background-color: #fff; }
.comment_wrap .comment_list .comment_item .portrait img { position: absolute; top: 50%; left: 50%; width: 100%; min-height: 100%; margin: auto; transform: translate(-50%, -50%); object-fit: cover; }
.comment_wrap .comment_list .comment_item .portrait .initial { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #fffcd9/*#e9f4ff*/; font-size: 24px; font-weight: bold; }
.comment_wrap .comment_list .comment_item .content { flex: 1; overflow: hidden; }
.comment_wrap .comment_list .comment_item .content .name strong { position: relative; font-size: 15px; font-weight: bold; vertical-align: baseline; }
.comment_wrap .comment_list .comment_item .content .comment { margin: 2px 0 8px; }
.comment_wrap .comment_list .comment_item .content .reply_to { margin-right: 3px; color: #0090ff; font-weight: bold; }
.comment_wrap .comment_list .comment_item .content .info { display: flex; width: 100%; align-items: center; }
.comment_wrap .comment_list .comment_item .content .btn_reply { margin-left: 10px; font-size: 12px; }
.comment_wrap .comment_list .comment_item .content .icn_del { position: absolute; top: 12px; right: 16px; width: 30px; height: 30px; background: url('../img/icn_comment_del.png') center no-repeat; border: none; }
.comment_wrap .comment_list .comment_item:first-child .content .icn_del { margin-top: 8px; }
.comment_wrap .comment_list .comment_item.reply { padding-left: 80px; background-color: #fafafa; }
.comment_wrap .comment_list .comment_item.reply:before { content: ""; position: absolute; left: 48px; top: 32px; display: block; width: 17px; height: 21px; background: url('../img/img_comment_reply.png') center no-repeat; }
.comment_wrap .comment_list .comment_item.deleted .comment { color: var(--col_dim); }

/* 댓글 본문 */
.comment_wrap .comment_list .comment_item .content .text {}
/* 이미지 첨부 */
.comment_wrap .comment_list .comment_item .content .images { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.comment_wrap .comment_list .comment_item .content .images .item { overflow: hidden; position: relative; flex-shrink: 0; flex-basis: 120px; height: 90px; border: 1px solid #efefef; }
.comment_wrap .comment_list .comment_item .content .images .frame { position: relative; overflow: hidden; width: 100%; height: 0; padding: 37.5% 0; display: flex; align-items: center; }
.comment_wrap .comment_list .comment_item .content .images .frame img { position: absolute; top: 50%; left: 50%; /*width: 100%;*/ min-height: 100%; margin: auto; transform: translate(-50%, -50%); object-fit: contain/*cover*/; }
/* 파일 첨부 */
.comment_wrap .comment_list .comment_item .content .files { overflow: hidden; display: flex; flex-direction: column; gap: 4px 0; width: 100%; margin-bottom: 8px; }
.comment_wrap .comment_list .comment_item .content .files .item { display: flex; align-items: center; height: 28px; padding: 0 8px; border: 1px solid #efefef; font-size: 12px; border-radius: 3px; }
.comment_wrap .comment_list .comment_item .content .files .item .text { overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; margin-right: 8px; padding-left: 16px; background: url('../img/icn_attach_file.png') left center / 12px no-repeat; }
.comment_wrap .comment_list .comment_item .content .files .item .capacity {flex-shrink: 0; margin-left: auto; color: var(--col_dim); font-size: 12px; }
/* 에디터 */
.comment_wrap .comment_list .comment_item .content .editor {}
.comment_wrap .comment_list .comment_item .content .editor iframe { width: 100%; border: none; }

.comment_wrap .comment_write { display: flex; width: 100%; padding: 8px 15px; }
.comment_wrap .comment_write > div { flex-shrink: 0; }
.comment_wrap .comment_write .fcn_wrap { flex-wrap: nowrap; }
.comment_wrap .comment_write .fcn_wrap .btn { width: 36px; height: 36px; margin: 0 2px; background: center no-repeat; border: none; }
.comment_wrap .comment_write .fcn_wrap .icn_comment_file { background-image: url('../img/icn_comment_file.png'); }
.comment_wrap .comment_write .fcn_wrap .icn_comment_img { background-image: url('../img/icn_comment_img.png'); }
.comment_wrap .comment_write .fcn_wrap .icn_comment_editor { background-image: url('../img/icn_comment_editor.png'); }
.comment_wrap .comment_write .fcn_wrap .icn_comment_mail { background-image: url('../img/icn_comment_mail.png'); }
.comment_wrap .comment_write .input_wrap { display: flex; align-items: flex-start; flex-direction: row-reverse; flex-shrink: 1; flex-grow: 1; gap: 0 8px; margin-right: 12px; }
.comment_wrap .comment_write .input_wrap .input { width: 100%; height: 100%; }
.comment_wrap .comment_write .input_wrap .input input,
.comment_wrap .comment_write .input_wrap .input textarea { height: 36px; padding: 0 8px; border: none; }
.comment_wrap .comment_write .input_wrap .input textarea { padding-top: 9px; padding-bottom: 8px; }
.comment_wrap .comment_write .input_wrap .input .checkbox input { height: 24px; }
.comment_wrap .comment_write .input_wrap .checkbox { flex-shrink: 0; margin: 9px 0; margin-right: 4px; font-size: 12px; }
.comment_wrap .comment_write .input_wrap .checkbox .attr { width: 16px; height: 16px; }
.comment_wrap .comment_write .input_wrap .checkbox label { padding-left: calc( 16px + 4px ); }
.comment_wrap .comment_write .btn_wrap { width: 80px; margin-left: auto; }
.comment_wrap .comment_write .btn_wrap .btn { width: 100%; height: 36px; }

/********************************************************************************************************
/* [CSR] 2024-02-06 / DEV_CSR_017 / by 서보경 / 댓글 기능 구현 */
/*comment 추가 기능 css*/
.comment_wrap .comment_write .reply_wrap { display:none; }
.comment_wrap .comment_write .reply_wrap .reply { border-radius: 3px; display: flex; width:100%; height:100%;}
.comment_wrap .comment_write .reply_wrap .reply .reply_to { padding: 0px 8px; background-color: #e0f9ff; border-radius: 3px; overflow: hidden; diplay:inline-block; max-width: 100%; line-height: 40px; text-overflow: ellipsis; white-space: nowrap;}
.comment_wrap .comment_write .reply_wrap .reply .reply_to .btn{ height:40px;}
.comment_wrap .comment_write .reply_wrap .reply_to span{ flex: 1; height: 40px; border: none;}

.comment_wrap .comment_write .editor_wrap { display:none; }
.comment_wrap .comment_write .editor_wrap .editor { border-radius: 3px; display: flex; width:100%; height:100%;}
.comment_wrap .comment_write .editor_wrap .editor .edit_content { padding: 0px 8px; margin-left:5px; background-color: #e0f9ff; border-radius: 3px; overflow: hidden; diplay:inline-block; max-width: 100%; line-height: 40px; text-overflow: ellipsis; white-space: nowrap;}
.comment_wrap .comment_write .editor_wrap .editor .edit_content .btn{ height:40px; }
.comment_wrap .comment_write .editor_wrap .edit_content span{ flex: 1; height: 40px; border: none;}

.comment_list .editor_view_wrap .editor { border-radius: 3px; display: flex; width:100%; height:100%; margin:10px 0px; }
.comment_list .editor_view_wrap .editor .edit_content { padding: 0px 8px; background-color: #e0f9ff; border-radius: 3px; overflow: hidden; diplay:inline-block; max-width: 100%; line-height: 40px; text-overflow: ellipsis; white-space: nowrap;}
.comment_list .editor_view_wrap .edit_content span{ flex: 1; height: 40px; border: none; cursor: pointer}

/*이미지뷰어 - 댓글 이미지 모아보기*/
#viewer .viewer_wrap{width:100%; height:100%; top: 0; left: 0; right: 0; bottom:0; padding-bottom:140px ; border: 1px solid #606a77; background: #41444c; z-index: 0}
#viewer .viewer_wrap span.icon{ width: 53px; height: 53px; position: absolute; top: 50%; text-indent:-9999px; cursor: pointer}
#viewer .viewer_wrap span.icon.prev{left: 0; margin-top: -140px; background: url(../img/common/btn_arrowL.png) no-repeat 50%}
#viewer .viewer_wrap span.icon.next{right:0; margin-top: -140px; background: url(../img/common/btn_arrowR.png) no-repeat 50%}

#viewer .frame{ display: table; width: 100%; height: 100%; text-align: center;}
#viewer .frame div{ display: table-cell;vertical-align: middle; height: 100%}
#viewer .frame div p{ color: #fff}
#viewer .frame div p img{ max-height: 80%; max-width: 80%; }
#viewer .foot{position: fixed;   height: 140px; left: 1px; right: 1px; bottom:1px; z-index:10; background: #fff; }
#viewer .thumbnails_wrap{text-align: center; width: 100%; border-bottom: 1px solid #d7e0eb; position: relative; padding: 15px 0}
#viewer .foot .thumbnails { height:45px; vertical-align: middle; width: 1200px; margin:0 auto; box-sizing: border-box; overflow: hidden; }
#viewer .foot .thumbnails span { display: inline-block; margin: 0 6px; width: 80px;  height: 40px;cursor: pointer;  box-sizing: border-box; border: 1px solid #d9d9d9; overflow: hidden }
#viewer .foot .thumbnails span.on {border: 3px solid #e93100}

#viewer .foot .thumbnails span img{  height: 100%; /*width: 100%;*/}
#viewer .foot .thumbnails .thumbnails_inner_wrap { white-space: nowrap; font-size: 0pt; }

#viewer .thumbnails_wrap span.pagi_prev ,
#viewer .thumbnails_wrap span.pagi_next{width: 40px; text-indent: -9999px; position: absolute; top:15px;border: 1px solid #d9d9d9;height: 40px; box-sizing: border-box}
#viewer .thumbnails_wrap span.pagi_prev{background: url('../img/common/pagi_prev.png') no-repeat center;left: 20px}
#viewer .thumbnails_wrap span.pagi_next{background: url('../img/common/pagi_next.png') no-repeat center;right:20px }
/********************************************************************************************************

/* 히스토리 */
.histpry_wrap {  }
.histpry_wrap ul { position: relative; padding: 24px 30px 8px; }
.histpry_wrap ul:before { content: ""; position: absolute; top: 0; bottom: 0; left: 150px; display: block; width: 3px; height: 100%; background-color: #efefef; z-index: 0; }
.histpry_wrap li { position: relative; display: flex; width: 100%; margin-bottom: 12px; font-size: 13px; z-index: 1; }
.histpry_wrap li > span { flex-shrink: 0; }
.histpry_wrap li .date { position: relative; width: 130px; padding-top: 2px; padding-right: 24px; }
.histpry_wrap li .date:after { content: ""; display: block; position: absolute; right: 0; top: 0; width: 12px; height: 12px; margin-top: 2px; border: 2px solid #fff; background-color: #c0c0c0; border-radius: 50%; }
.histpry_wrap li:last-child .date:after { background-color: var(--col_primary); }
.histpry_wrap li .name { width: 100px; margin-left: 20px; }
.histpry_wrap li .state { flex-shrink: 1; }


/*------------------------------------------------------------------------------
  쓰기
-------------------------------------------------------------------------------*/
/* 공통 */
.board_wrap.write {}

.board_wrap.write .table_board { padding: 24px 30px 30px; }
.board_wrap.write .table_board colgroup .th { width: 120px; }
.board_wrap.write .table_board colgroup .td { width: calc((100% / 2) - 120px); }


.board_head { padding: 16px 30px 0; }
.board_head:last-child { padding-bottom: 30px; }
.board_body { padding: 30px; }

.board_wrap.write .head_item .td .frame,
.table_board .frame { display: flex; flex-wrap: wrap; gap: 0 4px; min-height: 32px; padding: 3px 4px 0; border: 1px solid rgba(192, 192, 192, 0.6); border-radius: 3px; }
.board_wrap.write .head_item .td .frame.focus,
.table_board .frame.focus { border-color: #404040; }
.board_wrap.write .head_item .td .frame ~ .btn.line,
.table_board .frame ~ .btn.line { margin-top: 4px; }
.board_wrap.write .head_item .td .frame .a,
.table_board .frame .a { padding-left: 8px; line-height: 24px; }
.board_wrap.write .head_item .td .frame .a .icn_del,
.table_board .frame .a .icn_del { width: 24px; height: 24px; }

.board_body .editor_wrap .input,
.table_board .editor_wrap .input { width: 100%; height: 240px; }

.board_wrap.write .attach_wrap .attach_body ul { height: 120px; }



/********************************************************************************************************
  탐색기
*********************************************************************************************************/
.explorer_wrap { display: flex; align-items: flex-start; flex-grow: 1; gap: 0 20px; width: 100%; }
.explorer_wrap > div:last-child { flex-grow: 1; }

.explorer_wrap .explorer_cont { /*overflow: hidden;*/ min-width: 0; }



/********************************************************************************************************
  트리
*********************************************************************************************************/
.tree_wrap .tree_head,
.tree_wrap .tree_body { padding: 0 20px; }

.tree_wrap .tree_head { padding-top: 24px; }
.tree_wrap .tree_head { margin-bottom: 10px; }
.tree_wrap .tree_head .head_item { margin-top: 0; }
.tree_wrap .tree_head .select { width: 100%; }

.tree_wrap .tree_body { padding-bottom: 20px; }
.tree_wrap .tree_body ul { list-style: none; }
/* [CSR] 2024-04-02 / DEV_CSR_074 / by 박상순 / 트리 최상위 노드 화살표 제거 */
.tree_wrap .tree_body li { position: relative; padding: 5px 0; padding-left: 16px; list-style-type: none; line-height: 1.3; }
.tree_wrap .tree_body li > ul > li > ul > li { display: none; }
.tree_wrap .tree_body li > ul > li.expand > ul { /*padding-top: 2px;*/ }
.tree_wrap .tree_body li > ul > li.expand > ul > li { display: block; }
.tree_wrap .tree_body li > ul:before { content: ""; position: absolute; left: 0; top: 6px; display: block; width: 14px; height: 14px; background: url('../img/icn_tree_sub.png') center / 10px no-repeat; cursor: pointer; }
.tree_wrap .tree_body li.expand > ul { margin-top: 2px; }
.tree_wrap .tree_body li.expand > ul > li { display: block; }
.tree_wrap .tree_body li.expand > ul:before { background-image: url('../img/icn_tree_expand.png'); }
.tree_wrap .tree_body li li { margin-left: 2px; }
.tree_wrap .tree_body li .a { display: inline-block; max-width: 100%; padding-left: 22px; background: url('../img/icn_folder_off.png') top 1px left no-repeat; cursor: pointer; }
.tree_wrap .tree_body li.selected > .a { background-image: url('../img/icn_folder_on.png'); color: var(--col_secondary); font-weight: bold; }
.tree_wrap .tree_body li > .a.unused { opacity: 0.6; }

.explorer_wrap .tree_wrap { width: 280px; flex-shrink: 0; }

/* [CSR] 2024-04-09 / DEV_CSR_100 / by 박상순 / 트리있는 페이지 최초 조회 시 본인 이름의 폴더로 스크롤 이동 */
.tree_scroll { overflow: auto; /* height: 350px; */ }

/********************************************************************************************************
  템플릿
*********************************************************************************************************/
.templete_wrap { padding: 24px 20px 20px; }
.templete_wrap ul { list-style: none; }
.templete_wrap li { position: relative; padding: 5px 0; padding-right: 20px; }
.templete_wrap li .a { display: inline-block; max-width: 100%; padding-left: 20px; background: url('../img/icn_templete_off.png') top 1px left no-repeat; cursor: pointer; }
.templete_wrap li.selected .a { background-image: url('../img/icn_templete_on.png'); color: var(--col_secondary); font-weight: bold; }
.templete_wrap li .icn_del { position: absolute; top: 5px; right: 0; margin-top: 1px; }
.templete_wrap .state { display: inline-block; margin-left: 1px; margin-top: 2px; padding: 1px 5px; background-color: #585757; color: #fff; font-size: 11px; font-weight: normal; border-radius: 2em; }
.templete_wrap li.selected .state { background-color: var(--col_secondary); }

.explorer_wrap .templete_wrap { width: 320px; flex-shrink: 0; }



/********************************************************************************************************
[CSR] 2024-01-18 / DEV_CSR_014 / by 서보경 / csr 프린트 css 추가
********************************************************************************************************/
@page{
	size: A4; margin : 20mm 10mm;
}
@media print{
	* {
		-webkit-print-color-adjust: exact;
		printer-colors: exact;
		color-adjust: exact;
	}
	.no_print { display: none !important;}
	.print_wrap {
		height:auto;
	}
	.print_p0 {padding: 0px !important; }
	.print_m0 {margin: 0px !important; }
}

/********************************************************************************************************
  [CSR] 2024-01-22 / DEV_CSR_015 / by 박예진 / csr 현황 팝업 css 추가
********************************************************************************************************/
.table_wrap.scope_col_popup thead th { padding-left: 0; padding-right: 0; border-width: 0 1px 1px 0; }
.table_wrap.scope_col_popup td { text-align: center; }
.list_wrap_popup .row { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }


/*이미지첨부*/
.popup_wrap .attach_foot { display: flex; align-items: center; gap: 0 4px; }
.popup_wrap .attach_foot > div { margin-left: 5px}
.popup_wrap .attach_foot .input{ width: 80px}

/********************************************************************************************************
[CSR] 2024-01-18 / DEV_CSR_014 / by 서보경 / csr 프린트 css 추가
********************************************************************************************************/
/*파일전송 미리보기 */

.preview_layer{border:3px solid #7b7b7e;  background:#7b7b7e; border-radius:3px;}
.preview_layer:after{ position:absolute; width:10px; height:5px; content:""; background:url(../img/preview_layer_tip.png) no-repeat; bottom:-8px;; right:10px }
.preview_layer .del_preview_btn{position:absolute; right:-10px; top:-10px;  width:25px; height:25px; border:2px solid #606069; border-radius:30px; background:#fff url(../img/btn_close.png) no-repeat 50%;z-index:250; background-size:50%}

.preview_layer.image_file{ width:150px; min-height:150px; position:absolute;bottom:51px;right:10px; z-index:150}
.preview_layer.image_file div img{ width:100%; height:100%; right:-10px; }
/* .preview_layer.image_file div{min-height:150px; overflow:hidden} */

.preview_layer.etc_file {width:200px; /* height:50px; */position:absolute;bottom:51px; right:10px; z-index:150}
.preview_layer.etc_file div{ color:#fff; font-weight:bold; padding:10px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}



/* 템플릿선택 */
.bgw{ background: #fff}

.padding .popup_body{ padding: 10px}
.iframe_container { display: flex; justify-content: space-between; width: 100%; height: 100%}
.iframe_container > div { width:48% }
.iframe_container .box_wrap { padding: 10px; background: #fff}

.box_iframe {display: flex;flex-direction: column; height: 100%; border: 1px solid #e0e0e0; padding: 15px}

.select_box select{ width: 100%; height: 100%}

.my_profile .portrait { overflow: hidden; width: 80px; height: 80px; border: 2px solid #fff; border-radius: 50%; }

/********************************************************************************************************
  [CSR] 2024-02-06 / DEV_CSR_018 / by 박상순 / 태그 디자인 변경
  [CSR] 2024-04-29 / DEV_CSR_154 / by 박상순 / 태그기능 삭제
********************************************************************************************************/
/* .tag_wrap.insert { background-color: #ffffff; }
.new_tag .td .frame { padding: 3px 4px; border: 1px solid rgba(192, 192, 192, 0.6); border-radius: 3px; }
.new_tag .td .frame { display: flex; padding-bottom: 0;}
.new_tag .a { padding: 0px 32px 0px 12px; background-color: #e0f9ff; border-radius: 999px; overflow: hidden; diplay:inline-block; max-width: 100%; margin-right: 3px; margin-bottom: 5px; line-height: 32px; text-overflow: ellipsis; white-space: nowrap;}
.tag_wrap .a { overflow: hidden; display: inline-block; max-width: 100%; margin-right: 4px; margin-bottom: 3px; padding: 0 8px; line-height: 32px; text-overflow: ellipsis; white-space: nowrap; }
.new_tag .a { position: relative; background-color: #e0f9ff; border-radius: 3px;}
.tag_wrap .frame .a { line-height: 24px; }
[CSR] 2024-04-16 / DEV_CSR_120 / by 박상순 / 태그 일반 포인터로 변경
.new_tag .a.btn:hover,
.new_tag .a.btn:focus { background-color: #d3eaf0; cursor: default !important; }
.new_tag a.btn.a { cursor: default; }
.new_tag span.a { padding-right: 5px !important; }
.new_tag .td input{ flex: 1; height: 24px; margin-bottom: 3px; padding: 0 3px; border: none; line-height: 24px; }
.new_tag .a:before { content: "#"; margin-right: 2px; }
.new_tag .td { min-height: 32px; }
.new_tag.view .th { color: #909090; font-weight: normal; }
.tag_delete { font-weight: bold; }
.edit_tag { padding-top: 10px; }
.head_item.tag .td { height: 72px; }
삭제버튼 추가
.new_tag .a.btn_delete { padding: 0px 0px 0px 12px; }
.new_tag .btn_icn.icn_del { width: 24px; height: 24px; }


자동완성
.new_tag li a {
	display:inline-block;
	text-decoration:none;
	vertical-align:middle;
	color:#555;
	cursor:pointer;
}
.new_tag a:visited {color:#333333;}
.tag_list { position: absolute; overflow: hidden; left: 0; right: 0; border: 1px solid #d5d5d5; border-radius: 0 0 3px 3px; border-top: none; z-index: 1; box-sizing: border-box; }
.tag_list ul { margin: 0; padding: 0; }
.tag_list ul li { margin: 0; padding: 0; list-style: none; background-color: #fff; }
.tag_list ul li + li { border-top: 1px dotted #d5d5d5; }
.tag_list ul li a{ display: block; padding: 4px 15px; font-size: 12px; }
.tag_list ul li a:hover,
.tag_list ul li a:focus,
.tag_list ul li.focus a { background-color: rgba(128, 128, 128, 0.06); } */

/* [CSR] 2024-02-19 / DEV_CSR_022 / by 박상순 / 팝업 디자인 변경 */
/* 트리 */
.frmTree.popup { background-color: #ffffff; }
.tree_wrap.popup { background-color: #ffffff; }
/* 사이트정보변경이력 팝업 */
.no_data.license_popup { min-height: 0 !important; }
/* 순서이동 팝업 */
.section_btn { margin-bottom: 20px; height: 32px; }
.section_btn .btn_group_wrap.r{ float:right; text-align:right; }
.warning_wrap { margin-bottom: 5px; }
.icon_warning { padding: 10px; background: url('../img/icn_warning.png') center right no-repeat; }
.txt_warning { margin-left: 3px; }
.ui-state-default { list-style-type: none; }
.icon_sortable { width: 14px; height: 12px; float: right; margin-top: 5px; margin-right: 5px; background: url('../img/common/btn_sortable.png') center right no-repeat;}
.folder_name { padding: 5px; }
.csr_site_sort .popup_body { overflow: hidden; }
.csr_site_sort .box_wrap { overflow: hidden auto; }
/* 사이트관리 팝업 */
.popup_window .grid_wrap.site { padding: 30 30 0 30; }
.popup_window .attach_wrap.popup { padding: 0px; margin-top: 30px; }
.popup_window .attach_wrap.popup .attach_list.popup { padding: 0 30 30 30; }
.popup_window .attach_wrap.popup .attach_wrap { padding: 0px; }
.popup_body .box_body { padding: 30px; }
/* 접수처리 팝업 */
.grid_wrap input#expMd { width: 40px; }
.grid_wrap .mail_content { height: 200px; grid-column: 1/3;}
.grid_wrap .mail_content textarea#mailContent { height: 150px; }
/* 개발자 처리사항 팝업 */
.popup_window .board_body.complete_write {border-top: 0px solid rgba(0, 0, 0, 0.08);padding: 20px 40px;/* padding: 20px 40px; */ }
/* 조직도 팝업 */
body.org_popup_left { background: #ffffff; overflow: hidden; }
.padding .popup_body.org_popup { overflow: hidden; }
.left_wrap > .org_popup_tree { height: 200px; /* display: flow; */ }
.iframe.org_popup_tree { overflow: auto; }
.tree_body.org_popup { padding: 0; }
.tab { padding: 10px 22px; margin-right: 2px; }
.tab.basic { height: 27px; line-height: 27px; }
.tab.basic.org_on { color: #FFF; font-weight: bold; background: #585757; border: 1px solid #585757; border-bottom: none; }
.org_popup.tbl_user .attr { top: -10px; left: 3px; }
.org_popup.tbl_data .attr { left: 2.5px; }
.org_popup #userTBL .no_data { min-height: 223px; }
.org_choose .box_iframe { border: 0px; padding: 0px; }
.org_popup .tbl_list_user { height: 240px; overflow: hidden scroll; }
.org_popup .tbl_list_data { overflow: hidden scroll; }
.org_popup.tbl_data th:last-child { text-align: left; padding-left: 10px; }
.org_popup.tbl_data tr td:nth-child(2) { text-align: left; padding-left: 10px; }
.search_wrap.org_popup { margin-bottom: 10px; }
.org_popup .iframe_container .btn_wrap { width: 20%; margin-bottom: 150px; }
.no_border { border: 0px; }
.dept_select { height: 350px; border: 1px solid #e0e0e0 !important; padding: 7px !important; margin-bottom: 0px !important; }
.search_wrap.dept_move_popup { margin-bottom: 10px; }
.iframe.dept_popup_tree { overflow: auto; }
/* 보고서 생성 팝업 */
.popup_body.report_make_popup { overflow: hidden; }
.report_make_popup .box_wrap { padding: 0px 30px 30px !important; }
.report_make_popup .report_make_date { margin-left: 100px; }

/* [CSR] 2024-02-22 / DEV_CSR_026 / by 박상순 / 사이트 수정 히스토리 */
.list_wrap.csr_site_history .cell { margin-right: 2em; }
.list_wrap.csr_site_history .cell:first-child { width: 30px; }
.list_wrap.csr_site_history .cell:nth-child(2) { width: 100px; }
.list_wrap.csr_site_history .cell:nth-child(3) { width: 100px; }
.list_wrap.csr_site_history .cell:nth-child(4) { width: 120px; }
.list_wrap.csr_site_history .cell:nth-child(5) { width: 60px; }
.list_wrap.csr_site_history .cell:nth-child(6) { width: 60px; }
.csr_site_history .head_item { margin-top: 0px; }

/* [CSR] 2024-02-23 / DEV_CSR_027 / by 박예진 / 관련 CSR 선택 기능 추가 */
/* 관련 문서 디자인 추가 */
.board_wrap.write .head_item.csr_chain .td .frame_relDox { height: auto; padding: 4px 8px; }
.board_wrap.write .head_item.csr_chain .td .frame.height { height: 40px; }
.board_wrap.write .head_item.csr_chain .td .frame_relDox { margin-bottom: 4px; padding-bottom: 0; }
.board_wrap.write .head_item.csr_chain .td .frame_relDox { min-height: 42px; }
.board_wrap.write .head_item .td .frame_relDox { padding: 4px 8px; border: 1px solid rgba(192, 192, 192, 0.6); border-radius: 3px;}
.popup_wrap.bg_cl{background-color: #F5F5F5;}

/* 관련 문서 팝업 윈도우 검색 박스 */
.popup_search_wrap { margin: 10px 20px 15px 20px;}
.popup_search_box {margin: 0 30px;}
.popup_search_wrap .popup_search_box { display: flex; align-items: center; }
.popup_search_wrap .popup_search_box > .grid_wrap_pop { flex: 1; grid-template-columns: repeat(auto-fit, minmax(200px, auto)); margin: 0 0 30px; }
.popup_search_wrap .btn_wrap { width: 100px; flex-shrink: 0; }
.popup_search_wrap .btn_wrap .btn { width: 100%; margin: 5px 0; }
.popup_window .grid_wrap_pop {flex: 1; grid-template-columns: repeat(auto-fit, minmax(300px, auto));}
.grid_wrap_pop { display: grid; grid-template-columns: repeat(auto-fit, minmax(25%, auto)); grid-auto-columns: 1fr; }
.grid_wrap_pop .grid_item { padding-right: 30px; }
.grid_wrap_pop .grid_item.full { grid-column: 1 / -1; padding-right: 0; }
.grid_wrap_pop .grid_item.br { grid-column-start: 1; }

/* 관련 문서 팝업 btn wrap 간격 맞추기 위해 추가*/
.box_btn_wrap.popup_btn_wrap { padding: 0 40px 20px 40px;}
.popup_box {padding: 0 20px;}
.popup_section {margin-bottom: 20px;}

 /*  관련 문서 관련글 리스트 */
.reldoc_list .list_wrap .cell:nth-child(1) { width: 20px; }
.reldoc_list .list_wrap .cell:nth-child(2) { width: 16px; margin-right: 6px; }
.reldoc_list .list_wrap .cell:nth-child(3) { width: 5em; }
/*
[CSR] 2024-04-16 / DEV_CSR_118 / by 윤성한 / csr등록시 관련문서 조회 팝업 사이트&상태 width 변경
.reldoc_list .list_wrap .cell:nth-child(4) { width: 8em; }
*/
.reldoc_list .list_wrap .cell:nth-child(4) { width: 10em; }
.reldoc_list .list_wrap .cell:nth-child(5) { width: 8em; }
.reldoc_list .list_wrap .cell:nth-child(6) { width: 2em; }
.reldoc_list .list_wrap .cell:nth-child(7) { width: 5em; }
.reldoc_list .list_wrap .cell:nth-child(8) { width: 5em; }
/*
[CSR] 2024-04-16 / DEV_CSR_118 / by 윤성한 / csr등록시 관련문서 조회 팝업 사이트&상태 width 변경
.reldoc_list .list_wrap .cell:nth-child(9) {width: 3em;}
*/
.reldoc_list .list_wrap .cell:nth-child(9) {width: 5em;}
.reldoc_list .list_wrap .cell:last-child {margin-left: auto;}

/********************************************************************************************************
 공지 팝업
*********************************************************************************************************/
.popup_window .popup_wrap.noti .grid_wrap {flex: 1;grid-template-columns: repeat(auto-fit, minmax(150px, auto)); padding:0px; }
.popup_wrap.noti .popup_body .head_item{margin-top:10px;}

/*[CSR] 2024-02-26 / DEV_CSR_028 / by 박상순 / 라이센스 이력 조회 */
.list_wrap.csr_license_history .cell { margin-right: 2em; }
/* [CSR] 2024-04-08 / DEV_CSR_096 / by 박상순 / 라이센스 이력조회 팝업 내 체크박스 제거 */
/* .list_wrap.csr_license_history .cell:first-child { width: 20px; }
.list_wrap.csr_license_history .cell:nth-child(2) { width: 120px; }
.list_wrap.csr_license_history .cell:nth-child(3) { width: 160px; }
.list_wrap.csr_license_history .cell:nth-child(4) { width: 90px; }
.list_wrap.csr_license_history .cell:nth-child(5) { width: 120px; } */
.list_wrap.csr_license_history .cell:first-child { width: 120px; }
.list_wrap.csr_license_history .cell:nth-child(2) { width: 160px; }
.list_wrap.csr_license_history .cell:nth-child(3) { width: 90px; }
.list_wrap.csr_license_history .cell:nth-child(4) { width: 120px; }
.csr_license_history .checkbox label { display: inline; margin-right: 10px; }
.license_popup { padding: 10px 30px 30px; }
.license_tbl col:first-child { width: 15%; }
.license_tbl col:nth-child(2) { width: 35%; }
.license_tbl col:nth-child(3) { width: 15%; }
.license_tbl col:nth-child(4) { width: 35%; }
.license_tbl th,
.license_tbl td{ height: 40px; padding: 5px 0; font-size: 13px; vertical-align: middle; text-align: left; border-bottom: 1px solid #dbdfe1;}
.license_tbl th { padding-left: 10px; padding-right: 10px;  }
.license_popup .title.for_tbl { font-weight: bold; border-bottom: 1px solid #9095ab; }



/*2월23일 추가*/

.comment_attach{ display: flex; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 20px; background: url('../img/icn_attach_file.png') 2px 2px no-repeat;}
.comment_attach button{ margin-left: 5px}

.comment_attach .name_attach{font-weight: bold}

.attach_wrap .attach_body li .checkbox label .text {  }
.icn_link, .comment_del{ font-size: 12px;  height: 24px;padding: 0 5px}


.popup_window .search_wrap .search_box > .grid_wrap { padding:0 }
.popup_window .search_wrap .search_box .head_item {  margin-top: 17px;}

.iframe_container  .btn_wrap{ width:4%; display: flex;flex-direction: column; align-items: center; justify-content: center }
.iframe_container  .btn_wrap button{ margin: 5px}

.btn_icn.icn_move { width: 24px; height: 24px; background-image: url('../img/icn_attach_down.png'); transform:rotate(-90deg); }
.btn_icn.icn_move.remove { transform:rotate(90deg)}

.btn_icn.icn_sort { width: 16px; height: 16px; border: none; background-image: url('../img/icn_sort.png'); transition: margin ease-out 0.25s 0.1s; }
.btn_icn.icn_sort.down { transform: rotate(180deg); }

.list_wrap .cell { /*display: flex;*/align-items: center}
.list_wrap .cell .btn.line { height: 28px; font-size: 12px; }

.btn_icn.icn_txt{ font-size: 13px; height: 30px; min-width: 80px; padding: 0 10px }



/* [CSR] 2024-03-27 / DEV_CSR_069 / by 박상순 / CSR 상세에서 요청구분 "오류 / " 로 보이는 오류 수정 */
.head_item#reqErrType_div { display: none; }
.head_item#reqErrType_div .td { padding-top: 12px; }

/* [CSR] 2024-04-05 / DEV_CSR_092 / by 박성덕 / 에디터 사이즈조절 기능 추가 */
div.editor_resizebar {
    height: 12px;
    border-top: 1px solid #ddd;
    background: #fafafa url(../images/icon_resizebar.png) no-repeat center;
    cursor: ns-resize;
}

.dp_n { display: none !important; }

/* [CSR] 2024-04-16 / DEV_CSR_124 / by 박상순 / 사이트 선택에서 '나의 CSR' 음영 처리 */
.selectize-dropdown .active{background:#f5fafd !important;color:#495c68}

/* [CSR] 2024-04-16 / DEV_CSR_125 / by 박상순 / 에디터를 감싸는 테두리 제거 */
/* #editor { border: 0px; } */

/* [CSR] 2024-04-16 / DEV_CSR_118 / by 윤성한 / csr등록시 관련문서 조회 팝업 사이트&상태 width 변경 */
.padding-zero { padding : 0 !important;}

/* [CSR] 2024-05-07 / DEV_CSR_170 / by 윤성한 / CSR실제작업공수 등록 및 조회 추가 */
.list_wrap.csr_workTime_history .cell { margin-right: 2em; }
.list_wrap.csr_workTime_history .cell:first-child { width: 30px; }
.list_wrap.csr_workTime_history .cell:nth-child(2) { width: 100px; }
.list_wrap.csr_workTime_history .cell:nth-child(3) { width: 80px; }
.list_wrap.csr_workTime_history .cell:nth-child(4) { width: 100px; }
.list_wrap.csr_workTime_history .cell:nth-child(5) { width: 150px; }
.csr_workTime_history .head_item { margin-top: 0px; }