:root{
  --ci-bg-color: #042036;
  --gnb-bg-color: #103b85;
  --gnb-menu-bg-color: #2a3f5f;
  --main-menu-color: #86b0e2;
  --main-menu-hover-color: #5675a3;
  /* --sub-menu-hover-color: #056cbd; */
}

/******************************** GNB icon ************************************/
.gnbWrapPC .singleMenu .mainMenu .icon{width: 24px; transition: all 0.2s ease;position: relative;text-shadow: 0 4px 4px rgba(0,0,0,0.3);text-align: center;}
.gnbWrapPC .singleMenu .mainMenu .icon img{height: 24px; transition: all 0.2s ease;margin-top: 3px;}
.gnbWrapPC .shy-menu-panel ul:hover li.singleMenu div.mainMenu img {transform: scale(1); filter: none;}
.gnbWrapPC .shy-menu-panel ul li.singleMenu:hover .mainMenu .icon img {cursor:pointer; transform: scale(1.3); filter: brightness(200%);}
.gnbWrapPC .shy-menu-panel.clear ul li.singleMenu div.mainMenu img {transform: scale(1); filter: none; color: unset !important;}

.gnbWrapPC ul.userLogout > div img:first-child {position:absolute; top:0; left:0; width: 20px !important; height: 20px !important; margin-top: 0 !important;}
.gnbWrapPC ul.userLogout > div img:last-child {position:absolute; bottom:-7px; right:-7px; width: 20px !important; height: 20px !important; margin-top: 0 !important;}

/******************************** GNB ************************************/
#gnb {z-index:11;position: fixed; height: 100%;}
#gnbScreen {width:100%; height:calc( 100% - 60px ); position:absolute; top:60px; 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:var(--gnb-menu-bg-color); width: 160px; top: 60px; position: fixed; left: 0; -webkit-transition: left 0.3s; transition: left 0.3s; height: 100%;}
.gnbWrapPC .com {display:none; font-size:12px; font-weight:500; background-color:#e30000; color:#fff; margin-top:6px; padding:4px 0}
.gnbWrapPC.hide{left: -160px;}
.gnbWrapPC .userName:hover {color:#fff}
.shy-menu{width: 100%;height: calc(100% - 60px);overflow-y: auto;-ms-overflow-style:none; scrollbar-width:none;}
.shy-menu .shy-menu-panel{height: fit-content;display: flex; flex-direction: column; justify-content: space-between;}
.shy-menu .shy-menu-panel::-webkit-scrollbar{width: 0;}
.gnbWrapPC .singleMenu {position: relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px 0 12px 15px; gap:6px; cursor: pointer; height: 48px;}
.gnbWrapPC .singleMenu i {width: 24px; font-size:1.5rem; transition:all 0.2s ease; position:relative; text-shadow:0 4px 4px rgba(0,0,0,0.3); text-align:center}
.gnbWrapPC .singleMenu .mainMenu{padding: 0;width: 100%; display: flex;flex-direction: row;color: var(--main-menu-color);align-items: center;justify-content: flex-start;gap: 15px;}
.gnbWrapPC .singleMenu .mainMenu > span {font-size: 0.875rem;letter-spacing: -1px;font-weight: 400; line-height: 1.2;}
.gnbWrapPC .singleMenu .mainMenu > span.admin:after {font-family: 'fa';font-weight: 900;content: "\f521"; padding-left: 0.25rem;}
.gnbWrapPC .shy-menu-panel ul:hover li{background-color: transparent;}
.gnbWrapPC .shy-menu-panel ul:hover li.singleMenu div.mainMenu i {font-size: 1.5rem; color: unset !important;}
.gnbWrapPC .shy-menu-panel ul:hover li.singleMenu div.mainMenu span{color: unset !important;}
.gnbWrapPC .shy-menu-panel.clear ul li{background-color: transparent;}
.gnbWrapPC .shy-menu-panel.clear ul li.singleMenu div.mainMenu i {font-size: 1.5rem; color: unset !important;}
.gnbWrapPC .shy-menu-panel.clear ul li.singleMenu div.mainMenu span {color: unset !important;}
.gnbWrapPC .singleMenu:hover {color:#fff; font-size:larger; background-color: var(--main-menu-hover-color) !important;}
.gnbWrapPC .singleMenu:hover i {cursor:pointer; font-size:1.75rem !important;}
.gnbWrapPC .singleMenu:hover .mainMenu{color: #fff;}
.gnbWrapPC .singleMenu .subMenu{position: fixed; top: 60px; left: 160px; background-color: rgba(77, 84, 94,0.5); width: 200px; height:calc( 100% - 60px ); display: none; overflow-x: hidden; z-index: 100;}
.gnbWrapPC .singleMenu.hold {color:#fff; font-size:larger; background-color: var(--main-menu-hover-color) !important;}
.gnbWrapPC .singleMenu.hold i {cursor:pointer; font-size:1.75rem !important;}
.gnbWrapPC .singleMenu.hold .mainMenu{color: #fff;}
.gnbWrapPC .singleMenu.hold .mainMenu img {filter: brightness(200%) !important;transform: scale(1.2) !important  ;}
.gnbWrapPC .singleMenu.hold .subMenu{display: block; z-index: 99;}
.gnbWrapPC .singleMenu .subMenu .mainMenuTitle{display: none;}
/* .gnbWrapPC .singleMenu:hover .subMenu{display: block;} */
.gnbWrapPC .singleMenu ul.subMenu>li {width: 100%; display: flex; align-items: center; }
.gnbWrapPC .singleMenu ul.subMenu>li a{font-size: 0.875rem; color: #fff; padding: 14px 0 14px 20px; transition: 0.3s all ease; width: 100%; position: relative; background-color:#5675a3;}
.gnbWrapPC .singleMenu ul.subMenu>li a:hover{background-color:#7b9dc4; text-decoration:none !important}
.gnbWrapPC ul.userLogout > div  {display:flex; align-items:center; justify-content:center; text-shadow:0 2px 4px rgba(0,0,0,0.3); position:relative; width:24px; height:24px}
/* .gnbWrapPC ul.userLogout > div::before {content:'\f406'; font-family:'fa'; font-weight:700; font-size:20px; position:absolute; top:0; left:0;}
.gnbWrapPC ul.userLogout > div::after {content:'\f011'; font-family:'fa'; font-family:'fa'; font-weight:700; font-size:20px; position:absolute; bottom:-7px; right:-7px;} */
.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'}

.gnbWrapHeader{position: fixed; top: 0; left: 0; width: 100%; height:60px; background-color: var(--gnb-bg-color); display: flex; flex-direction: row; gap:16px; background: linear-gradient(270deg, #0948a7 0%, #112f5d 60%); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);}
/* .gnbWrapHeader .gnbInfo {width:160px; text-align:center; color:#fff; display: flex; align-items: center;} */
.gnbWrapHeader .gnbInfo {width:fit-content; text-align:center; color:#fff; display: flex; align-items: center}
.gnbWrapHeader .ci {width:fit-content; height:100%; display:flex; align-items:center; justify-content:center; padding:0 10px}
/* .gnbWrapHeader .ci .ciPc {width:110px} */
.gnbWrapHeader .ci .ciMobile {display: block; width:46px}
.gnbWrapHeader .ci span {display:none}
/* .gnbWrapHeader .projectTitle{height: inherit; font-size: 1.5rem; display: flex; align-items: center; color: #fff; font-weight: 600; width: calc(100% - 290px);} */
.gnbWrapHeader .projectTitle{height: inherit; font-size: 1.5rem; display: flex; align-items: center; justify-content:center; color: #fff; font-weight: 600; flex:1}
.gnbWrapHeader .pushAlarmTot {position: relative; width: 65px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.gnbWrapHeader .pushAlarmTot:hover i{color: #fff; font-size: 1.625rem;}
.gnbWrapHeader .pushAlarmTot.on i{color: #fff; font-size: 1.625rem;}
.gnbWrapHeader .pushAlarmTot span {background-color:red; border-radius:30px; color:#fff; font-size:12px; font-weight:700; padding:4px; position:absolute; top:15px; right:15px; min-width:20px; text-align:center; }
.gnbWrapHeader .pushAlarmTot i {color:var(--main-menu-color); font-size:1.5rem; display:block; transition: all 0.2s ease; text-shadow:0 4px 4px rgba(0,0,0,0.3);}

@media screen and (max-width:940px) {
  #gnbScreen.show{display: block;}
}
  
/*** Hamburger ***/
.userNameOnlyAndroid {display:none}
.shy-menu-div{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}
.shy-menu-div.is-open .shy-menu-hamburger .layer.top {top:14px; left:6px; transform:rotate(45deg)}
.shy-menu-hamburger .layer.mid { top:14px; left:6px }
.shy-menu-div.is-open .shy-menu-hamburger .layer.mid {opacity:0; left:0}
.shy-menu-hamburger .layer.btm { top:21px; left:6px }
.shy-menu-div.is-open .shy-menu-hamburger .layer.btm {top:14px; left:6px; transform:rotate(-45deg)}

.shy-menu-hamburger.pcHamberger{display: inline-block}
.shy-menu-hamburger.pcHamberger>span{background: #8da6c2; transition: all 0.1s ease;}
.shy-menu-hamburger.pcHamberger:hover>span{background: #fff; transform: scale(1.1,1.1);}

@media (hover:hover) {
.shy-menu-hamburger.pcHamberger:hover{background: var(--gnb-menu-bg-color); border-radius: 3px;}
}

:root{
  --ld-bg-color: #0b1a34;
  --ld-bd-color: #0b1a34;
  --ld-switch-color: #4476cc;
  --ld-icon-off-color: #426bb3;
}

/* 라이트다크모드 버튼 */
#lightDarkDiv{ width: 120px; height: fit-content; margin: 10px auto 30px;display: none;}
#lightDarkDiv .lightDark {width: 100%; display: inline-flex; align-items: center; position: relative; overflow: hidden;}
#lightDarkDiv .lightDark .ldLabel{width: 100%; display: inline-flex; align-items: center; position: relative;height: 40px; flex: auto; background: var(--ld-bg-color); border-radius: 30px; border: 2px solid var(--ld-bd-color); cursor: pointer;}
#lightDarkDiv .lightDark .switch{position: absolute; width: 60px; height: 36px; background: var(--ld-switch-color); border-radius: 30px; top: 0; left: 0; transition: all 0.2s ease;}
#lightDarkDiv .lightDark .lightIcon,
#lightDarkDiv .lightDark .darkIcon{position: absolute; width: 25px; height: 25px;}
#lightDarkDiv .lightDark .lightIcon{left: 16px;}
#lightDarkDiv .lightDark .darkIcon{right: 16px;}
#lightDarkDiv .lightDark .lightIcon i,
#lightDarkDiv .lightDark .darkIcon i{font-size: 1.5em; transition: color 0.2s ease;}
#lightDarkDiv .lightDark .lightIcon i {color: #ffffff;}
#lightDarkDiv .lightDark .darkIcon i{color: var(--ld-icon-off-color);}
#lightDarkDiv .lightDark input[type="checkbox"]{width: 100%; height: 100%; position: relative; flex: auto; appearance: none; margin: 0; cursor: pointer;}
#lightDarkDiv .lightDark input[type="checkbox"]:checked ~ .switch{left: 56px;}
#lightDarkDiv .lightDark input[type="checkbox"]:checked ~ .lightIcon i{color: var(--ld-icon-off-color)}
#lightDarkDiv .lightDark input[type="checkbox"]:checked ~ .darkIcon i{color: #ffffff;}

/* 알람컨텐츠부분 */
#gnbAlarm{position: fixed; top: 60px; right: 0; width: 400px; height: calc(100% - 60px); background: #fafcfe; box-shadow: -6px 0 20px 0 rgba(50,50,50,0.1); display: none; flex-direction: column; z-index: 50; border-left: 1px solid #d8d8d8;}
#gnbAlarm.show{display: flex;}
.alarmTopDiv{width: 100%; height: fit-content; display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; font-size: 1.125rem;}
.alarmTopDiv>.title{font-weight: 700;}
.alarmTopDiv .close{cursor: pointer; padding: 0 4px; height: 18px;}
.alarmTopDiv .close::after{content:'\f00d'; font-family: 'fa'; font-weight: 900;}
.alarmTabDiv{width: 100%; height: calc(100% - 48px);}
.alarmTabDiv .tabBtnDiv{ width: (100% - 40px); height: 35px; display: flex; justify-content: space-between;border-bottom: 1px solid #ccc; margin: 0 20px;}
.alarmTabDiv .tabBtnDiv .tabBox{display: flex; gap: 10px;}
.alarmTabDiv .tabBtnDiv li,
.alarmTabDiv .tabBtnDiv p{width: fit-content; padding: 5px; display: flex; align-items: center; font-size: 0.875rem; font-weight: 700; color: #aaa; cursor: pointer; position: relative;}
.alarmTabDiv .tabBtnDiv .tabBox .tabBtnList.on .tabBtn{color: #222;}
.alarmTabDiv .tabBtnDiv .tabBox .tabBtnList.on::after{ content:""; position: absolute; width: 100%; height: 3px; background: #222; bottom: 0; left: 0;}
.alarmTabDiv .tabContentsDiv{width: 100%; height: calc(100% - 35px); padding-top: 5px; overflow: auto;}
.alarmTabDiv .tabContentsDiv .alarmTabWrap{width: 100%; height: fit-content;}
.alarmTabDiv .tabContentsDiv .alarmTabWrap .tabContentsList{display: none; font-size: 0.875rem;}
.alarmTabDiv .tabContentsDiv .alarmTabWrap .tabContentsList:first-child{display: block;}
.alarmTabDiv .tabContentsDiv .alarmTabWrap .tabContentsList .contents {border-bottom: 1px solid #ccc; padding: 15px 0; margin: 0 20px; cursor: pointer;}
.alarmTabDiv .tabContentsDiv .alarmTabWrap .tabContentsList .contents .titleDate{display: flex; justify-content: space-between; height: 20px; align-items: center;}
.alarmTabDiv .tabContentsDiv .alarmTabWrap .tabContentsList .contents .titleDate .title{font-weight: 700; max-width: calc(100% - 110px); font-size: 1rem;}
.alarmTabDiv .tabContentsDiv .alarmTabWrap .tabContentsList .contents .titleDate .date{font-size: 0.75rem; color: #aaa;}
.alarmTabDiv .tabContentsDiv .alarmTabWrap .tabContentsList .contents .name{font-weight: 600; color: #444; padding: 5px 0 10px 0;}
.alarmTabDiv .tabContentsDiv .alarmTabWrap .tabContentsList .contents .workBox{display: flex; gap: 3px; flex-direction: column; color: #2f5f86; font-weight: 500;}
.alarmTabDiv .tabContentsDiv .alarmTabWrap .tabContentsList .contents .workContent{line-height: 1.3; max-height: 37px; -webkit-line-clamp: 2; -webkit-box-orient: vertical;word-wrap: break-word; display: -webkit-box; overflow: hidden;}
.alarmTabDiv .tabContentsDiv .alarmTabWrap .tabContentsList .contents .checkFile{display: none;}

@keyframes s2 {
  from 	  {opacity:0; right:-200px}
  to	{opacity:1; right:-14px}
}

@media screen and (min-width:941px) {
  .shy-menu .shy-menu-panel {height: fit-content;}
}

@media screen and (max-width:940px) {
  #gnb {position: unset; height: unset;}
  .gnbWrapHeader {align-items: center; height: 60px; background-color:var(--gnb-menu-bg-color); background:linear-gradient(162deg, var(--gnb-menu-bg-color) 0%, var(--gnb-bg-color) 100%); gap: 0;}
  .gnbWrapHeader .gnbInfo {background-color:unset; width: 70px; justify-content: center;} 
  .gnbWrapHeader .ci {background-color:transparent;}
  .gnbWrapHeader .ci .ciPc {width:93px;}
  .gnbWrapHeader .ci .ciMobile {width:40px;}
  .gnbWrapHeader .ci span {font-size:13px; font-weight:600; margin-left:7px; display:inline-block}
  .gnbWrapHeader .projectTitle{font-size: 1.25rem; text-align: center;}
  .gnbWrapHeader .projectTitle span{width: 100%;}
  .gnbWrapHeader .pushAlarmTot{width: 40px; margin-left: auto}
  .gnbWrapHeader .pushAlarmTot span{top: 12px; right: 0; font-size: 10px;}
  .gnbWrapHeader .pushAlarmTot i{color: #fff; font-size: 1.25rem;}
  .gnbWrapHeader .pushAlarmTot:hover i{font-size: 1.25rem;}
  .gnbWrapHeader .pushAlarmTot.on i{font-size: 1.25rem;}

  .gnbWrapPC {width: auto; padding: 0;top: 60px; right: 0; left: auto;}
  /* .gnbWrapPC .shy-menu { overflow-y: auto;} */
  .gnbWrapPC.hide{left: auto;}
  .shy-menu-div {min-width: 60px; display: flex;align-items: center; justify-content: center;}
  .gnbWrapHeader .shy-menu-hamburger {display:inline-block; color:rgba(0,0,0,0.4);margin-right: 0.25rem;}
  .shy-menu-div .shy-menu-hamburger {margin-left: 0;}
  .gnbWrapPC .shy-menu-panel {display:none; animation-name:s2; animation-duration:0.3s; animation-delay:0s; animation-fill-mode:both; animation-timing-function:ease; width: 180px;padding: 0;}
  .gnbWrapPC .shy-menu-panel>ul{width: 100%;padding-bottom: 1rem;}
  .gnbWrapPC .singleMenu{padding: 0;}
  .gnbWrapPC .singleMenu>.mainMenu{width: 80%; padding: 9px 10px; margin: 0 auto;}
  .gnbWrapPC .singleMenu:last-child{border: none;}
  .gnbWrapPC .shy-menu-panel .singleMenu:hover{background-color: var(--main-menu-hover-color);}
  .gnbWrapPC .shy-menu.is-open .shy-menu-panel {display:flex;}
  .gnbWrapPC .singleMenu ul.subMenu{left: auto; right: 180px; top: 60px; height: calc(100% - 60px); background-color: rgba(86, 117, 163,0.5); padding: 0; width: 180px;}
  .gnbWrapPC .singleMenu ul.subMenu>li a{padding: 15px 0 15px 20px;}

  .shy-menu-hamburger.pcHamberger{display: none;}

  #gnbAlarm{top: 60px; height: calc(100% - 60px);}
  /* .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;}
  .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;} */
}

@media screen and (max-width:640px) {
  /* .gnbWrapHeader .gnbInfo{width: 60px;}
  .gnbWrapHeader .projectTitle{font-size: 1.25rem; width: calc(100% - 150px);}
  .gnbWrapHeader .ci .ciPc {display:none}
  .gnbWrapHeader .ci .ciMobile {display:block; width: 40px;} */
  .gnbWrapPC .shy-menu-panel{width: 65px;}
  .gnbWrapPC .singleMenu>.mainMenu{justify-content: center; width:100%; padding:0}
  .gnbWrapPC .singleMenu>.mainMenu>span{display: none;}
  .gnbWrapPC .singleMenu ul.subMenu{right: 65px;}
  .gnbWrapPC .singleMenu .subMenu .mainMenuTitle{display: flex; font-size: 1rem; color: #fff; padding: 15px 0 20px 20px; font-weight: 600; cursor:auto; background-color: #5675a3 !important; height:48px}
  #gnbDashboard .gnbWrapPC .singleMenu .subMenu .mainMenuTitle{background-color: transparent;}

  #lightDarkDiv {width: 40px; height: fit-content;}
  #lightDarkDiv .lightDark .ldLabel{height: 85px;}
  #lightDarkDiv .lightDark .switch{width: 36px; height: 36px; top: 0;}
  #lightDarkDiv .lightDark .lightIcon{top: 8px; left: 8px;}
  #lightDarkDiv .lightDark .darkIcon{bottom: 2px; right: auto; left: 8px;}
  #lightDarkDiv .lightDark input[type="checkbox"]:checked ~ .switch{left: auto; top: 45px;}
  #lightDarkDiv .lightDark .lightIcon i, #lightDarkDiv .lightDark .darkIcon i{font-size: 1.25rem;}
  
  #gnbAlarm{width: 100%;}
}

@media screen and  (max-width:300px) {
  .alarmTabDiv .tabContentsDiv .alarmTabWrap .tabContentsList .contents .titleDate{flex-direction: column; height: auto; align-items: flex-start; gap: 3px;}
  .alarmTabDiv .tabContentsDiv .alarmTabWrap .tabContentsList .contents .titleDate .title{max-width: 100%;}
}

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 , body.mm100 .mn100 ,
body.mm110 .mn110 , body.mm120 .mn120 , body.mm130 .mn130
{background-color: var(--main-menu-hover-color);}

/* @media screen and (max-width:940px) {
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 , body.mm100 .mn100 ,
body.mm110 .mn110 , body.mm120 .mn120 , body.mm130 .mn130
{background-color: var(--main-menu-hover-color);}
} */

body.mm10 .mn10 i, body.mm20 .mn20 i, body.mm30 .mn30 i, body.mm40 .mn40 i, body.mm50 .mn50 i, 
body.mm60 .mn60 i, body.mm70 .mn70 i, body.mm80 .mn80 i, body.mm90 .mn90 i,body.mm100 .mn100 i,
body.mm110 .mn110 i, body.mm120 .mn120 i, body.mm130 .mn130 i, .gnbWrapPC .shy-menu-panel .singleMenu.on .fas
{color:#fff !important; font-size:1.75rem; text-shadow:0 3px 0 rgba(0,0,0,0.1)}

body.mm10 .mn10 span, body.mm20 .mn20 span, body.mm30 .mn30 span, body.mm40 .mn40 span, body.mm50 .mn50 span, 
body.mm60 .mn60 span, body.mm70 .mn70 span, body.mm80 .mn80 span, body.mm90 .mn90 span, body.mm100 .mn100 span,
body.mm110 .mn110 span, body.mm120 .mn120 span, body.mm130 .mn130 span, .gnbWrapPC .shy-menu-panel .singleMenu.on span
{color:#fff !important;}

body.mm10 .mn10 img, body.mm20 .mn20 img, body.mm30 .mn30 img, body.mm40 .mn40 img, body.mm50 .mn50 img, 
body.mm60 .mn60 img, body.mm70 .mn70 img, body.mm80 .mn80 img, body.mm90 .mn90 img,body.mm100 .mn100 img,
body.mm110 .mn110 img, body.mm120 .mn120 img, body.mm130 .mn130 img {filter: brightness(200%); transform: scale(1.3);}

/************************* site gnb 색상 *************************/
:root{
  --site-gnb-menu-bg-color: #474747;
  --site-main-menu-color: #b6b6b6;
  --site-main-menu-hover-color: #6e6e6e;
}

:root{
  --site-ld-bg-color: #353535;
  --site-ld-bd-color: #4b4b4b;
  --site-ld-switch-color: #868686;
  --site-ld-icon-off-color: #818181;
}
/* 사이트 이름 임시 */
.projectTitle .site{display: none;}
body.site .projectTitle .ellipsis{display: none;}
body.site .projectTitle .ellipsis.site{display: block}
@media screen and (min-width:940px) {
	body.site .projectTitle .ellipsis.site{padding: 1rem 1rem 0;border-radius: 0 0 1.25rem 1.25rem;height: 80%;margin-bottom: auto;box-shadow: 0px 5px 11px #00000099;background: linear-gradient( 0deg, #858181 0%, #565656 60%);}
}
/* 사이트 이름 임시 끝 */

body.site .gnbWrapPC{background-color: var(--site-gnb-menu-bg-color);}
/*body.site .gnbWrapPC .singleMenu:hover{color: #fff; background-color: var(--site-main-menu-hover-color) !important;}*/
/*body.site .gnbWrapPC .singleMenu.hold{background-color: var(--site-main-menu-hover-color) !important;}*/
body.site .gnbWrapPC .singleMenu .mainMenu{color: var(--site-main-menu-color);}
body.site .gnbWrapPC .singleMenu:hover .mainMenu{color: #fff;}
body.site .gnbWrapPC .singleMenu.hold .mainMenu{color: #fff;}
body.site .gnbWrapPC .shy-menu-panel ul:hover li{background-color: transparent;}
body.site .gnbWrapPC .singleMenu .subMenu{background-color: rgba(20, 20, 20,0.5);}
body.site .gnbWrapPC .singleMenu ul.subMenu>li a{background-color:#6e6e6e;}
body.site .gnbWrapPC .singleMenu ul.subMenu>li a:hover{background-color: #919191;}
body.site .gnbWrapHeader{background: linear-gradient(270deg, #515151 0%, #313131 60%);}
body.site .gnbWrapHeader .pushAlarmTot i{color: var(--site-main-menu-color);}
body.site .gnbWrapHeader .pushAlarmTot:hover i{color: #fff;}
body.site .shy-menu-hamburger.pcHamberger>span{background: var(--site-main-menu-color);}
body.site .shy-menu-hamburger.pcHamberger:hover>span{background: #fff;}

/*body.mm10.site .mn10, body.mm20.site .mn20, body.mm30.site .mn30, body.mm40.site .mn40, body.mm50.site .mn50, body.mm60.site .mn60, body.mm70.site .mn70, body.mm80.site .mn80, body.mm90.site .mn90, body.mm100.site .mn100, body.mm110.site .mn110, body.mm120.site .mn120, body.mm130.site .mn130{
  background-color: var(--site-main-menu-hover-color);
}*/

@media (hover:hover) {
  body.site .shy-menu-hamburger.pcHamberger:hover{background: var(--site-main-menu-hover-color);}
  }

body.site #lightDarkDiv .lightDark .ldLabel{background: var(--site-ld-bg-color); border: 2px solid var(--site-ld-bd-color);}
body.site #lightDarkDiv .lightDark .switch{background: var(--site-ld-switch-color);}
body.site #lightDarkDiv .lightDark .lightIcon i {color: #ffffff;}
body.site #lightDarkDiv .lightDark .darkIcon i{color: var(--site-ld-icon-off-color);}
body.site #lightDarkDiv .lightDark input[type="checkbox"]:checked ~ .lightIcon i{color: var(--site-ld-icon-off-color)}
body.site #lightDarkDiv .lightDark input[type="checkbox"]:checked ~ .darkIcon i{color: #ffffff;}

#gnbDashboard .gnbWrapHeader .projectTitle {width: calc(100% - 96px - 65px - 32px); gap: 3rem;}
#gnbDashboard .gnbWrapHeader .projectTitle .dashboardWeatherDiv {width: calc(100% - 96px); flex: unset;margin: auto 0;}
#gnbDashboard .gnbWrapHeader .projectTitle .dashboardNotice {width: calc(100% + 96px + 32px); flex: unset;margin: auto 0;}
#gnbDashboard .gnbWrapHeader .projectTitle .dashboardNoticeDiv ul {padding: 0 0 0 10px;}
.dashboardWeatherDiv > div:first-child {padding-left: 1rem;}
.dashboardWeatherDiv > div:last-child {padding-right: 1rem;}
.dashboardWeatherDiv div > * {display:inline-flex; align-items:center; white-space:nowrap}
.dashboardWeatherDiv > div {display: flex; gap: 10px;}
.dashboardWeatherDiv > div .temper {color:#999; font-weight:500; margin-left:0}

#gnbDashboard > div.gnbWrapHeader > div.projectTitle > div:nth-child(2) {height: 100%;margin-bottom: auto;display: flex;align-items: center;} 


/*****************wooker 추가*****************/
/*****************wooker 추가*****************/
/*****************wooker 추가*****************/
/*****************wooker 추가*****************/
/*  대시보드용 해더의 날씨, 공지사항 용  */
body.dash_cctv .gnbWrapPC,
body.dash_site_tunnel .gnbWrapPC,
body.dash_worker .gnbWrapPC,
body.dash_sensor .gnbWrapPC {box-shadow: 0 10px 10px #000000cc;}
/* body.dash_cctv .shy-menu .shy-menu-panel {box-shadow: 0 10px 10px #000000cc;} */
.dashboardWeatherDiv > * {display:inline-flex; align-items:center; white-space:nowrap}
.dashboardWeatherDiv {flex:1; display:flex; align-items:center; gap:10px; height:41px; border:1px solid #00000077; background-color:#333; border-radius:8px; box-shadow:inset 0 6px 6px #00000033; color:#999; font-size:1.125rem; overflow:hidden}
.dashboardWeatherDiv .weatherIcon {font-size:1.5rem}
.dashboardWeatherDiv .weatherIcon::before {font-family:'fa'; color:#999; font-weight:700} 
.dashboardWeatherDiv .weatherIcon.clean::before {content:'\f185'} /* 맑음 */
.dashboardWeatherDiv .weatherIcon.cloud::before {content:'\f0c2'} /* 흐림 */
.dashboardWeatherDiv .weatherIcon.rain::before {content:'\f0e9'} /* 비 */
.dashboardWeatherDiv .weatherIcon.snow::before {content:'\f2dc'} /* 눈 */
.dashboardWeatherDiv .weatherIcon.smallRain::before {content:'\f73d'} /* 소량의 비 */

.dashboardWeatherDiv .temper {color:#999; font-weight:500; margin-left:-7px} 
.dashboardWeatherDiv .temper::after {content:'℃'; font-size:14px}

.dashboardWeatherDiv .tempLow::before {content:'\f175'; font-family:'fa'; font-weight:600; margin-right: 2px}
.dashboardWeatherDiv .tempLow {color:#999; font-size:1rem; font-weight:300} 
.dashboardWeatherDiv .tempLow::after {content:'℃'; font-size:10px}

.dashboardWeatherDiv .tempHigh::before {content:'\f176'; font-family:'fa'; font-weight:600; margin-right: 2px}
.dashboardWeatherDiv .tempHigh {color:#999; font-size:1rem; font-weight:300} 
.dashboardWeatherDiv .tempHigh::after {content:'℃'; font-size:10px}

.dashboardWeatherDiv .humidity::before {content:'\f043'; font-family:'fa'; font-weight:600; margin-right: 2px}
.dashboardWeatherDiv .humidity {color:#999; font-size:1rem; font-weight:300} 
.dashboardWeatherDiv .humidity::after {content:'%'; font-size:10px}

/* .dashboardWeatherDiv .wind::before {content:'\f72e'; font-family:'fa'; font-weight:600; margin-right: 2px} */
.dashboardWeatherDiv .wind {color:#999; font-size:1rem; font-weight:300}
.dashboardWeatherDiv .wind::after {content:'m/s'; font-size:10px}

/* dust10 미세먼지   좋음 -- 0~30 -- lv0 */
/* dust10 미세먼지   보통 -- 31~80 -- lv1 */
/* dust10 미세먼지   나쁨 -- 81~150 -- lv2 */
/* dust10 미세먼지   매우나쁨 -- 151~ -- lv3 */
/* dust25 초미세먼지 좋음 -- 0~15 -- lv0 */
/* dust25 초미세먼지 보통 -- 16~35 -- lv1 */
/* dust25 초미세먼지 나쁨 -- 36~75 -- lv2 */
/* dust25 초미세먼지 매우나쁨 -- 76~ -- lv3 */

.dashboardWeatherDiv .dust {color:#999; font-size:14px; font-weight:300; padding:2px 4px; border-radius:4px} 
.dashboardWeatherDiv .lv0 {background-color:#0b7cc1; color:#eee}
.dashboardWeatherDiv .lv1 {background-color:#0c9b0c; color:#eee}
.dashboardWeatherDiv .lv2 {background-color:#ca7901; color:#eee}
.dashboardWeatherDiv .lv3 {background-color:#de0303; color:#eee}

.dashboardWeatherDiv .dust.lv0::after {content:'µg/m 양호'}
.dashboardWeatherDiv .dust.lv1::after {content:'µg/m 보통'}
.dashboardWeatherDiv .dust.lv2::after {content:'µg/m 나쁨'}
.dashboardWeatherDiv .dust.lv3::after {content:'µg/m 매우나쁨'}

.dashboardNotice {display:flex; height:41px; overflow:hidden}
.dashboardNoticeDiv {flex:1; display:flex; height:41px; border:1px solid #00000077; background-color:#333; border-radius:8px; box-shadow:inset 0 6px 6px #00000033; overflow:hidden}
.dashboardNoticeDiv ul {display:flex; align-items:center; gap:50px; padding:0 10px; color:#999; font-size:1.125rem}
.dashboardNoticeDiv li {display:inline-block; white-space:nowrap}

.dashboardNoticeDiv li .noticeDate {font-size:1rem}

.dashboardNotice .clockDiv {font-size: 1.2rem; align-self: center; padding-left: 2rem;}
@media screen and (max-width:940px) {
  .dashboardNotice,
  .dashboardWeatherDiv {display:none}
}


/*********************** 모달 사이트이동 **************************/
#siteMoveModal .siteMoveWrap {overflow-x: hidden;padding: 1rem; background: #f9f9f9; border-radius: 0.5rem;}
#siteMoveModal .siteMoveList {height: 100%; display: flex; flex-direction: column; gap: 1rem;}
#siteMoveModal .modalBody {flex-direction:column; gap:1rem; align-items:center; width:330px; padding:2rem 1rem 1rem !important}
#siteMoveModal .ci {display:flex; justify-content:center;}
#siteMoveModal .ci img {width:60%; height:auto}
#siteMoveModal .name {font-size:1.5rem; font-weight:700; display:flex; align-items:center}
.siteMoveList li a{width: 100%;display: inline-block;font-size: 1.18rem;font-weight: bold;text-align: center;color: #223c69; background: #fff; border: 1px solid #223c69;  border-radius: 0.5rem; padding: 1rem; transition: all .2s;}
.siteMoveList li a:hover{background: #223c69; color: #fff;}