/* 地图-左侧侧边栏 */
.box-mapTitle{
    height: 1.52rem;
    background: url(../images/sidebar/banner-map.png) no-repeat;
    background-size: cover;
}

.brand-container{
    position: absolute;
    top: 0;
    height: 100%;
    overflow: auto;
    background: #fff;
    z-index: 1;
}
.float-world2{
    margin-bottom: 0;
}
.float-world2 .select{
    float: left;
    margin-bottom: .15rem;
    width: calc(50% - 0.05rem)!important;
}

.box-theme{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: .24rem 0;
}
.box-theme .btn-jump{
    line-height: .14rem;
    font-size: .13rem;
    color: #3E6EFF;
    cursor: pointer;
}
.box-theme h3, .box-theme .h3{
    font-weight: bold;
    font-size: .18rem;
    line-height: .20rem;
    color: #434A57;
}

.box-theme .h3:hover{
    color: #3E6EFF;
    text-decoration: underline;
}

.box-target{
    display: flex;
    align-items: center;
    width: calc(50% - .08rem);
    line-height: .40rem;
    margin-right: .16rem;
}
.box-target .SDG, .cBox-select .select{
    font-family: Arial;
    font-weight: bold;
    font-size: .16rem;
    line-height: .4rem;
    color: #434A57;
    margin-left: .20rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.box-target .SDG{
    margin-left: 0;
}
.box-target .icon-arrow, .cBox-select:after{
    display: block;
    margin-left: .08rem;
    width: .08rem;
    height: .08rem;
    border: #434A57 solid;
    border-width: .02rem .02rem 0 0;
    transform: rotate(-45deg);
    margin-top: .05rem;
    transition: .5s;
}
.box-target .arrowClose, .cBox-select:after{
    transform: rotate(135deg);
    margin-bottom: .05rem;
    margin-top: 0;
}

.cBox-select{
    margin-left: .20rem;
    position: relative;
}
.cBox-select .select{
    width: auto;
    min-width: auto;
    padding: 0;
    margin-left: 0;
    border: none;
    background: #fff;
    position: relative;
    z-index: 1;
}
.cBox-select:after{
    content: '';
    position: absolute;
    right: -.16rem;
    top: .01rem;
}

/* 可持续发展 */
.icon-listBox{
    margin-top: .10rem;
    margin-bottom: .10rem;
    background: #F6F7F8;
    border-radius: .12rem;
    padding: .02rem .12rem .16rem;
}
.list-target{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.list-target .checkbox{
    float: left;
    width: calc(20% - .11rem);
    height: .55rem;
    margin-top: .14rem;
    margin-right: .13rem;
    cursor: pointer;
    position: relative;
    background: #fff;
}
.list-target .checkbox:nth-of-type(5n){
    margin-right: 0;
}
.list-target .checkbox .pos{
    position: absolute;
    right: -.08rem;
    top: -.07rem;
}
.list-target .checkbox .icon{
    border-radius: 50%;
}
.list-target .checkbox .icon-checkbox {
    border: 1px solid #EDEDED;
    background: #fff;
}
.list-target .img{
    width: 100%;
    height: 100%;
}


/* table */
.table-con{
    margin-top: .14rem;
}
.table-list tr:nth-of-type(even){
    background: #F5F6F7;
}
.table-list tr td *{
    font-size: .14rem;
    line-height: .2rem;
}
.table-list tr td .name{
    position: relative;
}
.table-list tr td .name h6{
    width: 1.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table-list tr td .fullName{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    font-weight: normal;
    background: #fff;
    z-index: 1;
}
.table-list tr td .name:hover .fullName{
    display: block;
}

.table-list .num{
    display: flex;
    justify-content: center;
    align-items: end;
}
.table-list .num .unit{
    font-size: .10rem;
    color: #8F97A7;
}
.table-list.point tr{
    cursor: pointer;
}


.common-table{
    width: 100%;
}
.common-table thead tr{
    background: #E1F2FD;
}
.common-table tr th,
.common-table tr td{
    font-size: .14rem;
    line-height: .20rem;
    color: #0D203E;
}

.common-table tr th{
    padding: .18rem .05rem;
}
.common-table tr td{
    color: #333;
    padding: .08rem 0;
    text-align: center;
}
.common-table tbody tr:nth-of-type(even){
    background: #F2FAFF;
}

.common-table tr .logo{
    width: .40rem;
    height: .40rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.common-table tr .logo img{
    max-width: 100%;
    max-height: 100%;
}

.box-sort{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.box-sort h6{
    font-size: .14rem;
    font-weight: bold;
}
.box-sort .sort{
    display: flex;
    flex-direction: column;
    margin-left: .04rem;
}
.box-sort .sort b{
    display: block;
    width: .08rem;
    height: .08rem;
}
.box-sort .sort .icon-up{
    background: url(../images/sidebar/icon-up.png) no-repeat;
    background-size: 100%;
}
.box-sort .sort .icon-down{
    background: url(../images/sidebar/icon-down.png) no-repeat;
    background-size: 100%;
}
.box-sort .sort .noclick{
    opacity: .3;
}

.box-common-table  tr td{
    line-height: .40rem;
}
.box-common-table tbody img{
    max-width: .40rem!important;
    max-height: .40rem!important;

}

/* fenye */
.pager-wrap{}
.box-table .pager-wrap{
    background: #E1F2FD;
}

/* 地图 */
.garbage-map-spot{
    width: .25rem;
    height: .25rem;
}

.garbage-map-spot.icon-1, .garbage-map-spot.icon-start{
    width: .32rem;
    height: .32rem;
}
.garbage-map-spot-sun.icon-1, .garbage-map-spot.icon-story, .garbage-map-spot.icon-shiping{  /** 点亮 **/
    width: .46rem;
    height: .44rem;
}
.garbage-map-spot.icon-9, .garbage-map-spot.icon9-s{
    width: .30rem;
    height: .30rem;
}

.garbage-map-spot.icon-1, .garbage-map-spot-sun.icon-1{
    background: url(../images/map/icon-sun.png) no-repeat;
    background-size: 100%;
}

.garbage-map-spot.icon-3, .garbage-map-spot.icon-6{ /** 村镇 **/
    width: .50rem;
    height: .50rem;
    background: url(../images/map/icon6.png) no-repeat;
    background-size: 100%;
}
.garbage-map-spot.icon-9, .garbage-map-spot.icon-15{ /** 紫色 **/
    background: url(../images/map/icon1.png) no-repeat;
    background-size: 100%;
}
.garbage-map-spot.icon-12, .garbage-map-spot.icon-18{ /** 蓝色 **/
    background: url(../images/map/icon2.png) no-repeat;
    background-size: 100%;
}

.garbage-map-spot.icon-21, .garbage-map-spot.icon-23{ /** 灰色 **/
    width: .30rem;
    height: .32rem;
    background: url(../images/map/icon3.png) no-repeat;
    background-size: 100%;
}

.garbage-map-spot.icon9-s, .garbage-map-spot.icon15-s{ /** 紫色标杆 **/
    background: url(../images/map/icon1-s.png) no-repeat;
    background-size: 100%;
}
.garbage-map-spot.icon12-s, .garbage-map-spot.icon18-s{ /** 蓝色标杆 **/
    background: url(../images/map/icon2-s.png) no-repeat;
    background-size: 100%;
}

.garbage-map-spot.icon-jh{
    width: .30rem;
    height: .30rem;
    background-color: #20a1dd;
    border-radius: .50rem;
    box-shadow: rgba(1,61,88,.7) 0 .03rem .22rem .01rem;
    text-align: center;
    font-size: .07rem;
    padding: .04rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.garbage-map-spot.icon-jh .number{
    font-size: inherit;
    color: inherit;
    line-height: .12rem;
}
.garbage-map-spot.icon-jh .number:last-of-type{
    font-weight: bold;
}

.garbage-map-spot.icon-point{
    background: url(../images/map/icon-point.png) no-repeat;
    background-size: 100%;
}
.garbage-map-spot.icon-point-grey{
    background: url(../images/map/icon-point-grey.png) no-repeat;
    background-size: 100%;
}
.garbage-map-spot.icon-start{
    background: url(../images/map/icon-start.png) no-repeat;
    background-size: 100%;
}
.garbage-map-spot.icon-story{
    background: url(../images/map/icon-story.png) no-repeat;
    background-size: 100%;
}
.garbage-map-spot.icon-grey{
    width: .40rem;
    height: .40rem;
    background: url(../images/map/icon-grey.png) no-repeat;
    background-size: 100%;
}
.garbage-map-spot.icon-shiping{
    background: url(../images/map/icon-shiping.png) no-repeat;
    background-size: 100%;
}


/* 播放 */
.box-menu{
    border-radius: .04rem;
    display: flex;
    align-items: center;
    margin: .10rem 0 0 .10rem;
}
.box-menu .icon-pause{
    display: block;
    width: .26rem;
    height: .26rem;
    background: url(../images/map/icon-vPause.png) no-repeat;
    background-size: 100%;
    margin-left: .10rem;
    cursor: pointer;
}
.box-menu .icon-play{
    background: url(../images/map/icon-vPlay.png) no-repeat;
    background-size: 100%;
}


/* 图例 */
.map-legend{
    border-radius: .05rem;
    z-index: 1;
}
.map-legend .title{
    margin: 0;
    padding: 0.03rem 0;
    cursor: pointer;
}
.map-legend .list{}
.map-legend .list img{
    height: .51rem;
}
.map-legend .list p{
    font-size: .12rem;
    color: #78797a;
    line-height: .22rem;
}
.map-legend .list p:first-of-type{
    margin-left: -.10rem;
}
.map-legend .list p:last-of-type{
    margin-right: -.14rem;
}
.map-legend h3{
    display: inline-block;
    color: #484848;
    font-size: .12rem;
    line-height: .14rem;
    font-weight: normal;
}

.box-legend{
    display: none;
    padding: .04rem .12rem .17rem!important;
    position: absolute;
    bottom: 0;
    left: .6rem;
    background: #fff;
    border-radius: .05rem;
}

.video-logo{
    position: absolute;
    left: .9rem;
    bottom: .16rem;
    display: flex;
}
.video-logo a{
    display: block;
    width: .42rem;
    height: .42rem;
    margin-left: .1rem;
    border-radius: .05rem;
    box-shadow: 0 .01rem .08rem 0 rgba(0, 0, 0, 0.14);
}
.video-logo img{
    width: 100%;
    height: 100%;
    border-radius: .05rem;
}
.video-logo .btn-caseFill{
    width: max-content;
    height: 100%;
    font-size: .14rem;
    line-height: .42rem;
    color: #333333;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 .12rem;
}
.video-logo .btn-caseFill:before{
    content: "";
    display: block;
    width: .2rem;
    height: .2rem;
    background: url("../images/case-btnFill.png") no-repeat;
    background-size: 100%;
    margin-right: .05rem;
}
.video-logo .btn-caseFill:hover{
    color: #5F95FE;
}

/* map-mask */
.amap-info-content {
    padding: 0;
}
.amap-info-sharp{
    display: none;
}
.mapboxgl-popup-content{
    padding: 0;
}
.mapboxgl-popup-close-button{
    color: #c3c3c3;
    font-size: .24rem;
    right: .05rem;
}
.mapboxgl-popup{
    top: -.20rem;
}


.common-open-mask{
    background: #fff;
    border-radius: .06rem;
    max-width: 3.10rem;
    position: relative;
    text-align: center;
}

/* map */
.common-open-mask .mask-content, .mark-detail .mark-title{
    padding: .20rem .22rem .15rem;
    text-align: left;
    margin-right: 0;
}
.common-open-mask .mask-content{
    padding: .20rem .22rem .10rem;
}
.common-open-mask .name, .mark-detail .mark-title h4{
    font-size: .20rem;
    line-height: .26rem;
    font-weight: bold;
    color: #333333;
    margin-right: .05rem;
    padding-top: 0;
    font-family: initial;
}
.common-open-mask .data-flex-box{
    margin-top: .10rem;
    overflow: hidden;
}
.common-open-mask p{
    font-size: .14rem;
    color: #596477;
    line-height: .24rem;
    margin: 0;
    font-weight: inherit;
}
.common-open-mask p.source{
    font-size: .12rem;
}
.common-open-mask p strong{
    font-size: .14rem;
    color: #596477;
}

.common-open-mask .landBox{
    margin-top: 0;
    padding: .1rem 0;
    font-size: .14rem;
    line-height: .22rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 1s;
    cursor: pointer;
    color: #333;
}
.common-open-mask .icon-bg{
    width: .22rem;
    height: .22rem;
    background: rgba(76,152,234,0.05);
    border-radius: 50%;
    margin-right: .07rem;
    position: relative;
}
.common-open-mask .icon-bg b{
    width: .16rem;
    height: .16rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.common-open-mask .icon-bg .land{
    background: url(/MapMining/images/icon-land.png) no-repeat;
    background-size: 100%;
}

.common-open-mask .btn .no-click{
    color: #d5d5d5;
    cursor: initial;
}
.common-open-mask .btn, .info-link-div{
    border-top: 1px solid #F3F3F2;
    padding: .15rem 0;
    display: flex;
    justify-content: center;
}
.common-open-mask .btn a, .mark-detail .mark-content .info-link{
    display: block;
    font-size: .14rem;
    line-height: .16rem;
    color: #333333;
    text-align: center;
    margin: 0 .15rem;
    cursor: pointer;
}
.mark-detail .mark-content .info-link{
    width: max-content;
    margin: 0;
}


.common-open-mask .btnBlue{
    padding: 0;
}
.common-open-mask .btnBlue a{
    display: block;
    transition: 1s;
    width: calc(50% - 1px);
    border-left: 1px solid #e5e5e5;
    margin: 0;
    padding: .14rem 0;
}
.common-open-mask .btnBlue a:first-of-type{
    border-left: none;
}
.common-open-mask .btnBlue a:hover {
    font-size: .15rem;
    color: #3e6eff;
    background: rgba(62,110,255,.1);
    text-shadow: .01rem .02rem .06rem 0 rgba(0,0,0,.4);
}

/* 统计 */
.mask-content-operate{
    min-width: 3rem;
    padding: .02rem .12rem .08rem;
    text-align: center;
}
.mask-content-operate .mask-title, .mask-content-progress .mask-title{
    font-size: .20rem;
    color: #333333;
    font-weight: bold;
    padding: .15rem 0;
    line-height: .26rem;
}

.mask-content-operate .mask-num{
    display: block;
    background: #6EC451;
    border-radius: .08rem;
    margin-bottom: .05rem;
    padding: 0 .10rem;
}
.mask-content-operate .mask-num strong{
    display: block;
    font-size: .22rem;
    font-weight: bold;
    line-height: .42rem;
    color: #534c4c;
}
.mask-content-operate .mask-total{
    font-size: .14rem;
    line-height: .28rem;
    color: #333;
}
.mask-content-operate .mask-total b{
    font-size: .12rem;
    color: #999999;
    font-weight: normal;
}

.amap-info-content .ets{
    text-align: left;
}
.amap-info-content .legend-list{
    padding: .08rem 0;
    line-height: .29rem;
    background: #F7F7F7;
    border-radius: 0 0 .08rem .08rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.amap-info-content .legend-list li{
    margin: 0 .13rem;
    display: flex;
    align-items: center;
}
.amap-info-content .legend-list li p{
    font-size: .12rem;
    color: #999999;
}
.amap-info-content .legend-list li b{
    display: block;
    width: .10rem;
    height: .10rem;
    border-radius: .02rem;
    margin-right: .07rem;
}
.amap-info-content .legend-list li b.orange{
    background: #F0D396;
}
.amap-info-content .legend-list li b.blue{
    background: #88C2F8;
}


.mark-detail-city .city-title{
    display: flex;
    align-items: flex-end;
    margin: 0 -.22rem;
    padding: 0 .22rem .10rem;
    border-bottom: 1px solid #DBDEE2;
}
.mark-detail-city .city-title h4{
    font-size: .22rem;
    line-height: .24rem;
    font-weight: bold;
    color: #000000;
    margin-right: .10rem;
}
.mark-detail-city .city-title span {
    font-size: .16rem;
    line-height: .18rem;
    font-weight: bold;
    color: #000000;
}
.mark-detail-city .city-content{
    margin-top: .10rem;
    text-align: center;
}
.mark-detail-city .city-content .btn {
    font-size: .14rem;
    line-height: .16rem;
    color: #000;
    padding: .10rem .13rem .08rem;
    background: #FA9C38;
    border-radius: .04rem;
    font-weight: bold;
    margin-bottom: .10rem;
    display: inline-block;
}
.mark-detail-city .city-content .btn strong{
    font-size: .18rem;
    font-weight: bold;
    margin-right: .05rem;
}
.mark-detail-city .city-content p{
    font-size: .12rem;
    color: #000000;
    line-height: .18rem;
    margin: 0;
}


/* map-进展 */
.css_info{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
}
.box-cuboid{
    width: .25rem;
    position: relative;
    bottom: .30rem;
}
.cuboid, .cuboid .bg{
    width: .18rem;
    position: absolute;
}
.cuboid{
    bottom: .15rem;
    left: .035rem;
    transform-style: preserve-3d; /* 使得所有子元素在3D空间中呈现 */
    transform: rotateX(-30deg) rotateY(30deg);
}
.cuboid .bg{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .08rem;
    text-align: center;
}
.cuboid .top, .cuboid .btm{
    height: .18rem;
}
.cuboid .top {
    transform: rotateX(90deg) translateZ(.09rem);
    box-shadow: -.01rem -.01rem .10rem rgba(0, 0, 0, .1);
}
.cuboid .left {
    transform: rotateY(-90deg) translateZ(.09rem);
}
.cuboid .right {
    transform: rotateY(90deg) translateZ(.09rem);
}
.cuboid .front {
    transform: rotateY(0deg) translateZ(.09rem);
    box-shadow: -.02rem -.02rem .10rem rgba(0, 0, 0, .1);
}
.cuboid .back {
    transform: rotateY(180deg) translateZ(.09rem);
}

.long-cuboid .top{
    box-shadow: -.01rem 0 .20rem rgba(0, 0, 0, .1);
}
.long-cuboid .front {
    box-shadow: -.01rem -.01rem .10rem rgba(0, 0, 0, .1);
}

/* 全球 */
.box-cuboidWorld{
    width: .15rem;
    bottom: 0;
}
.box-cuboidWorld .cuboid,
.box-cuboidWorld .cuboid .bg{
    width: .08rem;
}
.box-cuboidWorld .cuboid .top, .box-cuboidWorld .cuboid .btm{
    height: .09rem;
}
.box-cuboidWorld .cuboid .top {
    transform: rotateX(90deg) translateZ(.04rem);
}
.box-cuboidWorld .cuboid .left {
    transform: rotateY(-90deg) translateZ(.04rem);
}
.box-cuboidWorld .cuboid .right {
    transform: rotateY(90deg) translateZ(.04rem);
}
.box-cuboidWorld .cuboid .front {
    transform: rotateY(0deg) translateZ(.04rem);
}
.box-cuboidWorld .cuboid .back {
    transform: rotateY(180deg) translateZ(.04rem);
}

/* mask-进展 */
.mask-content-progress{
    min-width: 3.24rem;
}
.mask-content-progress .mask-title{
    padding: .20rem 0 .13rem;
}
.mask-content-progress .mask-total{
    font-size: .12rem;
    color: #333333;
}
.mask-content-progress .ets{
    padding: 0 .20rem;
    width: calc(100% - .40rem);
    height: 2rem;
    margin: .15rem 0 .20rem;
    text-align: left;
}
.mask-content-progress .btn-detail{
    display: block;
    font-size: .14rem;
    color: #247CD2;
    line-height: .40rem;
    background: #F5FAFF;
    border-radius: 0 0 .08rem .08rem;
}
#missingCredential{
    display: none;
}