@charset "utf-8";

/*********************************************************************
로그인
*********************************************************************/
.login {
	height: 100vh;
	overflow: hidden;
	background: url(../images/bg.png) no-repeat bottom right /cover;
	position:relative;
}
html[data-theme="blue"] .login{
	background-image: url(../images/bg-blue.png);
}
html[data-theme="gray"] .login{
	background-image: url(../images/bg-gray.png);
}
html[data-theme="vermilion"] .login{
	background-image: url(../images/bg-red.png);
}
.login .page-wrap {
	width: auto;
	height: 520px;
	background-color: #fff;
	overflow: hidden;
}
.login-logo{
	position:absolute;
	bottom:-30px;
	right:0;
}
.login-logo img{
	width:1220px;
	opacity: 0.5;
}
/* 왼쪽 */
.login .login-head {
	float: left;
	width: 320px;
	height: 100%;
	background: linear-gradient(90deg, #b67be4 0%, #326fea 100%);
	position: relative;
	text-align: center;
}
html[data-theme="gray"] .login .login-head,
html[data-theme="blue"] .login .login-head,
html[data-theme="vermilion"] .login .login-head{
	background: var(--main-500);
}
.login .w-message {
	color: #fff;
}

.login-head .copy {
	position: absolute;
	top: 462px;
	color: #fff;
}

/* 오른쪽 - form */
.login .login-body {
	float: left;
	width: 520px;
	height: 100%;
}

.login .form-box {
	width: 360px;
}

.login .form-box .login-text {
	text-align: center;
}

.login .form-box .login-text strong {
	font-weight: 700;
	color: var(--main-500);
}

.login .form-box .login-text p {
	line-height: 1.7;
	color: var(--text-second);
}

.login .form-group {
	margin-top: 24px;
}

.login .form-group .user-info .i-input + .i-input,
.login .form-group .form-check {
	margin-top:12px;
}
.login .form-group .user-id {
	background-image: url(../images/user.svg);
}
.login .user-info .form-control{
	height:52px;
}

.login .form-group button {
	height: 60px;
	font-weight: 700;
	margin-top: 24px;
	font-size: 16px;
}



/* Nav */
/* menu icon */
@media all {

	.px-nav{
		transition:all .3s ease-in-out;
	}
	/* 메뉴버튼 */
	.px-nav-toggle{
		width:var(--nav-height) !important;
		height:var(--nav-height);
		background: var(--main-500) url(../images/left-menu.svg) no-repeat center;
	}
	.px-nav-toggle.active{
		background-image:url(../images/right-menu.svg);
	}
	/* 메뉴버튼 - open */
	.px-nav-expand .px-nav-toggle-label{
		opacity: 0;
	}
	.navbar-header{
		background-color: var(--main-500);
		height:var(--nav-height);
	}
	.navbar-header{
		width: 100%;
		border-left: 1px solid rgba(255,255,255,.4);
	}
	.px-navbar{
		z-index: 1055;
	}
	.px-nav-left~.px-navbar{
		margin-left:var(--nav-height);
		padding-left:0;
		left:0;
	}
	

	/* menu */
	.px-nav{
		background-color: #fff;
		border-right:1px solid var(--border);
	}
	.px-nav-toggle~.px-nav-content,
	.px-nav-toggle~.px-nav-scrollable-area{
		padding-top:var(--nav-height);
	}
	.px-nav-item{
		border-left:3px solid #fff;
		border-bottom:1px solid var(--border);
	}
	.px-nav-item.active{
		border-left-color:var(--main-500);
	}
	.px-nav-item.active>a{
		background-color: var(--gray-200);
	}
	.px-nav-dropdown-menu-title, .px-nav-item>a{
		padding:0 20px;
		line-height: var(--nav-height);
		color:var(--text-basic);
	}
	.px-nav-item.active>a span{
		color:var(--main-500);
		font-weight: 700;
	}
	.px-nav-icon{
		margin-right:12px;
	}
	.px-nav-icon img{
		height:20px;
	}
	.px-nav-item.active .px-nav-icon img{
		filter:var(--img-primary);
	}

	/* header */
	.navbar-header{
		padding-left:16px;
		border-left: 1px solid rgba(255,255,255,.4);
	}
	.navbar-brand{
		width:118.92px;
		height:var(--nav-height);
		background: url(../images/login-logo.svg) no-repeat left center /100% 16px;
	}


	/* content */
	.px-navbar~.px-content{
		margin-top:var(--nav-height);
		padding:28px 28px calc(28px + var(--nav-height));
	}
	.page-header h1 {
		padding:0 0 12px 30px;
		border-bottom: 1px solid var(--border);
		background:no-repeat 0 3px / 24px 24px;
	}

	.page-body {
		margin-top: 28px;
	}

	/* footer */
	.px-footer.px-footer-bottom {
		background-color: #fff;
		padding-left: 28px !important;
		margin-left: 0;
		color: #a6afb8;
		border-top: 1px solid var(--border);
		height: var(--nav-height);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.px-nav-left.px-nav-collapse~.px-footer {
		margin-left: var(--nav-height);
	}
	.px-footer .btn-theme span{
		background-image: url(../images/color-swatch.svg);
		background-position: 0 2px;
	}
	html[data-theme="blue"] .px-footer .btn-theme span{
		background-image: url(../images/color-swatch-blue.svg);
	}
	html[data-theme="gray"] .px-footer .btn-theme span{
		background-image: url(../images/color-swatch-gray.svg);
	}
	html[data-theme="vermilion"] .px-footer .btn-theme span{
		background-image: url(../images/color-swatch-vermilion.svg);
	}
	.px-footer .btn-theme:hover span{
		background-image: url(../images/color-swatch-w.svg) !important;
	}


	/* 메인 */
	.main .sub-header{
		border-bottom:none;
		height:auto;
		margin-bottom:0;
	}
	.main h2{
		font-size:18px;
		cursor: pointer;
	}
	.main .page-body{
		padding:24px;
		margin-top:24px;
	}
	.cnt-error{
		min-height:650px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin-top:24px;
	}
	.cnt-error div{
		margin-top:24px;
	}
	.cnt-error div strong{
		font-size:16px;
	}
	.cnt-error div p{
		margin-top:12px;
		color:var(--text-second);
	}
	/* 시각화차트 - 차트선택 */
	.px-content.chart-type-page .page-body {
		padding: 0 100px;
		background-color: transparent;
		border: none;
	}

	.chart-type {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}

	.chart-type li {
		/*flex: 1 1 20%; 맨 아랫줄이 3개 일때 삭제 */
		width:calc(25% - 16px);/* 맨 아랫줄이 3개 일때 사용*/
		height: 220px;		
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 8px;
		border: 1px solid var(--border);
		text-align: center;
		transition: all .3s ease-in-out;
		cursor: pointer;
	}

	.chart-type li:hover {
		box-shadow: 0 0 0 3px var(--main-500) inset !important;
		border-color: transparent;
	}

	.chart-type li svg {
		width: 60px;
	}

	.chart-type li p {
		font-weight: 700;
		font-size: 18px;
		color: var(--text-basic);
		margin-top: 20px;
	}

	.chart-type li:hover p {
		color: var(--main-500);
	}

	/* 시각화차트 - 차트 설정 */
	.chart-set .form-container{
		display: flex;
		gap:15px;
		margin-top:20px;
	}
	.chart-set .form-container > .c-st{
		padding:0;
	}
	.chart-set .form-container .left-panel{
		overflow: hidden;
		min-width: 360px;
	}
	.chart-set .left-panel .scroll-section{
		padding:24px;
		height:501px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.chart-set .left-panel .form-section + .form-section{
		margin-top:24px;
	}
	.chart-set .left-panel .input-label{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.chart-set .left-panel .input-label img{
		width:16px;
		height:16px;
		filter: invert(45%) sepia(6%) saturate(963%) hue-rotate(172deg) brightness(93%) contrast(88%);
	}
	/* 상세설정 */
	.chart-set .select-detail-option{
		margin-top:48px;
	}
	.chart-set .select-detail-option .select-option-toggle{
		width: 100%;
		height:48px;
		border:1px solid var(--main-500);
		border-radius: 4px;
		text-align: left;
		padding:0 24px;
		font-size:16px;
		font-weight: 700;
		color:var(--main-500);
		position: relative;
		transition:all .3s ease-in-out;
	}
	.chart-set .select-detail-option .select-option-toggle.open{
		background-color: var(--main-500);
		color:#fff;
	}
	.chart-set .select-detail-option .select-option-toggle:before,
	.chart-set .select-detail-option .select-option-toggle:after{
		content:'';
		display: block;
		width:2px;
		height:15px;
		background-color:var(--main-500);
		position:absolute;
		right:24px;
	}
	.chart-set .select-detail-option .select-option-toggle.open:before,
	.chart-set .select-detail-option .select-option-toggle.open:after{
		background-color: #fff;
	}
	.chart-set .select-detail-option .select-option-toggle:before{
		top:50%;
		transform:translateY(-50%);
		transition:transform .3s ease-in-out;
	}
	.chart-set .select-detail-option .select-option-toggle.open:before{
		transform:translateY(-50%) rotate(90deg);
	}
	.chart-set .select-detail-option .select-option-toggle:after{
		transform:rotate(90deg);
		top:50%;
		margin-top:-7px;
	}
	.chart-set .select-detail-option .option-container{
		background-color: var(--gray-200);
		padding:20px;
		display: none;
	}
	.chart-set .select-detail-option .form-section .form-group + .form-group{
		margin-top:4px;
	}
	.chart-set .select-detail-option textarea{
		height:120px;
	}
	
	.chart-set .form-container .right-panel{
		min-width: calc(100% - 375px);
		display: flex;
		justify-content: center;
		align-items: center;
		min-height:600px;
		padding:24px 24px;
	}
	.chart-set .right-panel .message-area{
		text-align: center;
	}
	.chart-set .right-panel .message-area img{
		width:160px;
	}
	.chart-set .right-panel .message-area p{
		margin-top:24px;
		font-size:16px;
		color:var(--text-basic);
	}
	.chart-set .right-panel .message-area p span{
		color:var(--main-500);
		font-size:16px;
	}
	.chart-set .left-panel .button-container{
		border-top:1px solid var(--border);
		padding:28px;
	}

	/********************************************************
	대시보드
	*********************************************************/
	.board .img-flag:hover{
		filter:none !important;
	}
	.px-dashboard .form-container .required{
		font-size:12px;
		color:var(--text-second);
		margin-bottom:12px;
		font-weight: 600;
	}
	.px-dashboard .form-container .required img{
		width:16px;
		height:16px;
		filter:invert(30%) sepia(8%) saturate(336%) hue-rotate(169deg) brightness(94%) contrast(93%);
	}
	.px-dashboard .chart-grid-wrap{
		background-color: var(--gray-200);
		padding:16px;
	}
	.px-dashboard .chart-grid-wrap + .chart-grid-wrap{
		margin-top:12px;
	}
	.px-dashboard .chart-grid-wrap .grid-delete{
		height:32px;
		background-color: var(--gray-300);
		color:var(--text-second);
		margin-bottom:12px;
	}
	.px-dashboard .chart-grid-wrap .grid-delete.hide{
		display: none;
	}
	.px-dashboard .chart-grid-wrap .grid-delete img{
		width:12px;
		height:12px;
		vertical-align: -1px;
	}
	.px-dashboard .grid-row{
		position:relative;
		padding-right:88px;
	}
	.px-dashboard .grid-item{
		position:relative;
	}
	.px-dashboard .grid-item .del-grid-item{
		position: absolute;
		right:15px;
		top:15px;
		display: none;
	}
	.px-dashboard .grid-item .grid-cnt-box{
		cursor: pointer;
	}
	.px-dashboard .grid-item .grid-cnt-box:active{
		cursor: move;
	}
	.px-dashboard .grid-row .item-add{
		width:80px;
		height:100%;
		position:absolute;
		right:0;
		top:0;
		display: block;
	}
	.px-dashboard .grid-row .item-add.hide{
		display: none;
	}
	.px-dashboard .icon-add{
		font-size:0;
		width:28px;
		height:28px;
		border-radius: 4px;
		background: var(--gray-400) url(../images/Union.svg) no-repeat center /12px 12px;
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		transition:all .2s ease-in-out;
	}
	.px-dashboard .chart-grid-add{
		width:100%;
		height:80px;
		position:relative;
		margin-top:12px;
	}
	.px-dashboard .grid-row .item-add:hover .icon-add,
	.px-dashboard .chart-grid-add:hover .icon-add{
		background-color: var(--main-500);
	}
	/* detail */
	.dashboard-detail .sub-header{
		padding-bottom:20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.dashboard-detail h2{		
		font-size:18px;
	}
	.more-dropdown{
		position:relative;
	}
	.more-dropdown.open button img,
	.more-dropdown:hover button img{
		filter:var(--img-primary);
	}
	.more-dropdown:hover .dropdown-menu{
		display: block;
	}
	.more-dropdown .dropdown-menu{
		display: block;
		position:absolute;
		min-width:200px;
		right:0;
		left:auto;
		border-radius: 8px;
		border:1px solid var(--border);
		padding:0;
		margin:0;
		box-shadow: 8px 8px 10px rgba(0,0,0,.05);
		display: none;
	}
	.more-dropdown.open .dropdown-menu{
		display: block;
	}
	.more-dropdown .dropdown-menu li{
		line-height:40px;
		padding-left:36px;
		font-size:14px;
		color:var(--text-basic);
		cursor: pointer;
		background: no-repeat 12px center /auto 16px;
	}
	.more-dropdown .dropdown-menu li + li{
		border-top:1px solid var(--border);
	}
	.more-dropdown .dropdown-menu li:hover{
		background-color: var(--gray-200);
	}
	.dashboard-detail .grid-row{
		padding-right:0;
	}
	.grid-item .grid-cnt-top{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.dashboard-detail .grid-item .chart-name{
		cursor:pointer;
	}
	.form-container .more-dropdown .dropdown-menu{
		min-width:160px;
	}
	/*dashboard edit*/
	.px-dashboard.dashboard-edit .grid-item .del-grid-item{
		display: block;
	}
	
	.dashboard-detail .grid-item .chart-name{
		cursor: pointer !important;
	}
	/********************************************************
	저장소 관리
	*********************************************************/
	.px-storage .page-body > .input-name{
		display: flex;
		margin-bottom:24px;
		justify-content: space-between;
		align-items: center;
	}
	.px-storage .input-name .chart-name{
		width:calc(100% - 132px);
		line-height:48px;
		padding:0 16px;
		font-weight: 700;
		border-bottom:1px solid var(--border);
		border-radius: 4px;
		font-size: 16px;
	}
	.px-storage .input-name button{
		width:120px;
	}
	.px-storage .board-head-top{
		padding:0;
	}

	/*********************************************************
	데이터조회
	**********************************************************/
	.data-filter-area{
		padding:24px;
	}
	.data-filter-area .area-title{
		font-size: 16px;
		font-weight: 700;
		color:var(--text-basic);
		margin-bottom:16px;
	}
	.data-filter-area .form-container{
		padding:16px 0;
		border-top:1px solid var(--border);
		border-bottom:1px solid var(--border);
	}
	.data-filter-area .filter-row:not(.query),
	.filter-row .form-section,
	.datepicker-area{
		display: flex;
		align-items: center;
	}
	.data-filter-area .filter-row + .filter-row{
		margin-top:12px;
	}
	.data-filter-area .form-section + .form-section{
		margin-left:40px;
	}
	.data-filter-area .form-section.baseline{
		align-items: baseline;
	}
	.data-filter-area .form-group + .form-group,
	.datepicker-area,
	.datepicker-btn-area{
		margin-left:8px;
	}
	.data-filter-area .form-group .required{
		display: none;
	}
	.data-filter-area .form-group.error .required{
		display: block;
	}
	.data-filter-area .add-input{
		display: none;
	}
	.data-filter-area .input-label .required{
		position:relative;
		top:-6px;
	}
	.data-filter-area .input-label .required img{
		width:12px;
		height:12px;
	}
	.datepicker-area .i-input{
		width:156px;
		height:44px;
		background-image:url(../images/calendar.svg);
		background-position:calc(100% - 12px) center;
		padding:0;
		position:relative;
	}
	.datepicker-area .form-control{
		background-color: transparent;
		position: absolute;
		width:100%;
		top:0;
		left:0;
		padding:0 48px 0 16px;
		cursor: pointer;
	}
	.datepicker-btn-area button{
		height:32px;
	}
	.datepicker-btn-area button.active,
	.datepicker-btn-area button.active:hover,
	.datepicker-btn-area button.active:focus{
		background-color: var(--main-500);
		color:#fff;
	}
	.filter-row.query{
		display: none;
	}
	.filter-row.query .form-section{
		align-items: center;
	}
	.filter-row.query .form-group{
		width:calc(100% - 92px);
	}
	.filter-btn-area{
		margin-top:16px;
		position:relative;
		text-align: right;
	}
	.filter-btn-area button:last-child{
		margin-left:4px;
	}
	.filter-btn-area .btn-toggle{
		position:absolute;
		top:-30px;
		left:50%;
		width:28px;
		height:28px;
		border-radius: 2px;
		font-size:0;
		background-color: var(--main-500);
		padding:0;
	}
	.filter-btn-area .btn-toggle img{
		transform:rotate(-90deg);
		width:8px;
		transition:all .3s ease-in-out;
	}
	.filter-btn-area .btn-toggle.active img{
		transform:rotate(90deg);
	}

	@media screen and (max-width:1850px){
		.data-filter-area .w-360{
			width:280px !important;
		}
	}
	@media screen and (max-width:1620px){
		.data-filter-area .none-flex{
			display: block !important;
		}
		.data-filter-area .none-flex .form-section + .form-section{
			margin-left:0;
			margin-top:12px;
		}
		.data-filter-area .input-label{
			width:72px;
		}
	}
	/* data-result */
	.data-result-area{
		margin-top:12px;
	}
	.data-result-area .board-top-btn{
		display: flex;
		align-items: center;
	}
	.data-result-area .board-top-btn .list-view{
		width:100px;
	}
	.data-result-area .board-top-btn .pagination{
		margin:0 12px;
	}
	.data-result-area .board-top-btn .pagination > *{
		display: inline-block;
		vertical-align: middle;
	}
	.data-result-area .board-top-btn .pagination .page-number{
		font-weight: 700;
		margin-right:8px;
	}
	.data-result-area .board-top-btn .pagination .page-number strong{
		color:var(--main-500);
	}
	.data-result-area .board-top-btn .pagination .arrow{
		width:32px;
		height:32px;
		border:1px solid #ebecf2;
		padding:0;
	}
	.data-result-area .board-top-btn .pagination .arrow.nopage{
		cursor:default;
	}
	.data-result-area .board-top-btn .pagination .arrow img{
		height:12px;
	}
	.data-result-area .board-top-btn .pagination .arrow.nopage img{
		filter:invert(80%) sepia(21%) saturate(137%) hue-rotate(169deg) brightness(86%) contrast(85%);
	}
	.data-result-area .board-top-btn .pagination .arrow.next img{
		transform:rotate(180deg);
	}
	.data-result-area .board-top-btn .btn{
		width:150px;
		margin-left:4px;
	}
	.data-result-area .board-body{
		padding:0 24px;
	}
	.data-result-area .board-body tbody td{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		word-break: break-all;
	}
	.data-result-area .tbl-row button img{
		transform:rotate(-90deg);
	}
	.data-result-area .tbl-row.open button img{
		transform:rotate(90deg);
		filter:var(--img-primary);
	}
	.data-result-area .acco-area{
		display: none;
	}
	.data-result-area .acco-area td{
		padding:24px;
	}
	.data-result-area .acco-area .acco-top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom:16px;
	}
	.data-result-area .acco-top .type-btn button{
		padding:0 20px;
		margin:0 4px 0 0;
	}
	.data-result-area .acco-top .type-btn button.active{
		background-color: var(--main-500);
		color:#fff;
	}
	.data-result-area .acco-top .btn-copy{
		width:40px;
		background-color: var(--gray-300);
		border-radius: 4px;
	}
	.data-result-area .acco-area .acco-cnt{
		background-color: var(--gray-200);
		padding:24px;
	}
	.data-result-area .acco-area .acco-cnt[data-tab="json"] .data-cnt-area,
	.data-result-area .acco-area .acco-cnt[data-tab="table"]{		
		max-height:500px;
		overflow-y: auto;
	}
	.data-result-area .acco-area .acco-cnt[data-tab="table"]{
		display: none;
	} 
	.data-result-area .acco-area .data-cnt-area{
		background-color: var(--gray-100);
		padding:16px;
		text-align: left;
		line-height: 1.75;
	}
	.data-result-area .acco-area .acco-cnt[data-tab="json"] pre{
		font-size:13px;
		border:none;
		background-color: transparent;
	}
	.data-result-area table tr:hover td{
		background-color: #fff;
	}
	.data-result-area .acco-area table{
		background-color: #fff;
		width: 70%;
		margin:0 auto;
		border-top:2px solid var(--main-500);
	}
	.data-result-area .acco-area table th,
	.data-result-area .acco-area table td{
		padding:10px;
		height:auto;
	}
	.data-result-area .acco-area table th{
		background-color:var(--main-100);
		width:160px;
		border-bottom-color:rgba(255,255,255,.7);
		font-weight: 500;
	}
	.data-result-area .acco-area table th:first-child{
		border-right:1px solid rgba(255,255,255,.7);
	}
	.data-result-area .acco-area table td{
		text-align: left;
		cursor:default;
	}
	/*********************************************************
	데이터조회이력
	**********************************************************/
	.data-list .board-head-top{
		margin-bottom: 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.data-list .board-head-top .sch-option{
		width:120px;
	}
	.data-list .board-head > div.board-head-bottom{
		justify-content: end;
	}
	.data-list table td{
		cursor: default;
	}
	/*********************************************************
	프로파일 조회
	**********************************************************/
	.profile-list .board-head .board-row{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.profile-list .board-head .board-exp strong{
		display: block;
		font-weight: 700;
		color:var(--main-500);
	}
	.profile-list td{
		cursor: default !important;
	}
	.profile-list .btn-gray{
		width:80px;
	}

	/**********************************************************
	권한변경
	***********************************************************/
	.px-authrt .form-container{
		display: flex;
		gap:12px;
	}
	.px-authrt .item-box{
		flex:1;
		background-color: var(--gray-200);
		border:1px solid var(--border);
		padding:20px;
		border-radius: 8px;
		min-height:320px;
		max-width: calc(50% - 6px);
	}
	.px-authrt .input-label img{
		position:relative;
		top:-4px;
	}

	/**********************************************************
	사용자
	***********************************************************/
	.px-user-info{
		padding:24px !important;
	}
	.px-user-info .sub-title{
		font-size:16px;
		font-weight: 700;
		color:var(--text-basic);
		padding-bottom:16px;
		border-bottom:1px solid var(--border);
		margin-bottom:16px;
	}
	.user-info-form{
		padding-bottom:16px;
		border-bottom:1px solid var(--border);
	}
	.user-info-form .filter-row{
		display: flex;
		gap: 52px;
		align-items: flex-start;
	}
	.user-info-form .form-group.readonly{
		background-color: var(--gray-100);
	}
	.user-info-form .filter-row + .filter-row{
		margin-top:20px;
	}
	.user-info-form .filter-row:not(.select-area) .form-section{
		flex:1;
	}
	.user-info-form .form-group{
		width:calc(100% - 100px);
	}
	.user-info-form ~ .btn-group{
		margin:16px auto 0;
		width: 260px;
	}
}


/* nav width값 */
.navbar-toggle{
	width:var(--nav-height);
	height:var(--nav-height);
	line-height: var(--nav-height);
}
.navbar-toggle-icon, .navbar-toggle-icon:after, .navbar-toggle-icon:before{
	background: #fff;
}
.px-navbar .navbar-collapse{
	background: #fff;
	border-top:none;
}
.navbar-nav{
	background: #fff;
}
.px-navbar .dropdown-menu>li, .px-navbar .navbar-nav>li,
.px-navbar .dropdown-menu>li+li, .px-navbar .navbar-nav>li+li{
	border-color:var(--border);
}
.nav>li>a,.nav>li>a:focus, .nav>li>a:hover{
	color:var(--text-basic);
}
.px-navbar-icon img{
	width:16px;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
	background-color: var(--main-500);
}
.navbar-nav .open .dropdown-menu{
	max-height:300px;
	overflow: auto;
}
@media screen and (min-width:768px) {
	/* nav-header 모바일 버튼 */
	.px-navbar .navbar-toggle{
		/* display: none; */
		z-index: 1030;
		width:var(--nav-height);
		height:var(--nav-height);
		line-height: var(--nav-height);
	}
	.navbar-toggle-icon, .navbar-toggle-icon:after, .navbar-toggle-icon:before{
		background-color: #fff;
	}
	/* 권한/로그아웃 메뉴 */
	.navbar-collapse.collapse,
	.px-nav-left~.px-navbar .navbar-collapse{
		display: block;
		position:absolute;
		right:0;
		top:0;
		border: none;
		overflow: hidden;
		background: var(--main-500) ;
	}
	.navbar-right{
		float:right;
	}
	.navbar-nav{
		background-color: transparent;
		padding-right:16px;
	}
	.px-navbar .dropdown-menu>li, .px-navbar .navbar-nav>li{
		border-bottom:none;
	}
	.navbar-nav>li{
		float:left;
		border:none !important;
		position:relative;
	}
	.navbar-nav>li:hover .dropdown-menu{
		display: block;
	}
	.navbar-nav>li>a{
		height:var(--nav-height);
		line-height:var(--nav-height);
		color:#fff;
		padding:0 24px;
	}
	html[data-theme="purple"] .nav>li>a:focus, 
	html[data-theme="purple"] .nav>li>a:hover{
		background-color: #7373d3;
	}
	html[data-theme="blue"] .nav>li>a:focus, 
	html[data-theme="blue"] .nav>li>a:hover{
		background-color: #2977e5;
	}
	html[data-theme="gray"] .nav>li>a:focus, 
	html[data-theme="gray"] .nav>li>a:hover{
		background-color: #7b879a;
	}
	html[data-theme="vermilion"] .nav>li>a:focus, 
	html[data-theme="vermilion"] .nav>li>a:hover{
		background-color: #e16651;
	}
	.px-navbar-icon{
		margin-right:4px;
	}
	.px-navbar-icon > img{
		filter:var(--img-w);
		vertical-align: -3px;
		width:16px;
		height:16px;
	}
	.px-navbar .dropdown-menu,
	.navbar-nav .open .dropdown-menu{
		padding:0;
		border:1px solid var(--border);
		border-top:2px solid var(--main-700);
		width:160px;
		max-height:236px;
		overflow-y: auto;
		border-radius: 0 0 4px 4px;
		position:absolute;
		right:0;
		left:auto;
		background: #fff;
	}
	.px-navbar .dropdown-menu>li{
		border:none !important;
	}
	.px-navbar .dropdown-menu>li>a{
		font-size:14px;
		color:var(--text-basic);
		padding:0 18px;
		line-height:48px !important;
	}
	.dropdown-menu>li.active>a{
		padding-left:32px;
		background: #fff url(../images/check-circle.svg) no-repeat 12px center /16px 16px;
	}
	.dropdown-menu .dropmenu-icon {
		display: inline-block;
		vertical-align: -3px;
		width: 16px;
		height: 16px;
		margin-right: 6px;
		background: no-repeat 0 0 /16px 16px;
	}

	.dropdown-menu .dropmenu-icon.i-pw-change {
		background-image: url(../images/password-check.svg);
	}

	.dropdown-menu .dropmenu-icon.i-logout {
		background-image: url(../images/unlock.svg);
	}
	/* 2024.09.20 topbar 버그 현상으로 인해 주석처리 */
/*	.navbar-nav .open .dropdown-menu>li>a:focus, .navbar-nav .open .dropdown-menu>li>a:hover{*/
/*		background-image:url(../images/check-circle.svg);*/
/*	}*/
	.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover,.px-navbar .dropdown-menu>li:hover{
		background-color:#f2f2f2;
		color:var(--text-basic);
	}
	.px-navbar .navbar-nav>li>.dropdown-toggle[href="#"]:before, .px-navbar .navbar-nav>li>.dropdown-toggle[href=""]:before{
		display: none;
	}
	.nav>li>a:focus, .nav>li>a:hover{
		background-color:var(--main-500);
		color:#fff;
	}
}
@media screen and (min-width:544px){
	.px-nav{
		width: calc(var(--nav-height) + 1px);
	}
	.px-nav-expand{
		width: 230px;
	}
	.px-nav-expand~.px-content{
		margin-left:230px;
	}
	.px-footer.px-footer-bottom{
		margin-left:var(--nav-height);
	}
}
@media screen and (min-width:992px) {
	.px-nav{
		width: 230px;
	}
	.px-nav-collapse{
		width: calc(var(--nav-height) + 1px);
	}
	.px-footer.px-footer-bottom{
		margin-left:230px;
	}
}