.provCircleBox {
	width: 750px;
	transform-origin: left top;
	padding: 50px;
	position: relative;
	color: #000;
	/*font-family: 'PF DinText Universal';*/
}
.provCircleBox.pc {
	width: 1280px;
	padding: 50px 100px;
}
.provCircleBox .t1 {
	font-weight: bold;
	font-size: 40px;
	width: 100%;
	height: 40px;
	background: url('image/provCircleTitleMobile.png') no-repeat left center/contain;
	margin-bottom: 36px;
}
.provCircleBox.pc .t1 {
	background: url('image/provCircleTitle.svg') no-repeat left center/contain;
	background-position: center;
  height: 70px;
  margin-bottom: 30px;
}
.provCircleBox .chart {
	margin-top: 10px;
	position: relative;
	width: 600px;
	height: 950px;
}
.provCircleBox.pc .chart {
	margin-top: -10px;
	position: relative;
	width: 1080px;
	height: 720px;
	margin-bottom: -50px;

}
.provCircleBox.pc .chart {
/*	position: relative;
	width: 600px;
	height: 950px;*/
}
.provCircleBox .map {
	position: absolute;
	right: -40px;
	bottom: 150px;
  width: 367px;
  height: 427px;
	background: url('image/chinamap.svg') no-repeat center/contain;
}
.provCircleBox.pc .map {
  position: absolute;
  right: 410px;
  bottom: 30px;
  width: 367px;
  height: 427px;
  transform-origin: top center;
  transform: scale(.92);
}
.provCircleBox .map .circleBg {
	position: absolute;
  left: 135px;
  top: 105px;
  width: 160px;
  height: 160px;
  background: #76D5DE;
  border-radius: 50%;
}
.provCircleBox.mobile .map .circleBg {
    position: absolute;
    left: 120px;
    top: 90px;
    width: 190px;
    height: 190px;
}

.provCircleBox .map .mapWord{
    position: absolute;
    /* background: red; */
    width: 128px;
    height: 120px;
    left: 152px;
    top: 124px;
    font-size: 16px;
    text-align: center;
}
.provCircleBox.mobile .map .mapWord{
    font-size: 20px;
    width: 148px;
    height: 120px;
    left: 144px;
    top: 124px;
}
.provCircleBox .map .mapWord .wordCenter{
    height: 120px;
    display: table-cell;
    vertical-align: middle;
}

.provCircleBox .legend {
	position: absolute;
	left: 0;
	top: 0;
  width: 84px;
  height: 149px;
	background: url('image/legend.svg') no-repeat center/contain;
}
.provCircleBox .legend .legendWord {
    position: absolute;
    left: 0;
    top: 150px;
    width: 84px;
    height: 29px;
    text-align: center;
    line-height: 32px;
}
.provCircleBox .chart #bg {
	position: absolute;
	left: 0;
	top: 0;
  height: 100%;
  display: none;
	/*background: url('./image/legend.svg') no-repeat center/contain;*/
}
.provCircleBox .chart .canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 580px;
  height: 947px;
	/*background: url('./image/legend.svg') no-repeat center/contain;*/
}
.provCircleBox.pc .chart .canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 1080px;
  height: 580px;
	/*background: url('./image/legend.svg') no-repeat center/contain;*/
}
.provCircleBox .chart .canvas .areaName {
	fill: #666;

}
.provCircleBox .chart .canvas .areaBar {
	fill: #d1d1d1;

}
.provCircleBox .chart .canvas .circle {
	fill: #d1d1d1;
	opacity: 0.8;

}
.provCircleBox .chart .canvas .prov {
	fill: #666;
}

.provCircleBox .chart .canvas .areaName.active {
	fill: #2A272B;

}
.provCircleBox .chart .canvas .areaBar.active {
	fill: #4ABED1;

}
.provCircleBox .chart .canvas .circle.active {
	fill: #4ABED1;
	opacity: 0.8;

}
.provCircleBox .chart .canvas .prov.active {
	fill: #2A272B;
}