@charset "utf-8";
@font-face {
	font-family:"NotoSansCJKkr";
	src:url(./font/NotoSansKR-Regular.otf);
	src:local("NotoSansCJKkr-Regular"),url(./font/NotoSansKR-Regular.otf) format("opentype");
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
}
@font-face {
	font-family:"NotoSansCJKkr-bold";
	src:url(./font/NotoSansKR-Bold.otf);
	src:local("NotoSansCJKkr-Bold"),url(./font/NotoSansKR-Bold.otf)  format("opentype");
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
}
html, body, a, label, div, li, ul, button, input, h4, title{font-family:"NotoSansCJKkr", Sans-serif !important;}
/* .d-none{display: none !important;} */
#map{width: 100%;}
/*left menu*/
.iconArea > .layerArea {position: inherit;background: #f1f4f6;width: 80px;height: 100vh;top: 0;left: 0;padding-top: 20px;}
.iconArea > .layerArea button{position: relative;background: #fff;width: 45px;height: 45px;margin: 0 0 30px 17px;border-radius: 10px;box-shadow: none;color: #2D2D2D;opacity: 1;transition: all 0.2s;}
.iconArea > .layerArea button:hover{background-color: #005eae;box-shadow:none;color: #2D2D2D;}
.iconArea > .layerArea button#dash{background: #fff url(./images/icon/path.svg) no-repeat center;}
.iconArea > .layerArea button#dash.on{background: #005eae url(./images/icon/path_w.svg) no-repeat center;}
.iconArea > .layerArea button#dash:hover{background: rgb(0, 0, 0, 0.1) url(./images/icon/path.svg) no-repeat center;}
.iconArea > .layerArea button#dash:active{background-color: rgba(255, 255, 255, 0.45);}

.iconArea > .layerArea button#\32 d{background: #fff url(./images/icon/2D.svg) no-repeat center;}
.iconArea > .layerArea button#\32 d:hover{background: rgb(0, 0, 0, 0.1) url(./images/icon/2D.svg) no-repeat center;}

.iconArea > .layerArea button#\33 d{background: #005eae url(./images/icon/3D.svg) no-repeat center;}
.iconArea > .layerArea button#\33 d:hover{background: #00427a url(./images/icon/3D.svg) no-repeat center;}

.iconArea > .layerArea button#molit{background: #fff url(./images/icon/ico-model-change.svg) no-repeat center;}
.iconArea > .layerArea button#molit.on{background: #005eae url(./images/icon/ico-model-change-2.svg) no-repeat center;}
.iconArea > .layerArea button#molit:hover{background: rgb(0, 0, 0, 0.1) url(./images/icon/ico-model-change.svg) no-repeat center;}
.iconArea > .layerArea button#molit.on:hover{background: #00427a url(./images/icon/ico-model-change-2.svg) no-repeat center;}

.iconArea > .layerArea button#chkPeople{background: #fff url(./images/icon/ico-occupant.svg) no-repeat center;}
.iconArea > .layerArea button#chkPeople.on{background: #005eae url(./images/icon/ico-occupant_w.svg) no-repeat center;}
.iconArea > .layerArea button#chkPeople:hover{background: rgb(0, 0, 0, 0.1) url(./images/icon/ico-occupant.svg) no-repeat center;}
.iconArea > .layerArea button#chkPeople.on:hover{background: #00427a url(./images/icon/ico-occupant_w.svg) no-repeat center;}

.iconArea > .layerArea button#evacuationFloor{background: #fff url(./images/icon/ico-evacuation.svg) no-repeat center;}
.iconArea > .layerArea button#evacuationFloor.on{background: #005eae url(./images/icon/ico-evacuation_w.svg) no-repeat center;}
.iconArea > .layerArea button#evacuationFloor:hover{background: rgb(0, 0, 0, 0.1) url(./images/icon/ico-evacuation.svg) no-repeat center;}
.iconArea > .layerArea button#evacuationFloor.on:hover{background: #00427a url(./images/icon/ico-evacuation_w.svg) no-repeat center;}

.iconArea > .layerArea button#safetyStatus{background: #fff url(./images/icon/ico-status.svg) no-repeat center;}
.iconArea > .layerArea button#safetyStatus.on{background: #005eae url(./images/icon/ico-status_w.svg) no-repeat center;}
.iconArea > .layerArea button#safetyStatus:hover{background: rgb(0, 0, 0, 0.1) url(./images/icon/ico-status.svg) no-repeat center;}
.iconArea > .layerArea button#safetyStatus.on:hover{background: #00427a url(./images/icon/ico-status_w.svg) no-repeat center;}

.iconArea > .layerArea button#captureCanvas{background: #fff url(./images/icon/ico-capture.svg) no-repeat center;}
.iconArea > .layerArea button#captureCanvas:hover{background: rgb(0, 0, 0, 0.1) url(./images/icon/ico-capture.svg) no-repeat center;}
.iconArea > .layerArea button#captureCanvas:active{background-color: rgba(255, 255, 255, 0.45);}

.iconArea > .layerArea button p {position: absolute;width: 100%;top: 50px;left: 0;text-align: center;word-break: keep-all;}
.iconArea > .layerArea button#chkPeople p {left: -4px;}
.iconArea > .layerArea button#safetyStatus p {left: -9px;}
/*left menu > 모델변경*/
.iconArea .molit_group{width: 100%;margin-left: 0;}
.iconArea .molit_group button{width: 45px !important;height: 45px !important;}
.molit_group:hover > ul{display:none !important;}
/*left menu > 캡쳐*/
#captureCanvas{position: absolute;left: 0;bottom: 0;margin-bottom: 40px;}

/* 복지관 select 메뉴 */
.iconArea .model_group{position: absolute;background: #f8fafc;width: 310px;top: 20px;left: 100px;margin: 0;border-radius: 10px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}
.iconArea .model_group.on{padding-bottom: 10px;}
.model_group_header{position: relative;display: flex;background: #f1f4f6;width: 100%;height: 45px;padding: 10px;border-radius: 10px;font-size: 15px !important;font-family: NotoSansCJKkr-bold;  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}
.model_group_header .selectMenu{width: 10%;margin-right: 6px;background: url(./images/icon/floating-left-menu.svg) no-repeat center;background-size: 15px;cursor: pointer;}
.iconArea .model_group.on .model_group_header .selectMenu {background: url(./images/icon/btn-close-menu.svg) no-repeat center;}
.model_group_header .header_txt{width: 60%;margin: 0;line-height: 25px;cursor: pointer;}
.model_group_header .etc_box{width: 30%;}
.model_group_header .etc_box div{background: #005eae;width: 23px;height: 23px;}
.model_group_header .etc_box div.cctv_menu {background:#005eae url(./images/icon/floating-left-1.svg) no-repeat 65% 50%;background-size: 14px;}
.model_group_header .etc_box div.cctv_menu.on{background-color: #FCBF00;}
.model_group_header .etc_box div.info_menu {background:#005eae url(./images/icon/floating-left-2.svg) no-repeat center;background-size: 6px;}
.model_group_header .etc_box div.info_menu.on{background-color: #FCBF00;}
.model_group_header .etc_box div.floor_menu {background:#005eae url(./images/icon/floating-left-3.svg) no-repeat center;background-size: 10px;}
.model_group_con{display: none;}
.iconArea .model_group.on .model_group_con{display: block;}
.iconArea .model_group button {background-color: #f8fafc;width: 100% !important;height: 30px !important;padding: 0 0 0 46px !important;font-size: 15px !important;font-weight: 300;text-align: left;}
.iconArea .model_group button.active{background: #f8fafc url(./images/icon/ico-status.svg) no-repeat 5% center;background-size: 14px;color: #005eae !important;font-family: NotoSansCJKkr-bold !important;}
.iconArea .model_group button:hover,
.iconArea .model_group button.active:hover{background: #f8fafc url(./images/icon/ico-status.svg) no-repeat 5% center;background-size: 14px;transition: none;}
.iconArea .model_group button.building_move:nth-child(1){margin-top: 10px;}

/* 현재 재실자 */
.iconArea > .layerArea .statusPeople {position: absolute;background: #f1f4f6;width: 150px;height: 45px;top: 20px;left: 420px;padding: 0;font-size: 15px !important;font-weight: 300;
    line-height: 45px;text-align: center;border-radius: 10px;box-shadow: 0px 3px 6px #00000029;}
.iconArea > .layerArea .statusPeople label {font-size: 15px !important;}

/* 복지관 하단 메뉴 */
.bottom_building_info{position: absolute;display: flex;left: 100px;bottom: 20px;}
.bottom_building_info div{display: flex;background: #f1f4f6;width: auto;height: 40px;margin-right: 10px;padding-right: 19px;font-size: 13px !important;border-radius: 10px;cursor: pointer;box-shadow: 0px 3px 6px #00000029;transition: all 0.2s ;}
.bottom_building_info div:hover{background: #d9dbdd;}
.bottom_building_info div i{width: 17px;height: 17px;margin: auto 10px !important;padding: 0 !important;}
.bottom_building_info div p{line-height: 40px;font-size: 13px !important;font-family: NotoSansCJKkr-bold !important;font-weight: normal;}

/* 대시보드 및 하단 복지관 리스트 */
.building_info{display: none;position: absolute;top: 100px;left: 100px;width: 100vw;}
.building_info.on {display: block;}
.building_info .building_info_box{background: #fff;width: 270px;height: auto;margin-right: 20px;margin-bottom: 20px;border-radius: 12px;float: left;}
.building_info_inner {background: #f1f4f6;padding: 15px 20px;box-shadow: 0px 3px 6px #00000029;border-radius: 10px;}
.building_info_header {display: flex;margin-bottom: 18px;height: 24px;}
.building_info_header .ui.circular.button{position: relative;width: 17px;height: 17px;top: 50%;transform: translateY(-50%);margin-right: 10px !important;padding: 0 !important;}
.building_info_header p{font-size: 17px !important;font-family: NotoSansCJKkr-bold !important;font-weight: normal;}
.con_line{font-size: 10px;margin-bottom: 10px;border-bottom: 1px solid #dbdbdb;}
.con_tit{width: 95px;text-align: left;position: relative;line-height: 30px;float: left;font-size: 13px;}
.con_desc{height: 30px;width: 100%;line-height: 30px;font-size: 12px;display: table-cell;}
.con_desc span{font-size: 15px;font-family: NotoSansCJKkr-bold !important;font-weight: normal;}
.con_desc span.cnt_bold{font-size: 20px;}
.building_info_bottom {background: #fff;width: 100%;height: 39px;line-height: 40px;font-size: 13px !important;text-align: center;cursor: pointer;border-radius: 10px;transition: all 0.2s ;}
.building_info_bottom:hover{background: rgb(0, 0, 0, 0.1);}

.building_info_bottom span {background: url(./images/icon/ico-detail-on.svg) no-repeat left center;padding-left: 20px;}
.building_info_bottom.on{background: #B7C9D5;color: #fff;}
.building_info_bottom.on span{background: url(./images/icon/ico-detail-off.svg) no-repeat left center;}
.building_info_list {display: none;width: 100%;height: 240px;overflow: auto;padding: 5px 20px 15px 20px;box-shadow: 0px 3px 6px #00000029;border-radius: 0 0 10px 10px;}
.building_info_list.on{display: block;}
/* 테이블 */
.basic_table {width: 100%;font-size: 12px !important;border-collapse: collapse;}
.basic_table caption{display: none;}
table.basic_table tr {border-bottom: 1px solid #ccc;line-height: 25px;}
.basic_table th {background: #fff;position: sticky;top: 0;font-weight: normal;font-family: NotoSansCJKkr-bold;}
.basic_table td {font-size: 13px;text-align: center;}
.basic_table .up{color: #333;}

/* 하단 범례 */
/* 하단 범례 > 안전상태정보 */
.legend{right: 20px;bottom: 20px;}
.legend.cctv {right: 710px;}
.legend.right {right: 328px;}
.legend ul{background: #F1F4F6;box-shadow: 0px 3px 6px #00000029;border-radius: 5px;border: 0;}
.legend ul li{opacity: 1;}
.legend ul li h4{margin-bottom: 15px;text-align: left;font-size: 13px !important;font-family: NotoSansCJKkr-bold !important;font-weight: normal;}
.legend ul span{width: 30px;height: 13px;border-radius: 3px;vertical-align: middle;}
.legend ul li{margin-bottom: 3px;}
.legend ul.safety{width: 113px;height: 190px;padding: 13px 22px 13px 17px;}
.legend ul.fire_sensor {padding: 13px 15px 15px;height: 190px;}
.legend ul.fire_sensor li{margin-bottom: 8px;}
.legend ul.peopleLegend.on{display: block;}


/* 우측 버튼 */
.pathArea{background: #F1F4F6;width: 30px;height: 45px;right: 0;transition: all 0.2s linear 0s; border-radius: 10px 0px 0px 10px;}
.pathArea.on {width: 310px; }
.pathArea.on .con{display: flex;}
.pathArea.on .btn_folding{background: #005EAE url(./images/icon/Polygon_3.svg) no-repeat center;position: absolute;width: 30px;height: 45px;border-radius: 10px 0px 0px 10px;cursor: pointer;}
.pathArea .btn_folding{background: #005EAE url(./images/icon/Polygon_3re.svg) no-repeat center;position: absolute;width: 30px;height: 45px;border-radius: 10px 0px 0px 10px;cursor: pointer;}

.pathArea .con{display: none;position: relative;left: 45px;}
.pathArea .ui.button{background: #005EAE;position: relative;width: 33px;height: 33px;top: 6px;margin: 0 10px 0 0;padding: 0 0 3px 0;color:#F1F4F6;font-size: 11px !important;font-family: NotoSansCJKkr-bold !important;font-weight: normal;box-shadow: 0px 3px 6px #00000029;}
.fire-control{display: block;margin-right: 10px;}
.pathArea #startNode:hover, #startNode.active{color: #F1F4F6;}
.fire-control .fire-group.active{position: absolute;display: block;width: 40px;margin-top: 3px;}
.pathArea .fire-control .fire-group button{margin: 2px 0}


/* 건물정보 */
.right-area{position: absolute;bottom: 0;height: calc(100% - 76px);border-radius: 10px 0px 0px 0px;transition: 1s;opacity: 0;}
.right_on > .right-area.cctv-area{width: 690px;}
.right-area.cctv-area, .right-area.cctv-area .cctv-area{display: block;opacity: 1;}
.right-area.cctv-area .cctv-area{position: absolute;bottom: 0;height: calc(100% - 48px);}
.right-area .right-info{display: none;border-radius: 10px 0px 0px 0px;}
.right-area.right-info{position: absolute;width: 308px;box-shadow: 0px 3px 6px #00000029;}
.right-area.right-info, .right-area.right-info .right-info{display: block;opacity: 1;}
/* 건물정보 > 건물정보(층정보) */
.right-info .tb_scroll{position: absolute;bottom: 0;height: calc(100% - 48px);overflow-y: scroll;}
#buildingInfo tbody {padding-top: 48px;}
#buildingInfo tr td{font-size: 12px;}
#buildingInfo tr td:first-child{background-color:#F1F4F6;}
/* 건물정보 > cctv */
.right-area .cctv-info {display: none;width: 100%;height: 100%;box-shadow: 0px 3px 6px #00000029;border-radius: 10px 0px 0px 0px;}
.right-area.cctv-area .cctv-info.on{display: block;}
.right-area .listHeader{background: #fff;border-radius: 10px 0px 0px 0px;}

/* 건물투명도 */
.map-overlay{background: #F1F4F6;width: 280px;height: 45px;top: 20px;left: 590px;padding: 12px 15px;box-shadow: 0px 3px 6px #00000029;border-radius: 10px;}
.map-overlay.on{display: block;}
.map-overlay .map-overlay-inner{display: flex;background-color: #F1F4F6;width: 100%;height: 100%;margin: 0;padding: 0;box-shadow: none;}
.map-overlay label{width: 70%;font-weight: normal;}

.map-overlay input{-webkit-appearance: none;background: linear-gradient(to right, #005EAE80 0%, #005EAE80 30%, #fff 30%, #fff 100%);
	height: 9px;border-radius: 10px;margin: auto 0}
	input[type="range" i]{color: #000;}
/* chrome -webkit */
.map-overlay input[type=range]::-webkit-slider-thumb {background-color: #005EAE;}
.map-overlay input::-webkit-slider-thumb{background: #005EAE80;height: 9px;}

/* firefox -moz */
.map-overlay input[type=range]::-moz-range-thumb {border-radius: 70%;background-color: #005EAE;}
.map-overlay input[type=range]::-moz-range-track {height: 9px;background: #fff;border-radius: 10px;}
.map-overlay input[type=range]::-moz-range-progress{background-color: #005EAE80;height: 9px;border-radius: 10px;}

/* 층리스트 */
.left_on > .left-navbar{width: 310px;height: calc(100vh - 165px);box-shadow: 0px 3px 6px #00000029;opacity: 1;}
.left-navbar{top: 85px;left: 100px;border-radius: 10px;transition: 1s;opacity: 0;}
.listHeader{background: #F1F4F6;height: 48px;padding: 13px 15px;text-align: left;font-size: 15px !important;font-family: NotoSansCJKkr-bold !important;font-weight: normal;}
.left_on .floorListArea{height: 167px !important;}
.floorListArea .listHeader{border-radius: 10px 10px 0 0;}
.btn_close{width: 13px;height: 13px;float: right;background: url(./images/icon/btn-close.svg) no-repeat center;cursor: pointer;}
.floorListArea #floorTable{position: relative;width: 100%;max-height: 100%;top: 57px;}
.floorListArea #floorTable tr td{background-color: #CCC;width: 73px;height: 15px;margin: 0 4px 0 4px;margin-bottom: 5px;float: left;color: #FFF;text-align: center;border-radius: 5px;font-size: 13px !important;font-family: NotoSansCJKkr-bold !important;font-weight: normal;}
#facilityTable td.disabled:hover{background-color: #CCC;border-radius: 5px;}
#floorTable td.active{background-color: #005EAE !important;}
.scroll_div {width: 100%;height: calc(100% - 48px);position: relative;top: 48px;}
.sensorListArea .scroll_div{height: calc(100% - 35px);}
/* .container::-webkit-scrollbar {
  width: 10px;
}
.scroll_div::-webkit-scrollbar-thumb {
  background-color: #2f3542;
}
.scroll_div::-webkit-scrollbar-track {
  background-color: grey;
} */
#spaceTable, #sensorTable{width: 100%;}
#spaceTable td, #sensorTable td {padding: 7px;}
#spaceTable td.active, #spaceTable td:hover, #sensorTable td.active, #sensorTable td:hover{background-color: #EEEEEE !important;}
#spaceTable td span{width: 17px;height: 17px;float: right;border-radius: 70%;}

#sensorTable td.group {background: url(./images/icon/ico-detail-on.svg) no-repeat 4px center;background-size: 14px;padding-left: 25px;}

/* 층리스트 > 센서리스트 차트 */
.footer-info{width: 684px !important;left: 430px;bottom: 0;border-radius: 10px;box-shadow: 0px 3px 6px #00000029;}
.footer-info.on{height: 232px;bottom: 80px;}
.footer-info .header {background: #F1F4F6;width: 100%;height: 48px;padding: 13px 14px;border-radius: 10px 10px 0px 0px;}
.footer-info .header .txt{font-size: 15px !important;font-family: NotoSansCJKkr-bold !important;font-weight: normal;line-height: 22px;}
#chartContainer{height: calc(100% - 48px);margin: 0 auto;}
.footer-info .header .btn_close{height: 22px;}

/* scrollbar */
scrollbar {scrollbar-width: thin !important;}
scrollbar-track{background-color:#eee  !important; border-radius:8px  !important;}
scrollbar-thumb {border-radius: 8px  !important; background-color: rgba(187, 187, 187, 0.993)  !important;}
scrollbar-thumb:hover{background-color: #eee  !important;}
::-webkit-scrollbar { width: 10px  !important; height: 10px  !important;}
::-webkit-scrollbar-track{background-color: #eee  !important;}
::-webkit-scrollbar-thumb { border-radius: 8px  !important; background-color: rgba(187, 187, 187, 0.993) !important;}

/* color */
.blueA_co{color: #5691c8;}
.blueB_co{color: #44bdce;}
.blue1_co{color:#005EAE;}
.blue2_co{color:#15ADC2;}
.yellowC2_co{color: #ff3;}
.yellow2_co{color: #fcbf00;}
.greenc1_co2{color: #5DA669;}
.greenc1_co{color: #349043;}
.redD_co{color:#E64C26;}
.redD_co2{color:#EB7051;}
.red1_co{color:#FF3333;}
.red2_co{color:#D62E2E;}
.redE_co{color:#DE5858;}
.orange1_co{color:#EE9645;}
/* background color */
.blueA{background-color: #5691c8 !important;}
.blueB{background-color: #44bdce !important;}
.yellow{background-color: #FCBF00 !important;}
.yellow1{background-color: #ffe133 !important;}
.yellowC2{background-color: #ff3 !important;}
.green{background-color: #198D1D !important;}
.green1{background-color: #679e40 !important;}
.greenC1{background-color: #5da669 !important;}
.green2{background-color: #40F340 !important;}
.orange1{background-color: #ee9645 !important;}
.red{background-color: #8D194F !important;}
.red1{background-color: #ff3333 !important;}
.redD{background-color: #eb7051 !important;}
.redE{background-color: #de5858 !important;}
.redF{background-color: #E2A2C4 !important;}

.font-bold{font-family: NotoSansCJKkr-bold !important;font-weight: normal;}
.font15{font-size: 15px !important;}


@media(max-width: 1200px){
	.right_on > .right-area.cctv-area {
		width: 400px;
	}
}