@charset "UTF-8";

/********************************************************
reset
*********************************************************/
* {
	font-family: 'Pretendard' !important;
	font-weight: 400;
	letter-spacing: -0.25px;
	line-height: 1.5;
	box-sizing: border-box;
	font-size: 14px;
	padding: 0;
	border: none;
	margin: 0;
	box-sizing: border-box;
}
ul,li{list-style: none;}
button{background: none;}
input[type="checkbox"],
input[type="radio"] {
	width: 0;
	height: 0;
	opacity: 0;
	position: static;
	margin: 0 !important;
}
img{
	max-width: 100%;
}

/* bootstrap 초기화 */
label {
	font-weight: 400;
	margin-bottom: 0;
	cursor: pointer;
}


/*********************************************************
settings
*********************************************************/
html{overflow-y: scroll; overflow-x: auto;}
h1,h2,h3,h4 {font-weight: 700;}
body {background-color: var(--gray-200); min-width: 1366px;}
input::placeholder,
input::-webkit-input-placeholder,
input:-ms-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
textarea:-ms-input-placeholder{color: #999; font-size:12px;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
	-webkit-text-fill-color:var(--text-basic);
	-webkit-box-shadow:0 0 0 1000px #fff inset !important;
	box-shadow: 0 0 0 1000px #fff inset !important;
}
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active{
	-webkit-text-fill-color:var(--text-basic);
	-webkit-box-shadow:0 0 0 1000px #fff inset !important;
	box-shadow: 0 0 0 1000px #fff inset !important;
}
input[readonly],input[disabled]{cursor:no-drop;}
::-webkit-scrollbar{
	width:12px;
	background-color: #eee;
	padding:0 4px;
}
::-webkit-scrollbar-thumb{
	background:var(--gray-400);
	border-radius: 8px;
	border:3px solid #eee;
}

/***********************************************************
class
***********************************************************/
/* fontSize */
.f-0 {font-size: 0;}
.f-12 {font-size: 12px;}
.f-14 {font-size: 14px;}
.f-16 {font-size: 16px;}
.f-18 {font-size: 18px;}
.f-20 {font-size: 20px;}
.f-22 {font-size: 22px;}
.f-24 {font-size: 24px;}
/* height */
.h-28 {height: 28px;}
.h-32 {height: 32px;}
.h-40 {height: 40px;}
.h-48 {height: 48px;}
/* width */
.w-100 {width: 100% !important;}
.w-360{width:360px !important;}
.w-200{width:200px !important;}

.text-left{
	text-align: left !important;
}
.text-ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-break: break-all;
}
.a-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.clearfix:after{
	content:'';
	display:block;
	clear:both;
}
.br-4 {
	border-radius: 4px;
}
.c-st {
	padding: 34px 0;
	background-color: #fff;
	border-radius: 8px;
	border: 1px solid var(--border);
}


/*********************************************************
variable
**********************************************************/
:root {
	/*보라*/
	--main-900: #181870;
	--main-800: #282887;
	--main-700: #4040ab;
	--main-600: #5c5cc9;
	--main-500: #7f7fea;
	--main-400: #9f9ff2;
	--main-300: #b4b4f8;
	--main-200: #cecefc;
	--main-100: #e6e6fd;

	/*녹색*/
	--success-900: #1d5906;
	--success-800: #2a6b0a;
	--success-700: #3d8510;
	--success-600: #529f18;
	--success-500: #6bba21;
	--success-400: #98d551;
	--success-300: #baea76;
	--success-200: #daf8a6;
	--success-100: #eefbd2;

	/*빨강*/
	--error-900: #7a0d35;
	--error-800: #931639;
	--error-700: #b72340;
	--error-600: #db3345;
	--error-500: #ff474a;
	--error-400: #ff7e75;
	--error-300: #ffa290;
	--error-200: #ffc7b5;
	--error-100: #ffe6da;

	/*갈색*/
	--warning-900: #7a2708;
	--warning-800: #93390e;
	--warning-700: #b7821d;
	--warning-600: #db7020;
	--warning-500: #ff922d;
	--warning-400: #ffb561;
	--warning-300: #ffca81;
	--warning-200: #ffe0ab;
	--warning-100: #fff1d5;

	/*파랑*/
	--info-900: #103576;
	--info-800: #1a4c8f;
	--info-700: #2a6bb1;
	--info-600: #3d8fd4;
	--info-500: #54b6f7;
	--info-400: #7ed0fa;
	--info-300: #98e0fc;
	--info-200: #bbeffe;
	--info-100: #dcf9fe;

	/*검정*/
	--gray-900: #0b1119;
	--gray-800: #161d24;
	--gray-700: #28323c;
	--gray-600: #374553;
	--gray-500: #646f7c;
	--gray-400: #c5c8ce;
	--gray-300: #e9ebee;
	--gray-200: #f5f6fa;
	--gray-100: #fafbfd;

	/*라인색*/
	--border: #dddfeb;
	--border-disabled : #ebecf2;

	/*텍스트*/
	--text-basic: #1b1e21;
	--text-second: #4a4e52;
	--text-placeholder: #9ca5ad;
	--text-disabled:#a6afb8;

	--nav-height:60px;
	--text-letter: -0.25px;

	/* svg 이미지 */
	--img-primary: invert(54%) sepia(45%) saturate(1972%) hue-rotate(209deg) brightness(94%) contrast(95%);
	--img-w: invert(100%) sepia(100%) saturate(100%) hue-rotate(306deg) brightness(105%) contrast(105%);
	--img-b: invert(4%) sepia(3%) saturate(5589%) hue-rotate(169deg) brightness(92%) contrast(83%);
}
/* theme test */
html[data-theme='blue'] {
	--main-100:#ebf6ff;
	--main-500:#2e85ff;
	--main-700:#174cb7;
	--gray-200:#fbfbfb;
	--img-primary:invert(43%) sepia(93%) saturate(2196%) hue-rotate(199deg) brightness(99%) contrast(105%);
}
html[data-theme='gray'] {
	--main-100:#ecf1f6;
	--main-500:#8996ab;
	--main-700:#505863;
	--gray-200:#fbfbfb;
	--img-primary:invert(62%) sepia(5%) saturate(1527%) hue-rotate(178deg) brightness(97%) contrast(76%);
}
html[data-theme='vermilion'] {
	--main-100:#fffbfa;
	--main-500:#fa725a;
	--main-700:#de3c1f;
	--gray-200:#fbfbfb;
	--img-primary:invert(56%) sepia(32%) saturate(865%) hue-rotate(321deg) brightness(93%) contrast(111%);
}

/* guide layout */
body.guide {
	padding: 50px;
	background-color: var(--gray-200);
}
body.guide section {
	width: 1600px;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 10px;
	padding: 30px;
	margin-bottom: 30px;
}
body.guide h1 {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 20px;
}
body.guide h3{
	display:block;
	width:100%;
}
.ex-area + .ex-area{
	margin-top:30px;
}
pre{
	margin:10px 0 0;
	background-color: var(--gray-100);
	padding:10px 0;
	border:1px solid var(--border);
}

/*********************************************************
form
**********************************************************/
.form-group{
	margin-bottom:0;
	position:relative;
}
label,.input-label,.check-label{
	font-weight: 700;
	line-height:1;
	margin-bottom:8px;
}
.form-group label .required{
	font-size:12px;
	color:var(--error-500);
	position:absolute;
	right:0;
	top:0;
}
.form-control{
	height:44px;
	padding:0 16px;
	border:1px solid var(--border);
	border-radius: 4px;
	box-shadow: none;
	font-size:14px;
}
.form-control:focus,
.form-control:hover,
.form-control:active,
.form-control.active,
.i-input.active{
	border-color:var(--main-500);
}
/* disabled, readonly */
.form-group.readonly .form-control,
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
	background-color: var(--gray-100);
	color:var(--text-basic);
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control,
.form-group.readonly .form-control:hover,
.form-group.readonly .form-control:focus,
.form-group.readonly .form-control:active,
.form-group.readonly .i-input:hover,
.form-group.readonly .i-input:focus,
.form-group.readonly .i-input:active,
.form-group.readonly .i-input.active{
	border-color:var(--border);
}
/* label inline */
.label-inline{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.label-inline label,
.input-label{
	width:100px;
}
.label-inline label + *,
.label-inline .input-label + *{
	width:calc(100% - 100px);
}
.label-inline label{
	margin-bottom:0;
}
.label-inline p.required{
	padding-left:100px;
}
/* comment */
.form-group p.comment{
	width:100%;
	font-size:12px;
	margin: 4px 0px;
	line-height: 1;
	color:var(--text-second);
}
/* required */
.form-group p.required{
	display: none; 
	width:100%;
	font-size:12px;
	margin-top:4px;
	line-height: 1;
	color:var(--text-second);
}
/* error */
.form-group.error .form-control,
.form-group.error .i-input,
.form-group.error textarea{
	border-color:var(--error-500);
}
.form-group.error p.required,
p.required.error{
	display: block;
	color:var(--error-500);
}
/* icon input */
.i-input {
	border:1px solid var(--border);
	border-radius: 4px;
	padding:0 16px 0 48px;
	background:url(../images/lock.svg) no-repeat 16px center /20px;
	transition:border-color .3s ease-in-out;
	position:relative;
}
.i-input:hover{
	border-color:var(--main-500);
}
.i-input.right{
	padding:0 48px 0 16px;
	background-position:calc(100% - 16px) center;
}
.i-input .form-control{
	border:none;
	padding:0;
	height:42px;
}
/* search */
.form-search{
	display: flex;
}
.form-search .search-select{
	width:120px;
	margin-right:8px;
}
.form-search .select2-container .select2-selection{
	min-height:42px;
}
.form-search .select2-container .select2-selection--single .select2-selection__rendered{
	line-height:42px;
}
.form-search .i-input{
	background:none;
}
.form-search .btn-search{
	position:absolute;
	right:16px;
	top:50%;
	width:20px;
	height:20px;
	margin-top:-11px;
}
/* 생성페이지 상단 인풋 */
.top-form{
	display: flex;
	gap:12px;
	margin-bottom:12px;
}
.top-form input{
	width:calc(100% - 250px);
}
.top-form .btn-group{
	width:250px;
}
.top-form button{
	height:44px;
	font-weight: 500;
}

/* textarea */
textarea{
	width: 100%;
	outline:none;
	border:1px solid var(--border);
	border-radius: 4px;
	padding:16px;
	line-height:1.75;
	resize: none;
}
textarea:hover,
textarea:active,
textarea:focus{
	border-color:var(--main-500);
}

/*********************************************************
select
**********************************************************/
/*** common ***/
.select2-container.select2{
	min-height:42px;
	border:1px solid var(--border);
	overflow: hidden;
	border-radius: 4px;
}
/* select border */
.select2-container .select2-selection{
	border-radius: 4px;
	border:none;
}
/* select hover, active시 보더색 변경 */
.select2:hover .select2-selection,
.select2.select2-container--open .select2-selection{
	border-color:var(--main-500);
}
/* dropdown border */
.select2-dropdown{
	border:1px solid var(--border);
	border-radius: 4px;
}
/* dropdown 위아래 패딩 삭제 */
.select2-results{
	padding:0;
}
/* option 높이값,스타일 */
.select2-results__option{
	height:40px;
	line-height:40px;
	color:var(--text-basic);
	padding:0 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.select2-results__option[aria-selected=false]{
	display:block;
}
.select2-results__option[aria-selected=true]{
	display:none;
}
/* option hover, option select 배경색 */
.select2-results__option[aria-selected=true],
.select2-results__option:hover{
	background-color: var(--gray-200);
}
/* arrow */
.select2-selection .select2-selection__arrow{
	padding:0 !important;
	right:16px;
	top:50%;
	transform:translate(-50%);
}
.select2-selection--single .select2-selection__arrow::after{
	display: none;
}
.select2-container .select2-selection .select2-selection__rendered:after{
	border: none !important;
	width:18px;
	height:9px;
	content:'';
	background:url(../images/select-arrow.svg) no-repeat 100% center / 24px 13px;
	position:absolute;
	top:50%;
	right:10px;
	margin-top:-4px;
}
.select2-container--open .select2-selection .select2-selection__rendered:after{
	transform:rotate(-180deg);
}/* arrow end */
/* placeholder */
.select2-search--inline{
	float:none;
	display: contents;
}
.select2-container .select2-search--inline .select2-search__field{
	width:100% !important;
}

/*** multiple ***/
/* multiple placeholder */
.select2-container .select2-search--inline .select2-search__field{
	margin-top:0;
	font-size:14px;
	padding:4px 0 0 12px;
	height:40px;
}
/* multiple 옵션 선택시 placeholder 삭제(높이값이 잡혀 있어 삭제) */
.select2-container .select2-selection__choice + .select2-search--inline{
	display:none;
}
/* multiple 최소 높이(옵션 선택값이 많아지면 줄이 바뀌므로 최소 높이만 작업) */
.select2-container .select2-selection--multiple .select2-selection__rendered{
	min-height:42px;
	padding:0 32px 4px 4px; 
	display:flex;
	align-items: center;
	flex-wrap: wrap;
}
/* multiple option style */
.select2-selection__choice__remove{
	float:right;
	margin-left:0;
	margin-right:-7px;
	margin-top:2px
}
.select2-container .select2-selection__choice{
	background-color: var(--main-500);
	color:#fff;
	height:28px;
	line-height:28px;
	font-size:12px;
	padding:0 8px;
	border-radius: 24px;
	max-width: 95%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	word-break: break-all;
}

/*** single ***/
/* select2 disabled */
.select2-primary.disabled + .select2 .select2-selection{
	background-color: var(--gray-100);
	cursor: default;
}
.select2-primary.disabled + .select2-container .select2-selection .select2-selection__rendered:after{
	display: none;
}
/* single search area */
.select2-search--dropdown{
	display: none;
}
/* height값 */
.select2-container .select2-selection--single .select2-selection__rendered{
	padding:0 16px;
	line-height:42px;
	text-align: left;
}

/* checkbox , radio */
.form-check + .form-check{
	margin-top:8px;
}
.form-check-inline{
	display: inline-block;
	vertical-align: top;
}
.form-check-inline + .form-check-inline{
	margin:0 0 0 12px;
}
.form-check label{
	font-weight: 400;
	margin-bottom:0;
}
label input[type="checkbox"]+span,
label input[type="radio"]+span {
	font-size: 0;
	display: inline-block;
	vertical-align: 13px;
	background: no-repeat 0 0 /100%;
	margin-right: 4px;
}

label input[type="checkbox"]+span {
	width: 18px;
	height: 18px;
	background-image: url(../images/checkbox.svg);
}

label input[type="checkbox"]:checked+span {
	background-image: url(../images/checkbox_on.svg)
}
html[data-theme="blue"] label input[type="checkbox"]:checked+span{
	background-image: url(../images/checkbox_on-blue.svg)
}
html[data-theme="gray"] label input[type="checkbox"]:checked+span{
	background-image: url(../images/checkbox_on-gray.svg)
}
html[data-theme="vermilion"] label input[type="checkbox"]:checked+span{
	background-image: url(../images/checkbox_on-vermilion.svg)
}
label input[type="radio"]+span {
	width: 20px;
	height: 20px;
	background-image: url(../images/radio.svg);
	vertical-align: 15px;
}

label input[type="radio"]:checked+span {
	background-image: url(../images/radio_on.svg);
}
html[data-theme="blue"] label input[type="radio"]:checked+span{
	background-image: url(../images/radio_on-blue.svg)
}
html[data-theme="gray"] label input[type="radio"]:checked+span{
	background-image: url(../images/radio_on-gray.svg)
}
html[data-theme="vermilion"] label input[type="radio"]:checked+span{
	background-image: url(../images/radio_on-vermilion.svg)
}
/*********************************************************
button
**********************************************************/
.btn{
	height:40px;
	border-radius: 4px !important;
	color:#fff;
	border:none;
	padding:4px 16px;
	position:relative;
	overflow: hidden;
	transition:all .3s ease-in-out;
}
.btn-default.btn-primary{
	background-color:var(--main-500);
}
.btn-default.btn-primary:hover,
.btn-outline.btn-primary:hover{
	background-color: #7373d3;
	color:#fff;
}
html[data-theme="blue"] .btn-default.btn-primary:hover,
html[data-theme="blue"] .btn-outline.btn-primary:hover{
	background-color: #2977e5;
}
html[data-theme="gray"] .btn-default.btn-primary:hover,
html[data-theme="gray"] .btn-outline.btn-primary:hover{
	background-color: #7b879a;
}
html[data-theme="vermilion"] .btn-default.btn-primary:hover,
html[data-theme="vermilion"] .btn-outline.btn-primary:hover{
	background-color: #e16651;
}
.btn-default.btn-success{
	background-color:var(--success-500);
}
.btn-default.btn-success:hover,
.btn-outline.btn-success:hover{
	background-color: #61a81e;
	color:#fff;
}
.btn-default.btn-error{
	background-color:var(--error-500);
}
.btn-default.btn-error:hover,
.btn-outline.btn-error:hover{
	background-color: #e64043;
	color:#fff;
}
.btn-default.btn-warning{
	background-color:var(--warning-500);
}
.btn-default.btn-warning:hover,
.btn-outline.btn-warning:hover{
	background-color: #e68429;
	color:#fff;
}
.btn-default.btn-info{
	background-color:var(--info-500);
}
.btn-default.btn-info:hover,
.btn-outline.btn-info:hover{
	background-color: #4ca4df;
	color:#fff;
}
.btn-default.btn-gray{
	background-color:var(--gray-400);
}
.btn-default.btn-gray:hover,
.btn-outline.btn-gray:hover{
	background-color: #646f7c;
	color:#fff;
}
.btn-default.btn-gray2{
	background-color: var(--gray-300);
	color:var(--text-basic);
}
.btn-default.btn-gray2:hover,
.btn-outline.btn-gray2:hover{
	background-color: #c5c8ce;
	color:var(--text-basic);
}
.btn-default.btn-disabled{
	background-color:var(--gray-200);
	border:1px solid var(--border-disabled);
	color:var(--text-disabled);
}
.btn-outline{
	background-color:transparent;
	border:1px solid;
}
.btn-outline.btn-primary{
	border-color:var(--main-500);
	color:var(--main-500);
}
.btn-outline.btn-success{
	border-color:var(--success-500);
	color:var(--success-500);
}
.btn-outline.btn-error{
	border-color:var(--error-500);
	color:var(--error-500);
}
.btn-outline.btn-warning{
	border-color:var(--warning-500);
	color:var(--warning-500);
}
.btn-outline.btn-info{
	border-color:var(--info-500);
	color:var(--info-500);
}
.btn-outline.btn-gray{
	border-color:var(--gray-400);
	color:var(--gray-400);
}
.btn-outline.btn-gray2{
	border-color:var(--gray-400);
	color:var(--text-second);
}
/* 버튼에 아이콘 들어가는 경우 */
.btn-icon span{
	display: inline-block;
	padding-left:20px;
	background: url(../images/calendar.svg) no-repeat 0 center / 16px 16px;
}
/* 버튼 2개 이상 */
.btn-group{
	display: flex;
	gap:8px;
}
.btn-group .btn{
	flex: 1;
	flex-grow: 1;
}
/* 버튼에 아이콘 들어가는 경우 */
/* .btn-icon{
	padding-left:44px;
	background-repeat: no-repeat;
	background-position: 20px center;
	background-size: 16px;
} */
/* 생성버튼 */
.btn-prd span{
	background-image:url(../images/Union.svg);
	background-size:9px;
	padding-left:20px;
	background-position:4px center;
}
/*********************************************************
board
**********************************************************/
.board-panel .board-head{
	padding:0 24px;
}
.board-panel .board-head .board-row{
	display: flex;
	justify-content: space-between;
	align-items:center;
}
.board-panel .board-head .board-row + .board-row{
	margin-top:12px;
}
.board-panel .board-list-total{
	padding-left:20px;
	background:url(../images/document.svg) no-repeat 0 center / 16px 16px;
	color:var(--text-second);
}
.board-panel .board-list-total > p,
.board-panel .board-list-total .total{
	font-weight: 700;
}
.board-panel .board-list-total .total{
	color:var(--main-500);	
}
.board-panel .board-list-total .pages{
	display:inline-block;
	vertical-align: 1px;
	font-weight: 500;
}
.board-panel .board-list-total .pages em{
	font-style: normal;
	color:var(--main-500);
}
.board-panel .btn-group button{
	flex:auto;
	flex-grow:inherit;
}
.board-panel .btn-group .btn-disabled{
	width:80px;
}

.board {
	border-collapse: collapse;
	width: 100%;
	padding: 0;
	border-top: 1px solid var(--border);
	margin-top:12px;
}
.board th,
.board td {
	padding: 0;
	height:48px;
	text-align: center;
	color: var(--text-basic);
	border-bottom: 1px solid var(--border);
}
.board th {
	font-weight: 700;
}
.board-panel th img {
	height: 12px;
	vertical-align: 0;
}
.board > tbody > tr:hover td{
	background-color: var(--main-100);
}
.board th > span {
	display: inline-block;
	vertical-align: -1px;
	margin-left: 4px;
}
.board th.sorting img {
	filter: var(--img-primary);
}
.board td:not(.non-cursor) {
	cursor: pointer;
}
.board td{
	padding:0 10px;
}
.board td button {
	margin: 0 4px;
}
.board tr:not(.no-data) img:hover {
	filter: var(--img-primary);
}
.board label{
	margin-bottom:0;
}
.board label input[type="checkbox"]+span{
	margin-right:0;
}
/* 리스트형 */
.board-list-type .board-head{
	padding:0;
}
.board-list-type .board-top-text strong{
	color:var(--text-basic);
}
.board-list-type .board-top-text p{
	color:var(--text-second);
}
/* 조회된 결과가 없을 경우 */
.board .no-data td{
	padding:60px 0;
	border-bottom:none;
	cursor: default;
}
.board .no-data:hover td{
	background-color: #fff;
}
.board .no-data td p{
	margin-bottom:12px;
}
/* pagination */
nav[aria-label="Page navigation"]{
	text-align: center;
}
.pagination .page-item a{
	border-radius: 0;
	color:var(--text-second);
	border-color:var(--border);
	width:36px;
	height:36px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:0;
}
.pagination .page-item:not(.arrow):hover a,
.pagination .page-item.active a{
	background-color: var(--main-500);
	border-color:var(--main-500);
	color:#fff;
}
.pagination .page-item a span{
	line-height:1;
}
.pagination .page-item.arrow img{
	height:12px;
}
.pagination .page-item.arrow:hover a{
	border-color:var(--main-500);
}
.pagination .page-item.arrow:hover img{
	filter:var(--img-primary);
}
.pagination .page-item.arrow.disabled img{
	filter:invert(77%) sepia(8%) saturate(336%) hue-rotate(169deg) brightness(89%) contrast(93%);
}

/*********************************************************
grid
**********************************************************/
.grid-row{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20%, auto));
	column-gap: 12px;
	grid-auto-rows: minmax(268px, 360px);
}
.grid-row + .grid-row{
	margin-top:12px;
}
/* .grid-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
} */
.grid-item .grid-cnt-box{
	max-width: 100%;
	height:95%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.grid-item .chart-message-img{
	height:100px;
}
.grid-item .chart-message-text{
	margin-top:20px;
	font-size:16px;
	font-weight: 700;
	color:var(--text-basic);
}
.grid-item .chart-message-text span{
	color:var(--main-500);
	font-size:16px;
	font-weight: 700;
}
.grid-item .chart-name{
	cursor: pointer;
	font-size:14px;
	color:var(--text-second);
	font-weight: 600;
}

/*********************************************************
modal
**********************************************************/
.modal {
	display: none;
	position: fixed;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: rgba(0, 0, 0, .75);
	z-index:2000;
}

.modal-dialog {
	margin: 0 !important;
	width: 360px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50.1%,-50.1%) !important;
}
.modal-content{	
	border-radius: 8px;
	overflow: hidden;
}
.modal-header {
	background-color: #fff;
	border-radius: 0;
	padding: 36px 0 0;
	border: none;
}

.modal~.select2-container {
	z-index: 2000;
}

.modal-body p {
	font-size: 14px;
	color: var(--text-second);
	line-height: 1.7;
	margin: 0;
}

.modal .modal-body .form-group {
	text-align: left;
}

.modal .modal-body .form-group + .form-group {
	margin-top: 20px;
}

.input-label {
	font-size: 14px;
	color: var(--text-basic);
}
.modal .modal-footer {
	padding: 20px;
	background-color: var(--gray-200);
	margin-bottom: 0;
	border: none;
}
.modal .modal-footer .btn {
	height: 40px;
}

.modal-alert .modal-header {
	padding: 0;
	border: none;
	font-size: 0;
	line-height: 1;
	margin: 0;
}

.modal .btn-close {
	width: 16px;
	height: 16px;
	background: url(../images/close.svg) no-repeat center /16px 16px;
	position: absolute;
	top: 8px;
	right: 8px;
}

/* warning, error modal */
.modal.modal-warning .modal-content {
	box-shadow: none;
	border: none;
	border-radius: 0 0 8px 8px;
	border-top: 3px solid;
	padding: 28px 28px 36px;
	width: 360px;
}

.modal.modal-warning .warning.modal-content {
	border-top-color: var(--warning-500);
}

.modal.modal-warning .error.modal-content {
	border-top-color: var(--error-500);
}
.modal.modal-warning .modal-header{
	background-color: #fff;
}
.modal.modal-warning .modal-title {
	font-size: 24px;
	padding-top: 32px;
}

.modal.modal-warning .warning .modal-title {
	color: var(--warning-500);
}

.modal.modal-warning .error .modal-title {
	color: var(--error-500);
}

.modal-body {
	padding:20px;
}
.modal.modal-warning .modal-body{
	padding:0;
}
.modal.modal-warning .modal-footer {
	margin-top: 24px;
	padding:0;
}

.modal.modal-warning .modal-footer .btn {
	height: 40px;
	font-size: 16px;
}
/* modal-alert : no title */
.modal-basic .modal-body{
	padding:20px;
}

/* modal-alert */
.modal-alert .modal-content {
	border-radius: 8px;
	overflow: hidden;
}

.modal-alert .modal-header {
	padding: 36px 0 0;
}

.modal-alert .modal-title {
	font-size: 18px;
	color: var(--text-basic);
}

.modal-alert .modal-body {
	margin: 8px 0 24px;
}

.modal-alert .modal-body p {
	font-size: 14px;
	color: var(--text-second);
	margin: 0;
}
/* 비밀번호 변경 Modal */
#change-pswd-modal .form-control::placeholder{
	font-size:12px !important;
}
.modal.modal-input .modal-dialog {
	width: 480px;
}
.modal.modal-input .user-info-subtitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.modal.modal-input .required_label,
.modal.modal-input .error-msg {
	color: var(--error-500);
	font-size: 12px;
}

.modal.modal-input .error-msg {
	margin-top: 4px;
	display: none;
}

/* url-share-chart modal */
.url-share-chart .modal-dialog{
	width:400px;
}
.url-share-chart input:read-only {
	background-color: #fff;
}

.url-share-chart input:read-only:hover {
	cursor: default;
}
.modal.modal-alert.url-share-chart .modal-dialog {
	width: 420px;
}
.url-share-chart .form-section{
	margin-top:8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.url-share-chart .form-group .btn-gray {
	background-color: var(--gray-300);
	width: 83px;
	height: 32px;
	color: var(--text-second);
}

/* 저장소 생성 */
.modal.strg-create-modal .modal-dialog {
	width: 360px;
}

/* 임시 비밀번호 모달 */
.modal.user-pw .modal-body strong span{
	font-weight: 500;
	color:var(--main-500);
}
/* progress bar modal */
.modal-progress .modal-dialog{
	width:400px;
}
.modal-progress .btn-group{
	justify-content: center;
}
.modal-progress .btn-group button{
	width:100px;
	flex:none;
	flex-grow: inherit;
}
.progress{
	margin:24px 0 0;
	height:8px;
	background-color: #f5f5fd;
	border-radius: 8px;
	box-shadow: none;
}
.progress-bar{
	box-shadow: none;
	background-color: var(--main-500);
}
/* select modal */
.modal-select .modal-dialog{
	width:400px;
}
.modal-select .select2-selection__rendered{
	text-align:center !important;
}

/* Loading modal */
.modal-loading{
	z-index: 2010;
}
.modal-loading .modal-content{
	background: none;
}
.modal-loading .spinner-border{
	display: inline-block;
	width:40px;
	height:40px;
	vertical-align: text-bottom;
	border:3px solid #fff;
	border-right-color:transparent;
	border-radius: 50%;
	animation:spinner-border .75s linear infinite;
}
@keyframes spinner-border {
	100% {transform:rotate(360deg);}
}
.modal-loading .spinner-border + .loading-text{
	font-size:16px;
	font-weight: 700;
	color:#fff;
	margin-top:12px;
}

/* 데이터 조회 이력 모달 */
.modal-data .modal-dialog{
	width:700px;
}
.modal-data .modal-body{
	max-height:500px;
	overflow-y: auto;
}
.modal-data table{
	width:100%;
	border-top:2px solid var(--main-500);
	border-left:1px solid var(--border);
}
.modal-data caption{
	font-size:0;
	padding:0;
}
.modal-data table th,
.modal-data table td{
	border:1px solid var(--border);
	text-align: center;
	height:40px;
}
.modal-data table th{
	background-color: var(--main-100);
	font-weight: 500;
	border-color:rgba(255,255,255,.7);
	color:var(--text-basic);
}
.modal-data table td{
	color:var(--text-second);
}

/* theme 변경 */
.modal-theme .theme-group{
	display:flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.modal-theme .theme-group button{
	flex:1;
	color:var(--text-second);
}
.modal-theme .color-box{
	padding:4px;
	border:1px solid var(--border);
	height:32px;
	background-color: #fff;
	margin-bottom:4px;
}
.modal-theme .color-box .theme-color{
	font-size:0;
	width:100%;
	height:100%;
	display: block;
	position:relative;
}
.modal-theme .color-box .theme-color:before{
	content:url('../images/check.svg');
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	z-index: 10;
	filter:var(--img-w);
	display: none;
}
.modal-theme .theme-group button.active .theme-color:before{
	display: block;
}
.modal-theme .theme-group button[data-color="purple"] .theme-color{
	background:linear-gradient(to right, #4040a8 25%, #7f7fea 25% 75%, #d8d8fa 75% 100%);
}
.modal-theme .theme-group button[data-color="blue"] .theme-color{
	background:linear-gradient(to right, #174cb7 25%, #2e85ff 25% 75%, #abd8ff 75% 100%);
}
.modal-theme .theme-group button[data-color="gray"] .theme-color{
	background:linear-gradient(to right, #505863 25%, #8996ab 25% 75%, #eee 75% 100%);
}
.modal-theme .theme-group button[data-color="vermilion"] .theme-color{
	background:linear-gradient(to right, #de3c1f 25%, #fa725a 25% 75%, #fdb99c 75% 100%);
}
/* 차트 선택 모달 */
.modal-chart .modal-dialog{
	width:840px;
}
.modal-chart .modal-body{
	display: flex;
}
.modal-chart .modal-body .selection_area{
	height:300px;
	overflow-y: auto;
	width:55%;
}
.modal-chart .select_tbl{
	width:100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.modal-chart .select_tbl caption{
	font-size:0;
	padding:0;
}
.modal-chart .select_tbl thead{
	position:sticky;
	top:0;
}
.modal-chart .select_tbl tbody tr{
	cursor: pointer;
}
.modal-chart .select_tbl tbody tr.active td{
	background-color: var(--main-100);
}
.modal-chart .select_tbl th,
.modal-chart .select_tbl td{
	text-align: center;
	padding:8px 10px;
	border-bottom:1px solid var(--border);
}
.modal-chart .select_tbl th{
	font-weight: 600;
	background-color:var(--gray-200);
	border-bottom:none;
}
.modal-chart .select_tbl label{
	margin-bottom:0;
	display: flex;
	align-items: center;
}
.modal-chart .select_tbl label input[type="radio"]+span{
	background-position:center;
	width:20px;
	height:20px;
	background-image:none;
	background-size:130%;
}
.modal-chart .select_tbl tbody tr.active label input[type="radio"]+span{
	background-image:url(../images/check.svg);
}
.modal-chart .graph_img_area{
	padding:20px;
	width:45%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-chart .graph_img_area .chart-message-text{
	margin-top:12px;
	font-size:16px;
}
.modal-chart .graph_img_area .chart-message-text span{
	color:var(--main-500);
	font-weight: 700;
	font-size:16px;
}
/* 프로파일 추가 모달 */
.modal-profile.modal .modal-dialog{
	width:840px;
}
.modal-profile .modal-body-top{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.modal-profile .modal-body-top .form-group{
	margin-top:0 !important;
	flex:1;
}
.modal-profile .modal-body-top + .form-group{
	margin-top:12px;
}
.modal-profile .modal-footer .btn{
	width:120px;
}
.modal-profile .modal-footer > .btn{
	float:left;
}
.modal-profile .modal-footer .btn-group{
	float:right;
}
/* 복사 버튼 클릭 시 우측 하단 */
.common-snackbar-modal{
	position:fixed;
	right:32px;
	bottom:32px;
	background: var(--gray-500);
	border-radius: 8px;
	padding:16px;
	z-index: 4000;
	width:200px;
	text-align: center;
	display: none;
}
.common-snackbar-modal-content{
	color:#fff;
	position:relative;
}
.common-snackbar-modal-content .btn-close{
	position:absolute;
	right:-16px;
	top:-16px;
	width:16px;
	height:16px;
	filter:var(--img-w);
}
.common-snackbar-modal-content > img{
	width:16px;
	height:16px;
	filter:var(--img-w);
	vertical-align: -3px;
	margin-right:4px;
}

/***************************************************************
error page
***************************************************************/
.error-area{
	width:100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.error-area.error-full{	
	height:100vh;	
}
.error-area.error-top{
	height:calc(100vh - var(--nav-height));
}
.error-area p{
	font-size:16px;
	margin-top:24px;
}
.error-area button{
	margin-top:24px;
	height:40px;
	padding:0 20px 0 40px;
	background-repeat:no-repeat;
	background-position: 20px center;
	background-size: 16px 16px;
}

/****************************************************************
tooltip
****************************************************************/
.tooltip-inner{
	max-width: none;
	background-color: rgba(100,111,124,.9);
	border-radius: 4px 8px;
	font-size:12px !important;
}
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow{
	border-top-color:rgba(100,111,124,.9)
}
.tooltip.right .tooltip-arrow{border-right-color:rgba(100,111,124,.9);}
.tooltip.left .tooltip-arrow{border-left-color:rgba(100,111,124,.9);}
.tooltip.bottom .tooltip-arrow,.tooltip.bottom-left .tooltip-arrow,.tooltip.bottom-right .tooltip-arrow{border-bottom-color:rgba(100,111,124,.9);}
/* nav tooltip */
.px-nav-tooltip{
	background-color: rgba(100,111,124,.9);
	border-radius: 4px 8px;
	margin-top:15px;
	color:#fff;
}
.px-nav-left .px-nav-tooltip:before{
	border-right:5px solid rgba(100,111,124,.9);
}
.px-nav-right .px-nav-tooltip:before{
	border-left:5px solid rgba(100,111,124,.9);
}

/****************************************************************
datepicker
****************************************************************/
.datepicker .day.selected,
.datepicker .day.selected.today{
	background-color: var(--main-500);
	color:#fff;
	font-weight: 400;
}
.datepicker .day.today{
	background-color: #fff;
	color:var(--main-500);
	font-weight: 700;
}

/****************************************************************
profile 조회 팝업
****************************************************************/
body.w-profile{
	background:#fff ;
}
/* profile 상당 */
.profile-cnt{
	padding:30px;
	background-color: #fff;
}
.profile-cnt > h1,
.profile-cnt > p{
	text-align: center;
}
.profile-cnt > h1{
	background-color: var(--text-second);
	color:#fff;
}
.profile-cnt > p{
	margin:40px 0;
}
/* profile table 공통 */
.profile-cnt table{
	text-align: center;
	width: 100%;
}
.profile-cnt caption{
	font-weight: 700;
	font-size:24px;
	padding:0;
}
.profile-cnt table th,
.profile-cnt table td{
	min-height:40px;
	padding:10px;
}
.profile-cnt table th{
	font-weight: 700;
	text-align: center;
}
.profile-cnt table .p-0{
	padding:0;
}
.profile-cnt table .b-t-n{
	border-top:none;
}
.profile-cnt table .b-b-n{
	border-bottom:none;
}
/* table dep1 */
.profile-cnt .dep1 + .dep1{
	margin-top:30px;
}
.profile-cnt .dep1 > caption{
	background-color: var(--gray-300);
	padding:10px 20px;
	color:var(--text-second);
	font-weight: 500;
}
.profile-cnt .dep1 > thead > tr > th,
.profile-cnt .dep1 > tbody > tr > td{
	border-bottom:1px solid var(--border);
}
/* table dep2, dep3 공통 */
.profile-cnt .dep2,
.profile-cnt .dep3,
.profile-cnt .dep4{
	border:1px dotted var(--gray-400);
	border-bottom:none;
}
.profile-cnt .dep2 > thead > tr > th,
.profile-cnt .dep2 > tbody > tr > td,
.profile-cnt .dep3 > thead > tr > th,
.profile-cnt .dep3 > tbody > tr > td,
.profile-cnt .dep4 > thead > tr > th,
.profile-cnt .dep4 > tbody > tr > td{
	border-bottom:1px dotted var(--gray-400);
}
/* tabel dep2 */
.profile-cnt .dep2 caption{
	font-size:18px;
	font-weight: 500;
}

/* loading img */
#loading > img{
	height: auto !important;
}

@media screen and (max-width:1024px) {
	.modal-resize{
		overflow-x: auto !important;
	}
	.modal-resize .modal-dialog{
		width:90%;
	}
}

@media screen and (max-width:840px) {
	.modal-resize .modal-dialog{
		min-width:840px;
		left:10%;
		transform:translate(0, -50.1%) !important;
	}
}