@charset "utf-8";

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



.vWrapper {background: #fff;}



/* ---------------------
	:: vHeader
	--------------------- */

/* :: header --- 공통 스타일 */
.vHeader-btn {cursor: pointer; color: var(--gray-600); transition: all .15s ease-in-out; width: 55px; height: 55px; display: flex !important; align-items: center; flex-direction: column; justify-content: center;}
.vHeader-icon {height: 22px; line-height: 22px; font-size: 17px;}
.vHeader-name {font-size: 12px;}

/* header --- 드롭다운 작동 스타일 */
.dropdownWrap {position: relative;}
.dropdownWrap .dropdownBtn {position: relative; display: block; cursor: pointer;}
.dropdownWrap .dropdownCon {position: absolute; top: 110%; right: 0; background: #fff; 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 --- selectbox */
.vHeader-sel {position: relative; height: 36px; margin-right: 10px; display: flex; align-items: center; border: 1px solid rgba(var(--gray-400-rgb), .6); border-radius: 10px / 15px;}
.vHeader-selTit {color: var(--gray-600); position: relative; display: flex; align-items: center; padding: 0 10px;}
.vHeader-selTit i {color: var(--mainColor);}
.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(--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("/static/images/common/icon_select_arrow.png") no-repeat right 10px center; background-size: 6px auto;}
.vHeader-sel select::-ms-expand {display: none;} /* IE 10, 11의 네이티브 화살표 숨기기 */

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

/* :: header --- 로고 및 솔루션 전환 */
.vHeader-switchWrap {position: relative; display: flex; align-items: center;} /* vBrandBox와 묶인 div */
.vHeader-switchWrap.open:before {content: ''; border: 1px solid var(--gray-400); position: absolute; left: -5px; right: -5px; top: 5px; bottom: 5px; border-radius: 15px; background-color: var(--gray-100); z-index: -1;}

.vHeader-switch {margin-left: 15px;}
.vHeader-switch .dropdownBtn {line-height: 55px;}
.vHeader-switch .dropdownBtn .dropdownBtnIcon {display: inline-block; width: 30px; height: 30px; background: var(--gray-200); color: var(--mainColor); text-align: center; line-height: 30px; border-radius: 8px;}
.vHeader-switch .dropdownCon {left: -170px; right: -5px;}
.vHeader-switch .vHeader-dropLst {justify-content: space-between;}
.vHeader-switch .vHeader-dropLst img {width: auto; height: 18px;}
.vHeader-switch .vHeader-dropLst .aniIcon {display: inline-block; position: relative; transition: transform 0.3s ease;}
.vHeader-switch .vHeader-dropLst:hover .aniIcon {animation: aniIconEffect 1s infinite; color: var(--mainColor);}

   @keyframes aniIconEffect {
       0%, 100% {
           transform: translateX(0);
       }
       50% {
           transform: translateX(5px);
       }
   }

.vHeader-switch .dropdownBtn:hover .dropdownBtnIcon,
.vHeader-switch.is-open .dropdownBtn .dropdownBtnIcon {background: var(--mainColor); color: #fff; transition: .3s;}

.vHeader-switch .hoverTooltipBtn .hoverTooltip {width: max-content; top: 14px; right: 0; left: 50px; line-height: 26px; background: var(--gray-dark); color: #fff;}
.vHeader-switch .hoverTooltipBtn .hoverTooltip:before {border-top-color: var(--gray-dark); top: 10px; left: -7px;}
.vHeader-switch .hoverTooltipBtn:hover .hoverTooltip { left: 40px; }



/* :: header */
.vHeader {position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: #fff; width: 100%; height: 55px;}

.vBrandBox {width: 180px; height: 55px; line-height: 55px; box-sizing: border-box; text-align: center; flex-shrink: 0;}
.vBrandBox .ci_logo {display: block; cursor: pointer;}
.vBrandBox .ci_logo img {width: auto; height: 20px;}

.vHeader-scroll {flex-grow: 1; flex-shrink: 0;}

.vHeader-nav {display: flex; align-items: center; justify-content: space-between;}
.vHeader-nav > div {flex-shrink: 0;}

/* :: header --- 솔루션 바로가기 가로 스크롤 영역 */
.vHeader-nav > .vHeader-navLeft {
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
}
.vShortCutScrollArea {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	height: 55px;
	overflow-x: auto;
	overflow-y: hidden;
	flex-shrink: 1;
	min-width: 0;
	scrollbar-width: thin;
	scrollbar-color: var(--gray-400) transparent;
}

.vShortCutScrollArea::before{content: ''; position: absolute; top: 18px; bottom: 18px; width: 1px; background: var(--gray-400);}

.vShortCutScrollArea::-webkit-scrollbar {
	height: 4px;
}
.vShortCutScrollArea::-webkit-scrollbar-thumb {
	background-color: var(--gray-400);
	border-radius: 4px;
}
.vShortCutScrollArea::-webkit-scrollbar-track {
	background: transparent;
}
.vShortCutScrollArea img {
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

/* :: header --- 솔루션 바로가기 */
.vShrotCutWrap {position: relative; display: flex; height: 55px; line-height: 55px;}
.vShrotCutWrap:before{content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--gray-400);}
.vShrotCutWrap:nth-child(1):before{content: none;}
.vShrotCut {cursor: pointer;}
.vShrotCut .ci_logo {display: block; cursor: pointer; margin: 0 20px;}
.vShrotCut .ci_logo img {width: auto; height: 18px;}

/* :: header --- google 바로가기 */
.googleMenuWrap {display: flex; margin-left:  15px;}
.googleMenu {cursor: pointer; transition: .3s; font-size: 11px; text-align: center; width: 42px; padding: 4px 0;}
.googleMenu:hover {color: var(--mainColor); background: var(--gray-200); border-radius: 5px;}
.googleMenu img {width: auto; height: 18px;}
.googleMenu span {display: block; margin-top: 1px;}

/* :: header --- 퀵메뉴 */
.vQuickBox {display: flex;background: var(--gray-100); border: 1px solid var(--gray-300); padding: 0 7px; border-radius: 50px; margin-left:  15px;}
.vQuickBox-item {display: flex; align-items: flex-end; padding: 0 7px; line-height: 34px; cursor: pointer; transition: .3s; font-size:  12px;}
.vQuickBox-item .subName {font-size: 11px; margin-left: 5px; color: var(--grayColor-10);}
.vQuickBox-item:hover {color: var(--mainColor);}
.vQuickBox-item:hover  .subName {color: var(--mainColor);}

.rsps-vQuickBox {display: none; margin-left:  10px;}
@media all and (max-width: 1600px) {
	.vQuickBox {display: none;}
	.rsps-vQuickBox {display: block;}
}





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


/* :: header --- 우측 세팅 영역 : 메인 통합검색 영역 */
.integrated-search {position: relative; height: 36px; margin-right: 10px; display: flex; align-items: center; border: 1px solid rgba(var(--gray-400-rgb), .6); border-radius: 10px / 15px; width: 160px;}
.integrated-search .search-icon {color: var(--mainColor); cursor: pointer; padding: 0 10px;}
.integrated-search .search-icon:hover {color: var(--mainonColor);}

.search-panel {position: fixed; top: 55px; right: -520px; bottom: 0; box-sizing: border-box; padding: 20px 20px 79px 20px; width: 520px; background-color: #fdfdfd; z-index: 101; transition: 150ms right ease-in-out; overflow-y: auto; border-top: 1px solid var(--gray-400);}
.search-bg {position: fixed; top: 55px; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 100; display: none;}
.search-wrap {display: flex; flex-direction: column; gap: 10px;}
.search-category {position: relative; width: 100%; border-radius: 10px; background-color: #fff; border: 1px solid rgba(36, 42, 48, 0.1);}
.search-header {padding: 20px 20px 10px 20px; font-size: 1.4rem; font-weight: bold; display: flex; justify-content: space-between; align-items: flex-end;}
.search-title {display: flex; align-items: center;}
.search-title__icon {font-size: 18px; margin-right: 8px;}
.search-reload {cursor: pointer;}
.search-body {box-sizing: border-box; width: 100%; padding: 10px;}
.search-loading {height: 300px; position: relative; background-color: rgba(255, 255, 255, 0.3);}

.loading-img {width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

.slim-scrollbar::-webkit-scrollbar {width: 5px;}
.slim-scrollbar::-webkit-scrollbar-thumb {background-color: #bdbdbd; border-radius: 30px; border: 1px solid transparent;}
.slim-scrollbar::-webkit-scrollbar-track {background-color: rgba(197,197,197,.6); border-radius: 30px;}

.search-card {box-sizing: border-box; padding: 8px 10px !important; background-color: #fdfdfd; border-radius: 4px; margin-bottom: 6px!important; border: 1px solid rgba(36, 42, 48, 0.1);}
.search-card.board, .search-card.paper {cursor: pointer; user-select: none;}
.search-card.board:hover, .search-card.paper:hover {background-color: rgba(36, 42, 48, 0.07);}
.search-card.member {display: flex; align-items: center;}
.search-card__col {flex-grow: 1;}
.search-card__row {width: 100%; display: flex; justify-content: space-between; color: var(--grayLightColor); font-size: 12px;}
.search-card__row i {color: var(--yellowColor); padding:0 4px 0 0;}
.search-card-category {font-size: 12px; color: var(--grayLightColor);}
.search-card-title {font-size: 13px; color: var(--grayDeepDarkColor);}
.search-card-red {font-size: 13px; color:#ff2f3b;}
.search-card-bk {font-size: 12px;}
.search-card-bk2 {font-size: 13px; color: var(--grayDeepDarkColor);}
.no-search-data {box-sizing: border-box; width: 100%; text-align: center; padding: 8px;}
.search-member__img {box-sizing: border-box; width: 38px; height: 38px; font-size: 12px; margin-right: 10px;}
.search-member-state {}

.search-body .pagingLst:not(.viewContent *) {padding-top: 8px;}


/* :: 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(--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(--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(--gray-400-rgb), .3); text-align: center; background: #fff;  font-weight: bold; cursor: pointer; transition:0.3s;}
.skinSwitcherClose:hover {color: var(--mainColor);}

/* :: header --- 우측 세팅 영역 : 메뉴변경 */
.vHeader-menuSet {width: 300px; text-align: center;}
.vHeader-menuSet  h4 {line-height: 43px; border-bottom: 1px solid rgba(var(--gray-400-rgb), .3);}
.vHeader-menuSet  h4 i {margin-right: 5px;}

.menuSet-panel {overflow: hidden; padding: 15px 10px; display: flex; flex-wrap: wrap;}
.menuSet-btn {flex-basis: 40%; flex-grow: 1; transition: .3s; padding: 10px; background-color: var(--gray-100); display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 10px; cursor: pointer;}
.menuSet-btn:nth-child(even) {margin-left: 10px;}
.menuSet-btn:hover {background-color: var(--gray-300);}
.menuSet-btn i {font-size: 20px; color: var(--mainColor); margin-bottom: 8px;}

.vHeader-menuSet .dropdownClose {line-height: 43px; display: block; border-top: 1px solid rgba(var(--gray-400-rgb), .3); text-align: center; background: #fff;  font-weight: bold; cursor: pointer; transition:0.3s;}
.vHeader-menuSet .dropdownClose:hover {color: var(--mainColor); background-color: var(--gray-100);}

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


/* ---------------------
	:: vMenu
	--------------------- */

.icon{display: block; width: 24px; height: 24px;}
.icon svg{width: 100%; height: 100%; pointer-events: none;}

.vMenu {width: 180px; z-index: 99; background: #fff; position: fixed; top: 55px; bottom: 0; border-right: 1px solid var(--gray-400);}
.vMenu-wrapper {display: flex; flex-direction: column; height: calc(100% - 90px);}
.vMenu-title {display: flex; align-items: center; justify-content: space-between; gap: 24px; letter-spacing: .05em; cursor: default; font-size: 11px; margin: 0 3px 3px; font-weight: 600; position:relative;}
.vMenu-title .megamenuBtn {display: flex; align-items: center; gap: 6px; width: 60%; height: 38px; padding: 0 10px; background: rgba(0, 122, 255, 0); border-radius: 3px;}
.vMenu-title span{display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; width: 100%;}
.vMenu-title .mdi-arrow-top-right{font-size: 0; position: absolute; right: 15px;}
/* .vMenu-title .megamenuBtn:hover, */
.vMenu-title .megamenuBtn.on {width: 100%; flex-shrink: 0;}
.vMenu-title .megamenuBtn.on {background: var(--mainColor); color: #fff;}
.vMenu-title .megamenuBtn:hover .mdi-arrow-top-right {display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; font-size: 13px; transition: font-size .1s ease-in .1s; position: absolute; right: 2px; top: 50%; transform: translate(0, -50%); background: #fff; z-index: 10;}
.vMenu-title .megamenuBtn:hover.on .mdi-arrow-top-right	{background: transparent;}
.vMenu-title .megamenuBtn.on .mdi-arrow-top-right {display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; font-size: 13px; transition: font-size .1s ease-in .1s; position: absolute; right: 2px; top: 50%; transform: translate(0, -50%);}

/* snb 사이징 버튼 */
.vMenu-tgl {width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 3px;}
.vMenu-tgl span{display: block; width: 0; overflow-x: hidden;}
.vMenu-tgl .icon{flex-shrink: 0; width: 18px; height: 18px;}
.vMenu-tgl .icon svg path{stroke-width: 0.18rem;}

/* FOIC 방지: JS가 인라인 SVG로 교체하기 전까지 object 태그를 숨김 */
.vMenu object[data$=".svg"] { visibility: hidden; }

.tgl-icons{display: flex; align-items: center; justify-content: center; width: auto; overflow: hidden;}
.tgl-icons .icon.sizing-minimize{opacity:0; width: 0;}
.tgl-icons .icon.sizing-maximize{opacity:0; width: 0;}

.vWrapper .vMenu-tgl:hover{background: rgba(245, 247, 250, 1); color: var(--mainColor);}
.vWrapper:not(.vertical-collapsed) .vMenu-tgl .tgl-icons .icon.sizing-minimize{width:18px; opacity:1;}
.vWrapper.vertical-collapsed .vMenu-tgl .tgl-icons .icon.sizing-maximize{width:18px; opacity:1;}
.vWrapper.vertical-collapsed .vMenu-tgl .tgl-icons{justify-content: flex-end;}

.vMenu-sch {padding: 4px; box-sizing: border-box; position: relative;}
.vMenu-schForm {width: calc(100% - 4px); height: 34px; padding: 0 25px 0 28px; margin: 0 auto; box-sizing: border-box;  border-radius: 3px; border: 1px solid rgba(var(--gray-400-rgb), .6); background: #fff;}
.vMenu-sch:before  {content: "\e041"; font-family: 'dripicons-v2'; font-size: 12px; color: var(--mainColor); position: absolute; left: 14px; top: 50%; transform: translateY(-50%);}
.vMenu-schDel {width: 25px;  text-align: center; height: 36px; line-height: 36px; font-size: 12px; color: var(--gray-600); cursor: pointer; position: absolute; top: 50%; right: 8px; transform: translateY(-50%);}
.vMenu-schDel:hover {color: var(--mainColor);}

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

.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(--gray-100); color: var(--mainColor);}

.metismenu li.root-menu > a {display: flex; align-items: center; margin: 0 3px; padding: 12px 10px; border-radius: 3px;}
.metismenu li.root-menu > a > i {font-size: 10px; width: 18px; margin-top: 2px;}
.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: #fff; background: var(--mainColor); font-weight: bold; border-radius: 3px;}
.metismenu li.root-menu.hasSubMenu.mm-active > a {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(--gray-400); z-index: 1;}
.metismenu ul.sub-menu li a {margin: 0 3px; padding: 6px 6px 6px 20px; background: var(--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(--mainColor); 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;}

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

/* :: vMenu 하단 문의하기 카드 */
.vMenu-footer {display: block; width: 100%; position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; box-sizing: border-box;}
.help-card {display: flex; align-items: center; gap: 8px; padding: 12px 10px; border-radius: 8px; background: rgba(var(--mainColor-rgb), .04); border:1px solid rgba(var(--mainColor-rgb), .0); box-sizing: border-box; transition: all .25s ease;}
.help-card .help-circle {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--mainColor-rgb), .2); color: #fff;}
.help-card .icon.help {width: 16px; height: 16px;}
.help-card-body {flex: 1; min-width: 0; color: var(--gray-600); }
.help-card-title {display: block; font-size: 13px; font-weight: 700; line-height: 1.3;}
.help-card-desc {font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.help-card .icon.chevron-right {width: 12px; height: 12px; color: var(--gray-600);}
.help-card:not(.active):hover {background: rgba(var(--mainColor-rgb), .04); border-color: rgba(var(--mainColor-rgb), .2);}
.help-card:not(.active):hover .help-card-body{color: var(--gray-dark)}
.help-card:not(.active):hover .help-circle {background: rgba(var(--mainColor-rgb), .6);}
.help-card.active {border-color: var(--mainColor);}
.help-card.active .help-circle{background: var(--mainColor)}
.help-card.active .help-card-body{color: var(--mainColor);}
.help-card.active .icon.chevron-right{color: var(--mainColor);}


/* :: vMenu --- 메뉴 접혔을때 */
.vertical-collapsed .vMenu {width: 90px;}
.vertical-collapsed .vMain {margin-left: 90px;}

.vertical-collapsed .vMenu-title{flex-flow: column-reverse;}
.vertical-collapsed .vMenu-title .megamenuBtn{display: none;}
.vertical-collapsed .vMenu-sch {display: none;}
.vertical-collapsed .vMenu-tgl{width: 76px; height: 36px;}
.vertical-collapsed .vMenu-sidebar {height: calc(100% - 74px); padding-top: 3px;}

.vertical-collapsed .metismenu > li.root-menu > a {margin: 0 auto; padding: 0 8px; width: 76px; height: 62px; justify-content: center; flex-direction: column; box-sizing: border-box;}
.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: #fff; transition: all ease-in .2s;}
.vertical-collapsed .metismenu ul.sub-menu li a:hover {background: var(--mainColor); 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(--gray-100); color: var(--mainColor);}
.vertical-collapsed .metismenu > li.root-menu:hover > ul.sub-menu {display: block; position: fixed; left: 90px; min-width: 152px; background-color: #fff; -webkit-box-shadow: 0 0px 6px var(--gray-400); -webkit-box-shadow:  0 0px 6px var(--gray-400);}

.vertical-collapsed .current-menu > a {color: #fff; background: var(--mainColor); 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-footer {padding: 10px 6px;}
.vertical-collapsed .help-card {justify-content: center; height: 68px; padding: 10px; gap: 4px}
.vertical-collapsed .help-card__body,
.vertical-collapsed .help-card__arrow {display: none;}
.vertical-collapsed .help-card__icon {width: 40px; height: 40px;}
.vertical-collapsed .help-card__icon svg {width: 22px; height: 22px;}

.vertical-collapsed .help-card .icon.chevron-right,
.vertical-collapsed .help-card-desc{display: none;}
.vertical-collapsed .help-card{flex-direction: column; align-items: center;}
.vertical-collapsed .help-card .help-card-tit{line-height: 1;}


/* 전체메뉴 보기 */
.vMenu-mega {display: none; position: fixed; top:0; left: 180px; right: 0; bottom: 0; background: #fff; -webkit-box-shadow: 0 -3px 4px var(--gray-400); box-shadow: 0 -3px 4px var(--gray-400); z-index: 101;}
.vMenu-mega * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.vMenu-mega *:before,
.vMenu-mega *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.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(--maingradient);}
.megamenu-head:before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(/static/images/common/bg_dimm.png) no-repeat; background-size: cover; background-position: center center; z-index: -1;}
.megamenu-tit {color: #fff; 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: #fff; border-radius: 2px; transition: all 0.2s ease-in; box-shadow: 1px 1px 1px var(--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(--gray-300); border-right: 1px solid var(--gray-300); padding: 20px;}
.megamenu-box:first-of-type {display: none;}
.megamenu-box .root-menu {font-size: 15px; color: var(--mainColor); 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(--mainColor); 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(--mainColor);}












/* ---------------------
	:: vMain
	--------------------- */
.vMain {background: #fff; margin-left: 180px; padding: 55px 0 0 0;}




.pg-info {min-width: 1080px; padding-top: 20px; padding-left: 40px; padding-right: 40px; display: flex; align-items: center; justify-content: space-between;}
.pg-info.bottom-line {border-bottom: rgba(36, 42, 48, 0.08) 1px solid;}
.pg-info.padding-bottom {padding-bottom: 25px; border-bottom:1px solid #d4d5d6;}
.pg-name {color:var(--baseColor); font-size:26px; font-weight:bold;}
.pg-position {float:right; padding-left:13px; background:url("/static/images/common/icon_home.png") no-repeat left top 17px; background-size:1.3rem auto;}
.pg-position span {font-size:1.3rem; color:#6c7277; margin-left:3px;}

.panelArea  {padding: 25px 30px 0 30px; overflow-x: auto; overflow-y: hidden;}
.ifrmPanelArea {padding: 25px 30px; overflow-x: auto; overflow-y: hidden;}
.panelArea.fullFrm, .ifrmPanelArea.fullFrm {overflow-y: auto; padding: 0;}
.panelArea.calendarWrap {margin-top: 25px; border-top: 1px solid #d4d5d6;}
.panelMinWd:not(.editor-panel) {min-width: 1330px; width: 100%; height: 100%;}
.panelMinWd.editor-panel {min-width: 1330px; width: 100%; margin-bottom: 16px;}

/*-- 기본 form 레이아웃 - panel-wrap -- */
.fixed-btn-area {position:fixed; top:115px; right:15px;}

.schFixed {border-bottom:1px solid #d4d5d6;}
.schFixed.type02 {border-top:1px solid #d4d5d6;}
.schFixed.white {background:#fff;}
.schFixed .schArea {display: flex; justify-content: space-between; overflow:hidden; padding: 20px 30px 10px; min-width: max-content; box-sizing: border-box;}
.schFixed .schArea .f-l .btn {margin-right: 3px;}
.schFixed .schArea .f-r .btn {margin-left: 3px;}
.schFixed .schArea .tit-inq.type03 {width:auto;}
.schFixed .tabArea {padding:9px 10px 0;}
.titleHasBtn {overflow:hidden; padding:8px 20px;}

.schArea {padding:0 0 0 20px;}
.sch-box {float:left;}
.sch-box-btn {float:left;}

.tabBtnWrap {padding:10px 0 10px 15px;}

.panel-wrap {position:relative; width:100%;}

/* -- 
	panelArea, margin 없이 꽉찬 화면 사용시
	ex ) meetingRoomReserve.jsp */
.panelArea.fullFrm *,
.ifrmPanelArea.fullFrm * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.panelArea.fullFrm *:before,
.panelArea.fullFrm *:after,
.ifrmPanelArea.fullFrm *:before,
.ifrmPanelArea.fullFrm *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.panelFullFrm {width:100%; height:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.panelFullFrm.left {background:#f6f8fc; border-right:1px solid #d4d5d6; padding:15px 15px;}
.panelFullFrm.right {padding:20px;}
.panelFullFrm.right.hasBtmFix {padding:0; height:calc(100% - 53px);}
.btmFix {padding:10px 0; background: #f6f8fc; border-top: 1px solid #d4d5d6; position:absolute; bottom:0; left:0; right:0; text-align:center;}
.btmBtn {text-align:center;}
.btmBtn a {margin-top:20px;}





/* ---------------------
	:: vSmryBox
	--------------------- */
.vSmryBox {}	
.vSmryBox .simplebar-scrollbar.simplebar-visible:before {background: #fff;}
.vSmryBox-itemWrap {position: relative; background: var(--maingradient); 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/common/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: 65px; padding: 0 10px; text-align: center; position: relative; z-index: 1; color: #fff;
							-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(255,255,255,.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: 3px;}
.vSmryBox-num {font-size: 22px; font-weight: 600;}

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

.vSmryBox-tooltip {color: var(--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(--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(--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(--gray-400);}




/* ---------------------
	:: 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;}

.portletSetPanel {width: 300px; position: absolute; top: 55px; bottom: 0; right: -300px; background: #fff; box-shadow: -3px 0px 12px 0px rgba(0,0,0,0.22); border-top: 1px solid var(--gray-400);}
.portletSetPanel .onoffswitchPanel {padding: 0 10px; overflow-y: auto;  height: calc(100% - 97px);}
.portletSetPanel .onoffswitchWrap {overflow:hidden; position:relative; text-align:left; padding: 13px 10px 13px 8px; border-top: 1px dashed var(--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: #fff; box-sizing: border-box;}
.onoffswitch-inner:before {content: "ON"; padding-left: 7px; color: #fff; background: var(--mainColor)}
.onoffswitch-inner:after {content: "OFF"; padding-right: 7px; background-color: var(--gray-500); text-align: right;}
.onoffswitch-switch {display: block; width: 14px; height: 14px; margin: 5px 4px; background: #fff; 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(--gray-400-rgb), .6); padding:10px; display: flex; flex-wrap: wrap; background: var(--gray-100);}
.portletSetPanel .btnArea .btnComm {flex: 1 1 45%; margin-left: 5px; text-align:center; line-height: 36px;}
.portletSetPanel .btnArea .btnComm:first-child {margin-left:0;}
.portletSetPanel .btnArea .btnComm#resetPortlet {margin: 5px 0 0 0;}