@charset "UTF-8";

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


/*레이아웃*/
#wrap{min-width:1600px; overflow-x: auto; height: 100%;}
#header{display: fixed;top:0; width:100%; z-index: 999; 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{z-index: 1; float:left; font-size:18px; line-height: 50px; color:#d7d8da;}
#header .top div{z-index: 1;}
#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{z-index: 1; float:left;}
#header .user{ font-size:13px;line-height:14px; color:#c7c7c7; margin-right:10px;}
#header .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;}

.cont_main{width:100%; height:100%; background-size:cover;background: url(../images/cont_bg.jpg);}

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

/*버튼*/
button{font-size:14px;  text-align: center;}
button.disable {cursor: default;opacity: 0.2;}
button.btn_basic{padding:0 20px; height:36px; line-height:36px;color:#fff; background: #262626; border:0; margin-left: 5px;}

button.btn_b{width:80px; height:36px; line-height:36px;color:#fff; background: #262626; border:0; margin-left: 5px;}
button.btn_pop{width:80px; height:37px; color:#fff; background: #33353d; border:0; border-radius: 3px;margin: 0 2px;}
button.door_close{width:34px; height:37px; background: url(../images/btn_door_close.png); }
button.pop_detail{width:34px; height:37px;color:#eee; background: #33353d; border:0; border-radius: 3px;margin: 0 2px; font-size:13px; }
button.btn_sbox{display: flex; padding: 3px 10px; color:rgba(255,255,255,0.9); border-radius: 3px;font-size:12px; }
button.red{ background: #8f1111; }
button.nor{ background: #3a3a3a; }

button.btn_s{width:60px; height:24px; line-height:24px;color:#fff; background: #262626; border:0; margin-left: 5px;}

/*메인*/
.main_map{background: url('../images/main_map.jpg')no-repeat center center;width:1902px; height:952px; background-size:1902px 952px;}

ul.mlayer{margin:5px;}
ul.mlayer li{float:left; padding:0 5px; border-right: 1px solid #cdcdcd;}
ul.mlayer li:last-child{border:none;}
ul.mlayer li p{display: flex; align-items: center; justify-content: space-between;}
ul.mlayer li p > span{width:24px; display: flex; align-items: center; justify-content:center;}
ul.mlayer li span.alarm{display: inline-block; margin: 0 2px; width:22px; height:15px; color:#fff; font-size:10px;text-align: center;line-height: 14px; font-weight: 300;border-radius: 3px; }

.plant_name .sum_info{padding-top:10px;margin:10px 0 7px 14px; border-top: 1px solid #cdcdcd;}



/*설계도*/
.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_03_p{background:url('../images/plant_03_panel.svg')no-repeat center center;width:1730px; height:860px;background-size:1730px 860px;}

.plan_02{background:url('../images/plant_02.svg')no-repeat center center;width:1363px; height:780px;background-size:1363px 780px;}
.plan_s_02{background:url('../images/plant_steel_02.svg')no-repeat center center;width:1168px; height:808px;background-size:1168px 808px;}
.plan_h_02{background:url('../images/plant_hot_02.svg')no-repeat center center;width:1445px; height:860px;background-size:1445px 860px;}

.plant_test{background:url('../images/test.svg')no-repeat center center;width:1056px; height:672px;background-size:1056px 672px;}


/*정온식감지선형*/
.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:60px;height:60px; background:url(../images/door/blue_close_h_e.svg)no-repeat;}
.r_close_h_e{width:60px;height:60px; background:url(../images/door/red_close_h_e.svg)no-repeat;}
.o_close_h_e{width:60px;height:60px; background:url(../images/door/orange_close_h_e.svg)no-repeat;}

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

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

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


.cont_tit{ padding:5px 30px; display:flex; align-items: center;justify-content: space-between; }
.cont_box{position: relative; width:99%;height:90%; 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);}
.cont_box2{position: relative; width:99%;height:90%; margin:0 auto; box-sizing: border-box; background:#fff; padding: 20px 50px; border:1px solid #a1a1a1; border-radius: 8px; box-shadow: 2px 2px 3px 0 rgba(0,0,0,.1);}

.cont_table_tit{display:flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px;}
.table_l{font-weight:600;}

/*공장*/
.icon_plant_g{width:18px;height:16px; background:url(../images/icon_plant_g.svg)no-repeat;}
.icon_plant_r{width:18px;height:16px; background:url(../images/icon_plant_r.svg)no-repeat;}
.icon_plant_o{width:18px;height:16px; background:url(../images/icon_plant_o.svg)no-repeat;}
.plant_name{position:absolute; }
.plant_name > span{ position: relative; font-size:13px;  font-weight: 800; color:#fff; line-height: 14px;
text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;}

/*검색*/
.fire_area{display:flex; align-items: center;}
.fire_box{line-height:30px;  margin:5px 0 5px 10px; padding:0 10px;  }
.fire_box li{display:inline-block;margin-right:10px;}
.fire_box li:last-child{margin-right:0;}
.fire_box li label{margin-right:2px;}

.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; }
.switch{margin:0 10px;}


.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:12background:#fff;6px; 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: 10px; font-size:14px;color:#0f0f0f; font-weight: 600;}
.legend li label{margin-right:3px;}


.side_box_t{position:absolute; display: flex; align-items: center; justify-content: center; z-index:2;top:15px; right:15px;padding:0 8px; height:40px; border:1px solid #cbcbcb; background: #fff;}
.side_box_t img{margin-right:1px;}
.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 3px; 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, .r_l_box{position:absolute;}
.s_box{display: flex; align-items: center; justify-content: space-between;  height:16px; border-radius:3px;  color:#fff; line-height: 16px;}
.s_box > img{display: inline-block; margin-left:3px;height:80%;}
 
.s_box2{display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-left:2px;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;padding-left: 5px;  font-size:10px; height:16px;line-height: 16px; border-radius:7px;  color:#fff;  background: #666; }
.r_box > img{display: inline-block;  height:90%;}

.s_box span,.r_box span,.r_l_box span{ display: inline-block; min-width:12px;height:12px;margin:0 2px;padding:0 2px; box-sizing: border-box; letter-spacing: -0.5px; line-height: 12px;font-size:10px; color:#333;font-weight: 300; background: #fff;border-radius: 6px;text-align:center; }

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

.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_area .tooltip {  display:none;  position:absolute; top:14px;  left:0;  padding:8px;  background: #fff; z-index: 100;}
.tooltip_area .tooltip p.tit{padding-bottom:5px; margin-bottom:10px;font-size:12px; color:#000; font-weight: bold; border-bottom:1px dotted #666;}
.tooltip button.detail{position:absolute; bottom:-18px; left:-0;width:100%;height:20px;line-height:12px;font-size:10px; color:#fff;}
.tool_g{border:2px solid #5a5958; border-bottom:16px solid #5a5958;}
.tool_r{border:2px solid #8f1111; border-bottom:16px solid #8f1111;}
.tool_o{border:2px solid #e4842e; border-bottom:16px solid #e4842e;}

.tooltip ul.icon_box{display: flex;}
.tooltip ul.icon_box li{width:40px; margin: 0 2px;  }
.tooltip ul.icon_box li p.img{width:100%;height:25px;text-align: center;}
.tooltip 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);}
}
#mask_fire2{ animation: fadebackground 1s infinite; z-index: 9999;width: 1902px; height: 952px; 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: 800px; overflow-y: auto; background: #fff; transform:translate(-50%, -50%);box-sizing: border-box;border-radius: 4px;}

/*팝업*/
.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; box-sizing: border-box;}

.pop_close{content:""; display:block; position: absolute; top:10px; right:10px;width:20px; height:20px;background: url(../images/btn_pop_close.png);background-size: 20px 20px; }
.pop_head{display: flex;align-items: center; justify-content:space-between; margin-bottom: 10px; padding-right:5px; box-sizing: border-box;}
.pop_head .r_area{ display:flex; }
.pop_h1{font-size:20px; color:#cb0808; font-weight:500; line-height:28px; text-indent: 8px; }
.pop_h2{font-size:20px; color:#000; font-weight:500; line-height:28px; margin-bottom: 10px;}


.pop_border{width:98%; border-bottom:2px dashed #ddd; margin:10px auto;}
.pop_top{width:100%; display:inline-flex; align-items: flex-start; margin:5px 0;}
.pop_top .sum_tit{font-size:16px;  padding:5px 20px; line-height: 26px; margin-left: 20px; background: #363636; color:#fff; border-radius: 3px;}

.sum_border{border:2px solid #ddd; padding:5px 10px 10px 10px;  margin:5px 5px 10px 5px; border-radius: 5px;}
.sum_border .tit{font-size:11px; text-align:center; font-weight: bold; padding-bottom: 3px; margin-bottom: 10px; background: #666; color:#fff;}
.sum_box{display: flex; }
.sum_box li{padding:0 10px;  }
.sum_box li p.img{width:100%;height:25px;text-align: center;}
.sum_box li p.txt{width:100%;font-size:10px; color:#000;text-align: center;line-height: 12px; }

.txt_temp{font-size:14px; font-weight: 600;}
.t_red{color:#8f1111;}

.sum_info{margin-left: 40px; display:flex; align-items: center; }
.sum_info img{margin-right:10px;}
.sum_info span.info_num{display:inline-block; width:15px; height:15px;line-height: 13px; 
	font-size:10px;margin-right: 2px; text-align: center; border-radius: 100%; color:#fff;}

.sum_info span.info_pump{display:inline-block; padding:0 5px; height:15px;line-height: 13px; 
	font-size:10px;margin-right: 2px; text-align: center; border-radius: 2px; color:#fff;}

.detail_cont{display:flex; flex-wrap: wrap;  }
.de_box{display:flex; justify-content: space-between; margin:5px 5px 10px 5px;}

.de_box .icon{width:38px;margin-right: 3px;font-size:10px;}
.de_box .graph{width:229px; height:50px;}

.de_box p.img{text-align: center;}
.de_box p.txt{text-align: center;}


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


.pop_footer{width:100%; margin-top: 20px; text-align: center; }

/*테이블*/
.basic{ font-size:14px; width:100%;box-sizing: border-box; }
.basic thead{background: #f0f0f0;}
.basic thead tr th{padding:10px; color:#000; border:1px solid #ddd; vertical-align: middle;}
.basic tbody tr th,.basic tbody tr td{padding:10px;line-height:20px; border:1px solid #ddd; box-sizing: border-box;}
.basic tbody tr th{text-align: left;}
.basic tbody tr td{text-align:center;}

.pop_table table{ font-size:14px; width:100%;box-sizing: border-box; }
.pop_table table th:nth-child(even){background: #fff; text-align: center;}
.pop_table table th{ color:#000; background: #f0f0f0; }
.pop_table table td{color:#666; }
.pop_table table th, .pop_table table td{padding: 10px; border:1px solid #ddd;  vertical-align: middle; text-align:left;}

.pop_table textarea{width:100%;}

/*가로테이블*/
.pop_table{font-size:14px; width:100%;box-sizing: border-box; }

/*탭*/
.btn_tab_txt {position: relative;}
.btn_tab_txt ul {display:flex;  margin-bottom: 2px; }
.btn_tab_txt ul li {flex:1;height:40px; margin-right: 2px; border:1px solid #ccc;font-weight: bold; box-sizing: border-box;}
.btn_tab_txt ul li:last-child{margin-right: 0;}
.btn_tab_txt ul li.on {background:#3a3a3a; border:none;}
.btn_tab_txt ul li a {display:block; font-size:14px; color:#666; line-height:40px;text-align:center;}
.btn_tab_txt ul li.on a {color:#fff;}
.tab_contents{display:none; }
.tab_contents.on{display:block;}

.check_selectbox{width:100%;font-size:14px; border:1px solid #eee; background: #fefefe;  padding:10px 20px; margin-bottom: 20px; box-sizing: border-box; }
.check_selectbox ul{}
.check_selectbox li{display: inline-block;  height:26px; margin-right: 10px; vertical-align: middle;}
.check_selectbox .total{width:80px;}
.check_selectbox .tit{ width:120px; font-weight: 800; }



.graph_iframe{width:100%; height:630px; overflow-y:scroll; }
.graph_box{width:98%;display:flex; justify-content: space-between; margin:5px 5px 10px 5px;}

.graph_box .icon{width:60px;margin-right: 3px;font-size:10px;}
.graph_box .graph{width:95%; height:50px;}

.graph_box p.img{text-align: center;}
.graph_box p.txt{text-align: center;}

.cont_bt{width:100%; margin-top:20px;}

.pagination {position:absolute; left:50%;transform:translateX(-50%); display: flex; justify-content: center; align-items: center; width:400px;  }

.pagination a{display:inline-block; width:36px; height:36px; font-size:14px; line-height:36px; color:#c5c5c5;font-weight:600; text-align: center;}
.pagination a:hover{color:#1b1b1b;}
.pagination a.on{color:#1b1b1b;}

/*사용자관리*/
.user_sp{margin:10px 0 20px 0; float:right;}

/*h3블릿*/
.h3_bl01{height:40px; font-size:20px; font-weight: bold;}
.h3_bl01:before{display: inline-block; content: ""; width:5px; height:5px; border-radius: 5px; background: red; margin-bottom: 6px; margin-right: 5px;}
.h3_bl02{height:40px; font-size:20px; font-weight: bold;margin-top: 30px;}
.h3_bl02:before{display: inline-block; content: ""; width:5px; height:5px; border-radius: 5px; background: blue; margin-bottom: 6px; margin-right: 5px;}