map area {
	border : none;
	outline : none;
}
.zindex_top {
	z-index:1;
}
article#mp_main_area  {
	display: flex;
	position: relative;
	/*
	min-width: 962px;
	min-height: 670px;
	*/
	height:100%;
}

#mp_map {
	width: 100%;
	height: 100%;
	position: relative;
	display:block;
}

#mp_info_area {
	position : relative ;
	overflow : hidden ;
	width : 240px ;
	height : 100% ;
	margin-left : 1px ;
	min-width: 240px;
}

#mp_info_box {
	position : relative ;
	width : 480px ;
	height : 100% ;
	transition-duration : 0.25s ;
	left : 0px;
}

#mp_info_box.display_info {
	left: -240px;
}
#mp_map_area {
	position : relative ;
	overflow : hidden ;
	float : left ;
	top : 0px ;
	min-width : 702px ;
	min-height : 606px ;
	/* background-color : rgba(0,103,179,0.1) ; */
	background-color : rgba(245,245,245,1);
	margin-left : 1px ;
	display: flex;
	
	width: 100%;

}


#mp_area_select {
	position : relative ;
	float : left ;
	width : 240px ;
	height : 100% ;
}

#mp_area_select ul {
	position : relative ;
	list-style : none ;
	width : 100% ;
	height : 100% ;
}

#mp_area_select li {
	cursor : pointer ;
	position : relative ;
	box-sizing : border-box ;
	user-select : none ;
	-moz-user-select : none ;
	-webkit-user-select : none ;
	-ms-user-select : none ;
	width : 100% ;
	height : 50px ;
	background-color : rgba(44,159,217,0.5) ;
	color : #ffffff ;
	font-size : 21px ;
	line-height : 1em ;
	text-align : center ;
	text-shadow : 0px -1px 0px rgba(0,0,0,0.15) ;
	padding-top : 14px ;
	padding-right : 20px ;
	margin-bottom : 1px ;
}

#mp_area_select li:hover {
	background : linear-gradient(180deg, #2c9fd9 0%, #0087cc 100%) ;
}

#mp_area_select li.selected {
	background-color : rgba(44,159,217,0.7);
}

#mp_area_select span {
	display : block ;
	position : absolute ;
	box-sizing : border-box ;
	top : 10px ;
	right : 10px ;
	width : 30px ;
	height : 30px ;
	background-color : rgba(255,255,255,0.9) ;
	font-size : 16px ;
	font-weight : 500 ;
	line-height : 1em ;
	text-align : center ;
	text-shadow : none ;
	padding-top : 7px ;
	border-radius : 15px ;
}


.mp_color_blue {
	color : #00abf2;
}
.mp_color_yellow {
	color : #ff9500;
}
.mp_color_red {
	color : #d93636;
}

#mp_data_box {
	position : relative ;
	float : left ;
	width : 240px ;
	height : 100% ;
	min-height: 606px;
}

#mp_data_box_data_head {
	position : relative ;
	width : 100% ;
	height : 140px ;
	background : linear-gradient(0deg, #2c9fd9 0%, #0087cc 100%) ;
	color : #ffffff ;
}

#mp_data_box_area_name {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	height : 50px ;
	font-size : 21px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 14px ;
	padding-left : 25px ;
}

#mp_data_box_btn_back {
	cursor : pointer ;
	position : absolute ;
	box-sizing : border-box ;
	top : 11px ;
	left : 5px ;
	width : 28px ;
	height : 28px ;
	background-color : #ffffff ;
	line-height : 1em ;
	text-align : center ;
	border-style : solid ;
	border-width : 2px ;
	border-color : #ffffff ;
	border-radius : 14px ;
}

#mp_data_box_btn_back:hover {
	background : linear-gradient(0deg, #eeeeee 0%, #ffffff 80%) ;
	border-color : #cde6f2 ;
	box-shadow : 0px 2px 4px rgba(0,0,0,0.25) ;
}

#mp_data_box_mode_box {
	position : relative ;
	width : 240px ;
	height : 48px ;
}

#mp_data_box_mode_box ul {
	position : relative ;
	list-style : none ;
	width : 232px ;
	height : 48px ;
	margin-left : auto ;
	margin-right : auto ;
}

#mp_data_box_mode_box .mode_btn {
	cursor : pointer ;
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	float : left ;
	width : 48px ;
	height : 48px ;
	background : linear-gradient(0deg, #f2f2f2 0%, #ffffff 80%) ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #ffffff ;
	border-radius : 24px ;
	margin-left : 5px ;
	margin-right : 5px ;
}
#mp_data_box_mode_box .mode_btn_disable {

	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	float : left ;
	width : 48px ;
	height : 48px ;
/*	background : linear-gradient(0deg, #f2f2f2 0%, #ffffff 80%) ; */
	border-style : solid ;
	border-width : 1px ;
	border-color : #ffffff ;
	border-radius : 24px ;
	margin-left : 5px ;
	margin-right : 5px ;
}
#mp_data_box_mode_box .mode_btn:hover {
	background : linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%) ;
	background-color : #ffffff ;
	border-color : #cde6f2 ;
	box-shadow : 0px 2px 4px rgba(0,0,0,0.25) ;
}

#mp_data_box_mode_box .selected {
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	float : left ;
	width : 48px ;
	height : 48px ;
	background : linear-gradient(0deg, #2c9fd9 0%, #0087cc 100%) ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #cde6f2 ;
	border-radius : 24px ;
	margin-left : 5px ;
	margin-right : 5px ;
}

#mp_data_box_disable_btn {
	position : absolute ;
	top : 51px ;
	left : 126px ;
	width : 46px ;
	height : 46px ;
	background-color : #ffffff ;
	border-radius : 24px ;
	opacity : 0.25 ;
}

#mp_data_box_mode_dot {
	position : relative ;
	overflow : hidden ;
	width : 6px ;
	height : 6px ;
	background-color : #daeaf2 ;
	color : #daeaf2 ;
	border-radius : 3px ;
	margin-top : 3px ;
	transition-duration : 0.25s ;

}
.mp_data_box_mode_dot_left0 {
	left: 0px;
}
.mp_data_box_mode_dot_left1 {
	left: 58px;
}
.mp_data_box_mode_dot_left2 {
	left: 116px;
}
.mp_data_box_mode_dot_left3 {
	left: 174px;
}

#mp_data_box_mode_text {
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	width : 230px ;
	height : 24px ;
	font-size : 14px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 4px ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #cee6f2 ;
	border-radius :12px ;
	margin-left : auto ;
	margin-right : auto ;
}

#mp_data_box_mode_list {
	position : relative ;
	list-style : none ;
	width : 100% ;
	transition-duration : 0.25s ;

}
.mp_data_box_mode_list_top0 {
	top: 0px;
}
.mp_data_box_mode_list_top1 {
	top: -24px;
}
.mp_data_box_mode_list_top2 {
	top: -48px;
}
.mp_data_box_mode_list_top3 {
	top: -72px;
}
#mp_data_box_mode_list li {
	position : relative ;
	width : 100% ;
	height : 24px ;
	font-size : 14px ;
	line-height : 1em ;
	text-align : center ;
}

#mp_data_box_list_area {
	position : relative ;
	overflow : hidden ;
	width : 240px ;
	height: 100%;
}

#mp_data_box_list_area .loading_box {
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	width : 240px ;
	background-color : rgba(27,164,210,0.1) ;
	color : #1ba4d2 ;
	font-size : 10px ;
	font-weight : 500 ;
	line-height : 1em ;
	text-align : center ;
	transition-duration : 0.25s ;
	height: 100%;
}

.mp_loading_box_hide {
	height:0px !important;
}
.loading_box .load_ani_icon {
	position : relative ;
	width : 24px ;
	height : 24px ;
	line-height : 1em ;
	margin-top : 21px ;
	margin-bottom : 5px ;
	margin-left : auto ;
	margin-right : auto ;
	animation-name : loadAniIcon ;
	animation-duration : 1.2s ;
	animation-fill-mode : both ;
	animation-play-state : running ;
	animation-iteration-count : infinite ;
	animation-timing-function : ease-in-out ;
}

.loading_box .load_ani_text {
	animation-name : loadAniText ;
	animation-duration : 1.2s ;
	animation-fill-mode : both ;
	animation-play-state : running ;
	animation-iteration-count : infinite ;
}

.loading_box .error_ani_icon {
	position : relative ;
	width : 24px ;
	height : 24px ;
	line-height : 1em ;
	margin-top : 21px ;
	margin-bottom : 5px ;
	margin-left : auto ;
	margin-right : auto ;
}

.loading_box .error_ani_text {
	color : #cc0000 ;
	animation-name : loadAniText ;
	animation-duration : 1.2s ;
	animation-fill-mode : both ;
	animation-play-state : running ;
	animation-iteration-count : infinite ;
}

#mp_data_box_list_box {
	position : relative ;
	width : 960px ;
	height : 100% ;
	transition-duration : 0.25s ;
}
.mp_data_box_list_box_left0 {
	left: 0px;
}
.mp_data_box_list_box_left1 {
	left: -240px;
}
.mp_data_box_list_box_left2 {
	left: -480px;
}
.mp_data_box_list_box_left3 {
	left: -720px;
}
#mp_data_box_list_box .mask_box {
	position : relative ;
	box-sizing : border-box ;
	overflow-x : hidden ;
	overflow-y : scroll ;
	-webkit-overflow-scrolling : touch ;
	width : 260px ;
	height : 100% ;
}
#mp_data_box_list_box .no_data {
	color: steelblue;
	font-weight: bold;
}
#mp_data_box_list_box .accident_area {
	position : relative ;
	box-sizing : border-box ;
	overflow-x : hidden ;
	overflow-y : scroll ;
	-webkit-overflow-scrolling : touch ;
	width : 260px ;
	margin-bottom : 1px ;
}

#mp_data_box_list_box .scrl_box {
	position :relative ;
	width : 100% ;
	height : 20px ;
	background : linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.7) 100%) ;
}

#mp_data_box_list_box .scrl_btn {
	cursor : pointer ;
	position : relative ;
	box-sizing : border ;
	float : left ;
	user-select : none ;
	-webkit-user-select : none ;
	-moz-user-select : none ;
	width : 50% ;
	height : 20px ;
	color : #ffffff ;
	font-size : 12px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 4px ;
}

#mp_data_box_list_box .scrl_btn:hover {
	background-color : rgba(0,0,0,0.3) ;
/*	color : #4ddaff ; */
	text-shadow : 0px 1px 5px rgba(0,0,0,0.6) ;
}



#mp_data_box_list_box .list_box1 {
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	float : left ;
	width : 240px ;
	height : 100% ;
}

#mp_data_box_list_box .list_box1 h5 {
	position : absolute ;
	box-sizing : border-box ;
	user-select : none ;
	-moz-user-select : none ;
	-webkit-user-select : none ;
	-ms-user-select : none ;
	top : 0px ;
	left : 30px ;
	width : 165px ;
	height : 30px ;
	color : #ffffff ;
	font-size : 16px ;
	font-weight : 400 ;
	line-height : 1em ;
	text-align : left ;
	padding-top : 6px ;
	padding-left : 4px ;
	margin-bottom : 1px ;
}

#mp_data_box_list_box .list_box1 .cnt_box {
	position : absolute ;
	box-sizing : border-box ;
	top : 3px ;
	right : 7px ;
	width : 24px ;
	height : 24px ;
	background-color : #ffffff ;
	color : #2c9fd9 ;
	font-size : 14px ;
	font-weight : 500 ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 5px ;
	border-radius : 12px ;
}

.nolist {
	position : relative ;
	box-sizing : border-box ;
	width : 240px ;
	height : 100% ;
	background-color : rgba(0,0,0,0.1) ;
	color : #999999 ;
	font-size : 14px ;
	line-height : 20px ;
	text-align : center ;
	padding-top : 80px ;
}

#mp_data_box_list_box .list_box1 h6 {
	position : relative ;
	box-sizing : border-box ;
	width : 234px ;
	height : 22px ;
	background-color : rgba(0,0,0,0.1) ;
	color : #4d4d4d ;
	font-size : 14px ;
	font-weight : 400 ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 4px ;
	margin-bottom : 1px ;
}

#mp_data_box_list_box .list_box1 ul {
	position : relative ;
	list-style : none ;
	width : 234px ;
}

#mp_data_box_list_box .list_box1 .text {
	position : relative ;
	color : #4d4d4d ;
	font-size : 14px ;
	line-height : 18px ;
}



#mp_data_box_list_box .list_box2 {
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	float : left ;
	width : 240px ;
	height : 100% ;
	padding-bottom : 21px ;
}

#mp_data_box_list_box .list_box2 h6 {
	position : relative ;
	box-sizing : border-box ;
	width : 240px ;
	height : 22px ;
	background-color : rgba(0,0,0,0.1) ;
	color : #4d4d4d ;
	font-size : 14px ;
	font-weight : 400 ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 4px ;
	margin-bottom : 1px ;
}

#mp_data_box_list_box .list_box2 ul {
	position : relative ;
	list-style : none ;
	width : 240px ;
}

#mp_data_box_list_etc li {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	min-height : 60px ;
	background-color : rgba(167,204,51,0.17) ;
	padding-top : 3px ;
	padding-bottom : 2px ;
	padding-left : 5px ;
	padding-right : 5px ;
	margin-bottom : 1px ;
}

#mp_data_box_list_etc .text {
	position : relative ;
	width : 172px ;
	color : #4d4d4d ;
	font-size : 14px ;
	line-height : 18px ;
}

#mp_data_box_list_etc span {
	color : #d9829f ;
}

#mp_data_box_list_etc .icon {
	position : absolute ;
	box-sizing : border-box ;
	top : 3px ;
	right : 3px ;
	width : 58px ;
	height : 54px ;
	background-color : #a7cc33 ;
	color : #ffffff ;
	font-size : 14px ;
	line-height : 16px ;
	text-align : center ;
	padding-top : 11px ;
	border-radius : 4px ;
}

#mp_data_box_list_link ul {
	position : relative ;
	list-style : none ;
}

#mp_data_box_list_link li {
	cursor : pointer ;
	position : relative ;
	box-sizing : border-box ;
	width : 240px ;
	min-height : 85px ;
	background-color : rgba(255,255,255,0.5) ;
	line-height : 1em ;
	padding-top : 4px ;
	padding-bottom : 10px ;
	padding-left : 40px ;
	padding-right : 5px ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #2c9fd9 ;
	margin-top : 1px ;
}

#mp_data_box_list_link li:hover {
	background-color : rgba(44,159,217,0.1) ;
}

#mp_data_box_list_link .name {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	min-height : 32px ;
	color : #2c9fd9 ;
	font-size : 18px ;
	line-height : 1em ;
	padding-top : 7px ;
	margin-bottom : 3px ;
}

#mp_data_box_list_link .target {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	height : 18px ;
	color : #666666 ;
	font-size : 14px ;
	line-height : 1em ;
	padding-top : 2px ;
}

#mp_data_box_list_link .site {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	height : 18px ;
	color : #666666 ;
	font-size : 14px ;
	line-height : 1em ;
	padding-top : 2px ;
}

#mp_data_box_list_link .icon {
	position : absolute ;
	top : 4px ;
	left : 4px ;
	width : 32px ;
	height : 32px ;
	background-color : #2c9fd9 ;
	background-image : url(/pcsite/map/images/iconMode3on.svg) ;
	background-size : 32px 32px ;
	background-repeat : no-repeat ;
	border-radius : 16px ;
}

#mp_prove_link {
	cursor : pointer ;
	position : absolute ;
	bottom : 40px ;
	left : 10px ;
}

#mp_map_zoom_box {
	position : absolute ;
	bottom : 50px ;
	right : 23px ;
	user-select: none;
}

#mp_map_zoom_box .map_full {
	position :relative ;
	box-sizing : border-box ;
	width : 44px ;
	height : 44px ;
	background-color : rgba(255,255,255,0.85) ;
	line-height : 1em ;
	padding : 4px ;
	border-radius : 22px 22px 0px 0px ;
	margin-bottom : 1px ;
}

#mp_map_zoom_box .map_full img {
	cursor : pointer ;
	width : 32px ;
	height : 32px ;
	background-color : #ffffff ;
	border-style : solid ;
	border-width : 2px ;
	border-color : #67b0e6 ;
	border-radius : 18px ;
}

#mp_map_zoom_box .map_full img:hover {
	box-shadow : 0px 1px 2px rgba(0,0,0,0.3) ;
}

#mp_map_zoom_box .zoom_ctrl {
	position :relative ;
	box-sizing : border-box ;
	width : 44px ;
	background-color : rgba(255,255,255,0.85) ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 3px ;
	padding-bottom : 3px ;
	border-radius : 0px 0px 22px 22px ;
}

#mp_map_zoom_box .zoom_ctrl .btn {
	cursor : pointer ;
	position : relative ;
	width : 24px ;
	height : 24px ;
	background-color : #67b0e6 ;
	margin-top : 5px ;
	margin-bottom : 5px ;
	margin-left : auto ;
	margin-right : auto ;
	border-style : solid ;
	border-width : 2px ;
	border-color : #67b0e6 ;
	border-radius : 14px ;
}

#mp_map_zoom_box .zoom_ctrl .btn:hover {
	background-color : #ff9500 ;
	border-color : #ff9500 ;
	box-shadow : 0px 1px 2px rgba(0,0,0,0.3) ;
}

#mp_map_zoom_box .zoom_ctrl .bar {
	position : relative ;
	width : 30px ;
	background-color : #67b0e6 ;
	border-radius : 15px ;
	padding-top : 1px ;
	padding-bottom : 1px ;
	margin-left : auto ;
	margin-right : auto ;
}

#mp_map_zoom_box .zoom_ctrl .lv {
	cursor : pointer ;
	position :relative ;
/*	box-sizing : border-box ;*/
	overflow : hidden ;
	width : 16px ;
	height : 16px ;
	background-color : #ffffff ;
	color : rgba(0,0,0,0) ;
	user-select : none ;
	-webkit-user-select : none ;
	-moz-user-select : none ;
	margin : 7px ;
	border-radius : 8px ;
	opacity: 0.35;
}

#mp_map_zoom_box .zoom_ctrl .zoomlvselect{
	opacity: 1.0;
}

#mp_map_mode_box {
	position : absolute ;
	top : 50px ;
	right : 15px ;
}

#mp_map_mode_box .map_mode_btn {
	cursor : pointer ;
	position : relative ;
	width : 48px ;
	height : 48px ;
	line-height : 1em ;
	text-align : center ;
	border-style : solid ;
	border-width : 6px ;
	border-color : rgba(0,119,204,0) ;
	border-radius : 30px ;
	transition-duration : 0.3s ;
}

#mp_map_mode_box .map_mode_btn:hover {
	border-color : rgba(0,119,204,0.35) ;
	transition-duration : 0.3s ;
}

#mp_map_mode_box .map_mode_btn img {
	width : 46px ;
	height : 46px ;
	background : linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%) ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #67b0e6 ;
	border-radius : 24px ;
	box-shadow : 0px 1px 2px rgba(0,0,0,0.25) ;
	transition-duration : 0.3s ;
}

#mp_map_mode_box .map_mode_btn_selected {
	position : relative ;
	width : 48px ;
	height : 48px ;
	line-height : 1em ;
	text-align : center ;
	border-style : solid ;
	border-width : 6px ;
	border-color : rgba(0,119,204,0.35) ;
	border-radius : 30px ;
	transition-duration : 0.3s ;
}

#mp_map_mode_box .map_mode_btn_selected img {
	width : 46px ;
	height : 46px ;
	background-color : #ffffff ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #ffffff ;
	border-radius : 24px ;
	transition-duration : 0.3s ;
}

#mp_map_mode_box .disable {
	display : block ;
	position : relative ;
	width : 48px ;
	height : 48px ;
	line-height : 1em ;
	text-align : center ;
	border-style : solid ;
	border-width : 6px ;
	border-color : rgba(0,119,204,0) ;
	border-radius : 30px ;
	opacity : 0.4 ;
}

#mp_map_mode_box .disable img {
	width : 46px ;
	height : 46px ;
	background : linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%) ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #67b0e6 ;
	border-radius : 24px ;
	box-shadow : 0px 1px 2px rgba(0,0,0,0.25) ;
	transition-duration : 0.3s ;
}

/*
* map notify box
*/
#mp_map_notify_box {
	position : absolute ;
	overflow : hidden ;
	top : 15px ;
	width : 672px ;
	background-color : #ffffff ;
	box-shadow : 0px 2px 3px rgba(0,0,0,0.3) ;
	transition-duration : 0.25s ;
	height: 30px;
}

#mp_map_notify_box .btn {
	cursor : pointer ;
	position : relative ;
	float : left ;
	width : 28px ;
	height : 28px ;
	background-color : rgba(0,119,204,0.6) ;
	line-height : 1em ;
	margin : 1px ;
}

#mp_area_name_notify {
	cursor : pointer ;
	position : relative ;
	box-sizing : border-box ;
	float : left ;
	width :118px ;
	height : 28px ;
	background-color : rgba(0,119,204,0.6) ;
	color : #ffffff ;
	font-size : 16px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 6px ;
	margin : 1px ;
}

#mp_notify_text_area {
	cursor : pointer ;
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	float : left ;
	width : 520px ;
	height : 28px ;
	color : #4d4d4d ;
	font-size : 14px ;
	line-height : 1em ;
	white-space : nowrap ;
	user-select : none ;
	-webkit-user-select : none ;
	-moz-user-select : none ;
	padding-top : 7px ;
	margin : 1px ;
}

#mp_area_notify_list {
	position : relative ;
	box-sizing : border-box ;
	clear : both ;
	list-style : none ;
	width : 100% ;
	height : auto ;
}

#mp_area_notify_list li {
	cursor : pointer ;
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	background-color : rgba(0,119,204,0.1) ;
	color : #4d4d4d ;
	font-size : 14px ;
	line-height : 16px ;
	padding-left : 15px ;
	padding-right : 15px ;
	padding-top : 8px ;
	padding-bottom : 8px ;
	border-bottom-style : solid ;
	border-bottom-width : 1px ;
	border-bottom-color : #ffffff ;
}

#mp_area_notify_list li:hover {
	color : #001f80 ;
	text-decoration : underline ;
	background-color : rgba(0,119,204,0.2) ;
}

#mp_area_notify_list a {
	color: inherit;
}

#mp_area_notify_list a:hover {
	color: inherit;
}
/*
* map key box
*/
#mp_map_key_box {
	position            : absolute ;
	box-sizing          : border-box ;
	overflow            : hidden ;
	bottom              : 12px ;
	width               : 675px ;
	background-color    : #ffffff ;
	font-size           : 12px ;
	line-height         : 1em ;
	border-style        : solid ;
	border-width        : 2px ;
	border-color        : rgba(0,119,204,0.35) ;
	transition-duration : 0.25s ;
	cursor              : pointer;
	height              : 28px;
}

#mp_map_key_box.keyboxselected{
	height:245px;
}

#map_key_note {
	top: -18px;
	position : relative ;
	transition-duration : 0.25s ;
}
#map_key_note.display_snow {
	top: -68px ;
}
#map_key_note.keynoteselected {
	top:0px !important;
}
#mp_map_key_box .btn {
	cursor : pointer ;
	position : absolute ;
	bottom : 1px ;
	right : 1px ;
	width : 22px ;
	height : 22px ;
	background-color : rgba(0,119,204,0.6) ;
}

#mp_map_key_box .btn:hover {
	background-color : rgba(0,119,204,1) ;
}

#mp_map_key_box .title {
	position : relative ;
	box-sizing : border-box ;
	width : 90% ;
	height : 18px ;
	background : linear-gradient(90deg, rgba(0,119,204,0.2) 0%, rgba(0,119,204,0) 100%) ;
	color : #001f80 ;
	font-size : 12px ;
	line-height : 1em ;
	padding-top : 3px ;
	padding-left : 4px ;
}

#mp_map_key_box ul {
	position : relative ;
	list-style : none ;
	width : 100% ;
	height : 24px ;
	font-size : 12px ;
	line-height : 1em ;
	padding-top : 2px ;
	padding-bottom : 2px ;
	padding-left : 4px ;
	margin-bottom : 4px ;
}

#mp_map_key_box li {
	position    : relative ;
	float       : left ;
	font-size   : 12px ;
	line-height : 28px ;
}

#mp_map_key_box li span {
	position     : relative ;
	display      : inline-block ;
	box-sizing   : border-box ;
	top          : -4px ;
	color        : #4d4d4d ;
	font-size    : 11px ;
	line-height  : 1em ;
	margin-left  : 2px ;
	margin-right : 5px ;
}

#mp_map_key_box B {
	font-weight : 400 ;
}





#map_load {
	position : absolute ;
}
div#layer_roadcam, div#layer_sapacam {
	top: 0px;
	left: 0px;
}

div#plot_hcam, div#plot_spcam {
	cursor: pointer;
}
#plot_hcam .popup {
	position : absolute ;
	overflow : hidden ;
	visibility : hidden ;
	top : 18px ;
	left : 15px ;
	width : 160px ;
	height : 145px ;
	background-color : rgba(128,128,128,0.9) ;
	color : #ffffff ;
	font-size : 14px ;
	line-height : 1em ;
	text-align : center ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #ffffff ;
	border-radius : 0px 8px 8px 8px ;
	box-shadow : 0px 2px 3px rgba(0,0,0,0.3) ;
}

#plot_hcam .place {
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	width : 100% ;
	height : 28px ;
	color : #ffffff ;
	font-size : 14px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 7px ;
}

#plot_hcam .photo {
	position : relative ;
	width : 140px ;
	height : 105px ;
	background-color : #000000 ;
	border-style : solid ;
	border-width : 2px ;
	border-color : #ffffff ;
	margin-left : auto ;
	margin-right : auto ;
}


#plot_spcam .popup {
	position : absolute ;
	overflow : hidden ;
	visibility : hidden ;
	top : 18px ;
	left : 15px ;
	width : 178px ;
	height : 96px ;
	background-color : rgba(121,204,82,0.9) ;
	color : #ffffff ;
	font-size : 14px ;
	line-height : 1em ;
	text-align : center ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #ffffff ;
	border-radius : 0px 8px 8px 8px ;
	box-shadow : 0px 2px 3px rgba(0,0,0,0.3) ;
}
#plot_spcam .popup_one{
	width : 160px !important;
	height : 145px !important;
} 

#plot_spcam .place {
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	width : 100% ;
	height : 28px ;
	color : #ffffff ;
	font-size : 14px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 7px ;
}

#plot_spcam .photo {
	position : relative ;
	width : 100% ;
	height : 64px ; 
	text-align : center ;
}
#plot_spcam .photo_one {
	position : relative ;
	width : 140px ;
	height : 105px ;
	border-style : solid ;
	border-width : 2px ;
	border-color : #ffffff ;
	margin-left : auto ;
	margin-right : auto ;

}
#plot_spcam .photo img {
	border-style : solid ;
	border-width : 2px ;
	border-color : #ffffff ;
	margin-left : 1px ;
	margin-right : 1px ;
}


#mp_weather_div {
	top	:0px;
	left:0px;
}
#plot_weather .icon {
	cursor : pointer ;
	position : absolute ;
	overflow : visible ;
	z-index : auto ;
	width : 30px ;
	height : 30px ;
	background-color : #ffffff ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #26a5ff ;
	border-radius : 16px ;
	box-shadow : 0px 1px 3px rgba(0,0,0,0.5) ;
}

#plot_weather .icon:hover {
	z-index : 1 ;
}

#plot_weather .popup {
	position : absolute ;
	box-sizing : border-box ;
	overflow : hidden ;
	visibility : hidden ;
	top : 18px ;
	left : 15px ;
	width : 162px ;
	height : 32px ;
	background-color : rgba(38,165,255,0.9) ;
	color : #ffffff ;
	font-size : 14px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 8px ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #ffffff ;
	border-radius : 0px 8px 8px 8px ;
	box-shadow : 0px 2px 3px rgba(0,0,0,0.3) ;
}


/* section mp_popArea*/

#mp_pop_area {
	position : absolute ;
	overflow : hidden ;
	/*
	min-width : 942px ;
	min-height : 606px ;
	*/
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

#mp_pop_camhlayer {
	position : relative ;
	z-index : 1 ;
	box-sizing : border-box ;
	width : 100% ;
	height : 100% ;
	background-color : rgba(0,0,0,0.8) ;
	background-image : url(/pcsite/map/images/popback.png) ;
}

#mp_pop_camhlayer .title_box {
	position : relative ;
	width : 330px ;
	height : 40px ;
	background-color : #808080 ;
	border-radius : 20px ;
	margin-left : auto ;
	margin-right : auto ;
	margin-bottom : 10px ;
	box-shadow : 0px 2px 8px rgba(0,0,0,0.85) ;
}

#mp_pop_camhlayer .name_highway {
	position : relative ;
	box-sizing : border-box ;
	width : 320px ;
	height : 18px ;
	font-size : 14px ;
	color : #ffffff ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 3px ;
}

#mp_pop_camhlayer .name_section {
	position : relative ;
	box-sizing : border-box ;
	width : 320px ;
	height : 22px ;
	font-size : 18px ;
	color : #ffffff ;
	line-height : 1em ;
	text-align : center ;
}

#mp_pop_camhlayer .btn_close {
	cursor : pointer ;
	position : absolute ;
	overflow : hidden ;
	top : 3px ;
	right : 3px ;
	width : 32px ;
	height : 32px ;
	background-color : #808080 ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #808080 ;
	border-radius : 17px ;
}

#mp_pop_camhlayer .btn_close:hover {
	background-color : #1ba4d2 ;
	border-color : #1ba4d2 ;
}

#mp_pop_camhlayer .photo_box {
	position : relative ;
	box-sizing : border-box ;
	width : 330px ;
	height : 350px ;
	background-color : #ffffff ;
	text-align : center ;
	border-radius : 4px ;
	margin-left : auto ;
	margin-right : auto ;
	padding : 5px ;
	box-shadow : 0px 2px 8px rgba(0,0,0,0.85) ;
}

#mp_pop_camhlayer .direct0 {
	position : relative ;
	box-sizing : border-box ;
	width : 320px ;
	height : 30px ;
	background-color : #808080 ;
	color : #ffffff ;
	font-size : 18px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 6px ;
}

#mp_pop_camhlayer .direct1 {
	position : relative ;
	box-sizing : border-box ;
	width : 320px ;
	height : 30px ;
	background-color : #808080 ;
	color : #ffffff ;
	font-size : 18px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 6px ;
}

#mp_pop_camhlayer .photos {
	position : relative ;
	width : 320px ;
	height : 240px ;
	background : linear-gradient(0deg, #222222 0%, #444444 100%) ;
}

#mp_pop_camhlayer .photos img {
	position : absolute ;
	visibility : hidden ;
	top : 0px ;
	left : 0px ;
	width : 320px ;
	height : 240px ;
}

#mp_pop_camhlayer .btn_ctrl {
	cursor : pointer ;
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	width : 32px ;
	height : 32px ;
	background-color : #808080 ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #808080 ;
	border-radius : 16px ;
	margin : 5px auto 5px auto ;
}

#mp_pop_camhlayer .btn_ctrl:hover {
	background-color : #1ba4d2 ;
	border-color : #1ba4d2 ;
	box-shadow : 0px 0px 6px rgba(27,164,210,1) ;
	transition-duration : 0.3s ;
}

#mp_pop_camhlayer .grgr {
	position : absolute ;
	bottom : 7px ;
	left : 148px ;
	width : 24px ;
	height : 24px ;
	background-color : rgba(255,255,255,1) ;
	line-height : 1em ;
	padding : 5px ;
	border-radius : 20px ;
	animation-name : loadAniIcon ;
	animation-duration : 1.2s ;
	animation-fill-mode : both ;
	animation-play-state : running ;
	animation-iteration-count : infinite ;
	animation-timing-function : ease-in-out ;
}



#mp_pop_camsplayer {
	position : relative ;
	z-index : 1 ;
	box-sizing : border-box ;
	width : 100% ;
	height : 100% ;
	background-color : rgba(0,0,0,0.8) ;
	background-image : url(/pcsite/map/images/popback.png) ;
}

#mp_pop_camsplayer .title_box {
	position : relative ;
	width : 330px ;
	height : 40px ;
	background-color : #79cc52 ;
	border-radius : 20px 20px 20px 20px ;
	margin-left : auto ;
	margin-right : auto ;
	margin-bottom : 10px ;
	box-shadow : 0px 2px 8px rgba(0,0,0,0.85) ;
}

#mp_pop_camsplayer .name_highway {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	height : 18px ;
	font-size : 14px ;
	color : #ffffff ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 3px ;
}

#mp_pop_camsplayer .name_section {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	height : 22px ;
	font-size : 18px ;
	color : #ffffff ;
	line-height : 1em ;
	text-align : center ;
}

#mp_pop_camsplayer .btn_close {
	cursor : pointer ;
	position : absolute ;
	overflow : hidden ;
	top : 3px ;
	right : 3px ;
	width : 32px ;
	height : 32px ;
	background-color : #79cc52 ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #79cc52 ;
	border-radius : 17px ;
}

#mp_pop_camsplayer .btn_close:hover {
	background-color : #1ba4d2 ;
	border-color : #1ba4d2 ;
}

#mp_pop_camsplayer .photo_box {
	position : relative ;
	box-sizing : border-box ;
	width : 654px ;
	height : 290px ;
	background-color : #ffffff ;
	text-align : center ;
	border-radius : 4px ;
	margin-left : auto ;
	margin-right : auto ;
	padding : 5px ;
	box-shadow : 0px 2px 8px rgba(0,0,0,0.85) ;
}
#mp_pop_camsplayer .photo_box_one {
	width : 330px !important;
}

#mp_pop_camsplayer .photo_frame {
	position : relative ;
	float : left ;
	width : 320px ;
	height : 240px ;
	margin-bottom : 5px ;
}

#mp_pop_camsplayer .direct {
	position : relative ;
	box-sizing : border-box ;
	width : 320px ;
	height : 30px ;
	background-color : #79cc52 ;
	color : #ffffff ;
	font-size : 18px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 6px ;
}

#mp_pop_camsplayer .photos {
	position : relative ;
	width : 320px ;
	height : 240px ;
	background : linear-gradient(0deg, #222222 0%, #444444 100%) ;
}

#mp_pop_camsplayer .photos img {
	position : absolute ;
	visibility : hidden ;
	top : 0px ;
	left : 0px ;
	width : 320px ;
	height : 240px ;
}


#mp_pop_camsplayer .btn_ctrl {
	cursor : pointer ;
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	width : 32px ;
	height : 32px ;
	background-color : #79cc52 ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #79cc52 ;
	border-radius : 16px ;
	margin : 5px auto 5px auto ;
}

#mp_pop_camsplayer .btn_ctrl:hover {
	background-color : #1ba4d2 ;
	border-color : #1ba4d2 ;
	box-shadow : 0px 0px 6px rgba(27,164,210,1) ;
	transition-duration : 0.3s ;
}

#mp_pop_camsplayer .grgr {
	position : absolute ;
	bottom : 7px ;
	left : 310px ;
	width : 24px ;
	height : 24px ;
	background-color : rgba(255,255,255,1) ;
	line-height : 1em ;
	padding : 5px ;
	border-radius : 20px ;
	animation-name : loadAniIcon ;
	animation-duration : 1.2s ;
	animation-fill-mode : both ;
	animation-play-state : running ;
	animation-iteration-count : infinite ;
	animation-timing-function : ease-in-out ;
}
#mp_pop_camsplayer .grgr_photo_one  {
	left: 148px !important;
}

#mp_pop_weatherlayer {
	position : relative ;
	box-sizing : border-box ;
	z-index : 1 ;
	width : 100% ;
	height : 100% ;
	background-color : rgba(38,165,255,0.8) ;
	background-image : url(/pcsite/map/images/popback.png) ;
}

#mp_pop_weatherlayer .title_box {
	position : relative ;
	box-sizing : border-box ;
	width : 454px ;
	height : 50px ;
	background : linear-gradient(0deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.95) 100%) ;
	color : #1886f2 ;
	border-radius : 8px 8px 0px 0px ;
	margin-left : auto ;
	margin-right : auto ;
	box-shadow : 0px 2px 4px rgba(0,0,0,0.2) ;
}

#mp_pop_weatherlayer .point_name {
	position : relative ;
	width : 100% ;
	font-size : 20px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 6px ;
}

#mp_pop_weatherlayer .update_text {
	position : relative ;
	width : 100% ;
	font-size : 14px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 2px ;
}

#mp_pop_weatherlayer .btn_close {
	cursor : pointer ;
	position : absolute ;
	overflow : hidden ;
	top : 7px ;
	right : 4px ;
	width : 32px ;
	height : 32px ;
	background-color : #b3b3b3 ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #b3b3b3 ;
	border-radius : 17px ;
}

#mp_pop_weatherlayer .btn_close:hover {
	background-color : #1ba4d2 ;
	border-color : #1ba4d2 ;
}

#obs_box {
	position : relative ;
	box-sizing : border-box ;
	width : 454px ;
	background-color : rgba(255,255,255,0.85) ;
	text-align : center ;
	padding : 4px ;
	margin-top : 1px;
	margin-left : auto ;
	margin-right : auto ;
	box-shadow : 0px 2px 4px rgba(0,0,0,0.2) ;
}

#obs_icon {
	display : inline-block ;
	overflow : hidden ;
	vertical-align : top ;
	width : 72px ;
	height : 72px ;
	border-radius : 36px ;
	margin-right : 14px ;
}

#obs_icon .color000 {
	background-color : #dddddd ;
}

#obs_icon .color100 {
	background-color : #ff9426 ;
}
#obs_icon .color200 {
	background-color : #b1b1b1 ;
}
#obs_icon .color300 {
	background-color : #2625d8 ;
}
#obs_icon .color400 {
	background-color : #89bbee ;
}
#obs_icon .color430 {
	background-color : #89bbee ;
}
#obs_icon .color950 {
	background-color : #628bb3 ;
}

#mp_pop_weatherlayer .obs_table {
	display : inline-table ;
	border-collapse : separate ;
	border-spacing : 0px ;
	margin-top : 3px ;
}

#mp_pop_weatherlayer .obs_index {
	height : 22px ;
	color : #1886f2 ;
	font-size : 16px ;
	line-height : 1em ;
	text-align : left ;
}

#mp_pop_weatherlayer .obs_separate {
	width : 22px ;
	height : 22px ;
	color : #1886f2 ;
	font-size : 16px ;
	line-height : 1em ;
	text-align : center ;
}

#mp_pop_weatherlayer .obs_val {
	height : 22px ;
	color : #4d4d4d ;
	font-size : 16px ;
	line-height : 1em ;
	text-align : left ;
}

#mp_pop_weatherlayer .weather_box {
	position : relative ;
	overflow : hidden ;
	width : 454px ;
/*	height : 274px ; */
	min-height: 150px;
	line-height : 13px ;
	margin-top : 1px ;
	margin-bottom : 0px ;
	margin-left : auto ;
	margin-right : auto ;
	box-shadow : 0px 2px 4px rgba(0,0,0,0.2) ;
}
#mp_pop_weatherlayer span.none_weather {
	width: 100%;
	background-color: #FFFFFF;
	display: block;
	line-height: 150px;
	text-align: center;
	position: relative;
	min-height: inherit;
	color: #1886f2;
	font-weight: bold;
}
#mp_pop_weatherlayer .weather_box ul {
	position : relative ;
	float : left ;
	list-style : none ;
	width : 90px ;
/*	height : 274px ; */
}

#mp_pop_weatherlayer .weather_box li:nth-child(1) {
	box-sizing : border-box ;
	width : 100% ;
	height : 40px ;
	font-size : 16px ;
	line-height : 18px ;
	text-align : center ;
	padding-top : 2px ;
	margin-bottom : 1px ;
}

#mp_pop_weatherlayer .weather_box li:nth-child(2) {
	box-sizing : border-box ;
	width : 100% ;
	height : 50px ;
	text-align : center ;
	margin-bottom : 1px ;
}

#mp_pop_weatherlayer .weather_box li:nth-child(3) {
	box-sizing : border-box ;
	width : 100% ;
	height : 80px ;
	text-align : center ;
	margin-bottom : 1px ;
}

#mp_pop_weatherlayer .weather_box li:nth-child(4) {
	box-sizing : border-box ;
	width : 100% ;
	height : 50px ;
	text-align : center ;
	margin-bottom : 1px ;
}

#mp_pop_weatherlayer .weather_box li:nth-child(5) {
	box-sizing : border-box ;
	width : 100% ;
	height : 50px ;
	text-align : center ;
	margin-bottom : 1px ;
}
#mp_pop_weatherlayer .weather_box li:nth-child(6) {
	box-sizing : border-box ;
	width : 100% ;
	height : 50px ;
	text-align : center ;
	margin-bottom : 1px ;
}
#mp_pop_weatherlayer .weather_box .index_list li {
	background-color : rgba(255,255,255,0.75) ;
	color : #1886f2 ;
	font-size : 16px ;
	border-bottom-color : rgba(0,26,102,0) ;
}

#mp_pop_weatherlayer .weather_box .weather_list {
	background-color : rgba(0,34,102,0.55) ;
	color : #ffffff ;
	margin-left : 1px ;
}

#mp_pop_weatherlayer .weather_box .weather_list li {
	background-color : rgba(0,34,102,0.4) ;
}

#mp_pop_weatherlayer .weather_box .val_text {
	display : inline-block ;
	font-size : 24px ;
	line-height : 1em ;
	padding-top : 7px ;
}
#mp_pop_weatherlayer .weather_box .temp_val_text {
	display: inline-block;
	font-size: 24px;
	line-height: 50px;
}
#mp_pop_weatherlayer .weather_box .unit {
	display : inline-block ;
	font-size : 12px ;
	line-height : 1em ;
	padding-top : 3px ;
}

#mp_pop_weatherlayer .foot_box {
	position : relative ;
	width : 454px ;
	height : 40px ;
	background : linear-gradient(0deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.95) 100%) ;
	text-align : center ;
	border-radius : 0px 0px 8px 8px ;
	margin-left : auto ;
	margin-right : auto ;
	box-shadow : 0px 2px 4px rgba(0,0,0,0.2) ;
}

#mp_pop_weatherlayer .grgr {
	position : absolute ;
	width : 24px ;
	height : 24px ;
	background-color : rgba(255,255,255,1) ;
	line-height : 1em ;
	padding : 5px ;
	border-radius : 20px ;
	margin-left : auto ;
	margin-right : auto ;
	animation-name : loadAniIcon ;
	animation-duration : 1.2s ;
	animation-fill-mode : both ;
	animation-play-state : running ;
	animation-iteration-count : infinite ;
	animation-timing-function : ease-in-out ;
}



/* pop_box */

#mp_pop_box {
	position : absolute ;
	width : 234px ;
	background-color : #ffffff;
	color : #000000 ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #ffffff ;
	box-shadow : 0px 2px 3px rgba(0,0,0,0.4) ;
}

#mp_pop_box .btn_close {
	cursor : pointer ;
	position : absolute ;
	box-sizig : border-box ;
	overflow : hidden ;
	top : -10px ;
	right : 2px ;
	width : 20px ;
	height : 20px ;
	border-radius : 10px ;
	background-color : #000000 ;
}

#mp_pop_box .color0 {
	background-color : #000000 ;
}

#mp_pop_box .color1 {
	background-color : #bf4c7c ;
}

#mp_pop_box .color2 {
	background-color : #216bd9 ;
}

#mp_pop_box .color3 {
	background-color : #2db32d ;
}

#mp_pop_box .color4 {
	background-color : #ff9400 ;
}

#mp_pop_box .color5 {
	background-color : #d90000 ;
}

#mp_pop_box .color6 {
	background-color : #ffacff ;
}

#mp_pop_box .color7 {
	background-color : #cccc00 ;
}
#mp_pop_box .color8 {
	background-color : #e63900 ;
}
#mp_pop_box .color9 {
	background-color : #999999 ;
}
#mp_pop_box .color10 {
	background-color : #de4278 ;
}
#mp_pop_box .title {
	position : relative ;
	box-sizing : border-box ;
	width : 234px ;
	color : #ffffff ;
	font-size : 16px ;
	line-height : 1em ;
	text-align : center ;
	padding : 4px ;
}

#mp_pop_box .road {
	position : relative ;
	box-sizing : border-box ;
	width : 234px ;
	background-color : rgba(0,0,0,0.1) ;
	color : #4d4d4d ;
	font-size : 14px ;
	line-height : 1em ;
	text-align : center ;
	padding : 3px ;
}

#mp_pop_box .point {
	position : relative ;
	box-sizing : border-box ;
	width : 234px ;
	min-height : 60px ;
	color : #4d4d4d ;
	font-size : 14px ;
	line-height : 18px ;
	padding : 4px ;
	margin-top: 1px
}

#mp_pop_box .fillColor0 {
	background-color : rgba(0,0,0,0.2) ;
}
#mp_pop_box .fillColor1 {
	background-color : rgba(191,72,124,0.1) ;
}
#mp_pop_box .fillColor2 {
	background-color : rgba(33,107,217,0.1) ;
}
#mp_pop_box .fillColor3 {
	background-color : rgba(45,179,45,0.1) ;
}
#mp_pop_box .fillColor4 {
	background-color : rgba(255,148,0,0.15) ;
}
#mp_pop_box .fillColor5 {
	background-color : rgba(230,0,0,0.1) ;
}
#mp_pop_box .fillColor6 {
	background-color : rgba(230,69,123,0.1) ;
}
#mp_pop_box .fillColor7 {
	background-color : rgba(204,204,0,0.1) ;
}
#mp_pop_box .fillColor8 {
	background-color : rgba(230,57,0,0.1) ;
}
#mp_pop_box .fillColor9 {
	background-color : rgba(153,153,153,0.1) ;
}
#mp_pop_box .fillColor10 {
	background-color : rgba(102,0,204,0.1) ;
}
#mp_pop_box .point .jamText {
	width : 170px;
}
#mp_pop_box .point .jam {
	position : absolute;
	box-sizing : border-box ;
	top : 3px;
	right : 4px;
	width : 54px;
	height : 54px;
	background-color : #ff9400;
	color : #ffffff;
	text-align : center;
	font-size : 32px;
	padding-top : 7px;
	line-height : 1em;
	font-weight : 500;
}

#mp_pop_box .point .jam span {
	position : absolute;
	left : 0px;
	bottom : 3px;
	width : 54px;
	height : 12px;
	line-height : 1em;
	text-align : center;
	font-size : 12px;
}

#mp_sp_box {
	position : absolute ;
	width : 180px ;
	height : 85px ;
	background-color : rgba(255,255,255,0.9) ;
	border-style : solid ;
	border-width : 2px ;
	border-color : #6bbf43 ;
	border-radius : 8px 8px 0px 8px ;
	box-shadow : 0px 2px 3px rgba(0,0,0,0.4) ;
}

#mp_sp_box .btn {
	cursor : pointer ;
	position : relative ;
	box-sizing : border-box ;
	float : left ;
	width : 84px ;
	height : 32px ;
	background-color : #6bbf43 ;
	background-image : url(/pcsite/map/images/iconMode3on.svg) ;
	background-size : 32px 32px ;
	background-repeat : no-repeat ;
	background-position-x : 52px ;
	color : #ffffff ;
	font-size : 14px ;
	line-height : 1em ;
	border-radius : 4px ;
	padding-top : 9px ;
	padding-left :6px ;
	margin-top : 4px ;
	margin-left : 4px ;
}

#mp_sp_box .btn:hover,#mp_sp_box .btnOne:hover {
	background-color : #6bd936 ;
	box-shadow : 0px 1px 2px rgba(0,0,0,0.25) ;
}
#mp_sp_box .btn a, #mp_sp_box .btnOne a{
    color: #FFFFFF;
}
#mp_sp_box .btnOne {
cursor: pointer;
    position: relative;
    box-sizing: border-box;
    text-align: center;
    width: 172px;
    height: 32px;
    background-color: #6bbf43;
    background-image: url(/pcsite/map/images/iconMode3on.svg);
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position-x: 128px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1em;
    border-radius: 4px;
    padding-top: 9px;
    padding-left: 6px;
    margin-top: 4px;
    margin-left: 4px;

}
#mp_sp_box .btn_close {
	cursor : pointer ;
	position : absolute ;
	box-sizing :  border-box ;
	overflow : hidden ;
	top : 3px ;
	right : 3px ;
	width : 18px ;
	height : 18px ;
	background-color : #6bbf43 ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #6bbf43 ;
	border-radius : 9px ;
}

#mp_sp_name {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	color : #6bbf43 ;
	font-size : 16px ;
	line-height : 1em ; 
	text-align : center ;
	padding : 4px ;
}

#mp_sp_hw {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	background-color : rgba(0,0,0,0.1) ;
	color : #4d4d4d ;
	font-size : 14px ;
	line-height : 1em ;
	text-align : center ;
	padding : 3px ;
}

#mp_map_layer_box {
	position : absolute ;
	top : 192px ;
	right : 15px ;
}

#mp_map_layer_box .map_layer_btn {
	cursor : pointer ;
	position : relative ;
	width : 48px ;
	height : 48px ;
	line-height : 1em ;
	text-align : center ;
	border-style : solid ;
	border-width : 6px ;
	border-color : rgba(0,119,204,0) ;
	border-radius : 30px ;
	transition-duration : 0.3s ;
}

#mp_map_layer_box .map_layer_btn:hover {
	border-color : rgba(0,119,204,0.35) ;
	transition-duration : 0.3s ;
}

#mp_map_layer_box .map_layer_btn img {
	width : 46px ;
	height : 46px ;
	background : linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%) ;
	border-style : solid ;
	border-width : 1px ;
	border-color : #67b0e6 ;
	border-radius : 24px ;
	box-shadow : 0px 1px 2px rgba(0,0,0,0.25) ;
	transition-duration : 0.3s ;
	-moz-user-select: none;
}

div#mp_balloon_camera_sapa, div#mp_balloon_camera_road {
	position: absolute;
	width: 270px;
	height: 50px;
	background-color: rgba(0, 119, 204, 0.75);
	right: 60px;
	border-radius: 20px;
	border: 2px outset #005f9d;
	color: #ffffff;
	font-size: 11px;
	text-align: center;
	line-height: 20px;
	padding-top: 10px;
}

div#mp_balloon_camera_road {
	top: 0px;
}
div#mp_balloon_camera_sapa {
	top: 66px;
}


.unselectable  {
	webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
/* test */
#mp_test {
	border : 1px solid #eeeeee;
	min-width:150px;
	min-height:50px;
	position:absolute;
	right:100px;
	top:50px;
	z-index: 1;
	background-color: antiquewhite;}