* {margin: 0;padding: 0;}
html *, html:after, html:before {box-sizing: inherit;}
html {width:100%;height:100%;overflow: hidden;overscroll-behavior: none; -webkit-overflow-scrolling: touch;}
.hidden {display: none!important;}

body{
	position: fixed;
    margin: 0 auto;
    width: 100%;
    height: 550px;
    min-height: 550px;
    max-height: 550px;
    display: inline-block;
    box-sizing: border-box;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

.container{ 
    position: relative;
    display: block;
    width: 100%;
    max-width: 840px;
    min-width: 290px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

.title{ 
    width: 100%;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    color: #000;
    font-weight: 600;
    top: 0;
    left: 1px;
    position: relative;
    border-radius: 3px 3px 0 0;
    letter-spacing: 0.2px;
    padding-top: 12px;   
}

.subtitle{
	position:relative;
	top:0;
	left:0;
	margin-top: 8px;
	font-size: 15px;
	font-weight:400;
}



.source{ position: absolute;bottom: 0;font-size: 12px;color: #757170;width: 100%; border-top: 1px solid #eee;padding-top: 2px;}
.source a{ font-size: 13px;text-decoration: none;color: #757170;cursor: pointer;}
.logo{position: absolute;right: 3px;bottom: 1px;font-size: 12px;font-weight:600;letter-spacing:-0.3px;color: #848484;text-transform:uppercase;letter-spacing: 0.2px;transition:all 0.3s ease;z-index:2;}
.logo a{ text-decoration:none; color:#848484; }
.updatetime{ position: absolute;right: 3px;bottom: 1px;font-size: 11px;font-weight:500;letter-spacing:-0.3px;color: #848484;text-transform:uppercase;letter-spacing: 0.2px;transition:all 0.3s ease;z-index:2; }
.logo.hide, .updatetime.hide{ opacity:0; z-index:1;}

.loader { -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    border: 3px solid #ddd;
    border-top: 3px solid #42a5f5;
    border-radius: 50%;
    height: 75px;
    width: 75px;
    margin: 100px auto 150px auto;
    position: absolute;
    left: calc(50% - 37.5px);}

.desktopSrc{ display:inline-block; }
.mobileSrc{ display:none; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; }
::-webkit-scrollbar-thumb:hover { background: #555; }




.provinceMenu{
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
	width: 100%;
    height: 36px;
    text-align: center;
    margin-top: 0;
    z-index: 5;
}

.provinceMenu select {
    vertical-align: top;
    box-sizing: border-box;
    outline: 0;
    background-color: #fff;
    border: none;
    border: 1px solid #777;
    border-radius: 2px;
    box-shadow: none;
    color: #000;
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: normal;
    padding: .5em;
    width: 182px;
    height: 100%;
    text-transform: uppercase;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../svg/select.svg);
    background-size: 16px;
    background-position: 95% center;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    position: relative;
    display: inline-block;
    -ms-user-select: none;
    user-select: none;
    left: 0;
    top: 0;
}

.provinceMenu select option {
    background-color: #fff;
    color: #848484;
    text-transform: uppercase;
}


.boxControls, .boxControls0{
	position: relative;
    width: 228px;
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    display: inline-block;
    float: right;
}

.boxControls .choice, 
.boxControls0 .choice{
	position: relative;
    width: 48%;
    height: 100%;
    display: inline-block;
    text-align: center;
    margin: 0;
    font-weight: 400;
    color: #777;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
	text-transform: uppercase;
    transition: all 0.4s ease;
}

.boxControls .choice.active, 
.boxControls0 .choice.active{
	pointer-events: none;
    cursor: default;
    font-weight: 500;
    color: #000;
}

.boxControls .choiceLine, 
.boxControls0 .choiceLine{
	position: absolute;
    width: 40%;
    height: 2px;
    bottom: 2px;
    left: 0;
    display: inline-block;
    background-color: #000;
    transition: left 0.6s ease;
    margin: 0;
    z-index: 1;
}

.boxControls .choiceLine.minority, 
.boxControls0 .choiceLine.minority{
	left: 52.5%;
}


.boxControls .choiceLine.gender, 
.boxControls0 .choiceLine.gender{
	left: 2.5%;
}

.boxControls{
	display: none;
}

.boxControls0{
	float: none;
}


.content{
	position: relative;
    width: 100%;
    height: 440px;
    margin-top: 32px;
    display: inline-flex;
}

.content .mapContent{
    position: relative;
    display: inline-block;
    width: 63%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}




.content #map,
.content #map svg,
.content #map_m,
.content #map_m svg{
	position: relative;
    display: block;
	top: -8px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.tippy{

	cursor: pointer;
	transition: all 0.4s ease;
}

/* .content #map_m svg #Layer_2 polygon, */
/* .content #map_m svg #Layer_2 path, */
/* .content #map svg #Layer_2 polygon, */
/* .content #map svg #Layer_2 path{ */
	/* stroke: #fff; */
    /* stroke-width: 1px; */
/* } */

.content #map_m svg #Layer_2 polygon,
.content #map_m svg #Layer_2 path,
.content #map svg #Layer_2 polygon,
.content #map svg #Layer_2 path{
	stroke: #fff;
	pointer-events: none;
	fill-rule: evenodd;
    clip-rule: evenodd;
    /* stroke-width: 0px; */
}

.content #map_m svg #Layer_1 polygon,
.content #map_m svg #Layer_1 path,
.content #map svg #Layer_1 polygon,
.content #map svg #Layer_1 path{
	stroke: none;
	fill: rgba(255,255,255,0);
	fill-rule: evenodd;
    clip-rule: evenodd;
	cursor: pointer;
	transition: all 0.4s ease;
	
}



.content #map.gender svg #Guizhou_1_ polygon,
.content #map.gender svg #Guizhou_1_ path{
	fill: #f8d88c;
}

.content #map.minority svg #Guizhou_1_ polygon,
.content #map.minority svg #Guizhou_1_  path{
	fill: #A8BFBC;
}

.content #map.gender svg #Hong_Kong_1_ polygon,
.content #map.gender svg #Hong_Kong_1_ path{
	fill: #F3EFE3;
}

.content #map.minority svg #Hong_Kong_1_ polygon,
.content #map.minority svg #Hong_Kong_1_ path{
	fill: #F3F3F3;
}

.content #map.gender svg #Taiwan_1_ polygon,
.content #map.gender svg #Taiwan_1_ path{
	fill: #fdbd26;
}

.content #map.minority svg #Taiwan_1_ polygon,
.content #map.minority svg #Taiwan_1_ path{
	fill: #E6EAE9;
}

.content #map.gender svg #Macau_1_ polygon,
.content #map.gender svg #Macau_1_ path{
	fill: #F8D581;
}

.content #map.minority svg #Macau_1_ polygon,
.content #map.minority svg #Macau_1_ path{
	fill: #B3B3B3;
}

.content #map.gender svg #Hainan_1_ polygon,
.content #map.gender svg #Hainan_1_ path{
	fill: #F7DD9D;
}

.content #map.minority svg #Hainan_1_ polygon,
.content #map.minority svg #Hainan_1_ path{
	fill: #D2DCDA;
}

.content #map.gender svg #Guangdong_1_ polygon,
.content #map.gender svg #Guangdong_1_ path{
	fill: #F8D581;
}

.content #map.minority svg #Guangdong_1_ polygon,
.content #map.minority svg #Guangdong_1_ path{
	fill: #eff1f0;
}

.content #map.gender svg #Guangxi_1_ polygon,
.content #map.gender svg #Guangxi_1_ path{
	fill: #FBC84E;
}

.content #map.minority svg #Guangxi_1_ polygon,
.content #map.minority svg #Guangxi_1_ path{
	fill: #8AAAA5;
}

.content #map.gender svg #Yunnan_1_ polygon,
.content #map.gender svg #Yunnan_1_ path{
	fill: #FAC954;
}

.content #map.minority svg #Yunnan_1_ polygon,
.content #map.minority svg #Yunnan_1_ path{
	fill: #91AEAA;
}

.content #map.gender svg #Chongqing_1_ polygon,
.content #map.gender svg #Chongqing_1_ path{
	fill: #F8D47A;
}

.content #map.minority svg #Chongqing_1_ polygon,
.content #map.minority svg #Chongqing_1_ path{
	fill: #DEE5E4;
}

.content #map.gender svg #Sichuan_1_ polygon,
.content #map.gender svg #Sichuan_1_ path{
	fill: #F8D88D;
}

.content #map.minority svg #Sichuan_1_ polygon,
.content #map.minority svg #Sichuan_1_ path{
	fill: #DCE3E2;
}

.content #map.gender svg #Tibet_1_ polygon,
.content #map.gender svg #Tibet_1_ path{
	fill: #F8D379;
}

.content #map.minority svg #Tibet_1_ polygon,
.content #map.minority svg #Tibet_1_ path{
	fill: #6A938D;
}

.content #map.gender svg #Ningxia_1_ polygon,
.content #map.gender svg #Ningxia_1_ path{
	fill: #F5E5BC;
}

.content #map.minority svg #Ningxia_1_ polygon,
.content #map.minority svg #Ningxia_1_ path{
	fill: #97B3AF;
}

.content #map.gender svg #Qinghai_1_ polygon,
.content #map.gender svg #Qinghai_1_ path{
	fill: #F6E3B4;
}

.content #map.minority svg #Qinghai_1_ polygon,
.content #map.minority svg #Qinghai_1_ path{
	fill: #A4BCB8;
}

.content #map.gender svg #Xinjiang_1_ polygon,
.content #map.gender svg #Xinjiang_1_ path{
	fill: #F7DC9C;
}

.content #map.minority svg #Xinjiang_1_ polygon,
.content #map.minority svg #Xinjiang_1_ path{
	fill: #85A6A2;
}

.content #map.gender svg #Gansu_1_ polygon,
.content #map.gender svg #Gansu_1_ path{
	fill: #F9D377;
}

.content #map.minority svg #Gansu_1_ polygon,
.content #map.minority svg #Gansu_1_ path{
	fill: #D0DBD9;
}

.content #map.gender svg #Hunan_1_ polygon,
.content #map.gender svg #Hunan_1_ path{
	fill: #F8D788;
}

.content #map.minority svg #Hunan_1_ polygon,
.content #map.minority svg #Hunan_1_ path{
	fill: #DBE2E1;
}

.content #map.gender svg #Shaanxi_1_ polygon,
.content #map.gender svg #Shaanxi_1_ path{
	fill: #F9CF69;
}

.content #map.minority svg #Shaanxi_1_ polygon,
.content #map.minority svg #Shaanxi_1_ path{
	fill: #EEF0F0;
}

.content #map.gender svg #Hubei_1_ polygon,
.content #map.gender svg #Hubei_1_ path{
	fill: #F7DB98;
}

.content #map.minority svg #Hubei_1_ polygon,
.content #map.minority svg #Hubei_1_ path{
	fill: #E6EAE9;
}

.content #map.gender svg #Jiangxi_1_ polygon,
.content #map.gender svg #Jiangxi_1_ path{
	fill: #F8D684;
}

.content #map.minority svg #Jiangxi_1_ polygon,
.content #map.minority svg #Jiangxi_1_ path{
	fill: #EDEFEE;
}

.content #map.gender svg #Fujian_1_ polygon,
.content #map.gender svg #Fujian_1_ path{
	fill: #F9CF6A;
}

.content #map.minority svg #Fujian_1_ polygon,
.content #map.minority svg #Fujian_1_ path{
	fill: #E5E9E9;
}

.content #map.gender svg #Anhui_1_ polygon,
.content #map.gender svg #Anhui_1_ path{
	fill: #F9D274;
}

.content #map.minority svg #Anhui_1_ polygon,
.content #map.minority svg #Anhui_1_ path{
	fill: #F0F1F1;
}

.content #map.gender svg #Zhejiang_1_ polygon,
.content #map.gender svg #Zhejiang_1_ path{
	fill: #F9D170;
}

.content #map.minority svg #Zhejiang_1_ polygon,
.content #map.minority svg #Zhejiang_1_ path{
	fill: #F2F2F2;
}

.content #map.gender svg #Shanghai_1_ polygon,
.content #map.gender svg #Shanghai_1_ path{
	fill: #F7DB98;
}

.content #map.minority svg #Shanghai_1_ polygon,
.content #map.minority svg #Shanghai_1_ path{
	fill: #E8EBEB;
}

.content #map.gender svg #Jiangsu_1_ polygon,
.content #map.gender svg #Jiangsu_1_ path{
	fill: #F6DFA5;
}

.content #map.minority svg #Jiangsu_1_ polygon,
.content #map.minority svg #Jiangsu_1_ path{
	fill: #F1F2F2;
}

.content #map.gender svg #Henan_1_ polygon,
.content #map.gender svg #Henan_1_ path{
	fill: #F7D98E;
}

.content #map.minority svg #Henan_1_ polygon,
.content #map.minority svg #Henan_1_ path{
	fill: #E8ECEB;
}

.content #map.gender svg #Shandong_1_ polygon,
.content #map.gender svg #Shandong_1_ path{
	fill: #F8D47D;
}

.content #map.minority svg #Shandong_1_ polygon,
.content #map.minority svg #Shandong_1_ path{
	fill: #E6EAE9;
}

.content #map.gender svg #Shanxi_1_ polygon,
.content #map.gender svg #Shanxi_1_ path{
	fill: #F6DFA5;
}

.content #map.minority svg #Shanxi_1_ polygon,
.content #map.minority svg #Shanxi_1_ path{
	fill: #EEF0F0;
}

.content #map.gender svg #Tianjin_1_ polygon,
.content #map.gender svg #Tianjin_1_ path{
	fill: #F9CF68;
}

.content #map.minority svg #Tianjin_1_ polygon,
.content #map.minority svg #Tianjin_1_ path{
	fill: #e8ebeb;
}

.content #map.gender svg #Beijing_1_ polygon,
.content #map.gender svg #Beijing_1_ path{
	fill: #F6DEA2;
}

.content #map.minority svg #Beijing_1_ polygon,
.content #map.minority svg #Beijing_1_ path{
	fill: #E1E7E6;
}

.content #map.gender svg #Hebei_1_ polygon,
.content #map.gender svg #Hebei_1_ path{
	fill: #F9D377;
}

.content #map.minority svg #Hebei_1_ polygon,
.content #map.minority svg #Hebei_1_ path{
	fill: #E8EBEB;
}

.content #map.gender svg #Liaoning_1_ polygon,
.content #map.gender svg #Liaoning_1_ path{
	fill: #F9CE66;
}

.content #map.minority svg #Liaoning_1_ polygon,
.content #map.minority svg #Liaoning_1_ path{
	fill: #CCD8D6;
}

.content #map.gender svg #Jilin_1_ polygon,
.content #map.gender svg #Jilin_1_ path{
	fill: #F8D88B;
}

.content #map.minority svg #Jilin_1_ polygon,
.content #map.minority svg #Jilin_1_ path{
	fill: #CDD8D7;
}

.content #map.gender svg #Inner_Mongolia_1_ polygon,
.content #map.gender svg #Inner_Mongolia_1_ path{
	fill: #F7D98E;
}

.content #map.minority svg #Inner_Mongolia_1_ polygon,
.content #map.minority svg #Inner_Mongolia_1_ path{
	fill: #B0C4C1;
}

.content #map.gender svg #Heilongjiang_1_ polygon,
.content #map.gender svg #Heilongjiang_1_ path{
	fill: #F8D47D;
}

.content #map.minority svg #Heilongjiang_1_ polygon,
.content #map.minority svg #Heilongjiang_1_ path{
	fill: #DBE3E2;
}

.content #map.gender svg #key rect{
	fill: url(#SVGID_1_);
}
.content #map.minority svg  #key rect{
	fill: url(#SVGID_2_);
}













.content #map_m.gender svg #Guizhou_1_ polygon,
.content #map_m.gender svg #Guizhou_1_ path,
.content #map_m.gender svg #Guizhou_1_{
	fill: #f8d88c;
}

.content #map_m.minority svg #Guizhou_1_ polygon,
.content #map_m.minority svg #Guizhou_1_ path,
.content #map_m.minority svg #Guizhou_1_{
	fill: #A8BFBC;
}

.content #map_m.gender svg #Hong_Kong_1_ polygon,
.content #map_m.gender svg #Hong_Kong_1_ path,
.content #map_m.gender svg #Hong_Kong_1_{
	fill: #F3EFE3;
}

.content #map_m.minority svg #Hong_Kong_1_ polygon,
.content #map_m.minority svg #Hong_Kong_1_ path,
.content #map_m.minority svg #Hong_Kong_1_{
	fill: #F3F3F3;
}

.content #map_m.gender svg #Taiwan_1_ polygon,
.content #map_m.gender svg #Taiwan_1_ path,
.content #map_m.gender svg #Taiwan_1_{
	fill: #fdbd26;
}

.content #map_m.minority svg #Taiwan_1_ polygon,
.content #map_m.minority svg #Taiwan_1_ path,
.content #map_m.minority svg #Taiwan_1_{
	fill: #E6EAE9;
}

.content #map_m.gender svg #Macau_1_ polygon,
.content #map_m.gender svg #Macau_1_ path,
.content #map_m.gender svg #Macau_1_{
	fill: #F8D581;
}

.content #map_m.minority svg #Macau_1_ polygon,
.content #map_m.minority svg #Macau_1_ path,
.content #map_m.minority svg #Macau_1_{
	fill: #B3B3B3;
}

.content #map_m.gender svg #Hainan_1_ polygon,
.content #map_m.gender svg #Hainan_1_ path,
.content #map_m.gender svg #Hainan_1_{
	fill: #F7DD9D;
}

.content #map_m.minority svg #Hainan_1_ polygon,
.content #map_m.minority svg #Hainan_1_ path,
.content #map_m.minority svg #Hainan_1_{
	fill: #D2DCDA;
}

.content #map_m.gender svg #Guangdong_1_ polygon,
.content #map_m.gender svg #Guangdong_1_ path,
.content #map_m.gender svg #Guangdong_1_{
	fill: #F8D581;
}

.content #map_m.minority svg #Guangdong_1_ polygon,
.content #map_m.minority svg #Guangdong_1_ path,
.content #map_m.minority svg #Guangdong_1_{
	fill: #eff1f0;
}

.content #map_m.gender svg #Guangxi_1_ polygon,
.content #map_m.gender svg #Guangxi_1_ path,
.content #map_m.gender svg #Guangxi_1_{
	fill: #FBC84E;
}

.content #map_m.minority svg #Guangxi_1_ polygon,
.content #map_m.minority svg #Guangxi_1_ path,
.content #map_m.minority svg #Guangxi_1_{
	fill: #8AAAA5;
}

.content #map_m.gender svg #Yunnan_1_ polygon,
.content #map_m.gender svg #Yunnan_1_ path,
.content #map_m.gender svg #Yunnan_1_{
	fill: #FAC954;
}

.content #map_m.minority svg #Yunnan_1_ polygon,
.content #map_m.minority svg #Yunnan_1_ path,
.content #map_m.minority svg #Yunnan_1_{
	fill: #91AEAA;
}

.content #map_m.gender svg #Chongqing_1_ polygon,
.content #map_m.gender svg #Chongqing_1_ path,
.content #map_m.gender svg #Chongqing_1_{
	fill: #F8D47A;
}

.content #map_m.minority svg #Chongqing_1_ polygon,
.content #map_m.minority svg #Chongqing_1_ path,
.content #map_m.minority svg #Chongqing_1_{
	fill: #DEE5E4;
}

.content #map_m.gender svg #Sichuan_1_ polygon,
.content #map_m.gender svg #Sichuan_1_ path,
.content #map_m.gender svg #Sichuan_1_{
	fill: #F8D88D;
}

.content #map_m.minority svg #Sichuan_1_ polygon,
.content #map_m.minority svg #Sichuan_1_ path,
.content #map_m.minority svg #Sichuan_1_{
	fill: #DCE3E2;
}

.content #map_m.gender svg #Tibet_1_ polygon,
.content #map_m.gender svg #Tibet_1_ path,
.content #map_m.gender svg #Tibet_1_{
	fill: #F8D379;
}

.content #map_m.minority svg #Tibet_1_ polygon,
.content #map_m.minority svg #Tibet_1_ path,
.content #map_m.minority svg #Tibet_1_{
	fill: #6A938D;
}

.content #map_m.gender svg #Ningxia_1_ polygon,
.content #map_m.gender svg #Ningxia_1_ path,
.content #map_m.gender svg #Ningxia_1_{
	fill: #F5E5BC;
}

.content #map_m.minority svg #Ningxia_1_ polygon,
.content #map_m.minority svg #Ningxia_1_ path,
.content #map_m.minority svg #Ningxia_1_{
	fill: #97B3AF;
}

.content #map_m.gender svg #Qinghai_1_ polygon,
.content #map_m.gender svg #Qinghai_1_ path,
.content #map_m.gender svg #Qinghai_1_{
	fill: #F6E3B4;
}

.content #map_m.minority svg #Qinghai_1_ polygon,
.content #map_m.minority svg #Qinghai_1_ path,
.content #map_m.minority svg #Qinghai_1_{
	fill: #A4BCB8;
}

.content #map_m.gender svg #Xinjiang_1_ polygon,
.content #map_m.gender svg #Xinjiang_1_ path,
.content #map_m.gender svg #Xinjiang_1_{
	fill: #F7DC9C;
}

.content #map_m.minority svg #Xinjiang_1_ polygon,
.content #map_m.minority svg #Xinjiang_1_ path,
.content #map_m.minority svg #Xinjiang_1_{
	fill: #85A6A2;
}

.content #map_m.gender svg #Gansu_1_ polygon,
.content #map_m.gender svg #Gansu_1_ path,
.content #map_m.gender svg #Gansu_1_{
	fill: #F9D377;
}

.content #map_m.minority svg #Gansu_1_ polygon,
.content #map_m.minority svg #Gansu_1_ path,
.content #map_m.minority svg #Gansu_1_{
	fill: #D0DBD9;
}

.content #map_m.gender svg #Hunan_1_ polygon,
.content #map_m.gender svg #Hunan_1_ path,
.content #map_m.gender svg #Hunan_1_{
	fill: #F8D788;
}

.content #map_m.minority svg #Hunan_1_ polygon,
.content #map_m.minority svg #Hunan_1_ path,
.content #map_m.minority svg #Hunan_1_{
	fill: #DBE2E1;
}

.content #map_m.gender svg #Shaanxi_1_ polygon,
.content #map_m.gender svg #Shaanxi_1_ path,
.content #map_m.gender svg #Shaanxi_1_{
	fill: #F9CF69;
}

.content #map_m.minority svg #Shaanxi_1_ polygon,
.content #map_m.minority svg #Shaanxi_1_ path,
.content #map_m.minority svg #Shaanxi_1_{
	fill: #EEF0F0;
}

.content #map_m.gender svg #Hubei_1_ polygon,
.content #map_m.gender svg #Hubei_1_ path,
.content #map_m.gender svg #Hubei_1_{
	fill: #F7DB98;
}

.content #map_m.minority svg #Hubei_1_ polygon,
.content #map_m.minority svg #Hubei_1_ path,
.content #map_m.minority svg #Hubei_1_{
	fill: #E6EAE9;
}

.content #map_m.gender svg #Jiangxi_1_ polygon,
.content #map_m.gender svg #Jiangxi_1_ path,
.content #map_m.gender svg #Jiangxi_1_{
	fill: #F8D684;
}

.content #map_m.minority svg #Jiangxi_1_ polygon,
.content #map_m.minority svg #Jiangxi_1_ path,
.content #map_m.minority svg #Jiangxi_1_{
	fill: #EDEFEE;
}

.content #map_m.gender svg #Fujian_1_ polygon,
.content #map_m.gender svg #Fujian_1_ path,
.content #map_m.gender svg #Fujian_1_{
	fill: #F9CF6A;
}

.content #map_m.minority svg #Fujian_1_ polygon,
.content #map_m.minority svg #Fujian_1_ path,
.content #map_m.minority svg #Fujian_1_{
	fill: #E5E9E9;
}

.content #map_m.gender svg #Anhui_1_ polygon,
.content #map_m.gender svg #Anhui_1_ path,
.content #map_m.gender svg #Anhui_1_{
	fill: #F9D274;
}

.content #map_m.minority svg #Anhui_1_ polygon,
.content #map_m.minority svg #Anhui_1_ path,
.content #map_m.minority svg #Anhui_1_{
	fill: #F0F1F1;
}

.content #map_m.gender svg #Zhejiang_1_ polygon,
.content #map_m.gender svg #Zhejiang_1_ path,
.content #map_m.gender svg #Zhejiang_1_{
	fill: #F9D170;
}

.content #map_m.minority svg #Zhejiang_1_ polygon,
.content #map_m.minority svg #Zhejiang_1_ path,
.content #map_m.minority svg #Zhejiang_1_{
	fill: #F2F2F2;
}

.content #map_m.gender svg #Shanghai_1_ polygon,
.content #map_m.gender svg #Shanghai_1_ path,
.content #map_m.gender svg #Shanghai_1_{
	fill: #F7DB98;
}

.content #map_m.minority svg #Shanghai_1_ polygon,
.content #map_m.minority svg #Shanghai_1_ path,
.content #map_m.minority svg #Shanghai_1_{
	fill: #E8EBEB;
}

.content #map_m.gender svg #Jiangsu_1_ polygon,
.content #map_m.gender svg #Jiangsu_1_ path,
.content #map_m.gender svg #Jiangsu_1_{
	fill: #F6DFA5;
}

.content #map_m.minority svg #Jiangsu_1_ polygon,
.content #map_m.minority svg #Jiangsu_1_ path,
.content #map_m.minority svg #Jiangsu_1_{
	fill: #F1F2F2;
}

.content #map_m.gender svg #Henan_1_ polygon,
.content #map_m.gender svg #Henan_1_ path,
.content #map_m.gender svg #Henan_1_{
	fill: #F7D98E;
}

.content #map_m.minority svg #Henan_1_ polygon,
.content #map_m.minority svg #Henan_1_ path,
.content #map_m.minority svg #Henan_1_{
	fill: #E8ECEB;
}

.content #map_m.gender svg #Shandong_1_ polygon,
.content #map_m.gender svg #Shandong_1_ path,
.content #map_m.gender svg #Shandong_1_{
	fill: #F8D47D;
}

.content #map_m.minority svg #Shandong_1_ polygon,
.content #map_m.minority svg #Shandong_1_ path,
.content #map_m.minority svg #Shandong_1_{
	fill: #E6EAE9;
}

.content #map_m.gender svg #Shanxi_1_ polygon,
.content #map_m.gender svg #Shanxi_1_ path,
.content #map_m.gender svg #Shanxi_1_{
	fill: #F6DFA5;
}

.content #map_m.minority svg #Shanxi_1_ polygon,
.content #map_m.minority svg #Shanxi_1_ path,
.content #map_m.minority svg #Shanxi_1_{
	fill: #EEF0F0;
}

.content #map_m.gender svg #Tianjin_1_ polygon,
.content #map_m.gender svg #Tianjin_1_ path,
.content #map_m.gender svg #Tianjin_1_{
	fill: #F9CF68;
}

.content #map_m.minority svg #Tianjin_1_ polygon,
.content #map_m.minority svg #Tianjin_1_ path,
.content #map_m.minority svg #Tianjin_1_{
	fill: #e8ebeb;
}

.content #map_m.gender svg #Beijing_1_ polygon,
.content #map_m.gender svg #Beijing_1_ path,
.content #map_m.gender svg #Beijing_1_{
	fill: #F6DEA2;
}

.content #map_m.minority svg #Beijing_1_ polygon,
.content #map_m.minority svg #Beijing_1_ path,
.content #map_m.minority svg #Beijing_1_{
	fill: #E1E7E6;
}

.content #map_m.gender svg #Hebei_1_ polygon,
.content #map_m.gender svg #Hebei_1_ path,
.content #map_m.gender svg #Hebei_1_{
	fill: #F9D377;
}

.content #map_m.minority svg #Hebei_1_ polygon,
.content #map_m.minority svg #Hebei_1_ path,
.content #map_m.minority svg #Hebei_1_{
	fill: #E8EBEB;
}

.content #map_m.gender svg #Liaoning_1_ polygon,
.content #map_m.gender svg #Liaoning_1_ path,
.content #map_m.gender svg #Liaoning_1_{
	fill: #F9CE66;
}

.content #map_m.minority svg #Liaoning_1_ polygon,
.content #map_m.minority svg #Liaoning_1_ path,
.content #map_m.minority svg #Liaoning_1_{
	fill: #CCD8D6;
}

.content #map_m.gender svg #Jilin_1_ polygon,
.content #map_m.gender svg #Jilin_1_ path,
.content #map_m.gender svg #Jilin_1_ polygon,
.content #map_m.gender svg #Jilin_1_{
	fill: #F8D88B;
}

.content #map_m.minority svg #Jilin_1_ polygon,
.content #map_m.minority svg #Jilin_1_ path,
.content #map_m.minority svg #Jilin_1_{
	fill: #CDD8D7;
}

.content #map_m.gender svg #Inner_Mongolia_1_ polygon,
.content #map_m.gender svg #Inner_Mongolia_1_ path,
.content #map_m.gender svg #Inner_Mongolia_1_{
	fill: #F7D98E;
}

.content #map_m.minority svg #Inner_Mongolia_1_ polygon,
.content #map_m.minority svg #Inner_Mongolia_1_ path,
.content #map_m.minority svg #Inner_Mongolia_1_{
	fill: #B0C4C1;
}

.content #map_m.gender svg #Heilongjiang_1_ polygon,
.content #map_m.gender svg #Heilongjiang_1_ path,
.content #map_m.gender svg #Heilongjiang_1_{
	fill: #F8D47D;
}

.content #map_m.minority svg #Heilongjiang_1_ polygon,
.content #map_m.minority svg #Heilongjiang_1_ path,
.content #map_m.minority svg #Heilongjiang_1_{
	fill: #DBE3E2;
}



.content #map_m.gender svg #key rect{
	fill: url(#SVGID_3_);
}
.content #map_m.minority svg #key rect{
	fill: url(#SVGID_4_);
}






.content #map_m svg g polygon:hover,
.content #map_m svg g path:hover,
.content #map svg g polygon:hover,
.content #map svg g path:hover{
    stroke: #222;
    stroke-width: 3px;
	/* opacity: 0.8; */
}






.content #map_m svg g.selected polygon,
.content #map_m svg g.selected path,
.content #map svg g.selected polygon,
.content #map svg g.selected path{
	stroke: #222 !important;
    stroke-width: 2px !important;
    vector-effect: non-scaling-stroke !important;
}


.content #map_m svg.dim #Layer_2 polygon,
.content #map_m svg.dim #Layer_2 path,
.content #map svg.dim #Layer_2 polygon,
.content #map svg.dim #Layer_2 path{
	fill: #ccc !important;
}



.content #map_m svg.dim #key,
.content #map svg.dim #key,
.content #map_m svg.dim .txt0,
.content #map svg.dim .txt0,
.content #map_m svg.dim .txt1,
.content #map svg.dim .txt1{
	/* display: none; */
	opacity:0;
	transition: opacity 0.2s ease;
}



/* .content #map_m svg.dim #Beijing_1_ polygon, */
/* .content #map_m svg.dim #Beijing_1_ path, */
/* .content #map svg g.dim #Beijing_1_ polygon, */
/* .content #map svg g.dim #Beijing_1_ path{ */
	/* fill: #ccc; */
/* } */


.content svg text{
    fill: #000;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}



.content .boxCount{
	position: relative;
    display: inline-block;
    width: 36%;
    height: 100%;
	overflow: hidden;
    box-sizing: border-box;
}

.content .boxCount .boxContainer{
	position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 42px;
    padding: 0px 60px;
    height: 280px;
    overflow: hidden;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12px, 12px));
    grid-gap: 2px;
    grid-template-rows: repeat(auto-fill, minmax(12px, 12px));
    grid-auto-flow: dense;
    text-align: center;
}

.content .boxCount .boxContainer.big{
	padding: 0px 32px;
}

.content .boxCount .box{
	position: relative;
	width: 10px;
	height: 10px;
	margin: 1px;
	display: inline-block;
	background-color: #aaa;
}


.content .boxCount .box.male,
.content .boxCount .box.male{
	background-color: #aaa;
}

.content .boxCount .box.female{
	background-color: #000;
}






.keys{
	position: relative;
    width: 100%;
    display: block;
}

.keys .chartkey{
	position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: none;
}

.keys .chartkey.active{display: block;}

.keys .chartkey .key{
	position: relative;
    width: 100%;
    display: block;
    max-width: 150px;
	margin: 0 auto;
}

.keys .chartkey .key .keysquare{
	position: relative;
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #aaa;
    top: -1px;
}

.keys .chartkey .key .keytxt{
	position: relative;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.1px;
}

.keys .chartkey .key .keyvalue{
	text-align: right;
    position: absolute;
    right: 0;
}

.keys .chartkey #minoritiesKey .keysquare,
.keys .chartkey #femaleKey .keysquare{
	background-color: #000;
}

.keys .chartkey #totalKey .keysquare{
	background-color: #fff;
	/* border: 1px solid #aaa; */
}

#tooltip{
    position: absolute;
    display: none;
    transition: opacity 0.4s ease, top 0.1s ease, left 0.1s ease;
    background-color: #fff;
    z-index: 5;
    box-shadow: 0 0 7px #ccc;
    padding: 14px;
    border-radius: 6px;
	max-width: 140px;
	pointer-events: none;
}



#tooltip .info{
    position: relative;
    width: 100px;
    text-align: left;
    display: inline-flex;
	font-size: 13px;
}

#tooltip .provinceName{
	font-weight: 500;
    font-size: 14px;
    margin-bottom: 6px;
    text-align: center;
}

#tooltip .value{
	position: relative;
    width: 100%;
    text-align: right;
    display: inline-block;
	color: #800;
}



#tooltip.gender .provinceMinorities{
	display: none;
}

#tooltip.minority .provinceMale,
#tooltip.minority .provinceFemale{
	display: none;
}


.content #map_m, 
.content #map_m svg{ display: none; }




@-webkit-keyframes spin {
  to { border-top-color: #ec407a; -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
  to { border-top-color: #ec407a;-webkit-transform: rotate(360deg); transform: rotate(360deg); }
}


@media screen and (max-width:660px){
	.content .boxCount .boxContainer{
		padding: 0 40px;
	}
	.content .boxCount .boxContainer.big{
		padding: 0 3px;
	}
}


@media screen and (max-width:520px){

	.content{ display: block;}
	.content .boxCount, .content .mapContent{ display: block;width: 100%; }
	.boxControls0{ display: none; }
	
	.boxControls{ position: absolute;display: block;right: 0;margin-top: 12px;    z-index: 10; }
	
	.content .boxCount{ height: 135px; }
	.content .mapContent{ height: 320px;overflow: unset; }
	
	.provinceMenu{ top: -18px;left: 0;text-align: left; }
	.content #map, .content #map svg{ padding-top: 27px; }
	.content .boxCount .boxContainer{ margin: 0 auto;margin-top: 8px;height: 82px; }
	
	.keys{ text-align: center;margin: 0 auto;    top: -14px; }
	
	.keys .chartkey.active{ display: block;width: 204px;text-align: left;margin: 0 auto; }
	
	.content #map_m,  .content #map_m svg{  display: block;margin: 34px auto; }
	.content #map, .content #map svg{ display: none; }
	
	.content .boxCount .box{ width: 8px;height: 8px; }
	.content .boxCount .boxContainer {
		margin: 0 auto;
		margin-top: 8px;
		height: 85px;
		max-width: 290px;
		padding: 0;
		grid-template-columns: repeat(auto-fill, minmax(8px, 8px));
		grid-template-rows: repeat(auto-fill, minmax(8px, 8px));
	}
	
	
	.content .boxCount .boxContainer.big{
		grid-template-columns: repeat(auto-fill, minmax(5px, 5px));
		grid-template-rows: repeat(auto-fill, minmax(5px, 5px));
	}
	
	.content .boxCount .boxContainer.big .box{
		width: 5px;
		height: 5px;
	}
	
}

@media screen and (max-width:435px){
	.desktopSrc{ display: none; }
	.mobileSrc{ display: inline-block; }
	
	.content .mapContent { height: 272px; overflow: unset; }
	.content{ margin-top: 12px; }
	
	.boxControls{
		right: unset;
		margin: 0 auto;
		margin-top: 12px;
		left: 0;
		float: unset;
		position: relative;
	}
	
	.provinceMenu{ top: -15px;text-align: center; }
	.boxControls .choice, .boxControls .choiceLine{ font-size: 14px; }
	
	.keys{ top: -24px; }
	.content .boxCount { height: 120px; }
}