@font-face {
  font-family: "Pretendard-SemiBold";
  src:local(占쏙옙),
  url("../../asset/font/Pretendard-SemiBold.woff2") format("woff2"),
  url("../../asset/font/Pretendard-SemiBold.woff") format("woff"),
  url("../../asset/font/Pretendard-SemiBold.eot") format("eot"),
  url("../../asset/font/Pretendard-SemiBold.otf") format("otf"),
  url("../../asset/font/Pretendard-SemiBold.ttf") format("ttf");
  font-style:narmal;
  font-weight:normal;
}
/*base*/
html{*overflow:hidden;height:100%;font-size:12px;line-height:140%;letter-spacing:-0.03em;}
body{*overflow:hidden;height:100%;margin:0;overflow-x:hidden;font-family:'Pretendard-SemiBold';} 

/* block */
h1, h2, h3, h4, h5, h6{margin:0;font-size:1em;font-weight:normal;}
blockquote, p{margin:0;}

/* list */
dd, dl, ol, ul {margin:0;padding:0;}
li {list-style-type:none;}

/* form */
fieldset {margin:0;padding:0;border:0 none;}
input {vertical-align:middle;font-size:12px;}

/* basic */
a {color:#666; text-decoration:none;}

/* align */
.ml-5{margin-left:5px !important;}
.mt-5{margin-top:5px !important;}
.mt-110{padding-left: 15px; margin-bottom: 8px; margin-top: 8px;}

/* clear */
.clear:after{content:".";height:0;font-size:0;visibility:hidden;display:block;clear:both;}
.clear{display:inline-block;}

.clear2:after{content:".";height:0;font-size:0;visibility:hidden;display:block;clear:both;}
.clear2 {display:block;*display:inline-block;}

#go-area{overflow:hidden;position:absolute;top:0;right:0;width:100%;height:40px;background:#fff;border-bottom:1px solid #888888;z-index:1000}
@media(max-width:991px){
	#go-area{
		height:80px;
	}
}
.go-list{height:100%;}


/**/
#mapContent{overflow:hidden;position:relative;height:100%;zoom:1;}
#map{overflow:hidden;position:relative;height:100%;zoom:1;}
#map02{overflow:hidden;position:fixed;height:100%;zoom:1;border: 1px solid black; display:none; top:0px; bottom:0px; right:0px;}
.l_bar {width:1px;height:100%;position:absolute;left:0;top:0;background:#888888;z-index:9999;}
.controll_btn {position:absolute;top:50%;z-index:1000;margin-top:-33.5px}
.bt_nav_close {display:inline-block;width:19px;height:67px;background: url(../images/gis/btn_close.png) no-repeat;}
.bt_nav_open{display:inline-block;width:19px;height:67px;background: url(../images/gis/btn_open.png) no-repeat;}
.bt_nav_open{display:none}
.nav_close .bt_nav_close{display:none}
.nav_close .bt_nav_open{display:inline-block}
.nav_close #Navside{display:none;}

.controll_btn02 {position:absolute;right:50%;top:0px;z-index:1000;margin-top:-33.5px}
.bt_nav_close2 {display:inline-block;width:67px;height:15px;background: url(../images/gis/btn_close02.png) no-repeat; position:absolute;top:73px;}
.bt_nav_open2{display:inline-block;width:67px;height:15px;background: url(../images/gis/btn_open02.png) no-repeat;position:absolute;top:34px;}
.bt_nav_open2{display:none}
.nav_close2 .bt_nav_close2{display:none}
.nav_close2 .bt_nav_open2{display:inline-block}
.nav_close2 #go-area{display:none;}

/*gis */
#mapWrap{position:relative;height:100%;min-width:1000px;min-height:700px;}

#mapContainer{position:absolute; top: 0px;bottom:0px;width:100%;height:100%;overflow: hidden;}
#Navside {position:relative;float:left;width:272px;height:100%; }
#Navside.on {width:338px;}
.sidecont {height:100%;position:relative; overflow-y: hidden; overflow-x: hidden;}
.left_inside{height:100%;}
.controll_btn {position:absolute;top:50%;z-index:1000;margin-top:-33.5px}
.bt_nav_close {display:inline-block;width:15px;height:67px;background: url(../images/gis/btn_close.png) no-repeat;}
.bt_nav_open{display:inline-block;width:15px;height:67px;background: url(../images/gis/btn_open.png) no-repeat;}
.bt_nav_open{display:none}
.nav_close .bt_nav_close{display:none}
.nav_close .bt_nav_open{display:inline-block}
.nav_close #Navside{margin-left:-271px;}

#jtMap{position:relative;width:100%;height:100%;margin:0 auto;overflow:hidden;}
.map-layer {width:100%;height:100%;position:relative;}
.inside-left{position: absolute; left:0px; /*top:52px;*/bottom:0;height:100%;background-color: #373d51; }
.selbox-title01{float: left;}
@media(max-width:991px){
	.selbox-title01{
		display:none;
	}
}
.map-title2{width:74px; height: 40px;background: #f4f4f4 url(../images/gis/area-spot.png) no-repeat; background-position: 8px 13px;  color: #0265cb; padding-left:20px;padding-top: 14px;box-sizing: border-box; font-size: 13px; border: none; border-right: 1px solid #dedede;letter-spacing:-0.08em;border-left:1px solid #a9a9a9;}
.l-boder{ height: 40px;padding-right: 5px;box-sizing: border-box;}
.selbox-title01 p{float: left;}
.tmenu{width: 65px; height: 100%; float: left; }
.tmenu li{width:65px; height: 95px; overflow: hidden; background-color: #373d51; border-bottom: 1px solid #35babc; text-align: center; position: relative;}
.tmenu li a{font-size: 12px;}
.tmenu li.active .left-icon01{ font-weight: 700;background: #0265cb url(../images/left-icon01on.png) no-repeat; display: block; width: 65px; height:20px;  padding-top: 55px; background-position: center 15px; color: #fff;  }
.tab-rightbox_title{ position: absolute; left: 66px; top: 0px;height:100%; background-color: #f4f4f4;}
.tab-rightbox{ position: absolute; top: 0px;height:100%; background-color: #f4f4f4;}
.tab-area{width:273px;}
.tab-area_mb{width:305px;}
.left-icon01{background: url(../images/rwm/m_icon1.png) no-repeat;background-position: center 22px;display: block; width: 65px; height:28px;  padding-top: 65px;color: #ffffff;}
.left-icon01:hover,.tmenu li.active .left-icon02{ font-weight: 700;background:#35babc url(../images/rwm/m_icon1.png) no-repeat;background-position: center 22px;display: block; width: 65px; height:48px;  padding-top: 65px; color: #ffffff;}
.left-icon02{background: url(../images/rwm/m_icon2.png) no-repeat;background-position: center 22px;display: block; width: 65px; height:20px;  padding-top: 65px; color: #ffffff;}
.left-icon02:hover,.tmenu li.active .left-icon07{font-weight: 700;background:#35babc url(../images/rwm/m_icon2.png) no-repeat;background-position: center 22px;display: block; width: 65px; height:48px; padding-top: 65px; color: #ffffff;}
.left-icon03{background: url(../images/rwm/m_icon3.png) no-repeat;background-position: center 22px;display: block; width: 65px; height:20px;  padding-top: 65px; color: #ffffff;}
.left-icon03:hover,.tmenu li.active .left-icon07{font-weight: 700;background:#35babc url(../images/rwm/m_icon3.png) no-repeat;background-position: center 22px;display: block; width: 65px; height:48px; padding-top: 65px; color: #ffffff;}
.left-icon04{background: url(../images/rwm/m_icon4.png) no-repeat;background-position: center 22px;display: block; width: 65px; height:20px;  padding-top: 65px; color: #ffffff;}
.left-icon04:hover,.tmenu li.active .left-icon07{font-weight: 700;background:#35babc url(../images/rwm/m_icon4.png) no-repeat;background-position: center 22px;display: block; width: 65px; height:48px; padding-top: 65px; color: #ffffff;}
.tmenuMain{width: 65px; height: 100%; background-color: #d9e8f2; border-right: 1px solid #0082c8;line-height:100%;position:relative;}

.right-title{width:273px; height:35px; background-color:#003569;  color: #fff; text-align: center;line-height:35px;font-weight:bold;font-size:14px;}
.right-title2{width:100%; height:35px; background-color:#003569;  color: #fff; text-align: center;line-height:35px;font-weight:bold;font-size:14px;}
.mapsearch2{width: 272px;}
.mapsearch2:after{content:"";display:block;*display:inline-block;clear:both;}
.mapsearch2 li{ width: 100%;  height: 35px; float: left;background:#e0e0e0 url(../images/rwm/bg_tabline.gif) no-repeat right center;}
.mapsearch2 li a.last{}
/*.mapsearch2 li a{font-size:13px;font-family: 'NanumGothic';line-height:33px;color:#888888;display:block;width:99%;padding-right:1px; height: 35px;text-align:center;background:url(../images/tab_btmline.gif) repeat-x 0 bottom;outline:0;}*/
.mapsearch2 li a{font-size:13px;line-height:33px;color:#888888;display:block;width:99%;padding-right:1px; height: 35px;text-align:center;background:url(../images/tab_btmline.gif) repeat-x 0 bottom;outline:0;}
.mapsearch2 li.active{ width: 50%;  height: 35px; float: left;background:#f4f4f4 url(../images/bg_tabline.gif) no-repeat right center;}
.mapsearch2 li.active a{line-height:33px;color:#009d66;display:block;width:99%;padding-right:1px; height: 35px;text-align:center;background:none;}

.map-searchTopDiv {padding: 5px 0; display: inline-block;}
.map-searchTopDiv p {margin-left: 5px;}

.searchbox{background:#f4f4f4;padding:4px 10px;}
.search-tit2{float:left;width:70px;line-height:24px;letter-spacing:-0.13em; color: #555555;}
.search-tit2_mb{margin-top:8px;font-weight:600;font-size:25px;float:left;width:120px;line-height:24px;letter-spacing:-0.13em; color: #555555;}
.search-select{cursor: pointer; text-align:center; margin-left:40px; float:left;width:140px !important; border:1px solid #cdcdcd;height:24px !important; border-radius: 3px;color:#555555;}
.search-select_mb{font-weight:600;font-size:20px;cursor: pointer; text-align:center; margin-left:20px; float:left;width:141px !important; border:1px solid #cdcdcd;height:35px !important; border-radius: 3px;color:#555555;}
.search-select2{cursor: pointer; text-align:center; margin-left:40px; float:left;width:140px !important; border:1px solid #cdcdcd;height:24px !important; border-radius: 3px;color:#555555;}
.search-select2_mb{cursor: pointer; text-align:center; margin-left:20px; float:left;width:140px !important; border:1px solid #cdcdcd;height:35px !important; border-radius: 10px;color:#555555;}
.search-select4{width:20px !important;cursor: pointer; border:1px solid #cdcdcd;height:22px !important; border-radius: 3px;color:#555555; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;margin-left: 70px;}
.search-select6{float:left;width:100px !important; border:1px solid #cdcdcd;height:30px !important; border-radius: 3px;color:#555555;}

.search-result-tit{color:#555;text-align:center;font-size:13px;background:#d2d2d2;padding:10px 0;font-weight:700;}
.search-result-tit2{color:white;text-align:center;font-size:13px;line-height:100%;font-weight:700;background:#8f8f8f;padding:10px 0;border-top:1px solid #cdcdcd;border-bottom:1px solid #cdcdcd;}
.search-result-tit3{line-height:100%;font-weight:700;background:#35babc;border-top:1px solid #cdcdcd;border-bottom:1px solid #cdcdcd;}

.btn-search {margin-left:38px; width:175px;display:block;display:inline-block;background:#8f8f8f url(../images/gis/btn_search.png) no-repeat 54px center;border-radius:3px;color:#fff;border:1px solid #373d51;padding:7px 0 7px 75px;font-size:13px;line-height:100%; font-weight:700;}
.btn-top-search {/*width:55px;*/display:block;border-radius:3px;color:#fff;font-size:13px;line-height:100%;background:#727272;border:1px solid #3e3e3e;padding:7px 15px;text-align:center;}
.btn-top-search_mb {font-weight:bold;height:35px;margin-left: 6px;margin-top: 13px;width:80px;display:block;border-radius:3px;color:#fff;font-size:19px;line-height:100%;background:#727272;border:1px solid #3e3e3e;padding:7px 15px;text-align:center;}
.btn-top-search_mb.on {background:#dfdfdf;color:black;}
.btn-top-legend_mb {font-weight:bold;height:35px;margin-left: 6px;margin-top: 13px;width:80px;display:block;border-radius:3px;color:#fff;font-size:19px;line-height:100%;background:#727272;border:1px solid #3e3e3e;padding:14px 7px 0px;text-align:center;}
.btn-top-legend_mb.on {background:#dfdfdf;color:black;}

.ol-popup {
	position: absolute;
	background-color: white;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
	filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
	padding: 10px;
	padding-top:20px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	bottom: 12px;
	left: -50px;
	min-width: 10px;
	width: 250px;
}
.ol-popup:after, .ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.ol-popup:after {
	border-top-color: white;
	border-width: 10px;
	left: 48px;
	margin-left: -10px;
}
.ol-popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 48px;
	margin-left: -11px;
}
.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 5px;
	right: 15px;
	font-size:20px
}
.ol-popup-closer:after {
	content: "X";
}
.popup_title{
	position: absolute; width:100%; height:100%; top: 0px; padding-top: 10px;
}
.m_closer{
	display:none;
}

input.range {
  -webkit-appearance: none;
  bottom: -10px;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
input.range:focus {
  outline: 0;
}
input.range::-moz-focus-outer {
  border: 0;
}

input.range::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.5px;
}

input.range::-moz-range-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}

input.range::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
  background: indigo;
  border-radius: 20px;
  border: 0;
}

input.range::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
  background: indigo;
  border-radius: 20px;
  border: 0;
}

input.range::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input.range::-ms-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  height: 5px;
}

input.range::-ms-fill-lower,
input.range::-ms-fill-upper {
  background: indigo;
  border: 0;
  border-radius: 40px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}

.range__tick {
  fill: #a0a0a0;
}
.range__tick:first-child {
  -webkit-transform: translateX(2px);
  -moz-transform: translateX(2px);
  -ms-transform: translateX(2px);
  -o-transform: translateX(2px);
  transform: translateX(2px);
}
.range__tick:last-child {
  -webkit-transform: translateX(-3px);
  -moz-transform: translateX(-3px);
  -ms-transform: translateX(-3px);
  -o-transform: translateX(-3px);
  transform: translateX(-3px);
}

.range__field {
  border: 0;
}

.legend_box{
	cursor: default;
    display: block;
    position: fixed;
    width: auto;
    height: auto;
    bottom: 10px;
    left: 360px;
    border-radius: 3px;
}
.legend_box.off{
    left: 360px;
}

.legend_box_mb{
	display:none;
	float:left;
}

.layer_setting_btn{
	display:none;
	float:left;
}

.model_time_list_button{
	width:100%;
	color: #000000;
	border-width:0px;
    border-bottom: #000000 solid 1px;
    padding: 10px;
    background-color: transparent;
}

.model_time_list_button:hover {
    color: #000000;
    background-color: #ffffff;
}

.parent {
  display: flex;
  border: 1px solid black;
  font-size:13px;line-height:100%;
}

/*.btn-search {width:120px;display:block;*display:inline-block;background:#0054a6 url(../images/gis/btn_search.png) no-repeat 97px center;border-radius:3px;color:#fff;border:1px solid #373d51;padding:7px 0 7px 118px;font-size:13px;line-height:100%;}
.btn-top-search {width:40px;display:block;border-radius:3px;color:#fff;font-size:13px;line-height:100%;background:#727272;border:1px solid #3e3e3e;padding:7px 15px;text-align:center;}*/


.button1_off{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; left:0px; background-color: #a0a0a0; position: absolute; border-radius:7px;
}
.button1_on{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; right:2px; background-color: #0583ff; position: absolute; border-radius:7px;
}

.button2_off{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; left:0px; background-color: #a0a0a0; position: absolute; border-radius:7px;
}
.button2_on{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; right:2px; background-color: #0583ff; position: absolute; border-radius:7px;
}

.button3_off{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; left:0px; background-color: #a0a0a0; position: absolute; border-radius:7px;
}
.button3_on{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; right:2px; background-color: #0583ff; position: absolute; border-radius:7px;
}

.button4_off{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; left:0px; background-color: #a0a0a0; position: absolute; border-radius:7px;
}
.button4_on{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; right:2px; background-color: #0583ff; position: absolute; border-radius:7px;
}

.button5_off{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; left:0px; background-color: #a0a0a0; position: absolute; border-radius:7px;
}
.button5_on{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; right:2px; background-color: #0583ff; position: absolute; border-radius:7px;
}

.button6_off{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; left:0px; background-color: #a0a0a0; position: absolute; border-radius:7px;
}
.button6_on{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; right:2px; background-color: #0583ff; position: absolute; border-radius:7px;
}

.button7_off{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; left:0px; background-color: #a0a0a0; position: absolute; border-radius:7px;
}
.button7_on{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; right:2px; background-color: #0583ff; position: absolute; border-radius:7px;
}

.button8_off{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; left:0px; background-color: #a0a0a0; position: absolute; border-radius:7px;
}
.button8_on{
	font-weight:bold; color: white; text-align:center; width:50%; height:80%; margin-left:2px; margin-top:2px; right:2px; background-color: #0583ff; position: absolute; border-radius:7px;
}

.cctv_monitor_btn{
	border: 1px solid #c5c5c5;
	border-radius: 5px;
	width:89px;
	height:25px;
	margin: 5px 4px 5px;
	float:left;
	text-align:center;
	background:#c5c5c5;
	font-size:13px;
}
.cctv_monitor_btn_on{
	border: 1px solid #c5c5c5;
	border-radius: 5px;
	width:89px;
	height:25px;
	margin: 5px 4px 5px;
	float:left;
	text-align:center;
	background:#0583ff;
	color:white;
	font-size:13px;
	font-weight:700;
}

.cctv_monitor_btn:hover{
	border: 1px solid #0583ff;
	background:#0583ff;
	cursor:pointer;
}

.left_side_info_table{
	width:270px;
	text-align:center;
	margin: 0 auto;
}

.right_side_info_table{
	width:295px;
	text-align:center;
	margin: 0 auto;
}

.cctv_monitor_form{
	margin:5px 10px 5px 0px;
	border:solid 1px #c5c5c5;
	border-radius: 5px;
	background:#454545;
	color:white;
	font-size:13px;
	cursor:pointer;
	font-weight:bold;
}

.cctv_monitor_form:hover{
	border: 1px solid #0583ff;
	background:#0583ff;
	cursor:pointer;
}

.fog_alert_form{
	margin:5px 10px 5px;
	border:solid 1px #c5c5c5;
	border-radius: 5px;
	background:white;
	font-size:13px;
	cursor:pointer;
}

.fog_alert_form:hover{
	border: 1px solid #0583ff;
	background:#0583ff;
	cursor:pointer;
}


.side_menu_main{
	position:relative;
	float:right;
	width:300px;
	height:100%;
	border-left: 1px solid #8f8f8f;
	background: #f4f4f4;
}
.side_menu_main.off{
	display:none;
}

.right_slid_button{
	position: absolute;
    height: 67px;
    width: 15px;
    top: calc(50% - 70px);
    right: 301px;
    background: url(../images/gis/btn_close.png) no-repeat;
    transform: rotate( 180deg );
    z-index: 1;
    cursor:pointer;
}

.right_slid_button.off{
	position: absolute;
    height: 67px;
    width: 15px;
    top: calc(50% - 70px);
    right: 0px;
    background: url(../images/gis/btn_open.png) no-repeat;
    transform: rotate( 180deg );
    z-index: 1;
    cursor:pointer;
}

/**/
.left_slid_button{
	position: absolute;
    height: 67px;
    width: 15px;
    top: calc(50% - 70px);
	left: 272px;
    background: url(../images/gis/btn_open.png) no-repeat;
    /*transform: rotate( 180deg );*/
    z-index: 1;
    cursor:pointer;
}

.left_slid_button.off{
	position: absolute;
    height: 67px;
    width: 15px;
    top: calc(50% - 70px);
	left: 339px;
    background: url(../images/gis/btn_close.png) no-repeat;
    /*transform: rotate( 180deg );*/
    z-index: 1;
    cursor:pointer;
}
/**/

.layout_footer{
	position:fixed;
	width:100%;
	height:40px;
	background:#48484a;
	z-index:9999;
	bottom:0px;
	border-top:1px solid white;
}

.right_navside_main{
	display:block;
}

.inner_mb_layer_setting{
	display:none;
	background:#f4f4f4;
	width:310px;
	height:143px;
	position: fixed;
	top:202px;
	left:10px;
	border-radius: 5px;
	border: 1px solid #b5b5b5;
	box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.inner_mb_layer_setting.on{
	display:block;
}

.layout_top_main{
	top: 0;width: 100%;height: 65px; background: #48484a; border-bottom:1px solid white;
}

.layout_top_sub{
	float:left; width:400px; height:100%;
}

.layout_top_sub2{
	padding-top:7px; padding-left:9px;
}

.layout_top_img{
	width:45px;
}

.layout_top_title{
	font-size:25px; color:#f4f4f4; padding-bottom:5px; padding-left:5px;
}

.layout_top_title_sub{
	color:#f4f4f4; font-size:16px; font-weight:bold;
}

.layout_top_side_title{
	float:right; width:500px; height:100%; text-align:right;
}

.layout_bottom_summury{
	color:#f4f4f4; font-size:16px; font-weight:bold;
}

.alert_form{
	margin:5px 10px 5px;
	border:solid 1px #c5c5c5;
	border-radius: 5px;
	background:white;
	font-size:13px;
	cursor:pointer;
	width:240px;
}

.alert_form:hover{
	border: 1px solid #0583ff;
	background:#0583ff;
	cursor:pointer;
}

.layer_legend_btn{
	display:none;
	float:left;
}

.inner_mb_legend{
	display:none;
	width: auto;
    height: auto;
	position: fixed;
	top:202px;
	left:10px;
	border-radius: 3px;
	transition: all 0.8s ease 0s;
    box-shadow: rgba(102, 102, 102, 0.1) 0px 0px 3px;
}
.inner_mb_legend.on{
	display:block;
}

.ol-zoom-in{position:fixed; top:110px; left:365px; margin: 0; text-decoration: none; display: block; float: left; width: 35px; height:35px;margin-bottom: 5px; color: #555555; font-size: 20px;border: 1px solid #dfdfdf; border-radius: 5px; text-align: center; background: #ffffff; box-sizing: border-box; box-shadow:3px 3px 3px rgba(0,0,0,.2);}
.ol-zoom-in:hover{color: #ffffff; background: #373d51;}
.ol-zoom-in.off{position:fixed; top:315px; left:360px; margin: 0; text-decoration: none; display: block; float: left; width: 35px; height:35px;margin-bottom: 5px; color: #555555; font-size: 20px;border: 1px solid #dfdfdf; border-radius: 5px; text-align: center; background: #ffffff; box-sizing: border-box; box-shadow:3px 3px 3px rgba(0,0,0,.2);}
.ol-zoom-in.off:hover{color: #ffffff; background: #373d51;}
.ol-zoom-out{position:fixed; top:155px; left:365px; margin: 0; text-decoration: none; display: block; float: left; width: 35px; height:35px; margin-bottom: 5px; color: #555555; font-size: 20px;border: 1px solid #dfdfdf; border-radius: 5px; text-align: center; background: #ffffff; box-sizing: border-box; box-shadow:3px 3px 3px rgba(0,0,0,.2);}
.ol-zoom-out:hover{color: #ffffff; background: #373d51;}
.ol-zoom-out.off{position:fixed; top:355px; left:360px; margin: 0; text-decoration: none; display: block; float: left; width: 35px; height:35px; margin-bottom: 5px; color: #555555; font-size: 20px;border: 1px solid #dfdfdf; border-radius: 5px; text-align: center; background: #ffffff; box-sizing: border-box; box-shadow:3px 3px 3px rgba(0,0,0,.2);}
.ol-zoom-out.off:hover{color: #ffffff; background: #373d51;}

.weather_api_form{
	background: url('../../asset/images/rwm/筌띾쵐�벉_獄쏄퀗瑗�_占쎈��.jpg') no-repeat;
	background-size: 280px;
	padding: 15px;
	position:fixed;
	width:240px;
	height:145px;
	top:120px;
	left:80px;
	border: 1px solid #777777;
	border-radius: 5px;
	box-shadow:3px 3px 3px rgba(0,0,0,.2);
	isolation: isolate;
}
.weather_api_form::after{
	content: '';
	position: absolute;
	background: white;
	z-index: -1;
	inset: 0;
	opacity: 0.5;
}

.weather_api_form.off{
	background: url('../../asset/images/rwm/筌띾쵐�벉_獄쏄퀗瑗�_占쎈��.jpg') no-repeat;
	background-size: 280px;
	padding: 15px;
	position:fixed;
	width:240px;
	height:145px;
	top:120px;
	left:360px;
	border: 1px solid #777777;
	border-radius: 5px;
	box-shadow:3px 3px 3px rgba(0,0,0,.2);
	isolation: isolate;
}
.weather_api_form.off::after{
	content: '';
	position: absolute;
	background: white;
	z-index: -1;
	inset: 0;
	opacity: 0.5;
}

/*=======================================*/
/* 踰붾� �뤌*/
.legend-selection-menu {
	position: absolute;
	bottom: 20px;
	left: 300px;
	background: rgb(255 255 255 / 80%);;
	padding: 5px;
	border-radius: 5px;
	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
	width: 191px;
	text-align: center;
	font-size: 11px;
	transition: right 0.3s ease;
}
.legend_form{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
    flex-direction: column;
    gap: 5px;
}
.legend_content{
	display: flex;
	padding: 3px;
    align-items: center;
    justify-content: space-around;
}
.legend_content_title{
	width: 25%;
	text-align: left;
}
.legend_content_inner{
	width: 75%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
.legend-selection-menu.hidden {
	right: -80px;
}

.legend-selection-menu-close-btn{
	top: 15px;
    position: absolute;
    left: -24px;
    background: #a3a3a3;
    width: 24px;
    height: 30px;
    border-radius: 5px 0px 0px 5px;
    background-color: rgba(255, 255, 255, 1.0);
    box-shadow: -5px 3px 5px rgba(0, 0, 0, 0.1);
    color: #717171;
    font-size: 14px;
    padding: 6px;
    text-align: center;
}

/* 媛�濡쒕줈 諛곗튂�븯湲� �쐞�븳 flexbox */
.legend-row {
	display: flex;
	justify-content: center;
}

/* ���씠�� �뒪���씪 */
.legend-title {
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 10px;
	margin-right: 5px;
}

/* �븘�씠肄� �꽮�뀡 援ъ꽦 */
.legend-icon-section {
	font-size:10px;
	flex-direction: column;
	align-items: center;
	margin-right: 5px;
}

.legend-icon-item {
	margin-bottom: 6px;
}
/* iOS 湲곌린�뿉留� �쟻�슜�릺�뒗 �뒪���씪 */
.legend-icon-item.ios-device{
    margin-bottom: 9px; /* iPhone�뿉�꽌 媛꾧꺽 議곗젙 */
}

.legend-icon {
	width: 30px;
	height: 30px;
}

.legend-description {
	font-size: 12px;
	margin-bottom: 10px;
}

/* �룄濡� �긽�깭 �젙蹂� 援ъ꽦 */
.legend-status-text {
	flex-direction: column;
	align-items: center;
	font-size: 10px;
}
/* 媛� �긽�깭 �빆紐⑹쓣 �꽭遺꾪솕�븯�뿬 4媛�吏� �깋�긽�쓣 �쟻�슜 */
.status-segment {
    width: 25%; /* 媛� �꽭洹몃㉫�듃�쓽 �꼫鍮꾨�� 4遺꾩쓽 1濡� �꽕�젙 */
    height: 15px; /* �꽭洹몃㉫�듃 �넂�씠 */
    display: inline-block;
    margin: 0;
    padding: 0;
}
/* 媛� status-item�쓽 湲곕낯 �뒪���씪 */
.status-item {
	margin-bottom:2px;
    display: flex;
    justify-content: center;
    /*justify-content: flex-start;*/
    align-items: center;
    width: 131px;
    border-radius: 4px;
    flex-wrap: wrap;
}

.status-item2 {
	width: 100%;
	padding: 5px;
	margin-bottom: 5px;
	text-align: center;
	border-radius: 4px;
	color: black; /* 湲곕낯 �뀓�뒪�듃 �깋 */
}
.status-item3 {
	padding: 5px;
	text-align: center;
	border-radius: 4px;
	color: black; /* 湲곕낯 �뀓�뒪�듃 �깋 */
	border: 1px solid #ababab;
}

.green {
	background-color: green;
	color: white; /* �뼇�샇 �뀓�뒪�듃�뒗 �븯���깋 */
}

.yellow {
	background-color: yellow;
}

.orange {
	background-color: orange;
}

.red {
	background-color: red;
}

.rdr5 {
	background-color: #9300E4;
}
.rdr4 {
	background-color: #B40000;
}
.rdr3 {
	background-color: #CCAA00;
}
.rdr2 {
	background-color: #005A00;
}
.rdr1 {
	background-color: #004AF5;
}
/*=======================================*/