*{
    font-size: .16rem;
    font-family: "Microsoft YaHei" ,Arial,Helvetica,sans-serif, "宋体";
}
sup,sub{
    font-size: .12rem;
}

.c-hd-pt{
    padding: .7rem 1.44rem .6rem;
    background: #F9F9F9;
}

.box{
    border: .01rem solid #95B0FD;
    box-shadow: 0 .01rem .1rem 0 rgba(13,92,254,0.1);
    border-radius: .02rem;
    margin-top: .2rem;
    position: relative;
}
.bs{
    background: #FFFFFF;
    box-shadow: 0 .01rem .1rem 0 rgba(13,92,254,0.1);
    border-radius: .04rem;
}
.c-title{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.c-title span{
    display: block;
    font-size: .28rem;
    padding: 0 .2rem;
    color: #FEFEFE;
    font-weight: 100;
    line-height: .62rem;
    background: linear-gradient(90deg, #0B5AFE, #5094FB);
    border-radius: 0 0 .14rem .14rem;
}
.c-title strong{
    font-size: .28rem;
    font-weight: bold;
}

/* ☁️ */
.map-bg-box50{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.map-bg-box .map-info .text{
    text-align: left;
}
.map-bg-box .map-info h3{
    font-size: .22rem;
    line-height: .28rem;
    font-weight: bold;
    color: #00055D;
}
.map-bg-box .map-info p,
.map-bg-box .map-info .screen{
    margin-top: .12rem;
    font-size: .14rem;
    line-height: .16rem;
    color: rgba(0, 5, 93, 0.5);
}

.map-bg-box .map-info .number{
    position: relative;
    text-align: center;
    min-width: 1.5rem;
    /*margin-left: .6rem;*/
}
.map-bg-box .infoV .icon-cloud1,
.map-bg-box .infoH .icon-cloud2{
    display: block;
    margin: 0 auto;
    width: 1.09rem;
}
.map-bg-box .map-info h4{
    font-size: .5rem;
    font-family: Impact;
    color: #333333;
    line-height: .42rem;
    background: linear-gradient(0deg, #3C8FFE 0%, #0937FF 99.5849609375%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
}
.map-bg-box .map-info h4 span{
    display: block;
    font-size: .14rem;
    line-height: .2rem;
}
.map-bg-box .map-info h4.textWZ{
    line-height: .5rem;
    font-weight: bold;
}
.map-bg-box .map-info h5{
    font-weight: bold;
    font-size: .22rem;
    line-height: .28rem;
    color: #333333;
    margin-top: .2rem;
}

.map-bg-box .infoV li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .8rem;
}
.map-bg-box .infoV li:first-of-type{
    margin-top: 0;
}
.map-bg-box .icon-cloud1{
    height: .61rem;
    background: url(../images/detail/icon-cloud1.png) no-repeat;
    background-size: 100%;
}
.map-bg-box .infoV h4{
    margin-bottom: -0.33rem;
}

.map-bg-box .infoH{
    display: flex;
    align-items: center;
    text-align: center;
}
.map-bg-box .infoH li{
    margin-right: 1rem;
}
.map-bg-box .icon-cloud2{
    height: .45rem;
    background: url(../images/detail/icon-cloud2.png) no-repeat;
    background-size: 100%;
}
.map-bg-box .infoH h4{
    margin-bottom: -0.25rem;
}

/* 公共标题 */
.box-head{
    display: flex;
    margin-top: .1rem;
    height: 4.66rem;
}
.head-title{
    display: flex;
    align-items: center;
    padding: .2rem .5rem .2rem .3rem;
    margin-top: 0;
    flex: 2;
}
.env-upDown{
    margin-right: .38rem;
}
.env-upDown .city-name{
    width: 2.81rem;
    height: 1.81rem;
    background: linear-gradient(135deg, #0E4DFB, #2C62FB);
    border-radius: .1rem;
    padding: .13rem .14rem .13rem .36rem;position: relative;
}
.env-upDown .city-name:before{
    content: '';
    width: 3.04rem;
    height: 2.07rem;
    background: url("../images/detail/title/bg.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    right: 0;
}
.env-upDown .flex-align{
    line-height: .2rem;
    justify-content: flex-end;
    font-weight: 200;
    color: #FFFFFF;
}
.env-upDown .icon-map{
    display: block;
    width: .22rem;
    height: .22rem;
    background: url(../images/detail/icon-map.png) no-repeat;
    background-size: 100%;
    margin-right: .07rem;
}
.env-upDown h2{
    font-weight: bold;
    font-size: .36rem;
    line-height: .6rem;
    color: #FFFFFF;
    margin: .23rem 0 .17rem;
}
.env-upDown h3{
    font-weight: 200;
    font-size: .2rem;
    line-height: .3rem;
    color: #FFFFFF;
}
.env-upDown h3 strong{
    font-size: .2rem;
    line-height: .3rem;
    font-weight: bold;
}

.env-upDown .box-step{
    width: 3.27rem;
    height: 1.95rem;
    border-radius: .1rem;
    border: .02rem solid #BFD0FE;
    margin-top: .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.env-upDown  .round-step{
    width: 1.32rem;
    height: 1.32rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-right: .4rem;
}
.env-upDown .bg-rd{
    width: 1.06rem;
    height: 1.06rem;
    /*background: linear-gradient(90deg, #DEE9FA, #7A9CD1);*/
    border-radius: 50%;
    border: .03rem solid #C0D2EE;
    display: flex;
    align-items: center;
    justify-content: center;
}
.env-upDown .bg-icon{
    width: .8rem;
    height: .8rem;
    background: #E3EEFF;
    border-radius: 50%;
    position: relative;
}
.canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.env-upDown .icon{
    display: block;
    width: .35rem;
    height: .35rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.175rem;
    margin-top: -0.175rem;
    z-index: 5;
    transition: background .3s ease-in-out, transform .3s ease-in-out;
}
.env-upDown .icon-air{
    background: url(../images/detail/title/icon-air.png) no-repeat;
    background-size: 100%;
}
.env-upDown .icon-water{
    background: url(../images/detail/title/icon-water.png) no-repeat;
    background-size: 100%;
}
.env-upDown .icon-waste{
    background: url(../images/detail/title/icon-waste.png) no-repeat;
    background-size: 100%;
}
.env-upDown .icon-carbon{
    background: url(../images/detail/title/icon-carbon.png) no-repeat;
    background-size: 100%;
}
.env-upDown .icon-smart{
    background: url(../images/detail/title/icon-smart.png) no-repeat;
    background-size: 100%;
}
.box-step strong{
    font-family: DIN Alternate;
    font-weight: bold;
    font-size: .3rem;
    color: #0F5CFE;
}
.box-step .percentage{
    width: calc(100% - 1.82rem);
    margin-right: .1rem;
}
.box-step p{
    margin-top: .18rem;
    font-size: .16rem;
    color: #00055D;
    line-height: .26rem;
}

.env-upDown100{
    height: 100%;
}
.env-upDown100 .city-name{
    height: calc(100% - .26rem);
}
.env-upDown100 .align{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100% - .45rem);
}

.head-map, .head-imgList{
    flex: 1;
    position: relative;
    background: #fff;
    border-radius: .04rem .02rem .02rem .04rem;
    margin-left: .2rem;
}
.head-map .map,
.head-map iframe{
    width: 100%;
    height: 100%;
    border: none;
    position: relative;
}
.head-imgList{
    flex: 1;
}
.head-imgList .cover{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box-head .btn{
    color: #fff;
    line-height: .38rem;
    background: rgba(0,0,0,.4);
    padding: 0 .1rem 0 .15rem;
    -webkit-border-radius: .19rem 0 0 .19rem;
    -moz-border-radius: .19rem 0 0 .19rem;
    border-radius: .19rem 0 0 .19rem;
    position: absolute;
    right: 0;
    top: .2rem;
    display: flex;
    align-items: center;
}
.box-head .arrow-right{
    width: .07rem;
    height: .07rem;
    border-top: .02rem solid #fff;
    border-right: .02rem solid #fff;
    transform: rotate(45deg);
    margin-left: .07rem;
}

/* city change */
.box-changeBox{
    position: relative;
    width: max-content;
    cursor: pointer;
    margin: .13rem 0 .07rem;
}
.box-changeBox h2{
    margin: 0;
}
.box-changeBox .iconArrow{
    display: block;
    width: .24rem;
    height: .14rem;
    margin-left: .08rem;
    background: url(../images/dark/icon_arrow_btm.png) no-repeat;
    background-size: 100%;
    transition: 0.8s;
    filter: brightness(100);
}
.box-changeBox:hover .iconArrow{
    transform: rotate(180deg);
}

.list-selectCity{
    display: none;
    position: absolute;
    top: .6rem;
    /*left: calc(100% - .2rem);*/
    left: 50%;
    /*transform: translate(-50%, 0);*/
    background: #FFFFFF;
    box-shadow: 0 .06rem .2rem 0 rgba(39,51,239,0.1);
    border-radius: .14rem;
    z-index: 10;
}
.list-selectCity .box-province{
    padding: .05rem .1rem;
    min-width: 1.3rem;
}
.list-selectCity li{
    font-size: .14rem;
    line-height: .16rem;
    color: #000;
    padding: .12rem .1rem;
    cursor: pointer;
}

.box-province{
    max-height: 3.65rem;
    overflow-y: auto;
}
.box-province li.active{
    background: #F0F1FE;
    border-radius: .1rem;
}

.box-cityList{
    padding: 0.03rem .2rem;
    min-width: 1.1rem;
}
.box-cityList h6{
    font-weight: bold;
    font-size: .2rem;
    color: #000000;
    padding: .24rem 0 .32rem;
    border-bottom: 1px solid #EEEEEE;
}
.box-cityList ol{
    margin-top: .07rem;
    max-height: 2.85rem;
    overflow-y: auto;
}
.box-cityList li.active{
    color: #2154FF;
}


/* 议题 */
.common-bTitle{
    background: linear-gradient(90deg, #2C62FB 10%, #0E4DFB 20%, #018FFF);
    border-radius: .24rem .24rem 0 0;
    padding: .22rem .38rem .48rem .38rem;
    position: relative;
}
.common-bTitle:after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 70%;
    height: 100%;
    background: rgba(255, 255, 255,.1);
}
.common-bTitle h2{
    font-weight: bold;
    font-size: .24rem;
    color: #FFFFFF;
}
.common-bTitle h2 span{
    font-size: .22rem;
    margin-left: .15rem;
    font-weight: 100;
}
.common-sTitle{
    display: flex;
    align-items: center;
    border-bottom: 0.01rem dashed rgba(0,80,243,.5);
}
.common-sTitle .icon{
    width: .78rem;
    height: .78rem;
    background: rgba(44,98,251,0.1);
    border-right: 0.01rem dashed rgba(0,80,243,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: .3rem;
}
.common-sTitle .icon b{
    display: block;
    width: .4rem;
    height: .4rem;
}
.common-sTitle h3{
    font-weight: bold;
    font-size: .22rem;
    line-height: .24rem;
    color: #00055D;
    position: relative;
}
.common-sTitle h3 span{
    font-weight: 200;
    color: #00055D;
    margin-left: .2rem;
}
.common-sTitle h3 sub, .common-sTitle h3 sup,
.box-ets .unitText sub, .box-ets .unitText sup{
    font-weight: bold;
}
.common-sTitle .flex-between{
    width: calc(100% - .79rem);
    align-items: center;
}
.common-sTitle .sg{
    font-weight: bold;
    font-size: .28rem;
    color: #2C62FB;
    margin-left: .2rem;
}

.common-sTitle .mask-bubble{
    display: none;
    position: absolute;
    top: .4rem;
    background: rgb(61, 110, 255);
    color: #fff;
    font-size: .14rem;
    line-height: .20rem;
    padding: .10rem;
    width: 3rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 999;
    border-radius: .02rem;
    text-align: left;
}
.common-sTitle h3:hover .mask-bubble{
    display: block;
}

.title-hover{
    position: relative;
    margin-left: .15rem;
}
.title-hover .icon-tips{
    display: block;
    width: .2rem;
    height: .2rem;
    background: url(../images/detail/icon-tips.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
}
.title-hover .content{
    display: none;
    font-size: .14rem;
    line-height: .2rem;
    min-width: 3rem;
    color: #348fe0;
    background: #fff;
    box-shadow: 0 .01rem .1rem 0 rgba(13,92,254,0.1);
    padding: .08rem .1rem;
    text-align: justify;
    position: absolute;
    left: 0;
    top: .24rem;
    z-index: 1;
    border-radius: .04rem;
}
.title-hover:hover .content{
    display: block;
}
.head-map .title-hover{
    position: absolute;
    right: .2rem;
    top: .2rem;
    z-index: 1;
}

.box-titleContainer{
    margin-top: .2rem;
}
.box-titleContainer .box:nth-child(-n+2){
    margin-top: -0.26rem;
    border-radius: .24rem .24rem .04rem .04rem;
}
.box-titleContainer .box-flex .box:nth-of-type(1){
    border-radius: .24rem .04rem .04rem .04rem;
}
.box-titleContainer .box-flex .box:nth-of-type(2){
    border-radius: .04rem .24rem .04rem .04rem;
}

.tabChart-btn, .surface-water, .common-legend{
    margin-right: .3rem;
}

.tabChart-btn{
    display: flex;
    align-items: center;
    justify-content: center;
}
.tabChart-btn li{
    width: .54rem;
    font-size: .14rem;
    line-height: .3rem;
    color: #2F2F4F;
    background: rgba(15,92,254,0.05);
    text-align: center;
    margin: 0 .02rem;
    cursor: pointer;
    font-weight: 300;
}
.tabChart-btn li.active{
    font-weight: bold;
    color: #FEFEFF;
    background: #2C62FB;
}

.surface-water, .air-tableList{
    position: relative;
}
.surface-water a, .air-tableList a, .surface-select .select{
    display: block;
    font-size: .14rem;
    line-height: .3rem;
    color: #00055D;
    background: rgba(233,239,255,.5);
    padding: 0 .1rem;
    min-width: 1.5rem;
    position: relative;
    text-align: left;
    border-radius: .02rem;
}
.surface-water a:after, .air-tableList a:after{
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-top: solid .05rem #333;
    border-left: solid .04rem transparent;
    border-right: solid .04rem transparent;
    vertical-align: .03rem;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    position: absolute;
    right: .1rem;
    top: .13rem;
}
.surface-water:hover a:after {
    border-top: solid .05rem transparent;
    border-bottom: solid .05rem #333;
    top: .08rem;
}

.air-tableList a.current{
    background: #2C62FB;
    color: #fff;
}
.air-tableList a.current:after{
    border-top: solid .05rem #fff;
}
.air-tableList a.open:after{
    border-top: solid .05rem transparent;
    border-bottom: solid .05rem #fff;
    top: .08rem;
}

.surface-water .list, .air-tableList .list{
    display: none;
    min-width: 100%;
    box-shadow: 0 0 .02rem 0 rgba(0, 0, 0, 0.2);
    border-radius: .02rem;
    background: #fff;
    position: absolute;
    left: 0;
    top: .30rem;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    max-height: 2.2rem;
    overflow-y: auto;
    z-index: 1;
}
.surface-water .list li, .air-tableList .list li{
    font-size: .14rem;
    line-height: .3rem;
    padding: 0 .1rem;
    cursor: pointer;
}
.surface-water .list li:hover, .surface-water .list li.active,
.air-tableList .list li:hover, .air-tableList .list li.active{
    background: #EDF1F8;
}

.surface-water .dw,
.surface-water .dw sup,
.surface-water .dw sub{
    font-size: .1rem;
}


.air-year{
    margin-right: .14rem;
}
.air-monthly{
    margin-right: 0;
}
.air-year a, .air-monthly a, .tabChart-btn-duibi a{
    min-width: 0.92rem;
}

.air-yearTb, .air-monthlyTb{
    margin-right: .06rem;
}
.air-yearTb a, .air-monthlyTb a{
    min-width: 0.6rem;
    padding-right: .24rem;
}
.air-monthlyTb .list{
    left: 50%;
    transform: translate(-50%, 0);
}
.list-flex{
    display: flex;
    width: 1.2rem;
}
.list-flex .item:first-of-type{
    width: 56%;
}
.list-flex .item:last-of-type{
    width: 44%;
}
.list-flex .item li{
    text-align: center;
}


.legend-list{
    width: calc(100% - .4rem);
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: .01rem solid #E1E8FF;
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    padding: .2rem 0;
    margin: 0 .2rem;
}
.legend-list li{
    font-size: .14rem;
    line-height: .16rem;
    color: #58699E;
    margin-right: .2rem;
    display: flex;
    align-items: center;
}
.legend-list b{
    display: block;
    width: .12rem;
    height: .12rem;
    margin-right: .06rem;
}

.legend-rectangle li{
    margin-right: .01rem;
    text-align: center;
    display: block;
}
.legend-rectangle  b{
    width: .4rem;
    height: .12rem;
    margin-bottom: .06rem;
    margin-right: 0;
}

.legend-smart{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-top: 0;
    width: auto;
    padding: 0;
    margin: 0 .3rem 0 0;
}
.legend-smart li b.blue {
    background: rgb(83, 137, 233);
}
.legend-smart li b.orange {
    background: rgb(253, 176, 115);
}

.legend-list li:last-of-type{
    margin-right: 0;
}


.box-ets{
    padding: .6rem .6rem;
    position: relative;
}
.bar-ets100, .bar-ets{
    width: 100%;
    height: 3.9rem;
}
.radar-ets{
    width: 100%;
    height: 100%;
    border-radius: .04rem .02rem .02rem .04rem;
}
.radar-ets .x-labels tspan{
    font-size: .06rem;
}
.radar-ets .radar-mask{
    font-weight: normal;
    font-size: .12rem;
}
.box-flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.box-flex .box{
    width: calc(50% - .1rem);
}
.pie-box .bar-ets{
    width: 55%;
}
.pie-box .scrollY {
    width: 40%;
    height: 3.7rem;
}
.pie-box .bar-ets50-Box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.pie-box .bar-ets50 {
    width: 49.9%;
    height: 1.2rem;
    float: left;
    margin: .08rem 0;
}
.highcharts-credits{
    display: none;
}
.box-ets .unitText, .box-ets .unitTextRight{
    font-weight: bold;
    font-size: .14rem;
    color: #001366;
    position: absolute;
    top: .6rem;
}
.box-ets .unitText{
    left: .6rem;
}
.box-ets .unitTextRight{
    right: .6rem;
}

.echart-title{
    text-align: center;
    margin-bottom: .1rem;
}
.tooltip-list .item{
    font-size: .14rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: .05rem 0;
    line-height: .2rem;
}
.tooltip-list .item p{
    font-size: .14rem;
    margin-right: .1rem;
    line-height: .2rem;
}

.highcharts-axis-labels text{
    font-size: .1rem;
}

.info-content{
    font-size: .14rem;
    line-height: .26rem;
    color: #6F6F6F;
    text-align: center;
    margin-top: .43rem;
    margin-bottom: -0.07rem;
}
.info-content strong{
    font-weight: bold;
}

.container-airPage .icon1{
    background: url(../images/detail/air/icon1.png) no-repeat;
    background-size: 100%;
}
.container-airPage .icon2{
    background: url(../images/detail/air/icon2.png) no-repeat;
    background-size: 100%;
}
.container-airPage .icon3{
    background: url(../images/detail/air/icon3.png) no-repeat;
    background-size: 100%;
}
.container-airPage .icon4{
    background: url(../images/detail/air/icon4.png) no-repeat;
    background-size: 100%;
}
.container-airPage .icon5{
    background: url(../images/detail/air/icon5.png) no-repeat;
    background-size: 100%;
}
.container-airPage .icon6{
    background: url(../images/detail/air/icon6.png) no-repeat;
    background-size: 100%;
}
.container-airPage .icon7{
    background: url(../images/detail/air/icon7.png) no-repeat;
    background-size: 100%;
}

.container-waterPage .icon1{
    background: url(../images/detail/water/icon1.png) no-repeat;
    background-size: 100%;
}
.container-waterPage .icon2{
    background: url(../images/detail/water/icon2.png) no-repeat;
    background-size: 100%;
}
.container-waterPage .icon3{
    background: url(../images/detail/water/icon3.png) no-repeat;
    background-size: 100%;
}
.container-waterPage .icon4{
    background: url(../images/detail/water/icon4.png) no-repeat;
    background-size: 100%;
}
.container-waterPage .icon5{
    background: url(../images/detail/water/icon5.png) no-repeat;
    background-size: 100%;
}

.container-wastePage .icon1{
    background: url(../images/detail/waste/icon1.png) no-repeat;
    background-size: 100%;
}
.container-wastePage .icon2{
    background: url(../images/detail/waste/icon2.png) no-repeat;
    background-size: 100%;
}
.container-wastePage .icon3{
    background: url(../images/detail/waste/icon3.png) no-repeat;
    background-size: 100%;
}
.container-wastePage .icon4{
    background: url(../images/detail/waste/icon4.png) no-repeat;
    background-size: 100%;
}
.container-wastePage .icon5{
    background: url(../images/detail/waste/icon5.png) no-repeat;
    background-size: 100%;
}
.container-wastePage .icon6{
    background: url(../images/detail/waste/icon6.png) no-repeat;
    background-size: 100%;
}

.container-carbonPage .icon1{
    background: url(../images/detail/carbon/icon1.png) no-repeat;
    background-size: 100%;
}
.container-carbonPage .icon2{
    background: url(../images/detail/carbon/icon2.png) no-repeat;
    background-size: 100%;
}
.container-carbonPage .icon3{
    background: url(../images/detail/carbon/icon3.png) no-repeat;
    background-size: 100%;
}
.container-carbonPage .icon4{
    background: url(../images/detail/carbon/icon4.png) no-repeat;
    background-size: 100%;
}
.container-carbonPage .icon5{
    background: url(../images/detail/carbon/icon5.png) no-repeat;
    background-size: 100%;
}
.container-carbonPage .icon6{
    background: url(../images/detail/carbon/icon6.png) no-repeat;
    background-size: 100%;
}
.container-carbonPage .icon7{
    background: url(../images/detail/carbon/icon7.png) no-repeat;
    background-size: 100%;
}
.container-carbonPage .icon8{
    background: url(../images/detail/carbon/icon8.png) no-repeat;
    background-size: 100%;
}
.container-carbonPage .icon9{
    background: url(../images/detail/carbon/icon9.png) no-repeat;
    background-size: 100%;
}

.container-smartPage .icon1{
    background: url(../images/detail/smart/icon1.png) no-repeat;
    background-size: 100%;
}
.container-smartPage .icon2{
    background: url(../images/detail/smart/icon2.png) no-repeat;
    background-size: 100%;
}
.container-smartPage .icon3{
    background: url(../images/detail/smart/icon3.png) no-repeat;
    background-size: 100%;
}
.container-smartPage .icon4{
    background: url(../images/detail/smart/icon4.png) no-repeat;
    background-size: 100%;
}
.container-smartPage .icon5{
    background: url(../images/detail/smart/icon5.png) no-repeat;
    background-size: 100%;
}
.container-smartPage .icon6{
    background: url(../images/detail/smart/icon6.png) no-repeat;
    background-size: 100%;
}
.container-smartPage .icon7{
    background: url(../images/detail/smart/icon7.png) no-repeat;
    background-size: 100%;
}
.container-smartPage .icon8{
    background: url(../images/detail/smart/icon8.png) no-repeat;
    background-size: 100%;
}
.container-smartPage .icon9{
    background: url(../images/detail/smart/icon9.png) no-repeat;
    background-size: 100%;
}
.container-smartPage .icon10{
    background: url(../images/detail/smart/icon10.png) no-repeat;
    background-size: 100%;
}
.container-smartPage .icon11{
    background: url(../images/detail/smart/icon11.png) no-repeat;
    background-size: 100%;
}

.no-content{
    font-weight: bold;
    font-size: .50rem;
    color: #7481AC;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 0.79rem);
}

.pager-wrap{
    margin-top: .44rem;
}
.pagination-wrap .pagination .pagers{
    margin-top: .2rem;
}
.pagination-wrap .pagination .page-jump .button{
    background: #00055D;
}

/* air */
.box-airTitle{
    padding: .12rem .25rem .12rem .3rem;
    border-bottom: .01rem solid #E1E8FF;
}
.box-airTitle h6{
    font-size: .16rem;
    line-height: .3rem;
    color: #00055D;
}
.list-year{
    padding: .1rem .21rem .5rem;
}
.list-year .content, .list-year .list{
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
}
.list-year .content p, .list-year .list li{
    flex: 0 0 calc(14.2% - .1rem);
    text-align: center;
    font-size: 0.12rem;
    margin: 0.05rem .05rem 0;
}
.list-year .content .week{
    color: rgba(0, 5, 93, 0.5);
}
.list-year .list{
    margin-top: .05rem;
}
.list-year .list li{
    height: .5rem;
    border-radius: .05rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.list-year .list .grey{
    background: #F9F9F9;
}
.list-year .list .future{
    background: #E9EFFF;
}

.list-year .list li h5{
    font-weight: bold;
    font-size: .12rem;
    color: #FFFFFF;
    margin-bottom: .06rem;
}
.list-year .list li span{
    color: #00055D;
    font-size: .12rem;
}

.list-year .list .current span{
    color: rgba(255, 255, 255, 0.5);
}
.list-year .list .grey span,
.list-year .list .future span{
    font-size: .12rem;
}
.list-year .list .grey span{
    color: rgba(0, 5, 93, 0.3);
}


.list-year .mask{
    width: max-content;
    display: flex;
    position: absolute;
    bottom: .56rem;
    left: 50%;
    background: #fff;
    transform: translate(-50%, 0);
    box-shadow: 0 .02rem .09rem 0 rgba(44,44,44,0.2);
    border-radius: .06rem;
    z-index: 999;
}
.list-year .mask .info{
    width: .66rem;
    height: 1.02rem;
    text-align: center;
    color: #00055D;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.list-year .mask .info h4{
    font-size: .3rem;
    line-height: .24rem;
    font-weight: bold;
}
.list-year .mask .info p{
    font-size: .12rem;
    line-height: .14rem;
    margin-top: .06rem;
}
.list-year .mask .date{
    width: 100%;
    color: #00055D!important;
    font-weight: bold;
    font-size: .12rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}
.list-year .mask .listTe{
    width: 2.8rem;
    display: flex;
    flex-wrap: wrap;
    padding: .14rem;
    background: #F9F9F9;
    border-radius: 0 .06rem .06rem 0;
}
.list-year .mask .listTe .item{
    width: 33%;
    display: flex;
    margin: .14rem 0;
}
.list-year .mask .listTe h6{
    color: rgba(88, 105, 158, 0.7);
    font-size: .14rem;
    font-weight: normal;
    /*width: .38rem;*/
    text-align: left;
    display: flex;
    align-items: baseline;
}
.list-year .mask .listTe h6 sub{
    font-size: .1rem;
}
.list-year .mask .listTe span{
    font-size: .14rem;
    color: #58699E;
    font-weight: bold;
    margin: 0 0.02rem 0 0.05rem;
}
.list-year .mask .listTe b{
    font-size: .1rem;
    color: rgba(88, 105, 158, 0.7);
}
.list-year .mask .listTe sup{
    font-size: .08rem;
}

.list-legend{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .1rem;
}
.list-legend li{
    color: #fff;
    min-width: .4rem;
    line-height: .2rem;
    border-radius: .02rem;
    text-align: center;
    margin-left: 0.03rem;
    font-size: .06rem;
}
.list-legend li:first-of-type{
    margin-left: 0;
}


.box-tbSlide{
    padding: .22rem .3rem .28rem;
    height: calc(5.1rem - .5rem);
    position: relative;
}
.box-tbPos{
    /*width: calc(100% - 1.2rem);*/
    position: absolute;
    top: .22rem;
    left: .6rem;
    background: #fff;
}
.box-slide{
    padding: 0 .3rem;
    height: 100%;
    /*height: calc(5.1rem - .5rem);*/
    overflow-y: auto;
    position: relative;
}
.box-slide .common-table-slide thead{
    opacity: 0!important;
}
.common-table-slide tr th,
.common-table-slide tr th h6{
    font-size: .18rem;
    color: #00055D;
    line-height: .3rem;
    vertical-align: middle;
}
.common-table-slide tr th{
    padding-bottom: .16rem;
}
.common-table-slide tr th h6{
    max-width: calc(75% - .15rem);
    line-height: .24rem;
}
.common-table-slide tr th span{
    /*font-size: .14rem;*/
    display: none;
    font-weight: normal;
    color: rgba(0, 5, 93, 0.5);
}

.common-table-slide .box-sort{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.common-table-slide .box-sort .icon{
    display: block;
    width: .07rem;
    height: .14rem;
    margin-left: .08rem;
    background: url(../images/detail/air/icon-sort.png) no-repeat;
    background-size: 100%;
}
.common-table-slide .box-sort .iconUp{
    background: url(../images/detail/air/icon-sortUp.png) no-repeat;
    background-size: 100%;
}
.common-table-slide .box-sort .iconDown{
    background: url(../images/detail/air/icon-sortDown.png) no-repeat;
    background-size: 100%;
}

.common-table-slide tr td{
    padding: .09rem;
}
.common-table-slide tbody td{
    border-top: .01rem solid #E1E8FF;
    font-size: .16rem;
    color: #58699E;
}
.common-table-slide tbody tr:first-of-type td{
    border-top: none;
}
.common-table-slide td .bg{
    width: .52rem;
    line-height: .3rem;
    border-radius: .04rem;
    font-size: .16rem;
    color: #FFFFFF;
    margin: 0 auto;
}
.common-table-slide td .rate{
    display: flex;
    align-items: center;
    justify-content: center;
}
.common-table-slide td .rate .icon{
    display: block;
    width: .1rem;
    height: .15rem;
    margin-right: .06rem;
}
.common-table-slide td .rate .up{
    background: url(../images/detail/air/icon-up.png) no-repeat;
    background-size: 100%;
}
.common-table-slide td .rate .down{
    background: url(../images/detail/air/icon-down.png) no-repeat;
    background-size: 100%;
}
.common-table-slide td .rate .num{
    width: .52rem;
}
.common-table-slide tbody tr:hover,
.common-table-slide tbody tr.active{
    background: rgba(123,152,249,0.1);
}

.box-screen{
    display: flex;
    align-items: center;
    position: relative;
    margin-right: .2rem;
}
.com-tips{
    width: max-content;
    position: absolute;
    bottom: -0.18rem;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: .12rem;
    font-weight: bold;
    /*color: #00055D;*/
    color: rgba(44,98,251,.85);
    /*color: rgba(0, 5, 93, 0.3);*/
}

/* 全屏 */
.box-fullScreen{
    margin-right: .3rem;
    margin-top: .05rem;
}
.box-fullScreen b{
    display: block;
    width: .2rem;
    height: .2rem;
    cursor: pointer;
    transition: 1s;
}
.box-fullScreen .icon-openScreen{
    background: url(../images/detail/air/icon-fullScreen.png) no-repeat;
    background-size: 100%;
}
.box-fullScreen .icon-closeScreen{
    background: url(../images/detail/air/icon-fullScreenExit.png) no-repeat;
    background-size: 100%;
}


/* 年历 */
.posBox{
    position: fixed;
    top: .7rem;
    left: 0;
    width: calc(100% - 2.88rem)!important;
    height: calc(100% - .7rem);
    z-index: 5;
    margin: 0 1.44rem;
}
.posBox .box-tbSlide{
    height: calc(100% - 1.3rem);
}

.box-calendar{
    height: calc(100% - 0.8rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .1rem;
    position: relative;
}
.box-calendar .bbox{
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
}
.box-calendar .content{
    background: #FFFFFF;
    box-shadow: 0px .03rem .10rem .01rem rgba(44,98,251,0.1);
    border-radius: .04rem;
    margin-top: .05rem;
    width: calc(25% - 0.04rem);
    padding: .1rem 0 .08rem;
    margin-right: .05rem;
    cursor: pointer;
}
.box-calendar .content:nth-of-type(4n){
    margin-right: 0;
}
.box-calendar .title-month{
    font-size: .14rem;
    color: #00055D;
    margin-bottom: .04rem;
    text-align: center;
}
.box-calendar .list{
    padding: 0 0.07rem;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
}
.box-calendar .list li{
    flex: 0 0 calc(14.28% - .026rem);
    width: .23rem;
    height: .16rem;
    border-radius: .03rem;
    margin-top: .03rem;
    margin-right: .03rem;
    background: #E9EFFF;
    position: relative;
}
.box-calendar .list li:nth-of-type(7n){
    margin-right: 0;
}
.box-calendar .list li h5{
    display: none;
    font-size: .12rem;
    color: #FFFFFF;
    margin-bottom: .02rem;
}
.box-calendar .list li p{
    font-size: .12rem;
    line-height: .16rem;
    text-align: center;
    color: #fff;
}
.box-calendar .list li.pre p{
    /* background: #E9EFFF; */
    color: rgba(0, 5, 93, 0.3);
}

.box-calendar .mask-calendar{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(123,152,249,0.25);
}
.box-calendar .icon-close{
    width: .15rem;
    height: .15rem;
    background: url(/GreenSecurities/images/icon-close.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: .12rem;
    right: .12rem;
    cursor: pointer;
}

.box-calendar .pos{
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.box-calendar .pos .content{
    margin: 0;
    width: calc(100% - .26rem);
    padding: .2rem .13rem;
}
.box-calendar .pos .title-month{
    margin-bottom: .12rem;
    font-size: .2rem;
}
.box-calendar .pos .content li{
    height: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box-calendar .pos .content li h5{
    display: block;
}
.box-calendar .pos .content li p{
    color: rgba(0,5,93,.2);
    font-size: .14rem;
}

.box-calendar .pos .maskBox{
    background: transparent;
    padding: 0;
}
.box-calendar .pos .mask .info p{
    font-size: .12rem;
    color: #00055D;
    margin: .1rem .05rem 0;
}
.box-calendar .pos .mask .info{
    width: .9rem;
}



/* carbon */
.target-year{
    display: flex;
    justify-content: center;
}
.target-year .width{
    display: flex;
    align-items: center;
    margin-left: 1.4rem;
}
.target-year .width:first-of-type{
    margin-left: 0;
}
.target-year .br{
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.target-year .br-bg{
    border: .01rem dashed rgba(44,98,251,.5);
    border-radius: 50%;
}
.target-year .br-bg .br2{
    width: 2.2rem;
    height: 2.2rem;
    border: .01rem dashed #2C62FB;
    border-radius: 50%;
}
.target-year .br-bg .br2 .bg{
    width: 1.68rem;
    height: 1.68rem;
    border: .26rem solid #cfdeff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.target-year .br-bg .icon-mbn{
    display: block;
    width: .55rem;
    height: .54rem;
    background: url("/CityEnvironment/images/detail/carbon/icon-mbn.png") no-repeat;
    background-size: 100%;
    margin: .1rem 0 .24rem;
}
.target-year .br-bg .year{
    display: block;
    font-size: .5rem;
    color: #2C62F6;
    font-family: DIN Alternate;
}
.target-year .text{
    font-size: .26rem;
    line-height: .5rem;
    color: #00055D;
    font-weight: 200;
    margin-left: .4rem;
}
.target-year .text strong{
    display: block;
    font-size: .36rem;
    font-weight: bold;
}

/* 案例 */
.case-detail-box{
    padding: .7rem 1.44rem 1.94rem;
}
.case-detail-box .box{
    padding: 0 .6rem .2rem;
    /*margin-top: .2rem;*/
}
.map-bg-box .box-map{
    position: relative;
    width: 2.8rem;
    height: 2.8rem;
    margin-top: -0.4rem;
}
.map-bg-box .box-map .map{
    width: 100%;
    height: 100%;
    background: transparent!important;
    position: relative;
}
.map-bg-box .map:before{
    content: '';
    width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.map-bg-box .box-map .btn-map{
    font-size: .14rem;
    color: #171717;
    line-height: .35rem;
    background: #FFFFFF;
    box-shadow: 0 .01rem .04rem 0 rgba(60,60,60,0.2);
    border-radius: .02rem;
    padding: 0 .2rem;
    position: absolute;
    bottom: 0;
    right: 0;
}
.amap-logo{
    display: none!important;
}

/* swiper */
.swiper-listBox{
    /*padding: 0 .15rem;*/
    /*width: calc(100% + 0.15rem);*/
    margin-left: -0.23rem;
    padding-top: .4rem;
}
.swiper-listBox .swiper-slide{height: .01rem} /* 随意指定一个height值即可 */
.swiper-listBox .swiper-slide-active { height:auto}
.swiper-listBox .slideBox{
    display: flex;
    /*align-items: center;*/
    justify-content: space-between;
}
.swiper-button-box{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border-top: 0.01rem dashed #BBCDF0;*/
    padding: .3rem 0 .2rem;
}
.swiper-button-box .swiper-button-next,
.swiper-button-box .swiper-button-prev{
    position: initial;
    font-size: .2rem;
    width: .4rem;
    height: .4rem;
    border: .01rem solid #000000;
    color: #000;
    border-radius: 50%;
    margin: 0;
}
.swiper-button-box .swiper-pagination-fraction{
    position: initial;
    width: auto;
    margin: 0 .3rem;
}
.swiper-button-box .swiper-button-next.swiper-button-disabled,
.swiper-button-box .swiper-button-prev.swiper-button-disabled{
    opacity: .1;
}
.swiper-button-box .pagination-btnBox{
    position: initial;
    width: auto;
    margin: 0 .2rem;
}
.swiper-button-box .swiper-pagination-bullet{
    background: #D9D9D9;
    opacity: 1;
}
.swiper-button-box .swiper-pagination-bullet-active{
    background: #000000;
}

.swiperTabBox{
    margin-right: .1rem;
    width: 40%;
}
.swiper-listImg, .swiper-listThumbnail{
    width: calc(100% - .01rem);
    /*width: calc(100% - .3rem);*/
    /*height: 100%;*/
    padding: 0 .23rem;
}
.swiper-listImg .swiper-slide{
    width: 6.36rem;
    height: 4.32rem;
    position: relative;
}
.swiper-listImg .swiper-slide:last-of-type{
    /*margin-right: 0;*/
}
.swiper-listImg .swiper-slide video,
.swiper-listImg .swiper-slide img{
    width: 100%;
    height: 100%;
    border-radius: .06rem;
    background: #000;
}
.swiper-listImg .swiper-slide img{
    object-fit: cover;
}
.swiper-listImg .swiper-slide .source-img{
    width: 100%;
    padding: .17rem 0;
    color: #FFFFFF;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .9) 100%);
    border-radius: 0 0 .08rem .08rem;
}
.swiper-listImg .swiper-slide .source-img p{
    font-size: .14rem;
    line-height: .2rem;
    text-align: center;
}


.swiper-listImg .swiper-button-next,
.swiper-listImg .swiper-button-prev{
    width: 0.46rem;
    height: 0.46rem;
    background: rgba(0, 143, 255, .5);
    border-radius: 50%;
    color: #fff;
}
.swiper-button-next:after,
.swiper-button-prev:after{
    font-size: .14rem;
}
.swiper-listImg .swiper-button-prev{
    left: 0;
}
.swiper-listImg .swiper-button-next{
    right: 0;
}

.swiper-listThumbnail{
    width: calc(100% - .16rem);
    margin-top: .2rem;
}
.swiper-listThumbnail .swiper-slide{
    width: .96rem;!important;
    height: .96rem;
    border-radius: .06rem;
    border: .02rem solid #fff;
    cursor: pointer;
    overflow: hidden;
}
.swiper-listThumbnail .swiper-slide:nth-of-type(5n){
    margin-right: 0!important;
}
.swiper-listThumbnail .swiper-slide video,
.swiper-listThumbnail .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*border-radius: .06rem;*/
}
.swiper-listThumbnail .swiper-slide-thumb-active{
    border: .02rem solid #0E5CFE;
}

.tab-container{
    width: calc(60% - 0.56rem);
}
.tab-container h4{
    font-size: .22rem;
    font-weight: bold;
    line-height: .36rem;
    color: #000;
    padding: 0 .14rem;
    margin-right: .2rem;
    margin-bottom: .1rem;
}
.tab-container h4.active{
    font-weight: bold;
    font-size: .24rem;
    color: #FEFEFE;
    background: radial-gradient( #5094FB 0%, #0B5AFE 100%), #000;
    border-radius: 0 .1rem .1rem 0;
}
.tab-container .content{
    border-radius: .04rem;
    border: .01rem solid #BBCDF0;
    padding: .14rem .2rem;
    font-size: .14rem;
    color: #000000;
    line-height: .26rem;
    max-height: 3.28rem;
    overflow-y: auto;
}
.tab-container .content div,
.tab-container .content p,
.tab-container .content span,
.tab-container .content strong{
    display: block;
    font-size: .14rem;
    color: #000000;
    line-height: .26rem;
    font-weight: normal;
}

.tab-container .tab-box .btn{
    display: flex;
}
.tab-container .tab-box .btn h4{
    /*cursor: pointer;*/
}
.tab-container .info-sources{
    margin-top: .2rem;
}
.tab-container .info-sources h4{
    padding: 0;
}
.tab-container .info-sources p{
    display: flex;
    margin-top: .04rem;
}
.tab-container .info-sources p:first-of-type{
    margin-top: 0;
}
.tab-container .info-sources strong{
    color: #7B7F81;
    width: 1rem;
}

/* 改版后暂时无用 */
.blueTitle{
    display: flex;
    align-items: flex-end;
}
.list-titleTab{
    margin-left: .4rem;
    display: flex;
    align-items: center;
}
.list-titleTab li{
    color: #000000;
    font-weight: bold;
    line-height: .38rem;
    border-radius: .2rem;
    border: .01rem solid #E6E6E6;
    padding: 0 .19rem;
    margin-left: .14rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.list-titleTab li:hover{
    background: #E6E6E6;
}
.list-titleTab li.active{
    color: #fff;
    background: #2F2F4F;
    border: .01rem solid #2F2F4F;
}
.list-titleTab li em{
    color: #999999;
    margin-left: .1rem;
}

.list-select{
    display: flex;
    align-items: center;
}
.list-select li{
    display: flex;
    align-items: center;
    margin-left: .4rem;
}
.list-select li:first-of-type{
    margin-left: 0;
}
.list-select li h6{
    font-weight: 300;
    line-height: .4rem;
    color: #596376;
}
.list-select li .txtsource{
    height: .4rem;
    min-width: 2rem;
    background: rgba(232,237,246,0.8);
    border-radius: .04rem;
    color: #596376;
    font-size: .14rem;
    padding: 0 .15rem;
}
.btnsource{
    border: none;
    line-height: .4rem;
    border-radius: .04rem;
    margin-left: .14rem;
    cursor: pointer;
    color: #fff;
    background: #2F2F4F;
    width: .8rem;
    text-align: center;
}

.box .box-content{
    margin-top: .5rem;
}
.box .box-content:nth-of-type(3){
    margin-top: .7rem;
}
.box .box-content:nth-of-type(4){
    margin-top: 1.4rem;
}
.box-content .t-title{
    font-weight: 400;
    font-size: .22rem;
    color: #2F2F4F;
    padding-bottom: .15rem;
    border-bottom: 0.01rem dashed #BBCDF0;
    margin-bottom: .3rem;
}

.box-video,
.box-content .tag-p{
    margin-left: 3.47rem;
}
.box-content .tag-p{
    margin-bottom: .24rem;

    font-size: .14rem;
    color: #000000;
    line-height: .26rem;
    margin-top: .14rem;
}
.box-content .tag-p p{
    font-size: .14rem;
    color: #000000;
    line-height: .26rem;
    /*margin-top: .14rem;*/
}
.box-content .tag-p p:first-of-type{
    margin-top: 0;
}
.box-video .video{
    height: 2.5rem;
}