#container {padding-left: 35px; padding-right: 35px; }

.info_panel {
	display: flex; 
	justify-content: space-between; 
	margin-top:-25px;
	padding: 10px 20px;
    background-color: #f8f9fd;
	border-radius: 1em;
}
.info_panel > div {
	position: relative; 
	width: 32.5%; 
	
}
.info_panel .mia_con {background: #fff; cursor: pointer; height:130px;}

.panel_cont {
	margin-top: 1em; 
	display: flex; 
	flex-flow: wrap;
	justify-content: space-between; 
	background-color: #f8f9fd;
	padding: 15px 20px;
	border-radius: 1em;
}
.panel_cont > div {width: 49%; }
.panel_cont > div#accicon { background: #fff; }


#signboard {margin:5px; display: inline-block;  background: #808080;  color: #fff; border-radius: 30px; padding: .2em 1.25em; font-size:1.5em; }

#select_safe button {
	display: inline-block; 
	/* margin-top:5px; 
	margin-left: .5em; 
	margin-right:5px; */
	padding: .1em 1em; 
}

/* #select_safe button:first-child {margin-left: 0;  }  */


.panel_cont .mia_con {background: #fff; padding: 1.75em; }

 
 
#line-chart, #line-chart2, #line-chart_2, #line-chart3, #bar-chart_3, #bar-chart,#bar-chart2, #bar-chart3 { 
	position: absolute;
	left: 28px;
}



/*그래프 좌우슬라이드 버튼*/ 
/* Slider */ 
/* .slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat;
} */

/* .slick-list {
	height: 320px;
} */

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('../fonts/slick/slick.eot');
    src: url('../fonts/slick/slick.eot?#iefix') format('embedded-opentype'), url('../fonts/slick/slick.woff') format('woff'), url('../fonts/slick/slick.ttf') format('truetype'), url('../fonts/slick/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 30px;
    height: 30px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

#Previous:before,
#Next:before
{
    font-family: 'slick';
    font-size: 30px;
    line-height: 1;
    opacity: .75;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#Previous
{
	z-index: 3;
    left: 6px;
}
[dir='rtl'] .slick-prev
{
    right: 25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
} 

#Next
{
    right: 17px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: 25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

#graph_subject_date{
	
	float:right;
	margin-top:-3px; 

}

/*구별그래프 흰바탕처리*/ 
#u_traffic{
 
	background-color:white;
}

.gungu_map_table td {
	background-color:white;
}



/*대기환경 전체 제목*/ 
/* #environment_subject{
	font-size:1.7em;
	color:#000000;
	margin-top: -0.7em;
} */

/* #environment_subject::before{
	font-size:1.7em;color:#000000;
		  content:'';
	  display:inline-block;
	  width:4px;
	  height:20px;
	  margin:-5px 10px auto auto;
	  vertical-align:middle;
	  background:rgb(128, 128, 128);
} */


/*대기환경 전체 제목*/  
#environment_subject_on{
	font-size:1.7em;
	color:#000000;
	margin-top: -0.7em;

	
}
/* #environment_subject_on::before{
	  content:'';
	  display:inline-block; 
	  width:4px;
	  height:20px;
	  margin:-5px 10px auto auto;
	  vertical-align:middle;
	  background:rgb(0, 160, 0);
	
} */


/*교통상황 전체 제목*/ 
/* #traffic_subject{
	font-size:1.7em;
	color:#000000;
	margin-top: -0.7em;
} */

/* #traffic_subject::before{
	font-size:1.7em;color:#000000;
		  content:'';
	  display:inline-block;
	  width:4px;
	  height:20px;
	  margin:-5px 10px auto auto;
	  vertical-align:middle;
	  background:rgb(128, 128, 128);
} */

#traffic_subject_on{
	font-size:1.7em;
	color:#000000;
	margin-top: -0.7em;

}

/* #traffic_subject_on::before{
	font-size:1.7em;color:#000000;
		  content:'';
	  display:inline-block;
	  width:4px;
	  height:20px;
	  margin:-5px 10px auto auto;
	  vertical-align:middle;
	  background:rgb(0, 129, 204);
} */



/*재난안전 전체 제목*/
/* #safe_subject{
	color:#000000;
	font-size:1.7em;
	margin-top: -0.7em;
 
} */


/* #safe_subject::before{
	  content:'';
	  display:inline-block;
	  width:4px; 
	  height:20px;
	  margin:-5px 10px auto auto;
	  vertical-align:middle;
	  background:rgb(128, 128, 128);
} */


#safe_subject_on{
	font-size:1.7em;
	color:#000000;
	margin-top: -0.7em;
	
}
/* 
#safe_subject_on::before{ 
	  content:'';
	  display:inline-block;
	  width:4px; 
	  height:20px;
	  margin:-5px 10px auto auto;
	  vertical-align:middle;
	  background:rgb(255, 127, 0);
} */
 
 
/*재난안전 산불위험현황 그래프*/
#graph_present{
	margin-top:-0.8em; 
	color:#000000; 
	float:left;
	
}

/* #graph_present::before{
	  content:'';
	  display:inline-block;
	  width:4px;
	  height:20px;
	  margin:-5px 10px auto auto; 
	  vertical-align:middle;
	  background:rgb(255, 127, 0);
} */
 
/*재난안전 산불위험지수 그래프 제목*/
#graph_subject_s{margin-top:-15px; padding-bottom:5px; border-bottom: 1px outset; text-align:left; color:#000000; } 

/* #graph_subject_s::before{
	content:'';
	display:inline-block;
	width:4px;
	height:20px;
	margin:-5px 10px auto auto;
	vertical-align:middle;
	background:rgb(255, 127, 0);
} */
	

/*교통상황 교통돌발 발생현황 테이블*/
#graph_present_u{
	margin-top:-0.8em; 
	color:#000000; 
	float:left;
}

#main_table_title {
	margin-top:-0.8em; 
	color:#000000; 
	float:left;
}


/* #graph_present_u::before{
	
	  content:'';
	  display:inline-block;
	  width:4px;
	  height:20px;
	  margin:-5px 10px auto auto;
	  vertical-align:middle;
	  background:rgb(0, 129, 204);
} */
	
/*교통상황  그래프 제목*/
#graph_subject_u{margin-top:-15px; padding-bottom:5px; border-bottom: 1px outset; text-align:left; color:#000000;} 

/* #graph_subject_u::before{
	content:'';
	display:inline-block;
	width:4px;
	height:20px;
	margin:-5px 10px auto auto;
	vertical-align:middle;
	background:rgb(0, 129, 204);
} */
	
	
	
/*대기환경 대기예보 발생현황 그래프*/
#graph_present_e{
	margin-top:-0.8em; 
	color:#000000; 
	float:left;
	
}

/* #graph_present_e::before{
	content:'';
	display:inline-block;
	width:4px;
	height:20px;
	margin:-5px 10px auto auto;
	vertical-align:middle;
	background:rgb(0, 160, 0);
} */
	
/*대기환경 그래프 제목*/
#graph_subject_e{margin-top:-15px; padding-bottom:5px; border-bottom: 1px outset; text-align:left; color:#000000;} 

/* #graph_subject_e::before{
	content:'';
	display:inline-block;
	width:4px;
	height:20px;
	margin:-5px 10px auto auto; 
	vertical-align:middle;  
	background:rgb(0, 160, 0);
}   */
   
#environment_1, #totaltraffic_1, #safe{   
	 
	 border-radius: 1em;  
}
#black_3, #green ,#blue , #yellow, #black_2, #black_1{
	
	border-radius:  1em 1em 0 0; 
}  
  

#environment, #totaltraffic, #incident, #traffic_table, #table_dash_1, #table_dash{  
	border-radius: 20px 20px 20px 20px;  
}

#table_dash {
	height: 250px;
	box-shadow: 0 0 15px 0px rgb(62 60 98 / 8%);
}
 
.slick-track, .slider-wrap, .slick-list {   
	/* box-shadow: 0px 2px 5px  rgb(0 0 0 / 20%); */
	border-radius: 20px 20px 20px 20px;
}

 #graph_dash_1, #graph_dash_11, #graph_dash1

 {  
	 
	 border-radius: 20px 20px 20px 20px;
}

 #graph_dash_2, #graph_dash_12, #graph_dash2

 {  
	 
	 border-radius: 20px 20px 20px 20px;
} 

 #graph_dash_3, #graph_dash_13, #graph_dash3
 {  
	 
	 border-radius: 20px 20px 20px 20px; 
	 
}

#edge{
	
	padding:10px;
}
 
 
#accicon { 
	border-radius: 23px 23px 23px 23px;
	box-shadow: 0 0 15px 0px rgb(62 60 98 / 8%);
}
#accicon_2 { 
	border-radius: 23px 23px 23px 23px;
	box-shadow: 0 0 15px 0px rgb(62 60 98 / 8%);
}

/* table */
#mainTable {background: #fff; height: 50px; overflow-y: auto;  } 
#mainTable {text-align: center; width: 100%;  }
#mainTable {padding: 0.5em; font-size: 0.875em; } 
#mainTable th{ font-size: 1.3em; padding: 0.2em; font-weight:bold;}   
#mainTable td{ font-size: 1.2em; } 

#ulsansafe_1 {background: #fff; height: 50px; overflow-y: auto;  }
#ulsansafe_1 {text-align: center; width: 100%;  }
#ulsansafe_1 {padding: 0.5em; font-size: 0.875em; } 
#ulsansafe_1 th{ font-size: 1.3em; padding: 3px 0px; font-weight:bold;}    
#ulsansafe_1 td{ font-size: 1.2em; padding: 3px 0px;} 

#uljuTableU1 {background: #fff; height: 50px; overflow-y: auto;  } 
#uljuTableU1 {text-align: center; width: 100%;  }
#uljuTableU1 {padding: 0.5em; font-size: 0.875em; } 
#uljuTableU1 th{ font-size: 1.3em; padding: 0.2em; font-weight:bold; width:50px;}   
#uljuTableU1 td{ font-size: 1.2em; } 
 
#dongTableU1 {background: #fff; height: 50px; overflow-y: auto;  } 
#dongTableU1 {text-align: center; width: 100%;  }
#dongTableU1 {padding: 0.5em; font-size: 0.875em; } 
#dongTableU1 th{ font-size: 1.3em; padding: 0.2em; font-weight:bold;}   
#dongTableU1 td{ font-size: 1.2em; } 
 
#bukTableU1 {background: #fff; height: 50px; overflow-y: auto;  } 
#bukTableU1 {text-align: center; width: 100%;  }
#bukTableU1 {padding: 0.5em; font-size: 0.875em; } 
#bukTableU1 th{ font-size: 1.3em; padding: 0.2em; font-weight:bold;}   
#bukTableU1 td{ font-size: 1.2em; }   

#jungTableU1 {background: #fff; height: 50px; overflow-y: auto;  } 
#jungTableU1 {text-align: center; width: 100%;  }
#jungTableU1 {padding: 0.5em; font-size: 0.875em; } 
#jungTableU1 th{ font-size: 1.3em; padding: 0.2em; font-weight:bold;}    
#jungTableU1 td{ font-size: 1.2em; }   

#namTableU1 {background: #fff; height: 50px; overflow-y: auto;  } 
#namTableU1 {text-align: center; width: 100%;  }
#namTableU1 {padding: 0.5em; font-size: 0.875em; } 
#namTableU1 th{ font-size: 1.3em; padding: 0.2em; font-weight:bold;}   
#namTableU1 td{ font-size: 1.2em;}    
 


#uljuTable {background: #fff; height: 50px; overflow-y: auto;  } 
#uljuTable {text-align: center; width: 100%;  }
#uljuTable {padding: 0.5em; font-size: 0.875em; } 
#uljuTable th{ font-size: 1.3em; padding: 0.2em; font-weight:bold;}   
#uljuTable td{ font-size: 1.2em; }   


#dongTableE2 {background: #fff; height: 50px; overflow-y: auto;  } 
#dongTableE2 {text-align: center; width: 100%;  }
#dongTableE2 {padding: 0.5em; font-size: 0.875em; } 
#dongTableE2 th{ font-size: 1.3em; padding: 0.2em; font-weight:bold;}   
#dongTableE2 td{ font-size: 1.2em; }   

#bukTableE3 {background: #fff; height: 50px; overflow-y: auto;  } 
#bukTableE3 {text-align: center; width: 100%;  }
#bukTableE3 {padding: 0.5em; font-size: 0.875em; } 
#bukTableE3 th{ font-size: 1.3em; padding: 0.2em; font-weight:bold;}   
#bukTableE3 td{ font-size: 1.2em; }   
 
 
#jungTableE4 {background: #fff; height: 50px; overflow-y: auto;  } 
#jungTableE4 {text-align: center; width: 100%;  }
#jungTableE4 {padding: 0.5em; font-size: 0.875em; } 
#jungTableE4 th{ font-size: 1.3em; padding: 0.2em; font-weight:bold;}   
#jungTableE4 td{ font-size: 1.2em; }   

#namTableE5 {background: #fff; height: 50px; overflow-y: auto;  } 
#namTableE5 {text-align: center; width: 100%;  }
#namTableE5 {padding: 0.5em; font-size: 0.875em; } 
#namTableE5 th{ font-size: 1.3em; padding: 0.2em; font-weight:bold;}     
#namTableE5 td{ font-size: 1.2em; }    

#ulsansafe {background: #fff; height: 50px; overflow-y: auto;  }  
#ulsansafe {text-align: center; width: 100%;  }
#ulsansafe {padding: 0.5em; font-size: 0.875em; } 
#ulsansafe th{ font-size: 1.3em; padding: 0.2em; font-weight:bold;}   
#ulsansafe td{ font-size: 1.2em; }    
  






/* 황진석 */

.info_panel .map_info_area {
	padding: 10px;
	background-color: #fff;
}

.info_panel .mia_con {
	display: inline-block;
}

.subject_title {
	display: inline-block;
	padding: 5px 26px;
    margin-bottom: 8px;
	color: #000000;
	background-color: #f7f7f7;
	border-radius: 30px;
	font-weight: 500;
}

.subject_title.on {
	color: rgb(255, 255, 255);
    background-color: rgb(86, 205, 202);
}

.map_info_area.mia_type1.on {
	border: 2px solid #56cdca;
    box-shadow: 0 0 15px 5px rgb(62 60 98 / 8%);
}


#cont_header {
	width: 100%;
	/* min-height: 30px; */
}

.subject_title.cont.on {
	margin-bottom: 12px;
}

#map_show_location {
	margin: 0px 12px;
    padding: 4px 14px;
    background-color: #e0e6ec;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
}

#updated_time {
	float: right;
    margin: 0px 12px;
    margin-top: 8px;
    padding: 4px 14px;
    background-color: #e0e6ec;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
}

#map_cont_header {
	height: 44px;	
}

#select_safe {
	padding: 12px 24px 0px;
}

#select_safe > a {
	margin: 0px 10px;
    padding: 5px 0px;
    font-size: 16px;
    font-weight: 400;
	cursor: pointer;
}

#select_safe > a.on {
	color: rgb(86, 205, 202);
    font-weight: 600;
	border-bottom: 2px solid;
}


#traffic_table {
	position: relative; 
	z-index: 3;
	top: 398px;
    left: 50px;
	margin-left: 5%; 
}


.gungu_map_part.on {
	stroke: rgba(79, 186, 192, .85);
	stroke-width: 5px;
}

/* openlayers */
#change_gis {
    padding: 12px 24px 0px;
}
#change_gis > .change {
    margin: 0px 10px;
    padding: 5px 0px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}
#change_gis > .change.on {
    color: rgb(255, 147, 0);
    font-weight: 600;
    border-bottom: 2px solid;
}
#gis_map_wrap {
    position: relative;
    width: 100%;
    height: calc(100% - 44px);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#gis_map_wrap #olMap {
    width: 100%;
    min-width: 620px;
    height: 100%;
    padding: 12px 25px;
    border-radius: 6px;
}
#gis_map_wrap #olMap canvas {
    border-radius: 6px;
}
#gis_map_wrap .fire_legend {
    position: absolute;
    bottom: 1.5em;
    right: 1.5em;
    background-color: white;
    z-index: 5;
    padding: 12px;
    border-radius: 6px;
}
#gis_map_wrap .fire_legend img {
    width: 100%;
    height: 100%;
}
#gis_map_wrap .fire_legend .title {
    font-weight: 800;
    margin-bottom: 6px;
}
#gis_map_wrap .fire_legend > ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-direction: column;
}
#gis_map_wrap .fire_legend > ul > li{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
#gis_map_wrap .fire_legend > ul > li > .cl{
    width: 20px;
    height: 20px;
}
#gis_map_wrap .fire_legend > ul > li > .val{
    width: 20px;
    height: 20px;
    margin-left: 4px;
    margin-bottom: -12px;
    font-weight: 800;
}

/* 지도 위 float 창 */
#traffic_1 {
	background: linear-gradient(135deg, rgba(12,188,145,1) 0%, rgba(12,163,255,1) 100%);
	border-radius: .5em;
}

#traffic_1.fire {
	padding: 10px;
}


.gungu_map_table_title {
	font-size: 22px !important;
	padding-left: 4px;
}

.gungu_map_table_uptime {
	clear: left;
	padding: 5px 0px;
	padding-left: 4px;
}

.gungu_map_table th {
    font-weight: 600;
}

.gungu_map_table th, .gungu_map_table td {
	padding: 4px 0px;
	border: 1px solid #d1d8e0;
}

.gungu_map_table td:nth-child(1) {  
	font-weight: 600;
}


/* 테이블 */
#table_dash_1 {
	height: 250px;
	padding-bottom: 40px !important;
}

#table_dash h2 {
	padding: 12px 0px;
}

#table_dash h2::before {
	content: '';
    display: inline-block;
    width: 4px;
    height: 13px;
    margin: -5px 10px auto auto;
    vertical-align: middle;
    background: linear-gradient(135deg, rgba(12,188,145,1) 0%, rgba(12,163,255,1) 100%);
}

#table_dash table {
	border-top: 1px solid #333;
	border-width: 2px 1px 0 1px;
}

#table_dash table th,
#table_dash table td {
	border: 0px;
	border-top: 1px solid #dee2e6;
	font-size: 1em;
	padding: 0.5em;
}

#table_dash table th {
	border-right: 1px solid #dee2e6;
}

#table_dash table td {
	border-right: 1px solid #dee2e6;
}

#table_dash table tbody tr:last-child td {
    border-bottom: 3px double #dee2e6;
}


/* 테이블 스크롤바 */
::-webkit-scrollbar {
	width: 6px;
	height: 20px;
}
::-webkit-scrollbar-track {
	background-color: #f5f5f5;
}
::-webkit-scrollbar-track-piece {
	background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: #cdcdcd;
}


/* 그래프 */
.slider-wrap {
    box-shadow: 0 0 15px 0px rgb(62 60 98 / 8%);
}

.graph_card .graph_uptime {
	display: none;
}

.graph_card h2 {
	padding: 5px 0px !important;
	border: 0px !important;
}

.graph_card h2::before {
	content: '';
    display: inline-block;
    width: 4px;
    height: 13px;
    margin: -5px 10px auto auto;
    vertical-align: middle;
    background: linear-gradient(135deg, rgba(12,188,145,1) 0%, rgba(12,163,255,1) 100%);
}

/* 하천수위 위치 아이콘 */
.riverLevelLocImg {
	width: 30px !important;
	height: 30px !important;
}

/* 하천수위 모달창 */
#riverLevelModalCont {
	width: 100%;
    height: 100%;
    background: #393F4F;
    /* border-radius: .5em; */
}

.riverBridgeTitle {
	padding-left: 10px;
    font-size: 26px !important;
}

.riverLevelVal {
	position: absolute;
    color: white;
    bottom: 78%;
    left: 0;
    right: 0;
	margin: 0 auto;
	margin-left: 185px;
    width: 200px;
    font-size: 24px;
}

.riverLevelStat {
    position: absolute;
    color: white;
    bottom: 62%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 200px;
}

#riverLevelModalCont > img {
	position: relative;
	width: 80%;
    padding-bottom: 14px !important;
}

.riverLeverStatVal {
	font-size: 22px;
}

.riverLevelUnit {
	font-size: 12px;
	padding: 0px 4px;
}

.riverLevelStat > span {
    padding: 0px 2px;
}

.slick-dots {
	bottom: 1px !important;
}

/* 하천시설 정보 모달창 */
.waterInfo_modal{display: block;}
.waterInfo_modal.off{display: none;}
#waterInfo_modal{
	position: absolute;
	z-index: 9;
	top: 60%; left: 50%;
    transform: translate(-50%, -60%);
	background-color: white;
	border: 1px solid #393F4F;
	text-align: center;
	width: 550px;
	/* height: 600px; */
	overflow: auto;
}
.waterInfo_wrap {
	display: flex;
	flex-direction: column;
}
.waterInfo_wrap .info_cont {
	display: flex;
	flex-direction: column;
}
.info_cont .waterInfo_title{
	height: 30px;
	color: white;
	background-color: #393F4F;

	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
}
.part_wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10px;
}
.part_wrap .waterInfo {
	flex:1;
	border-left: 1px solid #d3d3d3;
	border-top: 2px solid #56cdca;
	display: flex; flex-direction: column;
}
.info_cell {
	font-size: 10pt;
	width: inherit; height: inherit;
	border-right: 1px solid #d3d3d3;
	border-bottom: 1px solid #d3d3d3;
	display: flex; justify-content: center; align-items: center;
}
.col_label{background-color: rgb(249, 254, 255); font-weight: bold;}
#info_grid{
	flex: 1;
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: 0.5fr 1fr;
}
#info_img_wrap{
	background: #393F4F;
	border-right: 1px solid #d3d3d3;
	height: 200px;
	max-height: 200px; 
	display: flex;
	box-sizing: border-box;
}
#info_img_wrap img {
	margin: auto;
	width: 70%;
}
#detail_grid{
	border-top: 1px solid #d3d3d3;
	flex: 1;
	display: grid;
	grid-template-rows: repeat(10, 1fr);
	grid-template-columns: repeat(4, 1fr);
}
#detail_grid div.merge{
	grid-column: span 3;
}

/* 하천수위현황 그래프 모달 */
/* #waterLevelModal * { outline: red 1px solid;} */
.waterLevelModal.off { display: none;}
.waterLevelModal{ 
	display: block;
	position: absolute;
	z-index: 9;
	width: 700px; height: 450px;
	background-color: white;
	border: 1px solid black;
	top: 50%; left: 35%;
    transform: translate(-50%, -50%);
	color: black;
}
.waterLevelModal .content_wrap{
	width: 100%; height: 100%;
	display: flex;
	flex-direction: column;
}
.waterLevelModal .content_wrap .title{
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
}
/*  */
.waterLevelModal .content_wrap .canvas_wrap{
	flex: 1;
	display: flex;
	flex-direction: column;
}
.canvas_wrap canvas{
	flex: 8;
	padding: 10px;
}
#waterLv_legend{
	flex: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 5px;
}
#waterLv_legend ul{ width: 100%;}






.atmos_tot_unit {
	font-size: 14px;
}

.atoms_modal_unit {
	font-size: 10px;
}

.atoms_table_unit {
	font-size: 9px;
}