@charset "UTF-8";
html {height: 100%;}
body {height: 100%;}
.wrap {min-width: 1600px; height: 100%;}

/* normal, error 컬러 공통*/
.gray{background: #666;}
.red{background:#8f1111;}

/* 헤더 */
#header {
  display: flex;
  height: 50px;
  padding: 0 30px;
  box-sizing: border-box;
  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;}

/* 지앤비 */
#gnb {display: flex; 
  height: 46px; 
  padding: 0 30px; 
  box-sizing: border-box; 
  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;}

#container {
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  background: #d7d8da;
}
#container [class ^= "cont"] {
  position: relative;
  width: 100%;
  height: 100%; 
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.25);
  background: #fff;
}

/* 사이드 컨텐츠 */
#container .side {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 14px;
  z-index: 100;
}

#container .signal, #container .summary 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;
  background: #fff;
}

#container .signal .img-wrap {
  width: 24px; 
  margin-right: 5px;
}
#container .signal .img-wrap img {
  display: block; 
  width: 24px;
}
#container .signal p {
  width:57px;
  padding: 8px 0;
  text-align: center;
  box-sizing: border-box; 
  border-radius: 3px; 
  font-size: 12px; 
  color: #fff;
  margin-left: 3px;
}

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


/* map 구역 */
#container .mapdiv{ 
  width:100%;
  height:100%;  
  overflow:hidden;
}

#container .map_img { 
  position:relative;  
  margin:0 auto; 
  padding:0;    
}

#container .plant_01 {
  width: 1200px;
  height: 770px;
  background: url(../images/map_01.svg) no-repeat center;
  background-size: 1200px 770px;
  margin-top: 50px;
}

#container .map_img .box {
  position: absolute;  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color:#eee;
}
.plant{
  display:flex; 
  justify-content: center; 
  align-items: center;  
  opacity: 0.7;
  font-size:0;
}
.normal{
  background: #666;
}
.fire{ 
  background: #8f1111;  
}

/*툴팁*/
.tooltip_area{
  position: relative;
  cursor: pointer;
}
.tooltip_area:hover .tooltip {
  display:block;
}
.tooltip_area .tooltip {  
  display:none;  
  position:absolute; 
  top:-86px;  
  left:-5px;  
  padding:8px;  
  background: #fff; 
  z-index: 99;
}

.tooltip_area .tooltip p.tit{   
  font-size:12px; 
  height:20px; 
  line-height: 20px;
  color:#000; 
  font-weight: bold; 
  border-bottom:1px dotted #666;
  padding-bottom: 5px;
}

.tooltip ul.icon_box{
  display: flex;
  min-width:180px;
  padding-top: 10px;
}
.tooltip ul.icon_box li{
  font-size:12px;
  min-width:40px; 
  line-height:24px; 
  color:#666;
}

.tool_normal{border:2px solid #000; border-radius:5px;}
.tool_fire{border:2px solid #8f1111; border-radius:5px;}