@charset "UTF-8";

/* Feelnaet UX Team - style */

@import "layout.css";
@import "common.css";
@import "icofont.css";
@import "grid.css";

:root {
  --Point: #FF4844;
  --navy_sub: #7082A3;
  --navy_txt: #333F54;
  --gray_5: #E7E7E7;
  --hover_gray: #F9F9F9;
  --navy: #02176A;
  --gray_0: #333333;
  --white: #FFFFFF;
  --point: #AB4BFF;
  --th_green: #2D876D;
  --gray_2: #898989;
  --bg_blue: #F6FAFF;
}

a:hover {color: #0458F9;}

/* scrollbar - chrome, safari */
::-webkit-scrollbar {width: 8px; height: 8px; border:none; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: none;}
::-webkit-scrollbar-track {background: #f1f1f1; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 1px rgba(241,241,241,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(225,225,225,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}

/* link */
a.underline { color: #007bff; text-decoration: underline;}
a.underline:hover { color: #007bff; text-decoration: underline;}
a.underline:hover, a.underline:focus {outline:none; text-decoration: underline;}

a.hoverb { color: #444; text-decoration: none; }
a.hoverb:hover { color: #007bff; font-weight:700; text-decoration: underline;}

/* Data-table */
table.display thead th, table.display thead td {  padding:8px 18px; border-bottom:1px solid; border-top:1px solid;}
table.display, table.display th, table.display td { font-size:14px;}
.dataTables_length, .dataTables_filter { margin-bottom:3px; display:none;}
table.display tfoot th {  padding:8px 18px 8px 18px;}
/* .dataTables_info,  .dataTables_paginate { font-size:12px;}
.dataTables_paginate .paginate_button:hover {background: rgba(45,153,241,0.2); color: #2d99fb; } */

.display tbody tr:hover { cursor:pointer;}
table.display tbody tr.odd { background:#fff !important;}
table.display tbody tr:hover>.sorting_1, 
table.display tbody tr.even>.sorting_1, 
table.display tbody tr.odd>.sorting_1 { background:#fafafa !important; }
table.display tfoot td { border-top:none;border-top:1px solid #ddd;}

.dataTables_paginate .paginate_button.current { padding:.5rem .75rem; border:1px solid #ddd; background:#fff;}
.dataTables_paginate .paginate_button.current:hover, .dataTables_paginate .paginate_button:hover { background:rgba(45,153,241,0.2); color:#2d99fb !important; border:1px solid #ddd;}

table.display { border-bottom:1px solid #ddd;}

.no-sort thead th.sorting_asc, .no-sort thead th.sorting, .no-sort thead th.sorting_desc { background:none; cursor:pointer;} 
table.dataTable { table-layout: fixed;}
table.dataTable.no-footer { border-bottom:1px solid #ddd;}

table.display tbody tr.sum>.sorting_1 { background:#ffffe6 !important;}
table.display tbody tr.total>.sorting_1 { background:#fff1e6 !important;}


/* table */
.tbl-basic th, .tbl-basic td {border-top: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align:left; color: #222; font-size: 14px; padding: 9px 16px;white-space: initial; word-break: break-word;}
.tbl-basic th { background:#F4F8FF; font-weight:500;white-space: nowrap;}
.tbl-basic th.sub {background: #F6F6F6;}
.tbl-basic td { background:#fff;}
.tbl-basic td .checkbox label, .tbl-basic td .radio label {word-break: keep-all;flex-shrink: 0;}

.tbl-basic.strong tr {border-bottom: 1px solid #B2C0D9;}
.tbl-basic.strong tr:first-child {border-top: 1px solid #1B4896;}
.tbl-basic.strong tr:last-child {border-bottom: 1px solid #1B4896;}
.tbl-basic.strong th {background: #1B4896;color: #fff;border: none;}
.tbl-basic.strong th.sub {background: #205ABF;}
.tbl-basic.strong td { background:#F5F9FC;border: none;}


.tbl-basic-bdr, .tbl-bdr-view { line-height:1.8; padding:6px 10px; text-align:left;}
.tbl-basic-bdr th, .tbl-bdr-view th { text-align:right; padding:6px 10px;}
.box-green .tbl-basic-bdr th { color:#598179;}
.tbl-bdr-view th { font-weight:100;}
.tbl-bdr-view td { font-weight:700;}

th.tbl-2dep { text-align:center;}

.tbl-basic th.tbl-2dep, .box-blue > .tbl-basic-bdr th.tbl-2dep { background:#dbeaff;}
.tbl-green th.tbl-2dep, .box-green > .tbl-basic-bdr th.tbl-2dep { background:#c8e9e2;}
.tbl-gray th.tbl-2dep, .box-gray > .tbl-basic-bdr th.tbl-2dep{ background:#e1e0e0;}


/* table-accent */
table th.accent-gray, table td.accent-gray {background-color: rgba(231, 231, 231, 0.4);}
table th.accent-blue, table td.accent-blue {background-color: rgba(4, 88, 249, 0.08);}
table th.accent-orange, table td.accent-orange {background-color: rgba(255, 133, 21, 0.10);}

/* table style -- 라이선스할당 회사추가 모달 table*/

#modal-sep > div {
  /* width: calc((100% / 4) - 30px); */
  width:100%;
  height:420px;
  border-right:1px dotted #c5cad1;
  padding-right:20px;
  margin-right:20px;
}

#modal-sep div:last-child{ margin-right:0px; padding-right:0px; border-right:0px;}

.tbl-style2 th {
  font-size: 14px;
  padding: 0 0 5px 0px;
  background: none;
  display: block;
  border: none; color: #222; 
  text-align:left;
  white-space: normal;
}

.tbl-style2  td {
  font-size: 14px;
  padding: 0 0 10px 0px;
  display: block;
  /* border-bottom: 1px solid #E7E7E7; */
  margin-bottom: 10px;
}

/* search-tbl */
.search-tbl th {text-align: right;height: 35px;padding: 0 12px;font-size: 14px;font-weight: 500;line-height: 100%;}

/* table-row */
.table-row {margin-right: -20px;margin-left: -20px;}
.table-row [class*="col-"] {padding-right: 20px;padding-left: 20px;}

/* grid */
.grd-wrap {overflow: auto;}
.grd thead th {padding: 12px 10px;color: var(--navy_sub, #7082A3);font-size: 14px;font-weight: 700;border-top: 2px solid #8EA0C2;border-bottom: 1px solid #8EA0C2;background: #F4F8FF;}
.grd thead th.sub {background: #205ABF;}
.grd tbody td {padding: 9px 10px;color: var(--navy_txt, #333F54);font-size: 14px;font-weight: 500;border-bottom: 1px solid var(--gray_5, #E7E7E7); }
.grd tbody tr:hover { background: var(--hover_gray, #F9F9F9); }
tr.grd-2dep th { background:#d7f6ff; border-bottom:none !important;}
tr.grd-3dep th { background:#3c74aa; color:#fff; border-bottom:0px !important;}
tr.sum th, tr.sum td { background:#ffffe6; color:#de5490; font-weight:700;}
tr.total th, tr.total td { background:#fff1e6; color:#ef2a54; font-weight:700;}
.grd tbody tr.active {background: rgba(147,147,147,0.1);}
.grd tbody tr.selected {background: #e1f0ff;}


.sub-grd thead th {padding: 8px 20px;font-weight: 500;background: #F7F7F7;color: #222222;border-width: 2px 0px 1px 0px;border-style: solid;border-color: #222222;}
.sub-grd tbody td {padding: 7px 20px;font-weight: 400;border-bottom: 1px solid #E7E7E7;}
.sub-grd tbody tr:hover { background: rgba(4, 88, 249, 0.08); cursor:pointer; }


/* grid-line */
.grd-line thead th { border:1px solid #FFF;}
.grd-line thead th:first-child { border-left:1px solid #E7E7E7;}
.grd-line thead th:last-child { border-right:1px solid #E7E7E7;}
.grd-line tbody td { border-left:1px solid #E7E7E7;}
.grd-line tbody td:last-child { border-right:1px solid #E7E7E7;}

/* grid-color */
.grd-bgbasic thead th { background:#f1f6fc; color:#1082ea; border-color:#1082ea;} 
.grd-bgbasic tbody tr:hover, .grd-bgbasic tbody tr.odd:hover { background:rgba(241,246,252,0.7) !important;}

.grd-bgblue thead th { background:#f1f6fc; color: #1082ea; border-color:#1082ea;} 
.grd-bgblue-dark thead th { background-color:#2d99fb; color:#fff; border-color:#1082ea; }
.grd-bggreen thead th { background:#eef8f6; color: #00a126; border-color:#00a126;} 
.grd-bggreen-dark thead th { background-color:#00a126; color:#fff; border-color:#00a126; }
.grd-bgpurple thead th { background:#f7f6fe; color: #6a4ff6; border-color:#6a4ff6;} 
.grd-bgpurple-dark thead th { background-color:#6a4ff6; color:#fff; border-color:#6a4ff6; }
.grd-bgred thead th { background:#ffdfe6; color: #d92550; border-color:#fb607f;} 
.grd-bgred-dark thead th { background-color:#ef3e61; color:#fff; border-color:#ef3e61; }
.grd-bggray thead th { background:#f7f7f7; color: #444; border-color:#939393;} 
.grd-bggray-dark thead th { background-color:#506372; color:#fff; border-color:#3a4853; }

.grd-bgblue tbody tr:hover, .grd-bgblue-dark tbody tr:hover, .grd-bgblue tbody tr.odd:hover, .grd-bgblue-dark tbody tr.odd:hover { background:rgba(241,246,252,0.7) !important;}
.grd-bggreen tbody tr:hover, .grd-bggreen-dark tbody tr:hover, .grd-bggreen tbody tr.odd:hover, .grd-bggreen-dark tbody tr.odd:hover { background:rgba(238,248,246,0.7) !important;}
.grd-bgpurple tbody tr:hover, .grd-bgpurple-dark tbody tr:hover, .grd-bgpurple tbody tr.odd:hover, .grd-bgpurple-dark tbody tr.odd:hover { background:rgba(247,246,254,0.7) !important;}
.grd-bgred tbody tr:hover, .grd-bgred-dark tbody tr:hover, .grd-bgred tbody tr.odd:hover, .grd-bgred-dark tbody tr.odd:hover { background:rgba(254,227,216,0.7) !important;}
.grd-bggray tbody tr:hover, .grd-bggray-dark tbody tr:hover, .grd-bggray tbody tr.odd:hover, .grd-bggray-dark tbody tr.odd:hover { background:rgba(247,247,247,0.7) !important;}

.grd-bggray-dark tr.grd-2dep th{background-color: #6f818f; border-bottom: 1px solid !important; border-top: 1px solid #6f818f !important;}
.grd-bggray-dark tr.grd-1dep th{border-right: 1px solid #fff !important;}
.grd-bggray-dark tr.grd-1dep th:last-child{border-right: none !important;}

.grd-bggray tr.grd-2dep th{background-color: #e5e5e5; border-top: none !important; border-bottom: 1px solid #000 !important;}
.grd-bggray tr.grd-1dep th{border-right: 1px solid #000 !important;}
.grd-bggray tr.grd-1dep th:last-child{border-right: none !important;}

/* grid-border */
.grd-border tbody tr:hover {background:none !important;}
.grd-border tbody td { padding:8px 12px 8px 0px;}

/* grid tbody scroll */
.scrolltbody {border-bottom:1px solid #ddd;}
.scrolltbody table { display: flex; flex-flow: column; height: 100%; width: 100%;}
.scrolltbody thead {flex: 0 0 auto; width: calc(100% - 16px); }
.scrolltbody table tbody { flex: 1 1 auto; display: block; overflow-y: scroll;}
.scrolltbody table tbody tr { width: 100%;}
.scrolltbody table thead, .scrolltbody table tbody tr {display: table; table-layout: fixed;}

/* required */
.required { display: inline-block; width: 5px; height: 5px; background: #E24243; border-radius: 99px; margin-left: 6px;vertical-align: middle; }

/* form */
form { margin-top:0px;}
.fm-group { display:flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; margin-right:-15px; margin-left:-15px;}
.fm-horizontal .fm-group:before, .fm-horizontal .fm-group:after { content:" "; display:table;}
.fm-horizontal .control-label { margin-top:0; padding-bottom:.3rem; padding-top:.3rem; font-weight:500; display:inline; }
.fm-inblock {display: inline-block;}
.fm-inblock label {font-weight: 500;vertical-align: middle;margin: 0 3px;}

/* form-element */
.fm-def-wrap {display:inline-block;font-size: 14px;border-radius: 3px;position: relative;}
.fm-def-wrap input.fm-def {width: 200px;padding-right: 30px;}
.fm-def-wrap .search-btn {position: absolute;right: 1px;top: 4px;background: none;border: none;}
.fm-def-wrap .search-btn:hover {color: #0458F9;}

.fm-def {display:inline-block;font-size: 14px;border-radius: 3px;vertical-align: middle;}
.fm-def-view {display:inline-block; width:100%; padding:.375rem; font-size:13px; font-weight:400; line-height:1.5; vertical-align: middle;}
input.fm-def {padding: 4px 12px 3px 12px;border: 1px solid #DDD;}
select.fm-def {padding: 2px 30px 3px 12px;border: 1px solid #E7E7E7;}
textarea.fm-def {padding: 4px 12px 4px 12px;border: 1px solid #E7E7E7;}
/* large */
.fm-def.large {font-size: 15px;border-radius: 6px;}
input.fm-def.large {padding: 7px 15px 7px 15px;}
select.fm-def.large {padding: 7px 40px 7px 15px;background-position: right 16px center;}
textarea.fm-def.large {padding: 7px 15px 7px 15px;}

.fm-def:focus {border: 1px solid #989BA8;outline: none;}
.fm-def:-moz-placeholder {color: #c8c8c8;}
.fm-def::-moz-placeholder {color: #c8c8c8;}
.fm-def:-ms-input-placeholder {color: #c8c8c8;}
.fm-def::-webkit-input-placeholder {color: #c8c8c8;}
.fm-def[disabled],
.fm-def[readonly],
fieldset[disabled] .fm-def {cursor: not-allowed;background-color: #f7f7f7;}
.fm-def[required] { background-color:#fdffde;}

/* form-validation */
.fm-validation-error, .fm-validation-warning{ margin:5px 0; display:block; font-style:italic; font-weight:bold;font-size:.85rem;}
.fm-validation-error { color:red; }
.fm-validation-warning { color:#00a0df; }

/* checkbox */
.checkbox {display: inline-flex;align-items: center;vertical-align: middle;}
.checkbox input[type="checkbox"] {-webkit-appearance: none;-webkit-box-sizing: border-box;position: relative;width: 18px;height: 18px;cursor: pointer;outline: none !important;border-radius: 2px;border: 1px solid #989BA8;vertical-align: sub;background-color: #fff;}
.checkbox input[type="checkbox"]:checked {background-color: #0458F9;background-image: url(../images/check.svg);background-size: 16px 16px; border-color: #0458F9;}
.checkbox input[type="checkbox"]:disabled {background-color: #f7f7f7;border-color: #ccc;cursor: default;}
.checkbox input[type="checkbox"]:checked:disabled {background-color: #ccc;border-color: #ccc;}
.checkbox > span {font-size: 14px;color: #717171;font-weight: 400;}

/* radio */
.radio {display: inline-block;vertical-align: middle;}
.radio input[type="radio"] {-webkit-appearance: none;-webkit-box-sizing: border-box;position: relative;width: 18px;height: 18px;cursor: pointer;outline: none !important;border-radius: 99px;border: 1px solid #989BA8;vertical-align: sub;background-color: #fff;}
.radio input[type="radio"]:checked {border: 5px solid #0458F9;}
.radio label {margin-left: 5px;}

/* switch */
.switch {position: relative;display: inline-block;width: 45px;height: 24px;flex-shrink: 0;vertical-align: middle;}
.switch input {opacity: 0;width: 0;height: 0;}
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0; background-color: #ccc;-webkit-transition: .4s;transition: .4s;}
.slider:before {position: absolute;content: "";height: 16px;width: 16px; left: 4px; bottom: 4px;background-color: white;-webkit-transition: .4s;transition: .4s;}
input:checked + .slider {background-color: #0458F9;}
input:focus + .slider {box-shadow: 0 0 1px #2d99fb;}
input:checked + .slider:before {-webkit-transform: translateX(20px);-ms-transform: translateX(20px);transform: translateX(20px);}

.slider.round {border-radius: 24px;}
.slider.round:before {border-radius: 50%;}

.switch-letter {position: relative;display: inline-block;width: 115px;height: 24px;}
.switch-letter input { opacity: 0;width: 0;height: 0;}
.slider-letter {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0; background-color: #ccc;-webkit-transition: .4s;transition: .4s; text-align:right;}
.slider-letter:before {position: absolute;content: "";height: 16px;width: 16px; left: 4px; bottom: 4px;background-color: white;-webkit-transition: .4s;transition: .4s;}

input:checked + .slider-letter {background-color: #2d99fb; color:#fff; text-align:left;}
input:focus + .slider-letter {box-shadow: 0 0 1px #2d99fb;}
input:checked + .slider-letter:before {-webkit-transform: translateX(88px);-ms-transform: translateX(88px);transform: translateX(88px);}

.slider-letter.round {border-radius: 24px;}
.slider-letter.round:before {border-radius: 50%;}

/* button */
.btn { display:inline-block; text-align:center; vertical-align: middle; background-color: transparent; border:none; line-height:100%; border-radius:3px; white-space: nowrap; }
.btn-round { text-align:center; vertical-align: middle; border:none; font-weight:300; border-radius:50%; width:30px; height:30px; padding:0px !important; }
.btn-round-s { border-radius:50%; width:25px; height:25px; text-align:center; padding:0px !important;}

/* button-style */
.page-btn { padding:6px 12px; font-size:14px; font-weight:700; }
.sub-btn { padding:6px 9px; font-size:12px; font-weight:700; }
.move-btn:hover { background-color: #f4f4f4; border:1px solid #666666; color:inherit; }
.ico-btn { font-size: 20px; line-height: 100%; color: #222222; }
.ico-btn:hover { color: #0458F9;}

/* button-backgroundcolor */
.btn-basic { background-color:#2d99fb; border:1px solid #1082ea; color:#fff; }
.btn-basic:hover { background-color: #1082ea; border-color:#086bc4; }
.btn-blue { background-color:#2d99fb; border:1px solid #1082ea; color:#fff; }
.btn-blue:hover { background-color: #1082ea; border-color:#086bc4; }
.btn-red { background-color:#fb607f; border:1px solid #ef3e61; color:#fff; }
.btn-red:hover { background-color: #ef3e61; border-color:#e53659; }
.btn-green { background-color:#00a126; border:1px solid #01831f; color:#fff; }
.btn-green:hover { background-color: #01831f; border:1px solid #01701b; }
.btn-purple { background-color:#6a4ff6; border:1px solid #3f1fe3; color:#fff; }
.btn-purple:hover { background-color: #3f1fe3; border:1px solid #2808ce; }
.btn-gray { background-color:#506372; border:1px solid #3a4853; color:#fff; }
.btn-gray:hover { background-color: #3a4853; border:1px solid #2c3740; }

/* button- outline */
.btn-basic-outline { background-color:#fff; color:#086bc4; border:1px solid #a6cbff; }
.btn-basic-outline:hover { background-color: #dbeaff; border:1px solid #a6cbff; }
.btn-blue-outline { background-color:#fff; color:#086bc4; border:1px solid #a6cbff; }
.btn-blue-outline:hover { background-color: #e3ebf6; border:1px solid #a6cbff; }
.btn-red-outline { background-color:#fff; color:#d92550; border:1px solid #ffa6a6; }
.btn-red-outline:hover { background-color: #f6e3e8; border:1px solid #ffa6a6;  }
.btn-green-outline { background-color:#fff; color:#01831f; border:1px solid #b3d6c2; }
.btn-green-outline:hover { background-color: #e3f6eb; border:1px solid #b3d6c2; }
.btn-purple-outline { background-color:#fff; color:#8c18c2; border:1px solid #dabfe1; }
.btn-purple-outline:hover { background-color: #f2e3f6; border:1px solid #dabfe1;  }
.btn-gray-outline { background-color:#fff; color:#717171; border:1px solid #9CA3AF; }
.btn-gray-outline:hover { background-color: #f4f4f4; border:1px solid #9CA3AF; }

/* select-view */
.select-view {display: inline-block;background: #f1f6fc;border-radius: 3px;padding: 5px;margin: 3px;}
.select-view .remove-btn {background: none;color: #d92550;border: none;vertical-align: middle;}
.select-view .checkbox label {padding-right: 0;}
.select-view .checkbox input[type="checkbox"] {margin-right: 3px;}

/* calendar */
.calendar-wrap{ width:230px;border:1px solid #ddd; border-radius:5px; font-size:12px; padding:10px; font-family:arial; background:#fff; z-index:99; }
.calendar-present { font-size:1rem; font-weight:700;}
.calendar-tbl { width:100%; text-align:center;}
.calendar-tbl th, .calendar-tbl td { padding:3px 0px; }
.calendar-tbl td.out { color:#939393;}
.calendar-tbl td.today { border:1px solid #2808ce; background: rgba(217,210,250,0.2); color: #6a4ff6; font-weight:700;}
.calendar-tbl td:hover { background:#2d99fb; color:#fff;}
.calendar-y td { padding:10px 0px;}
.calendar-wrap-to { margin-left:-1px;}

/* tab */
.nav { display:flex; display: -ms-flexbox; display: -webkit-flex; padding-left:0px; margin-bottom:0px; list-style:none; font-size:1.1rem; }
.nav-tabs { border-bottom: 1px solid #CCC; overflow-x: auto; overflow-y: hidden; flex-shrink: 0; }
.nav-tabs>li { float:left; margin-bottom:-1px; white-space: nowrap; }
.nav>li { position:relative; display:block; }
.nav-tabs>li>a { margin-right:2px; line-height:1.5; border:1px solid transparent; border-radius:4px 4px 0 0; }
.nav>li>a { position:relative; display:block; padding:8px 16px; color: #717171; }
.nav>li>a:hover { color: #222;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { color:#0458F9; background-color:#fff; border:1px solid #0458F9; border-bottom-color:#fff; font-weight:700; }
.tab-head {position: relative;}
.tab-head .btn-wrap {position: absolute;top: 2px;right: 0;}
.tab-content::before{ content:""; display:block; padding-bottom:20px; } 
.tab-content>.tab-pane { display:none; }
.tab-content>.active { display:block; }

.nav-tabs-fixed {height: 100%;display: flex;flex-direction: column;}
.nav-tabs-fixed .tab-content {flex: 1;overflow: auto;}

#tab-select {display:none; padding:5px; font-size:1.2rem;} /*반응형 tab */


/* tab-bar */
.tab-bar>li>a { padding:12px 0; white-space: nowrap; border:none; font-size: 15px; font-weight: 400; line-height: 100%; margin-right: 24px; }
.tab-bar>li:last-child>a {margin-right: 0;}
.tab-bar>li.active>a, .tab-bar>li.active>a:focus, .tab-bar>li.active>a:hover { border:none; border-bottom:4px solid #0458F9; }

/* tab-bgcolor */
.tab-bgcolor>li>a { background: rgba(225,225,225,0.2); color: #939393; border-color:#ccc; border-width:1px 1px 0 1px;}
.tab-bgcolor>li>a:hover { color:#000;}

/* tab-bgfull */
.tab-bgfull-blue>li>a { background: rgba(225,225,225,0.2); color: #939393; border-color:#ccc; border-width:1px 1px 0 1px;}
.tab-bgfull-blue>li.active>a, .tab-bgfull-blue>li.active>a:focus, .tab-bgfull-blue>li.active>a:hover { background: #0458F9; color: #fff; border:1px solid #0458F9; }

/* tab-full */
.tab-full>li { flex: 1; text-align:center; }

/* tab-color */
.tab-bgfull-green { border-bottom:1px solid #00a126;}
.tab-bgfull-green>li>a { background:rgba(225,225,225,0.2); color: #939393; border-color:#ccc; border-width:1px 1px 0 1px;}
.tab-bgfull-green>li.active>a, .tab-bgfull-green>li.active>a:focus, .tab-bgfull-green>li.active>a:hover {background: #00a126; color: #fff; border:1px solid #00a126; }

.tab-bgfull-purple { border-bottom:1px solid #6a4ff6;}
.tab-bgfull-purple>li>a { background:rgba(225,225,225,0.2); color: #939393; border-color:#ccc; border-width:1px 1px 0 1px;}
.tab-bgfull-purple>li.active>a, .tab-bgfull-purple>li.active>a:focus, .tab-bgfull-purple>li.active>a:hover { background: #6a4ff6; color: #fff; border:1px solid #6a4ff6; }

.tab-bgfull-red { border-bottom:1px solid #d92550;}
.tab-bgfull-red>li>a { background:rgba(225,225,225,0.2); color: #939393; border-color:#ccc; border-width:1px 1px 0 1px;}
.tab-bgfull-red>li.active>a, .tab-bgfull-red>li.active>a:focus, .tab-bgfull-red>li.active>a:hover { background:#ef3e61; color: #fff; border:1px solid #ef3e61; }

.tab-bgfull-gray { border-bottom:1px solid #939393;}
.tab-bgfull-gray>li>a { background: rgba(225,225,225,0.2); color: #939393; border-color:#ccc; border-width:1px 1px 0 1px;}
.tab-bgfull-gray>li.active>a, .tab-bgfull-gray>li.active>a:focus, .tab-bgfull-gray>li.active>a:hover { background: #506372; color: #fff; border:1px solid #2c3740; }

.tab-bgfull-blue>li>a:hover, .tab-bgfull-green>li>a:hover, .tab-bgfull-purple>li>a:hover, .tab-bgfull-red>li>a:hover, .tab-bgfull-gray>li>a:hover { color:#222;}

/* pagination */
.pagination-wrap {text-align: right;}
.pagination .page {display: inline-block;vertical-align: middle;}
.pagination .prev {font-size: 24px;margin-right: 6px;vertical-align: middle;}
.pagination .next {font-size: 24px;margin-left: 6px;vertical-align: middle;}
.pagination .prev:hover, .pagination .next:hover {color: #0458F9;}
.pagination .page p {color: #989BA8;font-size: 13px;font-weight: 400;margin-bottom: 2px;}
.pagination .page p > span {color: #222;font-size: 13px;font-weight: 400;margin-right: 6px;}

/* fileUploader */
.dropzone {background:#f1f6fc; color:#086bc4; border-radius:4px; border:2px dashed #a6cbff; padding:10px 0; text-align:center;}
.dropzone i {display: block; color:#086bc4; font-size: 30px; opacity: 0.4; margin-bottom: 5px;}
.dropzone span {color:#086bc4; font-weight: bold; opacity: 0.4;}
.dropzone:hover, .dropzone.hover {background:#f1f1f1; border-color:#ccc;}
.dropzone:hover *, .dropzone.hover * {color:#000;}

/* breadcrumb */
.breadcrumb { padding: 10px 16px; list-style: none; }
.breadcrumb li { display: inline; font-size: 13px;}
.breadcrumb li+li:before { padding: 8px; content: "/";}
.breadcrumb li a { color: #0275d8; text-decoration: none;}
.breadcrumb li a:hover { color: #01447e; text-decoration: underline;}

/* tooltip */
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted #ccc;}
.tooltip .tooltiptext { visibility: hidden; position: absolute; min-width:120px; background-color: #555; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; z-index: 1; opacity: 0; transition: opacity .6s;}
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1;}
.tooltip-right { top: -5px; left: 125%;}
.tooltip-bottom { top: 135%; left: 50%; margin-left: -60px;}
.tooltip-top {bottom: 125%; left: 50%; margin-left: -60px;}
.tooltip-left { top: -5px; bottom:auto; right: 128%; }
.tooltip-top::after, .tooltip-left::after, .tooltip-bottom::after, .tooltip-right::after { content: ""; position: absolute;border-width: 5px; border-style: solid;}
.tooltip-top::after { top: 100%; left: 50%; margin-left: -5px; border-color: #555 transparent transparent transparent;}
.tooltip-left::after { top: 50%; left: 100%; margin-top: -5px; border-color: transparent transparent transparent #555;}
.tooltip-bottom::after { bottom: 100%; left: 50%; margin-left: -5px; border-color: transparent transparent #555 transparent;}
.tooltip-right::after { top: 50%; right: 100%; margin-top: -5px; border-color: transparent #555 transparent transparent;}

/* content tooltip */
.content-tooltip { display: inline; position: relative; z-index: 9999; }
.content-tooltip .tooltip-item { cursor: pointer; display: inline-block; font-weight: 500; padding-bottom:5px; }
.content-tooltip .tooltip-content { position: absolute; z-index: 9999; background:#333; white-space: nowrap; left: 50%; margin: 0 0 20px -80px; top: 100%; text-align: left; font-size: 14px; line-height: 20px; opacity: 0; cursor: default; pointer-events: none; padding:20px; border-radius: 6px; }
.content-tooltip:hover .tooltip-content { pointer-events: auto; opacity: 1; -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); }
.tooltip-effect .tooltip-content { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; color: #fff; }
.content-tooltip .tooltip-content .tooltip-text ul { margin:0px; padding:0px; }
.content-tooltip .tooltip-content .tooltip-text ul li.tit { list-style: none; border-bottom:1px solid #fff; padding-bottom:5px; margin-bottom:5px; font-weight:700;}

/* loading */
.lds-roller { display: inline-block; position: relative;width: 80px; height: 80px;}
.lds-roller div {animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;transform-origin: 40px 40px;}
.lds-roller div:after { content: " ";display: block;position: absolute;width: 7px;height: 7px; border-radius: 50%; background: #111; margin: -4px 0 0 -4px;}
.lds-roller div:nth-child(1) { animation-delay: -0.036s;}
.lds-roller div:nth-child(1):after { top: 63px; left: 63px; }
.lds-roller div:nth-child(2) {animation-delay: -0.072s;}
.lds-roller div:nth-child(2):after { top: 68px; left: 56px;}
.lds-roller div:nth-child(3) { animation-delay: -0.108s;}
.lds-roller div:nth-child(3):after { top: 71px; left: 48px;}
.lds-roller div:nth-child(4) { animation-delay: -0.144s;}
.lds-roller div:nth-child(4):after { top: 72px; left: 40px;}
.lds-roller div:nth-child(5) { animation-delay: -0.18s;}
.lds-roller div:nth-child(5):after { top: 71px; left: 32px;}
.lds-roller div:nth-child(6) { animation-delay: -0.216s;}
.lds-roller div:nth-child(6):after { top: 68px; left: 24px;}
.lds-roller div:nth-child(7) { animation-delay: -0.252s;}
.lds-roller div:nth-child(7):after { top: 63px; left: 17px;}
.lds-roller div:nth-child(8) { animation-delay: -0.288s;}
.lds-roller div:nth-child(8):after { top: 56px; left: 12px;}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.lds-bar { display: inline-block; position: relative; width: 80px; height: 80px;}
.lds-bar div { display: inline-block; position: absolute; left: 8px; width: 16px;  background: #cef; animation: lds-bar 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;}
.lds-bar div:nth-child(1) { left: 8px; animation-delay: -0.24s;}
.lds-bar div:nth-child(2) { left: 32px; animation-delay: -0.12s;}
.lds-bar div:nth-child(3) { left: 56px; animation-delay: 0;}
@keyframes lds-bar {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}

.lds-ellipsis { display: inline-block; position: relative; width: 80px; height: 80px;}
.lds-ellipsis div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #00a126; animation-timing-function: cubic-bezier(0, 1, 1, 0);}
.lds-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite;}
.lds-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite;}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

.new { display:inline-block; background:var(--Point, #FF4844); color:#fff; font-weight:700; font-size:12px; border-radius: 50%; width:20px; height:20px; text-align:center; }

/* alert */
.alert { padding:10px 20px; border-radius:6px; font-weight:600; font-size:16px; }
.alert-error { background: rgba(252,96,127,0.4); color: #e53659; }
.alert-info { background: rgba(45,153,241,0.3); color: #2d99fb;}
.alert-success { background: rgba(35,214,146,0.4); color: #00a126;}
.alert-danger { background: rgba(255,171,25,0.4); color: #ff6600;}

/* chart */
.chart-img { display:inline-block; width:15px; height:15px;}
.chart-blue { background: rgba(45,153,241,0.8); }
.chart-green { background: rgba(35,214,146,0.8);}
.chart-red { background: rgba(252,115,60,0.8); }
.chart-purple {background: rgba(217,210,250,0.8); }
.chart-orange { background: rgba(255,162,0,0.8);}
.chart-gray { background: rgba(187,187,187,0.8); }
.chart-darkblue { background: rgba(57,53,223,0.8);}
.chart-yellow { background: rgba(247,185,36,0.8);}
.chart-darkgreen { background: rgba(58,196,125,0.8);}
.chart-jaju { background: rgba(217,37,80,0.8);}

.progress {width:100%; display:flex; display: -ms-flexbox; display: -webkit-flex; height:.8rem; border-radius:.50rem; background:#f7f7f7;overflow: hidden;}
.progress-bar {display: inline-block; flex-direction: column; justify-content: center; white-space: nowrap; height: 100%; margin-left:1px;}
.progress-bar:first-child {border-radius:.50rem 0 0 .50rem; margin-left:0px;}
.progress-bar:last-child {border-radius: 0 .50rem .50rem 0; margin-left: 0px;}

.gauge-wrap li { display:inline-block; margin-right:30px; vertical-align: top;}
.gauge { position: relative; border-radius: 50%/100% 100% 0 0; overflow: hidden; width: 130px;}
.gauge.large {width: 190px;}
.gauge.large .value{font-size: 24px;}
.gauge:before { content: ""; display: block; padding-top: 50%;}
.gauge .chart {overflow: hidden; }
.gauge .mask { position: absolute; left: 10%; right: 10%; bottom: 0; top: 20%; background-color: #fff; border-radius: 50%/100% 100% 0 0;}
.gauge .percentage { position: absolute; top: -1px; left: -1px; bottom: 0px; right: -1px; background-color: #f7f7f7; transform-origin: bottom center;}
.gauge .value { position: absolute; bottom: 0%; left: 0; width: 100%;text-align: center; font-size: 18px; font-weight:700; }
.gauge .min { position: absolute; bottom: 0; left: 5%;}
.gauge .max { position: absolute; bottom: 0; right: 5%; }

/* bar graph*/
.graph { display:flex; background:url(../images/main-chart-bg.png) 0px 100px repeat-x; }
.graph li { text-align:center; margin:0 auto; padding:0 30px;}
.graph li:first-child { margin-left:20px;}
.graph li .graph-bar { position:relative; width:15px; height:200px; background:#f7f7fe; border-radius: 10px 10px 0 0; text-align:center; margin:0 auto; }
.graph li div span { position:absolute; left:0; right:0; bottom:0; background:#acaef5;border-radius: 10px 10px 0 0;}
.graph li div span.over{ position:absolute; background:#4b49e9; left:0; bottom:50%; border-radius: 10px;}
.graph li p { margin-top:5px; font-size:12px; color:#aaaaaa; }
.graph:before { content:"8h"; display:block; position:relative; top:90px;font-size:12px; color:#aaaaaa;}
.graph li .graph-bar:hover .graph-value{display:block;}
.graph li .graph-value { display:none;position:fixed; padding:10px; background:#fff; border-radius:10px; border:1px solid #ddd; box-shadow: 3px 5px 7px 0px rgba(0,0,0,0.2); z-index:99; white-space:nowrap; }
.graph li .graph-value > p { color:#1800ff; margin-bottom:0px; }

/* summary */
.summary { margin:0; padding:0; display:flex; display: -ms-flexbox; display: -webkit-flex; flex-direction: row; background: #F6F6F6; padding: 20px;}
.summary li { flex:1; -webkit-flex: 1; -ms-flex: 1; flex-basis: inherit; flex-grow: 1; width:fit-content; white-space: nowrap; padding: 10px 30px; margin: 0; border-right: 1px dashed #989BA8;}
.summary li:last-child {border-right: none;}
.summary li > span {display: inline-block; color: #717171; font-size: 16px; font-weight: 700; line-height: 100%; margin-bottom: 12px;}
.summary li > p {color: #333F54; font-size: 40px; font-weight: 700; line-height: 100%; margin: 0;}

.table-layer-wp .summary li {padding: 0 30px;}
.table-layer-wp .summary li > span {font-weight: 500;margin-bottom: 5px;}
.table-layer-wp .summary li > p {font-size: 36px;}

/* popup */
#pop-wrapper { width:100%;}
.pop-header { padding:10px 20px; font-size:1.1rem; font-weight:600; background:#444; color:#fff; }
.pop-content { padding:20px;}

/* tree */
.tree { min-height:20px; padding:15px 15px 20px 15px; background-color:#fbfbfb; -webkit-border-radius:4px; -moz-border-radius:4px;
 border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); }
.tree ul { margin-bottom:0px;}
.tree li { list-style-type:none; margin:0; padding:10px 5px 0 5px; position:relative;}

.tree li::before, .tree li::after { content:''; left:-20px; position:absolute; right:auto;}
.tree li::before { border-left:1px solid #999; bottom:50px; height:100%; top:0; width:1px;}
.tree li::after { border-top:1px solid #999; height:20px; top:30px; width:25px;}
.tree li span { -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #ddd; border-radius:5px; display:inline-block; padding:3px 8px; text-decoration:none; background:#fff;}
.tree li span i { margin-right:5px; font-size: 1rem;}
/*.tree li.parent_li>span { cursor:pointer; }*/
.tree li>span { cursor:pointer; }
.tree>ul>li::before, .tree>ul>li::after { border:0;}
.tree li:last-child::before { height:30px;}
/*.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span { background:#f7f7f7; border:1px solid #999; color:#000; }*/
.tree li>span:hover, .tree li>span:hover+ul li span { background:#f7f7f7; border:1px solid #999; color:#000; }
.tree li.selected>span{border: 1px solid #2d99fb; color: #2d99fb; background-color: #f1f6fc;}

.tree-arrow, .tree-arrow ul { margin:0; padding:0; list-style:none; }
.tree-arrow ul { margin-left:1em; position:relative; }
.tree-arrow ul ul { margin-left:.5em; }
.tree-arrow ul:before { content:""; display:block; width:0; position:absolute; top:0; bottom:0; left:0; border-left:1px solid;}
.tree-arrow li { margin:0; padding:0 1em; line-height:2em; position:relative;display: list-item; }
.tree-arrow ul li:before { content:""; display:block; width:10px; height:0; border-top:1px solid; margin-top:-1px; position:absolute; top:1em; left:0;}
.tree-arrow ul li:last-child:before { background:#fff; height:auto; top:1em; bottom:0; }
.indicator { margin-right:5px;}
.tree-arrow li i { font-size:10px;}
.tree-arrow li button, .tree-arrow li button:active, .tree li button:focus { text-decoration: none; color:#369; border:none; background:transparent; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; outline: 0;}

/* ui - tree type(2) */
.m-tree {overflow-x:hidden; overflow-y:auto; font-size:14px;}
.m-tree .selected, .m-tree .selected:hover {background:#e1f0ff; color:#008fd5; cursor: pointer;}
.m-top:hover, .m-top.active {background:#f1f4f7; cursor: pointer;}

.m-node {padding-left:1rem;}
.m-node .m-top {display:flex; align-items:center; padding-left:100%; margin-left:-100%; padding-right:100%; margin-right:-100%; padding-top:5px; padding-bottom:6px;}
.m-node .m-sub {padding-left:1rem;}
.m-node .m-top .menu-icon {display:flex; align-items: center; font-size:1.8rem;}
.m-node .m-top .menu-name {display:inline-block; margin-left:10px; user-select: none; white-space: pre-line;}
.m-node .m-top .menu-name.ellipsis {white-space: nowrap;}
.m-node .m-top .menu-icon-arrow {padding-right:1rem}

/* ui - tree type(2) - line */
.tree-line .m-top {border-width:0 0 1px 0; border-style:solid; border-color:#ddd;}

/* ui - tree type(2) - round */
.tree-round .m-top {padding-left:0; margin-left:0; padding-right:0; margin-right:0;}
.tree-round .m-top {border-width:1px; border-style:solid; border-color:#ddd; border-radius:100px; margin-bottom:10px;}
.tree-round .m-top .menu-icon-arrow {padding-left:1rem; padding-right:0;}
.tree-round .m-top .menu-icon {padding-left:1.5rem;}
.tree-round .m-top .menu-name {white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
.tree-round .m-sub {position: relative;}
.tree-round .m-sub:before {content:"";display:block;width:0;position:absolute;top: -10px;bottom: 20px;left:25px;border-left:1px solid #aaa;}
.tree-round .m-sub>.m-node>.m-top {position: relative;}
.tree-round .m-sub>.m-node>.m-top:before {content:"";display:block;width: 32px;height:0;border-top:1px solid #aaa;margin-top:-1px;position:absolute;top: 19px;left: -39px;}

/* ui - tree type(3) - bind */
.tree-bind .m-node {padding-left:0;}
.tree-bind .m-top {padding-left:0;margin-left:0;padding-right:0;margin-right:0;min-height: 33px;}
.tree-bind .m-top .menu-icon-arrow {padding-left:0; padding-right:0;}
.tree-bind .m-top .menu-icon {padding-left: 0.5rem;}
.tree-bind .m-top .menu-name {white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
.tree-bind .m-sub {position: relative;padding-left: 1.65rem;}
.tree-bind .m-sub:before {content:"";display:block;width:0;position:absolute;top: -10px;left: 14px;border-left: 1px solid #aaa;height: calc(100% - 7px);}
.tree-bind .m-sub>.m-node>.m-top {position: relative;}
.tree-bind .m-sub>.m-node>.m-top:after {content:"";display:block;width: 16px;height: 0;border-top: 1px solid #aaa;margin-top: -1px;position: absolute;top: 17px;left: -9px;}
.tree-bind .m-sub>.m-node {position: relative;}
.tree-bind .m-sub>.m-node:last-child:before {content:''; position: absolute; top:16px; bottom:16px; left:-12px; width:10px; background:#fff;}

/* ui - search-wrap */
.search-wrap li {display: inline-block; margin-right: 8px; vertical-align: bottom;}
.search-wrap li .form-label .control {display: flex; align-items: center;}
.wave-between-date:before {content:'~'; display: inline-block; margin:0 2px; font-weight:600;}

/* ui - date */
.date-wrap {display:inline-block;}
.date-wrap .date-input:first-child {margin-right: 3px;}
.date-wrap .date-input:last-child {margin-left: 3px;}
.date-input {position: relative; display: inline-block;}
.date-input i {position: absolute; top: 2px; right: 10px; display: block; vertical-align: middle; cursor: pointer; line-height:26px;}
.date-input input {padding-right: 30px;}

/* ui - ellipsis */
.ellipsis {overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap;}
.ellipsis {table-layout: fixed;} /* table 태그에 클래스 추가 */
.ellipsis td {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* ui - ellipsis (multiLine) */
.ellipsis.line-clamp-1 {line-height:1.4; max-height:1.4em; white-space:normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all;}
.ellipsis.line-clamp-2 {line-height:1.4; max-height:2.8em; white-space:normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
.ellipsis.line-clamp-3 {line-height:1.4; max-height:4.8em; white-space:normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all;}

/* ui - dropdown-list */
.dropdown-list-wp .dropdown-list li {margin: 0;}
.dropdown-list-wp .dropdown-list li > .list-title {height: 50px;display: flex;align-items: center;border-top: 1px solid #E7E7E7;background: #F6F6F6;padding: 15px 24px;cursor: pointer;}
.dropdown-list-wp .dropdown-list li > .list-title > p {color: #222;font-size: 16px;font-weight: 500;line-height: 100%;margin: 0;}
.dropdown-list-wp .dropdown-list li > .list-title > i {margin-left: auto;font-size: 24px;}
.dropdown-list-wp .dropdown-list li > .list-content {display: none;padding: 10px 0 24px 0;}
.dropdown-list-wp .dropdown-list li.on > .list-title {background: #0458F9;}
.dropdown-list-wp .dropdown-list li.on > .list-title > p {color: #fff;}
.dropdown-list-wp .dropdown-list li.on > .list-title > i {color: #fff;rotate: 180deg;}
.dropdown-list-wp .dropdown-list li.on > .list-content {display: block;}

.dropdown-layer-wp {position: absolute;left: 40px;top: 107px;width: 450px;height: calc(100% - 150px);background: #fff;border: 1px solid #0458F9;border-radius: 10px;padding: 15px;z-index: 10;}
.dropdown-layer-wp .title {color: #222;font-size: 18px;font-weight: 700;line-height: 100%;}
.dropdown-layer-wp .close-btn {display: inline-flex;justify-content: center;align-items: center;width: 32px;height: 32px;border-radius: 32px;background: #F6F6F6;}
.dropdown-layer-wp .close-btn .icon-fux-close1 {font-size: 22px;color: #222222;transition: 0.3s;}
.dropdown-layer-wp .close-btn:hover .icon-fux-close1 {color: #0458F9;transform: rotate(-90deg);}
.dropdown-layer-wp .layer-header {height: 40px;}
.dropdown-layer-wp .layer-content {height: calc(100% - 40px);}
.dropdown-layer-wp .grd-wrap {height: 100%;display: flex;flex-direction: column;overflow: hidden;}
.dropdown-layer-wp .grd-content {flex: 1;overflow: auto;}
.dropdown-layer-wp .grd thead th {height: 35px;padding: 5px;background: #0458F9;}
.dropdown-layer-wp .grd tbody td {height: 35px;padding: 5px;}

/* ui - table-layer */
.layer {position: fixed;left: 0;top: 70px;width: 100%;height: calc(100% - 70px);background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);z-index: 99;}
/* 조회용 팝업일 경우 암전 미처리 및 부모창 클릭을 위하여 클래스를 추가 */
.layer-empty {position: fixed;left: 0;top: 70px;height: calc(100% - 70px);background-color: transparent;z-index: 99;}

.table-layer-wp {position: fixed;top: 70px;right: 0;width: 50%;height: calc(100vh - 70px);background: #fff;border: 2px solid #333F54;z-index: 10;}
.table-layer-wp .layer-header {height: 62px;background: #f5f5f5;padding: 15px;}
.table-layer-wp .layer-header .title {color: #222;font-size: 20px;font-weight: 700;line-height: 100%;}
.table-layer-wp .layer-header .txt-btn {vertical-align: middle;margin-right: 10px;background: none; font-size:16px;}
.table-layer-wp .layer-header .refresh-btn {width: 32px;height: 32px;vertical-align: middle;margin-right: 10px;background: none;}
.table-layer-wp .layer-header .refresh-btn i {font-size: 18px;margin: 0;}
.table-layer-wp .layer-header .back-btn {width: 32px;height: 32px;vertical-align: middle;margin-right: 10px;background: none;}
.table-layer-wp .layer-header .back-btn i {font-size: 20px;font-weight: 700;margin: 0;}
.table-layer-wp .layer-header .close-btn {display: inline-flex;justify-content: center;align-items: center;width: 32px;height: 32px;border-radius: 32px;background: #fff;vertical-align: middle;}
.table-layer-wp .layer-header .close-btn .icon-fux-close1 {font-size: 22px;color: #222222;transition: 0.3s;}
.table-layer-wp .layer-header .close-btn:hover .icon-fux-close1 {color: #0458F9;transform: rotate(-90deg);}
.table-layer-wp .layer-content {height: calc(100% - 62px);padding: 30px 15px 15px;overflow-y: auto;display: flex;flex-direction: column;}
.table-layer-wp .layer-content .mapping-wp {width: 100%;height: calc(100% - 42px);display: flex;}
.table-layer-wp .layer-content .mapping-wp .mapping-left {flex: 2;display: flex;flex-direction: column;width: 45%;}
.table-layer-wp .layer-content .mapping-wp .btn-gp {display: flex;flex-direction: column;justify-content: center;margin: 0 10px;width: 5%;}
.table-layer-wp .layer-content .mapping-wp .btn-gp button {margin: 5px 0;border: none;padding: 6px 12px;font-size: 12px;font-weight: 700;border-radius: 3px;}
.table-layer-wp .layer-content .mapping-wp .mapping-right {flex: 3;display: flex;flex-direction: column;width: 50%;}

.mapping-wp .mapping-scroll-wp {flex: 1;overflow: auto;border: 1px solid #ddd;border-radius: 10px;}
.mapping-wp .mapping-scroll-wp ul li { padding: 6px;cursor: pointer;}
.mapping-wp .mapping-scroll-wp ul li.selected {background:#d7dde5;}


/* modal */
.modal {position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4); z-index:999; }

/* modal - optional */
.modal-wrap {display:table; table-layout: fixed; width:100%; height:100%; }
.modal-inner { table-layout: fixed; display:table-cell; vertical-align: middle; text-align:center; }
.modal-inner .modal-content {position:relative; display:inline-block; background-color:#fff; padding:20px; border-radius: 5px; }

/* modal - flex */
.modal-flex {display:flex;display: -ms-flexbox;display: -webkit-flex;height:100vh;justify-content: center;align-items: center;}
.modal-flex-inner {background:#fff;border-radius: 8px;max-width:90%;max-height:90vh;overflow:auto;display: flex;flex-direction: column;justify-content:flex-start;}
.modal-flex-inner .modal-header {padding: 22px 40px;background-color: #F6FAFF;}
.modal-flex-inner .modal-header .title {color: #02176A;font-size: 25px;font-weight: 400;}
.modal-flex-inner .modal-header .close-btn {color: #7082A3;font-size: 27px;}
.modal-flex-inner .modal-header .close-btn:hover {color: #02176A;}

.modal-flex-inner .modal-content {overflow: auto; display: flex; justify-content: flex-start;}
.modal-flex-inner .modal-content .modal-size {min-width:300px;}
.modal-flex-inner .modal-content .modal-size.optional-modal-padding {height: 100%;padding: 25px 40px 35px;}
.modal-flex-inner .modal-content .modal-size.optional-modal-h-full {height: 79vh;}
.modal-flex-inner .modal-content .modal-size.optional-modal-w-full {width: 89vw;} 
.modal-flex-inner .modal-content .modal-size.optional-modal-winpopup {overflow: auto;}

.modal-flex-inner .modal-content .modal-size.optional-modal-h-full .row {flex:1; overflow: auto; height:100%;}
.modal-flex-inner .modal-content .modal-size.optional-modal-h-full .row [class*="col-"] {height: 100%; overflow: auto;}
.modal-flex-inner .modal-content .modal-size.optional-modal-h-full .row [class*="col-"] .card {margin-bottom: 0; height: 100%; overflow: auto;}

.modal-flex-inner .modal-footer {height: 50px;padding: 13px 28px;background: #333F54;}
.modal-flex-inner .modal-footer .btn {color: #FFF;font-size: 16px;font-weight: 500;line-height: 100%;vertical-align: middle;}
.modal-flex-inner .modal-footer .btn-bdr {display: inline-block;width: 2px;height: 14px;opacity: 0.1;background: #FFF;vertical-align: middle;margin: 0 15px;}
.modal-flex-inner .modal-footer .prev-btn {color: #FFF;font-size: 16px;font-weight: 500;line-height: 100%;}
.modal-flex-inner .modal-footer .prev-btn > i {font-size: 24px;vertical-align: sub;margin: 0 4px;}
.modal-flex-inner .modal-footer .next-btn {color: #FFF;font-size: 16px;font-weight: 500;line-height: 100%;}
.modal-flex-inner .modal-footer .next-btn > i {font-size: 24px;vertical-align: sub;margin: 0 4px;}
.modal-flex-inner .modal-footer .done-btn {color: #04CDF9;font-size: 16px;font-weight: 500;line-height: 100%;vertical-align: middle;}
.modal-flex-inner .modal-footer .done-btn > i {font-size: 24px;vertical-align: sub;margin: 0 4px;}
.modal-flex-inner .modal-footer .cancel-btn {color: #FFF;font-size: 16px;font-weight: 500;line-height: 100%;opacity: 0.6;vertical-align: middle;}


/* (모달 안에 아이프레임) */
.modal-flex-inner iframe {width:100% !important; height:100% !important; border:none; min-height:auto !important; display: block;}

/* loading */
.loading-text {display: inline-block;padding: 4px 14px;margin-top: 14px;border-radius: 100px;background: linear-gradient(88deg, #0458F9 0%, #04AFF9 100%);box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.20);color: #FFF;text-align: center;font-family: Noto Sans KR;font-size: 13px;font-style: normal;font-weight: 700;letter-spacing: normal;}
.loading {display: inline-block;width: 56px;height: 56px;background: url(../images/loading.png) no-repeat center;background-size: 56px;animation: loading-ani 1.2s infinite linear;}
.loading-s {display: inline-block;width: 40px;height: 40px;background: url(../images/loading.png) no-repeat center;background-size: 40px;animation: loading-ani 1.2s infinite linear;}
@keyframes loading-ani {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* label */
.label {display: inline-flex;align-items: center;gap: 6px;min-width: 32px;font-size: 13px;font-weight: 700;line-height: 100%;text-align: center;padding: 7px;border: 1px solid transparent;border-radius: 3px;flex-shrink: 0;color: #717171;background: #E7E7E7;}
.label > i {font-size: 9px;} 
  /* color */
  .label.blue {color: #0097EC;background: rgba(0, 189, 231, 0.16);}
  .label.red {color: #DD263B;background: rgba(247, 103, 92, 0.10);}
  .label.orange {color: #F87700;background: rgba(255, 133, 21, 0.16);}
  .label.green {color: #01B075;background: rgba(1, 176, 117, 0.14);}
  .label.purple {color: #7F5BFA;background: rgba(138, 107, 244, 0.16);}
  .label.gray {color: #FFF;background: #9CA3AF;}
  .label.white {color: #717171;background: #FFF;border: 1px solid rgba(166, 166, 166, 0.60);}

.label-text {color: #717171;font-size: 14px;font-weight: 500;margin-left: 8px;}

/* error */
.error-wrap {width: 100%;height: calc(100% - 70px);display: flex;flex-direction: column;justify-content: center;align-items: center;}
.error-wrap > h1 {color: #007AF5;text-align: center;font-family: Noto Sans KR;font-size: 30px;font-style: normal;font-weight: 700;line-height: 100%; /* 30px */margin-top: 50px;}
.error-wrap > p {color: #717171;text-align: center;font-family: Noto Sans KR;font-size: 16px;font-style: normal;font-weight: 400;line-height: 28px; /* 175% */margin-top: 24px;margin-bottom: 50px;}

/* loading */
.loading-text {display: inline-block;padding: 4px 14px;margin-top: 14px;border-radius: 100px;background: linear-gradient(88deg, #0458F9 0%, #04AFF9 100%);box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.20);color: #FFF;text-align: center;font-family: Noto Sans KR;font-size: 13px;font-style: normal;font-weight: 700;letter-spacing: normal;}
.loading {display: inline-block;width: 56px;height: 56px;background: url(../images/loading.png) no-repeat center;background-size: 56px;animation: loading-ani 1.2s infinite linear;}
.loading-s {display: inline-block;width: 40px;height: 40px;background: url(../images/loading.png) no-repeat center;background-size: 40px;animation: loading-ani 1.2s infinite linear;}
@keyframes loading-ani {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* status */
.status-dot {display: inline-flex;align-items: center;gap: 8px;font-size: 14px;font-weight: 500;}
.status-dot.column {flex-direction: column;}
.status-dot::before {content: '';display: block;width: 10px;height: 10px;border-radius: 10px;flex-grow: 0;}
.status-dot.red {color: #EB1A24;}
.status-dot.red::before {background-color: #EB1A24;}
.status-dot.orange {color: #FF8000;}
.status-dot.orange::before {background-color: #FF8000;}
.status-dot.green {color: #09976E;}
.status-dot.green::before {background-color: #09976E;}
.status-dot.gray {color: #9CA3AF;}
.status-dot.gray::before {background-color: #9CA3AF;}

/* timeline-wrap */
.timeline-wrap {width: 230px;height: 100%;background: #FFF;display: flex;flex-direction: column;border: 1px solid #DAECFB;}
.timeline-head {border-bottom: 1px solid #DAECFB;background: #F0F7FF;padding: 16px;flex-shrink: 0;}
.timeline-head .title {color: #333F54;font-size: 16px;font-weight: 700;}
.timeline-body {height: 100%;overflow: hidden;}
.timeline-body ul {height: 100%;padding: 25px 10px;overflow: auto;}
.timeline-body ul li {position: relative;padding-left: 17px;padding-bottom: 32px;display: flex;flex-direction: column;align-items: flex-start;gap: 8px;}
.timeline-body ul li::before {content: '';display: block;width: 1px;height: 100%;border-left: 1px dashed #1B6AC5;position: absolute;left: 2.5px;top: 0px;}
.timeline-body ul li:last-child::before {border: none;}
.timeline-body ul li:first-child::before {top: 11px;}
.timeline-body ul li::after {content: '';display: block;width: 6px;height: 6px;border-radius: 6px;background: #1B6AC5;position: absolute;left: 0;top: 5px;}
.timeline-body ul li .time {width: 100%;color: #1B6AC5;font-size: 14px;font-weight: 900;line-height: 100%;}
.timeline-body ul li .label {display: inline-block;max-width: 100%;background: #1B6AC5;color: #FFF;font-size: 12px;font-weight: 700;padding: 6px 8px;border-radius: 4px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.timeline-body ul li .ip {width: 100%;color: #02176A;font-size: 13px;font-weight: 500;line-height: 100%;}
.timeline-body ul li .ip i {margin-right: 8px;}
.timeline-body ul li .file {color: #505050;font-size: 13px;font-weight: 500;}
.timeline-body ul li .warning {width: 100%;color:#DD263B;font-size: 13px;font-weight: 500;line-height: 100%;padding-left: 16px;background: url(../images/warning.svg) no-repeat center left;}


/***** Admin ******************************************************************************************************/
.sub-header {display: flex;align-items: center;padding-bottom: 30px;}
.sub-content h2.title {color: #333F54;font-size: 32px;font-weight: 700;margin-bottom: 0;}
.sub-content h3.title {color: #333;font-size: 28px;font-weight: 700;margin-bottom: 0;}
.sub-content h4.title {color: #333;font-size: 20px;font-weight: 700;margin-bottom: 0;}
.sub-content h5.title {color: #333;font-size: 18px;font-weight: 700;margin-bottom: 0;}
.sub-content h6.title {color: #333;font-size: 16px;font-weight: 500;margin-bottom: 0;}

/***** Login ******************************************************************************************************/
#wrapper-login {height: 100%;}
.login-wrap {width:100%; min-height:100%; display: flex;flex-direction: column; justify-content: center; align-items: center;padding: 20px 0;}
.login-wrap .login-logo {margin-bottom: 60px;}
.login-wrap .bg-login {z-index:-1;background-color: #FFFFFF; background-image: url(../images/bg_login.png); background-repeat: no-repeat; background-size:cover; position: fixed; top:0; left:0; width:100%; height:100%;}
.login-container {position: relative;max-width: 90vw; width: 684px;border-radius: 16px;background: linear-gradient(180deg, rgba(65, 50, 199, 0.80) -3.8%, rgba(27, 67, 131, 0.80) 33.36%, rgba(4, 35, 85, 0.80) 71.73%, rgba(4, 35, 85, 0.80) 95.89%);box-shadow: 0 8px 60px 8px rgba(58, 53, 63, 0.20);padding: 0 62px;}
.login-wrap .tab-options {display: flex;justify-content: center;gap:45px;}
.login-wrap .radio {display: inline-block;vertical-align: middle;}
.login-wrap .radio input[type="radio"] {-webkit-appearance: none;-webkit-box-sizing: border-box;position: relative;width: 18px;height: 18px;cursor: pointer;outline: none !important;border-radius: 99px;border: 1px solid #989BA8;vertical-align: sub;background-color: #131F35;border: none;margin: 0 3px;}
.login-wrap .radio input[type="radio"]:checked {border: 5px solid #131F35;background: #5145FF;}

.login-wrap .login-header {padding: 60px 0 40px;border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.login-wrap .login-header h2 {color: #FFF;text-align: center;font-size: 24px;font-weight: 900;}
.login-wrap .login-header p {color: #FFF;text-align: center;font-size: 20px;font-weight: 500;margin-top: 10px;}
.login-wrap .form-login {padding: 37px 0 72px;}
.login-wrap .form-login .info {color: #CECBF5;text-align: center;font-size: 17px;font-weight: 400;line-height: 180%;}
.login-wrap .form-login .info b {color: #FFF;font-weight: 700;}
.login-wrap .form-list {text-align: center;padding: 60px 40px 0;}
.login-wrap .form-list .radio input[type="radio"] {width: 22px;height: 22px;vertical-align: middle;}
.login-wrap .form-list .radio input[type="radio"]:checked {border: 6px solid #131F35;}
.login-wrap .form-list .radio label {color: #6786BC;font-size: 16px;font-weight: 500;vertical-align: middle;margin-left: 8px;}
.login-wrap .form-list .radio.checked label {color: #FFF;}
.login-wrap .form-list li .login-input input {width: 100%;height: 66px;padding: 0 34px;border-radius: 8px;background: linear-gradient(0deg, #203F88 -30.3%, #05214C 82.25%);color: #FFF;font-size: 16px;font-weight: 500;border: none;outline: none;}
.login-wrap .form-list li .login-input input:focus {background: #131F35;}
.login-wrap .form-list li .login-input input::placeholder {color: #6D88BE;font-weight: 400;}
.login-wrap .login-btn {width: 100%; height: 66px;border-radius: 8px;background: #073783;color: #FFF;font-size: 16px;font-weight: 700;line-height: 100%;border: none;outline: none;}
.login-wrap .login-btn:hover {background: linear-gradient(93deg, #492CB6 6.66%, #002E78 71.59%);}
.login-modal {max-width: 374px;margin: auto;padding: 60px 0;}
.login-modal h6 {color: var(--navy, #02176A);text-align: center;font-size: 32px;;font-weight: 500;line-height: 180%;margin-bottom: 68px;}
.login-modal p {color: var(--navy_txt, #333F54);text-align: center;font-size: 16px;font-weight: 500;line-height: 180%;}
.login-modal .code-input input {width: 100%;border-radius: 6px;background: var(--gray_6, #F7F7F7);color: var(--gray_0, #333);font-size: 20px;font-weight: 500;line-height: 180%;border: 1px solid transparent;padding: 14px 19px 13px;}
.login-modal .code-input input:focus {border-radius: 6px;border: 1px solid var(--gray_3, #BEBEBE);background: var(--white, #FFF);outline: none;}
.login-modal .code-input input::placeholder {color: var(--gray_3, #BEBEBE);font-weight: 400;line-height: 180%;}
.login-modal .code-timer {height: 28px;color: #DD263B;text-align: right;font-size: 14px;font-weight: 400;line-height: 180%;padding-top: 3px;}
.login-modal .login-btn {width: 100%; height: 66px;border-radius: 8px;background: #073783;color: #FFF;font-size: 16px;font-weight: 700;line-height: 100%;border: none;outline: none;}
.login-modal .login-btn:hover {background: linear-gradient(93deg, #492CB6 6.66%, #002E78 71.59%);}

/* table-accent */
table th.accent-gray, table td.accent-gray {background-color: rgba(231, 231, 231, 0.4);}
table th.accent-blue, table td.accent-blue {background-color: rgba(4, 88, 249, 0.08);}
table th.accent-orange, table td.accent-orange {background-color: rgba(255, 133, 21, 0.10);}

/* Side Menu ======================================== */
.mo-menu-btn {display: block;color: #FFF;font-size: 20px;}
.sidenav {display: none; height: 100%;width: auto;position: fixed;z-index: 100;top: 0;right: 0;overflow-x: hidden;transition: 0.5s;}
.side-inner-wrap {position:relative;width: 100vw;max-width:330px;height: 100%;z-index: 10;background: #FFF;}
	.sidenav .menu-items {height:100vh; width:70px; position:absolute;top:0; left:0; bottom:0; overflow-x:hidden; }
    .sidenav .menu-items ul {height:calc(100vh - 70px); overflow: auto;}
	.sidenav .menu-items li {z-index:1; position: relative;}
    .sidenav .menu-items li.flag:after {content:''; display:block; position: absolute; right:20px; top:15px; width:0.6rem; height:0.6rem; border-radius:10rem; background:#ff2165;}
    .sidenav .menu-items li.icon-selected-menu:after {background:#ffe400;}
	.sidenav .menu-items li.icon-selected-menu:before {z-index:-1; position: absolute; top:-20px; right:-17px; font-size:100px; color:transparent;}
    .sidenav .menu-items li.icon-selected-menu i {background:#276EF1; padding:10px; border-radius:4px; color:#fff;}
	.sidenav .menu-items li a, .sidenav .menu-setting, .sidenav .menu-logout {padding:17px 0; text-align:center; text-decoration: none;display: block;transition: 0.3s; line-height:1.4;}
    .sidenav .menu-setting, .sidenav .menu-logout {position: absolute; bottom:0; width:100%; color:#000;}
	.sidenav .menu-items li a i, .sidenav .menu-setting i, .sidenav .menu-logout i {font-size:2.2rem;}
	.sidenav .menu-items li a p {font-size:1.2rem;}

	.sidenav .menu-panels {height:100vh;width: 100%;padding-bottom:70px;position:absolute;top:0;left:0;bottom:0;overflow-x:hidden;display: flex;flex-direction: column;}

.menu-panel>.m-node {padding-left: 20px;}
    .m-node {padding-left:2.4rem;}
    .m-node .m-top {display:flex;align-items:center;padding-left:100%;margin-left:-100%;padding-right:100%;margin-right:-100%;height: 45px;}
    .m-node .m-top .menu-icon {display:flex; align-items: center; margin-left:0.5rem; font-size:1.8rem;}
    .m-node .m-top .menu-img {display: inline-block; width: 28px; height: 28px; flex-shrink: 0; overflow: hidden; border-radius: 50%;}
    .m-node .m-top .menu-img img{width: 100%; height: auto; position: relative;}
    .m-node .m-top .menu-name {display:block;width: 100%;color: var(--gray_0, #333);font-size: 18px;margin-left:10px;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .m-node .m-top .menu-count, .m-node .m-top .menu-icon-arrow {display:flex; justify-content: flex-end; flex:1; padding-right:2rem}
.m-node .m-top label.checkbox .label {margin-left:20px;}
.sidenav .m-top .menu-count {font-weight:600;}
.last-dept .m-node{padding-left: 0;}

	.sidenav .side-user {padding:1.4rem 2rem 0.8rem 2rem;flex-shrink: 0;}
	.sidenav .side-user .side-user-name {font-size: 20px;}
	.sidenav .side-user .side-user-mail {font-weight:100; font-size:1.2rem; letter-spacing: 0.8px;}
	.sidenav .menu-divide {width:100%; height:1px; background:#eaecf0; margin:10px 0;flex-shrink: 0;}
  .sidenav .menu-panel {flex: auto;display: block;overflow-x: hidden;overflow-y: auto;}

	#MoSideMask { position: fixed; top: 0;left: 0;width: 100%;height: 100vh; background-color: rgba(37,47,74,0.8);z-index: 1;}
    .mo-logout-btn {display: none;color: var(--navy_sub, #7082A3);font-size: 14px;font-weight: 500;line-height: 100%;position: absolute;bottom: 30px;left: 20px;}
    .mo-logout-btn > i {margin-right: 8px;}

/* 모바일 */
@media (max-width: 767px) {
  .mo-logout-btn {display: block;}
  .mo-menu-btn {display: block;}
  .header-container {height: 60px;padding: 0 20px;}
  .header-container .logo a {width: 120px;}
  .header-util {gap: 10px;}
  .header-util .user .user-btn {font-size: 12px;}
  .header-util .lang .lang-btn {font-size: 12px;}

  /***** Login ******************************************************************************************************/
  .login-wrap .login-logo {margin-bottom: 20px;}
  .login-container {padding: 0 25px;}
  .login-wrap .login-header {padding: 40px 0 20px;}
  .login-wrap .login-header h2 {font-size: 20px;font-weight: 700;word-break: keep-all;}
  .login-wrap .login-header p {font-size: 15px;margin-top: 12px;}
  .login-wrap .form-login {padding: 20px 0 26px;}
  .login-wrap .form-login .info {font-size: 13px;word-break: keep-all;}
  .login-wrap .form-login .info > br {display: none;}
  .login-wrap .tab-options {gap: 30px;padding-top: 20px;}
  .login-wrap .form-list {padding: 0;}
  .login-wrap .form-list .radio label {font-size: 13px;margin-left: 3px;}
  .login-wrap .form-list li .login-input input {height: 50px;font-size: 15px;padding: 0 25px;}
  .login-wrap .login-btn {height: 50px;font-size: 15px;}
  .login-modal {padding: 10px 0 0;}
  .login-modal h6 {font-size: 24px;margin-bottom: 26px;}
  .login-modal p {font-size: 15px;word-break: keep-all;}
  .login-modal p > br {display: none;}
  .login-modal .code-input input {height: 50px;font-size: 15px;}
  .login-modal .code-timer {height: 20px;line-height: 1.2;font-size: 13px;}
  .login-modal .login-btn {height: 50px;font-size: 15px;}
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1024px) {
  .mo-logout-btn {display: block;}
  .mo-menu-btn {display: block;}
  .header-container {height: 60px;padding: 0 20px;}
  .header-container .logo a {width: 140px;}
}

/* 데스크탑 */
@media (min-width: 1024px) and (max-width: 1440px) {
  .header-container {padding: 0 20px;}
  .header-util {gap: 20px;}
}