/*@import "Head.css";*/

/* 物种统计Page */
.box-common{}
.box-common .br{
    border: 1px solid rgba(51,51,51,0.1);
    border-radius: .14rem;
    padding: .16rem .1rem;
    margin-bottom: .1rem;
    position: relative;
}
.box-common .bg{
    /*background: #F2FCFC;*/
    /*border-radius: .14rem;*/
    /*border: 1px solid #12944E;*/
    /*margin: .15rem .2rem 0;*/
}

.box-common .title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-left: .08rem;
    padding-bottom: .15rem;
}
.box-common .title:before{
    content: "";
    width: .02rem;
    height: .14rem;
    background: #4992FE;
    position: absolute;
    left: 0;
    top: .01rem;
}

.box-common .box-tabBtn{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.box-common .list-tab{
    display: flex;
    align-items: center;
    margin: .1rem 0 .13rem;
}
.box-common .list-tab li{
    font-size: .14rem;
    line-height: .3rem;
    background: rgba(73,146,254, 0.1);
    border-radius: .5rem;
    padding: 0 .2rem;
    margin-left: .1rem;
    cursor: pointer;
}
.box-common .list-tab li:first-of-type{
    margin-left: 0;
}
.box-common .list-tab li.active{
    font-weight: 900;
    color: #fff;
    background: rgba(73,146,254,1);
}

.box-common .title h3, .box-common .title h3 *{
    font-weight: 900;
    position: relative;
}
.box-common .btn-seeMore{
    display: block;
    font-size: .14rem;
    color: #4992FE;
}
.box-common .reset{
    display: flex;
    align-items: center;
    font-size: .14rem;
    line-height: .14rem;
    color: #4992FE;
    font-weight: 400;
    cursor: pointer;
}
.box-common .reset .icon{
    display: block;
    width: .18rem;
    height: .18rem;
    background: url(../images/map/icon-refreshBlue.png) no-repeat;
    background-size: 100%;
    margin-right: .04rem;
}


/* 生态现状 */
.numList{
    display: flex;
}
.totalNum{
    /*padding: .26rem .14rem .18rem 0;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.totalNum .num{
    width: 50%;
    height: .88rem;
    border-radius: 0 .22rem .22rem 0;
    background: #28AEA5;
    position: relative;
    margin-left: -.1rem;
}
.totalNum .num .bgs{
    /*display: none;*/
    width: 100%;
}
.totalNum .total{
    width: calc(100% - .2rem);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: .16rem;
    line-height: .2rem;
    font-weight: 500;
    color: #F9FDFD;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: .2rem;
}
.totalNum .num .item{
    font-weight: 500;
    font-size: .34rem;
    line-height: .44rem;
    color: #F9FDFD;
    font-family: "HarmonyOSSansSCBold";
}
.totalNum .list{
    width: 46%;
}
.totalNum .list li{
    min-width: 1.16rem;
    padding: .16rem .16rem .1rem .16rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: .28rem;
    background: linear-gradient(90deg, rgba(40,174,165,.3), rgba(176,237,233,.3), rgba(40,174,165,.3));
    border-radius: .12rem;
    margin-top: .2rem;
}
.totalNum .list li:first-of-type{
    margin-top: 0;
}
.totalNum .list li span{
    font-size: .14rem;
    line-height: .14rem;
    color: #999;
    position: relative;
    padding-top: .14rem;
}
.totalNum .list li span:before{
    content: "";
    display: block;
    position: absolute;
}
.totalNum .list li .i-animal:before{
    width: .4rem;
    height: .4rem;
    background: url("../images/statistics/nb-animal.png") no-repeat;
    background-size: 100%;
    top: -0.36rem;
}
.totalNum .list li .i-plant:before{
    width: .34rem;
    height: .34rem;
    background: url("../images/statistics/nb-plant.png") no-repeat;
    background-size: 100%;
    top: -0.3rem;
}
.totalNum .list li .item{
    font-size: .26rem;
    font-weight: bold;
    font-style: italic;
    font-family: "HarmonyOSSansSCBold";
}

/* 物种分类 */
.list-classify .list{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .06rem;
}
.list-classify li{
    width: calc(25% - .045rem);
    /*background: rgba(40,174,165,.1);*/
    background: rgba(255,255,255,1);
    border-radius: .04rem;
    padding: .03rem 0 .08rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.list-classify li .icon{
    width: .2rem;
    height: .2rem;
    object-fit: contain;
    margin-right: .03rem;
    margin-top: .05rem;
}
.list-classify li .text{
    font-size: .11rem;
    color: #999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.list-classify li .text .item{
    display: block;
    font-weight: bold;
    font-size: .14rem;
    line-height: .26rem;
    font-style: italic;
    font-family: "HarmonyOSSansSCBold";
}


.tdt-container, .map-container{
    width: 100%;
    height: 100%;
}
.tdt-infowindow-content{
    padding: 0!important;
}
.mark-detail-city{
    padding: .2rem .2rem .1rem;
}
.mark-detail-city .city-title {
    display: flex;
    align-items: flex-end;
    padding-bottom: .1rem;
    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-content {
    margin-top: .10rem;
    text-align: center;
}
.mark-detail-city .city-content .btn{
    display: inline-block;
    font-size: .14rem;
    line-height: .16rem;
    font-weight: bold;
    color: #377E6D;
    background: linear-gradient(90deg, rgba(40,174,165,.3), rgba(176,237,233,.3), rgba(40,174,165,.3));
    border-radius: .04rem;
    padding: .10rem .13rem .08rem;
    /*margin-bottom: .10rem;*/
}
.mark-detail-city .city-content .btn strong {
    font-size: .18rem;
    font-weight: bold;
    color: #377E6D;
    margin-right: .05rem;
}

.box-legend{
    display: flex;
    align-items: center;
}
.box-legend .bgcr{
    width: .72rem;
    height: .15rem;
    background: linear-gradient(-90deg, rgb(159, 244, 95), rgb(127, 215, 128), rgb(72, 205, 114), rgb(39, 182, 84), rgb(18, 151, 63), rgb(17, 126, 54), rgb(13, 91, 39));
    margin: 0 .05rem;
}
.box-legend span{
    font-size: .12rem;
    font-weight: bold;
    color: #78797a;
}

/* 地区统计 */
.box-statistics .br70{
    height: calc(100% - 3.94rem);
    border: 1px solid #12944E;
    overflow: hidden;
    padding-bottom: 0;
}
.box-statistics .br30{
    height: 2.16rem;
}

/* select自定义搜索 */

.list-select .form-filed{
    display: flex;
}
.list-select .form-filed .float-end{
    float: none;
}
.list-select .chosen-container{
    min-width: calc(50% - .1rem);
}
.list-select .chosen-container .chosen-results li{
    font-size: .14rem;
}

.list-select.pos{
    position: absolute;
    right: 4.7rem;
    top: 0;
}
.list-select.pos .chosen-container{
    min-width: 1.2rem;
    background: #fff;
}

.list-colorBlock{
    height: calc(100% - .28rem);
    overflow: hidden;
}
.list-colorBlock .list{
    height: 100%;
    overflow-y: auto;
    padding: .12rem .1rem 0 0;
}
.list-colorBlock .list li{
    display: flex;
    align-items: center;
    position: relative;
}
.list-colorBlock .list li h5{
    min-width: .7rem;
    font-size: .14rem;
    line-height: .16rem;
    margin-right: .12rem;
    text-align: right;
}
.list-colorBlock .list li .cr{
    width: calc(100% - .82rem);
    padding: .12rem 0;
    border-top: 1px dashed rgba(40,174,165,.2);
    position: relative;
}
.list-colorBlock .list li:first-of-type .cr{
    border-top: none;
}
.list-colorBlock .list li .cr .sbg{
    width: 100%;
    height: .13rem;
    background: #28AEA5;
    position: relative;
}

.list-colorBlock .mask{
    display: none;
    width: max-content;
    position: absolute;
    /*bottom: 0.19rem;*/
    bottom: 0.32rem;
    left: 50%;
    transform: translate(-50%, 0);
    align-items: center;
    background: rgba(0,168,139,.2);
    padding: .02rem .06rem;
    border-radius: .02rem;
    z-index: 1;
}
.list-colorBlock .mask:before{
    content: "";
    width: 0;
    height: .06rem;
    border: .06rem solid;
    border-color: rgba(0,168,139,.2) transparent transparent transparent;
    position: absolute;
    bottom: -.18rem;
    left: 50%;
    transform: translate(-50%, 0);
}
.list-colorBlock .mask h6,
.list-colorBlock .mask p{
    font-size: .12rem;
    line-height: .14rem;
    /*color: #1D7C65;*/
}
.list-colorBlock .mask p{
    font-weight: bold;
}

.list-colorBlock .list li:hover,
.list-colorBlock .list li.active{
    /*background: rgba(40,174,165,.1);*/
    background: rgba(255,255,255,1);
}
.list-colorBlock .list li:hover .mask,
.list-colorBlock .list li.active .mask{
    display: flex;
}


.box-statistics .box-redList .bg{
    /*height: calc(55% - .45rem);*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.box-statistics .box-tab{
    background: rgba(73,146,254,0.05);
    border-radius: .5rem;
    display: flex;
    align-items: center;
}
.box-statistics .box-tab h4{
    font-weight: bold;
    font-size: .12rem;
    line-height: .24rem;
    text-align: center;
    padding: 0 .1rem;
    border-radius: .5rem;
    cursor: pointer;
}
.box-statistics .box-tab .active{
    color: #fff;
    background: rgba(73,146,254,1);
}

.box-statistics .box-redList .box-ets{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .14rem 0 .2rem;
}
.box-statistics .box-redList .line-ets{
    width: 2.14rem;
    height: 2.14rem;
    background: rgba(73,146,254,.05);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-statistics .box-redList .line-ets:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    border: 1px solid rgba(73,146,254,.3);
}
.box-statistics .box-redList .ets{
    width: 1.59rem;
    height: 1.59rem;
    /*background: #000;*/
    /*border-radius: 50%;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.box-statistics .box-redList .line-ets h5{
    width: .77rem;
    height: .77rem;
    background: rgba(73,146,254,.1);
    border-radius: 50%;
    font-weight: 500;
    font-size: .26rem;
    line-height: .36rem;
    color: rgba(73,146,254,1);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.box-statistics .box-redList .line-ets h5 span{
    width: max-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tdt-top .tdt-control{
    position: fixed;
    right: .8rem;
    bottom: .16rem;
    display: flex;
}
.tdt-top .tdt-control a{
    border-bottom: none;
    border-right: 1px solid #e5e5e5;
}
.tdt-bar a.tdt-disabled, .tdt-bar a:hover{
    border-bottom: none!important;
}

.list-legend{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 .1rem;
    gap: .1rem;
}
.list-legend li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(50% - .3rem);
    min-height: .28rem;
    padding: 0 .09rem 0 .11rem;
    background: rgba(255,255,255,1);
}
.list-legend li .bk{
    display: flex;
    align-items: center;

}
.list-legend li .bk b{
    display: block;
    width: .12rem;
    height: .12rem;
    margin-right: .07rem;
}
.list-legend li .bk em{
    font-size: .12rem;
    line-height: .16rem;
}
.list-legend li i{
    font-weight: bold;
    font-family: "HarmonyOSSansSCBold";
}



/* 物种随手拍 */
.box-snapshot{}

.box-snapshot .box-tb{
    overflow-y: auto;
    height: calc(100% - .74rem);
}
.box-snapshot .box-tb .tb{}
.box-snapshot .box-tb tr{
    position: relative;
}
.box-snapshot .box-tb tbody tr:after{
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, #ECFFFF, rgba(73,146,254,.4) 60%, #ECFFFF);
}
.box-snapshot .box-tb th{
    text-align: center;
    font-weight: 500;
    font-size: .12rem;
    line-height: .2rem;
    color: rgba(73,146,254,.5);
}
.box-snapshot .box-tb td{
    padding: .06rem 0 .08rem;
    cursor: pointer;
}
.box-snapshot .box-tb tr.active{
    background: linear-gradient(90deg, rgba(242,252,252,0.17), rgba(42,175,166,0.17), rgba(242,252,252,0.17));
}
.box-snapshot .box-tb .pager-wrap{
    padding-bottom: 0;
}

.box-snapshot .box-tb .pic{
    width: .3rem;
    height: .3rem;
    background: #F3F3F1;
    border-radius: 50%;
    border: 1px solid #D1D1D1;
    margin: 0 auto;
    overflow: hidden;
}
.box-snapshot .box-tb .pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box-snapshot .box-tb .name, .box-snapshot .box-tb .num{
    font-size: .14rem;
    text-align: center;
}
.box-snapshot .box-tb .num{
    font-weight: bold;
    color: rgba(73,146,254,1);
}
.box-snapshot .box-tb .photos{
    display: table;
    width: .3rem;
    height: .26rem;
    background: url(../images/icon/icon-photo.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
    transition: 800ms;
    position: relative;
    /*line-height: .24rem;*/
    /*background: #00A88B;*/
    /*border-radius: .12rem;*/
    /*font-weight: 500;*/
    /*font-size: .12rem;*/
    /*color: #FEFFFF;*/
    /*padding: 0 .15rem;*/

}
.box-snapshot .box-tb .photos:hover{
    width: .88rem;
    height: .31rem;
    background: url(../images/icon/icon-photo-hover.png) no-repeat;
    background-size: 100%;
}
.box-snapshot .box-tb .photos:hover:before{
    content: "照片集";
    position: absolute;
    top: .07rem;
    left: .08rem;
    font-size: .12rem;
    line-height: .24rem;
    color: #fff;
}

.box-snapshot .ct-right .br{
    height: calc(100% - .43rem);
}
.box-snapshot .ct-right .bg{
    height: calc(50% - .45rem);
    overflow: hidden;
}

.list-pics{
    height: 4.48rem;
    overflow: hidden;
}
.list-pics .list{
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: .1rem;
}
.list-pics li{
    width: calc(33.33% - .068rem);
    height: .76rem;
    border-radius: .06rem;
    /*margin: .18rem .09rem 0;*/
    overflow: hidden;
}
.list-pics li a, .list-pics li img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* map */
.amap-info-content{
    width: 3rem;
    padding: 0;
    border-radius: .24rem;
}
/*.amap-info-contentContainer:hover .amap-info-outer,*/
.amap-info-content .amap-info-close{
    width: .3rem;
    height: .3rem;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    right: .1rem!important;
    top: .12rem;
}
.amap-info-content .amap-info-close:after{
    display: block;
    content: "";
    width: .14rem;
    height: .14rem;
    background: url(/public/static/images/pages/map/close.png) no-repeat center center;
}


.box-wetlandPark {
    position: relative;
    cursor: pointer;
}
.box-wetlandPark .imgBox {
    width: .3rem;
    height: .3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: .02rem solid #fff;
    border-radius: 50%;
    /*box-shadow: 0 .02rem .05rem rgba(0,168,139,.5);*/
}
.box-wetlandPark .imgBox:after {
    display: none;
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -.06rem;
    transform: translate(-50%, 0);
    border-left: .02rem solid transparent;
    border-right: .02rem solid transparent;
    border-top: .05rem solid #fff;
}
.box-wetlandPark .imgBoxBig {
    width: .45rem;
    height: .45rem;
}
.box-wetlandPark .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.mask-ssBox{
    /*width: 3rem;*/
    text-align: left;
    background: #fff;
    border-radius: .24rem;
    overflow: hidden;
    box-shadow: 0 0 .1rem #cbcbcd;
}
.mask-ssBox .cover{
    width: 100%;
    max-height: 3rem;
}

.mask-ssBox .content{
    padding: .12rem .2rem;
}
.mask-ssBox .user-info{
    display: flex;
    align-items: center;
    margin-bottom: .1rem;
}
.user-info img{
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    object-fit: cover;
    margin-right: .1rem;
}
.user-info .name{
    font-weight: 500;
    font-size: .16rem;
    line-height: .18rem;
    color: #333333;
    width: calc(100% - 1.1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-info a{
    display: inline-block;
    line-height: .3rem;
    border-radius: .08rem;
    cursor: pointer;
    padding: 0 .12rem;
    font-size: .14rem;
    margin-left: .1rem;
    color: #FFFFFF;
    background: #1A4CFF;
}

.mask-ssBox .ct-result{
    font-size: .14rem;
    line-height: .3rem;
    color: #333333;
}
.mask-ssBox .box-tag{
    margin: .03rem 0;
}
.mask-ssBox .box-tag .item{
    display: inline-block;
    line-height: .24rem;
    font-size: .14rem;
    color: #6D6D6D;
    background: #F4F4F4;
    border-radius: .04rem;
    padding: 0 .1rem;
}