* { 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(58% - 8px);}
.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:32px; 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:332px;margin-left:-166px;}
.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:3px 5px; cursor: pointer;}
.main-title i.on{color:#0ecdae; font-weight: bold; border:1px solid #0ecdae; border-radius:4px;}

.main-acreage-list{width:100%;height:calc(100% - 30px); margin-top:20px;}
.main-acreage-list>div{
    padding-top:34px;
}
.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:24px; 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: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 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:20px; 
        display: block; 
        float: left; 
        text-align: center; 
        line-height: 20px;  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:20px; 
        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:20px; float: left; line-height: 20px; 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% - 34px); margin-top:34px;}
.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:calc(100% - 30px);margin-top:10px;
          box-shadow:inset 0 0 24px #197caf;}


#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: 18%;
}
#benefitEchart{
	width: 100%;
}
/*.hp span{margin-left:-10px;}*/
.proportionBox{
	float: right;
	width: 50%;
	transform: scale(0.88);
	-moz-transform: scale(0.88);
}

.main-h{
    font-size:20px;
    font-weight:800;
    line-height:20px;
    color:#fff;
    padding-left:10px;
    border-left:5px solid #36d2e3;
    text-shadow:0 0 12px #24cfee;
}
.main-area-ratio>.main-area-ratio-con{
    display:none;
}
.main-area-ratio .active{
    display:block;
}
.construction-box{
    height:calc(100% - 80px);
    padding:30px;
}
.construction-top{
    overflow:hidden;
}
.construction-area-left,.construction-area-right{
    float:left;
    width:calc(50% - 0px);
    line-height:22px;
    color:#fff;
}
.construction-area-left span,.construction-area-right span{
    font-size:24px;
}
.construction-area-left div{
    color:#28ff3c;
}
.construction-area-right div{
    color:#7efffd;
}
.construction-center{
    overflow:hidden;
    margin:20px 0;
}
.construction-center>div{
    float:left;
    line-height:35px;
    font-size:22px;
    color:#fff;
}
.progress-box{
    width:calc(100% - 60px);
    margin-right:5px;
    border:1px solid #69d3e7;
    height:31px;
    padding:2px;
    background:rgba(105,211,231,0.3);
    border-radius:20px;
}
.progress-bar{
    height:31px;
    width:80%;
    border-radius:20px;
    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%);
}
.construction-bottom{
    overflow:hidden;
    height:calc(100% - 124px);
}
.construction-all,.construction-state,.construction-province{
    width:33.33%;
    float:left;
    text-align:center;
    color:#fff;
    height:calc(100% - 20px);
}
.construction-num{
    position:relative;
    height:calc(100% - 20px);
    width:80px;
    margin:10px auto;
    text-align:center;
    font-size:34px;
}
.construction-num span{
    display:block;
    position:absolute;
    top:50%;
    margin-top:-17px;
    width:100%;
    text-align:center;
}
.construction-all div:nth-of-type(1){
    background:url(../images/c-1.png) center no-repeat;
    background-size:cover;
}
.construction-state div:nth-of-type(1){
    background:url(../images/c-2.png) center no-repeat;
    background-size:cover;
}
.construction-province div:nth-of-type(1){
    background:url(../images/c-3.png) center no-repeat;
    background-size:cover;
}
.monitor-box{
    padding:20px 30px;
    height:calc(100% - 60px);
}
.monitor-box{
    line-height:26px;
    color:#6cf6ff;
    overflow:hidden;
}
.monitor-site{
    /*overflow:hidden;*/
}
.clearfix{
    clear:both;
}
.monitor-site .layui-input{
    height:26px;
    border:none;
    background:rgba(255,255,255,0.3);
    width:120px;
    color:#fff;
}
.monitor-site .layui-anim{
    background:#0c57a4;
}

.monitor-site span{
    display:block;
    float:left;
}
.monitor-more{
    width:0;
    height:0;
    margin-top:9px;
    margin-left:10px;
    border-top: 6px transparent dashed;
    border-bottom: 6px transparent dashed;
    border-right: 8px transparent dashed;
    border-left: 8px #6cf6ff solid;
}
.monitor-cut span{
    padding:0px 15px;
    margin-right:1px;
    background:#0975b2;
    color:#6cf6ff;
}
.monitor-cut .active{
    background:#68d2e7;
    color:#0b418d;
}
.monitor-maxBox,.monitor-minBox,.monitor-floraBox{
    padding:5px 10px;
    border:1px dashed #6ad3e7;
    color:#fff;
    overflow:hidden;
    margin-top:10px;
}
.monitor-max,.monitor-maxBox .monitor-time{
    font-size:22px;
    color:#fed201;
}

.monitor-min,.monitor-minBox .monitor-time{
    font-size:22px;
    color:#28ff3c;
}
.monitor-timeBox .monitor-time,.monitor-site .monitor-name,.monitor-site .monitor-name2{
    border:none;
    outline:none;
    background:transparent;
    width:100px;
    float:left;
    line-height:20px;
    margin-top:3px;
    color:#6cf6ff;
    background:rgba(255,255,255,0.3);
    text-indent:10px;
    margin-right:10px;
}
.monitor-site .monitor-name{
    width:140px;
}
,.monitor-site .monitor-name2{
    width:80px;
}
.monitor-site .monitor-name option{
    background:transparent;
}
.monitor-floraBox{
    height:calc(100% - 236px);
}
.monitor-ratio{
    height:calc(100% - 52px);
}
.monitor-ratio ul,.monitor-ratio ul li{
    overflow:hidden;
    margin:0;
    padding:0;
    height:100%;
}
.monitor-ratio ul li{
    float:left;
    width:33.33%;
    text-align:center;
    line-height:24px;
    color:#fff;
    list-style:none;
}
.mammal,.birds,.reptile{
    height:calc(100% - 24px);
}
@font-face {
  font-family: 'yjzt';
  src: url('../font/yjzt.eot');
  src:
    url('../font/yjzt.eot?#iefix') format('embedded-opentype'),
    url('../font/yjzt.woff') format('woff'),
    url('../font/yjzt.ttf') format('truetype'),
    url('../font/yjzt.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
.yjzt{
    font-family:"yjzt";
}
@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;
}