@charset "utf-8";


/************************************** import **************************************/


@import url("../common/component.css");



/************************************** authority css **************************************/

.sec-wrap .info-detail { float: right; width:49%; overflow: hidden; transition: width 0.25s ease; }
.sec-wrap .mapping-detail { float: left; width:49%; overflow: hidden; transition: width 0.25s ease; }

.sec-wrap .mapping-table .info-detail { float: right; }
.sec-wrap .mapping-table .mapping-detail { float: left; }

.sec-wrap.editing .info-detail { width: 0%; }
.sec-wrap.editing .mapping-detail { width: 100%; }

/* 트리메뉴 */
.tree-table .tree-tit { position:relative; padding: 12px 10px; color: #3e3e3e; font-weight: 600; background: #e9e9e9; border-top: 1px solid #999; }
.tree-table .tree-tit > span.material-icons {font-size: 1.65rem; margin-right: 5px;}
.tree-table .tree-depth01 {background: #fff;}
.tree-table .tree-depth01 > ul.tree-depth02 {display: none;}
.tree-table .tree-depth01 .depth-box { position:relative; padding: 8px 10px; border-bottom: 1px solid #e1e1e1; cursor: pointer}
.tree-table .tree-depth01 .depth-box:hover {background: #f7f7f7;}
.tree-table .tree-depth01 .depth-box a > span.material-icons {font-size: 1.2rem; border-radius: 20px; margin-right: 5px; padding: 4px; position: relative; top: -1px;}
.tree-table .tree-depth01 .depth-box .tool-btn {position: absolute; right: 0; top: 0; font-size: 1.1rem; color: #ccc; border-left: 1px solid #dee3eb;}
.tree-table .tree-depth01 .depth-box .tool-btn i {font-size: 1.3rem; line-height: 38px; display: block; text-align: center; width: 38px; height:38px; }
.tree-table .tree-depth01.on .depth-box .tool-btn {transform: rotate(180deg); color:#222;}
.tree-table .tree-depth01.on .depth-box .tool-btn i { color: #00a2d9;}
.tree-table .tree-depth01.on .depth-box a {font-weight: 500; color: #00a2d9;}

.tree-table .tree-depth01.on > ul.tree-depth02 {display: block}
.tree-table .tree-depth01.on > ul.tree-depth02 li {padding: 6px 30px; font-size: 1.2rem;cursor: pointer; position: relative; background: #f5f5f5; border-bottom: 1px solid #e1e1e1;}
.tree-table .tree-depth01.on > ul.tree-depth02 li:hover {background: #f7f7f7;}
.tree-table .tree-depth01.on > ul.tree-depth02 li a {color: #828282}
.tree-table .tree-depth01.on > ul.tree-depth02 li a span.material-icons {font-size:1.35rem; margin-right: 5px;}
.tree-table .tree-depth01.on > ul.tree-depth02 li .tool-btn {position: absolute; right: 0; top: 0; font-size: 1.1rem; color: #ccc; border-left: 1px solid #dee3eb; text-align: center; display: block; }
.tree-table .tree-depth01.on > ul.tree-depth02 li .tool-btn i {width: 38px; height:30px; line-height: 30px; font-size: 11px;; }
.tree-table .tree-depth01.on > ul.tree-depth02 li.on a,
.tree-table .tree-depth01.on > ul.tree-depth02 li.on .tool-btn {color: #00a2d9;}


/* 메뉴 관리 */
.mapping-table .tree-table .tree-tit .tool-btn {position: absolute; right: 0; top: 0; font-size: 1.1rem; color: #ccc; width: 38px; height:44px; cursor: pointer; text-align: center;}
.mapping-table .tree-table .tree-tit .tool-btn {position: absolute; right: 0; top: 0; font-size: 1.1rem; color: #ccc; width: 38px; height:44px; cursor: pointer; text-align: center;}
.mapping-table .tree-table .tree-tit .tool-btn i {line-height: 44px; font-size: 14px; display: block; color: #3e3e3e; }
.mapping-table .tree-table .tree-depth01 .depth-box:hover { background: transparent;}
.mapping-table .tree-table .tree-depth01 .depth-box .tool-btn { width: 192px; }
.mapping-table .tree-table .tree-depth01 .depth-box .tool-btn i { float: left; }
.mapping-table .tree-table .tree-depth01 .depth-box .tool-btn i:hover { color: #323232; }
.mapping-table .tree-table .tree-depth01 > ul.tree-depth02 li .tool-btn { width: 192px; color: #ccc; }
.mapping-table .tree-table .tree-depth01 > ul.tree-depth02 li .tool-btn i { float: left; font-size:1.3rem; }
.mapping-table .tree-table .tree-depth01 > ul.tree-depth02 li .tool-btn i:hover { color: #323232; }
.mapping-table .tree-table .tree-depth01.on .depth-box .tool-btn {transform: rotate(0); }
.mapping-table .tree-table .tree-depth01 .depth-box .tool-btn i { color: #ccc; }