@charset "utf-8";

/************** SCROLLBAR chrome ***********/
::-webkit-scrollbar {width:8px; height:8px}
::-webkit-scrollbar-track {background:none; -webkit-border-radius:10px; border-radius:10px}
::-webkit-scrollbar-thumb {height:50px; width:50px; background:#c8cfd7; -webkit-border-radius:8px; border-radius:8px; -webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.1)}

/********************* BODY ***********************/
.bodyDiv{overflow-x: auto !important;}
/* @media screen and (max-width: 940px) {
  body{flex-direction: column;}
  .bodyDiv{background-color: transparent !important;}
} */
/******************************** LOGIN ************************************/

body.index {position:relative; display:flex; justify-content:center; align-items:center; padding:0 !important;
  background-image: url('../img/bg_illur.png'); background-repeat: no-repeat; background-position:50% 100%; background-size: 100%}

body.index .sys_tit {font-weight:bold; text-align:center; color:#906b47;margin:0 0 40px;width: 100%;}
body.index .sys_tit > .ci {margin-bottom: 15px; font-size: 18px;}
body.index .sys_tit > .ci img {width: 250px; height:auto; margin-bottom: 15px;}
body.index .sys_tit > .ciTit {font-size:26px; text-align:center; white-space:nowrap}
body.index .loginBox {display:flex; flex-direction:column; align-items:center; gap:1rem; animation-name:s1; animation-duration:1s; animation-delay:0s; animation-fill-mode:both; animation-timing-function:ease}

body.index .loginBox .inputDiv {width:100%; height:40px; display:flex; flex-direction:row; background-color:#fff; border-radius:3px; align-items:center; border:1px solid #dcdcdc}
body.index .loginBox .inputDiv label {margin:0 6px 0 10px; flex:0 0 85px; font-size:0.875rem; letter-spacing:0; border-right:1px solid #aaa; text-align:left; display:block}
body.index .loginBox .inputDiv input {border:none !important; width:100%; height:38px; font-size:1rem}
body.index .loginBox .btnLogin {max-width:unset; width:100%; margin-top:8px; background-color: #906b47; border-color: #906b47;}
body.index .loginBox .loginFuction {text-align:center; margin:20px 0; color:#000}
body.index .copyright {width:100%; font-size:12px; display:flex; align-items:end; justify-content:center}
body.index .copyright img {width:30px; height:auto; margin:0 10px}

body.index .loginContainer {display:flex; flex-direction:column; align-items:center; width: 260px; height: 600px;}
body.index .loginContainer form {width: 100%;}
body.index .loginContainer .explain{width: 100%;font-size: 14px;text-shadow: none;background-color: #f8eebe;padding: 1rem 0;line-height: 1.4;color: #555;font-weight: 500;}

.loginBox #temp, .loginFuction #lostPassword{color: #906b47;}
@keyframes s1 {
  from	{opacity:0.2}
  to  	{opacity:1}
}

/* @media screen and (max-width: 940px) {
  body.index {background-position: 25% 100%; background-size:200%}   
  body.index > .loginContainer {width: unset; height: unset;}
  body.index .sys_tit > .ciTit.explain {font-size: 14px;}
  body.index .loginBox .loginFuction{margin: 20px 0;}
} */
/* @media screen and (max-width: 640px) {
  body.index {background-position: 20% 100%; background-size: 300%}  
} */

/************************* 화면공통 **********************/
.wrapper {flex:1 1 auto; padding:30px 20px 20px 50px; display:flex; flex-direction:column; overflow:hidden;margin-left: 80px;}
.titDiv {display:flex; width:1470px; align-items:start; margin-bottom:16px; flex-flow:row wrap}
.titDiv .backBtnDiv {flex:0 0 100%; display:flex; align-items:center; }
.titDiv .backBtnDiv .arrowBack {font-size:28px; height:30px; width:30px}
.titDiv .backBtnDiv .arrowBack::before {content:"\f177"; font-family:"fa"; font-weight:300}
.titDiv .pageTit {display:inline-flex; align-items:center;  font-size:20px; font-weight:700; height:30px; margin-right:20px}
.titDiv .pageTit .subTit {font-weight:600}
.titDiv .pageTit .subTit::before {content:'\f054'; font-family:'fa'; font-weight:500; margin:0 0.5rem}
.titDiv .pageTit span+span {margin-left:6px}
.titDiv .comment {padding:6px 8px 5px 28px; background-color:#c9ced2; color:#000; border-radius:15px; font-size:0.895rem; line-height:1.2; font-weight:normal; word-break:break-all; position:relative}
.titDiv .comment::before {content:'\f05a'; font-family:'fa'; font-weight:700; margin-right:6px; color:#234c79; position:absolute; top:7px; left:7px}
.titDiv button {margin-left:4px; color:#034364; display:none !important}
.titDiv .btn-srch {margin-left:auto}
.titDiv .help {width:24px; height:24px; margin-left:-8px;; border-radius:15px; font-size:1em; cursor:pointer}
.titDiv .help::before {content:'\f128'; font-family:'fa'; font-weight:700; color:#234c79; background-color:#f1c13b; width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%}
.titDiv .viewOptionBtn {height:30px}

.bodyDiv {flex:1; overflow-x:hidden; overflow-y:auto; position:relative; background-color:#fff}
.contentDiv {display:flex; width:100%; }
.pageBtnDiv {display:flex; flex-direction:row; align-items:center; justify-content:flex-start; padding:1rem 0; gap:10px; flex-flow:wrap}
.pageBtnDiv .btn {min-width:100px}
.pageBtnDiv .btn-yellow {margin-left:5%}

.tabDiv {display:flex; font-size:0.875rem; border-bottom:1px solid #3972a6; gap:0.25rem}
.tabDiv .bTab {display:flex; align-items:flex-end; gap:4px; padding-right:1rem; flex-flow:row wrap}
.tabDiv .subTab {min-width:120px; height:36px; border-top-left-radius:6px; border-top-right-radius:6px; font-weight:600; background-color:#dedfe0; color:#484848; padding:0 10px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; white-space:nowrap}
.tabDiv .subTab.focus {background-color:#193870; color:#fff}
.tabDiv .subTab .sum {background-color:#c0ccd9; color:#193870; border-radius:20px; margin-left:4px; padding:2px 4px; font-weight:500; font-size:0.875rem}
.tabDiv .subTab .new {background-color:#c20316; color:#ffffff; border-radius:20px; margin-left:4px; padding:2px 4px; font-weight:500; font-size:0.875rem}

.input-delete input:disabled ~ span {display: none;}
.input-delete span {position: absolute;display: block;right: 8px;width: 15px;height: 15px;border-radius: 50%;color: #eef1f4;background-color: #b0b7c5;text-align: center;line-height: 16px;cursor: pointer;font-weight: 700;font-size: 1px; top: 50%;transform: translateY(-50%);}
.input-delete span:after {content: '';position: absolute;display: block;width: 15px;height: 15px;transform: scale(64%);top: 0;left: 0;background-size: 60%;background-position: center center;background-repeat: no-repeat;
  background-image: url(../img/x-mark-w.svg);}

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;}
input[type=number] {-moz-appearance: textfield;}


/* @media screen and (max-width:940px) {
  .wrapper {padding:16px 10px 0px;margin-left: 0;}
  .titDiv {width:unset}
  .titDiv .backBtnDiv {flex:unset; margin-right:14px}
  .titDiv .pageTit {font-size:18px; color:#213a63; margin-right:auto}
  .titDiv .pageTit .selectDiv {width:94px; margin-right:6px; font-size:18px}
  .titDiv .comment {flex:0 0 100%; margin-top:14px; order:3}
  .titDiv .viewOptionBtn {margin-left:auto}
  .titDiv button {display:flex !important}
  .tabDiv {border:unset}
  .tabDiv .subTab {min-width:unset; flex:1; border-top-left-radius:6px; border-top-right-radius:6px;}
  .tabDiv {flex-direction:column; justify-content:unset}
  .tabDiv .bTab {padding:unset}
  .pageBtnDiv  button[title="추가"] {display:none}
} */
@media screen and (min-width:941px) {
  .bodyDiv {overflow-x:hidden; overflow-y:auto; }
}

.divLine {width: 1px;height: 100%;border-left: 1px dotted #999;}

body .articleTit {display:flex; flex-direction:column; gap:0.5rem; width:400px; height:auto}
body .articleTit .tit {display:flex; align-items:center; font-weight:700; height: 34px;}
body .articleTit .tit .mainTit{white-space: nowrap;}
body .articleTit .tit .btn {background-color:#193870; color:#fff; border:1px solid #193870; height:23px; padding:0 1rem; border-radius:2rem; margin-left:1rem}
body .articleTit .ment {font-size:0.925rem; font-weight:400; color:#7f94a9}
body .articleTit .subTit::before {content: '\f054';font-family: 'fa';font-weight: 500;margin: 0 0.5rem;}


/******************************** GNB ************************************/
#gnb {z-index:10;position: fixed; height: 100%;}
#gnbScreen {width:100%; height:calc( 100% - 46px ); position:absolute; top:46px; left:0; background-color:rgba(0,0,0,0.4); z-index:10; display:none}
.gnbWrapPC {display:flex; flex-direction:column; align-items:center; z-index:100; background-color:#906b47; height:100%}
.gnbWrapPC .gnbInfo {width:80px; text-align:center; color:#fff; position:relative}
.gnbWrapPC .pushAlarmTot {position:absolute; top:5px; left:75px}
.gnbWrapPC .pushAlarmTot i {color:#24435d; font-size:26px; display:none}
.gnbWrapPC .pushAlarmTot span {background-color:red; border-radius:30px; color:#fff; font-size:12px; font-weight:700; padding:4px; position:absolute; top:0; right:-100%; min-width:20px; text-align:center }
.gnbWrapPC .ci {width:100%; height:76px; display:flex; align-items:center; justify-content:center; background-color:#306098}
.gnbWrapPC .ci .ciPc {width:53px}
.gnbWrapPC .ci .ciMobile {display:none; width:33px}
.gnbWrapPC .ci span {display:none}
.gnbWrapPC .com {display:none; font-size:12px; font-weight:500; background-color:#e30000; color:#fff; margin-top:6px; padding:4px 0}
.gnbWrapPC .userName:hover {color:#fff}
.gnbWrapPC li {position: relative; display:flex; flex-direction:column; color:#8da6c2; align-items:center; justify-content:center; gap:6px}
.gnbWrapPC li i {font-size:1.5rem; transition:all 0.2s ease; position:relative}
.gnbWrapPC li .mainMenu{padding: 0; width: 100%; height:80px; display: flex;flex-direction: column; color: #e6e2dd;align-items: center;justify-content: center;gap: 6px;}
.gnbWrapPC li .mainMenu > span {font-size: 0.875rem;letter-spacing: -1px;font-weight: 400;text-align: center;}
.gnbWrapPC li:hover .mainMenu{color: #fff;}
.gnbWrapPC li.hasSubMenu{padding: 0;}
.gnbWrapPC li ul.subMenu{color: #fff; display: none; position: absolute; width: 160px; top:0; left: 100%; background-color: #24435d; font-size: unset !important;}
.gnbWrapPC li ul.subMenu li {width: 160px; white-space: nowrap;}
.gnbWrapPC li ul.subMenu li span a{color:#8da6c2;}
.gnbWrapPC li ul.subMenu li span a:hover{color:#fff;}
.gnbWrapPC ul.userLogout > div  {display:flex; align-items:center; justify-content:center; position:relative; width:56px; height:30px}
.gnbWrapPC ul.userLogout > div::before {content:'\f406'; font-family:'fa'; font-weight:700; font-size:20px; position:absolute; top:0; left:11px}
.gnbWrapPC ul.userLogout > div::after {content:'\f011'; font-family:'fa'; font-family:'fa'; font-weight:700; font-size:20px; position:absolute; bottom:0; right:10px}
.btn-screen {position:absolute; top:30px; right:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:rgba(0,0,0,0.5); z-index:5; display:none !important}
.btn-screen::before {font-size:26px; font-family:'fa'; font-weight:500}
.btn-screen.full::before {content:'\f31d'}
.btn-screen.win::before {content:'\f78c'}

/* @media screen and (max-width:640px) {
  .gnbWrapPC .ci .ciPc {display:none}
  .gnbWrapPC .ci .ciMobile {display:block}
} */


@media screen and (min-width:941px) {
  body.mm10 .mn10, 
  body.mm20 .mn20, 
  body.mm30 .mn30, 
  body.mm40 .mn40, 
  body.mm50 .mn50, 
  body.mm60 .mn60, 
  body.mm70 .mn70, 
  body.mm80 .mn80, 
  body.mm90 .mn90
  {background-color:#eaebec; color:#8b5c2e !important; font-size:2rem}
  .gnbWrapPC li:hover {color:#fff; font-size:larger; text-shadow: 0 3px 3px #00000055;}
  .shy-menu-panel {width:80px}
  .shy-menu-panel li:hover i {cursor:pointer; font-size:2rem}
}

@keyframes s2 {
  from 	  {opacity:0; right:-200px}
  to	{opacity:1; right:-14px}
}
/* @media screen and (max-width:940px) {
  #gnb {position: unset; height: unset;}
  .gnbWrapPC {flex-direction:row; align-items:center; padding:0 16px; z-index:10; width:100%; height:46px; background-color:#5589ae; background:linear-gradient(162deg, #5589ae 0%, #023a6f 100%)}
  .gnbWrapPC .gnbInfo {width:unset; height:auto; padding:0; background-color:unset; margin:unset;margin-right: auto;} 
  .gnbWrapPC .pushAlarmTot {position: relative; top: unset; left: unset; right: unset; margin: 0 20px 0 10px;}
  .gnbWrapPC .pushAlarmTot i {color:#fff; font-size:22px; display:block}
  .gnbWrapPC .pushAlarmTot span {right:unset; left:10px}
  .gnbWrapPC .ci {height:100%; font-size:22px; margin:0; white-space:nowrap; display:flex; align-items:center; justify-content:unset; background-color:transparent;}
  .gnbWrapPC .ci img {width:24% !important; height:auto; margin:unset}
  .gnbWrapPC .ci .ciSvg svg {height:21px; width:auto}
  .gnbWrapPC .ci span {font-size:13px; font-weight:600; margin-left:7px; display:inline-block}
  .gnbWrapPC .shy-menu {width:auto; height:40px; margin-left:0; text-align:right; display:flex; align-items:center;height: 100%; position: unset;}
  .gnbWrapPC .shy-menu .shy-menu-hamburger {display:inline-block; color:rgba(0,0,0,0.4)}
  .gnbWrapPC .shy-menu-panel {display:none; animation-name:s2; animation-duration:0.3s; animation-delay:0s; animation-fill-mode:both; animation-timing-function:ease}
  .gnbWrapPC .shy-menu-panel li i {text-align:center}
  .gnbWrapPC .shy-menu.is-open .shy-menu-panel{margin-right: 10px; z-index: 10;}
  .gnbWrapPC ul {width:250px; background-color:#fff; display:flex; flex-direction:column; border-radius:0; padding:0; box-shadow:-4px 4px 4px rgba(0,0,0,0.3)}
  .gnbWrapPC li {flex-direction:row; justify-content:start;  padding:16px 10px 16px 20px; border:1px solid #234c79; position:relative; color:#234c79}
  .gnbWrapPC li+li {border-top:0}
  .gnbWrapPC li:hover .mainMenu{color: #234c79;}
  .gnbWrapPC li i {width:40px; font-size:24px}
  .gnbWrapPC li > span {display:inline-block; font-size:16px; font-weight:bold}
  .gnbWrapPC li.userLogout > div  {width:40px}
  .gnbWrapPC li.userLogout > div::before {font-size:18px; top:0; left:5px}
  .gnbWrapPC li.userLogout > div::after {font-size:18px; bottom:0; right:5px}
  .shy-menu {width:100%}
  .shy-menu.is-open .shy-menu-panel {display:flex; margin-right:0; position:absolute; top:45px; right:-14px; color:#234c79}
  .gnbWrapPC li.mn6 {color:#000}
  .gnbWrapPC li.mn6 i {display:none}
  .btn-screen {display:none}

  .gnbWrapPC li.hasSubMenu .mainMenu:after{transition: all 0.3s; transform: rotate(90deg);}
  .gnbWrapPC li.hasSubMenu .mainMenu.down:after{transform: rotate(-90deg);}
  .gnbWrapPC li.hasSubMenu:hover .mainMenu span {font-size: 14px;}
  .gnbWrapPC li .mainMenu{width: 100%; flex-direction: row; color: #234c79;box-shadow: none;justify-content: start;padding: 16px 10px 16px 20px;}
  .gnbWrapPC li.singleMenu .mainMenu{padding: 0; height: auto;}
  .gnbWrapPC li.hasSubMenu .mainMenu:after {content: '\f105';font-family: 'fa';font-size: 18px;position: absolute;right: 15px;top: 20px;}
  .gnbWrapPC li .mainMenu > span{display: inline-block;font-size: 16px;font-weight: bold;}
  .gnbWrapPC .subMenu li:hover > span{font-size: 16px;}
  .gnbWrapPC .hasSubMenu{flex-direction: column; padding: 0;}
  .gnbWrapPC .hasSubMenu .subMenu{position: unset; width: 100%; box-shadow: none; background-color: transparent;z-index: 1 !important;}
  .gnbWrapPC .hasSubMenu .subMenu li {border: none; border-bottom: 1px solid #234c79;}
  .gnbWrapPC .hasSubMenu .subMenu li:last-child{border-bottom: none;}
  .gnbWrapPC .hasSubMenu .subMenu li span{font-weight: normal;}
  .gnbWrapPC li ul.subMenu li span a:hover{color:#8da6c2; font-size: 14px;}
  .gnbWrapPC .userName:hover{color:#234c79;}
} */
@media screen and (max-width:640px) {

}

/*** Hamburger ***/
.userNameOnlyAndroid {display:none}
.shy-menu-hamburger {width:30px; height:30px; display:block; position:relative; overflow:hidden; cursor:pointer; margin-left:auto; outline:none; display:none}
.shy-menu-hamburger > .layer {background-color:#fff; border-radius:1px; display:block; height:2px; overflow:hidden; position:absolute; left:5px; width:18px}
.shy-menu-hamburger .layer.top { top:7px; left:6px}
.is-open .shy-menu-hamburger .layer.top {top:14px; left:6px; transform:rotate(45deg)}
.shy-menu-hamburger .layer.mid { top:14px; left:6px }
.is-open .shy-menu-hamburger .layer.mid {opacity:0; left:0}
.shy-menu-hamburger .layer.btm { top:21px; left:6px }
.is-open .shy-menu-hamburger .layer.btm {top:14px; left:6px; transform:rotate(-45deg)}


/*********************** list view write edit srch 공통**************************/
.listDiv {width:fit-content; display:flex; flex-direction:column; padding:1.5rem; overflow-x:hidden; gap:0.5rem; min-height:400px}
body div.wrapper .listDiv {gap:0rem !important}
.listDiv thead {height:50px}
.listDiv .listHeaderDiv .row {align-items:center; border-top:1px solid #999; border-bottom:1px solid #999; background-color:#f1f1f1; font-size:0.875rem; font-weight:600}
.listDiv .listHeaderDiv .row .item {height:34px}
.listDiv .listHeaderDiv .row .item::before {content:""; width:1px; height:14px; position:absolute; top:50%; left:0; transform:translateY(-7px)}

.listDiv table {font-size:0.938rem; font-weight:500; color:#000}
.listDiv table thead {background-color:#e5ddcc; position:sticky; top:0; left:0; z-index:1}
.listDiv table thead td {border:1px solid #a7a9ad; padding:8px 4px}
.listDiv table tbody td {border:1px solid #c8c4bf; padding:14px 8px}
.listDiv table tbody {background-color:#fff; overflow:auto}

.listDiv table tfoot {background-color:#efede9; position:sticky; bottom:0; left:0}
.listDiv table tfoot td {border:1px solid #c8c4bf; padding:8px}

.listDiv table td .btn {position:unset}
.listDiv .row {display:flex}
.listDiv .listBodyDiv {overflow-x:hidden}
.listDiv .listBodyDiv .row {border-bottom:1px solid #cbc4bc; align-items:flex-start; background-color:#fff}

/* 모바일에서 hover 제외. 브라우저에서만 작동 */
@media (hover:hover) { 
  .listDiv .listBodyDiv .row:hover {background-color:#f4f4f4; cursor:pointer}
  .listDiv table tbody tr:hover {background-color:#f4f4f4; cursor:pointer}
}

.listDiv .listBodyDiv .row .item {display:flex; align-items:center; min-height:54px; padding:14px 8px; position:relative; word-break:keep-all; flex-flow:row wrap}
.listDiv .listBodyDiv .moreListDiv {display:flex; align-items:center; justify-content:center; padding:1.5rem; border:none}
.listDiv .listBodyDiv .moreListDiv .moreListBtn {border:1px solid #aaa; background-color:#fff; border-radius:4px; padding:10px 60px 8px}
.listDiv .listBodyDiv .moreListDiv .moreListBtn::after {content:"더보기 +20"}
.listDiv .listBodyDiv .moreListDiv .moreListBtn:hover {color:#047dcf; border:1px solid #047dcf}

/* @media screen and (max-width:940px) {
  .listDiv {min-height:200px}
  .listDiv .listBodyDiv {background-color:#eaebec}
} */


.listDiv .listBtnDiv {display:flex; align-items:center}
.listDiv .listBtnDiv .btn {min-width:6rem}

/* @media screen and (max-width:760px) {
  .row.bCode .inputTip {width:100%}
} */

body .srchSection {margin-bottom: 1rem!important;}
.listDiv .srchDiv .srchHead{display: none;}

.srchDiv {display:flex; align-items:center; flex-flow:row wrap; padding:1rem; font-size:0.9rem; gap:0.725rem; background-color:#efefef;}
body .listDiv .srchDiv {margin-bottom: 0 !important;}
.srchDiv .row {display:flex; flex-direction:row; align-items:center; gap:0.8rem}
.srchDiv .row .item {font-weight:700}
.srchDiv .row .answer {display:flex; align-items:center; font-size:0.925rem}
.srchDiv .row .answer * {font-size:0.925rem !important}
.srchDiv .row.bCode .answer {gap:0.125rem; width:140px}
.srchDiv .row.bCode input {padding:0; text-align:center}
.srchDiv .row.bCode .selectDiv {flex:0 0 40px; height:34px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.srchDiv .row.bCode .selectDiv label::after {content:''}
.srchDiv .row.bCode .digit2 {flex:0 0 30px}
.srchDiv .row.bCode .select {flex:0 0 37px}
.srchDiv .row.multiInput .answer {display:flex; align-items:center; gap:0.25rem}
.srchDiv .row.multiLabel .answer {display:flex; flex-flow:row wrap; gap:0.875rem; padding:0.5rem 0}
.srchDiv .row.multiLabel .answer label {white-space:nowrap}
.srchDiv .row.multiLabel .answer label input {margin-right:6px}
.srchDiv .row.btnDiv {gap:0.5rem}

.srchDiv .row input[type="text"],
.srchDiv .row .selectDiv,
.srchDiv .btn {height:34px}
.srchDiv .btnDiv {display:flex; align-items:center; gap:0.5rem}
.srchDiv .btnDiv .btn-close {display:none}
.srchDiv .answer.mail {display:flex}

/* @media screen and (max-width:940px) {
  .listDiv .srchDiv .srchHead{display: inline-block; font-size: 1em; font-weight: 800; padding: 2rem 0 0.5rem; text-align: left; width: 100%;}
  .listDiv .srchDiv .srchBody.row {justify-content: unset; flex-flow: wrap;gap: 1rem;}
  .listDiv .srchDiv .row.unsetRow{width: unset;}
  .listDiv .srchSection {display:none; background-color: rgba(3,19,41,0.5); height: 100%; position: fixed; z-index: 10; width: 100%;bottom: 0;left: 0; margin-bottom: 0 !important;align-items: end;}
  .listDiv .srchDiv {flex-direction: column; align-items: flex-start;height: 70%; z-index: 10; width: 100%;margin-bottom: 0 !important;gap: 0.8rem; padding: 0.5rem 2rem 1rem;border-radius: 1rem 1rem 0 0;background-color: #fff;}
  .listDiv .srchDiv .row {width:32%; justify-content:space-between}
  .listDiv .srchDiv .row .item {width:80px}
  .listDiv .srchDiv .row .answer {flex:1; padding-right:1rem}
  .listDiv .srchDiv .btnDiv {margin-top: auto; width: 100%;}
  .listDiv .srchDiv .btnDiv .btn-srch {width:100px}
  .listDiv .srchDiv .btnDiv .btn-reset {display:none}
  .listDiv .srchDiv .btnDiv .btn-download {display:none}
  .srchDiv .btnDiv .btn-close {display:flex; width:70px}
} */
/* @media screen and (max-width:760px) {
  .listDiv .srchDiv .row {width:100%}
  .listDiv .srchDiv .row .answer {padding-right:unset}
  .listDiv .srchDiv .btnDiv {padding-top:0.5rem; justify-content:end}
} */

.multidropdown {position:relative}
.multidropdown .dropdown {width:100%; position:absolute; top:33px;  left:0; z-index:1; background-color:#fff; padding:0.5rem; border:1px solid #aaa; border-radius:4px}
.multidropdown label {display:block}
.multidropdown label+label {margin-top:6px}




/*************************** 모달 공통 ********************************/
.modal {position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.2); top:0; left:0; display:none; z-index:100}
.modal .modalWrap {width:100%; height:100%; display:flex; align-items:center; justify-content:center}
.modal_content {display:flex; flex-direction:column; min-width:320px; max-width:600px; max-height:98%; overflow:auto; background-color: #e7eaec; line-height:23px; border-radius:1rem; position:relative; box-shadow:0 12px 30px rgba(0,0,0,0.5);
  opacity:0;  /* transform:translate(0, 100%); */  animation:modalShow 0.5s forwards;}
.modal_content.show {
  opacity:1;
  transform:translateY(0);
}
@keyframes modalShow {
  0% {
    opacity:0;
    transform:translate(0, -5%);
  }
  100% {
    opacity:1;
    transform:translate(0, 0);
  }
}
/* @media screen and (max-width:940px) {
  .modal_content {min-width:280px; max-width:98% !important}
} */
.modal_content .modalTitle {padding:1rem 1.5rem; font-size:1.125rem; font-weight:700; color:#24435d; text-align:center}
.modal_content .modalBody {flex:1; display:flex; padding:1.5rem; background-color:#fff; overflow:auto; box-shadow:0 6px 10px rgba(0,0,0,0.1);}

.modal_content .modalBody .commonMent {padding:30px 20px;font-size:16px; text-align:center; line-height:1.4; flex:1; position:relative}
.modal_content .modalBody .commonMent p {line-height:1.4; word-break:keep-all}
.modal_content .modalBody .commonMent .finishCount {position:absolute; right:0; top:0; font-size:16px; color:red}
.modal_content .modalInfo {padding:16px; background-color:#ffdc2c; line-height:1.2}
.modal_content .modalInfo li {list-style:disc !important; margin-left:20px !important; line-height:1.4; word-break:keep-all}
.modal_content .modalInfo li+li {margin-top:6px}
.modal_content .modalBtnGroup {display:flex; flex-direction:row; justify-content:space-around; padding: 0 3em;}
.modal_content .modalBtnDiv {display:flex; flex-direction:row; justify-content:center; padding:0.725rem; gap:0.725rem}
.modal_content .modalBtnDiv > .btn {flex:0 0 auto; min-width:80px}
.modal_content .modalBtnDiv .btn-yellow {margin-right:10px}
/* @media screen and (max-width:940px) {
  .modal_content .modalBody .commonMent {padding:20px 0 !important}
  .modal_content .modalBtnDiv {gap: 0.4rem;}
} */
/* @media screen and (max-width:760px) {
  .modal_content .modalBody {padding:1rem}
  .modal_content .modalBody .commonMent {padding:20px 0 !important}
} */
.modal_content .xBtn {position:absolute; top:10px; right:10px; cursor:pointer; z-index:101}
.modal_content .xBtn::before {content:'\f00d'; font-family:'fa'; font-size:30px; font-weight:100; color:#444}
.modal_content .optionDiv {margin-top:20px}
.modal_content textarea {min-width:300px; width:100%}
.modal_content .optionDiv input+label {margin-left:6px}
.modal .modalFormDiv .row {display:flex; flex-direction:row}
.modal .modalFormDiv .row.useYnRow {width: 100%; display: inline-flex;}
.modal .modalFormDiv .row > * {min-height:34px}
.modal .modalFormDiv .row+.row {margin-top:8px}
.modal .modalFormDiv .row .item  {display:flex; min-width:100px; align-items:center}
.modal .modalFormDiv .row .answer{flex:1 1 auto; min-width:300px; display:flex}
.modal .modalFormDiv .row .answer.flex-direction-column .selectDiv+.selectDiv {margin-top:6px}
.datePickerModal .modal_content {min-height:420px }
/* @media screen and (max-width:640px) {
  .modal .modalFormDiv {flex: 1; height: 100%;}
  .modal .modalFormDiv .row {flex-direction:column}
  .modal .modalFormDiv .row+.row {margin-top:10px}
  .modal .modalFormDiv .row .item  {display:flex; min-width:1px; padding:4px 0}
  .modal .modalFormDiv .row .answer{display:flex; min-width:1px}
} */

.alertMent {font-size:1rem; min-width:320px; text-align:center; padding:1rem; font-weight:500; line-height:1.4; word-break:keep-all;display: flex;align-items: center;gap: 0.25rem;}

.memoSection {display:flex; flex-direction:column; gap:0.5rem !important; padding:1rem !important; border-radius:6px; background-color:#eaeef0}
.memoSection .inputLine {display:flex; flex-direction:row; gap:4px}
.memoSection .listLine {font-size:0.925rem}
.memoSection .listLine li+li {margin-top:0.5rem}
.memoSection .regUser {font-size:0.875rem; color:#7f94a9; margin-left:8px}
.memoSection .regDate {font-size:0.875rem; color:#7f94a9; margin-left:4px}


/*********************** 모달 내 정보 상세보기 **************************/
#userInfoModal .modalBody {flex-direction:column; gap:1rem; align-items:center; width:330px; padding:2rem 1rem !important}
#userInfoModal .modalBody > div {display:flex; gap:0.5rem; align-items:center}
#userInfoModal .ci {display:flex; justify-content:center;}
#userInfoModal .ci img {width:60%; height:auto}
#userInfoModal .staffPic {width:180px; height:240px; border:1px solid #dae0e4; border-radius:1rem; display:flex; margin:0 auto; overflow:hidden; position:relative}
#userInfoModal .staffPic::after {content:'\f508'; font-family:'fa'; font-size:9rem; font-weight:700; color:#dae0e4; margin:auto}
#userInfoModal .staffPic img {position:absolute}
#userInfoModal .location {color:#456fae; background-color:#e3e3e3; border-radius:3px; padding:4px}
#userInfoModal input[type='text'] {height:34px; font-size:1rem; text-align:center}
#userInfoModal #passinputMy {display:flex; flex-direction:column; gap:0.5rem}
#userInfoModal .name {font-size:1.5rem; font-weight:700; display:flex; align-items:center}
#userInfoModal .name > span {font-size:0.875rem; font-weight:700; margin-right:0.5rem}
#userInfoModal .modal_content .modalBtnDiv .btn-yellow {margin-left:unset}
#userInfoModal .passDiv {width:70%; display:flex; flex-direction:column; gap:0.25rem}




/*********************** 모달 트리구조 **************************/
.tree-multiselect {flex:1; display:flex; flex-direction:row; gap:1rem; overflow:auto}
.tree-multiselect > .selections {flex:1; display:flex; flex-direction:column; overflow:auto; padding:0.5rem; border:1px solid #ababab; border-radius:6px; height:100%; overflow:auto}
.tree-multiselect > .selected {flex:1; padding:0.5rem; border:1px solid #ababab; border-radius:6px; height:100%; gap:6px; background-color:#f1f1f1; overflow:auto}
.tree-multiselect > .selections div.item {margin-left:27px}
.tree-multiselect > .selections div.item label {cursor:pointer; display:inline}
.tree-multiselect > .selections div.item label.disabled {color:#D8D8D8}
.tree-multiselect > .selections *[searchhit=false] {display:none}
.tree-multiselect > .selected > div.item {display:inline-flex; align-items:center; gap:6px; background:#fff; border-radius:6px; padding:4px 7px; font-size:0.975rem; margin:0 6px 6px 0; overflow:auto}
.tree-multiselect .section > div.section,
.tree-multiselect .section > div.item {padding-left:26px !important; position:relative}
.tree-multiselect .section.collapsed > div.title span.collapse-section:after {content:"\f0fe"; font-family:'fa'; font-weight:700}
.tree-multiselect .section.collapsed:not([searchhit]) > .item,
.tree-multiselect .section.collapsed:not([searchhit]) > .section {display:none}
.tree-multiselect .item {padding:2px 0}
.tree-multiselect .title {color:#333; padding:6px 0; position:relative}

.tree-multiselect .title > * {display:inline-block}
.tree-multiselect .title > span.collapse-section {margin:0 4px; width:19px}
.tree-multiselect .title > span.collapse-section:after {content:"\f146"; font-family:'fa'; font-weight:700; color:#9aa8b8}
.tree-multiselect .title:hover {cursor:pointer}
.tree-multiselect input[type=checkbox] {display:inline; margin-right:5px}
.tree-multiselect input[type=checkbox]:not([disabled]):hover {cursor:pointer}
.tree-multiselect span.remove-selected,
.tree-multiselect span.description {order:1}
.tree-multiselect span.remove-selected:hover {cursor:pointer}
.tree-multiselect span.remove-selected:after {content:"\f057"; font-family:'fa'; font-weight:700; color:red}

.tree-multiselect span.description:hover {cursor:help}
.tree-multiselect div.temp-description-popup {background:#EAEAEA; border:2px solid #676767; border-radius:3px; padding:5px}
.tree-multiselect span.section-name {display:none}
.tree-multiselect .auxiliary {display:table; width:100%}
.tree-multiselect .auxiliary input.search {border:2px solid #D8D8D8; display:table-cell; margin:0; padding:5px; width:100%}
.tree-multiselect .auxiliary .select-all-container {display:table-cell; text-align:right}
.tree-multiselect .auxiliary .select-all-container span.select-all,
.tree-multiselect .auxiliary .select-all-container span.unselect-all {margin-right:5px; padding-right:5px}
.tree-multiselect .auxiliary .select-all-container span.select-all:hover,
.tree-multiselect .auxiliary .select-all-container span.unselect-all:hover {cursor:pointer}
.tree-multiselect .auxiliary .select-all-container span.select-all {border-right:2px solid #D8D8D8}

.tree-multiselect .selections > .section {position:relative}
.tree-multiselect .section > .section > .title::before {content:''; width:17px; height:1px; border-bottom:1px dotted #9aa8b8; display:block; position:absolute; top:16px; left:-14px}
.tree-multiselect .selections > .section > .section::before {content:''; width:1px; height:calc( 100% + 5px ); border-right:1px dotted #9aa8b8; display:block; position:absolute; top:-7px; left:11px}
.tree-multiselect .selections > .section > .section:last-child::before {content:''; width:1px; height:17px; border-right:1px dotted #9aa8b8; display:block; position:absolute; top:0; left:11px}
.tree-multiselect .section > .section > .item::before  {content:''; width:14px; height:23px; border-left:1px dotted #9aa8b8; border-bottom:1px dotted #9aa8b8; display:block; position:absolute; top:-11px; left:10px}
.tree-multiselect .section > .section > .item:nth-child(2)::before  {height:17px !important; top:-5px !important}
.tree-multiselect .selections > .section > .section > .section::before {content:''; width:1px; height:calc( 100% + 24px ); border-right:1px dotted #9aa8b8; display:block; position:absolute; top:-6px; left:11px}
.tree-multiselect .selections > .section > .section > .section:last-child::before {display:none}
.tree-multiselect .section > .item+.section::before {height:calc( 100% + 47px ) !important; top:-28px !important}

/* @media screen and (max-width:760px) {
  .tree-multiselect {flex-direction:column}
  .tree-multiselect > .selections {flex:2 }
  .tree-multiselect > .selected {flex:1}
} */





/************************************** 다크모드 ****************************************/
/***************** 다크모드 전환 버튼 *****************/
label.darkMode {padding: 0.5rem; width: 100%; display: inline-flex;align-items: center;gap: 0.5rem;cursor: pointer; flex-direction: column;}
label.darkMode input[type="checkbox"] {width: 100%; margin: 0; flex: auto; appearance: none;position: relative;border: max(2px, 0.1em) solid var(--main-dark-btn-gray-color);border-radius: 1.25em;height: 1.25em;}
label.darkMode input[type="checkbox"]::before {content: "";position: absolute;left: 0;width: 1em;height: 1em;border-radius: 50%;transform: scale(0.8);background-color: var(--main-dark-btn-gray-color);transition: left 250ms linear;}
label.darkMode input[type="checkbox"]:checked {background-color: var(--main-dark-bg-color);border-color: var(--main-dark-gray-color);}
label.darkMode input[type="checkbox"]:checked::before {background-color: var(--main-dark-gray-color);left: calc(100% - 1em);}
label.darkMode input[type="checkbox"]:focus-visible {outline-offset: max(2px, 0.1em);outline: max(2px, 0.1em) solid tomato;}
label.darkMode span{font-size: 0.875rem;letter-spacing: -1px;font-weight: 400;}

label.darkMode span.darkStatus{color:var(--main-dark-btn-gray-color);}
label.darkMode span.darkStatus::after{margin-left: 5px; content: 'OFF';}
label.darkMode span.darkStatus i.fad.fa-sun{padding-right: 3px;}
label.darkMode input[type="checkbox"]:checked + span.darkStatus{color: var(--main-dark-gray-color);}
label.darkMode input[type="checkbox"]:checked + span.darkStatus::after{content: 'ON';}

/* @media screen and (max-width: 940px) {
    label.darkMode {justify-content: center; align-items: flex-end; width: auto; margin-left: auto;}
    label.darkMode input[type="checkbox"] {display: none;}
} */





/******************************** 공통코드 관리 ************************************/
/**************** 기존 소스 *****************/
/* body.basicData .titDiv, body.basicData .titDiv .pageTit {color:#7a4e24} */
body.basicData .tabDiv {display:flex; font-size:0.875rem; border-bottom:1px solid #ce3b3b; gap:0.25rem}
body.basicData .tabDiv .subTab {min-width:120px; height:36px; border-top-left-radius:6px; border-top-right-radius:6px; background-color:#dedfe0; color:#484848; padding:0 10px; display:flex; align-items:center; justify-content:center; cursor:pointer; white-space:nowrap}
body.basicData .listDiv tr:hover {background-color:#f4f4f4; cursor:unset}
body.basicData .divLine {width:1px; height:100%; border-left:1px dotted #999}
body.basicData .articleTit .divLine{height: 34px;}

body.basicData .listDiv .srchDiv .btnDiv {height: 100%;}
body.basicData .listDiv .srchDiv .btnDiv .btn.addModalBtn, body.basicData .listBodyDiv .item.management .btn.addModalBtn {width: 70px;}
body.basicData .srchDiv .btn-reset{border-radius: 0.25rem; height: 34px;}
body.basicData .srchDiv .divLine{width: 1px;height: 34px;border-left: 1px dotted #999;margin: 0 0.5rem;}

body.basicData #settingTabMenu #bTab3{background-color:#ce3b3b; color:#fff}

body.basicData .listDiv {gap:1rem !important}
body.basicData article {overflow:auto}
body.basicData article table {width:100%}
body.basicData thead td {text-align:center;}
body.basicData td {text-align:left;}
body.basicData .set1 td:nth-child(3),
body.basicData .set2 td:nth-child(3),
body.basicData .set3 td:nth-child(2),
body.basicData .set4 td:nth-child(3) {text-align:left}

.btn-move {font-size: 16px;font-weight: 700;cursor: s-resize;border: 1px solid #193870;border-radius: 3px;padding: 2px;color: #193870; font-style: normal;}
.btn-move::before {content: '\f07d';font-family: 'fa';font-weight: 500;}

body.basicData .item.itemNm {width:550px; flex:0 0 550px; justify-content:start;padding: 0 !important;}
body.basicData .item.itemCd {width:140px; flex:0 0 140px; justify-content:start}
body.basicData .item.useYn {width:80px; flex:0 0 80px; justify-content:center; flex-direction:column; gap:0.25rem}
body.basicData .item.orderNm {width: 80px;flex: 0 0 80px;justify-content: center;}
body.basicData .item.management {width: 200px;flex: 0 0 200px;justify-content: center;}

body.basicData .listBodyDiv .item.itemNm p {padding: 14px 8px;flex-grow: 1;flex-basis: 0; word-break: break-word;}
body.basicData .listBodyDiv .item.itemNm .divLine {margin: 0 1rem; height: auto;}
body.basicData .listBodyDiv .depth .item.management .btn {margin: 0 10px; width: 50px;}
body.basicData .listBodyDiv .depth4 .item.management .btn.notWorkingBtn {visibility: hidden; user-select: none; cursor: default !important;}

body.basicData .listBodyDiv .item i{margin: 0 0.6rem; transition: transform 0.3s;}

body.basicData .listBodyDiv .depth > .item.itemNm {align-items: normal;}
body.basicData .listBodyDiv .depth > .item.itemNm > * {display: flex; align-items: center;}
body.basicData .listBodyDiv .lowDepths > .row:first-child {box-shadow:inset 0 6px 0 rgba(0,0,0,0.05);}

body.basicData .modal .answer input[type=radio]{margin: 0 0.5rem;}
body.basicData .modal .answer input:first-child[type=radio]{margin-left: 0;}

/* @media screen and (max-width: 940px) {
  body.basicData .articleTit {width: 100%;}
  body.basicData .articleTit > * {flex: 1;}
  body.basicData .bodyDiv {background-color: transparent; padding-bottom: 10px;}
  body.basicData .bodyDiv > .listDiv{flex-direction: column !important;}
  body.basicData .bodyDiv > .listDiv .divLine {display: none;}
  body.basicData .listDiv .srchDiv .btnDiv {padding-top: 0;}
  body.basicData .listDiv {padding-bottom: 0.5rem;}
  body.basicData .listDiv {padding:unset; width:unset !important; background-color: transparent;}
  body.basicData .listDiv .listHeaderDiv {display:none}
  body.basicData .wrapper .bodyDiv .listDiv .listBodyDiv{border-radius:0.375rem}
  body.basicData .wrapper .bodyDiv .listDiv .listBodyDiv .depth {margin-bottom: 0; border-radius: 0; padding: 0 1rem;border-bottom: 1px solid #cbc4bc;flex-flow:unset; align-items:unset; position:relative;background-color:#fff;overflow:hidden;}
  body.basicData .wrapper .bodyDiv .listDiv .listBodyDiv .depth .itemNm{flex: 1;}
  body.basicData .listDiv .listBodyDiv .row .item {flex:unset; width:unset; padding:8px 5px; min-height:unset}
  body.basicData .listDiv .listBodyDiv .row .item.itemNm ~ *:not(.item.management) {display: none;}
  body.basicData .listDiv .listBodyDiv .row .item.management{gap: 0.5rem;}
  body.basicData .listDiv .listBodyDiv .row .item.management > button{margin: 0;}
  body.basicData .listDiv .srchDiv .btnDiv {height: unset;}
  body.basicData table tr td span{display: block;}

  body.basicData .articleTit .tit .btn.addModalBtn{width: 60px;}
  body.basicData .listDiv .srchDiv .btnDiv .addModalBtn {display: none;}
} */

/******************************** 메뉴 관리 ********************************/
body.menuList .item.url {min-width:550px; width:550px; flex:0 0 550px; justify-content:start;}
body.menuList .item.mMenu {min-width:200px; width:200px; flex:0 0 200px; justify-content:start}
body.menuList .item.no,
body.menuList .item.changeOrder,
body.menuList .item.modBtn {min-width: 80px; width: 80px;flex: 0 0 80px;justify-content: center; text-align: center;}
body.menuList .item.lMenu {min-width: 200px; width: 200px;flex: 0 0 200px;justify-content: start;}

body.menuList td.item.url, 
body.menuList td.item.mMenu,
body.menuList td.item.lMenu {justify-content: center; text-align: center;}

.order-hamburger {width:30px; height:30px; display:block; position:relative; overflow:hidden; cursor:pointer; outline:none;}
.order-hamburger > .layer {background-color:#000; border-radius:1px; display:block; height:2px; overflow:hidden; position:absolute; left:5px; width:18px}
.order-hamburger .layer.top { top:7px; left:6px}
.shy-menu-div.is-open .order-hamburger .layer.top {top:14px; left:6px; transform:rotate(45deg)}
.order-hamburger .layer.mid { top:14px; left:6px }
.shy-menu-div.is-open .order-hamburger .layer.mid {opacity:0; left:0}
.order-hamburger .layer.btm { top:21px; left:6px }

.menuListDiv .row.selectedRow {background-color: #bdcbeb !important;}
.menuListDiv .articleTit .tit .selectedNm {color: #2a5ac8;}

body.menuList .item.modBtn p{color: #63a0ff;border-bottom: 1px solid #63a0ff;}

/* @media screen and (max-width: 940px) {
  .menuListDiv .srchDiv .row .item {width: 38px}
  .menuListDiv.listDiv .srchDiv .btnDiv .btn-reset {display:inline-flex}
  .menuListDiv .listBodyDiv .item.no {position:absolute; right:50%; top:50%; color:rgba(0,0,0,0.05); font-size:4rem; font-weight:700; letter-spacing:-1px;transform: translate(50%, -50%)}
  .menuListDiv .item.lMenu {width:100% !important; justify-content:start !important; color: #7f94a9;}  
  .menuListDiv .item.mMenu,
  .menuListDiv .item.url {width:100% !important;}  
  body.menuList .menuListDiv{padding: 0;width: 100%;}
  body.menuList .menuListDiv .listHeaderDiv {display: none;}
  body.menuList .menuListDiv .listBodyDiv .row {flex-flow:wrap; align-items:unset; position:relative; border:0; border-radius:0.375rem; padding:0.875rem; background-color:#fff; box-shadow:0 6px 6px rgba(0,0,0,0.05); margin-bottom:0.5rem; overflow:hidden}
  body.menuList .menuListDiv .listBodyDiv .row .item {flex:unset; width:unset; padding:4px 5px; min-height:unset}
  body.menuList .menuListDiv .articleTit {display: none;}
  body.menuList .menuListDiv .listBodyDiv .row .item.changeOrder{display: none;}
  body.menuList .menuListDiv .listBodyDiv .row .item.company{margin-bottom: 0.5rem;padding-right: 4rem;}
  body.menuList .menuListDiv .srchDiv .btnDiv {height: unset;}
  body.menuList .menuListDiv .srchDiv .btnDiv .divLine{display: none;}
  body.menuList .menuListDiv .srchDiv .btnDiv .addModalBtn.regStaffModalopen{display: none;}
  .menuListDiv .item:not(.srchDiv .item) {text-align:start;}
  .menuListDiv.listDiv .srchDiv .btnDiv .btn-reset {display:none}
} */

/******************************** 라이선스 관리 ************************************/
body.license .divLine{width: 1px;height: 34px;border-left: 1px dotted #999;margin: 0 0.5rem;}
body.license .mngLicenseListDiv .srchDiv{margin-bottom: 0.5rem;}

.mngLicenseListDiv .srchDiv .btnDiv .btn.btn-excel {background-color: #fff;color: #197059 !important;border: 1px solid #197059;font-weight: 500;}
.mngLicenseListDiv .srchDiv .btnDiv .btn.btn-excel i {margin-right: 5px;}
.mngLicenseListDiv .listBodyDiv .row{align-items: flex-start;}
.mngLicenseListDiv .listBodyDiv .row .item{word-break: normal;}
/* .mngLicenseListDiv .listBodyDiv .row .item.bCdkey span {display: block; text-align: center;} */

.mngLicenseListDiv .item.no {min-width:50px;width:50px; flex:0 0 50px; justify-content:center}
.mngLicenseListDiv .item.bCompany {min-width:140px;width:140px; flex:0 0 140px; text-align: center; justify-content: center;}
.mngLicenseListDiv .item.swName {min-width:200px;width:200px; flex:0 0 200px; text-align: center; justify-content: center; flex-direction:column; gap:0.25rem}
/* .mngLicenseListDiv .item.bCdkey{min-width: 280px;width: 280px;flex: 0 0 280px; justify-content: center;} */
.mngLicenseListDiv .item.bStart {min-width:100px;width:100px; flex:0 0 100px; justify-content:center; flex-direction:column; gap:0.25rem}
.mngLicenseListDiv .item.bExpire {min-width:100px;width:100px; flex:0 0 100px; justify-content:center}
.mngLicenseListDiv .item.bType {min-width: 100px;width: 100px; flex: 0 0 100px; justify-content:center}
.mngLicenseListDiv .item.bType span {min-width: 75px;width: 75px; font-size:14px; text-align: center;padding: 0.4rem 0 !important;}
.mngLicenseListDiv .item.bType.comm span {background-color:#186fd5; color:#fff !important; border-radius:40px; padding:0.25rem 0.5rem}
.mngLicenseListDiv .item.bType.demo span {background-color:#ebaa06; color:#fff !important; border-radius:40px; padding:0.25rem 0.5rem}
.mngLicenseListDiv .item.bType.complete span {background-color:#707070; color:#fff !important; border-radius:40px; padding:0.25rem 0.5rem}
.mngLicenseListDiv .item.bType.stop span {background-color:#e30b0b; color:#fff !important; border-radius:40px; padding:0.25rem 0.5rem}
.mngLicenseListDiv .item.bType.extension span {background-color:#6e51ce; color:#fff !important; border-radius:40px; padding:0.25rem 0.5rem}
.mngLicenseListDiv .item.lManager {min-width:60px;width:60px; flex:0 0 60px; justify-content:center}
.mngLicenseListDiv .item.empNm {min-width: 80px;width: 80px;flex: 0 0 80px;justify-content: center; text-align: center; justify-content: center;}
.mngLicenseListDiv .item.empAcc {min-width: 120px;width: 120px;flex: 0 0 120px;justify-content: center; text-align: center; justify-content: center;}
.mngLicenseListDiv .item.empAddr {min-width: 120px;width: 120px;flex: 0 0 120px;justify-content: center; text-align: center; justify-content: center;}
.mngLicenseListDiv .item.empEmail {min-width: 190px;width: 190px;flex: 0 0 190px;justify-content: center; text-align: center; justify-content: center;}
.mngLicenseListDiv .item.remainDt {min-width: 80px;width: 80px;flex: 0 0 80px;justify-content: center;}
.mngLicenseListDiv .item.register {min-width: 80px;width: 80px;flex: 0 0 80px;justify-content: center;} 
.mngLicenseListDiv .item.registDt {min-width: 90px;width: 90px;flex: 0 0 90px;justify-content: center;}
.mngLicenseListDiv .listHeaderDiv td {text-align:center}

.mngLicenseListDiv .listHeaderDiv .item.columnColor {background-color: #e8ebd7;}


/* @media screen and (max-width:940px) {
  body.license .comment {display:none}
  .mngLicenseListDiv .srchDiv .btnDiv .divLine ~ * {display: none;}
  .mngLicenseListDiv .srchDiv .divLine{display: none;}

  .mngLicenseListDiv .srchDiv .row.unsetRow .srchTxt{width: 200px;}

  body.license .listDiv {padding:unset; width:unset !important;}
  body.license .listDiv .listHeaderDiv {display:none}
  body.license .listDiv .listBodyDiv .row {flex-flow:wrap; align-items:unset; position:relative; border:0; border-radius:0.375rem; padding:0.725rem; background-color:#fff; box-shadow:0 6px 6px rgba(0,0,0,0.05); margin-bottom:0.5rem; overflow:hidden}
  body.license .listDiv .listBodyDiv .row .item {flex:unset; width:unset; padding:4px 5px; min-height:unset; border-bottom: none;}

  .mngLicenseListDiv .listBodyDiv .item.no {order:1; position:absolute; right:50%; top:50%; color:rgba(0,0,0,0.05); font-size:4rem; font-weight:700; letter-spacing:-1px;transform: translate(50%, -50%)}
  .mngLicenseListDiv .item.swName {width:100% !important; justify-content:unset; margin-bottom: 1rem; text-align: start; padding-right: 5.5rem !important;}
  .mngLicenseListDiv .item.swName .eName {width:100%; font-size:1.25rem; font-weight:600}
  .mngLicenseListDiv .item.bCompany {width:100% !important; justify-content:unset !important}
  .mngLicenseListDiv .item.bCompany::before {content:'사용처'; display:inline-block; width:60px; padding:4px; margin-right:4px; text-align:center; font-size:0.875rem; background-color:#e2e4e6; border-radius:3px}
  .mngLicenseListDiv .item.bType {position:absolute !important; top:0.725rem; right:0.2rem; color:#87949f; font-weight:500}
  .mngLicenseListDiv .item.bRelated {display:none !important}
  .mngLicenseListDiv .item.bStart{gap: 0;}
  .mngLicenseListDiv .item.bStart::before {content: '시작일';display: inline-block;width: 60px;padding: 4px;margin-right: 4px;text-align: center;font-size: 0.875rem;background-color: #e2e4e6;border-radius: 3px;}
  .mngLicenseListDiv .item.bStart .div {width:60px; padding:4px; margin-right:4px; text-align:center; font-size:0.875rem; background-color:#e2e4e6; border-radius:3px}
  .mngLicenseListDiv .item.bExpire {color:#d40000}
  .mngLicenseListDiv .item.bExpire::before {content:'만기일'; display:inline-block; width:60px; padding:4px; margin-right:4px; text-align:center; font-size:0.875rem; background-color:#e2e4e6; border-radius:3px; color:#000}
  .mngLicenseListDiv .item.bCdkey,
  .mngLicenseListDiv .item.qty {display:none !important}
  .mngLicenseListDiv .item.bContractor::before {content:'계약처'; display:inline-block; width:60px; padding:4px; margin-right:4px; text-align:center; font-size:0.875rem; background-color:#e2e4e6; border-radius:3px; color:#000}
  .mngLicenseListDiv .item.lManager {display:none !important}


  .mngLicenseListDiv .listBodyDiv .item.bCompany {order:6}
  .mngLicenseListDiv .listBodyDiv .item.bCompany::before {content:'사용처'; display:inline-block; width:60px; padding:4px; margin-right:4px; text-align:center; font-size:0.875rem; background-color:#e2e4e6; border-radius:3px}
  .mngLicenseListDiv .listBodyDiv .item.bManager {order:7}
  .mngLicenseListDiv .listBodyDiv .item.bManager span+span {margin-left:6px}
  .mngLicenseListDiv .listBodyDiv .item.bPeriod {order:8; width:100%}
  .mngLicenseListDiv .listBodyDiv .item.bPeriod::before {content:'사업기간'; display:inline-block; width:60px; padding:4px; margin-right:4px; text-align:center; font-size:0.875rem; background-color:#e2e4e6; border-radius:3px}
  .mngLicenseListDiv .listBodyDiv .item.bStatus {order:4; margin-left:auto; font-weight:700}
  .mngLicenseListDiv .listBodyDiv .item.bStatus::before {content:'['}
  .mngLicenseListDiv .listBodyDiv .item.bStatus::after {content:']'}
  .mngLicenseListDiv .listBodyDiv .item.bContractor {order:9}
  .mngLicenseListDiv .listBodyDiv .item.bContractor::before {content:'계약처'; display:inline-block; width:60px; padding:4px; margin-right:4px; text-align:center; font-size:0.875rem; background-color:#e2e4e6; border-radius:3px}
  .mngLicenseListDiv .listBodyDiv .item.cManager {order:10}
  .mngLicenseListDiv .listBodyDiv .item.lManager {order:12; display:none; position:absolute; bottom:2.8rem; right:1rem}
  .mngLicenseListDiv .listBodyDiv .item.lManager::before {content:'담당:'}
  .mngLicenseListDiv .listBodyDiv .item.bApp {order:11; margin-left:auto}
  .mngLicenseListDiv .item.remainDt{width: 100% !important;justify-content: unset !important;}
  .mngLicenseListDiv .item.remainDt::before {content:'잔여일'; display:inline-block; width:60px; padding:4px; margin-right:4px; text-align:center; font-size:0.875rem; background-color:#e2e4e6; border-radius:3px;}
  .mngLicenseListDiv .item.registDt{width: 100% !important;justify-content: unset !important; order: 7;}
  .mngLicenseListDiv .item.registDt::before {content:'등록일'; display:inline-block; width:60px; padding:4px; margin-right:4px; text-align:center; font-size:0.875rem; background-color:#e2e4e6; border-radius:3px;}
  .mngLicenseListDiv .item.bType{width: 90px !important ;}

  .mngLicenseListDiv .item.empNm {display:none !important}
  .mngLicenseListDiv .item.empAcc {display:none !important}
  .mngLicenseListDiv .item.empAddr {display:none !important}
  .mngLicenseListDiv .item.empEmail {display:none !important}
  .mngLicenseListDiv .item.register {display:none !important}
} */



/*********************** limetree 라이선스관리 등록팝업 **************************/
.licenseModal .modal_content {width:980px; max-width:unset}
.licenseModal .modalBody {flex-direction:row; gap:2rem}
.licenseModal .modalBody > * {flex:1; display:flex; flex-direction:column; gap:1.5rem}
.licenseModal .modalBody article .tit {font-weight:700; padding:0.5rem 0}
.licenseModal .modalBody article table {width:100%}
.licenseModal .modalBody article td {border:1px solid #999; height:32px}
.licenseModal .modalBody article .item {background-color:#efefef; padding:0.25rem; width:86px}
.licenseModal .modalBody article .item.ver {width:38px}
.licenseModal .modalBody article .answer.ver {width:60px}
.licenseModal .modalBody article .answer {padding:2px}
.licenseModal .modalBody article .input-delete.answer {display: revert;}
.licenseModal .modalBody article select {height:34px; padding:6px 4px}
.licenseModal .modalBody article .cdkeyInput {width: calc( 100% - 49px );}
.licenseModal .modalBody article .answer .ipInput+.ipInput {margin-top:2px}
.licenseModal .modalBody article .answer label+label {margin-left:8px}
.licenseModal .modalBody article.licenseMng .item{width: 172px;}
.licenseModal .modalBody article.licenseMng .createLicense{color: #fff !important; display: none;}
.licenseModal .modalBody article.licenseMng .dateInput:read-only:not(:disabled) {background-color: #fff !important; border: 1px solid #aaa !important; cursor: pointer;}


/* @media screen and (max-width: 760px) {
  .licenseModal .modal_content {width:unset}
  .licenseModal .modalBody {flex-direction:column; gap:1.5rem; padding-bottom:1.5rem}
  #viewLicenseModal .modal_content .modalBtnDiv .btn-yellow{margin-left: 0 !important;}
  body.license .listDiv .listBodyDiv .row:hover .item.bExpire::before {color: #047dcf;}
} */

#regAlertLicenseModal input[type=number]{width: 100px;}


.ui-widget.ui-widget-content{border: none; box-shadow: none;}

.treeArticle{height: 100%;display: flex;flex-direction: column;}
.tree-multiselect {height: 100%;}
.tree-multiselect .item{background-color: transparent !important; width: auto !important;}
.tree-multiselect > .selections div.item label.disabled{background-color: transparent !important;}

/******************************** 운영관리자 관리 ************************************/
.mngStaffListDiv {flex-direction:column; gap: 0;}
/* @media screen and (max-width: 760px) {
  .mngStaffListDiv .srchDiv .item {display:none}
  .mngStaffListDiv .srchDiv .btnDiv {padding-top:unset}
} */

.mngStaffListDiv .item:not(.srchDiv .item) {text-align:center; justify-content:center}
.mngStaffListDiv .item.no {min-width:60px;width:60px; flex:0 0 60px; justify-content:center}
.mngStaffListDiv .item.name {min-width:160px;width:160px}
.mngStaffListDiv .listBodyDiv .item.name {font-size:1.25rem; font-weight:600}
.mngStaffListDiv .item.name .sex {font-weight:300; font-size:0.975rem; margin-left:8px}
.mngStaffListDiv .item.rank {min-width:120px;width:120px}
.mngStaffListDiv .item.company {min-width:280px;width:280px}

body.manager .mngStaffListDiv .articleTit {display:flex; flex-direction:column; gap:0.5rem; padding-bottom: 0.8rem;}
body.manager .mngStaffListDiv .articleTit .tit {display:flex; align-items:center; font-weight:700}
body.manager .mngStaffListDiv .articleTit .tit .btn {background-color:#193870; color:#fff !important; border:1px solid #193870; height:23px; padding:0 1rem; border-radius:2rem; margin-left:1rem}
body.manager .mngStaffListDiv .articleTit .ment {font-size:0.925rem; font-weight:400; color:#7f94a9}

body.manager .mngStaffListDiv .srchDiv {margin-bottom: 0.5rem;}
body.manager .mngStaffListDiv .addModalBtn {width: 70px;}
body.manager .mngStaffListDiv .srchDiv .btnDiv {height: 100%;}
body.manager .mngStaffListDiv .srchDiv .btnDiv .divLine {width: 1px;height: 34px;border-left: 1px dotted #999;margin: 0 0.5rem;}

body.manager .mngStaffListDiv .listBodyDiv .row .item{word-break: break-word;}
body.manager .mngStaffListDiv .item.company {flex: 0 0 280px;}
body.manager .mngStaffListDiv .item.team {flex: 0 0 150px;min-width: 150px;width: 150px;}
body.manager .mngStaffListDiv .item.forEnter{display: none !important;}
body.manager .mngStaffListDiv .item.userId {min-width: 150px;width: 150px;}
body.manager .mngStaffListDiv .item.addr {min-width: 150px;width: 150px;}
body.manager .mngStaffListDiv .item.email {flex: 0 0 250px;min-width: 250px;width: 250px;}

body.manager .mngStaffListDiv .item.rank span{width: 100%;height: 100%;padding: 0.25rem; border-radius: 40px;}
body.manager .mngStaffListDiv .item.rank.superAdmin span{background-color: #ffd96f; color: #000 !important;}

.addManagerModal .duplBtn, .addManagerModal label[for=superYnY]{margin-left: 5px;}

.hasDuplTest .answer span {right: 82px;}

@media screen and (min-width: 941px) {
  .mngStaffListDiv .listBodyDiv .item.company {justify-content:unset; padding-left:2rem}
}
/* @media screen and (max-width: 940px) {
  .mngStaffListDiv .srchDiv .row .item {width: 38px}
  .mngStaffListDiv.listDiv .srchDiv .btnDiv .btn-reset {display:inline-flex}
  .mngStaffListDiv .listBodyDiv .item.no {position:absolute; right:50%; top:50%; color:rgba(0,0,0,0.05); font-size:4rem; font-weight:700; letter-spacing:-1px;transform: translate(50%, -50%)}
  .mngStaffListDiv .item.company {width:100% !important; justify-content:start !important; color: #7f94a9;}  
  body.manager .mngStaffListDiv{padding: 0;width: 100%;}
  body.manager .mngStaffListDiv .listHeaderDiv {display: none;}
  body.manager .mngStaffListDiv .listBodyDiv .row {flex-flow:wrap; align-items:unset; position:relative; border:0; border-radius:0.375rem; padding:0.875rem; background-color:#fff; box-shadow:0 6px 6px rgba(0,0,0,0.05); margin-bottom:0.5rem; overflow:hidden}
  body.manager .mngStaffListDiv .listBodyDiv .row .item {flex:unset; width:unset; padding:4px 5px; min-height:unset}
  body.manager .mngStaffListDiv .articleTit {display: none;}
  body.manager .mngStaffListDiv .listBodyDiv .row .item.userId{display: none;}
  body.manager .mngStaffListDiv .listBodyDiv .row .item.forEnter{width: 100%;height: 1px;padding: 0; display: block !important;}
  body.manager .mngStaffListDiv .listBodyDiv .row .item.rank{position: absolute !important;right: 0.875rem;border-radius: 40px;background-color: #193870;color: #fff;padding: 0.25rem 0.5rem;font-weight: 500;}
  body.manager .mngStaffListDiv .listBodyDiv .row .item.rank.superAdmin{background-color: #ffd96f;}
  body.manager .mngStaffListDiv .listBodyDiv .row:hover .item.rank{color: #fff !important;}
  body.manager .mngStaffListDiv .listBodyDiv .row .item.company{margin-bottom: 0.5rem;padding-right: 4rem;}
  body.manager .mngStaffListDiv .srchDiv .btnDiv {height: unset;}
  body.manager .mngStaffListDiv .srchDiv .btnDiv .divLine{display: none;}
  body.manager .mngStaffListDiv .srchDiv .btnDiv .addModalBtn.regStaffModalopen{display: none;}
  .mngStaffListDiv .item:not(.srchDiv .item) {text-align:start;}
  .mngStaffListDiv.listDiv .srchDiv .btnDiv .btn-reset {display:none}
} */


/***************************************************************************************************/




/***************** 다크모드 디자인 *****************/
/******** 기본색깔 ********/
:root {
  --main-dark-black-color:#272829;
  --main-dark-gray-color:#f7f7f7;
  --main-dark-btn-gray-color:#6c7274;
  --main-dark-bg-color:#121212;
  --main-dark-sub1-color:#272829;
  --main-dark-sub2-color:#373737;
}

/******** GNB 디자인 ********/
body.darkOn .gnbWrapPC {background-color: #0f1e2a;}
body.darkOn .gnbWrapPC .ci {background-color: #1f3141;}
body.darkOn .gnbWrapPC li ul.subMenu {background-color: #0f1e2a;}
/* @media screen and (max-width: 940px) {
  body.darkOn .gnbWrapPC {background: linear-gradient(162deg, rgb(32 51 67) 0%, rgb(24 44 61) 100%);}
} */
@media screen and (min-width: 941px){
  body.darkOn .gnbWrapPC li:hover {color: var(--main-dark-gray-color);font-size: larger;}
}

/******** 기본 레이아웃 디자인 ********/
body.darkOn{background-color: var(--main-dark-bg-color);}
body.darkOn .titDiv, body.darkOn .titDiv .pageTit{color: var(--main-dark-gray-color) !important;}
body.darkOn .bodyDiv {background-color: var(--main-dark-sub1-color); color: var(--main-dark-gray-color);}
body.darkOn .articleTit *:not(input) {color: var(--main-dark-gray-color);}
body.darkOn .articleTit input {background-color: var(--main-dark-gray-color); color: var(--main-dark-black-color);}

/******** 버튼 디자인 ********/
body.darkOn .btn-srch, body.darkOn .addModalBtn {background-color: var(--main-dark-btn-gray-color) !important; border-color: var(--main-dark-btn-gray-color) !important; color: var(--main-dark-gray-color) !important;}
body.darkOn .btn-add, body.darkOn .btn-reset {color: var(--main-dark-gray-color) !important; border-color: var(--main-dark-btn-gray-color); background-color: transparent;}
body.darkOn .bodyDiv table .btn {color: var(--main-dark-btn-gray-color); border-color: var(--main-dark-btn-gray-color);}
body.darkOn .btn.btn-red {background-color: #951c1c;border: 1px solid #951c1c;color: #fff !important;}

/******** 테이블 디자인 ********/
body.darkOn > div:not(.modal) table thead{color: var(--main-dark-gray-color) !important; background-color: var(--main-dark-sub2-color) !important;}
body.darkOn > div:not(.modal) table thead tr:hover{color: var(--main-dark-gray-color) !important; background-color: var(--main-dark-sub2-color) !important;}
body.darkOn > div:not(.modal) table thead td {border-color: #151515 !important;}
body.darkOn > div:not(.modal) table tbody {background-color: #3a3b3d; color: var(--main-dark-gray-color);}
body.darkOn > div:not(.modal) tbody tr:hover{background-color: #e1e1e1 !important; color: var(--main-dark-black-color) !important;}

/******** 공통코드 관리 ********/
body.darkOn .listDiv table.scrollTable tr td {border-color: #151515 !important;}

/******** 운영관리자 관리 ********/
/* @media screen and (max-width: 940px){
body.darkOn .listDiv .listBodyDiv .row .item.rank {background-color: #102345;}
body.darkOn .addManagerModal .duplBtn {background-color: #102345; border-color: #102345;}
} */

/******** 전체적 리스트 디자인 ********/
body.darkOn .listDiv > .srchDiv{background-color: var(--main-dark-sub2-color);}
body.darkOn .listDiv > .srchDiv .row .answer input{color: var(--main-dark-black-color);}
body.darkOn .listDiv > .srchDiv .row .answer label{color: var(--main-dark-gray-color);}
body.darkOn .listDiv > .srchDiv .selectDiv * {color: var(--main-dark-black-color) !important;}
body.darkOn .listDiv .btnDiv .alertLicenseBtn{background-color: var(--main-dark-btn-gray-color); border-color: var(--main-dark-btn-gray-color); color:var(--main-dark-gray-color) !important;}
body.darkOn .listDiv .btnDiv .btn-download{background-color: var(--main-dark-btn-gray-color); border-color: var(--main-dark-btn-gray-color); color:var(--main-dark-gray-color) !important;}
body.darkOn .listDiv .moreListDiv .moreListBtn{background-color: var(--main-dark-btn-gray-color); border-color: var(--main-dark-btn-gray-color); color:var(--main-dark-gray-color) !important;}
body.darkOn .listDiv .moreListDiv .moreListBtn:hover{border-color: var(--main-dark-gray-color);}
body.darkOn .listDiv .listBodyDiv .row{background-color: transparent; color: var(--main-dark-gray-color);}
body.darkOn .listDiv .listBodyDiv .row:hover {background-color: #e1e1e1 !important;color: var(--main-dark-black-color) !important;}
body.darkOn .listDiv .item.bType.comm span {background-color:#254555 !important;}
body.darkOn .listDiv .item.bType.demo span {background-color:#5c3287 !important;}
body.darkOn .listDiv .item.bType.complete span {background-color:#5d5b5b !important;}
body.darkOn .listDiv .item.bType.stop span {background-color:#951c1c !important;}
body.darkOn .listDiv .item.bType.extension span {background-color:#cf7302 !important;}

/* @media screen and (max-width: 940px){
body.darkOn .wrapper .bodyDiv .item .div {color: #000;}
body.darkOn .wrapper .bodyDiv .item::before {color: #000;}
body.darkOn .wrapper .bodyDiv .bodyDiv {background-color: transparent;}
body.darkOn .wrapper .bodyDiv .listDiv .listBodyDiv {background-color: transparent;}
body.darkOn .wrapper .bodyDiv .listDiv .listBodyDiv .moreListDiv {background-color: var(--main-dark-bg-color);}
body.darkOn .wrapper .bodyDiv .listDiv .listBodyDiv .row {box-shadow: 0 6px 6px rgb(0 0 0); background-color: var(--main-dark-sub1-color);}
body.darkOn .wrapper .bodyDiv .listDiv .listBodyDiv .row:hover .item .div{background-color: var(--main-dark-sub2-color); color: var(--main-dark-gray-color);}
body.darkOn .wrapper .bodyDiv .listDiv .listBodyDiv .row:hover .item::before{background-color: var(--main-dark-sub2-color); color: var(--main-dark-gray-color);}
body.darkOn .srchDiv{background-color: var(--main-dark-sub1-color); border: 0;}
body.darkOn .btn-srch{background-color: transparent !important;}
} */

/******** 모달 ********/
body.darkOn .modal {background: rgba(0,0,0,0.4);}
body.darkOn .modal .modal_content {background-color: var(--main-dark-black-color); color: var(--main-dark-gray-color);}
body.darkOn .modal .modal_content .modalTitle {color: var(--main-dark-gray-color); background-color: var(--main-dark-sub2-color);}
body.darkOn .modal .modal_content .modalBody {background-color: var(--main-dark-sub1-color);}
body.darkOn .modal .modal_content .modalBody .answer input:not(:disabled) {background-color: var(--main-dark-gray-color) !important;}
body.darkOn .modal .modal_content .modalBtnDiv {background-color: var(--main-dark-sub2-color);}
body.darkOn .modal .modal_content .modalBtnDiv .btn-silver {color:var(--main-dark-gray-color) !important;background-color:#4f4f4f;border: 1px solid #4f4f4f;}
body.darkOn .modal .modal_content .modalBtnDiv .btn-yellow {color:var(--main-dark-gray-color) !important;background-color:#cf7302;border: 1px solid #cf7302;}
body.darkOn .modal .modal_content .modalBtnDiv .btn-blue {color:var(--main-dark-gray-color) !important;background-color:#426a77;border: 1px solid #426a77;}
body.darkOn #viewLicenseModal table .item{color: var(--main-dark-gray-color);background-color: var(--main-dark-sub2-color);}
body.darkOn #viewLicenseModal table .answer input[disabled] {background-color: #b9b9ba;}

/** treemultiselect **/
body.darkOn .modal .tree-multiselect *:not(input, .disabled) {color: var(--main-dark-gray-color) !important;}
body.darkOn .modal .tree-multiselect input[type=checkbox]:disabled {background-color: var(--main-dark-sub2-color) !important;}

/** datepicker **/
body.darkOn #datepicker .ui-datepicker-header {background-color: var(--main-dark-sub2-color); color: var(--main-dark-gray-color);border-color: var(--main-dark-sub2-color);}
body.darkOn #datepicker .ui-widget-content{background-color: var(--main-dark-sub1-color);}
body.darkOn #datepicker .ui-widget-content table * {color: var(--main-dark-gray-color);}
body.darkOn #datepicker .ui-state-hover:not(.ui-state-highlight){color: var(--main-dark-black-color);}
body.darkOn #datepicker .ui-state-active:not(.ui-state-highlight){background-color: var(--main-dark-btn-gray-color);}

body.darkOn .licenseMng .createLicense{background-color: #951c1c;border: 1px solid #951c1c;}

/***************** 다크모드 디자인 끝 *****************/

/* btn-float */

.btn_float {position: fixed;bottom: .8em;right: 0.7em;padding: 1.2em 1.4em 1.2em 2.9em;box-shadow: 0px 19px 40px 0 rgb(0 0 0 / 10%);background-image: linear-gradient(135deg, #0c4da2, #0981f1);border-radius: 1.5em;border: 0;font-size: 1.2em;font-weight: 700;letter-spacing: 0;color: #fff;transition: box-shadow .15s ease-in-out;}

.btn_float.add:after {content: '';position: absolute;width: 1em;height: 1em;background-size: contain;background-repeat: no-repeat;left: 1.3em;transform: translateY(1px);
  background-image: url(../img/icon-plus-w.png);
}

.btn_float.top {bottom: 5em;height: 3.5em;}

.btn_float.top:after {content: '';position: absolute;width: 1em;height: 1em;background-size: contain;background-repeat: no-repeat;background-position: center center;left: 1.7em;transform: rotate(-90deg);
  background-image: url(../img/icon-chevron-w-r.png);
}

.btn_float_box {position: fixed;bottom:1em; right:1em}
.btn_float_box > a {display:block;}
.btn_float_box > a+a {margin-top:0.7em;}

.btn_floatN {box-shadow: 0px 8px 8px 0 rgb(0 0 0 / 40%);background-image: linear-gradient(162deg, #5589ae 0%, #023a6f 100%);border-radius: 100%; width:60px; height:60px; position:relative;}

/* .btn_floatN.add:after {content: '';position: absolute;width: 100%;height: 100%;background-size: 48%;background-repeat: no-repeat;background-position: center center;
  background-image: url(../img/icon-plus-w.png);
  } */

.btn_floatN.add:after {content: '\f067'; font-family:'fa'; font-weight:500; font-size:34px; color:#fff; width: 100%; height: 100%; display:flex; align-items:center; justify-content:center}
.btn_floatN.camera:after {content: '';position: absolute;width: 100%;height: 100%;background-size: 45%;background-repeat: no-repeat;background-position: center center;
  background-image: url(../img/icon-camera-w.png);
}
.btn_floatN.top {opacity:60%; display:none;}
.btn_floatN.top:after {content: '\f077'; font-family:'fa'; font-weight:500; font-size:34px; color:#fff; width: 100%; height: 100%; display:flex; align-items:center; justify-content:center}
/* .btn_floatN.top:after {content: '';position: absolute;width: 100%;height: 100%;background-size: 20%;background-repeat: no-repeat;background-position: center center;left:0;transform: rotate(-90deg);
  background-image: url(../img/icon-chevron-w-r.png);
} */





@media screen and (min-width: 941px){
  body .btn_float_box {display: none;}
}