@charset "UTF-8";

.wrap {
  display: flex;
  flex-direction: column;
  min-width: 1600px;
  height:100vh;
}

.head{
  width:100%; 
}

/* 헤더 */
#header {
  display: flex;
  height: 50px;
  padding: 0 30px;
  background: #33353d;
  color: #d7d8da;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
#header h1 {font-size: 16px;}
#header .login {
  width: 18px;
  height: 13px;
  background: url(../images/logout.png) no-repeat center / 100%;
}

/* 지앤비 */
#gnb {display: flex; height: 46px; padding: 0 30px; background: #292a31; font-size: 16px; color: #b7c1ca; align-items: center; justify-content: space-between;}
#gnb ul {display: flex;}
#gnb li {margin-right: 50px;}
#gnb li > a {display: block;}
#gnb li > a.on {color: #75d3cb;}
#gnb .user {
  padding-left: 30px;
  background: url(../images/user.png) no-repeat left / 22px ;
  font-size: 14px;
}

/* 사이드 컨텐츠 */
#container { 
  display: flex;
  flex-direction: column;
  background: #d7d8da;
  height:100%;
  padding:7px 15px 0 15px;
  box-sizing: border-box;
}
#container h2{height:30px;}
#container .cont {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.25);
  background: #fff;
  margin-top: 8px;
  margin-bottom: 8px;
  box-sizing: border-box;
}
#container .side {
  position: absolute;
  right: 20px;
  top: 35px;
  font-size: 14px;
}

#container .signal, #container .fire li {
  display: flex;
  height: 60px;
  padding: 0 12px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  align-items: center;
}
#container .signal .img-wrap {width: 32px; margin-right: 8px;}
#container .signal .img-wrap img {display: block; width: 100%;}
#container .signal p {padding: 8px 10px; box-sizing: border-box; border-radius: 5px; background: #005689; font-size: 14px; color: #fff;}

#container .fire .img-wrap {width: 24px; margin-right: 5px;}
#container .fire .img-wrap img {display: block; width: 100%; }
#container .fire .text-wrap {display: flex; align-items: center;}
#container .fire .text-wrap > p {font-size: 12px; padding: 8px; margin-right: 3px; box-sizing: border-box; border-radius: 5px; color: #fff;}

#container .fire .text-wrap > p.normal {background: #005689;}
#container .fire .text-wrap > p.error {background: #c40000;}

/*설계도*/
.mapdiv{ width:100%;height:100%;  overflow:hidden;}
.mapimg{position:relative;  margin:0 auto; padding:0;}
.map{  background:url('../images/map.svg')no-repeat center center; width:1100px; height:712px;background-size: 1100px 712px; margin-top: 50px;}
.default{position: absolute; }
.default img{opacity: 0.5;width:82%;}