.title-bar{width:100%;font-family:YouSheBiaoTiHei;font-size:28rem;color:#FFFFFF;text-shadow:3rem 0rem 0rem #000911;text-indent:60rem;padding-top:6rem}
.left{flex:1;width:1rem}
.left .card-zscq{background:url('../images/bg-title-bar-1.png') center top / 100% 32rem no-repeat;width:100%}
.left .card-zscq .title-bar{text-align:center;position:relative;top:-14rem;background:none}
.left .card-zscq__item{width:30%;margin-right:.11%;margin-bottom:20rem;height:81rem;display:flex}
.left .card-zscq__item:nth-child(3n+1){width:38%;margin-right:.11%}
.left .card-zscq__item:nth-child(1) .card-zscq__wrap{border-style:none}
.left .card-zscq__btn{background:url('../images/qu-yu-kan-ban/bg-btn.png') no-repeat;width:146rem;height:80rem;flex-shrink:0}
.left .card-zscq__btn.active{background:url('../images/qu-yu-kan-ban/bg-btn-sel.png') no-repeat}
.left .card-zscq__btn .linear-gradient-text{background-image:linear-gradient(to bottom,#fff,#00EFFF)}
.left .card-zscq__btn.active .linear-gradient-text{background-image:linear-gradient(to bottom,#fff,#FFC241)}
.left .card-zscq__btn .card-zscq__title,.left .card-zscq__btn .card-zscq__value{text-align:center}
.left .card-zscq__item img{z-index:1}
.left .card-zscq__wrap{border:1px solid;border-image:linear-gradient(to right,#002134,#1fa1f3,#002134) 1;background:linear-gradient( to right,#001B2F 0%,rgba(17,95,150,0) 100%);height:100%;width:calc(100% - 36rem);position:relative;left:-36rem;flex-shrink:0;padding:0 0 0 60rem}
.left .card-zscq__text + .card-zscq__text{margin-left:40rem}
.left .card-zscq__title{font-weight:400;font-size:18rem;color:#DFF2FF;line-height:2.3}
.left .card-zscq__value{font-weight:bold;font-size:18rem;color:#00F0FF}
.left .card-zscq__unit{font-size:14rem;color:#fff;font-weight:normal;margin-left:4rem}
.left .card{width:490rem}
.left .card + .card{margin-top:12rem}
.left .title-bar{background:url('../images/bg-title-bar-2.png') no-repeat;height:52rem;z-index:1;position:relative}
.left .chart{background:linear-gradient(to top,rgba(0,28,52,.7),rgba(1,6,11,.5)),url(../images/qu-yu-kan-ban/bg-chart.png) left bottom -5rem no-repeat;position:relative;margin-top:-27rem}
.left .card:nth-child(1) .chart{padding-bottom:12rem}
.left .chart-zlyy .balls{display:flex;align-items:center;justify-content:center;position:relative;margin-top:40rem}
.left .ball-wrapper .title{font-family:SourceHanSansCN;font-weight:400;font-size:18rem;color:#FFFFFF;text-align:center;margin:0rem auto}
.left .ball-wrapper .ball{position:relative;width:136rem;height:136rem;border-radius:50%;background:url(../images/qu-yu-kan-ban/bg-xk.png) center center / 135rem 135rem no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center}
.left .ball-wrapper .ball .text{position:relative;font-family:DIN;font-weight:bold;font-size:30rem;text-shadow:4px 0px 1px #7D4B06;color:#FFFFFF;z-index:2;letter-spacing:1rem;top:-8rem}
.left .ball-wrapper:nth-child(2) .ball .text{text-shadow:4px 0px 1px #173F79}
.left .ball-wrapper:nth-child(3) .ball .text{text-shadow:4px 0px 1px #067C5C}
.left .ball-wrapper .ball .bottom{position:absolute;width:100rem;height:100rem;background:linear-gradient( transparent 60%,#B66A00 0%,#FFA82E 100%);bottom:16rem;left:18rem;border-radius:50%;border:none;opacity:1.5}
.left .ball-wrapper .ball .top{position:absolute;width:101rem;top:57rem;z-index:1}
.left .total{width:427rem;height:32rem;margin:auto;background:linear-gradient(to left,rgba(15,46,78,0) 0%,rgba(9,46,75,1) 52%,rgba(15,46,78,0) 100%);position:relative;margin-top:22rem;margin-bottom:17rem;font-family:SourceHanSansCN;font-weight:400;font-size:18rem;color:#FFFFFF;line-height:32rem}
.left .total span{display:inline-block;width:50%;text-align:center}
.left .total span + span{border-left:1px solid;border-image:linear-gradient(rgba(255,255,255,0) 15%,rgb(255,255,255,1) 52%,rgba(255,255,255,0) 85%) 1}
.left .total::before{content:'';position:absolute;width:100%;height:2rem;left:0;top:-4rem;background:linear-gradient(to left,rgba(5,30,58,0) 15%,rgb(0,197,255,1) 52%,rgba(5,30,58,0) 85%)}
.left .total::after{content:'';position:absolute;width:100%;height:2rem;left:0;bottom:-4rem;background:linear-gradient(to left,rgba(5,30,58,0) 15%,rgb(0,197,255,1) 52%,rgba(5,30,58,0) 85%)}
.left .pie-chart{margin-top:24rem;background:url(../images/qu-yu-kan-ban/bg-pie.png) center center / 231rem 274rem no-repeat;height:310rem;display:flex;flex-direction:column;align-items:center;padding:46rem 0 0 0;position:relative}
.left .service .title{font-family:AdobeHeitiStd;font-weight:400;font-size:18rem;color:#FFFFFF}
.left .service .value{font-family:DIN,DIN;font-weight:bold;font-size:24rem;color:#00A7F6;line-height:40rem}
.left .service .value span{font-family:AdobeHeitiStd;font-weight:normal;font-size:16rem;color:#fff;position:relative;top:-2rem}
.left .service .desc{position:absolute;top:157rem}
.left .service .desc .percent{font-family:UTM,UTM;font-weight:normal;font-size:36rem;color:#EEF9FF;text-align:center}
.left .service .desc .name{font-family:SourceHanSansCN;font-weight:400;font-size:16px;color:#868686}
.left .map{flex:1;width:1rem;height:684rem;position:relative}
.left .map .map-qykb{position:relative;z-index:1;margin:-37rem auto 0}
.left .map .map-gauge{position:absolute;right:0;bottom:100rem;width:210rem;height:172rem;background:url(../images/qu-yu-kan-ban/bg-gauge.png) no-repeat;display:flex;flex-direction:column;align-items:center}
.left .map .map-gauge .title{width:70px;font-family:SourceHanSansCN;font-weight:400;font-size:14rem;color:#DFEDF3;line-height:19rem;position:absolute;bottom:6rem}
.right{margin-left:24rem;width:564rem}
.right .card{width:561rem;display:flex;flex-direction:column}
.right .title-bar{background:url('../images/bg-title-bar-3.png') no-repeat;height:52rem;z-index:1}
.right .chart{flex:1;height:1rem;background:linear-gradient(to top,rgba(0,28,52,.7),rgba(1,6,11,.5)),url(../images/qu-yu-kan-ban/bg-chart.png) left bottom -5rem no-repeat;position:relative;top:-30rem;padding:30rem 0 0 0}
.right .card{width:561rem}
.right .card:nth-child(1){height:304rem}
.right .card:nth-child(2){height:346rem}
.right .card:nth-child(3){height:316rem}
.right .distrib .pie-chart-2{display:flex;flex-direction:column;align-items:center;height:187rem;position:relative}
.right .distrib .pie-chart-2 .title{font-family:SourceHanSansCN;font-weight:500;font-size:16px;color:#FFF9F3;text-align:center;line-height:33rem;width:97rem;height:33rem;background:url(../images/qu-yu-kan-ban/bg-pie-2-title.png) no-repeat;margin-bottom:6rem}
.right .distrib .pie2{position:absolute !important;top:-30rem;background:url(../images/qu-yu-kan-ban/bg-pie-2.png) center center / 198rem 198rem no-repeat}
.right .distrib .legend{margin-top:10rem;height:68rem;width:100%;display:flex;flex-wrap:wrap;justify-content:center}
.right .distrib .legend .legend-item{font-family:SourceHanSansCN;font-weight:400;font-size:14rem;color:#FFFFFF;width:25%;text-indent:28rem}
.right .distrib .legend .symbol{width:8rem;height:8rem;border-radius:50%;display:inline-block}
.right .rank{height:100%;width:100%}
.right .head-line{display:flex;font-weight:bold;font-size:18rem;color:#FFFFFF;line-height:36rem;text-align:center;font-style:normal;text-transform:none;align-items:center;height:38rem;background:linear-gradient( rgba(34,155,225,0.4) 0%,rgba(12,144,255,0.4) 100%);border:1px solid;border-top:none;border-image:linear-gradient(transparent 20%,rgba(0,186.623,255,1)) 1}
.right .list-col{flex:1;width:1rem;height:36rem;line-height:36rem;text-align:center;position:relative}
.right .list-col:first-child{flex:.5}
.right .list-col:nth-child(2){flex:1;text-align:left}
.right .list-col:last-child{flex: unset;width: 148rem;}
.right .list{width:100%;padding:0 6rem 6rem;overflow:hidden}
.right .list-item{display:flex;width:100%;height:30rem;font-weight:bold;font-size:14rem;color:#f5f5f5;line-height:30rem;text-align:left;font-style:normal;text-transform:none;align-items:center;height:38rem}
.right .list-item .list-col:nth-child(1){color:#2F95F3}
.right .list-item .list-col:nth-child(2){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.right .list-item .list-col:nth-child(3){color:#FFD16D}
.right .list-item:nth-child(odd){background:rgba(12,70,125,0.3)}
.right .list-item:nth-child(1) span:nth-child(1){color:#FFD200}
.right .list-item:nth-child(2) span:nth-child(1){color:#25EAFF}
.right .list-item:nth-child(3) span:nth-child(1){color:#2DFF7F}
.dialog{width:1278rem;height:915rem;background:url(../images/qu-yu-kan-ban/bg-dialog.png) no-repeat;position:relative}
.dialog .close-btn{position:absolute;top:-14rem;right:-14rem;width:29rem;height:29rem;background:url(../images/qu-yu-kan-ban/btn-dialog-close.png) no-repeat}
.dialog .content{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}
.dialog .content .title{width:100%;height:60rem;font-family:SourceHanSansCN;font-weight:400;font-size:30rem;color:#D8F1FF;line-height:60rem;text-align:center;margin-top:21rem}
.dialog .content .charts{flex:1;width:100%;height:1rem;padding:20rem 20rem 55rem 20rem;display:flex}
.dialog .content .charts .left{width:491rem;height:100%}
.dialog .content .charts .left .title-bar{background:url(../images/bg-title-bar-5.png) no-repeat}
.dialog .card img{width:73rem;height:84rem}
.dialog .card .content{width:455rem;height:81rem;display:flex;flex-direction:row;border:1px solid;border-image:linear-gradient(to right,#002134,#1fa1f3,#002134) 1}
.dialog .card .content .text{flex:1;text-align:center}
.dialog .card .content .name{font-family:SourceHanSansCN;font-weight:400;font-size:18rem;color:#DFF1FF}
.dialog .card .content .value{font-family:SourceHanSansCN;font-weight:800;font-size:18rem;background-image:linear-gradient(0deg,#00EFFF 0%,#FFFFFF 100%)}
.dialog .card .content .divider{width:1px;height:100%;background:linear-gradient(rgba(255,255,255,0) 15%,rgb(255,255,255,1) 52%,rgba(255,255,255,0) 85%)}
.dialog .chart-card{display:flex;flex-direction:column}
.dialog .chart-card .chart{flex:1;height:1rem;margin-top:0;display:flex;align-items:center;justify-content:center}
.dialog .type-pie-chart{display:flex}
.dialog .type-pie-chart .pie-chart-wrap{width:164rem;height:164rem;background:url(../images/qu-yu-kan-ban/bg-pie-2.png) no-repeat;position:relative}
.dialog .type-pie-chart .pie-chart-wrap .pie-chart-type{position:absolute !important;top:-31rem;left:-130rem}
.dialog .type-pie-chart .legend{width:275rem;height:207rem;background:url(../images/qu-yu-kan-ban/bg-dialog-pie-legend.png) no-repeat;padding:14rem 0 0 36rem}
.dialog .type-pie-chart .legend .legend-item span{display:inline-block}
.dialog .type-pie-chart .legend .legend-item .symbol{width:16rem;height:16rem;border:1px solid;display:flex;align-items:center;justify-content:center;margin-right:10rem}
.dialog .type-pie-chart .legend .legend-item .name{width:72rem;font-family:SourceHanSansCN;font-weight:400;font-size:18rem;color:#BFC3CB;line-height:61rem;margin-right:10rem;flex-shrink: 0;}
.dialog .type-pie-chart .legend .legend-item .unit,.dialog .type-pie-chart .legend .legend-item .percent,.dialog .type-pie-chart .legend .legend-item .value{font-family:DIN;font-weight:400;font-size:18rem;line-height:61rem;color:#FFFFFF}
.dialog .type-pie-chart .legend .legend-item .value{margin-right:2rem;width: 36rem;text-align: right;}
.dialog .type-pie-chart .legend .legend-item .unit{font-family:SourceHanSansCN;margin-right:8rem}
.dialog .content .charts .right{width:723rem;height:100%}
.dialog .content .charts .right .card{width:100%;height:100%}
.dialog .content .charts .right .title-bar{background:url(../images/bg-title-bar-4.png) no-repeat}
.dialog .content .charts .right .chart{top:0;padding:0}
.dialog .content .charts .right .list-col:nth-child(5){flex:unset;width:100rem}
.dialog .content .charts .right .list-col:last-child{flex:unset;width:150rem}
.dialog .content .charts .right .list-item{height:28rem}
.dialog .content .charts .right .list-item .list-col:nth-child(4){color:#277BE7}
.dialog .content .charts .right .list-item .list-col:nth-child(5){color:#00FB93}
.dialog .content .charts .right .list-item .list-col:nth-child(6){color:#FDC500}