@charset "utf-8";

/*
 * 프로젝트		:	헬로 컴퍼니 패키지 프로젝트
 * 파일			:	component.css
 * 작성자		:	이영재
 * 날짜			:	2020년 2월
 * 설명			:	버튼, 테이블, 게시판, 기본 블릿, 텍스트, 타이틀, form 요소 공통 스타일, 메인 컬러 #5060b3
 */



 /* :: 전역 공통 컴포넌트 클래스

-----------------------------*/
.notiPs:before {content: "*"; color: #e63643; font-weight: bold; margin-right: 3px; vertical-align: top; font-size: 1.2rem;}
.ps:after {content: "*"; color: #e63643; font-weight: bold; margin-left: 3px; vertical-align: top; font-size: 1.2rem;}
.schResult {font-size:1.3rem; padding:0 5px;}

/* 말줄임 */
.ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ellipsis2 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-top:2px;} 

/* 강조 */
.empa {position: relative;}
.empa:after {content:'*'; color: var(--redColor); margin-left: 3px;}

/* 검색아이템 */
.sch-itemWrap {display: flex; align-items: center; flex-wrap: wrap;}
.sch-item {display: flex; align-items: center; margin-bottom: 8px;}
.sch-item > * {margin-right: 10px;}
.schItem-tit {position: relative; display: inline-block; margin-left: 5px; padding-left: 10px; line-height: 32px; font-size: 13px; font-weight: bold;}
.schItem-tit:before {content:''; position:absolute; top:13px; left:0; width:5px; height:5px; border-radius:50%; background:var(--mainColor);}

.warningP {background: rgba(239, 83, 80, .1);  padding: 5px 13px 5px 8px; border-radius: 15px; display: flex; align-items: center; font-weight: bold;}
.warningP i {margin-right: 3px; color: var(--redColor);}

.infoP {background: #e5f0ff; padding: 8px 15px; border-radius: 15px; display: flex; align-items: center; font-weight: bold;}
.infoP i {margin-right: 3px; color: var(--mainColor);}




 /* :: title style
-----------------------------*/
.tit-inq {float:left;display:inline-block;padding:0 10px!important;line-height:32px;font-size:13px;
			background-image:url("/static/images/common/icon_bull3.png"); background-position: left center; background-repeat:no-repeat;}
.bullet-tit {position:absolute; display:inline-block; padding:5px 0 0 12px !important;line-height:28px;font-size:13px;/* background:url("/static/images/common/icon_bull.png") left 11px no-repeat; */}
.bullet-tit.type02 {position:static;}
.bullet-tit:before  {content: ''; position: absolute; top: 16px; left: 0;  width: 6px; height: 6px; border-radius: 50%; background: #ffbd00; background: var(--mainColor);}



 /* :: hover tooltip Init style
-----------------------------*/
.hoverTooltipBtn {cursor: pointer; position: relative; -o-transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; -webkit-font-smoothing: antialiased;}
.hoverTooltipBtn .hoverTooltip {color: var(--he-base); position: absolute; top: 0; right: -20px; z-index: -1; font-size: 12px; border-radius: 15px; background: var(--he-gray-500); display: inline-block; padding: 0 10px;
											visibility:hidden; opacity:0; -o-transition:all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.hoverTooltipBtn .hoverTooltip:before {content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--he-gray-500); position: absolute; top: 6px; left: -7px; transform: rotate(90deg);}
.hoverTooltipBtn:hover .hoverTooltip {right: 0; visibility: visible; opacity: 1; z-index: 1;}



 /* :: 데이터 없을시
-----------------------------*/
 .empty-state {display: flex; justify-content: center; align-items: center; border-bottom: none !important; background: url(/static/images/common/icon_empty.png) no-repeat top 40% center; background-size: 50px auto; height: 100%;}
 .empty-state:hover {border:none !important;}
 .empty-state-copy {padding-top: 50px !important; font-size: 13px; color: #414141;}
 
 
 
 /* :: 프로필사진
-----------------------------*/
.profile-img {position: relative; display: flex; background-color:#fff; color: var(--grayLightColor); align-items: center; justify-content: center; flex-shrink: 0; isolation: isolate;
					-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjUgMTAwQzAuNSA3OS40MjM5IDEuNjAzMTcgNjIuOTIzNSA0LjUzMjYyIDQ5Ljc0MjFDNy40NjA4MiAzNi41NjY0IDEyLjIwNzEgMjYuNzM3NSAxOS40NzIzIDE5LjQ3MjNDMjYuNzM3NSAxMi4yMDcxIDM2LjU2NjQgNy40NjA4MiA0OS43NDIxIDQuNTMyNjJDNjIuOTIzNSAxLjYwMzE3IDc5LjQyMzkgMC41IDEwMCAwLjVDMTIwLjU3NiAwLjUgMTM3LjA3NyAxLjYwMzE3IDE1MC4yNTggNC41MzI2MkMxNjMuNDM0IDcuNDYwODIgMTczLjI2MiAxMi4yMDcxIDE4MC41MjggMTkuNDcyM0MxODcuNzkzIDI2LjczNzUgMTkyLjUzOSAzNi41NjY0IDE5NS40NjcgNDkuNzQyMUMxOTguMzk3IDYyLjkyMzUgMTk5LjUgNzkuNDIzOSAxOTkuNSAxMDBDMTk5LjUgMTIwLjU3NiAxOTguMzk3IDEzNy4wNzcgMTk1LjQ2NyAxNTAuMjU4QzE5Mi41MzkgMTYzLjQzNCAxODcuNzkzIDE3My4yNjIgMTgwLjUyOCAxODAuNTI4QzE3My4yNjIgMTg3Ljc5MyAxNjMuNDM0IDE5Mi41MzkgMTUwLjI1OCAxOTUuNDY3QzEzNy4wNzcgMTk4LjM5NyAxMjAuNTc2IDE5OS41IDEwMCAxOTkuNUM3OS40MjM5IDE5OS41IDYyLjkyMzUgMTk4LjM5NyA0OS43NDIxIDE5NS40NjdDMzYuNTY2NCAxOTIuNTM5IDI2LjczNzUgMTg3Ljc5MyAxOS40NzIzIDE4MC41MjhDMTIuMjA3MSAxNzMuMjYyIDcuNDYwODIgMTYzLjQzNCA0LjUzMjYyIDE1MC4yNThDMS42MDMxNyAxMzcuMDc3IDAuNSAxMjAuNTc2IDAuNSAxMDBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K); -webkit-mask-size: contain;}
.profile-img img {width: 100%; height: 100%; object-fit: cover; border-radius: inherit;}
.profile-img::before {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgb(36, 42, 48); border-radius: inherit; opacity: 0; transition: all 0.15s ease 0s; pointer-events: none;}
.profile-img::after {background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTAuNSAxMDBDMC41IDc5LjQyMzkgMS42MDMxNyA2Mi45MjM1IDQuNTMyNjIgNDkuNzQyMUM3LjQ2MDgyIDM2LjU2NjQgMTIuMjA3MSAyNi43Mzc1IDE5LjQ3MjMgMTkuNDcyM0MyNi43Mzc1IDEyLjIwNzEgMzYuNTY2NCA3LjQ2MDgyIDQ5Ljc0MjEgNC41MzI2MkM2Mi45MjM1IDEuNjAzMTcgNzkuNDIzOSAwLjUgMTAwIDAuNUMxMjAuNTc2IDAuNSAxMzcuMDc3IDEuNjAzMTcgMTUwLjI1OCA0LjUzMjYyQzE2My40MzQgNy40NjA4MiAxNzMuMjYyIDEyLjIwNzEgMTgwLjUyOCAxOS40NzIzQzE4Ny43OTMgMjYuNzM3NSAxOTIuNTM5IDM2LjU2NjQgMTk1LjQ2NyA0OS43NDIxQzE5OC4zOTcgNjIuOTIzNSAxOTkuNSA3OS40MjM5IDE5OS41IDEwMEMxOTkuNSAxMjAuNTc2IDE5OC4zOTcgMTM3LjA3NyAxOTUuNDY3IDE1MC4yNThDMTkyLjUzOSAxNjMuNDM0IDE4Ny43OTMgMTczLjI2MiAxODAuNTI4IDE4MC41MjhDMTczLjI2MiAxODcuNzkzIDE2My40MzQgMTkyLjUzOSAxNTAuMjU4IDE5NS40NjdDMTM3LjA3NyAxOTguMzk3IDEyMC41NzYgMTk5LjUgMTAwIDE5OS41Qzc5LjQyMzkgMTk5LjUgNjIuOTIzNSAxOTguMzk3IDQ5Ljc0MjEgMTk1LjQ2N0MzNi41NjY0IDE5Mi41MzkgMjYuNzM3NSAxODcuNzkzIDE5LjQ3MjMgMTgwLjUyOEMxMi4yMDcxIDE3My4yNjIgNy40NjA4MiAxNjMuNDM0IDQuNTMyNjIgMTUwLjI1OEMxLjYwMzE3IDEzNy4wNzcgMC41IDEyMC41NzYgMC41IDEwMFoiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1vcGFjaXR5PSIwLjEiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K);
	background-size: cover; content: ""; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3;}

 
 

 /* :: table style
-----------------------------*/
table thead tr th.nowrap {white-space: nowrap; overflow: auto;}
table tbody tr td.nowrap {white-space: nowrap; overflow: auto;}
table tbody tr td.maxWidth {max-width: 250px;}
.tb-wrap.type02 {border-top:2px solid var(--mainColor);}
.tb-wrap.type03 {border-top:2px solid var(--mainColor);}

.tb-st *::-webkit-scrollbar {width: 8px; height: 8px;}
.tb-st *::-webkit-scrollbar-thumb {border-radius: 3px; background: #c4c6c8;}
.tb-st *::-webkit-scrollbar-track {background: #e9ecef;}
.tb-st {width:100%; table-layout:fixed; border-top:1px solid #d4d5d6; border-left:1px solid #d4d5d6;}
.tb-st th {box-sizing:border-box; height:45px; padding:8px !important; border-bottom:1px solid #d4d5d6; border-right:1px solid #d4d5d6; text-align:left; background:#f6f8fc;}
.tb-st td {box-sizing:border-box; height:45px; padding:8px !important; border-bottom:1px solid #d4d5d6; border-right:1px solid #d4d5d6; text-align:left;}
.tb-st th {min-width: 130px;}
.tb-st td {min-width: 200px;}
.tb-st td.txtOnly {padding:7px 10px; word-break: break-all;}
.tb-st th > .addFrm-tit {width:170px;}
.tb-st td.addFrm-Con {padding: 7px 10px;}
.tb-st tr:last-child th {border-bottom:1px solid #d4d5d6;}
.tb-st tr:last-child td {border-bottom:1px solid #d4d5d6;}
.tb-st.type02 th {text-align:center;}
.docpaper {max-height: 85px; overflow-y: auto;}
.tb_bc_sepa{border-collapse: separate;}

.tb-wrap.narrow {border-top:2px solid var(--mainColor); border-right:1px solid #d4d5d6;}
.tb-wrap.narrow th,
.tb-wrap.narrow td {height:40px; text-align:center; border-right:none; word-break: break-all;}
.tb-wrap.narrow th {border-bottom:1px solid #d4d5d6;}
.tb-wrap.narrow tr:hover td {transition:.3s; background:#e7ecf5; cursor:pointer;}

.appr-table {width:100%;}
.appr-table table {table-layout:fixed; width:100%; border-left:1px solid #d4d5d6;}
.appr-table table th,
.appr-table table td {height:auto; padding:6px; border-top:1px solid #d4d5d6; border-bottom:1px solid #d4d5d6; border-right:1px solid #d4d5d6; text-align:center;}
.appr-table table th {line-height:1.6;}
.appr-table table th:before {display:none !important;}



 /* :: paging style
-----------------------------*/
.pd-T-3 {padding: 3px 0;}
.pagingLst:not(.editorWrap *) {text-align:center; padding-top:30px;}
.pagingLst li:not(.editorWrap *) {display:inline-block; width:35px; text-align:center;}
.pagingLst li a:not(.editorWrap *),
.pagingLst li span:not(.editorWrap *) {width:23px; height:23px; line-height:23px; display:inline-block; border-radius:50%;}
.pagingLst li .pagingNow:not(.editorWrap *){background:#666; color:#fff;}



 /* :: tab style
-----------------------------*/
.tab-depth01{position:relative;border-bottom:1px solid #e5e5e5; border-top:1px solid #e5e5e5;}
.tab-depth01.type02 {margin-bottom:40px;}
.tab-depth01:after {content:'';display:block;visibility:hidden;height:0;clear:both;}
.tab-depth01 > li {float:left; margin-left:15px;}
.tab-depth01 > li:first-child {margin-left:0;}
.tab-depth01 .btn-tab {display:block; color:#555; font-size:12px;font-weight:bold;  padding:8px 15px;}
.tab-depth01 .on .btn-tab{border-bottom:3px solid #dd042b; color:#dd042b; padding:8px 15px 5px 15px;}

.tab-depth02{display:none;position:absolute;bottom:-30px;left:0;right:0;border-bottom:1px dashed #ebebf0}
.tab-depth02:after{content:'';display:block;visibility:hidden;height:0;clear:both}
.tab-depth01 .on .tab-depth02{display:block}
.tab-depth02 > li{float:left;margin:0 10px 2px}
.tab-depth02 .btnTab2{display:block;}
.tab-depth02 .btnTab2:after{content:' ▼'}
.tab-depth02 .on .btnTab2{color:#41515d;font-weight:bold}

.tabBtn{position:absolute;top:0px;right:0}
.tab-contents {width:100%;overflow-y:auto;}

.tab-depth03 {}
.tab-depth03 li {float:left; margin-left:3px;}
.tab-depth03 li:first-child {margin-left:0;}
.tab-depth03 li .btn-tab {display:block; border:1px solid #cbcbcb; padding:0 13px; height:23px; line-height:23px; border-radius:5px; color:#555; background-color:#fff;}
.tab-depth03 .on .btn-tab{background-color:#123b66; color:#fff; border:none; height:25px; line-height:25px;}



 /* :: button style
-----------------------------*/
.btn {display: inline-flex; padding: 0 15px; align-items: center; background: #fff; border: 1px solid transparent; border-radius: 4px; box-shadow: 0 0 0 0 rgb(36 42 48 / 0%), 0 0 0 1px rgb(36 42 48 / 14%); box-sizing: border-box; color: #3c4651; cursor: pointer; flex-shrink: 0; font-size: 13px; font-weight: 600; height: 32px; justify-content: center; min-width: 32px; outline: none; white-space: nowrap;transition:.3s;}
.btn:hover {color: #878787 !important; box-shadow: 0 0 0 0 rgb(36 42 48 / 0%), 0 0 0 1px rgb(36 42 48 / 10%);}
.btn-primary {color: #fff !important; background-color: #1677ff; box-shadow: 0 2px 0 rgb(5 145 255 / 10%);}
.btn-primary > i {margin-right: 4px;}
.btn-primary:hover {color: #fff !important; background-color: #4096ff;}
.btn-dangerous {color: #ff4d4f !important; border-color: #ff4d4f;}
.btn-dangerous > i {margin-right: 4px;}
.btn-dangerous:hover {color: #ff7875 !important; border-color: #ffa39e;}
.iconSearch {padding:0 17px 0 30px !important; background-image:url("/static/images/common/icon_search_white.png"); background-repeat:no-repeat; background-position:center left 14px; background-size:12px auto;}
.iconSearchGray {padding:0 17px 0 30px !important; background-image:url("/static/images/common/icon_search_gray.png"); background-repeat:no-repeat; background-position:center left 14px; background-size:12px auto;}
.iconChecked {padding:0 17px 0 30px !important; background-image:url("/static/images/common/icon_checked.png"); background-repeat:no-repeat; background-position:center left 14px; background-size:12px auto;}
.iconCancel {padding:0 17px 0 30px !important; background-image:url("/static/images/common/icon_x.png"); background-repeat:no-repeat; background-position:center left 14px; background-size:12px auto;}

.has-btn {position:relative;padding-right:68px;}
.has-btn .btn {position:absolute;right:0;top:0;}

.fileBtn {color:#da291c;}

.btnComm {display: inline-block; text-align: center; cursor: pointer; border-radius:3px; box-sizing: border-box; line-height: 32px; padding: 0 15px; vertical-align: top; transition: .3s;}
.btnComm i {margin-right: 3px;}

.btnComm.st01 {background-color: var(--mainColor); color: #fff;}
.btnComm.st01:hover {background-color: var(--mainonColor);}
.btnComm.st02 {background-color: #fff; box-shadow: inset 0px 0px 0px 1px var(--mainColor); color: var(--mainColor);}
.btnComm.st02:hover {background-color: var(--gray-200);}
.btnComm.st03 {background-color: #fff; box-shadow: inset 0px 0px 0px 1px var(--gray-500); color: var(--gray-600);}
.btnComm.st03:hover {background-color: var(--gray-300);}
.btnComm.st04 {background-color: var(--gray-500); color: #fff;}
.btnComm.st04:hover {background-color: var(--gray-600);}
.btnComm.st05 {background-color: #fff; box-shadow: inset 0px 0px 0px 1px var(--redColor); color: var(--redColor);}
.btnComm.st05:hover {background-color: #fef2f2;}


.btnSm {display: inline-block; text-align: center; cursor: pointer; border-radius: 50px; height: 30px; line-height: 30px; padding: 0 15px; transition: .3s;}
.btnSm:hover {border-radius: 5px;}
.btnSm i {margin-right: 5px;}

.btnSm.st01 {background-color: var(--mainColor); color: #fff;}
.btnSm.st01:hover {background-color: var(--mainonColor);}

.btnSm.st02 {box-shadow: inset 0px 0px 0 1px var(--mainColor); color: var(--mainColor);}
.btnSm.st02:hover {background-color: var(--gray-100);}

.btnSm.st03 {background-color: var(--redColor); color: #fff;}
.btnSm.st03:hover {background-color: var(--darkRedColor);}

.btnSm.st04 {background-color: var(--grayDarkColor); color: #fff;}
.btnSm.st04:hover {background-color: var(--grayDeepDarkColor);}

.btn-outline{height: 32px; width: auto; color: var(--grayDarkColor); padding:0 10px 0 8px;  border: 1px solid var(--gray-300); border-radius: 3px; transition: all ease-in 0.15s;}
.btn-outline.primary {border-color: rgba(var(--mainColor-rgb), 0.45); color: var(--mainColor);}
.btn-outline.primary:hover {color:var(--mainonColor); border-color: var(--mainonColor);}
.btn-outline.secondary:hover {border-color: var(--gray-600);}

 /* :: treeGrid Button style
-----------------------------*/
.treeButton {box-shadow: inset 0px 1px 0px 0px #ffffff; border-radius: 3px; border: 1px solid rgba(197,197,197,.5); display: inline-block; cursor: pointer; padding-left: 28px; padding-right: 9px; height: 28px; line-height: 28px !important;
					text-decoration: none; text-shadow: 0px 1px 0px #ffffff; background-color: rgba(244, 244, 252, .3); background-repeat: no-repeat; background-position: left 8px center;}
.treeButton.no-icon {padding-left: 9px;}
.treeButton:hover {-moz-box-shadow:inset 0px 1px 0px 0px #fafafa; -webkit-box-shadow:inset 0px 1px 0px 0px #fafafa; box-shadow:inset 0px 1px 0px 0px #fafafa; background-color:#f0f0f0; transition:0.3s;}

/* 추가 */ .treeButton.treeAdd {background-image:url("/static/images/treeIcon/tree_add_icon.png");}
/* 일괄상신(결재) */ .treeButton.treeAllreport {background-image:url("/static/images/treeIcon/tree_allreport_icon.png");}
/* 승인 */ .treeButton.treeApproval {background-image:url("/static/images/treeIcon/tree_approval_icon.png");}
/* 기본 */ .treeButton.treeBasic {background-image:url("/static/images/treeIcon/tree_basic_icon.png");}
/* 취소 */ .treeButton.treeCancel {background-image:url("/static/images/treeIcon/tree_cancel_icon.png");}
/* 변경 */ .treeButton.treeChange {background-image:url("/static/images/treeIcon/tree_change_icon.png");}
/* 체크 */ .treeButton.treeChk {background-image:url("/static/images/treeIcon/tree_chk_icon.png");}
/* 해제 */ .treeButton.treeClear {background-image:url("/static/images/treeIcon/tree_clear_icon.png");}
/* 삭제 */ .treeButton.treeDelete {background-image:url("/static/images/treeIcon/tree_delete_icon.png");}
/* 엑셀 */ .treeButton.treeExcel {background-image:url("/static/images/treeIcon/tree_excel_icon.png");}
/* 폴더접기 */ .treeButton.treeFolderClose {background-image:url("/static/images/treeIcon/tree_folder_close_icon.png");}
/* 폴더열기 */ .treeButton.treeFolderOpen {background-image:url("/static/images/treeIcon/tree_folder_open_icon.png");}
/* 숨김 */ .treeButton.treeHide {background-image:url("/static/images/treeIcon/tree_hide_icon.png");}
/* 불출 */ .treeButton.treeLend {background-image:url("/static/images/treeIcon/tree_lend_icon.png");}
/* 라인변경 */ .treeButton.treeLineChange {background-image:url("/static/images/treeIcon/tree_lineChange_icon.png");}
/* 수정 */ .treeButton.treeModify {background-image:url("/static/images/treeIcon/tree_modify_icon.png");}
/* 이관 */ .treeButton.treeMove {background-image:url("/static/images/treeIcon/tree_move_icon.png");}
/* 주문 */ .treeButton.treeOrder {background-image:url("/static/images/treeIcon/tree_order_icon.png");}
/* 주문취소 */ .treeButton.treeOrderCancel {background-image:url("/static/images/treeIcon/tree_orderCancel_icon.png");}
/* QR인쇄 */ .treeButton.treeQrprint {background-image:url("/static/images/treeIcon/tree_qrprint_icon.png");}
/* 등록 */ .treeButton.treeRegister {background-image:url("/static/images/treeIcon/tree_register_icon.png");}
/* 반려 */ .treeButton.treeReject {background-image:url("/static/images/treeIcon/tree_reject_icon.png");}
/* 상신 */ .treeButton.treeReport {background-image:url("/static/images/treeIcon/tree_report_icon.png");}
/* 반납 */ .treeButton.treeReturn {background-image:url("/static/images/treeIcon/tree_return_icon.png");}
/* SAP */ .treeButton.treeSAP {background-image:url("/static/images/treeIcon/tree_sap_icon.png");}
/* 저장 */ .treeButton.treeSave {background-image:url("/static/images/treeIcon/tree_save_icon.png");}
/* 선택 */ .treeButton.treeSelect {background-image:url("/static/images/treeIcon/tree_select_icon.png");}
/* 전송 */ .treeButton.treeSend {background-image:url("/static/images/treeIcon/tree_send_icon.png");}
/* 설정 */ .treeButton.treeSetting {background-image:url("/static/images/treeIcon/tree_setting_icon.png");}
/* 이미지등록 */ .treeButton.treeAddImg {background-image:url("/static/images/treeIcon/tree_addImg_icon.png");}
/* 좌석배치 */ .treeButton.treeBring {background-image:url("/static/images/treeIcon/tree_bring_icon.png");}
/* 체크 */ .treeButton.treeChecked {background-image:url("/static/images/treeIcon/tree_checked_icon.png");}
/* 자물쇠 */ .treeButton.treeUnlock {background-image:url("/static/images/treeIcon/tree_unlock_icon.png");}
/* 보기 */ .treeButton.treeView {background-image:url("/static/images/treeIcon/tree_view_icon.png"); background-size: 18px auto; background-position: left 8px center; padding-left: 30px;}
/* 제외 */ .treeButton.treeMinus {background-image:url("/static/images/treeIcon/tree_minus_icon.png");}


/* icon */
.btn > .icon {vertical-align:middle;}
td .icon {display:inline-block !important;width:20px;padding:10px 0;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px;cursor:pointer; vertical-align:middle}
td .icon.add {background:url('/static/images/treeIcon/add_icon.png') no-repeat center center;background-size:20px auto;}
td .icon.checked {background:url('/static/images/treeIcon/checked_icon.png') no-repeat center 3px;background-size:auto 10px;}
td .icon.delete {background:url('/static/images/treeIcon/delete_icon.png') no-repeat center center;background-size:auto 20px;}
td .icon.download {background:url('/static/images/treeIcon/download_icon.png') no-repeat center center; background-size:auto 12px; vertical-align: middle; width:15px;height:15px;}
td .icon.excel {background:url('/static/images/treeIcon/excel_icon.png') no-repeat center center;background-size:20px auto;}
td .icon.holiday {background:url('/static/images/treeIcon/holiday_icon.png') no-repeat center center;background-size:auto 20px;}
td .icon.printer {background:url('/static/images/treeIcon/printer_icon.png') no-repeat center center;background-size:20px auto;}
td .icon.refresh {background:url('/static/images/treeIcon/refresh_icon.png') no-repeat center center;background-size:20px auto;}
td .icon.save {background:url('/static/images/treeIcon/save_icon.png') no-repeat center center;background-size:20px auto;}
td .icon.search {background:url('/static/images/treeIcon/search_icon.png') no-repeat center center;background-size:auto 20px;}
td .icon.switch {background:url('/static/images/treeIcon/switch_icon.png') no-repeat center center;background-size:20px auto;}

.btn.fnc-st01 {display:inline-block;line-height:1.0;padding:5px 12px;border:1px solid #cccccc;background:#fff;color:#5f6164;font-size:12px;font-weight:normal;text-align:center;cursor:pointer;outline:none;}
.btn.fnc-st01:hover {background:#fcfcfc;}
.btn.fnc-st02 {display:block;line-height:1.0;padding:5px 12px;border:1px solid #ff8714;background:#ff8714;color:#ffffff;font-size:12px;font-weight:normal;cursor:pointer;outline:none;}
.btn.fnc-st02:hover {border:1px solid #b25e0e;background:#b25e0e;}
.btn.evn-st01 {width:auto;height:20px;line-height:21px;padding:0 10px;background:#fff;border:1px solid #ff8714;color:#ff8714 !important;font-size:12px;vertical-align:top;cursor:pointer}
.btn.evn-st01.type02 {height:25px;line-height:25px;}
.btn.evn-st02 {width:auto;height:22px;line-height:22px;padding:0 20px;background:#ff8714;color:#ffffff !important;font-size:12px;vertical-align:top;cursor:pointer;}
.main-btn {background:#f76e54;border-radius:3px;line-height:21px;}
.jquery-filestyle {display:inline-block !important;height:15px;line-height:17px;padding:4px 0;border-radius:0;border:1px solid #ff8714;background-color:#ffffff;color:#ff8714 !important;font-size:12px;vertical-align:top;cursor:pointer;}
.jquery-filestyle label{padding:0 20px}
.jquery-filestyle * {color:inherit !important;vertical-align:top;cursor:pointer}



 /* :: form 관련
-----------------------------*/

/* form 요소 공통 스타일 */
input,textarea{display:block;width:100%;border:none;background:none;outline:none;resize:none}
.checkboxInline {display:inline-block; width:auto; margin-bottom:2px;}
.input-flex {display: flex;align-items: center;}
.label--cursor-default {cursor:default !important;}

/* input type text */
.inp-wrap {position:relative; display:inline-block; box-sizing:border-box; border:1px solid #d4d5d6; background:#fff; padding:0 10px;}
.inp-wrap2 {position:relative; box-sizing:border-box; border:1px solid #d4d5d6; background:#fff; padding:0 10px;}
.inp-comm {width:100%; border:0; font-size:1.3rem; height:30px; line-height:30px;}
.inp-wrap.schIcon {background-image: url("/static/images/common/icon_search_red.png"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px auto;}

/* text+button */
.inp-hasBtn .inp-wrap {width:calc(100% - 129px);}
.inp-hasBtn a {margin-left:5px; min-width:120px;}

 /* 데이터피커 영역 */
.prd-inp-wrap {/* display:inline-block; */ width:260px; overflow:hidden;}
.prd-inp {position:relative; float:left; display:inline-block; width: 50%;}
.prd-inp .inp-wrap {margin:0 10px;}
.prd-inp:first-child .inp-wrap {margin-left:0;}
.prd-inp:nth-child(2):before {content:"~"; display:block; z-index:1; position:absolute; left:-5px; top:0; color:#828282; line-height:34px;}
.prd-inp:nth-child(2) .inp-wrap {margin-right:0;}
.datepicker,
.datePic, .datePic2 {background:#fff url("/static/images/common/icon_cal.png") no-repeat right center; background-size:16px auto; cursor:pointer;}

/* 시간피커 영역 */
.timePic {background:#fff url("/static/images/common/icon_clock.png") no-repeat right center; background-size:17px auto; cursor:pointer;}

/* textarea */
.txt-wrap {padding:10px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#fff; border:1px solid #d4d5d6;}
.txt-wrap textarea {font-size:1.3rem; line-height:1.5;}

.autosize {min-height:150px;}
.autosize textarea {min-height:150px; width:100%; resize:none; overflow-y:hidden; line-height:1.6;}

/* select */
.sel-wrap {box-sizing:border-box; background-color:#fff;border:1px solid #d4d5d6;cursor:pointer; padding-right:4px !important;}
.sel-wrap select {display:block; width:100%; height:30px; line-height:30px; border:none; background:none; outline:none; font-size:1.2rem; padding:0 5px;}
.sel-wrap select:required:invalid {color: #989898;}
.sel-wrap option[value=""][disabled] {display: none;}
.sel-wrap option {color: #474646; font-size:1.3rem;}

.sel-wrap.type02 {padding-right:0;}

.sel-wrap.disabled {border:none; cursor:default;}
.sel-wrap.disabled select { /* for Firefox */ -moz-appearance: none;  /* for Chrome */ -webkit-appearance: none;}
.sel-wrap.disabled select::-ms-expand {/* For IE10 */ display: none;}

/* multi-items wrap */
.multi-items-wrap { display: flex; flex-direction: column;}

/* radio */
.switch-field {display: flex; overflow: hidden; position:relative;}
.switch-field input {position: absolute !important; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden;}
.switch-field label {background-color: #fff; text-align: center; padding: 5px 7px; margin-right: -1px; border: 1px solid var(--grayLightColor); transition: all 0.1s ease-in-out; min-width: 70px; line-height: 22px;}
.switch-field label:hover {cursor: pointer;}
.switch-field input:checked + label {background-color: var(--grayDarkColor); color:#fff; font-weight: bold;}
.switch-field label:first-of-type {border-radius: 4px 0 0 4px;}
.switch-field label:last-of-type {border-radius: 0 4px 4px 0;}
.switch-field label:last-child {margin-right:0;}

.switch-tit {color:#84868d; font-size:1.2rem; font-weight:300; position:absolute; pointer-events:none; left:15px; top:9px;}

/* checkbox */
.chk-flex {display: flex; min-height: 34px; align-items: center;}
.chk-flex .chk-wrap {margin-left:15px;}
.chk-flex .chk-wrap:first-of-type {margin-left:0;}
.chk-wrap {min-width:8px;}
.chk-wrap.basic input[type="checkbox"] {display:block;} /* custom이 아닌 기본 스타일 사용시 */
.chk-wrap input[type="checkbox"] {display:none;}
.chk-wrap input[type="checkbox"] + label {/* display:flex;  */color:#474646; font-size:1.3rem; cursor:pointer;}
.chk-wrap input[type="checkbox"] + label span {display:inline-block; box-sizing: border-box; width:19px; height:19px; margin:0 5px 0 0; vertical-align:middle; border:1px solid #b6b6b6; background-color:#fff; border-radius:2px;}
.chk-wrap input[type="checkbox"]:checked + label span {border-color:var(--blueColor); background-color:var(--blueColor); background-image:url("/static/images/common/icon_checked.png"); background-repeat:no-repeat; background-position: center center; background-size: 11px auto;}
.chk-wrap input[type="checkbox"]:checked + label {font-weight: bold;}

.tb-chk-area {overflow:hidden;}
.tb-chk-area .chk-st {float:left; margin-right:20px;}
.tb-chk-area .chk-st input[type="checkbox"] {display:inline-block; width:20px;}

/* radio */
.radio-flex {display: flex; min-height: 24px; align-items: center;}
.radio-flex .radio-wrap {margin-left:15px;}
.radio-flex .radio-wrap:first-of-type {margin-left:0;}
.radio-wrap {min-width:8px;}
.radio-wrap.basic input[type="radio"] {display:inline-block; width: auto; margin-top: -2px;} /* custom이 아닌 기본 스타일 사용시 */
.radio-wrap input[type="radio"] {display:none;}
.radio-wrap input[type="radio"] + label {font-size:13px; cursor:pointer;}
.radio-wrap input[type="radio"]:checked + label {font-weight: bold;}
.radio-wrap input[type="radio"] + label span {display:inline-block; width:17px; height:17px; border-radius:50%; margin:-3px 5px 0 0; vertical-align:middle; border:1px solid #b6b6b6; background-color:#fff;}
.radio-wrap input[type="radio"]:checked + label span {border-color:var(--blueColor); background-color:var(--blueColor); background-image:url("/static/images/common/icon_checked.png"); background-repeat:no-repeat; background-position: center center; background-size: 10px auto;}


/* 버튼 그룹 */
.btn-field {display: flex; overflow: hidden; position:relative; margin:8px 0;}
.btn-field button {background-color: #fff; font-size: 1.3rem; line-height: 1; text-align: center; padding: 8px 8px 6px;
							border: 1px solid rgba(0, 0, 0, 0.2); transition: all 0.1s ease-in-out; margin-left:-1px;}
.btn-field button:first-child {margin-left:0;}
.btn-field button.checked {background-color: #5060b3 !important; color:#fff;}
.btn-field button:first-of-type {border-radius: 4px 0 0 4px;}
.btn-field button:last-of-type {border-radius: 0 4px 4px 0;}

/* 검색,조회 영역-기본 레이아웃 */
.wrap-inq {float:left; display:block; height:32px; line-height:32px;}
.wrap-inq.type02 {float:none;}
.wrap-inq > * {display:inline-block; float:left; margin-right:5px !important;}
.wrap-inq > .inq-clmn > div {float:left; display:inline-block;}
.inq-txt {line-height: 34px; font-size: 13px; font-weight:bold;}

/* material form */
.materialFormWrap {}

/*Form Design*/
.materialFormWrap .form-group {position:relative;}
.materialFormWrap .form-group input {background:#fff; padding:0 8px; display:block; height:32px; line-height:32px; width:100%; border:1px solid #d4d5d6; box-sizing: border-box;}
.materialFormWrap .form-group P {margin:8px 5px 0;}
.materialFormWrap .form-group input.type02 {background:#fff; padding:0; display:block; height:32px; line-height:32px; width:100%; border: 0; box-sizing: border-box;}
.materialFormWrap .form-group input:focus {outline:none;}
/* Label Design */
.materialFormWrap .form-group label {color:#84868d; font-size:1.2rem; font-weight:300; position:absolute; pointer-events:none;
										left:5px; top:-18px; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all;}
/* Active state */
.materialFormWrap .form-group input:focus ~ label,
.materialFormWrap .form-group input:valid ~ label {top:-18px; font-size:1.2rem; color:#84868d; font-weight:300;}
.materialFormWrap .form-group input:focus ~ label {top:-19px; color:#5060b3; font-weight:bold;}

/* Underlining Bars */
.materialFormWrap .form-group .bar {position:relative; display:block; width:100%;}
.materialFormWrap .form-group .bar:before,
.materialFormWrap .form-group .bar:after {content:''; height:1px; width:0; bottom:0; position:absolute; background: var(--mainColor);
												transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all;}
.materialFormWrap .form-group .bar:before {left:50%;}
.materialFormWrap .form-group .bar:after {right:50%;}
/* active state */
.materialFormWrap .form-group input:focus ~ .bar:before,
.materialFormWrap .form-group input:focus ~ .bar:after {width:50%;}
/* Highlighter */
.materialFormWrap .form-group .highlight {position:absolute; height:100%; width:0; top:0; left:0; pointer-events:none; opacity:0.1;}
/* active state */
.materialFormWrap .form-group input:focus ~ .highlight {-webkit-animation:inputHighlighter 0.6s ease; -moz-animation:inputHighlighter 0.6s ease; animation:inputHighlighter 0.6s ease;}

.form-group.schIcon input {background-color:#fff; background-image: url("/static/images/common/icon_search_red.png"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px auto;}

/** Animations **/
 @-webkit-keyframes inputHighlighter {
    from {
        background:#5060b3;
    }
    to {
        width:100%;
        background:transparent;
    }
}
@-moz-keyframes inputHighlighter {
    from {
        background:#5060b3;
    }
    to {
        width:100%;
        background:transparent;
    }
}
@keyframes inputHighlighter {
    from {
        background:#5060b3;
    }
    to {
        width:100%;
        background:transparent;
    }
}

.materialFormWrap .form-group.readInput {}
.materialFormWrap .form-group.readInput input {border:none; padding:0;}
.materialFormWrap .form-group.readInput .bar,
.materialFormWrap .form-group.readInput .highlight {display:none;}


/* 첨부파일-토글 (공지사항 view) */
.attachFileWrap {z-index:1;}
.attachFileWrap .attachFileTit {font-weight: bold; font-size: 13px; height:20px; line-height:20px;}
.attachFileWrap .attachFileTit .ab {cursor: pointer;}
.attachFileWrap .showAttLstBtn {font-size: 14px; margin-left:3px;}
.attachFileWrap .attachFileLst {background:#fff;}
.attachFileWrap .attachFileLst i {margin-right: 2px;}
.attachFileWrap .attachFileLst li {display: flex; background-color: #fff; align-items: center; border: 1px solid #d8d8d8; border-top: none; padding: 4px 5px;}
.attachFileWrap .attachFileLst li:first-child {border-top:1px solid #d8d8d8;}
.attachFileWrap .attachFileLst li a:hover span {text-decoration: underline;}
.attachFileWrap .attachDownBtn {display: block; overflow: hidden;}
.attachFileWrap .attachDownBtn span {height:15px; line-height:15px;}
.attachFileWrap .attachDownBtn .ellipsis {max-width:380px;}

.justifyContentFlexStart {justify-content: flex-start !important;}
.justifyContentFlexEnd {justify-content: flex-end !important;}

/* :: custom dropdown style
-----------------------------*/
.custom-dropdown { position: relative; display: inline-block; cursor: pointer; user-select: none; }
.custom-dropdown-toggle { display: flex; align-items: center; border: 1px solid var(--gray-400); border-radius: 50px; padding: 0 15px; height: 30px; background-color: #fff; }
.custom-dropdown-toggle:hover { background-color: var(--gray-100); transition: .3s; }
.custom-dropdown-toggle img { width: 13px; height: auto; margin-top: -2px; margin-right: 3px; }
.custom-dropdown-toggle .count { margin-left: 8px; color: var(--blueColor); font-weight: bold; }
.custom-dropdown-toggle i.fa-chevron-down { margin-left: 10px; font-size: 11px; color: var(--gray-500); transition: transform ease .3s; }

.custom-dropdown-menu { display: none; position: absolute; top: calc(100% + 5px); left: 0; background-color: #fff; border: 1px solid var(--gray-400); border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 5px 0; z-index: 100; min-width: 100%; white-space: nowrap; }
.custom-dropdown-menu.show { display: block; }
.custom-dropdown:has(.custom-dropdown-menu.show) .custom-dropdown-toggle i.fa-chevron-down { transform: rotate(180deg); }
.custom-dropdown-item { display: flex; align-items: center; padding: 8px 15px; cursor: pointer; }
.custom-dropdown-item:hover { background-color: var(--gray-100); }
.custom-dropdown-item.selected { background-color: var(--gray-200); font-weight: bold; }
.custom-dropdown-item img { width: 13px; height: auto; margin-top: -2px; margin-right: 8px; }
.custom-dropdown-item .count { margin-left: auto; padding-left: 15px; color: var(--blueColor); font-weight: bold; }