@charset "UTF-8";

html,body {height: 100%; overflow: hidden;}
body {
  font-family: "OpenSans","NotoKrR";font-size:14px;
}


/*레이아웃*/
#wrap{width:100%;height: 100%;}
#header{display: fixed; width:100%; height:96px;  background: #292a31; }
#container{width:100%; height:100%;background-color:#d7d8da;}

#header .top{display:flex;align-items: center; justify-content: space-between; width:100%; height:50px; background: #33353d; padding:0 30px; box-sizing: border-box;box-shadow: 1px 1px 3px 0 rgba(0,0,0,.3);}
#header .top h1{float:left; font-size:18px; line-height: 50px; color:#d7d8da;}
#header .top .login{width:18px; height:13px; background: url(../images/logout.png)no-repeat;  }
#header .gnb{display:flex;align-items: center; justify-content: space-between; width:100%;padding:0 30px; box-sizing: border-box;}
#header .gnb ul{float:left;}
#header .gnb .user{font-size:14px;color:#c7c7c7;line-height: 46px;}
#header .gnb .user:before{display:inline-block; content:"";width:19px; height:14px; margin-right:3px; background: url(../images/user.png)no-repeat;background-size: 19px 14px; }

#header .gnb ul li{float:left; line-height: 46px; font-size:16px; color:#b7c1ca; margin-right:50px;}
#header .gnb a{color:#b7c1ca; }
#header .gnb a.on{color:#75d3cb;}


/*공통*/
.clear_both{content: ""; display:block; clear:both;}

/*버튼*/
button{font-size:14px;  text-align: center;}
button.btn_b{width:80px; height:32px; color:#fff; background: #262626; border:0; margin-left: 5px;}
button.btn_sbox{padding: 3px 10px; color:rgba(255,255,255,0.9); border-radius: 3px;font-size:12px; }
button.red{ background: #8f1111; }
button.nor{ background: #3a3a3a; }

/*설계도*/
.mapdiv{width:100%;height:100%; overflow:hidden;}
.mapimg{ position:relative;  margin:0 auto; padding:0;}
.p3_3m{background:url('../images/3p_3m.svg')no-repeat center center;width:984px; height:770px;background-size:984px 770px;}
.p3_4m{background:url('../images/3p_4m.svg')no-repeat center center;width:1200px; height:790px;background-size:1200px 790px;}

.plan_03{background:url('../images/plan_03.svg')no-repeat center center;width:900px; height:780px;background-size:900px 780px;}
.plan_02{background:url('../images/plan_02.svg')no-repeat center center;width:1750px; height:790px;background-size:1750px 790px;}

/*정온식감지선형*/
.line{position: absolute;}

/*방화문*/
.door{ position:absolute; pointer-events: none; }

.b_open_v{width:32px;height:50px; background:url(../images/door/blue_open_v.svg)no-repeat;}
.r_open_v{width:32px;height:50px; background:url(../images/door/red_open_v.svg)no-repeat;}
.o_open_v{width:32px;height:50px; background:url(../images/door/orange_open_v.svg)no-repeat;}

.b_close_v{width:24px;height:50px; background:url(../images/door/blue_close_v.svg)no-repeat; }
.r_close_v{width:24px;height:50px; background:url(../images/door/red_close_v.svg)no-repeat;; }
.o_close_v{width:24px;height:50px; background:url(../images/door/orange_close_v.svg)no-repeat;}

.b_open_h{width:60px;height:32px; background:url(../images/door/blue_open_h.svg)no-repeat;}
.r_open_h{width:60px;height:32px; background:url(../images/door/red_open_h.svg)no-repeat;}
.o_open_h{width:60px;height:32px; background:url(../images/door/orange_open_h.svg)no-repeat;}

.b_close_h{width:60px;height:24px; background:url(../images/door/blue_close_h.svg)no-repeat;}
.r_close_h{width:60px;height:24px; background:url(../images/door/red_close_h.svg)no-repeat;}
.o_close_h{width:60px;height:24px; background:url(../images/door/orange_close_h.svg)no-repeat;}

.b_close_h_e{width:100%;height:100%; background:url(../images/door/blue_close_h_e.svg)no-repeat;}
.r_close_h_e{width:100%;height:100%; background:url(../images/door/red_close_h_e.svg)no-repeat;}
.o_close_h_e{width:100%;height:100%; background:url(../images/door/orange_close_h_e.svg)no-repeat;}

.b_open_h_e{width:100%;height:100%; background:url(../images/door/blue_open_h_e.svg)no-repeat;}
.r_open_h_e{width:100%;height:100%; background:url(../images/door/red_open_h_e.svg)no-repeat;}
.o_open_h_e{width:100%;height:100%; background:url(../images/door/orange_open_h_e.svg)no-repeat;}


.b_open_v_e{width:100%;height:100%; background:url(../images/door/blue_open_v_e.svg)no-repeat;}
.r_open_v_e{width:100%;height:100%; background:url(../images/door/red_open_v_e.svg)no-repeat;}
.o_open_v_e{width:100%;height:100%; background:url(../images/door/orange_open_v_e.svg)no-repeat;}

.b_close_v_e{width:100%;height:100%; background:url(../images/door/blue_close_v_e.svg)no-repeat;}
.r_close_v_e{width:100%;height:100%; background:url(../images/door/red_close_v_e.svg)no-repeat;}
.o_close_v_e{width:100%;height:100%; background:url(../images/door/orange_close_v_e.svg)no-repeat;}


.cont_tit{height:7%; padding:0 30px; display:flex; align-items: center;justify-content: space-between; }
.cont_box{position: relative; width:99%;height:83%; margin:0 auto; box-sizing: border-box; background: url(../images/cont_bg.jpg); padding:10px 0; border:1px solid #a1a1a1; border-radius: 8px; box-shadow: 2px 2px 3px 0 rgba(0,0,0,.1);}

.fire_area{display:flex; align-items: center;}
.fire_box{line-height:30px;  margin-left:10px; padding:0 30px;  }
.fire_box li{float:left;margin-right:26px;}
.fire_box li:last-child{margin-right:0;}
.fire_box li label{margin-right:3px;}

.fire_area .fire_s{ background: rgba(0,0,0,0.1); border:2px dotted #aeaeae; }
.fire_area .fire_e{ background: rgba(143,17,17,0.1); border:2px dotted #8f1111; }

.text_box{font-size:12px;line-height:16px;font-weight: 600;position: absolute;}
.t01{ top:205px; left:15px;}
.t02{top:367px; left:15px;}
.t03{top:509px; left:236px;}
.t04{top:440px; left:590px;}
.t05{top:56px; left:868px;}

.t01_4m{top:46px; left:1003px;}
.t02_4m{top:126px; left:1078px;}
.t03_4m{top:280px; left:998px;}
.t04_4m{top:525px; left:26px;}
.t05_4m{top:632px; left:26px;}
.t06_4m{top:728px; left:186px;}
.t07_4m{top:693px; left:753px;}
.t08_4m{top:693px; left:1000px;}

.cont_tit .title{font-size:20px; color:#33335d; font-weight: 600;}
.legend li{float:left; margin-left: 20px; font-size:14px;color:#0f0f0f; font-weight: 600;}
.legend li label{margin-right:5px;}


.side_box_t{position:absolute; display: flex; align-items: center; justify-content: center; z-index:2;top:15px; right:15px;width:100px; height:40px; border:1px solid #cbcbcb; background: #fff;}
.side_box_t img{margin-right:5px;}
.side_box{position:absolute; z-index:2;top:62px; right:15px; width:50px;background: #fff; border-radius:3px; border:1px solid #cbcbcb;}
.side_box li{padding:5px 5px 3px 5px; border-bottom: 1px solid #cdcdcd;}
.side_box li:last-child{border:none;}
.side_box li p{display: flex; align-items: center; justify-content: space-between;}
.side_box li span{width:20px; display: flex; align-items: center; justify-content:center;}
.side_box li span.alarm{display: inline-block; margin: 0 1px; width:18px; height:15px; color:#fff; font-size:10px;text-align: center;line-height: 14px; font-weight: 300;border-radius: 3px; }

.side_pump{position:absolute; z-index:2;top:322px; right:15px; width:50px; height:290px;}
.pump_icon{display: flex; align-items: center; justify-content: center; width:100%; height:40px; background: #33353d; border-radius: 5px;}
.pump_icon img{width:30px;}
.side_pump ul{width:100%;  background: #fff; border:1px dashed #666; border-radius:3px; margin-top: 2px; padding: 10px 6px 0 6px; box-sizing: border-box;}
.side_pump li{font-size:12px; font-weight: 600;}
.side_pump li:nth-child(2n){padding-bottom:6px;}
button.p_switch{display:block; content:""; width:14px; height:9px; }
.side_pump .on{background: url(../images/switch_on.png);}
.side_pump .off{background: url(../images/switch_off.png);}

.mapdiv .s_box,.mapdiv .r_box{position:absolute;}
.s_box{display: flex; align-items: center; justify-content: space-between; width:28px; height:14px; border-radius:3px;  color:#fff; line-height: 14px;}
.s_box > img{display: inline-block; margin-left:3px;height:80%;}
 
.s_box2{display: flex; align-items: center; justify-content: space-between; width:47px; height:24px; border-radius:3px;  color:#fff; line-height: 18px;}
.s_box2 > img{display: inline-block; margin-left:5px;height:80%;}
.s_box2 span{display: inline-block; width:18px;height:18px;margin-right: 4px;  line-height: 16px;font-size:10px; color:#333;font-weight: 300; background: #fff;border-radius: 100%;text-align:center;}

.r_box{ display: flex; align-items: center; justify-content: space-between; width:30px; height:14px; border-radius:7px;  color:#fff; line-height: 14px; background: #666; }
.r_box > img{display: inline-block; margin-left:5px; height:80%;}

.s_box span,.r_box span{ display: inline-block; width:10px;height:10px;margin-right: 2px;padding-right: 1px; letter-spacing: -2px; line-height: 10px;font-size:8px; color:#333;font-weight: 300; background: #fff;border-radius: 100%;text-align:center; }

.red{background:#8f1111;}
.orange{background: #e4842e;}
.gray{background: #5a5958;}

.si_l,.si_r{float:left;margin-top: 5px;}
.si_r{width:16px; font-size:12px;margin-left: 2px; text-align: center;}

.tooltip_area{position: relative; cursor: pointer;}
.tooltip_area:hover .tooltip {display:block;}
.tooltip {  display:none;  position:absolute; top:14px;  left:0; box-shadow: 0 0 0 2px #000 inset;     
	padding:8px;  background: #fff; z-index: 100;}
.tooltip button.detail{position:absolute; bottom:-18px; left:-0;width:100%;height:20px;line-height:12px;font-size:10px;background: #000; color:#fff;}
.tooltip button.door_close{display:inline-block; position:absolute; top:6px; right:8px;}

ul.icon_box{display: flex;}
ul.icon_box li{width:40px; margin: 0 2px;  }
ul.icon_box li p.img{width:100%;height:25px;text-align: center;}
ul.icon_box li p.txt{width:100%;font-size:10px; color:#000;text-align: center;line-height: 12px; }

/*화재팝업*/
#mask_fire{position: fixed; left:0; top:0;  animation: fadebackground 1s infinite; z-index: 9999;width: 100%; height: 100%; background: rgba(150, 50, 50, 0.5);}

@keyframes fadebackground {
  from {background: rgba(150, 50, 50, 0.7);}
  to {background: rgba(100,68,68, 0.4);}
}

.pop_box{ position:fixed; left:50%; top:50%; z-index: 10000;  max-height: 730px; overflow-y: auto; background: #fff; transform:translate(-50%, -50%);box-sizing: border-box;border-radius: 4px;}

.pop_h1{font-size:20px; color:#1b1b1b; font-weight:500; line-height:28px; }
.pop_conttxt1{ margin-top:12px; line-height:20px;color:#a4a4a4;}
.pop_cont{margin-top:20px; }
.pop_cont:after{content: ""; display: block; clear: both;}
.pop_btn{display: flex; justify-content:space-between; margin-top:30px;}
.pop_close{content:""; display:block; position: absolute; top:15px; right:15px;width:25px; height:25px;background: url(../images/btn_pop_close.png);background-size: 25px 25px; }

/*팝업*/
.mask {position:absolute;left:0;top:0;z-index:9999;background-color:rgba(0,0,0,0.3);display:none;}
.window {display: none;background-color: #ffffff;z-index:999999;border-radius: 4px;}
.pop_wrap{position:relative;padding:30px 30px 40px 30px; box-sizing: border-box;}
.pop_wrap ul.icon_box{padding-bottom: 20px;border-bottom:2px dashed #ddd;}

/*팝업-데이터*/
.sum_data_box{width:100%; margin-top:30px; }
.sum_data_box dt,.sum_data_box dd{float:left; }
.sum_data_box dt:first-child{width:22px;}
.sum_data_box dt{width:38px;margin-right: 6px;font-size:10px;text-align: right;}
.sum_data_box dd{width:197px; height:50px;margin-right: 10px;}
.sum_data_box dd:Last-child{margin-right:0;}

.sum_data_box dd.normal{border:2px solid #5a5958;}
.sum_data_box dd.abnormal{border:2px solid #e4842e;}
.sum_data_box dd.fire{border:2px solid #cb0808;}