* { box-sizing: border-box;}

/* common */
.clearfix { zoom:1; }
.clearfix::before,
.clearfix::after { display: table; content: ''; clear: both; }

/* display */
.d_b { display: block !important;}
.d_ib { display: inline-block !important;}
.d_i { display: inline !important;}
.d_none { display: none !important;}

/**/
.is_hidden { visibility: hidden; }

/* width */
.w_100 { width: 100px;!important;}
.w_200 { width: 200px;!important;}
.w_half { width: 50% !important;}
.w_full { width: 100% !important;}
.w_custom { width: calc(100% - 64px); }
.w_custom2 { width: calc(100% - 174px); }

.w_160px { width: 160px !important; }

/* height */
.h_24 { height: 24px !important; }
.h_32 { height: 32px !important; }
.h_36{ height: 36px !important; }
.h_40 { height: 40px !important; }
.h_44 { height: 44px !important; }
.h_48 { height: 48px !important; }
.h_56 { height: 56px !important; }
.h_64 { height: 64px !important; }

/* margin*/
.mgt_2 { margin-top: 2px !important;}
.mgt_4 { margin-top: 4px !important;}
.mgt_8 { margin-top: 8px !important;}
.mgt_16 { margin-top: 16px !important;}
.mgt_20 { margin-top: 20px !important;}

.mgb_4 { margin-bottom: 4px !important;}
.mgb_8 { margin-bottom: 8px !important;}
.mgb_16 { margin-bottom: 16px !important;}
.mgb_20 { margin-bottom: 20px !important; }

.mgl_0 { margin-left: 0px !important;}
.mgl_4 { margin-left: 4px !important;}
.mgl_8 { margin-left: 8px !important;}
.mgl_16 { margin-left: 16px !important;}
.mgl_20 { margin-left: 20px !important;}
.mgl_rvs_2 {margin-left: -2px !important;}
.mgl_rvs_4 {margin-left: -4px !important;}

.mgr_0 { margin-right: 0px !important;}
.mgr_4 { margin-right: 4px !important;}
.mgr_8 { margin-right: 8px !important;}
.mgr_16 { margin-right: 16px !important;}
.mgr_20 { margin-right: 20px !important;}

.mg_0 { margin: 0px !important;}
.mg_4 { margin: 4px !important;}
.mg_8 { margin: 8px !important;}
.mg_16 { margin: 16px !important;}
.mg_20 { margin: 20px !important;}

/* align*/

.ta_center{ text-align: center !important; }
.ta_left { text-align: left !important;}
.ta_right { text-align: right !important;}

.a_middle { vertical-align: middle;}

/* align-wrap */
.align_wrap { position: relative; vertical-align: middle;}
.align_wrap_btn { min-height: 40px;}
.align_item { display: inline-block;}

.align_wrap::before,
.align_wrap::after { display: table; content: ''; clear: both; }

.align_item.a_item_center { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.align_item.a_item_left { float: left;}
.align_item.a_item_right{ float: right;}

/* control */
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.nofocus:focus { outline: none; }


/* text */
.sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0); }
.ellipsis { white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
/* .text-limit{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 1.6; max-height: 3.2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } */

/* image */
img { max-width:100%; vertical-align: middle;}

/* tooltip */
.tooltip[data-tooltip]{ position: relative; cursor: pointer; }
.tooltip[data-tooltip]::after{ content: attr(data-tooltip); z-index: 10000; opacity: 0; visibility: hidden; position: absolute; top: calc( 100% + 2px); padding: 2px 8px; color: #fff; background-color: rgba(0,0,0,0.9); font-size: 1.4rem; border-radius: 2px; white-space: nowrap; transition: opacity .3s; }
.tooltip.left[data-tooltip]::after { left: 0; }
.tooltip.right[data-tooltip]::after { right: 0; }
.tooltip.center[data-tooltip]::after { left: 50%; transform: translateX(-50%); }
.tooltip[data-tooltip]:hover::after{ opacity: 1; visibility: visible; }
.tooltip.underline{ text-decoration: underline;}


/* tooltip-contents-box */
.tooltip-wrap { position: relative; display: inline-block;   }
.tooltip-content-box { visibility: hidden; opacity: 0; position: absolute; z-index: 100000; left: 0; top: 0; width: 320px;  margin: 0 0 0 22px; padding: 12px 16px; background-color:#fff; border: 1px solid var(--gray-600); transition: opacity .3s;  }
.tooltip-content-box.on { visibility: visible; opacity: 1; }
.tooltip-content-box .tooltip-top { margin-bottom: 8px;}
.tooltip-content-box .tooltip-title { font-size: 1.5rem; font-weight: 500; }
.tooltip-content-box .tooltip-close { padding: 8px; margin-top: 3px;}
.tooltip-content-box .tooltip-close:hover{ background-color: var(--gray-300);}
.tooltip-content-box .tooltip-desc { color: var(--gray-700); font-size: 1.4rem; }
.tooltip-content-box .tooltip-desc > li::before { content: '-'; display: inline-block;}

/* icon */
.icon { display: inline-block; width: 18px; height: 18px; vertical-align: middle; background-repeat: no-repeat; transform: translateY(-1px);}
.icon.icon-only{margin:0 -4px;}
.icon.light { background-position-y: -18px;}

/* <i class="icon icon_help"></i> */
.icon_help { background-image:url(/images/icon/icon_help.png); }
.icon_info { background-image:url(/images/icon/icon_info.png); background-position: 0 0 ; }
.icon_info.warning { background-image:url(/images/icon/icon_info.png);  background-position: -18px 0 ; }
.icon_arrow_right { display: inline-block; width:16px; height: 16px; margin: 6px 4px; background: url(/images/icon/icon_arrow_pagination_16px.png) no-repeat -32px 0;}


/* <i class="icon icon_btn icon_done"></i> */
.icon_btn { background-image: url(/images/icon/icon_btn_common_18px.png);}
.icon_btn.icon_done { background-position-x: 0;}
.icon_btn.icon_retry { background-position-x: -18px;}
.icon_btn.icon_search { background-position-x: -36px;}
.icon_btn.icon_save { background-position-x: -54px;}
.icon_btn.icon_setting { background-position-x: -72px;}
.icon_btn.icon_remove{ background-position-x: -90px;}
.icon_btn.icon_add { background-position-x: -108px;}
.icon_btn.icon_close { background-position-x: -126px;}

/* <i class="icon icon_extention excel"></i>  */
.icon_extention { background-image: url(/images/icon/icon_extention_18px.png);}
.icon_extention.icon_excel { background-position-x: 0;}

.icon_board { background-image: url(/images/icon/icon_borad_18px.png);}
.icon_board.icon_image { background-position-x: 0;}
.icon_board.icon_new { background-position-x: -18px;}


/* button */
.btn { font-size: inherit; font-weight: 500; padding: 0 12px; background-color: var(--gray-200); color: var(--gray-800); border: 1px solid transparent; border-radius: 5px; transition: background-color .3s; box-sizing: border-box; }
.btn:hover{ background-color: var(--gray-300); }
.btn.btn_md { height: 40px; line-height: 39px; padding: 0 16px; }
.btn.btn_sm { height: 32px; line-height: 31px; font-size: 1.4rem;}
.btn.btn_xs { height: 28px; line-height: 27px; font-size: 1.4rem; border-radius: 4px;}
.btn.btn_xxs { height: 24px; line-height: 23px; font-size: 1.2rem; border-radius: 4px;}

.btn.btn_trasparent        { background-color: transparent; color: var(--gray-800);}
.btn.btn_trasparent:hover  { background-color: var(--gray-200); color: var(--gray-900);}
.btn.btn_primary        { background-color: var(--primary-500); color: #fff;}
.btn.btn_primary:hover  { background-color: var(--primary-600);}
.btn.btn_gray       { background-color: var(--gray-500); color: #fff;}
.btn.btn_gray:hover { background-color: var(--gray-600);}
.btn.btn_bluegray       { background-color: var(--sub-bluegray-500); color: #fff;}
.btn.btn_bluegray:hover { background-color: var(--sub-bluegray-600);}
.btn.btn_blue      { background-color:  #1e90ff; color: #fff;}
.btn.btn_blue:hover { background-color: rgb(16, 118, 219); }
.btn.btn_warning        { background-color: var(--warning-500); color: #fff;}
.btn.btn_warning:hover   { background-color: var(--warning-600);}
.btn.btn_danger        { background-color: var(--danger-500); color: #fff;}
.btn.btn_danger:hover   { background-color: var(--danger-600);}
.btn.btn_success        { background-color: var(--success-500); color: #fff;}
.btn.btn_success:hover   { background-color: var(--success-600);}

.btn.btn_primary_line { background-color: #fff; border: 1px solid var(--primary-300); color: var(--primary-500); transition: border-color .3s;}
.btn.btn_primary_line:hover { border-color: var(--primary-600); color: var(--primary-600); }
.btn.btn_gray_line { background-color: #fff; border: 1px solid var(--gray-300); color: var(--gray-800); transition: border-color .3s;}
.btn.btn_gray_line:hover { border-color: var(--gray-500); color: var(--gray-900); }
.btn.btn_bluegray_line { background-color: #fff; border: 1px solid var(--sub-bluegray-300); color: var(--gray-800); transition: border-color .3s;}
.btn.btn_bluegray_line:hover { border-color: var(--sub-bluegray-600); color: var(--gray-900); }
.btn.btn_warning_line { background-color: #fff; border: 1px solid var(--warning-300); color: var(--warning-500); transition: border-color .3s;}
.btn.btn_warning_line:hover { border-color: var(--warning-600); color: var(--warning-600); }
.btn.btn_danger_line { background-color: #fff; border: 1px solid var(--danger-300); color: var(--danger-500); transition: border-color .3s;}
.btn.btn_danger_line:hover { border-color: var(--danger-600); color: var(--danger-600); }
.btn.btn_success_line { background-color: #fff; border: 1px solid var(--success-300); color: var(--success-500); transition: border-color .3s;}
.btn.btn_success_line:hover { border-color: var(--success-600); color: var(--success-600); }

.btn_wrap { display: inline-block; }
.btn_wrap_inner { display: flex; }
.btn_wrap_inner.oneBtn .btn:first-child,
.btn_wrap_inner.oneBtn .btn:last-child { border-radius: 5px;}
.btn_wrap_inner .btn{ border-radius: 0; border-width: 1px 1px 1px 0;}
.btn_wrap_inner .btn:first-child{ border-radius: 5px 0 0 5px; border-left-width: 1px;}
.btn_wrap_inner .btn:last-child{ border-radius: 0 5px 5px 0; }
.btn_wrap_inner .btn.active { color: dodgerblue; border-color: dodgerblue; font-weight: 500; }

/* .btn_slide .slide-wrap */
.btn_slide { background-color: transparent; color: var(--gray-800); }
.btn_slide:hover { background-color: var(--gray-200);}
.btn_slide.on { background-color: var(--gray-300);}
.btn_slide .icon { background-image: url(/images/icon/icon_slide_18px.png);}
.btn_slide.on .icon { background-image: url(/images/icon/icon_slide_18px.png);  background-position-x: -20px; }

/* badges */
.badge { display: inline-block; }
.badge_sm { padding: 2px 8px;}
.badge.badge_gray {background-color: var(--gray-600); color: #fff;}
.badge.badge_green1 { background-color: yellowgreen;  color: #fff;}
.badge.badge_green2 {background-color: seagreen; color: #fff;}
.badge.badge_green3 {background-color: lightseagreen; color: #fff;}
.badge.badge_blue {background-color: steelblue; color: #fff;}
.badge.badge_purple1 { background-color: darkorchid;  color: #fff;}
.badge.badge_purple2 { background-color: darkmagenta;  color: #fff;}
.badge.badge_pink { background-color: palevioletred;  color: #fff;}
.badge.badge_pink { background-color: lgith;  color: #fff;}


/*itme-box*/
.item-box { padding: 8px;}
.item-box.h_sm{ height: 160px;}

.item-box .item { padding:0 4px;  border: 1px solid transparent;}
.item-box .item:hover { background-color:var(--primary-50);}
.item-box .item.active{ background-color:var(--primary-100); border-color: var(--primary-200);}

/*scroll*/
.customScroll::-webkit-scrollbar { width: 0px; }
.customScroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 0px; }
.customScroll::-webkit-scrollbar-track { background: transparent; }

.customScroll_01::-webkit-scrollbar { width: 20px;}
.customScroll_01::-webkit-scrollbar-track { background-color:transparent; }
.customScroll_01::-webkit-scrollbar-track:hover { background-color:#f4f4f4 }
.customScroll_01::-webkit-scrollbar-thumb { background-color: var(--gray-400); border-radius:16px; border:4px solid #F4F5F6; }
.customScroll_01::-webkit-scrollbar-thumb:hover { background-color: var(--gray-600); }
.customScroll_01::-webkit-scrollbar-button {display:none}

.customScroll_02::-webkit-scrollbar { width: 10px; }
.customScroll_02::-webkit-scrollbar-thumb { background:var(--gray-500); border-radius: 5px; }
.customScroll_02::-webkit-scrollbar-track { background:var(--gray-200); }

/* scroll-wrap */
.scroll-wrap { height: inherit; overflow-y: scroll;}


/* table */
.tableStyle { border-top: 1px solid var(--gray-900); line-height:1.5; text-align: left; vertical-align: middle;}
.tableStyle.tableStyle_inner { border-top: none;}

.tableStyle.th_center th,
.tableStyle.th_center th{ text-align: center !important;}
.tableStyle.td_center td{ text-align: center;}

.tableStyle.searchType { margin-top: 8px;}
.tableStyle.boardType tr:hover { background-color: var(--gray-50);}

/* th 怨좎젙 */
.tableStyle.searchType th ,
.tableStyle.th_fixed th { min-width: 140px;}
.tableStyle #tableInput { width:5%; min-width: 80px; text-align: center;}

/* 湲곕낯�뒪���씪 */
.tableStyle
.tableStyle td,
.tableStyle th {vertical-align: middle;}
.tableStyle table { width: 100%;}
.tableStyle table th,
.tableStyle table td { border-width: 1px; border-style: solid;  border-color: var(--gray-300); padding: 5px 12px; word-break:keep-all; }

.tableStyle table thead th,
.tableStyle table thead td {background: #F5F6FB; color: var(--gray-900); padding: 4px 12px; }
.tableStyle table tbody th {background: #F5F6FB;}
.tableStyle table tbody td {font-weight:400;}

.tableStyle table th,
.tableStyle table thead th,
.tableStyle table tbody th { font-weight: 600; line-height: 1.2; font-size: 1.4rem;}

.tableStyle table td.em,
.tableStyle table thead td.em,
.tableStyle table tbody td.em { background-color: #FFFDE7; }
.tableStyle table td.td_date,
.tableStyle table td .td_date { line-height: 1.2; text-align: center;}
/* �꽑 �뾾�븷湲� */
.tableStyle table th:first-child,
.tableStyle table td:first-child { border-left: 0; }
.tableStyle table th:last-child,
.tableStyle table td:last-child { border-right: 0; }

/* tr_wide �삁�쇅泥섎━ text,radio,checkbox */
.tableStyle table tr.tr_wide th,
.tableStyle table tr.tr_wide td,
.tableStyle table tr td.td_wide { padding: 8px 12px !important;}

/* table > table */
.table_inner { padding: 0 !important; }
.tableStyle th { width: 80px;}
.table_inner table tr:first-child th,
.table_inner table tr:first-child td { border-top: 0; }
.table_inner table tr:last-child > th,
.table_inner table tr:last-child > td { border-bottom: 0; }
.table_inner table tr.tr_wide th,
.table_inner table tr.tr_wide td { padding: 8px 12px !important;}

/* td_scroll */
.td_scroll { padding: 0 !important; overflow-y: scroll;  vertical-align: top; }

/* th 怨좎젙 td �뒪�겕濡�*/
.tableStyle_scroll { min-height: 40px; max-height: 200px; background-color: #fff; overflow-y: auto; overflow-x: hidden; border-top-color: var(--gray-300); }
.tableStyle_scroll #table_scroll_inner { border-collapse: Separate;}
.tableStyle_scroll #table_scroll_inner tr:first-child { position: sticky; z-index: 100; top: 0px; }
.tableStyle_scroll #table_scroll_inner th { border-width: 1px 0 1px 1px;}
.tableStyle_scroll #table_scroll_inner td { border-width: 0 0 1px 1px;}
/* .tableStyle_scroll.tableStyle_scroll_thin { border-top-width: 2px;} */
/* .tableStyle_scroll.tableStyle_scroll_thin #table_scroll_inner td { border-bottom: 1px !important;} */


/* pagination */
.pagination-wrap { text-align: center; margin-top: 20px; }
.pagination { display: inline-block; text-align: center; }
.pagination > li { display: inline-block; vertical-align: top; }
.pagination > li > a  { display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; font-size: 1.3rem; border-radius: 50%;}
.pagination > li > a:hover { background-color: var(--gray-300);}
.pagination > li.active > a { background-color: var(--sub-bluegray-300); color: #fff;}
.pagination > li > a > .arrow { display: inline-block; width:16px; height: 16px; margin: 6px 4px; background: url(/images/icon/icon_arrow_pagination_16px.png) no-repeat;}
.pagination > li > a.first > .arrow { background-position-x: 0;}
.pagination > li > a.prev > .arrow { background-position-x: -16px ;}
.pagination > li > a.next > .arrow { background-position-x: -32px ;}
.pagination > li > a.last > .arrow { background-position-x: -48px ;}


/* layerpop */
.layer_pop { display: none;}
.layer_pop .pop_container { position: fixed;  z-index: 10001; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #fff;;}
.layer_pop .pop_container.type_md { min-width: 800px; width: 50%; }
.layer_pop .pop_container.type_lg { min-width: 720px; width: 70%; }

.layer_pop .pop_container .pop_header { background-color: #eee; padding: 8px 20px;}
.layer_pop .pop_container .pop_header h4 { font-size: 1.6rem;}
.layer_pop .pop_container .btn_pop_close { position: absolute; top:0; right: 0; margin: 10px 12px 0 0;}
.layer_pop .pop_container .btn_pop_close:hover { opacity: .7;}
.layer_pop .pop_container .pop_divider { width: calc(100% + 40px); background-color: #fff; height: 1px; margin: 1rem -20px;}
.layer_pop .pop_container .pop_box { padding: 16px 20px;}
.layer_pop .pop_dimmed_bg { position: fixed; z-index: 10000; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5);}

.t-ellipsis {display: flex;}
.t-ellipsis > div  {display: flex; flex: 1; width: 1px; justify-content: center;}
.ta_center .t-ellipsis > div {justify-content: center;}
.ta_left .t-ellipsis > div {justify-content: flex-start;}
.ta_right .t-ellipsis > div {justify-content: flex-end;}
.t-ellipsis > div > div {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;word-break: break-all;}

/* tree js custom*/
.tree-box { background-color: var(--gray-100); padding: 20px; border-radius: 4px; height: 400px;}
.jstree-default .jstree-node, .jstree-default .jstree-icon {
    background-image: url(../js/jstree/32px.png);
}

@media screen and (max-width: 1480px) {
    .tree-box { height: initial; }
    .w_md_half { width: 50% !important;}
    .w_md_full { width: 100% !important;}
}