@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/***************************************************************************************
   Setting
***************************************************************************************/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; 

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

body, button, input, select, table, textarea, h1, h2, h3, h4 {
	font-family:'Pretendard Variable', "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
}

html, body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-overflow-scrolling: touch;
	background-color: #ededed;
	min-width: 1590px;
}
ul, ol {
	list-style: none;
}
img, button, fieldset {
	border: 0 none;
}
table {
	width:100%;
	border-collapse: collapse;
	border-spacing: 0;
}
em, address, i {
	font-style: normal;
}
a, u {
	text-decoration: none;
}
fieldset, legend {
	border: 0;
}
legend {
	height: 0;
	visibility: hidden; 
}
button {
	background: none;
}
button * {
	position: relative;
}
button::-moz-focus-inner {
	padding: 0;
	border: 0;
}
input::-ms-clear,
input[type=password]::-ms-reveal {
	display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input {
	box-sizing: border-box;
}
textarea {
	resize: none;
}
a, button, input, select, textarea, [contenteditable] {
	outline: 0;
}
button, select, input[type=checkbox], input[type=radio] {
	cursor: pointer;
}
button:disabled, input:disabled {
	cursor: default;
}
a {color:#000;}

.layout-header {
    height:50px;
    display:flex;
    align-items: center;
    background-color:#333;
}
.layout-header.type-header {background-color: #464646;}
.layout-header .btn-file {position:relative; width:50px; height:100%; position:relative; background-color:#333333;}
.layout-header .btn-file:before {width:27px; height:20px; background:url(../images/icon-file.png) no-repeat; display:inline-block; position:absolute; top:50%; left:50%; margin:-10px 0 0 -14px; content:'';}
.layout-header .btn-back {position:relative; width:50px; height:100%; position:relative; background-color:#464646;}
.layout-header .btn-back:before {display:inline-block; position:absolute; top:50%; left:50%; margin:-11px 0 0 -7px; width:13px; height:22px; background:url(../images/icon-back.png) no-repeat; content:'';}
.layout-header .txt-title {padding-left:30px; font-size:20px; color:#fff;}
.layout-header .header-right {margin-left:auto;}
.layout-header .btn-close {display:inline-block;  width:50px; height:50px; position:relative; background-color:#666565; }
.layout-header .btn-close:before {display:inline-block; position:absolute; top:50%; left:50%; margin:-11px 0 0 -11px; width:21px; height:22px; background:url(../images/icon-close.png) no-repeat; content:'';}

.layout-header .link-logo {display:inline-block; margin-left:15px;}

.top-data {height: 40px; padding:0 40px; filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.2));background-color: #1966ae; margin:0 -15px; display:flex; align-items: center;}
.top-data.type-green {background-color:#2fbd3d;}
.top-data .txt-data {font-size:12px; font-weight:500; color:#fff; display:inline-block;}
.top-data .txt-data + .txt-data {margin-left:16px; padding-left:16px; border-left:1px solid #fff;}
.top-menu {margin-left:55px; display:flex; gap:20px;}
.top-menu li a {display:block; padding:0 14px;font-size: 14px; line-height:29px; color: #fff; border-radius: 15px; font-weight: 500;}
.top-menu li.on a {background-color:#fff; color:#000;}
.ui-navi {display:flex; align-items: center; padding:0 40px; background-color:#fff;}
.ui-navi .navi-right {margin-left:auto; display:flex; align-items: center; gap:10px;}
.ui-navi .navi-right .btn-solid {line-height:32px; height:34px; font-size: 13px; font-weight: 500;min-width: 114px;}
.ui-navi .list-navi {height:70px; display:flex; align-items: center;}
.ui-navi .list-navi li a {display:inline-block; width: 134px;height: 34px;border-radius: 5px; background-color: #e8e8e8; border: 1px solid #cacaca; text-align:center;font-size: 15px; color: #999999; line-height:32px;}

.ui-navi .list-navi li{position:relative;}
.ui-navi .list-navi li + li {padding-left:14px;margin-left:14px;}
.ui-navi .list-navi li + li:before {display:inline-block; position:absolute; top:50%; left:0; margin-top:-5px; width:6px; height:10px; background:url(../images/arrow-navi.png) no-repeat; background-size:100% 100%; content:'';}
.ui-navi .list-navi li.on a {background-color: #ddefff; border: 1px solid #353535;font-size: 15px; color: #333333; font-weight: bold;}
.layout-container {padding:0 15px;}
.top-option {display:flex; gap: 30px; padding:40px 0;}
.top-option .option-in {display:flex; flex-direction: column;}
.top-option .option-in .form-flex + .form-flex {margin-top:10px;}
.top-option.type-flex {Display:flex;}
.top-buttons {height:90px; display:flex; align-items: center; gap:6px;}
.top-option.type-flex .wrap-setting {flex:auto; width:100%;}
.top-buttons .buttons-right {margin-left:auto; display:flex; align-items: center; gap:40px;}
.top-option.type-flex  .buttons-right2 {margin-left:auto; display:flex; gap:5px; flex:none;}
.table-setting2 tr th {color:#333; font-size:14px; text-align:left; font-weight:normal; padding:6px 0;}
.table-setting2 tr:first-of-type th {padding-top:0;}
.table-setting2 tr td {padding:6px 0;}
.table-setting2 tr:first-of-type td {padding-top:0;} 
.table-setting2 tr td .form-flex {display:flex; gap:5px;}
.table-setting2 tr td .form-load .component-input {width:200px;}
.table-setting2 tr td .component-input.number {width:70px;}
.top-buttons .form-option {display:flex;}
.top-buttons .form-buttons {display:flex; gap:6px;}
.form-flex {display:flex; align-items: center; gap:5px;}
.form-flex .txt-form {margin-left:10px;}
.form-flex .txt-unit {flex:none;}
.form-flex.flex-between {justify-content: space-between;}
.btn-solid {display:inline-flex; align-items: center; justify-content: center; padding:0 7px; line-height: 28px;  border-radius: 5px; font-size: 12px; color: #ffffff; font-weight: bold; background-color:#333; border:1px solid #333; text-align:center;}
.btn-solid.type-red {background-color:rgb(176, 49, 49);; border-color:rgb(176, 49, 49);}
.btn-solid .icon-search {display:inline-block; margin-left:5px; width:12px; height:13px; background:url(../images/icon-search-w.png) no-repeat;}
.btn-solid.type-gray {background-color:#999; border:1px solid #999;}
.btn-solid.type-gray2 {background-color:#677b8d; border:1px solid #677b8d;}
.btn-solid.type-s {min-width:100px; padding:0 20px;}
.btn-solid.type-gray-light {background-color:#cacaca; border:1px solid #cacaca; color:#000;}
.btn-solid.type-m {height:40px; line-height:38px; font-size:14px; padding:0 18px; font-weight:500;}
.btn-solid.type-m2 {height:40px; min-width:100px; line-height:38px; font-size:14px; padding:0 18px; font-weight:500;}
.btn-solid.type-blue {background-color:#1966ae; border:1px solid #1966ae;}
.btn-solid.type-search {width:80px;}
.component-input {display:block; width: 150px; height: 30px; border-radius: 5px; background-color: #fff; border: 1px solid #cacaca; padding:0 10px; font-size:14px;}
.component-input.bg-input {background-color:#ededed; border-color:#ededed;}
.component-input.txt-center {text-align:center;}
.component-input-m {display:block;height: 50px;border-radius: 5px;background-color: #ededed;width:100%; border:none; padding:0 10px; font-size:16px;}

.component-input:disabled {background-color:#ededed; border-color:#ededed}
.component-input.type-s {width:110px;}
.component-input.type-full {width:100%;}
.component-select {width: 120px; height: 30px; appearance: none;  border-radius: 5px; padding:0 10px;   background-color: #ffffff;border: 1px solid #cacaca; background:url(../images/arrow-select.png) no-repeat right 10px top 11px #fff;}
.component-select.type-full {width:100%;}

.component-select-r {width: 80px; height: 30px; appearance: none;  border-radius: 15px; padding:0 10px;   background-color: #ffffff;border: 1px solid #cacaca; background:url(../images/arrow-select.png) no-repeat right 10px top 11px #cacaca;}

.ui-contents,
.box-contents {background-color:#fff; padding:40px 25px;}
.box-contents.type-enter {margin:40px 0 0 0;}
.box-contents.type-enter .wrap-enter {width:772px;}
.box-contents.flex-center {display:flex; flex-direction: column; justify-content: center; align-items: center;}
.box-contents .box-data {display:flex; margin-bottom:30px;}
.box-contents .box-data .form-data {display:flex; align-items: center;}
.box-contents .box-data .form-data + .form-data {margin-left:40px; padding-left:40px; position:relative;}
.box-contents .box-data .form-data + .form-data:before {height:18px; border-left:2px solid #333; content:'';display:inline-block; position:absolute; top:50%; left:0; margin-top:-9px;}
.box-contents .box-data .txt-label {display:inline-block; padding-right:20px; font-size:20px; color:#333333;}
.box-contents .box-data .data-num {display:flex; align-items: center;}
.box-contents .box-data .data-num strong {color:#333333; font-weight:bold; font-size:24px;}
.box-contents .box-data .data-num .txt-unit {color:#333; font-size:14px; display:inline-block; margin-left:10px;}
.box-contents .table-label {font-size:18px; color:#000; font-weight:bold; padding-bottom:20px;}
.box-contents .wrap-table + .data-summary {margin-top:40px;}
.box-contents .data-summary {padding-bottom:12px;}
.box-contents .data-summary .summary-in {display:inline-block; background-color:#999999; color:#fff; font-size:16px; padding:5px 10px;}
.tabs-contents .box-contents + .box-contents {margin-top:0;}
.box-contents + .box-contents {margin-top:27px;}
.box-contents .contents-form {display:flex; flex-wrap: wrap;}
.box-contents .contents-form + .contents-form {margin-top:60px;}
.box-contents .form-table.type-full {width:100%; padding-right:0; padding-left:0;}
.box-contents .form-table {width:50%; padding-right:35px;}
.box-contents .form-table:nth-child(2n) {padding-left:35px; padding-right:0;}
.form-table .form-label {display:flex; height:50px; gap:40px; padding-bottom:20px; align-items: center; font-size: 18px;color: #000000;font-weight: bold;}
.form-table .form-label.label-buttons {gap:10px}
.form-table .form-label .label-right {margin-left:auto; display:flex; gap:40px;}
.table-enter tr th {padding:10px 0; font-size: 16px;color: #333333;font-weight: 500; text-align: left;}
.table-enter tr td {padding:10px 0;}
.table-enter tr td input {width:522px;}
.table-enter tr td .txt-checkbox, 
.table-enter tr td .txt-radio {line-height:35px;}

.table-option {display:flex; padding-bottom:20px;gap:6px;}
.table-option .right-option {margin-left:auto; display:flex; gap:6px;}
.component-checkbox {display:inline-flex; align-items: center;}
.component-checkbox i{display:inline-block; width: 18px;  height: 18px;background-color: #ffffff;border: 1px solid #333333; font-size:0; vertical-align: top;}
.component-checkbox input {display:none;}
.component-checkbox input:checked + i {position:relative; background-color:#333;}
.component-checkbox input:checked + i:before {position:absolute; top:50%; left:50%; margin:-5px 0 0 -7px; display:inline-block; width:13px; height:10px; background:url(../images/icon-checkbox.png) no-repeat center center; content:'';}
.component-checkbox .txt-checkbox {display:inline-block;  margin-left:5px; font-size: 14px;color: #333333;font-weight: 500;}
.checkbox-inline,
.radio-inline {display:flex; align-items: center; flex-wrap:wrap;}
.radio-inline .component-radio + .component-radio {margin-left:50px;}
.checkbox-inline .component-checkbox + .component-checkbox {margin-left:50px;}
.component-radio {display:inline-flex; align-items: center;}
.component-radio i{ width: 18px;height: 18px;border-radius: 100%;background-color: #ffffff;border: 1px solid #333333; position:relative;}
.component-radio i:before {display:inline-block; position:absolute; top:50%; left:50%; margin:-4px 0 0 -4px; width:8px; height:8px; background-color:#333; border-radius:100%; content:'';}
.component-radio input {display:none;}
.component-radio input:checked + i {position:relative; background-color:#333;}
.component-radio input:checked + i:before {background-color:#fff;}
.component-radio .txt-radio {display:inline-block;  margin-left:5px; font-size: 14px;color: #333333;font-weight: 500;}


.component-create {}
.component-create i {display:inline-block; width:18px; height:18px; background:url(../images/icon-create.png ) no-repeat; }
.component-create input:checked + i {background:url(../images/icon-create-on.png) no-repeat;}
.component-create input {display:none;}

.component-star {}
.component-star i {display:inline-block; width:19px; height:18px; background:url(../images/icon-star.png ) no-repeat; }
.component-star input:checked + i {background:url(../images/icon-star-on.png) no-repeat;}
.component-star input {display:none;}



.table-setting {padding-bottom:20px;display:flex; gap:5px;}
.table-setting .component-select {width:110px;}
.component-table tr th {height: 35px; padding:5px ; background-color: #f6f6f6;font-size: 14px; color: #000000; font-weight: 500;border:1px solid #e8e8e8;}
.component-table tr th.link-sort {cursor:pointer; }
.component-table tr th.link-sort:after {display:inline-block; margin-left:5px; width:10px; height:8px; background:url(../images/arrow-sort.png) no-repeat; content:'';}
.component-table tr th.link-sort.type-asc:after {transform:rotate(180deg);}
.component-table tr td .txt-red,
.component-table tr th.txt-red {color:#e00b0b;}
.component-table tr th .essential {color:#e00b0b;}
.component-table.txt-left tr th.th-top {vertical-align: top; padding-top:20px;}
.component-table tr td a.txt-underline {text-decoration: underline;}

.component-table tr.bg-tr td {background-color: #f4faff;}

.component-table tr td.bg-disabled {background-color:#e1e6eb}
.component-table tr td.txt-blue {color:blue;}
.component-table tr td.txt-red {color:red;}
.component-table tr th.bg-none {background:none;}
.component-table tr td.bg-td {background-color:#f4faff;}
.component-table tr th.bg-th {background-color:#3574a8; color:#fff;}
.component-table.txt-left tr th {text-align:left; padding:0 27px;}
.component-table.txt-left tr td {text-align:left; padding:0 24px;}
.component-table tr td {text-align:center;font-size: 14px;  color: #000000;height:54px; padding:15px 10px; border:1px solid #e8e8e8;}
.component-table tr td .link-view {text-decoration: underline;font-size: 14px;  color: #000000; display:inline-flex; align-items: center;}
.component-table tr td .link-view:after {display:inline-block; width:14px; height:14px; content:''; margin-left:5px; background:url(../images/arrow-view.png) no-repeat ;}
.component-table tr td .txt-ellipsis {display:inline-block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.component-table tr td .btn-info {display:inline-block; width:18px; height:18px; background:url(../images/icon-info.png) no-repeat; vertical-align: middle;}
.component-table tr td .data-complete {font-size: 14px;  color: #1966ae;font-weight: bold;}
.component-table tr td .data-ing {font-size:14px; font-size: 14px;  color: #aaaaaa; font-weight: 500;}
.btn-solid-s,
.btn-line-s {display:inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #333333;
font-weight: 500;min-width: 60px; text-align:center; padding:0 8px; line-height:21px; border-radius: 5px; background-color: #ffffff; border: 1px solid #333333;}
.btn-solid-s {background-color:#333; color:#fff;}
.btn-line-s.type-search:after {display:inline-block; width:12px; height:13px; background:url(../images/icon-search.png) no-repeat;  content:''; margin-left:5px;}
.btn-line-s.type-editer:after {display:inline-block; width:13px; height:12px; background:url(../images/icon-editer.png) no-repeat;content:''; margin-left:5px;}
.btn-line-s.type-del:after {display:inline-block; width:17px; height:16px; background:url(../images/icon-del-r-b.png) no-repeat;content:''; margin-left:5px;}

.component-paging {padding:28px 0 0 0; display:flex; align-items: center; justify-content: center;}
.component-paging a {display:inline-block; padding:12px; font-size: 16px; color: #999999;}
.component-paging a.on { color: #353535; font-weight: bold;}
.component-paging a.btn-next {transform:rotate(180deg)}
.component-paging a.btn-next:before,
.component-paging a.btn-prev:before {display:inline-block; width:8px; height:12px; background:url(../images/arrow-page.png )no-repeat; font-size:0; content:'';}
.badge-txt {display:inline-block;
	height: 20px; line-height:20px; padding:0 10px;
	border-radius: 5px;
	background-color: #333333; font-size:13px; font-weight:500; color:#fff; }
.icon-load-w {display:inline-block; width:15px; height:15px; background:url(../images/icon-load-w.png) no-repeat;content:''; margin-left:5px;}
.icon-down-w {display:inline-block; width:14px; height:14px; background:url(../images/icon-down-w.png) no-repeat;content:''; margin-left:5px;}
.icon-select-w {display:inline-block; width:16px; height:16px; background:url(../images/icon-select-w.png) no-repeat;content:''; margin-left:5px;}
.icon-down-w.type-upload {background:url(../images/icon-upload-w.png) no-repeat;}
.icon-delete {display:inline-block; width:14px; height:14px; background:url(../images/icon-del.png) no-repeat;content:''; margin-right:5px;}
.icon-file-up {display:inline-block; width:13px; height:18px; background:url(../images/icon-file-up.png) no-repeat;content:''; margin-left:5px;}
.form-number {display:flex; align-items: center;}
.form-number .btn-plus,
.form-number .btn-minus {position:relative; width:30px; height:30px; background-color:#999; position:relative; }
.form-number .btn-plus:before,
.form-number .btn-minus:before {display:inline-block; position:absolute; top:50%; left:50%; margin-left:-6px; width:12px; height:2px; background-color:#fff; content:'';}
.form-number .btn-plus:after {display:inline-block; position:absolute; top:50%; left:50%; margin:-5px 0 0 -1px; width:2px; height:12px; background-color:#fff; content:'';}
.form-number .txt-number {display:inline-block; padding:0 12px; height:30px; border:1px solid #999;font-size: 17px; line-height:28px;color: #333333;}
.table-buttons {display:flex; gap:10px; padding:20px 0 0 0;} 
.wrap-board {width:730px;} 
.wrap-board .form-upload {margin-top:40px;}
.form-upload .top-upload {display:flex; align-items: center;}
.form-upload .top-upload .right-upload {margin-left:auto;}
.form-upload .top-upload .link-del {display:inline-flex; align-items: center;  color:#999; font-size:12px; text-decoration: underline;}
.form-upload .top-upload .data-num {margin-right:10px; font-size: 12px;color: #333333;
font-weight: 500;}
.form-upload .top-upload .link-del:after {display:inline-block; width:17px; height:16px; background:url(../images/icon-del-r.png) no-repeat; content:''; margin-left:4px;}
.btn-del-r {display:inline-block; width:17px; height:16px; background:url(../images/icon-del-r-b.png) no-repeat; content:''; margin-left:4px;}
.form-upload .data-file {display:inline-flex; align-items: center; position:relative;font-size: 14px;color: #333333; flex-wrap:wrap}
.form-upload .box-file {height: 184px; margin-top:10px; border-radius: 5px;background-color: #ffffff;border: 1px solid #e8e8e8; position:relative; padding:15px 20px;}
.form-upload .box-file .list-file +.list-file{margin-top:5px;}
.form-upload .box-file .txt-drag {position:absolute; top:0; right:0; bottom:0; left:0; display:flex; flex-direction: column; align-items: center; justify-content: center;font-size: 12px;color: #b2b2b2;font-weight: 500;}
.form-upload .box-file .txt-drag:before {display:inline-block; width:70px; height:58px; background:url(../images/img-drag.png) no-repeat; content:''; margin-bottom:15px;}
.form-board {width:100%;}
.form-board + .form-board {margin-top:40px;}
.form-board .txt-board {display:flex; align-items: center; gap:15px; margin-bottom:15px; font-size: 16px;color: #333333;font-weight: 500;}
.form-board .top-upload {display:flex; align-items: center;}
.form-board .right-upload {margin-left:auto;}
.component-textarea {height: 250px;border-radius: 5px; padding: 10px; background-color: #ededed; width:100%; border:none; font-size:16px;}
.component-textarea2 {height: 250px;border-radius: 5px; padding: 10px; background-color: #ededed; width:100%; border:none; font-size:14px;}
.bottom-buttons {display:flex; width:100%; margin:30px 0 0 0; position:relative; align-items: center; justify-content: center; gap:10px;}
.link-txt {font-size: 14px;color: #333333;font-weight: bold; text-decoration: underline; position:absolute; top:50%; margin-top:-10px; line-height:20px; right:0;}

.layout-popup {display:flex; position:fixed; top:0; left:0; right:0; bottom:0; align-items: center; justify-content: center; flex-wrap:wrap; background-color:rgba(0,0,0,0.7); overflow:auto; display:none;}
.layout-popup.type-m .box-popup {width:900px}
.box-popup {border-radius:13px; background-color:#fff;; width:500px; background-color:#fff; position:relative;}
.box-popup .popup-title {padding:20px; font-size:20px; font-weight:bold;}
.box-popup .btn-close{display:inline-block; position:absolute; top:20px;right:20px;  width:15px; height:15px; background:url(../images/icon-close-dark.png) no-repeat; content:''; background-size:100% 100%;}
.popup-contents {padding:10px 20px 30px 20px;}

.component-table tr td {height:35px; padding:5px 10px;}
.table-option-popup {display:flex; padding-bottom:20px;gap:6px;}
.table-option-popup + .table-option-popup {margin-top:-10px;}
.table-option-popup .right-option {margin-left:auto; display:flex; gap:6px;}
.box-popup .component-paging {padding:10px 0 0 0;}
.popup-buttons {display:flex; align-items: center; justify-content: center; padding:20px 0 0 0; gap:10px;}
.form-enter {display:flex; flex-direction: column;}
.form-enter .label-form {font-size:14px; font-weight:bold; display:block; padding-bottom:10px;}
.form-enter .form-input.type-flex  {display:flex; align-items: center; gap:9px;}
.form-message {font-size:12px; font-weight:500; padding-top:5px;}
.form-enter + .form-enter {margin-top:20px;}

.ui-board {margin-top:20px;}
.ui-board .form-flex + .form-flex{margin-top:20px;}

.top-tabs {padding:20px 0 0 0;}
.top-tabs ul {display:flex;}
.top-tabs ul li {}
.top-tabs ul li.on a {background-color:#000;}
.top-tabs ul li a {background-color:#999999; line-height:40px; display:inline-block; width:120px; text-align:center;font-size: 14px;color: #ffffff;font-weight: 500;}

/* setup.html 임시 css 입니다 */
/* modal */
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); }
.modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 30%; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }