@charset "UTF-8";
@font-face {
  font-family:'Pretendard';
  font-weight:900;
  font-display:swap;
  src:local('Pretendard Black'), url('/kosmo/font/woff2/Pretendard-Black.woff2') format('woff2'), url('/kosmo/font/woff/Pretendard-Black.woff') format('woff');
}

@font-face {
  font-family:'Pretendard';
  font-weight:800;
  font-display:swap;
  src:local('Pretendard ExtraBold'), url('/kosmo/font/woff2/Pretendard-ExtraBold.woff2') format('woff2'), url('/kosmo/font/woff/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
  font-family:'Pretendard';
  font-weight:700;
  font-display:swap;
  src:local('Pretendard Bold'), url('/kosmo/font/woff2/Pretendard-Bold.woff2') format('woff2'), url('/kosmo/font/woff/Pretendard-Bold.woff') format('woff');
}

@font-face {
  font-family:'Pretendard';
  font-weight:600;
  font-display:swap;
  src:local('Pretendard SemiBold'), url('/kosmo/font/woff2/Pretendard-SemiBold.woff2') format('woff2'), url('/kosmo/font/woff/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
  font-family:'Pretendard';
  font-weight:500;
  font-display:swap;
  src:local('Pretendard Medium'), url('/kosmo/font/woff2/Pretendard-Medium.woff2') format('woff2'), url('/kosmo/font/woff/Pretendard-Medium.woff') format('woff');
}

@font-face {
  font-family:'Pretendard';
  font-weight:400;
  font-display:swap;
  src:local('Pretendard Regular'), url('/kosmo/font/woff2/Pretendard-Regular.woff2') format('woff2'), url('/kosmo/font/woff/Pretendard-Regular.woff') format('woff');
}

@font-face {
  font-family:'Pretendard';
  font-weight:300;
  font-display:swap;
  src:local('Pretendard Light'), url('/kosmo/font/woff2/Pretendard-Light.woff2') format('woff2'), url('/kosmo/font/woff/Pretendard-Light.woff') format('woff');
}

@font-face {
  font-family:'Pretendard';
  font-weight:200;
  font-display:swap;
  src:local('Pretendard ExtraLight'), url('/kosmo/font/woff2/Pretendard-ExtraLight.woff2') format('woff2'), url('/kosmo/font/woff/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
  font-family:'Pretendard';
  font-weight:100;
  font-display:swap;
  src:local('Pretendard Thin'), url('/kosmo/font/woff2/Pretendard-Thin.woff2') format('woff2'), url('/kosmo/font/woff/Pretendard-Thin.woff') format('woff');
}

::-webkit-scrollbar {width:10px; height:10px}
::-webkit-scrollbar-thumb {background-color:#2f3542; border-radius:10px}
::-webkit-scrollbar-track {border-radius:10px}

@media screen and (max-width:940px) {
  * {-ms-overflow-style:none;  /* IE and Edge */  scrollbar-width:none;  /* Firefox */}
  *::-webkit-scrollbar {display:none; /* Chrome, Safari, Opera*/}
}
html {width:100%; height:100%; scroll-behavior:smooth; overflow:hidden}
body {width:100%; height:100%; display:flex; font-size:1rem; font-family:'Pretendard', 'malgun-gothic', sans-serif; background:#eaebec;  font-weight:400}

* {-webkit-font-smoothing:antialiased; box-sizing:border-box; /* 오페라(Opera) */ -moz-box-sizing:border-box; /* 파이어폭스(Firefox)*/ -webkit-box-sizing:border-box; /* 웹킷(Webkit) & 크롬(Chrome) */padding:0; margin:0; line-height:1; outline:none}
*::after, *::before {
  box-sizing:border-box; /* 오페라(Opera) */
  -moz-box-sizing:border-box; /* 파이어폭스(Firefox)*/
  -webkit-box-sizing:border-box; /* 웹킷(Webkit) & 크롬(Chrome) */
  padding:0; margin:0; line-height:1; outline:none
}

@media (hover:hover) {}/* 모바일에서 hover 제거 */

ul {list-style:none; margin:0; padding:0}
label {letter-spacing:0.5px; display:inline-flex; align-items:center; font-size:1rem}
label > input {margin-right:4px}
label > input[type='text'] {margin-left:4px}
table {border-collapse:collapse}
table td {word-break:keep-all}
table.scrollTable {border-collapse:separate !important; border-spacing:0px}
table.scrollTable td {border-top:0 !important; border-left:0 !important}
table.scrollTable thead tr:first-child td:first-child {border-left:1px solid #c8c4bf !important}
table.scrollTable thead tr:first-child td {border-top:1px solid #c8c4bf !important}
table.scrollTable tbody td:first-child {border-left:1px solid #c8c4bf !important}
/* table.scrollTable tbody tr:last-child td {border-bottom:0 !important} */


table.scrollTable tfoot tr:first-child td {border-top:1px solid #c8c4bf !important}
table.scrollTable tfoot tr:first-child td:first-child {border-left:1px solid #c8c4bf !important}


input[type='radio'] {width:20px; height:20px; outline:none; vertical-align:text-bottom; flex:0 0 20px}
input[type='checkbox'] {width:20px; height:20px; outline:none; vertical-align:text-bottom; flex:0 0 20px}

input[type='text'],
input[type='number'], 
input[type='password'],
select,
div[contenteditable] {width:100%; height:100%; border:1px solid #aaa; background-color:#fff; border-radius:3px; outline:none; font-family:'Pretendard', 'malgun-gothic', sans-serif; 
  font-size:1rem; font-weight:400; max-height:400px; padding:8px 4px; overflow:auto}
div[contenteditable] {min-height:34px}
input[readonly], input[disabled], select[disabled] {background-color:#f4f4f4; color:#000; border:none !important}
input[type='text'], input[type='number'], input[type='password'] {width:100%; height:inherit}

:-ms-input-placeholder {letter-spacing:-0.5px; font-size:0.875rem !important; font-weight:400; color:#999}
input::placeholder {letter-spacing:-0.5px; font-size:0.875rem !important; font-weight:400; color:#999}
[placeholder]:empty:before {display:block; content:attr(placeholder); letter-spacing:-0.5px; font-size:0.875rem !important; font-weight:400; color:#999}
input.amount {text-align:right; font-weight:inherit}
form {flex:1; display:flex; overflow:auto; flex-direction:column}

.br {border:1px solid red !important}
.bb {border:1px solid blue !important}
.bo {border:1px solid orange !important}
.by {border:1px solid yellow !important}
.br4 {border:4px solid red !important}
.bb4 {border:4px solid blue !important}
.bg4 {border:4px solid green !important}
.bo4 {border:4px solid orange !important}
.by4 {border:4px solid yellow !important}

[onclick]:hover  {cursor:pointer !important}
button {cursor:pointer !important; font-weight:500; font-family:'Pretendard', 'malgun-gothic', sans-serif}
a {cursor:pointer; color:#065acb; text-decoration:none}
a:visited {color:#065acb}
a.btn:hover {position:relative; top:-1px; box-shadow:0 2px 3px rgba(0, 0, 0, 0.3)}
a.btn:active {position:relative; top:1px; color:#047dcf;  box-shadow:none}
a:focus {outline:none}
.blink {animation-name:s1; animation-duration:1.5s; animation-delay:0s; animation-fill-mode:both; animation-timing-function:ease; animation-iteration-count:infinite;}

.btn {outline:none; border-radius:0.25rem; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden; text-decoration:none; cursor:pointer; font-family:'Pretendard'; position:relative }
.btn:hover {position:relative; top:-1px; box-shadow:0 2px 3px rgba(0, 0, 0, 0.3)}
.btn:active {position:relative; top:1px; box-shadow:unset}
.btn-xxs {height:16px; padding:0 4px; font-size:0.75rem; letter-spacing:-1px}
.btn-xs {height:22px; padding:0 4px; font-size:0.875rem; letter-spacing:-0.5px}
.btn-sm {height:28px; padding:0 8px; font-size:0.875rem; letter-spacing:-0.5px; margin:auto 0}
.btn-md {height:38px; padding:0 14px; font-size:1rem; font-weight:500}
.btn-lg {height:42px; padding:0 20px; font-size:1rem; font-weight:500}
.btn-xxs:hover {position:relative; top:0 !important}

.btn-white {background-color:#fff; color:#000; border:1px solid #adadad}
.btn-red {background-color:#e30b0b; color:#000 !important; border:1px solid #e30b0b}
.btn-red-border {background-color:#fff; color:#ee9607  !important; border:1px solid #e30b0b }
.btn-yellow {background-color:#e8b224; color:#000 !important; border:1px solid #e8b224}
.btn-yellow-border {background-color:#fff; color:#ee9607  !important; border:1px solid #ee9607 }
.btn-blue {background-color:#2a539b; color:#fff !important; border:1px solid #1f4484}
.btn-blue-border {background-color:#fff; color:#193870 !important; border:1px solid #193870; font-weight:500}
.btn-silver {background-color:#f9f9f9; color:#000 !important; border:1px solid #adadad}

.btn-del {font-size:16px; font-weight:700; cursor:pointer}
.btn-del::before {content:'\f057'; font-family:'fa'; font-weight:500; color:#c52424}
.btn-add {font-size:1.5rem; width:30px; height:30px; border:0; display:flex; align-items:center; justify-content:center; background-color:unset}
.btn-add::after {content:'\f067'; font-family:'fa'; font-weight:300}
.btn-add-lg {width:40px; height:40px; display:flex; padding:0 !important; align-items:center; justify-content:center; text-decoration:none; cursor:pointer}
.btn-add-lg::before {content:'\f067'; font-family:'fa'; font-size:20px; font-weight:500}
.btn-add-md {width:34px; height:34px; display:flex; padding:0 !important; align-items:center; justify-content:center; text-decoration:none; cursor:pointer}
.btn-add-md::before {content:'\f067'; font-family:'fa'; font-size:20px; font-weight:500}
.btn-add-sm {width:22px; height:22px; display:inline-flex; padding:0 !important; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; border-radius:4px}
.btn-add-sm::before {content:'\f067'; font-family:'fa'; font-size:14px; font-weight:500}
.btn-minus-md {width:34px; height:34px; display:flex; padding:0 !important; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; border-radius:4px; color:#c00202; border:1px solid #c00202}
.btn-minus-md::before {content:'\f068'; font-family:'fa'; font-size:20px; font-weight:500}
.btn-minus-sm {width:22px; height:22px; display:inline-flex; padding:0 !important; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; border-radius:4px; color:#c00202; border:1px solid #c00202; background-color:#fff}
.btn-minus-sm::before {content:'\f068'; font-family:'fa'; font-size:14px; font-weight:500}
.btn-edit {width:22px; height:22px; display:inline-flex; padding:0 !important; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; border-radius:4px; color: #193870; border: 1px solid #193870}
.btn-edit::before {content:'\f304'; font-family:'fa'; font-size:14px; font-weight:700}
.btn-save {width:22px; height:22px; display:inline-flex; padding:0 !important; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; border-radius:4px; color: #193870; border: 1px solid #193870}
.btn-save::before {content:'\f0c7'; font-family:'fa'; font-size:14px; font-weight:700}
.btn-more {width:30%; min-width:120px; padding:8px; font-size:0.875rem; margin:0.25rem auto; background-color:#f1f1f1; color:#333; border-radius:0.25rem; border:none}

.btn-srch {width:70px}
.btn-reset {font-size:1.25rem}
.btn-reset::after {content:'\f2f1'; font-family:'fa'; font-weight:500}
.btn-download {font-size:1.25rem}
.btn-download::before {content:'\f56d'; font-family:'fa'; font-weight:600}
.titDiv .btn-srch {font-size:1.25rem; width:30px; height:30px; border:0; display:flex; align-items:center; justify-content:center; background-color:unset}
.titDiv .btn-srch::after {content:'\f002'; font-family:'fa'; font-weight:500}
.titDiv .btn-reset {font-size:1.25rem; width:30px; height:30px; border:0; display:flex; align-items:center; justify-content:center; background-color:unset}
.titDiv .btn-download {font-size:1.25rem; width:30px; height:30px; border:0; display:flex; align-items:center; justify-content:center; background-color:unset}

/* The switch - the box around the slider */
.switch {position:relative; display:block; width:87px; height:24px; font-size:14px}
.switch input {opacity:0; width:0; height:0}
.switch .slider {width:100%; height:100%; display:flex; align-items:center; padding:0 4px; position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; -webkit-transition:.4s; transition:.4s; font-weight:600; overflow:hidden}
.switch .slider:before {content:""; height:20px; width:20px; border-radius:50%; position:absolute; left:2px; bottom:2px; color:#fff; background-color:white; -webkit-transition:.4s; transition:.4s; box-shadow:0 5px 4px rgb(0 0 0 / 26%)}
.switch input:checked + .slider {background-color:#ccc}
.switch input:checked + .slider:before {-webkit-transform:translateX(63px); -ms-transform:translateX(63px); transform:translateX(63px)}
.switch input + .slider {justify-content:end}
.switch input + .slider > span {display:none}
.switch input + .slider .chkN {display:flex; align-items:center; white-space:nowrap}
.switch input:checked + .slider {justify-content:start; text-indent:20px}
.switch input:checked + .slider .chkY {display:flex}
.switch input:checked + .slider .chkN {display:none}
.switch .slider.round {border-radius:14px}

.display-flex {display:flex !important; display:-ms-flexbox}
.display-inline-flex {display:inline-flex !important; display:-ms-inline-flexbox}
.display-block {display:block !important}
.display-inline-block {display:inline-block !important}
.display-none {display:none !important}
.visibility-hidden {visibility:hidden !important}
.visibility-shsow {visibility:show !important}

.ellipsis {white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important}
.mandatoryInput {position:relative}
.mandatoryInput::after {content:''; display:inline-block; width:4px; height:4px; border-radius:2px; background-color:red; position:absolute; right:-6px; top:20%}
.sort {cursor:pointer}
.sort::after { content: '\f0dc'; font-family: 'fa'; font-weight: 700; margin-left: 8px}
.sort:hover::after {color:#c42e2e}
.input-delete {position:relative; display:flex; align-items:center}
.input-delete > input[type='text'] {padding-right:24px}
.input-delete .xBtn {position:absolute; display:block; top:8px; right:2px; width:18px; height:18px; cursor:pointer}
.input-delete .xBtn:after {content:'\f00d'; font-family:'fa'; font-weight:300;  color:#aeaeae; font-size:18px; position:absolute; top:0; left:0}
.inputTip {display:inline-flex; align-items:center; font-size:0.875rem; color:#7f94a9; font-weight:400}
.disabled {background-color:#f1f1f1; color:#636466}
.selectDiv {position:relative; height:100%; flex:1; border:1px solid #aaa; border-radius:3px; background-color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.selectDiv label {position:absolute; width:100%; height:100%; top:0; left:0; padding-left:6px; display:flex; align-items:center}
.selectDiv label::after {content:'\f107'; font-family:'fa'; font-weight:700; width:40px; height:100%; position:absolute; top:0; right:-8px; font-size:14px; color:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center;}
.selectDiv select {width:100%; height:100%; opacity:0; font-size:14px; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0)/* IE 8 */}
/* .selectDiv-sx {height:22px; font-size:0.75rem}
.selectDiv-sm {height:28px; font-size:0.875rem}
.selectDiv-md {height:34px; font-size:1rem}
.selectDiv-lg {height:40px; font-size:1rem} */
.flex-row-box {display:flex; flex-direction:row !important; gap:1rem}
.flex-column-box {display:flex; flex-direction:column !important; gap:1rem}
.flex-direction-column {flex-direction:column !important}
.flex-direction-row {flex-direction:row !important}
.flex-flow-row {flex-flow:row wrap !important}
.flex-flow-column {flex-flow:column wrap !important}
.flex-flow-unset {flex-flow:unset !important}
.overflow-hidden {overflow:hidden !important}
.overflow-auto {overflow:auto !important}
.overflow-auto-y {overflow-y:auto !important; overflow-x:hidden}
.overflow-scroll {overflow-x:hidden !important; overflow-y:scroll !important}
.justify-content-center {justify-content:center !important; -ms-flex-pack:center}
.justify-content-start {justify-content:flex-start !important; -ms-flex-pack:start}
.justify-content-end {justify-content:flex-end !important; -ms-flex-pack:end}
.justify-content-space-between {justify-content:space-between !important; -ms-flex-pack:justify;}
.justify-content-space-around {justify-content:space-around !important}
.align-items-center {align-items:center !important}
.align-items-start {align-items:flex-start !important}
.align-items-end {align-items:flex-end !important}
.vertical-align-top {vertical-align:top !important}
.vertical-align-middle {vertical-align:middle !important}

.text-align-right {text-align:right !important}
.text-align-center {text-align:center !important}
.text-align-left {text-align:left !important}
.float-left {float:left}
.float-right {float:right}
.position-relative {position:relative}
.position-fixed {position:fixed}

.width100p {width:100% !important}
.width75p {width:75% !important}
.width50p {width:50% !important}
.width33p {width:33.33% !important}
.width25p {width:25% !important}
.width20p {width:20% !important}
.width20 {width:20px !important}.width25 {width:25px !important}.width30 {width:30px !important}.width35 {width:35px !important}.width40 {width:40px !important}.width45 {width:45px !important}.width50 {width:50px !important}.width55 {width:55px !important}.width60 {width:60px !important}.width65 {width:65px !important}.width70 {width:70px !important}.width75 {width:75px !important}.width80 {width:80px !important}.width85 {width:85px !important}.width90 {width:90px !important}
.width100 {width:100px !important}.width110 {width:110px !important}.width120 {width:120px !important}.width130 {width:130px !important}.width140 {width:140px !important}.width150 {width:150px !important}.width160 {width:160px !important}.width170 {width:170px !important}.width180 {width:180px !important}.width190 {width:190px !important}
.width200 {width:200px !important}
.width250 {width:250px !important}
.width300 {width:300px !important}
.width400 {width:400px !important}
.width500 {width:500px !important}

.flex1 {flex:1 !important}
.flex15 {flex:1.5 !important}
.flex2 {flex:2 !important}
.flex25 {flex:2.5 !important}
.flex3 {flex:3 !important}
.flex35 {flex:3.5 !important}
.flex4 {flex:4 !important}
.flex45 {flex:4.5 !important}
.flex5 {flex:5 !important}
.padding0 {padding:0 !important}
.paddingT6 {padding-top:6px !important}
.gap1 {gap:1rem !important} .gap15 {gap:1.5rem !important} .gap2 {gap:2rem !important} .gap25 {gap:2.5rem !important} .gap3 {gap:3rem !important}
.marginT10 {margin-top:10px}
.marginT20 {margin-top:20px}
.marginT30 {margin-top:30px}
.margin-left-auto {margin-left:auto}
.smaller {font-size:smaller}
.larger {font-size:larger}


.macInput {display: inline-flex; align-items: center; border: 1px solid #aaa; border-radius: 3px; background-color: #fff; padding:0 2px !important; position:relative; overflow:hidden}
.macInput input[type='text'] {font-size: 14px; padding: 0 !important; border: none !important; width: 26px !important; height: 100% !important; text-align: center !important}
.macInput .dash::before {content: '-'; font-weight: bold; font-size: 16px}
.macInput.disabled::after {content:''; position:absolute;top:0; left:0; width:100%; height:100%; background-color:#00000010} 
.ipInput {display: inline-flex; align-items: center; border: 1px solid #aaa; border-radius: 3px; background-color: #fff; position:relative}
.ipInput input[type='text'] {font-size: 14px; padding: 0 !important; border: none !important; width:28px !important; height: 100% !important; text-align: center !important}
.ipInput .point::before {content: '.'; font-weight: bold; font-size: 16px}
.ipInput.disabled::after {content:''; position:absolute;top:0; left:0; width:100%; height:100%; background-color:#00000010} 
.macInput.disabled input[disabled],
.ipInput.disabled input[disabled] {background-color:unset}



.input-md {height: 34px; min-height: 34px; font-size: 1rem; padding: 0 4px}