@charset "utf-8";

/*
 * Project		:	eAccounting Master
 * File			:	layout.css
 * Author		:	YoungJae Lee
 * Date			:	Sep. 2022
 * Description	:	vertical menu layout
 */


.vWrapper {background: var(--he-base);}



/* ---------------------
	:: vHeader
	--------------------- */
.vHeader {position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: var(--he-base);}
.vHeader-nav {display: flex; align-items: center; justify-content: space-between; height: 55px;}
.vHeaderLeftBox {flex-grow: 1;}
.vHeaderRightBox {flex-shrink: 0;}

/* :: header --- 공통 스타일 */
.vHeader-btn {cursor: pointer; color: var(--he-gray-600); transition: all .15s ease-in-out; padding: 0 10px; height: 55px; display: flex !important; align-items: center; flex-direction: column; justify-content: center;}
.vHeader-icon {height: 22px; line-height: 18px;}
.vHeader-name {font-size: 12px;}
#js-tglAlarmBtn.active {background: var(--he-main1); color: white;}

/* header --- 드롭다운 작동 스타일 */
.dropdownWrap {position: relative;}
.dropdownWrap .dropdownBtn {position: relative; display: block; cursor: pointer;}
.dropdownWrap .dropdownCon {position: absolute; top: 110%; right: 0; background: var(--he-base); min-width: 100%;  border-radius: 0 0 5px 5px; overflow:hidden; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.18); visibility:hidden; opacity:0; z-index: -1;
															-o-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.dropdownWrap.is-open .dropdownCon {visibility: visible; opacity: 1; z-index: 100; top: 100%;}

/* header --- 드롭다운 기본 리스트 스타일 */
.vHeader-dropLstWrap {}
.vHeader-dropLst {padding: 15px; cursor: pointer; display: flex; align-items: center;}
.vHeader-dropLst:hover {background: var(--he-gray-100);}
.vHeader-dropLst i {margin-right: 5px; color: 16px;}
.vHeader-dropLst:last-child {border-top: 1px solid rgba(var(--he-gray-400-rgb),.3);}

/* :: header --- 로고 */
.vBrandBox {text-align: center; height: 55px; line-height: 55px;}
.vBrandBox .ci_logo {display: block; cursor: pointer; width: 180px;}
.vBrandBox .ci_logo img {width: auto; height: 40px;}

/* :: header --- 현황 */
.vStatus {display: flex; align-items: center; height: 55px;}
.vStatusBox {padding: 0 10px; transition: .3s; cursor: pointer; line-height: 40px; border-radius: 3px; display: flex; align-items: center; position: relative; flex-shrink: 0;}
.vStatusBox:after {content:''; position: absolute; left: 0; top: 15px; bottom: 15px; width: 1px; background: var(--he-gray-400);}
.vStatusBox:first-child:after {display: none;}
.vStatusBox:hover {background: var(--he-main1); color: #fff;}
.vStatusBox-tit {margin-right: 10px; font-size: 12px;}
.vStatusBox-num {font-weight: bold; font-size: 13px;}


/* :: header --- 우측 세팅 영역 */
.vSetBox {}
.vSetBox-item {}

/* :: header --- 우측 세팅 영역 : 선택 */
.vHeader-sel {position: relative; height: 30px; margin-right: 10px; display: flex; align-items: center; border: 1px solid rgba(var(--he-gray-400-rgb), .6); border-radius: 10px / 15px;}
.vHeader-selTit {color: var(--he-gray-600); position: relative; display: flex; align-items: center; padding: 0 10px;}
.vHeader-selTit i {color: var(--he-main1);}
.vHeader-selTit i:first-child {font-size: 17px;}
.vHeader-selTit i:nth-child(2) {font-size: 10px; margin: 3px 0 0px -3px;}
.vHeader-selTit span {margin-left: 3px; font-size: 12px;}
.vHeader-selTit:before {content: ''; width: 1px; position: absolute; top: 3px; bottom: 3px; right: 0; background: rgba(var(--he-gray-400-rgb), .9);}
.vHeader-sel select {padding: 0 25px 0 10px; cursor: pointer; display: block; min-width: 110px; height: 100%; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
									background-size: 7px auto; background:  url("/images/icon/icon_arwDown.png") no-repeat right 10px center; background-size: 6px auto;}
.vHeader-sel select::-ms-expand {display: none;} /* IE 10, 11의 네이티브 화살표 숨기기 */

/* :: header --- 우측 세팅 영역 : 언어변경 */
.vHeader-langPanel {width: 150px; left: 0;}

/* :: header --- 우측 세팅 영역 : 스킨변경 */
.vHeader-skinPanel {width: 300px; text-align: center;}
.vHeader-skinPanel  h4 {line-height: 43px; border-bottom: 1px solid rgba(var(--he-gray-400-rgb), .3);}
.vHeader-skinPanel  h4 i {margin-right: 5px;}
.vHeader-skinPanel .colors-panel {overflow: hidden; padding: 15px 10px; display: flex; flex-wrap: wrap;}
.vHeader-skinPanel .color-tab {position: relative; cursor: pointer; width: 33.33334%; transition:0.3s; padding: 15px 0 10px;}

.vHeader-skinPanel .color-base {width: 48px; height: 48px; border-radius: 50%; border: 1px solid #ddd; margin-left: 15px;}
.vHeader-skinPanel .color-point {width: 30px; height: 30px; border-radius: 30px; position: absolute; right: 15px; top: 50%; margin-top: -22px;}
.vHeader-skinPanel .color-name {margin-top: 7px;}

.vHeader-skinPanel .color-checked {display: none;}
.vHeader-skinPanel .color-tab:hover,
.vHeader-skinPanel .color-tab.active {background: var(--he-gray-100); border-radius: 10px;}
.vHeader-skinPanel .color-tab.active .color-checked {width: 24px; height: 24px; line-height: 24px; border-radius: 50%; display: inline-block; background: #fff; border: 1px solid #ddd; position: absolute; top: -5px; right: -5px;}																	
.skinSwitcherClose {line-height: 43px; display: block; border-top: 1px solid rgba(var(--he-gray-400-rgb), .3); text-align: center; background: var(--he-base);  font-weight: bold; cursor: pointer; transition:0.3s;}
.skinSwitcherClose:hover {color: var(--he-main1);}

/* :: header --- 우측 세팅 영역 : 사용자 정보 */
.vHeader-userInfo {display: flex; align-items: center;}
.vHeader-userImg {width: 40px; height: 40px;}
.vHeader-userName {padding: 0 10px;}
.vHeader-userName span {display: block;}
.vHeader-userName .dep {font-size: 11px;}
.vHeader-userName .name {font-weight: 600; margin-top: 3px;}



		
/* ---------------------
	:: hMenu : 수평메뉴
	--------------------- */
.hMenu {flex-grow: 1; display: flex; justify-content: flex-start; align-items: center; position: relative; padding-left: 15px;}
.hMenu::before {content: ''; position: absolute; top: 20px; bottom: 20px; left: 0; width: 1px; background: var(--he-gray-400);}
.hMenu-item {position: relative;}
.hMenu-root {font-size: 14px; font-weight: bold; display: flex; align-items: center; border-radius: 5px; cursor: pointer; height: 55px; padding: 0 15px;}
.hMenu-root i {margin-left: 8px; font-size: 8px;}
.hMenu-subBox {position: absolute; top: 100%; left: 0; min-width: 180px; background: #fff; border: 1px solid var(--he-gray-200); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; border-radius: 10px;  overflow: hidden; z-index: 99;
							transform-origin: top; transform: scaleY(0);  opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;}
.hMenu-sub {font-size: 14px; padding: 15px 18px; cursor: pointer;}

/* -- 현재 메뉴 표시 */
.hMenu-item.current .hMenu-root {color: var(--he-main1);}
.hMenu-item.current .hMenu-sub.current {color: var(--he-main1); font-weight: bold; position: relative; padding-left: 30px;}
.hMenu-item.current .hMenu-sub.current:before {content: "\F0C95"; font-family: 'Material Design Icons'; color: var(--he-main1); position: absolute; left: 13px; top: 50%; font-size: 16px; transform: translate(0, -50%);}

/* -- hover 기능 제외 > 루트메뉴 클릭 시 필요한 클래스 스타일 */
.hMenu-item.active .hMenu-root {color: var(--he-main1);}
.hMenu-subBox.open {transform: scaleY(1); opacity: 1;}

/* -- hover 기능 포함 > 웹에서 사용 */
.hMenu.hMenuHover .hMenu-item:hover .hMenu-root {color: var(--he-main1);}
.hMenu.hMenuHover .hMenu-item:hover .hMenu-subBox {transform: scaleY(1); opacity: 1;}
.hMenu.hMenuHover .hMenu-sub:hover {background: var(--he-gray-100); color: var(--he-main1);}



/* ---------------------
	:: vMenu : 수직메뉴
	--------------------- */
.vMenu {width: 180px; z-index: 99; background: var(--he-base); position: fixed; top: 55px; bottom: 0; border-right: 1px solid var(--he-gray-300);}

.vMenu-title {padding: 10.5px 7px 10.5px 17px; display: flex; align-items: center; justify-content: space-between; letter-spacing: .05em; cursor: default; font-size: 11px; text-transform: uppercase; font-weight: 600;}
.vMenu-title .megamenuBtn {background: var(--he-gray-200); color: var(--he-main1); padding: 4px 8px; border-radius: 10px; cursor: pointer; transition: .3s;}
.vMenu-title .megamenuBtn.on,
.vMenu-title .megamenuBtn:hover {background: var(--he-main1); color: var(--he-base);}

.vMenu-sch {padding: 0 7px 10px; position: relative;}
.vMenu-schForm {height: 40px; padding: 0 30px; border-radius: 10px; border:1px solid rgba(var(--he-gray-400-rgb), .6);}
.vMenu-sch:before  {content: "\e041"; font-family: 'dripicons-v2'; position: absolute; left: 18px; top: 14px; font-size: 11px; color: var(--he-main1);}
.vMenu-schDel {position: absolute; right: 8px; top: 0; width: 30px;  text-align: center; height: 40px; line-height: 40px; font-size: 11px; color: var(--he-gray-600); cursor: pointer;}
.vMenu-schDel:hover {color: var(--he-main1);}

.vMenu-sidebar {padding: 0 0 30px 0; height: calc(100% - 158px);}

.metismenu {}
.metismenu li {display: block; width: 100%; position: relative;}
.metismenu a {display: block; position: relative; -webkit-transition: all .4s; transition: all .4s;}
.metismenu a:hover  {background: var(--he-gray-100); color: var(--he-main1);}

.metismenu li.root-menu {} 
.metismenu li.root-menu > a {display: flex; align-items: center; margin: 0 3px; padding: 12px 10px; border-radius: 3px;}
.metismenu li.root-menu > a > .root-menuIcon {font-size: 12px; margin-right: 8px; margin-top: 1px;}
.metismenu .has-arrow:after {content: "\F0142"; font-family: 'Material Design Icons'; display: inline-block; position: absolute; right: 10px; top: 50%; -webkit-transform: translate(0, -50%) rotate(0); transform: translate(0, -50%) rotate(0);
													-webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s;}

.metismenu li.root-menu.mm-active > a {color: var(--he-base); background: var(--he-main1); font-weight: bold; border-radius: 3px 3px 0 0;}
.metismenu li.root-menu.mm-active .has-arrow:after {-webkit-transform: translate(0, -50%) rotate(90deg); transform: translate(0, -50%) rotate(90deg);}

.metismenu ul.sub-menu li {position: relative;}
.metismenu ul.sub-menu li:before {content: ''; position: absolute; top: 0; bottom: 0; left: 13px; border-left: 1px dashed var(--he-gray-400); z-index: 1;}
.metismenu ul.sub-menu li a {margin: 0 3px; padding: 6px 6px 6px 20px; background: var(--he-gray-100);}
.metismenu ul.sub-menu li a:before {content: "\F09DF"; font-family: 'Material Design Icons'; font-size: 21px; vertical-align: middle; display: inline-block; position: absolute; left: 0; top: 3px; color: var(--he-main1); z-index: 2;}
.metismenu ul.sub-menu li:first-of-type a {padding-top: 12px;}
.metismenu ul.sub-menu li:first-of-type a:before {top: 9px;}
.metismenu ul.sub-menu li:last-of-type a {padding-bottom: 12px;}
.metismenu ul.sub-menu li:last-of-type:before {bottom: auto; height: 15px;}

.vMenu-tgl {border-top: 1px solid var(--he-gray-400); height: 65px; display: flex !important; align-items: center; justify-content: center; background: var(--he-gray-100);}
.vMenu-tgl i {font-size: 24px; color: var(--he-main1);}
.vMenu-tgl span {display: block; margin-left: 8px;}


/* 작동 관련 class */
.metismenu .mm-collapse,
.metismenu .mm-collapse:not(.mm-show) {display: none; height: auto !important;}
.metismenu .mm-collapsing {position: relative; height: 0; overflow: hidden; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: .35s; transition-duration: .35s;
														-webkit-transition-property: height, visibility;transition-property: height, visibility;}
.metismenu .mm-collapse.mm-show {display: block;}

.current-menu > a {color: var(--he-main1); border-radius: 0; position: relative; padding-left: 26px !important;}
.current-menu > a:before {content: "\F0C95"; font-family: 'Material Design Icons'; color: var(--he-main1); position: absolute; left: 8px; top: 50%; font-size: 16px; transform: translate(0, -50%);}
.current-menu a.current {color: var(--he-main1); font-weight: bold;}
.mm-active.current-menu > a {padding-left: 10px !important;}
.mm-active.current-menu > a:before {display: none;}

/* :: vMenu --- 메뉴 접혔을때 */
.vertical-collapsed .vMenu {width: 90px; border-top: 1px solid var(--he-gray-400);}
.vertical-collapsed .vMain {margin-left: 90px;}

.vertical-collapsed .vMenu-title,
.vertical-collapsed .vMenu-sch {display: none;}

.vertical-collapsed .vMenu-sidebar {height: calc(100% - 66px); padding-top: 3px;}

.vertical-collapsed .metismenu > li.root-menu > a {margin: 0 3px; padding: 0 8px; height: 65px; justify-content: center; flex-direction: column;}
.vertical-collapsed .metismenu > li.root-menu > a > i {font-size: 15px; margin: 0 0 3px 0;}
.vertical-collapsed .metismenu > li.root-menu > a > span {text-align: center;}
.vertical-collapsed .metismenu .has-arrow:after {display: none;}

.vertical-collapsed .metismenu li.root-menu.mm-active > a {border-radius: 8px;}

.vertical-collapsed .metismenu ul.sub-menu {padding: 5px; border-radius: 0 8px 8px 0; overflow: hidden;}
.vertical-collapsed .metismenu ul.sub-menu li:before {display: none;}
.vertical-collapsed .metismenu ul.sub-menu li a {margin: 0; padding: 10px; background: var(--he-base); transition: all ease-in .2s;}
.vertical-collapsed .metismenu ul.sub-menu li a:hover {background: var(--he-main1); color: #fff; border-radius: 8px;}
.vertical-collapsed .metismenu ul.sub-menu li a:before {display: none;}

.vertical-collapsed .metismenu .mm-collapse.mm-show {display: none;}
.vertical-collapsed .metismenu > li.root-menu:not(.mm-active):hover > a {background: var(--he-gray-100); color: var(--he-main1);}
.vertical-collapsed .metismenu > li.root-menu:hover > ul.sub-menu {display: block; position: fixed; left: 90px; min-width: 152px; background-color: var(--he-base); -webkit-box-shadow: 0 0px 6px var(--he-gray-400); -webkit-box-shadow:  0 0px 6px var(--he-gray-400); max-height: 300px; overflow-y: auto;}

.vertical-collapsed .current-menu > a {color: var(--he-base); background: var(--he-main1); font-weight: bold; border-radius: 3px; padding-left: 8px !important;}
.vertical-collapsed .current-menu > a:before {display: none;}

@media all and (max-height: 650px) {
	.vertical-collapsed .metismenu > li.root-menu:hover > ul.sub-menu {top: 55px !important; bottom: 0 !important; margin-top: 0 !important; overflow-y: auto;}
} 


.vertical-collapsed .vMenu-tgl span {display: none;}


.vMenu-mega {display: none; position: fixed; top:0; left: 180px; right: 0; bottom: 0; background: var(--he-base); -webkit-box-shadow: 0 -3px 4px var(--he-gray-400); box-shadow: 0 -3px 4px var(--he-gray-400); z-index: 101;}
.megamenu {width: 100%;  height: 100%;}

.megamenu-head {display: flex; align-items: center; height: 55px; padding: 0 20px; justify-content: space-between; position: relative; z-index: 1; background: var(--he-gradient);}
.megamenu-head:before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(/static/images/background/bg_dimm.png) no-repeat; background-size: cover; background-position: center center; z-index: -1;}
.megamenu-tit {color: var(--he-base); font-size: 15px;}
.megamenu-tit i {margin-right: 5px;}
.megamenu-close {position: relative; width: 22px; height: 22px; cursor: pointer;}
.megamenu-close > div {height: 3px; width: 22px; position: absolute; top: 9.5px; background-color: var(--he-base); border-radius: 2px; transition: all 0.2s ease-in; box-shadow: 1px 1px 1px var(--he-gray-400);}
.megamenu-close .leftright {transform: rotate(45deg);}
.megamenu-close .rightleft {transform: rotate(-45deg);}
.megamenu-close:hover .leftright {transform: rotate(-45deg);}
.megamenu-close:hover .rightleft {transform: rotate(45deg);}

.megamenu-body {display: flex; flex-wrap: wrap; height: calc(100% - 55px); overflow-y: auto;}
.megamenu-box {flex: 0 1 20%; border-bottom: 1px solid var(--he-gray-300); border-right: 1px solid var(--he-gray-300); padding: 20px;}
.megamenu-box .root-menu {font-size: 15px; color: var(--he-main1); font-weight: bold; position: relative; display: inline-block; z-index: 1;}
.megamenu-box .root-menu:before {content:''; position: absolute; left: 0; right: -8px; top: 8px; bottom: 0; background: var(--he-main1); opacity: .15;  z-index: -1;}

.megamenu-box .sub-menu {margin-top: 15px;}
.megamenu-box .sub-menu li {line-height: 2.2; padding-left: 3px; transition: .3s;}
.megamenu-box .sub-menu i {margin-right: 8px;}
.megamenu-box .sub-menu li:hover {color: var(--he-main1);}





/* ---------------------
	:: vMain
	:: vMain 기본 padding-top 설정 (common.js에서 동적으로 조정됨)
	--------------------- */
.vMain {background: var(--he-base); margin-left: 180px; padding: 55px 0 0 0;}




/* ---------------------
	:: vSmryBox
	--------------------- */
.vSmryBox {}	
.vSmryBox .simplebar-scrollbar.simplebar-visible:before {background: var(--he-base);}
.vSmryBox-itemWrap {position: relative; background: var(--he-gradient); z-index: 1; min-width: max-content; display: flex;}
.vSmryBox-itemWrap:before {content:''; position: absolute; top:0; left:0; right:0; bottom: 0; background: url(/static/images/background/bg_dimm.png) no-repeat; background-size: cover; background-position: center center; z-index: -1;
														-webkit-mask-image: linear-gradient(125deg, rgba(0,0,0,.3) 35%, rgba(0,0,0,1) 100%); mask-image: linear-gradient(125deg, rgba(0,0,0,.3) 35%, rgba(0,0,0,1) 100%);}

.vSmryBox-item {cursor: pointer; min-width: 130px; height: 70px; padding: 0 10px; text-align: center; position: relative; z-index: 1; color: var(--he-base);
							-o-transition:all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; -webkit-font-smoothing: antialiased;   display: flex;  flex-direction: column; justify-content: center;}
.vSmryBox-item:before {content:''; position: absolute; top: 23px; bottom: 23px; right: 0; width: 1px; background-color: rgba(var(--he-base-rgb),.6);}
.vSmryBox-item:after {content:''; position: absolute; top:0; left:0; right:0; bottom: 0; z-index: -1; transition: .2s;}
.vSmryBox-item:hover:after {background-color: rgba(0,0,0,.3);}
.vSmryBox-item:last-child:before {display: none;}
.vSmryBox-name {font-size: 12px; font-weight: 300; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;}
.vSmryBox-num {font-size: 20px; font-weight: 600;}
.vSmryBox-num span {font-size: 14px; margin-left: 5px; font-weight: 500;}

.vSmryBox-existTooltip {margin-left: 5px; width: 14px; height: auto;}

.vSmryBox-tooltip {color: var(--he-gray-dark); position: absolute; bottom: 6px; left: 10px; right: 10px; font-size: 12px; line-height: 1.2; padding: 3px 0; border-radius: 35px; background:var(--he-gray-100);  visibility:hidden; opacity:0;  z-index: -1;
							-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);}
.vSmryBox-tooltip:before {content: ''; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid var(--he-gray-100); position: absolute; top: -4px; left: 50%; margin-left: -1.5px;}
.vSmryBox-item:hover .vSmryBox-tooltip {bottom: 13px; visibility: visible; opacity: 1; z-index: 1;}




/* ---------------------
	:: vContainer
	--------------------- */
.vContainer {border-top: 1px solid var(--he-gray-300);}

#mainIfrm {}
#contents {background-color: var(--he-base);}

.titleFixed {overflow: hidden; background: var(--he-gray-100);}
.titleFixed-row {border-bottom: 1px solid var(--he-gray-300); display: flex; align-items: center; justify-content: space-between; padding: 5px 15px; min-height: 43px;}
.titleFixed-row.notFlex {display: block;}
.titleFixed-row.tabBtnWrap {padding: 0 20px; min-height: 0;}

.titleFixed .panel-tit {font-size: 13px; display: flex; align-items: center; font-family: 'esamanru_Medium', sans-serif;}
.titleFixed .panel-tit i {font-size:11px; margin-right: 7px; color: var(--he-main1); margin-top: -3px;}
.titleFixed .panel-tit i.mdi {font-size:15px; margin-right: 5px; margin-top: 0;}

/* titleFixed > 우측 최종 버튼 영역 */
.titleFixed .finalBtnWrap {display: flex; align-items: center;}
.titleFixed .finalBtnWrap > * {margin-left: 5px;}

/* 영업조직선택 */
.salesForceSel {background: #fff; border: 1px solid rgba(var(--he-gray-400-rgb), .6); display: flex; align-items: center; padding: 3px 3px 3px 13px; border-radius: 5px; width: fit-content !important;}
.salesForceSel > i {color: var(--he-main1); font-size: 9px; margin-right: 8px; margin-top: 2px;}
.salesForceSel .btn.comm {border-radius: 5px; margin-left: 15px; height: 26px; line-height: 26px; padding-left: 8px;}

/*반응형 검색 영역 - 기본 컬럼 4등분 */
.titleFixed-sch {border-bottom: 1px solid var(--he-gray-300); padding: 5px 17px;}
.titleFixed-schRow {display: flex; flex-wrap: wrap; gap: 5px 15px; margin-top: 5px;}
.titleFixed-schRow:first-child {margin-top: 0;}
.titleFixed-schCol {display: flex; align-items: center; flex: 1 1 20%; max-width: 25%; min-width: 350px;}
.titleFixed-schTitCol {display: flex; align-items: center; max-width: 25%;}
.titleFixed-schCol .titArea {flex-shrink: 0; min-width: 75px; font-weight: bold; padding-left: 13px; margin-right: 5px; position: relative;}
.titleFixed-schCol .titArea:before {content: ''; position: absolute; top: 50%; left: 0; margin-top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--he-main1);}
.titleFixed-schCol .formArea {flex-grow: 1;}
.titleFixed-schCol .formArea > div {width: 100%;}
.titleFixed-schCol .titleArea {flex-shrink: 0; font-weight: bold; padding-left: 13px; margin-right: 10px; position: relative;}
.titleFixed-schCol .titleArea:before {content: ''; position: absolute; top: 50%; left: 0; margin-top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--he-main1);}
.titleFixed-schRow .selectArea {margin-left: 5px;}

/* 반응형 검색 영역 - .wdFull-3: 한 행에서 컬럼을 3등분하여 배치 */
.titleFixed-schCol.wdFull-3 {flex: 1 1 30%; max-width: none; min-width: 0;}

/* 반응형 검색 영역 - .wdAutoCol: 내용에 맞게 크기 자동 조정, form 영역 최소 너비 120px 유지 */
.titleFixed-schCol.wdAutoCol {flex: 0 0 auto; max-width: none; min-width: 0;}
.titleFixed-schCol.wdAutoCol .formArea {min-width: 120px;}
.titleFixed-schCol.wdAutoCol .formArea.fx {min-width: 10px !important;}
.titleFixed-schCol .formArea .textArea {display: flex; align-items: center;}
.titleFixed-schCol .formArea.fx .textBlockArea {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; width: 100%; align-items: center;}
/*반응형 검색 영역 - .wdFlexCol: 가변 너비로 자동 조정되는 컬럼 */
.titleFixed-schCol.wdFlexCol {flex: 1 1 0; max-width: none; min-width: 150px;}
/* 텍스트박스 내용 초기화 버튼 */
.titleFixed-schCol .formArea .textArea .clear-button {margin-left: 5px; height: 20px; width: 20px; display: none;}

/* --  [titleFixed-btn]
    -- 검색 조건이 여러 줄일 경우 우측에 검색 영역 고정 */
.titleFixed-btn {display: flex; margin-bottom: 5px; margin-left: 10px;}
/*.titleFixed-btn .btn.comm {border-radius: 5px; height: 100%; line-height: normal; padding: 0; width: 94px; display: flex; justify-content: center; align-items: center; font-size: 13px; margin-left: 5px;}*/
.titleFixed-btn .btn.comm {border-radius: 5px; height: 100%; padding: 0; width: 94px; display: flex; justify-content: center; align-items: center; font-size: 13px; margin-left: 5px;}

.titleFixed-row .tabArea {display: flex; align-items: center; margin-top: 8px;}
.titleFixed-row .tabArea .tab {cursor: pointer; color: var(--he-gray-600); background: var(--he-gray-200); font-family: 'esamanru_Medium', sans-serif; padding: 10px 15px 8px; min-width: 110px; border-radius: 13px 13px 0 0; margin-right: 5px; display: flex; align-items: center; justify-content: center; position: relative;}
.titleFixed-row .tabArea .tab.selected {color: var(--he-main1); background: #fff; border: 1px solid var(--he-gray-300);}
.titleFixed-row .tabArea .tab.selected:before {content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: #ffffff;}


.panelArea,
.ifrmPanelArea {padding: 10px 20px 20px; overflow-x: auto;}
.panelArea.fullFrm {padding: 0;}
.panelArea.fullFrm .panel-wrap02 {padding: 15px;}
.panelArea.fullFrm .panel-wrap02:first-of-type {padding-right: 0;}

.panelAreaIn {min-width: 900px; display: flex;}
.panelAreaIn > form {width: 100%;}
.panelArea.minHgt .panelAreaIn {min-height: 500px;}

.panel-wrap01,
.panel-wrap02 {position:relative;}

/* 경비현황 : expenseMngList.jsp */
.fullScreenView {position: absolute; left: 5px; right: 15px; background: var(--he-base);}
.treeFullScreenBtn {cursor: pointer; background: var(--he-main1); color: var(--he-base); border-radius: 5px; padding: 4px 7px;}
.treeFullScreenBtn i {font-size: 10px; margin-right: 5px;}


.afterBg {position: relative; z-index: 1; padding: 15px 0 0;}
.afterBg:before {content: ''; position: absolute; left: -15px; right: -15px; top: 0; bottom: -15px; background: var(--he-gray-100); z-index: -1; border-top: 1px solid rgba(var(--he-gray-400-rgb), .6);}

/* 매장관리 > 상권정보 조회 */
.tradeDtlWrap {}
.tradeDtlHead {}
.tradeDtlBody {padding: 8px 15px 15px; margin-top: 15px; background: var(--he-gray-100); border: 1px solid var(--he-gray-400); border-radius: 8px; overflow: hidden;}
.tradeDtlBody .GridMain1.GridMain2 .TSRowSpaceFirst.TSRowSpace0 {background: var(--he-gray-100);}
.tradeDtlBody .GridMain1.GridMain2 .TSRowSpace2 .TSSolidRow {background: #fff;}

/* ---------------------
	:: portletSetWrap
	--------------------- */

/* 포틀릿설정 우측 사이드 토글 */
.portletSetWrap {}
.portletSetWrap.openSetting {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; background: rgba(0,0,0,.4); transition:.3s;}

.portletSetBtn {text-align: center; display: flex; flex-direction: column;  align-items: center; justify-content: center;  border-radius: 50%; cursor:pointer; position:absolute; bottom:30px; right:25px; width: 70px; height: 70px; transition: border-radius .5s ease-in-out; z-index: 100;}
.portletSetWrap.openSetting .portletSetBtn {border-radius: 10px 0 0 10px; cursor:pointer; position:absolute; bottom:30px; right:25px;}
.portletSetBtn i {display:block; font-size:17px;}

.portletSetPanel {width: 300px; position: absolute; top: 0; bottom: 0; right: -300px; background: var(--he-base); box-shadow: -3px 0px 12px 0px rgba(0,0,0,0.22);}								
.portletSetPanel .onoffswitchPanel {padding: 0 10px; overflow-y: auto;  height: calc(100% - 96px);}
.portletSetPanel .onoffswitchWrap {overflow:hidden; position:relative; text-align:left; padding: 13px 10px 13px 8px; border-top: 1px dashed var(--he-gray-400); display: flex; align-items: center; justify-content: space-between;}
.portletSetPanel .onoffswitchWrap:first-of-type {border-top: none;}

.onoffswitch-copy {flex-grow: 1; margin-right: 10px; line-height: 1.4;}

.onoffswitch {position: relative; flex-shrink: 0; width: 50px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; display:inline-block; vertical-align:middle;}
.onoffswitch-checkbox {display: none;}
.onoffswitch-label {display: block; overflow: hidden; cursor: pointer; border-radius: 20px;}
.onoffswitch-inner {display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s;}
.onoffswitch-inner:before,
.onoffswitch-inner:after {display: block; float: left; width: 50%; height: 26px; font-weight:normal; padding: 0; line-height: 26px;  font-size: 11px; color: var(--he-base); box-sizing: border-box;}
.onoffswitch-inner:before {content: "ON"; padding-left: 7px; color: var(--he-base); background: var(--he-main1)}
.onoffswitch-inner:after {content: "OFF"; padding-right: 7px; background-color: var(--he-gray-500); text-align: right;}
.onoffswitch-switch {display: block; width: 14px; height: 14px; margin: 5px 4px; background: var(--he-base); position: absolute; top: 0; bottom: 0; right:28px; border-radius: 20px; transition: all 0.3s ease-in 0s; }
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {margin-left: 0;}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {right: 0px;}	



.portletSetPanel .btnArea {position: absolute; bottom: 0; left: 0; right: 0; border-top:1px solid rgba(var(--he-gray-400-rgb), .6); padding:10px; display: flex; flex-wrap: wrap;}
.portletSetPanel .btnArea a {flex: 1 1 45%; margin-left:3px; text-align:center;}
.portletSetPanel .btnArea a:first-child {margin-left:0;}
.portletSetPanel .btnArea a.resetPortlet {margin:5px 0 0; width:100%; line-height:36px; display:block; text-align:center; font-weight:bold; background: var(--he-base); border: 1px solid var(--he-gray-400);}
.portletSetPanel .btnArea a.resetPortlet:hover {background: var(--he-gray-300); transition:0.3s;}



/* 데이터 없을시 */
.empty-state {background: url(/static/images/sfa/empty_state.png) no-repeat center top 65px; width: 100%; height: 100%; background-size: 130px auto;}
.empty-state-copy {padding-top: 155px; text-align: center;}
.empty-state.type02 {height:auto;}

.emptyWrap {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; height: 100%; background: var(--he-gray-100); border-radius: 8px;}
.emptyWrap .imgArea img {width: 150px; height: auto;}
.emptyWrap .copyArea {font-size: 15px; margin-top: 15px; line-height: 1.4; text-align: center;}






/*!
 * Waves v0.7.6
 * http://fian.my.id/Waves 
 * 
 * Copyright 2014-2018 Alfiana E. Sibuea and other contributors 
 * Released under the MIT license 
 * https://github.com/fians/Waves/blob/master/LICENSE */
.waves-effect {position: relative; cursor: pointer; display: inline-block; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;}
.waves-effect .waves-ripple {position: absolute; border-radius: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; opacity: 0; background: rgba(0, 0, 0, .2); background: radial-gradient(rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .5) 60%, rgba(255, 255, 255, 0) 70%);
													-webkit-transition: all .5s ease-out; transition: all .5s ease-out; -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-property: opacity, -webkit-transform; pointer-events: none;
													transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transform: scale(0) translate(0, 0); transform: scale(0) translate(0, 0);}
.waves-effect.waves-light .waves-ripple {background: rgba(255, 255, 255, .4); background: radial-gradient(rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0) 70%);}
.waves-effect.waves-classic .waves-ripple { background: rgba(0, 0, 0, .2);}
.waves-effect.waves-classic.waves-light .waves-ripple {background: rgba(255, 255, 255, .4);}
.waves-notransition {-webkit-transition: none !important; transition: none !important;}
.waves-button,
.waves-circle {-webkit-transform: translateZ(0); transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(circle, var(--he-base) 100%, #000 100%);}
.waves-button,
.waves-button-input,
.waves-button:hover,
.waves-button:visited {white-space: nowrap; vertical-align: middle; cursor: pointer; border: none; outline: 0; color: inherit; background-color: rgba(0, 0, 0, 0); font-size: 1em; line-height: 1em; text-align: center; text-decoration: none; z-index: 1;}
.waves-button {padding: .85em 1.1em; border-radius: .2em;}
.waves-button-input {margin: 0; padding: .85em 1.1em;}
.waves-input-wrapper {border-radius: .2em; vertical-align: bottom;}
.waves-input-wrapper.waves-button {padding: 0;}
.waves-input-wrapper .waves-button-input {position: relative; top: 0; left: 0; z-index: 1;}
.waves-circle {text-align: center; width: 2.5em; height: 2.5em; line-height: 2.5em; border-radius: 50%;}
.waves-float {-webkit-mask-image: none; -webkit-box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, .12); box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, .12); -webkit-transition: all .3s; transition: all .3s;}
.waves-float:active {-webkit-box-shadow: 0 8px 20px 1px rgba(0, 0, 0, .3); box-shadow: 0 8px 20px 1px rgba(0, 0, 0, .3);}
.waves-block {display: block;}
.waves-effect.waves-light .waves-ripple {background-color: rgba(255, 255, 255, .4);}
.waves-effect.waves-primary .waves-ripple {background-color: rgba(82, 92, 229, .4);}
.waves-effect.waves-success .waves-ripple {background-color: rgba(35, 197, 143, .4);}
.waves-effect.waves-info .waves-ripple {background-color: rgba(91, 164, 229, .4);}
.waves-effect.waves-warning .waves-ripple {background-color: rgba(238, 177, 72, .4);}
.waves-effect.waves-danger .waves-ripple {background-color: rgba(241, 78, 78, .4);}


/**
 * SimpleBar.css - v4.2.3
 * Scrollbars, simpler.
 * https://grsmto.github.io/simplebar/
 *
 * Made by Adrien Denat from a fork by Jonathan Nicol
 * Under MIT License
 */
[data-simplebar] {position: relative; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start;
								justify-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;}
.simplebar-wrapper {overflow: hidden; width: inherit; height: inherit; max-width: inherit; max-height: inherit;}
.simplebar-mask {direction: inherit; position: absolute; overflow: hidden; padding: 0; margin: 0; left: 0; top: 0; bottom: 0; right: 0; width: auto !important; height: auto !important; z-index: 0;}
.simplebar-offset {direction: inherit !important; -webkit-box-sizing: inherit !important; box-sizing: inherit !important; resize: none !important; position: absolute; top: 0; left: 0 !important; bottom: 0; right: 0 !important; padding: 0; margin: 0; -webkit-overflow-scrolling: touch;}

.simplebar-content-wrapper {direction: inherit; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; position: relative; display: block; height: 100%; width: auto; visibility: visible; overflow: auto;
													max-width: 100%; max-height: 100%; scrollbar-width: none; padding: 0 !important;}
.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {display: none;}
.simplebar-content:after,
.simplebar-content:before {content: ' '; display: table;}
.simplebar-placeholder {max-height: 100%; max-width: 100%; width: 100%; pointer-events: none;}
.simplebar-height-auto-observer-wrapper {-webkit-box-sizing: inherit !important; box-sizing: inherit !important; height: 100%; width: 100%; max-width: 1px; position: relative; float: left; max-height: 1px; overflow: hidden; z-index: -1; padding: 0; margin: 0; pointer-events: none;
																				-webkit-box-flex: inherit; -ms-flex-positive: inherit; flex-grow: inherit; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: 0; flex-basis: 0;}
.simplebar-height-auto-observer {-webkit-box-sizing: inherit; box-sizing: inherit; display: block; opacity: 0; position: absolute; top: 0; left: 0; height: 1000%; width: 1000%; min-height: 1px; min-width: 1px; overflow: hidden; pointer-events: none; z-index: -1;}
.simplebar-track {z-index: 1; position: absolute; right: 0; bottom: 0; pointer-events: none; overflow: hidden;}
[data-simplebar].simplebar-dragging .simplebar-content {pointer-events: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none;}
[data-simplebar].simplebar-dragging .simplebar-track {pointer-events: all;}
.simplebar-scrollbar {position: absolute; right: 2px; width: 6px; min-height: 10px;}
.simplebar-scrollbar:before {position: absolute; content: ''; background: var(--he-gray-500); border-radius: 7px; left: 0; right: 0; opacity: 0; -webkit-transition: opacity .2s linear; transition: opacity .2s linear;}
.simplebar-scrollbar.simplebar-visible:before {opacity: .5; -webkit-transition: opacity 0s linear; transition: opacity 0s linear;}
.simplebar-track.simplebar-vertical {top: 0; width: 11px;}
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {top: 2px; bottom: 2px;}
.simplebar-track.simplebar-horizontal {left: 0; height: 11px;}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {height: 100%; left: 2px; right: 2px;}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {right: auto; left: 0; top: 2px; height: 7px; min-height: 0; min-width: 10px; width: auto;}
[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {right: auto; left: 0;}
.hs-dummy-scrollbar-size {direction: rtl; position: fixed; opacity: 0; visibility: hidden; height: 500px; width: 500px; overflow-y: hidden; overflow-x: scroll;}
.simplebar-hide-scrollbar {position: fixed; left: 0; visibility: hidden; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none;}