.map_con ::-webkit-scrollbar {
  width: 5px;
}
.map_con ::-webkit-scrollbar-track {
  background: #2158a6;
  border-radius: 6px;
}
.map_con ::-webkit-scrollbar-thumb {
  background: #537dba;
  border-radius: 6px;
}
.map_con ::-webkit-scrollbar-thumb:hover {
  background: #072d64;
}

.data_nama_class{display:none;}
.map_container{position: relative;width:1440px;margin:0 auto;overflow: hidden;}
.map-wrapper{position: relative;width:1100px;margin-left:-10%;}
.map-box{position: relative;}
.map-box svg{width:100%;margin:0px!important;}
#map-10{z-index: 4;position: absolute;}
#map-10 path{opacity: 0;}
#map-11{z-index: 2;}

.province_ul{width:100%; height:555px; position:absolute;  margin:0 auto; left:0; top:0; z-index:3;}
.province_ul li{ color:#666; font-size:14px;  width:100px; height:40px; line-height:40px; position:absolute;display: none;}
.province_ul li span{display: block;}
.province_ul li.on { padding-left:20px; background:url(https://omo-oss-image.thefastimg.com/portal-saas/ngc202201260005/cms/image/f51ffbfd-e350-43b0-8f4f-8f39d554ac06.png) no-repeat left center;background-size: 16px;display: block;}
.province_ul li.on span{display: block;}
.province_ul li.on.other_bg{ background:url(https://omo-oss-image.thefastimg.com/portal-saas/ngc202201260005/cms/image/a744eb43-5808-47ec-bff6-c0e87e0d7620.png) no-repeat left center;background-size: 16px;}
.province_ul li.m01{ left:76%; top:32%;}
.province_ul li.m02{ left:78%; top:25%;}
.province_ul li.m03{ left:80%; top:16%;}
.province_ul li.m04{ left:69%; top:36%;}
.province_ul li.m05{ left:70%; top:39.5%;padding-top: 0px;padding-left: 25px;}
.province_ul li.m06{ left:67%; top:38%;padding-left: 0;padding-top: 20px;}
.province_ul li.m07{ left:64%; top:45%;padding-left: 0px;padding-top: 20px;}
.province_ul li.m08{ left:68%; top:27%;}
.province_ul li.m09{ left:75.5%; top:61%;}
.province_ul li.m10{ left:73%; top:56%;}
.province_ul li.m11{ left:73%; top:68%;}
.province_ul li.m12{ left:69.5%; top:60%;padding-left: 5px;padding-top: 20px;}
.province_ul li.m13{ left:71%; top:76%;}
.province_ul li.m14{ left:67.5%; top:72%;padding-left: 0px;padding-top: 20px;}
.province_ul li.m15{ left:70%; top:47%;}
.province_ul li.m16{ left:65%; top:54%;padding-left: 0px;padding-top: 20px;}
.province_ul li.m17{ left:63.5%; top:62%;}
.province_ul li.m18{ left:63%; top:70%;padding-left: 5px;padding-top: 20px;}
.province_ul li.m19{ left:65%; top:83%;}
.province_ul li.m20{ left:59%; top:83%;}
.province_ul li.m21{ left:61%; top:94%;}
.province_ul li.m22{ left:58%; top:65%;}
.province_ul li.m23{ left:51%; top:63%;}
.province_ul li.m24{ left:56.5%; top:73%;}
.province_ul li.m25{ left:50%; top:79%;}
.province_ul li.m26{ left:35%; top:58%;}
.province_ul li.m27{ left:60.5%; top:52%;padding-left: 0px;padding-top: 20px;}
.province_ul li.m28{ left:51%; top:39%;padding-left: 5px;padding-top: 20px;}
.province_ul li.m29{ left:44%; top:47%;}
.province_ul li.m30{ left:57%; top:45%;padding-left: 5px;padding-top: 20px;}
.province_ul li.m31{ left:36%; top:27%;}
.province_ul li.m32{ left:75%; top:81%;}

.map_con{
    position: absolute!important;
    right: 10%;top: 50%;
    width:420px!important;
    transform:translateY(-50%);
    z-index: 5;
}

.m_titl{border-bottom: 1px solid #2158a6;overflow: hidden;padding-bottom: 1.2vw;margin-bottom: 1.2vw;}
.m_titl .h3{font-size:24px;float: left;color:#fff;margin-bottom:0px;}
.m_titl .img{float: right;max-width: 110px;}
.m_titl .img img{width:100%;}

.m_list{background: var(--blue);color: #fff;padding:40px 30px;width:100%!important;position: absolute!important;left: 0px;top:50%; display: none;z-index: 4;transform:translateY(-50%);}
.des_con .m_list{transform:translateY(0%);top:0px;}
.m_list .m_scroll{overflow-y: auto;max-height:330px;padding-right:20px;}
.m_list .m_t_con{border-bottom: 1px solid #2158a6;padding-bottom: 1vw;margin-bottom: 1vw;}
.m_list .m_t_con .h4{font-size: 18px;margin-bottom:20px;}
.m_list .m_t_con p{color:#fff;font-size: 14px;margin-bottom: 10px;overflow: hidden;}
.m_list .m_t_con p svg{float: left;width:17px;opacity: 0.7;height:17px;margin:0px;margin-top:1px;}
.m_list .m_t_con p span{padding-left:10px;float: left;display: inline-block;width: 90%;}
.m_list.on{display: block;}

@media only screen and (max-width: 1600px) {
	.map_con{width:26vw!important;}
	.m_list .m_scroll{max-height: 20vw;}
	.province_ul li span{font-size: 12px;}

	.map_container{width:80vw;}
	.map-wrapper{width:60vw;}
	.province_ul{height:31vw;}

	.province_ul li.m01{ left:76%; top:31%;}
	.province_ul li.m02{ left:78%; top:23%;}
	.province_ul li.m03{ left:78%; top:15%;}
	.province_ul li.m04{ left:69%; top:34.3%;}
	.province_ul li.m05{ left:70%; top:37%;}
	.province_ul li.m06{ left:67.3%; top:38%;}
	.province_ul li.m07{ left:64%; top:41%;}
	.province_ul li.m08{ left:68%; top:24%;}
	.province_ul li.m09{ left:75%; top:59%;}
	.province_ul li.m10{ left:73%; top:54%;}
	.province_ul li.m11{ left:73%; top:65%;}
	.province_ul li.m12{ left:69.5%; top:57%;}
	.province_ul li.m13{ left:71%; top:73%;}
	.province_ul li.m14{ left:67.5%; top:69%;}
	.province_ul li.m15{ left:70%; top:46%;}
	.province_ul li.m16{ left:65%; top:51%;padding-top:17px;}
	.province_ul li.m17{ left:63.5%; top:59.5%;}
	.province_ul li.m18{ left:63%; top:68%;}
	.province_ul li.m19{ left:65%; top:80%;}
	.province_ul li.m20{ left:59%; top:80%;}
	.province_ul li.m21{ left:61%; top:90%;}
	.province_ul li.m22{ left:58%; top:63%;}
	.province_ul li.m23{ left:51%; top:60%;}
	.province_ul li.m24{ left:56.5%; top:71%;}
	.province_ul li.m25{ left:50%; top:75%;}
	.province_ul li.m26{ left:35%; top:54%;}
	.province_ul li.m27{ left:60.5%; top:48%;}
	.province_ul li.m28{ left:53%; top:39%;}
	.province_ul li.m29{ left:44%; top:43%;}
	.province_ul li.m30{ left:57%; top:42%;}
	.province_ul li.m31{ left:36%; top:27%;}
	.province_ul li.m32{ left:75%; top:79%;} 
}
@media only screen and (max-width: 1200px) {
	.map_container{width:90vw;}

	.map-wrapper{width:70vw;}
	.province_ul{height:36vw;}
	
	.m_list{padding:25px 20px;}
	.m_list .m_t_con p span{width: 85%;}
}

@media only screen and (max-width: 768px) {
	.map-wrapper{margin-left: -30%;}
	.map_con{width:90vw!important;position: static!important;transform: translateY(0%)!important;}
	.m_list{box-sizing:border-box;top:0px;transform: translateY(0%);position: static!important;}
	.map-wrapper{width:100vw;}
	.province_ul{height: 66vw;margin-left: 20%;}

	.m_titl{padding-bottom:3vw;margin-bottom:3vw;}
	.m_list .m_scroll{max-height:60vw;}
	.m_list .m_t_con{padding-bottom:3vw;margin-bottom:3vw;}
	
	.province_ul li span{font-size: 10px;opacity: 0;}
	.province_ul li{height: 20px;line-height: 20px;}
	.province_ul li.on{background-size: 10px;padding-left: 13px;}
	.province_ul li.on.other_bg{background-size: 10px;}
	.province_ul li.m01{ left:80%; top:35%;}
	.province_ul li.m02{ left:84%; top:28%;}
	.province_ul li.m03{ left:82%; top:18%;}
	.province_ul li.m04{ left:70%; top:38.5%;}
	.province_ul li.m05{ left:71.5%; top:41%;}
	.province_ul li.m06{ left:68.3%; top:44%;padding-top:4px;}
	.province_ul li.m07{ left:64%; top:44%;padding-top:10px;padding-left:0px;}
	.province_ul li.m08{ left:65%; top:34%;}
	.province_ul li.m09{ left:78%; top:63%;}
	.province_ul li.m10{ left:75%; top:57%;}
	.province_ul li.m11{ left:75%; top:70%;}
	.province_ul li.m12{ left:71%; top:62%;}
	.province_ul li.m13{ left:72%; top:78%;}
	.province_ul li.m14{ left:67.5%; top:74%;}
	.province_ul li.m15{ left:72%; top:50%;}
	.province_ul li.m16{ left:65%; top:56%;padding-top:17px;}
	.province_ul li.m17{ left:63.5%; top:64.5%;}
	.province_ul li.m18{ left:63%; top:74%;}
	.province_ul li.m19{ left:65%; top:84%;}
	.province_ul li.m20{ left:59%; top:84%;}
	.province_ul li.m21{ left:59%; top:96%;}
	.province_ul li.m22{ left:56%; top:67%;}
	.province_ul li.m23{ left:49%; top:63%;}
	.province_ul li.m24{ left:54.5%; top:75%;}
	.province_ul li.m25{ left:46%; top:80%;}
	.province_ul li.m26{ left:26%; top:57%;}
	.province_ul li.m27{ left:58.5%; top:54%;}
	.province_ul li.m28{ left:49%; top:43%;}
	.province_ul li.m29{ left:40%; top:48%;}
	.province_ul li.m30{ left:55%; top:45%;}
	.province_ul li.m31{ left:23%; top:30%;}
	.province_ul li.m32{ left:78%; top:82%;} 
}
@media only screen and (max-width: 700px) {
		.province_ul li{height: 20px;line-height: 20px;}
		.province_ul li.on{background-size: 10px;padding-left: 13px;}
		.province_ul li.on.other_bg{background-size: 10px;}
		.province_ul li.m01{ left:80%; top:32%;}
		.province_ul li.m02{ left:84%; top:25%;}
		.province_ul li.m03{ left:82%; top:15%;}
		.province_ul li.m04{ left:70%; top:34.5%;}
		.province_ul li.m05{ left:71%; top:38%;}
		.province_ul li.m06{ left:68.3%; top:41%;padding-top:4px;}
		.province_ul li.m07{ left:63%; top:41%;padding-top:10px;padding-left:0px;}
		.province_ul li.m08{ left:65%; top:28%;}
		.province_ul li.m09{ left:78%; top:62%;}
		.province_ul li.m10{ left:75%; top:54%;}
		.province_ul li.m11{ left:75%; top:67%;}
		.province_ul li.m12{ left:71%; top:59%;}
		.province_ul li.m13{ left:72%; top:75%;}
		.province_ul li.m14{ left:67.5%; top:71%;}
		.province_ul li.m15{ left:72%; top:47%;}
		.province_ul li.m16{ left:65%; top:53%;padding-top:17px;}
		.province_ul li.m17{ left:63.5%; top:61.5%;}
		.province_ul li.m18{ left:63%; top:71%;}
		.province_ul li.m19{ left:65%; top:81%;}
		.province_ul li.m20{ left:59%; top:81%;}
		.province_ul li.m21{ left:58.5%; top:93%;}
		.province_ul li.m22{ left:56%; top:64%;}
		.province_ul li.m23{ left:49%; top:60%;}
		.province_ul li.m24{ left:54.5%; top:72%;}
		.province_ul li.m25{ left:46%; top:77%;}
		.province_ul li.m26{ left:26%; top:54%;}
		.province_ul li.m27{ left:58.5%; top:51%;}
		.province_ul li.m28{ left:49%; top:40%;}
		.province_ul li.m29{ left:40%; top:45%;}
		.province_ul li.m30{ left:54%; top:42%;}
		.province_ul li.m31{ left:23%; top:27%;}
		.province_ul li.m32{ left:77%; top:79%;} 
}