@import "Head.css";
.container{
    background: #EEFCFE;
}

/* 物种统计Page */
.box-common{
    padding: 1.29rem .2rem 0;
}
.box-common .flex-wrap{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    padding-top: .17rem;
}
.box-common .flexBox{
    flex: 1;
}
.box-common .ct-center{
    flex: 2;
    margin: 0 .2rem 0 .16rem;
}

.box-common .br{
    margin-bottom: .2rem;
    padding-bottom: .23rem;
    border-radius: .14rem;
    background: rgba(40,174,165,0.05);
    position: relative;
}
.box-common .bg{
    background: #F2FCFC;
    border-radius: .14rem;
    border: 1px solid #12944E;
    margin: .15rem .2rem 0;
}

.box-common .title{
    width: calc(100% - .4rem);
    background: linear-gradient(180deg, rgba(0,113,86,.17), rgba(40,174,165,.17), rgba(255,255,255,.17));
    border: 1px solid #007156;
    border-bottom: none;
    border-radius: .2rem .2rem 0 0;
    padding: .16rem .18rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.box-common .title:after{
    content: "";
    width: 95%;
    height: .01rem;
    background: linear-gradient(90deg, transparent, #007156 100%);
    position: absolute;
    right: 0;
    bottom: 0;
}
.box-common .title:before{
    content: "";
    width: .24rem;
    height: .04rem;
    background: url(../images/statistics/title-dian.png) no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: -0.01rem;
    left: .18rem;
    z-index: 1;
}
.box-common .btn-tab{
    display: flex;
    align-items: center;
}
.box-common .btn-tab li{
    font-weight: normal;
    color: #007156;
    margin-left: .25rem;
    cursor: pointer;
}
.box-common .btn-tab li:first-of-type{
    margin-left: 0;
}
.box-common .title h3, .btn-tab li.active{
    font-weight: 900;
    color: #007156;
    position: relative;
}
.box-common .title .btn-seeMore{
    display: block;
    font-size: .14rem;
    color: #2AAFA6;
}
.box-common .title .reset{
    display: flex;
    align-items: center;
    font-size: .14rem;
    line-height: .14rem;
    color: #2AAFA6;
    font-weight: 400;
    cursor: pointer;
}
.box-common .title .reset .icon{
    display: block;
    width: .18rem;
    height: .18rem;
    background: url(../images/map/icon-refresh.png) no-repeat;
    background-size: 100%;
    margin-right: .04rem;
}
.box-common .title .line{
    display: none;
}


/* 物种统计 */

/* 生态现状 */
.numList{
    display: flex;
}

.totalNum{
    padding: .14rem .14rem .14rem .18rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.totalNum .num{
    font-weight: 500;
    color: #377E6D
}
.totalNum .num .item{
    font-weight: 500;
    font-size: .34rem;
    color: #007156;
    font-family: "HarmonyOSSansSCBold";
}
.totalNum .list{}
.totalNum .list li{
    min-width: 1.26rem;
    padding: .07rem .1rem;
    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));
    margin-top: .1rem;
}
.totalNum .list li:first-of-type{
    margin-top: 0;
}
.totalNum .list li span{
    font-size: .14rem;
    color: #377E6D;
}
.totalNum .list li .item{
    font-size: .18rem;
    color: #007156;
    font-weight: bold;
    font-style: italic;
    font-family: "HarmonyOSSansSCBold";
}

/* 物种分类 */
.list-classify .list{
    width: calc(100% - .4rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: .1rem .2rem .3rem;
}
.list-classify li{
    width: 50%;
    display: flex;
    justify-content: center;
    margin-top: .2rem;
}
.list-classify li .text{
    width: 1.23rem;
    height: 1.23rem;
    font-size: .14rem;
    color: #1D7C65;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.list-classify li .text:before{
    content: "";
    width: 100%;
    height: 100%;
    background: url(../images/statistics/bg-quan.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: spin 5s linear infinite;
}
.list-classify li .text .item{
    display: block;
    font-weight: bold;
    font-size: .21rem;
    line-height: .3rem;
    color: #007156;
    font-style: italic;
    font-family: "HarmonyOSSansSCBold";
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.tdt-container, .map-container{
    width: 100%;
    height: 100%;
}
.mark-detail-city{
    padding: .2rem .2rem .1rem;
}
.mark-detail-city .city-content .btn{
    color: #377E6D;
    background: linear-gradient(90deg, rgba(40,174,165,.3), rgba(176,237,233,.3), rgba(40,174,165,.3));
}
.box-legend{
    height: .72rem;
    position: absolute;
    right: .16rem;
    bottom: .74rem;
    z-index: 999;
    text-align: center;
}
.box-legend .bgcr{
    width: .3rem;
    height: 100%;
    /*background: linear-gradient(0deg, rgb(159, 244, 95), rgb(13, 91, 39));*/
    background: linear-gradient(0deg, 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));
}
.box-legend span{
    font-size: .14rem;
    font-weight: bold;
    color: #333;
}

/* 地区统计 */
.box-statistics .br70{
    /*height: calc(65% - .22rem);*/
    height: 7rem;
    border: 1px solid #12944E;
    overflow: hidden;
    padding-bottom: 0;
}
.box-statistics .br30{
    height: 3.07rem;
    /*height: calc(35% - .43rem);*/
}

.list-select{
    display: flex;
    position: absolute;
    right: .4rem;
    top: .3rem;
    z-index: 999;
}
.list-select select, .list-select .select{
    min-width: auto;
    width: 1.1rem;
    height: .2rem;
    font-size: .12rem;
    color: #007156;
    background: #E4F8F9 url(../images/statistics/icon-selectDown.png) no-repeat 95% center;
    border: 1px solid #28AEA5;
    margin-left: .08rem;
    padding: 0 .05rem;
    position: relative;
}
.list-select select:first-of-type{
    /*margin-left: 0;*/
}
.list-select .select{
    float: left;
}
.list-select .float-end{
    float: right;
}

.list-colorBlock{
    height: calc(100% - .74rem);
    overflow: hidden;
}
.list-colorBlock .list{
    height: calc(100% - .24rem);
    overflow-y: auto;
    padding: .18rem .2rem .06rem;
}
.list-colorBlock .list li{
    display: flex;
    align-items: center;
    position: relative;
}
.list-colorBlock .list li h5{
    min-width: 1.18rem;
    font-size: .14rem;
    line-height: .16rem;
    color: #1D7C65;
    margin-right: .12rem;
    text-align: right;
}
.list-colorBlock .list li .cr{
    width: calc(100% - 1.2rem);
    padding: .12rem 0;
    border-top: 1px dashed rgba(40,174,165,.2);
}
.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;
    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: linear-gradient(90deg, rgba(40,174,165,.3), rgba(176,237,233,.3), rgba(40,174,165,.3));*/
}
.list-colorBlock .list li:hover .mask,
.list-colorBlock .list li.active .mask{
    display: flex;
}


.box-statistics .ct-right .br{
    height: calc(100% - .43rem);
}
.box-statistics .ct-right .bg{
    height: calc(45% - .45rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.box-statistics .ct-right .bg:last-of-type{
    height: calc(55% - .45rem);
}
.box-statistics .ct-right h4{
    font-weight: bold;
    font-size: .18rem;
    line-height: .2rem;
    color: #1D7C65;
    text-align: center;
    padding: .18rem 0;
}
.box-statistics .ct-right .box-ets{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .14rem 0 .2rem;
}
.box-statistics .ct-right .line-ets{
    width: 2.14rem;
    height: 2.14rem;
    background: rgba(40,174,165,.05);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-statistics .ct-right .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(40,174,165,.3);
}
.box-statistics .ct-right .ets{
    width: 1.59rem;
    height: 1.59rem;
    /*background: #000;*/
    /*border-radius: 50%;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.box-statistics .ct-right .line-ets h5{
    width: .77rem;
    height: .77rem;
    line-height: .77rem;
    background: rgba(40,174,165,.1);
    border-radius: 50%;
    font-weight: 500;
    font-size: .3rem;
    color: #007156;
    text-align: center;
}


.list-legend{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 .13rem .18rem;
    margin-top: -0.1rem;
    /*max-height: 1.2rem;*/
    /*overflow-y: auto;*/
}
.list-legend li{
    margin: .1rem .05rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(50% - .32rem);
    min-height: .28rem;
    padding: 0 .09rem 0 .11rem;
    background: linear-gradient(90deg, rgba(40,174,165,.3), rgba(176,237,233,.3), rgba(40,174,165,.3));
}
.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: .14rem;
    line-height: .16rem;
    color: #1D7C65;
    font-style: normal;
}
.list-legend li i{
    font-weight: bold;
    font-size: .18rem;
    color: #007156;
    font-family: "HarmonyOSSansSCBold";
}



/* 物种随手拍 */
.box-snapshot{
    height: calc(100% - 1.29rem);
}
.box-snapshot .flex-wrap{
    height: calc(100% - .17rem);
}
.box-snapshot .flexBox{
    height: 100%;
}
.box-snapshot .ct-left .br{
    height: calc(100% - .43rem);
}
.box-snapshot .br100{
    height: calc(100% - .22rem);
    border: 1px solid #12944E;
    overflow: hidden;
    padding-bottom: 0;
}

.box-snapshot .box-tb{
    overflow-y: auto;
    height: calc(100% - .74rem);
}
.box-snapshot .box-tb .tb{
    padding-top: .23rem;
}
.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(125,255,253,.4) 60%, #ECFFFF);
}
.box-snapshot .box-tb th{
    text-align: center;
    font-weight: 500;
    font-size: .12rem;
    line-height: .2rem;
    color: rgba(55,126,109,.5);
}
.box-snapshot .box-tb td{
    padding: .1rem 0 .12rem;
    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{
    margin: .1rem 0 .2rem;
}

.box-snapshot .box-tb .pic{
    width: .4rem;
    height: .4rem;
    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{
    text-align: center;
    font-size: .18rem;
}
.box-snapshot .box-tb .name{
    color: #1D7C65;
}
.box-snapshot .box-tb .num{
    font-weight: bold;
    color: #007156;
}
.box-snapshot .box-tb .photos{
    display: table;
    line-height: .24rem;
    background: #00A88B;
    border-radius: .12rem;
    font-weight: 500;
    font-size: .12rem;
    color: #FEFFFF;
    padding: 0 .15rem;
    margin: 0 auto;
}

.box-snapshot .ct-right .br{
    height: calc(100% - .43rem);
}
.box-snapshot .ct-right .bg{
    height: calc(50% - .45rem);
    overflow: hidden;
}
.title-pics{
    width: 1.75rem;
    height: .22rem;
    background: linear-gradient(90deg, rgba(242,252,252,0.17), rgba(42,175,166,0.17), rgba(242,252,252,0.17));
    border-radius: .1rem;
    font-weight: 500;
    font-size: .14rem;
    line-height: .22rem;
    color: #2AAFA6;
    text-align: center;
    margin: .18rem auto 0;
}
.list-pics{
    height: calc(100% - .6rem);
    overflow-y: scroll;
    padding: 0 .19rem .2rem;
    display: flex;
    flex-wrap: wrap;
}
.list-pics li{
    width: calc(33.33% - .18rem);
    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%;
}

/* map */
.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%;
}

.amap-info-contentContainer:hover .amap-info-outer,
.box-snapshot .amap-info-content{
    background: transparent;
    box-shadow: none;
}
.box-snapshot .amap-info-close{
    width: .3rem;
    height: .3rem;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-snapshot .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-snapshot .common-open-mask{*/
    /*width: 3.4rem;*/
/*}*/
.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;
}
/*.mask-ssBox .time{*/
    /*font-size: .14rem;*/
    /*line-height: .16rem;*/
    /*color: #999999;*/
/*}*/