.legend-marker {
	position: absolute;
	z-index: 1;
	right: -10px;
	top: -10px;
	padding: 10px;
}
@media screen and (min-width: 770px) {
	.legend-marker:hover .legend-marker-info {
		display: block;
	}
}
@media (max-width: 769px) {
	.legend-marker.active .legend-marker-info {
		display: block;
	}
}
.legend-marker-info {
	display: none;
	position: absolute;
	right: -35px;
	bottom: 45px;
	z-index: 10;
}
.legend-marker-info-inner {
	width: 490px;
	position: relative;
}
.legend-marker-info-inner img {
	display: none;
	width: 100% !important;
}
.lang_en .legend-marker-info-inner img.en {
	display: block;
}
.lang_zh-hk .legend-marker-info-inner img.zh-hk {
	display: block;
}
.lang_zh-cn .legend-marker-info-inner img.zh-cn {
	display: block;
}
@media screen and (min-width: 980px) {
	.legend-left_popup .legend-marker-info {
		right: -490px;
		bottom: -90px;
	}
}
@media screen and (max-width: 1499px) {
	.legend-marker {
		/* padding: 4px; */
	}
	.legend-marker img {
		/* width: 18px; */
	}
	.legend-marker-info {
		right: -35px;
		bottom: 40px;
	}
}
/* mobile view */
@media screen and (max-width: 549px) {
	.legend-marker-info {
		right: -16px;
	}
	.legend-marker-info-inner {
		/* height: 300px; */
		width: 100%;
	}
}
@media screen and (max-width: 499px) {
	.legend-marker {
		/* padding: 2px; */
	}
	.legend-marker img {
		/* width: 15px; */
	}
	.legend-marker-info {
		right: -14px;
	}
}
/* tooltip */
.tooltip {
	position: absolute;
	display: block;
	width: 18%;
	height: 12%;
	/* background: rgba(0, 0, 255, 0.5); */
}
.tooltip:nth-child(1) {
	top: 44%;
	left: 8%;
}
.tooltip:nth-child(2) {
	top: 59%;
	left: 8%;
}
.tooltip:nth-child(3) {
	top: 74%;
	left: 8%;
}
.tooltip:nth-child(4) {
	top: 44%;
	left: 28%;
}
.tooltip:nth-child(5) {
	top: 59%;
	left: 28%;
}
.tooltip:nth-child(6) {
	top: 74%;
	left: 28%;
}
.tooltip:nth-child(7) {
	top: 44%;
	left: 52%;
}
.tooltip:nth-child(8) {
	top: 59%;
	left: 52%;
}
.tooltip:nth-child(9) {
	top: 74%;
	left: 52%;
}
.tooltip:nth-child(10) {
	top: 44%;
	left: 72%;
}
.tooltip:nth-child(11) {
	top: 59%;
	left: 72%;
}
.tooltip:nth-child(12) {
	top: 74%;
	left: 72%;
}
.tooltip span {
	visibility: hidden;
	width: 120px;
	background-color: #fff;
	color: #867547;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: 50%;
	margin-left: -60px;
	font-size: 12px;
}
.tooltip span::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #fff transparent transparent transparent;
}
.tooltip:hover span {
	visibility: visible;
}