@charset "utf-8";

/* reset */
html,
body {
	font-size: 12px;
}

body {
	font-family: "맑은고딕", Malgun Gothic, 'Apple SD Gothic Neo', '돋움', Dotum, '굴림', Gulim, Helvetica, sans-serif;
	font-weight: 400;
	color: #111;
	letter-spacing: -0.5px;
	line-height: 1.4;
	-webkit-text-size-adjust: none;
	overflow-y: hidden;
}

body.popup {
	overflow-y: auto;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	word-break: keep-all;
	word-wrap: break-word;
	white-space: normal;
	/*font-family:inherit;*/
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
	display: block;
}

ol,
ul,
li {
	list-style: none
}

.ck-content ol,
.ck-content ul,
.ck-content li {
	list-style: unset;
	margin-left: 20px;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	max-width: 100%;
	border: 0;
	vertical-align: top;
}

i,
em,
address {
	font-style: normal;
}

.ck-content i {
	font-style: italic;
}

strong,
b {
	font-weight: 700;
}

sup {
	font-size: 10px;
	line-height: 1;
}

form,
fieldset {
	display: block;
	border: 0;
}

iframe {
	border: 0;
}

caption,
legend {
	overflow: hidden;
	position: absolute;
	top: -9999px;
	left: -9999px;
	width: 0;
	height: 0;
	font-size: 0;
	line-height: 0;
}

input,
textarea {
	opacity: 1;
	-webkit-text-fill-color: inherit;
}

input,
textarea,
select {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	color: #111;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}

textarea,
select {
	outline: none;
}

select::-ms-expand {
	display: none;
}

select:disabled {
	pointer-events: none;
}

button {
	overflow: visible;
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	color: var(--point);
	line-height: inherit;
	vertical-align: top;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

button span,
button:after {
	position: relative;
}

button[disabled],
a.disabled {
	cursor: default;
	pointer-events: none;
}

/* link */
a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	word-break: break-all;
	cursor: pointer;
}

a:link,
a:visited,
a:active,
a:focus {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

.underline {
	text-decoration: underline;
}

.ellipsis {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blind {
	overflow: hidden;
	position: absolute;
	left: -9999em;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	text-indent: -9999em;
}

/* float */
.fl {
	float: left;
}

.fr {
	float: right;
}

.fn {
	float: none;
}

.clear {
	clear: both;
}

/* text align */
.tal {
	text-align: left !important;
}

.tar {
	text-align: right !important;
}

.tac {
	text-align: center !important;
}

/* common */
:root {
	/* --vh:100vh; */
	--point: #267DFF;
}


/************************* Form *************************/
input[type="file"],
input[type="text"],
input[type="password"],
input[type="search"],
input[type="tel"] {
	padding: 0 12px;
	width: 100%;
	height: 32px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid #DCE0E5;
	border-radius: 4px;
	background-color: #fff;
	color: #111;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
}

input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="tel"]:disabled,
input[type="search"]:disabled {
	background-color: #E7EBEE;
	opacity: 1;
	color: #7F8A94;
	cursor: default;
	-webkit-tap-highlight-color: transparent;
	border-color: #DCE0E5
}

input[readonly] {
	background-color: #E7EBEE;
	opacity: 1;
	color: #525960;
	cursor: default;
	-webkit-tap-highlight-color: transparent;
	border-color: #DCE0E5
}


input[type="text"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus {
	border-color: var(--point);
}

input[type="file"]::-webkit-file-upload-button {
	cursor: pointer;
}

input[readonly]:focus {
	border-color: #DCE0E5;
}

input[disabled],
input[disabled]+label {
	cursor: default;
	pointer-events: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="text"]::-ms-clear,
input[type="password"]::-ms-reveal,
input[type="tel"]::-ms-clear,
input[type="tel"]::-ms-reveal,
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
	display: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

::-webkit-input-placeholder {
	color: #7F8A94;
	font-size: 12px;
	font-weight: 500;
}

::-moz-placeholder {
	color: #7F8A94;
	font-size: 12px;
	font-weight: 500;
}

:-ms-input-placeholder {
	color: #7F8A94;
	font-size: 12px;
	font-weight: 500;
}

:-moz-placeholder {
	color: #7F8A94;
	font-size: 12px;
	font-weight: 500;
}

input[disabled]::placeholder {
	color: #7F8A94
}

input[readonly]::placeholder {
	color: #525960;
}

input[disabled]+button {
	cursor: default;
}

::before,
::after {
	box-sizing: border-box;
}

select {
	position: relative;
	display: inline-block;
	position: relative;
	height: 32px;
	padding: 0 36px 0 12px;
	vertical-align: middle;
	font-size: 12px;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid #DCE0E5;
	border-radius: 4px;
	background: #fff url('../../image/ico_select.png') right 8px center no-repeat;
}

select::-ms-expand {
	display: none;
	/* IE 10, 11 */
}

select:disabled {
	border-color: #DCE0E5;
	background-color: #E7EBEE;
	color: #7F8A94
		/* opacity:0.5; */
}

textarea {
	display: block;
	width: 100%;
	height: 100%;
	padding: 16px;
	background-color: #ffffff;
	color: #111;
	font-size: 12px;
	line-height: 20px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	resize: none;
	border: 1px solid #DCE0E5;
	border-radius: 4px;
}

textarea:focus {
	border-color: var(--point);
}

textarea:focus::-webkit-input-placeholder {
	color: transparent;
}

textarea:focus::-moz-placeholder {
	color: transparent;
}

textarea:focus:-ms-input-placeholder {
	color: transparent;
}

textarea:focus:-moz-placeholder {
	color: transparent;
}

button {
	overflow: visible;
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	color: #111;
	line-height: inherit;
	vertical-align: top;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

button span,
button:after {
	position: relative;
}

button[disabled],
a.disabled {
	cursor: default;
	pointer-events: none;
}

/*table*/
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: #fff;
}

.table table {
	table-layout: fixed;
	border-top: 1px solid #E7EBEE;
}

.table tbody tr {
	border-bottom: 1px solid #E7EBEE;
}

.table th,
.table td {
	height: 41px;
	padding: 4px 12px;
	color: #213A56;
	vertical-align: middle;
	word-break: break-word;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: -0.0702em;
}

.table th,
.table td {
	padding: 4px 12px;
	color: #213A56;
	vertical-align: middle;
	word-break: break-word;
	font-size: 12px;
	letter-spacing: -0.0702em;
}

.table th {
	background-color: #E9F2FF;
	color: #213A56;
	text-align: left;
}

/* .table 안에 그리드 테이블 reset */
.grid_cont th, .grid_cont td{
	height:auto;
	font-size: inherit;
  font-weight: inherit;
  padding:0;
}

.result_count {
	text-align: center !important;
	font-weight: bold !important;
	color: blue !important;
}

.tbl_right {
	text-align: right;
}

.bgtype {
	background-color: #F3F5F6;
}

.tbl_right strong {
	display: inline-block;
	margin-right: 4px
}

.tbl_right strong.primary {
	color: var(--point);
}

/*button*/
.btn {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 32px;
	padding: 0 12px;
	line-height: 12px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid transparent;
	text-align: center;
	border-radius: 4px;
}

/* h32 */
.btn.big {
	height: 40px;
	line-height: 16px;
	font-size: 14px;
	font-weight: 700;
	min-width: 120px;
	padding: 0 16px;
}

/*h40*/
.btn.small {
	height: 24px;
	padding: 0 8px
}

/*h24*/

/* button : bgcolor */
.bctype1 {
	background-color: var(--point);
	border-color: var(--point);
	color: #fff;
}

.bctype2 {
	background-color: #fff;
	border-color: var(--point);
	color: var(--point);
}

.bctype3 {
	background-color: #213A56;
	border-color: #213A56;
	color: #fff;
}

.bctype4 {
	background-color: #ffffff;
	border-color: #f60707;
	color: #f60707;
}

.bctype1:disabled,
.bctype1.disabled,
.bctype3:disabled,
.bctype3.disabled {
	background-color: #E7EBEE;
	border-color: #E7EBEE;
	color: #7f8a94;
}

.bctype2:disabled,
.bctype2.disabled {
	background-color: #F3F5F6;
	border-color: #F3F5F6;
	color: #7f8a94;
}

/*btn_ico*/
.btn_ico {
	display: inline-flex;
	width: 16px;
	height: 16px;
	background: url('') no-repeat center center / 16px auto;
}

.btn_ico.search {
	background-image: url('../../image/ico_search.svg');
	width: 36px;
	height: 32px;
}

.btn_ico.calendar {
	background-image: url('../../image/ico_calendar.svg');
	width: 24px;
	height: 24px;
}

.btn_ico.delete {
	background-image: url('../../image/ico_delete.svg');
	width: 24px;
	height: 24px;
}

.btn_ico.clear {
	background-image: url('../../image/ico_close_16.svg');
	width: 16px;
	height: 16px;
}

.btn_ico[class*="arrow_"] {
	background-image: url('../../image/ico_arrowright_16_default.svg');
	width: 24px;
	height: 24px;
}

.btn_ico.arrow_left {
	transform: rotate(180deg);
}

.inputbox {
	position: relative;
}

.inputbox .txt_fix {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

.inputbox input[disabled]+button,
.inputbox input[readonly]+button {
	cursor: default;
	display: none;
}

.inputbox.search input {
	padding-right: 36px;
}

.inputbox.search .btn_ico.search {
	position: absolute;
	right: 0;
	top: 0;
	background-position: center right 12px;
}

.inputbox .btn_ico.clear {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	cursor: text;
}

.inputbox.active .btn_ico.clear {
	opacity: 1;
	cursor: pointer;
}

.inputbox.search input {
	padding-right: 36px;
}

.inputbox.search .btn_ico.clear {
	right: 36px;
}

.input_date {
	display: flex;
	align-items: center;
}

.input_date .btn_ico {
	margin-left: 4px;
}

/*2024-07-03 input 삭제버튼 value 겹침 처리*/
.inputbox input {
	padding-inline-end: 30px;
}

/*checkbox*/
.checkbox {
	display: inline-block;
	position: relative;
	line-height: 1;
}

.checkbox input[type="checkbox"] {
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	border: 0 none;
	opacity: 0;
}

.checkbox label {
	display: inline-block;
	position: relative;
	padding-left: 24px;
	font-size: 12px;
	line-height: 16px;
	color: #111;
	vertical-align: top;
	word-break: break-all;
	cursor: pointer;
	background-color: #fff;
}

.checkbox label:before {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #DCE0E5;
	border-radius: 2px
}

.checkbox input[type="checkbox"]:checked+label:before {
	border-color: var(--point);
	background: var(--point) url('../../image/ico_checkbox.svg') no-repeat center;
}

.checkbox input[type="checkbox"]:checked:disabled+label::before {
	background: #e7eaef url('../../image/ico_checkbox_g.svg') no-repeat center
}

.checkbox label>span {
	display: inline-block;
	font-size: inherit;
	word-break: inherit;
}

.checkbox input[type="checkbox"]:disabled+label:before {
	border-color: #bdc5d3;
	background: #e7eaef;
}

.checkbox input[type="checkbox"].readonly+label:before {
	border-color: #bdc5d3;
	background: url('../../image/sp/common/ico-readonly.png') no-repeat 0 0 #e7eaef;
}

.checkbox input[type="checkbox"]:disabled+label,
.checkbox input[type="checkbox"].readonly+label {
	color: #727272;
}

.checkbox_list,
.radio_list {
	display: flex;
}

.checkbox+.checkbox,
.checkbox_list .checkbox+.checkbox {
	margin-left: 20px;
}



/*radio*/
.radio {
	display: inline-block;
	position: relative;
	line-height: 1;
}

.radio input[type="radio"] {
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	border: 0 none;
	opacity: 0;
}

.radio label {
	display: inline-block;
	position: relative;
	padding-left: 24px;
	font-size: 12px;
	line-height: 16px;
	color: #111;
	vertical-align: top;
	word-break: break-all;
	cursor: pointer;
}

.radio label:before {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #DCE0E5;
	background-color: #fff;
	border-radius: 50%;
}

.radio input[type="radio"]:checked+label:before {
	border-color: var(--point);
	background-color: var(--point);
}

.radio input[type="radio"]:checked+label:after,
.radio input[type="radio"].readonly+label:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
}

.radio label>span {
	display: inline-block;
	font-size: inherit;
	word-break: inherit;
}

.radio input[type="radio"]:checked:disabled+label:after {
	background: #bdc5d3
}

.radio input[type="radio"].readonly+label:before {
	border-color: #bdc5d3;
	background: #e7eaef;
}

.radio input[type="radio"].readonly+label:after {
	background: #8992a0;
}

.radio input[type="radio"].readonly+label,
.radio input[type="radio"]:disabled+label {
	color: #727272;
}

.radio input[type="radio"]:disabled+label:before {
	border-color: #bdc5d3;
	background: #e7eaef;
}

.radio+.radio,
.radio_list .radio+.radio {
	margin-left: 20px;
}

/*date*/
.input_date .date {
	position: relative;
	display: inline-block;
	border-radius: 4px;
	background-color: #fff;
}

/* .input_date .date input{width:92px;} */
.input_date .dash {
	display: inline-block;
	padding: 0 4px;
	color: #213A56;
	font-size: 12px;
	font-weight: 600;
}

.inputbox+.inputbox {
	margin-top: 8px
}

input.datepicker[readonly] {
	border-color: #DCE0E5;
	color: #111;
}

input.datepicker[disabled] {
	border-color: #DCE0E5;
	background-color: #E7EBEE;
	color: #7F8A94;
}

input.datepicker[disabled]~.btn_ico.calendar {
	z-index: 1;
}

input.datepicker {
	background-color: transparent;
	cursor: pointer;
}

.input_date .tui-datepicker-input>input:disabled {
	background-color: #E7EBEE;
}

/*file*/
.file_thum .img {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 240px;
	background: url('../../image/logo_gray.svg') no-repeat center;
	border: 1px solid #E7EBEE;
}

.file_thum .img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: #fff;
}

.file {
	margin-top: 12px;
}

.file input[type=file] {
	line-height: 30px;
}

.file input[type=file]::file-selector-button {
	position: absolute;
	width: 0;
	height: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
}

.file .btn {
	cursor: pointer;
}

.msg_form {
	margin-top: 8px;
	color: #525960;
	font-size: 12px;
	font-weight: 400;
}

/*tooltip layer*/
.tooltip_layer {
	position: absolute;
	right: 0;
	margin-top: 8px;
	z-index: 1;
	width: max-content;
	border: 1px solid #DCE0E5;
	border-radius: 4px;
	background-color: #fff;
	opacity: 0;
	transition: all 0.5s ease;
}

.tooltip_layer .btns .btn {
	display: block;
	width: 100%;
	padding: 0 11px;
	font-size: 12px;
	text-align: left;
	line-height: 31px;
	border-radius: 0;
	border: none;
	letter-spacing: -1px;
}

.tooltip_layer .btns .btn+.btn {
	border-top: 1px solid #DCE0E5;
}

.tooltip_layer_wrap {
	position: relative;
	overflow: hidden;
}

.tooltip_layer_wrap.active {
	overflow: initial;
}

.tooltip_layer_wrap.active .tooltip_layer {
	opacity: 1;
}

/*tab*/
.tab .tab_menu {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
}

.tab .tab_menu li {
	display: flex;
	align-items: center;
	margin-right: 4px;
	border-radius: 12px 12px 0 0;
	background-color: #E7EBEE;
}

.tab .tab_menu li.active {
	background-color: #fff;
}

.tab .tab_menu li a {
	flex: 1;
	height: 36px;
	padding: 0 16px;
	color: #111;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	line-height: 36px;
}

.tab .tab_menu li .btn_ico.clear {
	flex-shrink: 0;
	margin-right: 10px;
}

.tab .tab_cont_item {
	display: none;
}

.tab .tab_cont_item.active {
	display: block;
}

.tab.type2 {
	position: relative;
}

.tab.type2 .tab_menu li a {
	color: #525960;
}

.tab.type2>.tab_menu>li.active {
	background-color: #F3F5F6;
}

.tab.type2>.tab_menu>li.active a {
	color: var(--point);
}

.tab.type2>.tab_cont {
	position: relative;
	padding: 12px;
	background-color: #F3F5F6;
}

.tab.type2 .area_wrap {
	gap: 28px;
}

.tab.type2 .area_wrap [class*="area_"] {
	padding: 12px;
	background-color: #fff;
}

.tab.type2 .area_wrap .area_left {
	position: relative;
}

.tab.type2 .area_wrap .area_left::after {
	content: '';
	position: absolute;
	right: -16px;
	top: 50%;
	transform: translateY(-50%);
	border-top: 8px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 16px solid var(--point);
}

.tab.type2 .area_wrap [class*="area_"] .box {
	height: 400px;
	overflow-y: scroll;
}

.tab.type2 .btn_area {
	position: absolute;
	top: 6px;
	right: 0
}

.tab.type3 {
	display: flex;
}

.tab.type3 .tab_menu {
	flex-direction: column;
	align-items: start;
	width: 120px;
}

.tab.type3 .tab_menu li {
	position: relative;
	width: 100%;
	border-radius: 0;
}

.tab.type3 .tab_menu li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 40px;
}

.tab.type3 .tab_menu li.active {
	background-color: #F3F5F6;
}

.tab.type3 .tab_menu li.active::before {
	background-color: var(--point);
}

.tab.type3 .tab_menu li a {
	height: 40px;
	color: #525960;
	line-height: 40px;
}

.tab.type3 .tab_menu li.active a {
	color: var(--point)
}

.tab.type3 .tab_cont {
	width: calc(100% - 120px);
	height: 400px;
	padding: 12px;
	background-color: #F3F5F6;
	overflow-y: scroll;
}

/* 탭메뉴 디자인 신규 추가 */
.tab.type4 > .tab_menu{
	display:flex;
	align-items:center;
	width: 100%;
	margin-bottom: -1px;
	position: relative;
	z-index: 1;
}
.tab.type4 > .tab_menu li{
	margin-right: -1px;
}
.tab.type4 > .tab_menu li.active {
	position: relative;
	z-index: 1;
}
.tab.type4 > .tab_menu li.active a{
	background-color:#fff;
	border-color: #C1C0CA;
	border-bottom-color: #fff;
	font-weight: 700;
	color: #2f2c4d;
}
.tab.type4 > .tab_menu li a{
	border: 1px solid #e5e5e5;
	background: #f7f7f7;
	color: #828094;
	display: block;
	height: 50px;
	padding: 16px 40px;
	font-size: 16px;
	font-weight:700;
	border-radius: 10px 10px 0 0;
	line-height: 1;
}
.tab.type4 > .tab_menu li .btn_ico.clear{
	flex-shrink: 0;
	margin-right: 10px;
}
.tab.type4 .tab_cont_item{display: none;}
.tab.type4 .tab_cont_item.active{display: block;}


.tab.type4{position:relative;}
.tab.type4 > .tab_menu > li.active{background-color:#F3F5F6;}
.tab.type4 > .tab_cont{
	position:relative;
	padding:12px;
	background-color:#fff;
	padding: 52px 45px;
	border: 1px solid #c1c0ca;
}
.tab.type4 .area_wrap {gap:28px;}
.tab.type4 .area_wrap [class*="area_"]{padding:12px;background-color:#fff;}
.tab.type4 .area_wrap .area_left{position:relative;}
.tab.type4 .area_wrap .area_left::after{content: '';position: absolute;right:-16px;top:50%;transform:translateY(-50%);border-top:8px solid transparent;border-right:0px solid transparent;border-bottom:8px solid transparent;border-left: 16px solid var(--point);}
.tab.type4 .area_wrap [class*="area_"] .box{height:400px;overflow-y:scroll;}
.tab.type4 .btn_area{position:absolute;top:6px;right:0}

.tab.type4 .tab_cont .tab .tab_menu {
	display: flex;
	gap: 8px;
}
.tab.type4 .tab_cont .tab_menu li {
	margin-right: 0;
	border-radius: 0;
	background: #fff;
}
.tab.type4 .tab_cont .tab_menu li a {
	display: block;
	line-height: 1;
	padding: 12px 20px;
	height: 38px;
	border-radius: 19px;
	background: #eaeaed;
	box-shadow: 0px 2px 6px 0px rgba(255,255,255,0.15);
	color: #828094;
}
.tab.type4 .tab_cont .tab_menu li.active a {
	background: #2f2c4d;
	color: #fff;
}

/***********************************************************************
Layout
***********************************************************************/
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: #DCE0E5;
	border-radius: 10px;
	border: 2px solid #fff;
}

.wrap {
	height: 100vh;
	min-width: 1600px;
	overflow-x: auto;
}

.wrap.scroll_x {
	height: calc(100vh - 12px);
}

/* header */
.header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 118px;
	min-width: 1600px;
	border-bottom: 1px solid #E7EBEE;
	z-index: 1;
	transition: height 0.5s ease;
	overflow: hidden;
}

.header_top {
	position: relative;
	display: flex;
	height: 64px;
	justify-content: space-between;
	align-items: center;
	padding: 0 32px 0 24px;
}

.header_top .logo {
	width: 137px;
	height: 27px;
	margin-right: 141px;
}

.header_item {
	display: flex;
	align-items: center;
}

.header_item .item {
	display: flex;
	align-items: center;
}

.header_item .item [class*="ico_"] {
	display: block;
	position: relative;
	width: 20px;
	height: 20px;
	margin-right: 4px;
	background: no-repeat 0 0 / contain;
}

.header_item .item .ico_noti {
	background-image: url("../../image/ico_noti.svg");
}

.header_item .item .ico_doc {
	background-image: url("../../image/ico_doc.svg");
}

.header_item .item .ico_voc {
	background-image: url("../../image/ico_voc.svg");
}

.header_item .item .ico_time {
	background-image: url("../../image/ico_time.svg");
}

.header_item .item .ico_user {
	background-image: url("../../image/ico_user.svg");
}

.header_item .item .txt {
	font-size: 14px;
	font-weight: bold;
}

.header_item .utils {
	display: flex;
	gap: 20px;
}

.header_item .utils .item .cnt {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 20px;
	height: 20px;
	margin-left: 5px;
	padding: 0 6px;
	border-radius: 10px;
	background-color: #E9F2FF;
	color: var(--point);
	font-size: 12px;
	font-weight: bold;
}

.header_item .sorting {
	display: flex;
	gap: 4px;
	margin-left: 20px;
}

.header_item .sorting select {
	width: 140px;
}

.header_item.time_area {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.header_item.time_area .item .txt {
	font-weight: normal;
}

.header_item.time_area .item .txt .time {
	font-weight: bold;
}

.header_item .btn.logout {
	padding-right: 0;
}

/* gnb */
.gnb_wrap {
	position: relative;
	background-color: #fff;
	border-top: 1px solid #E7EBEE;
}

.gnb_wrap .inputbox.search {
	position: absolute;
	top: 11px;
	left: 24px;
	width: 212px;
}

.gnb_wrap nav {
	height: 100%;
}

.gnb_wrap .menu_list {
	display: flex;
	justify-content: center;
	gap: 40px;
	height: 100%;
}

.gnb_wrap .menu_list>li>a {
	display: block;
	font-size: 16px;
	font-weight: bold;
	line-height: 53px;
	text-align: center;
}

.gnb_wrap .menu_list>li.on>a {
	color: var(--point);
}

.gnb_wrap .gnb_depth2 {
	padding: 5px 0 40px;
}

.gnb_wrap .gnb_depth2>li>a {
	display: block;
	font-size: 14px;
	color: #525960;
	text-align: center;
	line-height: 36px;
}

.gnb_wrap .btn_allmenu {
	position: absolute;
	top: 17px;
	right: 32px;
	width: 20px;
	height: 20px;
	background: url("../../image/ico_allmenu.svg") no-repeat center center / contain;
}

.gnb_wrap hr {
	position: absolute;
	top: 53px;
	left: 0;
	width: 100%;
	height: 1px;
	padding: 0;
	margin: 0;
	background-color: #E7EBEE;
	box-shadow: none;
	border: none;
}

.header.active .btn_allmenu {
	background-image: url("../../image/ico_close_20.svg");
}

/* container */
.container {
	position: relative;
	overflow-y: hidden;
	display: flex;
	height: calc(100vh - 118px);
	margin-top: 118px;
	background-color: #F3F5F6;
}

.container .contents {
	flex: 1;
	padding: 12px 20px 12px 0;
	width: calc(100% - 312px);
}

.container .contents iframe {
	overflow-y: auto;
	width: 100%;
	height: 100%;
}

.wrap.scroll_x .container {
	height: calc(100vh - 130px);
}

/* aside */
.aside_wrap {
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	width: 280px;
	transition: 0.4s;
	margin-left: -260px;
}

.aside_wrap iframe {
	height: 100%;
	width: 100%;
}

.aside {
	position: relative;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	width: 260px;
	height: 100vh;
	border-right: 1px solid #E7EBEE;
	background-color: #fff;
}

.aside .aside_cont {
	flex: 1;
	overflow-y: auto;
	margin-top: 24px;
	padding-bottom: 24px;
}

.aside .aside_cont h2 {
	padding: 0 24px;
	font-size: 12px;
	font-weight: bold;
	color: #525960;
	line-height: 32px;
}

.aside .btn_handler {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	width: 20px;
	height: 80px;
	background-color: var(--point);
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.aside .btn_handler::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	background: url("../../image/ico_arrowleft_16.svg") no-repeat center center / contain;
}

.aside.active .btn_handler::before {
	background-image: url("../../image/ico_arrowright_16.svg");
}

.has_side .aside_wrap {
	margin-left: 0
}

.has_side .aside_wrap {
	margin-left: 0
}

/* aside - lnb */
.aside .lnb_menu>li {
	position: relative;
}

.aside .lnb_menu>li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 36px;
	border-radius: 2px;
}

.aside .lnb_menu>li .btn_menu {
	position: relative;
	width: 100%;
	padding: 0 24px;
	font-size: 14px;
	line-height: 36px;
	text-align: left;
}

.aside .lnb_menu>li>.btn_menu {
	font-weight: bold;
}

.aside .lnb_menu .has_sub {
	overflow: hidden;
	transition: 0.4s;
	background-color: #fff;
}

.aside .lnb_menu .has_sub>.btn_menu::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%) rotate(180deg);
	width: 16px;
	height: 16px;
	background: url("../../image/ico_arrowdown_16.svg") no-repeat center center / contain;
	transition: 0.4s ease;
}

.aside .lnb_menu .lnb_depth3 {
	opacity: 0;
	transition: 0.4s;
	transition-delay: 0.1s;
}

.aside .lnb_menu .lnb_depth3>li .btn_menu {
	padding-left: 40px;
	color: #213A56;
}

.aside .lnb_menu .lnb_depth3>li .btn_menu::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 24px;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	margin-top: -5px;
	background: url("../../image/ico_depth2.svg") no-repeat 0 0 / contain;
}

.aside .lnb_menu .lnb_depth3>li.on {
	background-color: #E9F2FF;
}

.aside .lnb_menu>li.on::before {
	background-color: var(--point);
}

.aside .lnb_menu>li.on>.btn_menu {
	color: var(--point);
}

.aside .lnb_menu>li.on.has_sub>.btn_menu::after {
	background-image: url("../../image/ico_arrowdown_16_active.svg");
}

.aside .lnb_menu>li.open.has_sub>.btn_menu::after {
	transform: translateY(-50%);
}

.aside .lnb_menu .has_sub.open {
	overflow: initial;
}

.aside .lnb_menu .has_sub.open .lnb_depth3 {
	opacity: 1;
}

/* .aside .lnb_menu .tooltip_layer_wrap .tooltip_layer {top: 50%;right: 12px;margin-top: 0;} */
.aside .lnb_menu_wrap {
	position: relative;
	/*overflow: hidden;*/
}

.aside .lnb_menu_wrap .tooltip_layer {
	top: 50%;
	right: 12px;
	margin-top: 0;
}

.aside .lnb_menu_wrap>.tooltip_layer {
	display: none;
}

/* aside - bookmark */
.aside .bookmark {
	overflow: hidden;
	height: 48px;
	margin-top: auto;
	padding: 8px 0;
	border-top: 1px solid #E7EBEE;
	transition: all 0.5s ease;
}

.aside .bookmark .tit {
	line-height: 32px;
}

.aside .bookmark .btn_bookmark {
	position: relative;
	width: 100%;
	padding: 0 24px;
	font-size: 12px;
	color: #525960;
	font-weight: bold;
	line-height: 32px;
	text-align: left;
}

.aside .bookmark .btn_bookmark::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: url("../../image/ico_arrowdown_16.svg") no-repeat center center / contain;
}

.aside .bookmark_list_wrap {
	overflow: hidden;
	position: relative;
	opacity: 0;
	transition: all 0.5s ease;
	overflow-y: auto;
	max-height: 230px;
	padding-bottom: 10px;
}

.aside .bookmark_list::-webkit-scrollbar {
	width: 10px;
	height: 8px;
}

.aside .bookmark_list::-webkit-scrollbar-track {
	background-color: transparent;
}

.aside .bookmark_list::-webkit-scrollbar-thumb {
	background-color: #DCE0E5;
	border-radius: 5px;
	border: 2px solid #fff;
}

.aside .bookmark_list>li {
	display: flex;
	padding: 0 24px;
}

.aside .bookmark_list>li>a {
	position: relative;
	display: block;
	width: 100%;
	padding: 9px 0px 9px 22px;
	line-height: 18px;
	font-size: 14px;
	font-weight: bold;
}

.aside .bookmark_list>li>a::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	width: 16px;
	height: 16px;
	background: url("../../image/ico_star_16.svg") no-repeat center center / contain;
}

.aside .bookmark_list>li>.btn_ico.clear {
	width: 20px;
	height: 36px;
	background-position: right center;
	background-image: url('../../image/ico_close_g_16.svg');
	flex-shrink: 0;
}

.aside .bookmark.active {
	padding: 16px 0 0;
}

.aside .bookmark.active .btn_bookmark::after {
	transform: translateY(-50%) rotate(180deg);
}

.aside .bookmark.active .bookmark_list_wrap {
	opacity: 1;
}

.aside .bookmark.shadow::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - 10px);
	height: 20px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.tui-tree-wrap {
	overflow-y: auto;
	max-height: 700px;
}

#contArea {
	height: calc(100% - 36px);
	overflow-y: hidden;
}

.ifrm_set {
	height: 100%
}

.ifrm_set>div {
	height: 100%;
}

.embeded-frame {
	height: 100%;
}

.marT_10 {
	margin-top: 10px;
}

.header .user-info-wrap {
	display: flex;
    align-items: center;
}
.header .tooltip_layer_wrap.active .tooltip_layer {
	border: none;
}
.header .header_item:last-child {
	align-self: flex-start;
    padding-top: 8px;
}
.header .tooltip_btn {
	margin-right: 8px;
}
.header .header_item .btn.logout {
	height: 32px;
    padding-left: 5px;
}
.header .btn.small {
	height: 21px;
    padding: 0 4px;
}
.header .tooltip_layer {
	margin-top: 0;
}