* { padding: 0; margin: 0}
html, body { height: 100%; width: 100%;}
body { overflow: hidden; font-family: "微软雅黑";  font-size: 12px;}
@font-face {
    font-family: pictos;
    src: url('digifacewide.ttf');
}

.mCSB_scrollTools {
    opacity: 0;
    filter: "alpha(opacity=0)";
    -ms-filter: "alpha(opacity=0)"
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #22891e;
    background-color: rgba(92, 182, 108, 0);
    filter: "alpha(opacity=0)";
    -ms-filter: "alpha(opacity=0)"
}
.tes {width: 100%; height: 100%; background-color: rgba(242, 242, 242, 0.5); position: fixed; left: 0; top: 0; text-align: center; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; display: none; z-index: 100000;}
.tes div img {margin-right: 5px;}
.tes div {font-size: 12px; color: #494A5F; word-wrap: break-word; position: absolute; top: 48%; left: 48%;}

.main-left{width:400px;height:calc(100% - 40px); position: absolute; top:16px; left:20px;}
.main-cen{width:calc(100% - 880px);height:calc(100% - 40px); position: absolute; top:16px; left:440px;}
.main-right{width:400px;height:calc(100% - 40px); position: absolute; top:16px;right:20px;}

@media (max-width: 1610px){
.main-left{width:390px;}
.main-cen{width:calc(100% - 860px); left:430px;}
.main-right{width:390px;}
}

@media (max-width: 1510px){
.main-left{width:380px;}
.main-cen{width:calc(100% - 840px); left:420px;}
.main-right{width:380px;}
}
@media (max-width: 1410px){
.main-left{width:370px;}
.main-cen{width:calc(100% - 820px); left:410px;}
.main-right{width:370px;}
}
@media (max-width: 1310px){
.main-left{width:360px;}
.main-cen{width:calc(100% - 800px); left:400px;}
.main-right{width:360px;}
}

.main-sketch-map{width:100%; border:1px solid #188488; position:relative; background:rgba(28, 47, 91, .1);}
.main-sketch-map:before, .main-sketch-map:after{content: ""; width:20px; height:20px; position: absolute; border-color:#1ad0ad; border-style: solid; border-width: 0px; border-top-width: 2px; top:-1px;}
.main-sketch-map:before{border-left-width:2px; left:-1px;}
.main-sketch-map:after{border-right-width:2px; right:-1px;}

.main-box{width:100%; border:1px solid #188488; position:relative; background:rgba(28, 47, 91, .1);}
.main-box:before, .main-box:after{content: ""; width:20px; height:20px; position: absolute; border-color:#1ad0ad; border-style: solid; border-width: 0px; border-top-width: 2px; top:-1px;}
.main-box:before{border-left-width:2px; left:-1px;}
.main-box:after{border-right-width:2px; right:-1px;}

/*.main-acreage{height:350px;}*/
.main-acreage{height:450px;}
/*.main-area-ratio{height:calc(100% - 378px);margin-top:26px;}*/
.main-area-ratio{height:calc(100% - 478px);margin-top:26px;}
.main-sketch-map{height:100%;}
.main-survey{height:calc(42% - 18px);}
.main-number{height:calc(25% - 18px);}
.main-proportion{height:calc(33% - 18px);}
.main-number, .main-proportion{margin-top:25px;}

@media (max-width: 1400px){
	.main-acreage{height:calc(60% - 9px);}
	.main-area-ratio{height:calc(40% - 18px);margin-top:25px;}
}


.main-title{ height: 29px; width: 130px; position: absolute; background-color: #065b86; border-top:1px solid #1ad0ad; border-bottom:1px solid #1ad0ad; top:-16px; left:50%; margin-left:-65px;}
.main-title span{width:100%; line-height:29px; color:#fff; text-align:center; display:block; position: absolute; z-index: 10;font-size: 14px;}
.main-title:after{ content: ''; position: absolute; background-color: #065b86; top: 4px; right: -11px; width: 20px;
 height: 20px; transform: rotate(45deg); -ms-transform: rotate(45eg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); border-top: 1px solid #1ad0ad; border-right: 1px solid #1ad0ad;}
.main-title:before{content: ''; position: absolute; background-color: #065b86; top: 4px;left: -11px;width: 20px; height: 20px;
 transform: rotate(45deg); -ms-transform: rotate(45eg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg);-o-transform: rotate(45deg); border-bottom: 1px solid #1ad0ad;border-left: 1px solid #1ad0ad;}
.main-acreage .main-title{width:220px;margin-left:-110px;}  
.main-area-ratio .main-title{width:200px;margin-left:-100px;}
.main-survey .main-title{width:80px;margin-left:-40px;}
.main-number .main-title{width:100px;margin-left:-50px;}
.main-proportion .main-title{width:120px;margin-left:-60px;}
.main-title i{ font-style: normal; padding:0 5px; cursor: pointer;}
.main-title i.on{color:#0ecdae; font-weight: bold;}

.main-acreage-list{width:100%;height:calc(100% - 40px); margin-top:30px;}
.main-acreage-list ul{width:100%; height:100%;}
/*.main-acreage-list ul li{list-style: none;height:20px; width:100%;margin-bottom:9px;}*/
.main-acreage-list ul li{list-style: none;height:28px; width:100%;margin-bottom:9px;}
.main-acreage-list ul li:last-child{margin-bottom:0px;}
/*.main-acreage-list ul li b{width:26px; height:20px; display: block; float: left; text-align: center; line-height: 20px; background:rgba(40, 86, 116, .5); color:#fff; margin-left:10px; border-radius:4px;}*/
.main-acreage-list ul li b{width:26px; height:26px; display: block; float: left; text-align: center; line-height: 26px; background:rgba(40, 86, 116, .5); color:#fff; margin-left:10px; border-radius:4px;}
/*.main-acreage-list ul li label{width:60px; height:18px; display: block; float: left; text-align: center; line-height: 18px;  color:#1ad0ad;}*/
.main-acreage-list ul li label{width:60px; height:25px; display: block; float: left; text-align: center; line-height: 25px;  color:#1ad0ad; font-size: 14px;}
/*.main-acreage-list ul li .acreage-sdiler{width:170px;height:14px; margin-top:2px; display: block; float: left;}*/
.main-acreage-list ul li .acreage-sdiler{width:170px;height:24px; margin-top:2px; display: block; float: left;}
.main-acreage-list ul li span{width:100%; display:block; height:100%;}
.main-acreage-list ul li:nth-child(2) .acreage-sdiler{width:calc(72 * 1.7px);}
.main-acreage-list ul li:nth-child(3) .acreage-sdiler{width:calc(57 * 1.7px);}
.main-acreage-list ul li:nth-child(4) .acreage-sdiler{width:calc(27 * 1.7px);}
.main-acreage-list ul li:nth-child(5) .acreage-sdiler{width:calc(25 * 1.7px);}
.main-acreage-list ul li:nth-child(6) .acreage-sdiler{width:calc(24 * 1.7px);}
.main-acreage-list ul li:nth-child(7) .acreage-sdiler{width:calc(19 * 1.7px);}
.main-acreage-list ul li:nth-child(8) .acreage-sdiler{width:calc(6 * 1.7px);}
.main-acreage-list ul li:nth-child(9) .acreage-sdiler{width:calc(5 * 1.7px);}
.main-acreage-list ul li:nth-child(10) .acreage-sdiler{width:calc(4 * 1.7px);}
.main-acreage-list ul li:nth-child(11) .acreage-sdiler{width:calc(2 * 1.7px);}
/*.main-acreage-list ul li i{height:18px; float: left; line-height: 18px; color:#1f9292; margin-left:3px;font-style: normal;}*/
.main-acreage-list ul li i{height:25px; float: left; line-height: 25px; color:#1f9292; margin-left:3px;font-style: normal;font-size: 16px;}
@media only screen and (max-width: 1900px) {	
	.main-acreage-list ul li{height:25px;}
	.main-acreage-list ul li b{height:25px; line-height: 25px;}
	.main-acreage-list ul li label{height:22px;line-height: 22px;font-size: 12px;}
	.main-acreage-list ul li .acreage-sdiler{height:18px;}
	.main-acreage-list ul li i{height:22px;line-height: 22px;font-size: 12px;}
}
.main-acreage-list ul li .gradient{
    background: -moz-linear-gradient(left, #0787de 0%, #62dce3 100%);
    background: -webkit-gradient(linear, left, right, color-stop(0%,#0787de), color-stop(100%,#62dce3));
    background: -webkit-linear-gradient(left, #0787de 0%,#62dce3 100%);
    background: -o-linear-gradient(left, #0787de 0%,#62dce3 100%);
    background: -ms-linear-gradient(left, #0787de 0%,#62dce3 100%);
    background: linear-gradient(to right, #0787de 0%,#62dce3 100%);
}
.main-acreage-list ul li .gradient-all{
    background: -moz-linear-gradient(left, #c31323 0%, #e4ab33 100%);
    background: -webkit-gradient(linear, left, right, color-stop(0%,#c31323), color-stop(100%,#e4ab33));
    background: -webkit-linear-gradient(left, #c31323 0%,#e4ab33 100%);
    background: -o-linear-gradient(left, #c31323 0%,#e4ab33 100%);
    background: -ms-linear-gradient(left, #c31323 0%,#e4ab33 100%);
    background: linear-gradient(to right, #c31323 0%,#e4ab33 100%);
}

.main-area-ratio-con{width:100%; height:calc(100% - 12px); margin-top:12px;}
.main-survey-menu{width:98%; height:40px;float:left; padding-left:10px; position:absolute; top:10px; z-index: 100;}
.main-survey-echart{width:calc(100% - 0px); height:calc(100% - 20px); float:right; margin-top:20px;}
.main-survey-menu-spot{width:125px; height:20px; color:#fff; display:block;font-size: 12px;}
/*.main-survey-menu .main-survey-menu-spot:nth-child(1){float:left}
.main-survey-menu .main-survey-menu-spot:nth-child(2){float:right;}*/
.main-survey-menu-spot span{line-height: 34px; font-size: 12px;}
.main-survey-menu-spot span i{font-size: 12px;font-family: pictos; font-weight: bold; font-style: normal;}
.main-com{width:100%; height:100%;}


#areaRatio{display:none;}
/*#areaProportion{max-height:350px;}*/
 
.main-area-legend, .main-xy-legend{ margin-left:2%;margin-top:3%; color:#fff; overflow:hidden}
/*.main-area-legend{width:18%;}*/
/*.main-area-table{position:relative; width:100%; position: relative; top:50%; transform:translateY(-50%);margin-bottom:1px;}*/
.main-area-legend table{border:1px solid #89adb9; width:calc(100% - 2px); height:calc(100% - 2px); border-left:0px; border-bottom:0px; margin-left:2px; margin-top:2px;}
.main-area-legend table tr td{text-align: center; border-left:1px solid #89adb9; border-bottom:1px solid #89adb9; padding:2px 0px;}
.main-area-legend table span{width:8px; height:10px; display:inline-block;background:transparent; margin-right:2px;}
/*.main-xy-table{position:relative; width:100%;position: relative; top:50%; transform:translateY(-50%);margin-bottom:1px;}*/
.main-xy-legend table{border-top:1px solid #89adb9; border-right:1px solid #89adb9; width:100%;}
.main-xy-legend table tr td{text-align: center; border-left:1px solid #89adb9; border-bottom:1px solid #89adb9; padding:2px 0px;}
.main-xy-legend table span{width:8px; height:8px; display:inline-block;background:transparent; margin-right:2px;}
.areaProportion{
	height:96%;
	width:50%; 
	float:left; 
	margin-top:3%;
}
.main-area-legend{
	margin-top: 6%;
}
#benefitEchart{
	width: 100%;
}
/*.hp span{margin-left:-10px;}*/
.proportionBox{
	float: right;
	width: 50%;
	transform: scale(0.88);
	-moz-transform: scale(0.88);
}
@media only screen and (max-width: 1900px) {
	.proportionBox{
		transform: scale(0.88);
		-moz-transform: scale(0.88);
	}
	.areaProportion{margin-top:4%;}
	.main-area-legend{
		margin-top: 5%;
	}
}
@media only screen and (max-width: 1601px) {
	.proportionBox{
		transform: scale(0.68);
		-moz-transform: scale(0.68);
	}
	.areaProportion{margin-top:1%;}
	.main-area-legend{
		margin-top: -6%;
	}
}
@media only screen and (max-width: 1280px) {
	.proportionBox{
		transform: scale(0.84);
		-moz-transform: scale(0.84);
	}
	.areaProportion{margin-top:3%;}
	.main-area-legend{
		margin-top: 3%;
	}
}
.benefitBox{
	position: absolute;
	bottom: 205px;
	transition: .2s linear;
	display: none;
	width: 250px;
	background-color: #163f6c;
}
.benefitBox{
	bottom: 22px;
	background-color: #105671;
}
.benefitBox p{
	text-align: right;
}
.benefitBox p img{
	width: 30px;
	cursor: pointer;
}
.benefitBox>div{
	padding: 0 20px 20px 20px;
}