#vPanel.vBoard{ display: block; background: url('../img/board_bg.jpg') repeat center top; color: #fff; overflow: hidden;}
.vBoard_head{ display: flex; height: 81px; position: relative; z-index: 3;}
.vBoard_head_title{ font-size: 34px; line-height: 80px; color: #36C3FB; padding-left:31px; width: 502px; background-image: linear-gradient(-90deg, rgba(2, 92, 146, 1), rgba(2, 92, 146, 0)); border-bottom: 1px solid #0a80b7;}
.vBoard_head .nav{ min-width: 490px; overflow: hidden;}
.vBoard_head .nav_item{ float: left; width: 245px; height: 81px; line-height: 80px; cursor: pointer; background:rgba(2, 92, 146, 1); border-bottom: 1px solid #0a80b7; font-size: 20px; text-align: center; color: #7aa3c0;}
.vBoard_head .nav_item.active{ width: 322px; background: url('../img/board_nav_active.png') no-repeat left bottom; border-bottom: 0; font-size: 24px; font-weight: bold; color: #36C3FB;}
.vBoard_head .nav_item:before{ display: inline-block; content: ''; width: 29px; height: 29px; overflow: hidden; margin-right: 7px; position: relative; top: 2px;}
.vBoard_head .nav_item:first-child:before{ background: url('../img/icon_earth.png') no-repeat left bottom; top: 7px;}
.vBoard_head .nav_item:first-child.active:before{ background-position: left top;}
.vBoard_head .nav_item:nth-child(2):before{ background: url('../img/icon_qiye.png') no-repeat left bottom;}
.vBoard_head .nav_item:nth-child(2).active:before{ background-position: left 8px;}
.vBoard_head .date{ flex: 1; background-image: linear-gradient(90deg, rgba(2, 92, 146, 1), rgba(2, 92, 146, 0)); border-bottom: 1px solid #0a80b7; line-height: 80px; font-size: 26px; text-align: right; color: #09BCFE; padding-right: 36px;}
.vBoard_head .date #Date,.vBoard_head .date ul,.vBoard_head .date ul li{display: inline-block;}
.vBoard_head .date ul{margin-left: 30px;}
.vBoard_bd_left, .vBoard_bd_main, .vBoard_bd_right{ position: absolute; top: 121px; z-index: 2;}
.vBoard_bd_left{ left: 30px; width: 524px;}
.vBoard_bd_right{ right: 34px; width: 528px;}
.vBoard_bd_main{ left: 50%; margin-left: -465px; width: 930px; z-index: 1;}
.vBoard_bd_main .vBoard_column{ width: 712px; margin: 0 auto;}
.vBoard_column_caption{ font-size: 20px; color: #fff; opacity: .6; line-height: 100%; margin-bottom: 20px;}
.vBoard_column_caption small{ font-size: 14px; opacity: .4; margin-left: 17px;}
.vBoard_column_body{ height: 150px; border: 1px solid #0a80b7; background:rgba(0,27,71, .5); border-radius: 10px; position: relative;}
.vBoard_column_body:before, .vBoard_column_body:after{ position: absolute; z-index: -1; display: block; content: ''; width: 100%; height: 100%; left: 0; top: 0;}
.vBoard_column_body:before{ background-image: radial-gradient(farthest-side at 0 0, rgba(2, 92, 146, .8), rgba(2, 92, 146, 0)); z-index: -1;}
.vBoard_column_body:after{ background-image: radial-gradient(farthest-side at 100% 100%, rgba(2, 92, 146, .4), rgba(2, 92, 146, 0)); right: 0; bottom: 0;}

#vb_main{ position: relative; z-index: 2;}
#vb_main .vBoard_column_body{ height: 286px; margin-top: 607px;}
#vb01{}
#vb01 .vBoard_column_body{ height: 156px;}
#vb02{ margin-top: 38px;}
#vb02 .vBoard_column_body{ height: 236px;}
#vb03{ margin-top: 45px;}
#vb03 .vBoard_column_body{ height: 354px;}
#vb04{ }
#vb04 .vBoard_column_body{ height: 406px;}
#vb05{ margin-top: 38px;}
#vb05 .vBoard_column_body{ height: 386px;}


/*  */
.countBox{ display: flex; width: 100%; height: 100%;}
.countBox_name{ width: 158px; font-size: 20px; line-height: 24px; color: #51FCC8; padding: 56px 0 0 42px;}
.countBox_view{ flex: 1; padding-top: 37px; position: relative;}
.countBox_grids span{ float: left; margin-right: 7px; width:45px; height:84px; background:rgba(8,59,175,0.3); border:1px solid; border-image:linear-gradient(0deg, rgba(51,197,252,1), rgba(13,90,191,1)) 10 10; box-shadow: 0 0px 10px rgba(51,197,252,.5);}
.countBox_grids span:nth-child(3){ margin-right: 33px;}
.countBox_grids span:last-child{ margin-right: 0;}
.countBox_number{ position: absolute; left: 2px; top: 37px; font-size:65px; letter-spacing: 11px; font-family:DIN Alternate; font-weight:bold; color:rgba(81,252,200,1); line-height:81px; width: 335px; text-align: right;}

#arealPies{ width: 100%; height: 100%; display: flex;}
#arealPies .item{ flex: 1; text-align: center; line-height: 100%;}
#arealPies .view{ width: 130px; height: 130px; background: rgba(255,255,255,.2); margin: 31px auto 0;}
#arealPies .city{ font-size: 20px; color: #51FCC8; margin-top: 4px;}
#arealPies .count{ font-size: 14px; margin-top: 10px;}
#proDist{ width: 100%; height: 100%; padding: 8px 39px 0; line-height: 100%;}
.proDistItem{ margin: 44px 0; font-size: 18px;}
.proDistItem .name, .proDistItem .count, .proDistItem .bar{ float: left;}
.proDistItem .name{ width: 105px;}
.proDistItem .count{ width: 70px; text-align: right; margin-right: 20px;}
.proDistItem .bar{ width: 246px; padding: 1px; border: 1px solid #099ED9; border-radius: 7px; position: relative;}
.proDistItem .bar_core{ width: 0%; height:8px; background:linear-gradient(90deg,rgba(12,239,178,1),rgba(1,86,191,1)); border-radius:4px; transition: all 2s linear;}
.proDistItem .bar_percent{ position: absolute; top: -25px; left: 0; margin-left: -20px; width: 40px; text-align: center; font-size: 12px; color: #099ED9; transition: left 2s linear;}
.proDistItem .bar_percent:before{ display: block; content: ''; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid #099ED9; position: absolute; left: 18px; top: 15px; transform: rotate(135deg);}
.proDistItem .bar_percent:after{ display: inline; content: '%'; }

#vBoard_china{ width: 930px; height: 930px; position: absolute; top: -121px; z-index: 1; background: url('../img/border_main_bg.png') no-repeat center center; animation: aniRotate 72s linear infinite;}
#vBoard_china_draw, #vBoard_china_draw_marks{ position: absolute; top: 25px; left: 93px; z-index: 3; width: 740px; height: 600px;}
#vBoard_china_draw_marks{ height: 1px; z-index: 4;}
#vBoard_china_draw_marks .mark{ position: absolute; display: block; width: 11px; height: 11px; border-radius: 50%; overflow: hidden; }
#vBoard_china_draw_marks .mark.v1{ background: rgb(255, 234, 73); box-shadow: 0px 0px 0px 5px rgba(255, 234, 73, 0.38);}
#vBoard_china_draw_marks .mark.v2{ background: rgb(252, 149, 29); box-shadow: 0px 0px 0px 5px rgba(252, 149, 29, 0.38);}
#vBoard_china_draw_marks .mark.v3{ background: rgb(250, 100, 3); box-shadow: 0px 0px 0px 5px rgba(250, 100, 3,0.38);}
#vBoard_china_draw_marksMeter{ position: absolute; top: 455px;}
#vBoard_china_draw_marksMeter .num{ font-size: 18px; line-height: 100%; color: #fff; width: 210px; overflow: hidden;}
#vBoard_china_draw_marksMeter .num span{ float: left; width: 50px; text-align: center;}
#vBoard_china_draw_marksMeter .num span:last-child{ float: right;}
#vBoard_china_draw_marksMeter .bar{ position: relative;}
#vBoard_china_draw_marksMeter .bar:before, #vBoard_china_draw_marksMeter .bar:after{ position: absolute; top: -15px; display: block; content: ''; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #ffec4a;}
#vBoard_china_draw_marksMeter .bar:before{ left: 20px; border-top: 8px solid #fa6503; transform: rotate(-135deg)}
#vBoard_china_draw_marksMeter .bar:after{ right: 20px; transform: rotate(135deg);}
#vBoard_china_draw_marksMeter .bar span{ display: block; margin: 20px auto 0; width:148px; height:8px; background:linear-gradient(-90deg,rgba(255,241,77,1),rgba(250,94,0,1)); border-radius:4px;}
#vBoard_china_draw_tooltip{ display: none; position: absolute; z-index: 3; width: 204px; height: 80px; background:rgba(11,74,169,.8); border-radius: 10px; transition: all .2s ease;}
#vBoard_china_draw_tooltip .caption{ width: 122px; height: 30px; text-align: center; line-height: 30px; font-size: 18px; position: absolute; left: 50%; top: -8px; margin-left: -61px; background: #DC7318;}
#vBoard_china_draw_tooltip .caption:before, #vBoard_china_draw_tooltip .caption:after{
    display: block; content: ''; width: 0; height: 0; border-left:6px solid transparent; border-right:0px solid transparent; border-bottom:9px solid #984700; position: absolute; top: 0; left: -6px;}
    #vBoard_china_draw_tooltip .caption:after{ right: -6px; border-left: 0px solid transparent; border-right: 6px solid transparent; left: auto;}
#vBoard_china_draw_tooltip .con{ text-align: center; font-size: 14px; margin-top: 37px; line-height: 100%;}
#vBoard_china_draw_tooltip .con span{ font-size: 24px; margin: 0 5px; color: #F1E61A; }
#pickInforBox{ width: 100%; height: 100%; padding: 20px; position: relative; overflow: hidden;}
#pickInforBox .name{ position: absolute; width: 210px; text-align: center; font-size: 30px; line-height: 100%; top: 37px; left: 20px;}
#pickInforBox .pie{ width: 210px; height: 210px; float: left; margin-top: 30px; position: relative;}
#pickInforBox .pie_view{ width: 100%; height: 100%; }
#pickInforBox .pie:after{ display: block; content: ''; width: 209px; height: 209px; background: url('../img/board_pitch_pie.png') no-repeat center center;  position: absolute; z-index: -1; left: 50%; top: 50%; margin: -105px 0 0 -105px; animation: aniRotate 72s linear infinite;}
#pickInforBox .bar{ width: 440px; height: 240px; float: right; }
#pickInforBox .pie_legend{ position: absolute; z-index: 2; left: 0; top: 70px; width: 210px; font-size: 14px; color: #099ED9; text-align: center; line-height: 100%;}
#pickInforBox .pie_legend .count{ color: #51FCC8; font-size: 50px; line-height: 100%; margin-bottom: 5px; font-family: 'DINAlternate-Bold';}
.vbMutilRowSlide{ width: 100%; height: 100%;}
.vbMutilRowSlide_item{ width: 240px; height: 173px; background:rgba(22,104,191,0.2);}
.vbMutilRowSlide .swiper-pagination{ bottom: 3px;}
.vbMutilRowSlide .swiper-pagination-bullet{ width: 14px; height: 4px; border-radius: 2px; background: #2DA5DC;}
.vbMutilRowSlide .swiper-pagination-bullet-active{ background: #64FFF2;}
#vb04 .vBoard_column_body, #vb05 .vBoard_column_body{ padding: 13px 19px;}
#vb05 .vbMutilRowSlide_item{ height: 163px;}
.vbMutilRowSlide_item_chart{ width: 100%; height: 100%;}