/******************************************************************
GENERAL	
	COLOR
	MAIN: #006699
	YELLOW: #F2AF00
	RED: #F23200
	BLUE: #0013A6
	GREEN: #00AC4B
******************************************************************/
*{
	font-family:'Noto Sans KR', sans-serif;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

:root{
	/*	Border	*/
	/*	Color	*/
	--yellow: #F2AF00;
	--red: #F23200;
	--blue: #0013A6;
	--green: #00AC4B;
	--white: #FFF;
	--black: #1F292E;

	--hover:#F28200;
	--remark: #00DC60;
	--confirm: #33bbff;

	--color-white: var(--white);
	--color-weak:#F2F3F1;
	--color-hazy:#D1DBE0;
	--color-pale:#C2CFD6;;
	--color-washy:#B3C3CB;;
	--color-light : #95ADB7;
	--color-watery : #7694A2;
	--color-shadow : #5D7A89;
	--color : #485F6A;
	--color-middle:#34444C;
	--color-bold: #1F292E;

	--color-remark: #CC9900;

	/*	Background	*/
	--background-scroll: #e6f7ff;
	--background-scroll-thumb: #006699;

	--background-hover:#F28200;
	--background-main: #E0E6EB;
	--background-white: var(--white);
	--background-hazy: #F8F8F8;
	--background-form: #E6F9FF;

	--button: #66CCFF;
	
	/*	Border	*/
	--border-seperate: #E0E6EB;
	--border-form: #E0E6EB;
	--border-main: #D0DAE1;

	/*	Radius	*/
	--radius-window: 1rem;
	--radius-form: 0.25rem;
	--radius-small: 0.25rem;

	/*	Size	*/
	--font-main: 0.875rem;

	/*	Index	*/
	--index-title: 10;
}

html{
	font-size: 16px;
}

body{
	font-size: 0.875rem;
	color: var(--color);
	background-color: var(--color-white);
	letter-spacing: -0.05em;
	word-spacing: 0.1em;
}

@media only screen and (max-width: 767px) {
	/* 모바일 가로	*/
	body{
		font-size:	0.8125rem;
	}
}

table{
	width:100%;
	border-spacing:0px;
	padding:0px;
	border-collapse:collapse;
	table-layout:fixed;
}

a{
	display:inline-block;
	text-decoration:none;
	color:inherit;
}

i{
	vertical-align:middle;
}

ul, dl, ol, li, dd, dt{
	list-style: none;
}

/******************************************************************
	SCROLL
******************************************************************/
body::-webkit-scrollbar { width: 12px;}
body::-webkit-scrollbar-track { background-color: var(--background-scroll); }
body::-webkit-scrollbar-thumb { background: var(--background-scroll-thumb); border-radius:6px;}
body::-webkit-scrollbar-thumb:hover { background: var(--background-hover); }
body::-webkit-scrollbar-thumb:active { background: var(--background-hover); }
body::-webkit-scrollbar-button { display: none; }

.term_box::-webkit-scrollbar { width: 6px;}
.term_box::-webkit-scrollbar-track { background-color: var(--background-scroll); }
.term_box::-webkit-scrollbar-thumb { background: var(--background-scroll-thumb); border-radius:3px;}
.term_box::-webkit-scrollbar-thumb:hover { background:  var(--background-hover); }
.term_box::-webkit-scrollbar-thumb:active { background: var(--background-hover); }
.term_box::-webkit-scrollbar-button { display: none; }

.gnb::-webkit-scrollbar { width: 6px;}
.gnb::-webkit-scrollbar-track { background-color: var(--background-scroll); }
.gnb::-webkit-scrollbar-thumb { background:var(--background-scroll-thumb); border-radius:3px;}
.gnb::-webkit-scrollbar-thumb:hover { background: var(--background-hover); }
.gnb::-webkit-scrollbar-thumb:active { background: var(--background-hover); }
.gnb::-webkit-scrollbar-button { display: none; }


/******************************************************************
	PLACEHOLDER
******************************************************************/
::-webkit-input-placeholder {font-size:0.875rem;color: var(--color-washy) !important; }
::-moz-placeholder {font-size:0.875rem;color: var(--color-washy) !important;  }
:-moz-placeholder {font-size:0.875rem;color: var(--color-washy) !important;  }
:-ms-input-placeholder {font-size:0.875rem;color: var(--color-washy) !important; } 
::-ms-input-placeholder{font-size:0.875rem;color: var(--color-washy);}
::placeholder {font-size:0.875rem;color: var(--color-washy) !important; } 
.placeholder {font-size:0.875rem;color: var(--color-washy) !important; } 

/******************************************************************
	SWAL
******************************************************************/
.swal2-popup .swal2-title{color:var(--black);margin:0 !important; }
.swal2-popup .swal2-title .warning_color,
.swal2-popup .swal2-title .confirm_color{display:flex;}

.swal2-popup .swal2-title .material-icons-round,
.swal2-popup .swal2-title .material-icons{height:32px;font-size:2rem;line-height:32px;}
.swal2-popup .swal2-title .label,
.swal2-popup .swal2-title .text{display:inline-block;height:32px;line-height:32px;font-size:1.25rem;padding-left:8px;}
.swal2-popup .swal2-content{font-size:1rem !important;color:var(--black);padding-top:24px !important;padding-bottom:24px !important;}

.swal2-popup .swal2-actions{margin:0 !important}
.swal2-popup .swal2-styled.swal2-confirm{font-size:1rem;font-weight:700;color:var(--white);background-color:#3F4040 !important;border-radius:4px; }
.swal2-popup .swal2-styled.swal2-confirm:hover{background-color:#D6AA2B !important;}

.swal2-popup #swal2-content {padding-bottom:12px;}
.swal2-input{
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box !important;
}


/************************************************
	SELECT2
************************************************/
.select2-results::-webkit-scrollbar { width: 6px;}
.select2-results::-webkit-scrollbar-track { background-color: var(--background-scroll); }
.select2-results::-webkit-scrollbar-thumb { background: var(--background-scroll-thumb); border-radius:3px;}
.select2-results::-webkit-scrollbar-thumb:hover { background: var(--background-hover); }
.select2-results::-webkit-scrollbar-thumb:active { background: var(--background-hover); }
.select2-results::-webkit-scrollbar-button { display: none; }

.select2-results__options::-webkit-scrollbar { width: 6px;}
.select2-results__options::-webkit-scrollbar-track { background-color: var(--background-scroll); }
.select2-results__options::-webkit-scrollbar-thumb { background: var(--background-scroll-thumb); border-radius:3px;}
.select2-results__options::-webkit-scrollbar-thumb:hover { background: var(--background-hover); }
.select2-results__options::-webkit-scrollbar-thumb:active { background: var(--background-hover); }
.select2-results__options::-webkit-scrollbar-button { display: none; }

.select2-container--default .select2-selection--single{
	background-color: var(--color-white) !important;
	border: 1px SOLID var(--color-washy) !important;
	border-radius: 6px !important;
}

.select2-container .select2-selection--single {
	height: 46px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--color-watery);
	line-height: 46px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
	height: 46px !important;
}

.select2-container, .select2-dropdown, .select2-search, .select2-results {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

.select2-dropdown{
	overflow:hidden;
	border: 1px SOLID #BFC0C0 !important;
	border-radius:6px !important;
}

.select2-container--open .select2-dropdown--below{
	border-top-left-radius:6px !important;
	border-top-right-radius:6px !important;
}

.select2-results__option{
	line-height: 24px !important;
	padding-left:12px !important;
	padding-right:12px !important;
}

.select2-search input[type="search"]{
	background-color: var(--color-white);
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.grid_function .select2-container .select2-selection--single {
	height: 34px !important;
}

.grid_function .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 34px !important;
}

.grid_function .select2-container--default .select2-selection--single .select2-selection__arrow{
	height: 34px !important;
}

/************************************************
	MATERIALIZE
************************************************/
[type="radio"]+span:before, [type="radio"]+span:after {
	top: 2.5px;
	margin: 0px;
	width: 20px;
	height: 20px;
	z-index: 0;
}

[type="radio"]:not(:checked)+span, [type="radio"]:checked+span {
	padding-left: 26px;
	height: 48px;
	line-height: 48px;
}

[type="radio"]:not(:checked)+span:hover, [type="radio"]:checked+span:hover {
	color: var(--color-bold);
	font-weight:600; 
}

[type="radio"]:not(:checked)+span:before, [type="radio"]:not(:checked)+span:after {
	border: 2px SOLID var(--color-washy);
	margin-top:13px;
}

[type="checkbox"]+span:not(.lever) {
	padding-left: 28px;
	height: 48px;
	line-height: 48px;
}

[type="checkbox"].filled-in:not(:checked)+span:not(.lever):after {
	border: 2px solid var(--color-washy);
	top: 4px;
	z-index: 0;
	margin-top:12px;
}

[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after {
	background-color: var(--color-bold);
}

[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
	border: 2px solid var(--color-bold);
	margin-top:13px;
}

[type="checkbox"].filled-in:checked+span:not(.lever):after {
	top: 4px;
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-bold);
	background-color: var(--color-bold);
	margin-top:12px;
}

[type="checkbox"].filled-in:checked+span:not(.lever):before {
	top: 16px;
}


/******************************************************************
	MODAL POPUP
******************************************************************/
.modal_dialog {overflow:hidden;}


.modal-content{
	overflow:hidden;
	height:calc(100%) !important;
	background-color:var(--white);
	padding:0;
}

.modal-content h1{
	height:72px;
	font-size:1.5rem;
	font-weight:600;
	color: var(--color-bold);
	text-align:center;
	border-bottom:1px SOLID var(--color-bold);padding-top:12px;padding-bottom:24px;
}

.modal .modal-content .modal-body {
	overflow:auto;
	padding:0;
} 

.modal .modal-body::-webkit-scrollbar { width: 6px;}
.modal .modal-body::-webkit-scrollbar-track { background-color: var(--background-scroll); }
.modal .modal-body::-webkit-scrollbar-thumb { background-color: var(--background-scroll)-thumb; border-radius:3px;}
.modal .modal-body::-webkit-scrollbar-thumb:hover { background: var(--background-hover); }
.modal .modal-body::-webkit-scrollbar-thumb:active { background: var(--background-hover); }
.modal .modal-body::-webkit-scrollbar-button { display: none; }

.modal.modal-fixed-footer .modal-body {height:calc(100% - 144px) !important;min-height:calc(100% - 144px) !important;} 

.modal .modal-footer {
	height: 72px;
	width: 100%;
	text-align: center;
	background-color: #F2F2F2;
	border-radius: 0 ;
	border-top:1px SOLID #BFC0C0;
	padding: 0;
	padding-top:12px;
}
.modal .modal-footer button{margin-left:0.375rem;padding:0 1rem;}
.modal .modal-footer button:first-child{margin-left:0;}
	
.modal .modal-footer button{border:none;margin-left:6px;}
.modal .modal-footer button:first-child{margin-left:0;}
.dialog_wrapper{padding:24px;}


/************************************************
	dropzone
************************************************/
.dropzone {
	display:inline-block;
	position:relative;
	border-radius:4px;
	width:100%;
	border: 2px dashed #D0DAE1 !important;
	background-color:#F9FAFB !important;
	padding: 12px;
}
.dropzone:hover{border: 2px dashed #2CACED !important;}

.dropzone .dropzone_message{
	display:inline-block;
	position:absolute;
	top:50%;
	width:100%;
	height:36px;
	font-size: 1rempx;color:rgba(15, 135, 166, 0.4);
	text-align:center;
	line-height:36px;
	margin:0 !important;
	margin-top:-18px !important;
}

.dropzone .dropzone_message .fas{padding-right:4px;}

body.dragging, body.dragging * {
	cursor: move !important;
}

.dragged {
	position: absolute;
	opacity: 0.5;
	z-index: 2000;
}

ol.sortable_list li.placeholder {
	position: relative;
}

ol.sortable_list li.placeholder:before {
	position: absolute;
}


/******************************************************************
	DOM
******************************************************************/
.placehold {color:var(--color-pale);}
.confirm_color{color:var(--confirm);}
.warning_color{color:var(--red);}

.remark_color{color:#97a7e7;}
.annotation_color{color:var(--black);}

.input_form{
	display:inline-block;
	width:100%;
	height:48px !important;
	line-height:46px;
	background-color:#FFF;
	border:1px SOLID #BFC0C0;
	border-radius:6px;
	padding:0px 12px !important;}

.textarea_form {
	display:inline-block;
	overflow:auto;
	width:100%;
	line-height:160%;
	background-color:#FFF;
	border:1px SOLID #BFC0C0;
	border-radius:6px;
	padding:6px 12px !important;
}

.input_form:not([disabled]):not(read-only):focus,
.textarea_form:not([disabled]):not(read-only):focus{
	background-color:#FFFBE6;
	border:1px SOLID var(--black) !important;
}

.currency.krw:after{content:'원'}
.loading{text-align:center;padding:60px 0;background-image:url('/common/system/virtualdesk3/images/spinner.svg');background-repeat:no-repeat;background-position:center center;background-size:contain;}
.loading:after{content:'Loading...';font-size:12px;font-weight:bold;color:#5DB4EE;}

.form_title{display:flex;padding-bottom:8px;}
.form_title .title_label{min-height:18px;font-size:0.9375rem;font-weight:900;color:var(--black);line-height:18px;padding-left:6px;}
.form_title .form_required{color:var(--red); line-height: 0px;padding-left:4px;}
.form_title .form_required .material-icons{font-size:1.125rem; line-height: 18px;}
.form_title .form_required .material-icons-round{font-size:1.125rem; line-height: 18px;}
.form_title .form_comment{color:var(--blue); line-height: 18px;padding-left:6px;letter-spacing:-0.05em;}

.form_spacer{height:48px;line-height:48px;}

.form_remark{display:flex;justify-content: space-between;padding-top:6px;}
.form_remark .icon{flex-grow: 0;flex-shrink: 0;padding-right:4px;}
.form_remark .icon .material-icons{font-size:18px;}
.form_remark .cont{flex-grow: 1;flex-shrink: 1; font-size:0.8125rem;line-height:18px;}

.annotation{padding-top:12px;}

/******************************************************************
	DOM - DIVISION
	section
	wrapper

	container
	block
	box
******************************************************************/
.empty_box{
	text-align:center;
	border:1px SOLID #DFE7EC;
	border-radius:12px; 
	background-color:#F9F9F9;
	padding:120px 0;
}

.remark_box,
.form_box,
.summary_box{
	background-color:#F9FDFE;
	border:1px SOLID #DFE7EC;
	border-radius:12px;
	padding:24px;
}

.remark_block,
.form_block,
.summary_block{
	background-color:#F9FDFE;
	border:1px SOLID #DFE7EC;
	border-radius:12px;
	margin-top: 24px;
	padding:24px;
}

.term_box{
	overflow-y:auto;
	overflow-x:hidden;
	height:360px;
	background-color:#F9FDFE;
	border:1px SOLID #DFE7EC;
	border-radius:12px;
	padding:12px 24px;
}

.function_box{text-align:right;padding-top:60px;}
.function_footer_box{padding-top:12px;}

.submit_box{text-align:center;padding-top:60px;}
.agree_block{padding-top:12px;}

.empty_article{
	background-color:#FFF;
	border:1px SOLID #DFE7EC;
	border-radius:12px;
	padding:120px 24px;
}
.empty_article .icon{text-align:center;}
.empty_article .icon .material-icons-round{font-size:4rem;}
.empty_article .message{font-size:1rem;text-align:center;}


/******************************************************************
	DOM - BUTTON, LINK
******************************************************************/
button{display:inline-block;overflow:hidden;text-align:center;border-radius:6px;}
a:not([disabled]),button:not([disabled]){cursor:pointer;}

.form_button,
.function_button{height:48px;padding:0 24px;border-radius:6px;}
.inline_button{height:24px;border-radius:6px;padding:0 12px;}
.doc_button{height:32px;border-radius:6px;padding:0 12px;}
.submit_button{height:72px;font-size:1.25rem;border-radius:8px;border:none;padding:0 36px;margin:0 6px;}

.board_inline_button:not(.disabled),
.submit_button:not([disabled]){cursor:pointer;}

.function_button:not([disabled]){background-color:transparent;border:1px SOLID var(--color-washy);}
.function_button:not([disabled]):hover{color:var(--white);background-color:var(--black);border:1px SOLID var(--black);}

.general_button:not([disabled]){color:var(--white);background-color:var(--button);border:none;}
.general_button:not([disabled]):hover{color:var(--white);background-color:var(--hover);}

.back_button:not([disabled]){background-color:var(--color-washy);color:var(--white);}
.back_button:not([disabled]):hover{background-color:var(--black);}

.go_button:not([disabled]){background-color:var(--red);color:var(--white);}
.go_button:not([disabled]):hover{background-color:var(--black);}

.submit_button{height:72px;font-size:20px;border-radius:9px;border:none;padding:0 36px;margin:0 6px;}
.submit_button:not([disabled]){cursor:pointer;}

.button_bundle{display:flex;}
.button_bundle button{margin-left:3px;}
.button_bundle button:first-child{margin-left:0}

#schedule_sheet [name=btn_schedule_toggle]{
	color:var(--white);background-color:var(--color-washy);border:none;
}

#schedule_sheet [name=btn_schedule_toggle]:hover{
	color:var(--white);background-color:var(--hover);
}


/******************************************************************
	DOM - TAB
******************************************************************/
.tab_head{display:flex;}
.tab_head button + button{margin-left: -1px;}
.tab_head button{
	flex:1;
	display:flex;
	height:72px;
	align-items: center;
	justify-content: center;
	font-size:1rem;
	background-color:transparent;
	border:1px SOLID #BFC0C0;
	border-radius:0;
	z-index:0;
}

.tab_head button:first-child{
	border-top-left-radius:12px;
	border-bottom-left-radius:12px;
}

.tab_head button:last-child{
	border-top-right-radius:12px;
	border-bottom-right-radius:12px;
}

.tab_head .selected{
	cursor:default;
	color: #191A1A;
	font-weight:900;
	border:1px SOLID #262727;
	z-index: 1;
}

.tab_head button:not(.selected):hover{
	color: var(--white);
	border:1px SOLID #262727;
	background-color:#262727;
	z-index: 2;

}

.tab_body{padding-top:36px;}

@media only screen and (max-width: 767px) {
	/* 모바일	*/
	.tab_head button{font-size:0.875rem;}	
	.tab_body{padding-top:12px;}
}


/******************************************************************
	DOM - GRID, LIST, TABLE
******************************************************************/
.cell_fixed{flex-grow:0;flex-shrink:0;}
.cell_flex{flex-grow:1;flex-shrink:1;}

.form_grid{
	display:grid;
	row-gap: 36px;
	column-gap: 36px;
}

.section_grid{display:flex;justify-content: space-between;}


.function_list li{display:flex;padding-top:6px;}
.function_list .label{line-height:24px;}
.function_list .button{padding-left:6px;}

.desciption_function_list li{display:flex;justify-content: space-between;padding-top:6px;}
.desciption_function_list .desciption{flex-grow: 1;flex-shrink: 1;color:var(--remark);line-height:24px;}
.desciption_function_list .href{flex-grow: 0;flex-shrink: 0;display:flex;cursor:pointer;}
.desciption_function_list .href:hover{color:var(--red);}
.desciption_function_list .href .label{line-height:24px;}
.desciption_function_list .href .label .icon{line-height:0}
.desciption_function_list .href .label .icon .material-icons-round{line-height:24px;}

.chart{border-top:1px SOLID var(--color-washy);border-bottom:1px SOLID var(--color-washy);}
.chart li{
	display:grid;
	grid-template-columns: 100px auto;
	border-top:1px SOLID var(--color-hazy);
	padding-top:12px;
	padding-bottom:12px;
}

.chart .label{
	font-weight:600;color:var(--color-bold);border-right:1px SOLID var(--color-hazy);padding-left:12px;
}

.chart .cont{
	padding-left:12px;
}
