@import "Head.css";

/* 地图-左侧侧边栏 */
.page-of-air .side-panel{
    height: calc(100% - 1.29rem)!important;
    background: #EEFCFE;
    z-index: 1;
}
.page-of-air .side-panel .side-wrap{
    border: 1px solid #E3F8F9;
}
.page-of-air .side-panel .side-wrap .side-con {
    padding: 0 .2rem;
    background: transparent;
}
.page-of-air .side-panel .side-wrap .side-con .side-search {
    position: relative;
    margin-top: .2rem;
}
.page-of-air .side-panel .side-wrap .side-search .form-filed {
    margin-bottom: .24rem;
}

.page-of-air .side-panel .side-wrap .side-search .complex .input-icon,
.page-of-air .side-panel .side-wrap .side-search .complex .input{
    height: auto;
    line-height: .38rem;
    background: transparent;
    font-size: .14rem;
    color: #00A88B;
}

.page-of-air .side-panel .side-wrap .side-search .complex .input-icon {
    border: 1px solid #00A88B;
    border-right: none;
    background: #E4F8F9;
    border-radius: .08rem 0 0 .08rem;
}
.page-of-air .side-panel .side-wrap .side-search .complex .input {
    border: none;
}
.page-of-air .side-panel .side-wrap .side-search .complex .button {
    min-width: 1rem;
    line-height: .4rem;
    background: #00A88B;
    border-radius: 0 .08rem .08rem 0;
}

.box-select .form-filed{
    /*display: flex;*/
}
.box-select .form-filed .select{
    min-width: auto;
    width: calc(33% - 0.07rem)!important;
    line-height: .26rem;
    height: .26rem;
    padding: 0 .1rem;
    font-weight: 500;
    font-size: .14rem;
    color: #007156;
    background: #E4F8F9 url(../images/statistics/icon-selectDown.png) no-repeat 95% center;
    border: 1px solid #28AEA5;
    border-radius: .02rem;
    margin-left: .1rem;
    float: left;
}
.box-select .form-filed .float-end{
    float: right;
}
.box-select .form-filed #country{
    margin-left: 0;
}

.box-typeList {}

.box-typeList .tab-btn {
    width: calc(100% - .85rem);
    display: flex;
    align-items: flex-end;
    margin-bottom: -.1rem;
}
.box-typeList .tab-btn li {
    cursor: pointer;
    position: relative;
    width: 20%;
    height: .24rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: .05rem;
}
.box-typeList .tab-btn li:first-of-type{
    margin-left: 0;
}
.box-typeList .tab-btn li:before,
.box-typeList .tab-btn li:first-of-type:after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    /*background: rgba(0,168,139, .2);*/
    background: #BDEBE7;
    transform: skewX(25deg);
}
.box-typeList .tab-btn li:first-of-type:before{
    border-radius: .22rem 0 0 0;
}
.box-typeList .tab-btn li:first-of-type:after{
    transform: none;
    width: .12rem;
    height: .24rem;
    border-radius: .12rem 0 0 0;
}
.box-typeList .tab-btn h3,
.box-typeList .reset {
    font-weight: bold;
    font-size: .14rem;
    line-height: .14rem;
    color: #00A88B;
    font-family: Microsoft YaHei;
}

.box-typeList .tab-btn h3 {
    position: relative;
}
.box-typeList .reset {
    display: flex;
    align-items: center;
    font-weight: 400;
    cursor: pointer;
}
.box-typeList .reset .icon {
    display: block;
    width: .18rem;
    height: .18rem;
    background: url(../images/map/icon-refresh.png) no-repeat;
    background-size: 100%;
    margin-right: .04rem;
}

.box-typeList .tab-btn li.active:before,
.box-typeList .tab-btn li.active:first-of-type:after{
    height: .33rem;
    background: rgba(0,168,139, 1);
}

.box-typeList .tab-btn li.active h3 {
    line-height: .33rem;
    color: #FFFFFF;
    margin-bottom: .1rem;
}

.box-typeList .list-checkbox {
    padding: .08rem 0 .24rem 0;
    background: #F2FCFC;
    /*border-radius: 0 0 .12rem .12rem;*/
    margin-top: .1rem;
    border: 1px solid #28AEA5;
}
.box-typeList .item {
    margin-top: .2rem;
    width: 100%;
}
.box-typeList .item:first-of-type {
    margin-top: 0;
}

.box-typeList .title {
    cursor: pointer;
}
.box-typeList .title h5 {
    display: flex;
    align-items: center;
    font-size: .14rem;
    line-height: .28rem;
    padding-left: .09rem;
    color: #00A88B;
    border-left: .03rem solid rgba(0,168,139, 1);
    background: rgba(0,168,139, .05);
}
.box-typeList .title .icon {
    display: block;
    width: .05rem;
    height: .05rem;
    border-width: .02rem .02rem 0 0;
    transform: rotate(-45deg);
    margin-left: .08rem;
    margin-top: .04rem;
    border: rgba(0,168,139, 1) solid;
    border-width: .02rem .02rem 0 0;
}

.box-typeList .title .iconClose{
    transform: rotate(135deg);
    margin-top: -.04rem;
}

.box-typeList .animalSwiper,
.box-typeList .plantSwiper {}

.box-typeList .scroll {
    display: flex;
    flex-wrap: wrap;
}

.box-typeList .checkbox {
    width: 25%;
    margin-top: .14rem;
    margin-right: 0;
    cursor: pointer;
    position: relative;
}
.box-typeList .checkbox .pos {
    display: none;
    position: absolute;
    right: -.08rem;
    top: -.07rem;
}
.box-typeList .checkbox .img {
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    background: #E6F8F6;
    border: .02rem solid #D1D1D1;
    margin: 0 auto;
    display: block;
}
.box-typeList .checkbox p {
    font-size: .13rem;
    color: #3D3D3D;
    line-height: .18rem;
    margin-top: .11rem;
    text-align: center;
    padding: 0 .04rem;
}
.box-typeList .checkboxActive .img {
    border: .02rem solid #00A88B;
    box-shadow: 0 .02rem .2rem rgba(0,168,139,.9);
}
.box-typeList .checkboxActive p {
    color: #007156;
    /*font-weight: bold;*/
}

.page-of-air .side-panel .side-wrap .side-source{
    padding-bottom: .3rem;
}

.box-letterList{
    position: absolute;
    left: 4.6rem;
    top: .44rem;
    display: flex;
    align-items: center;
}
.box-letterList li{
    display: flex;
    align-items: center;
    justify-content: center;
    width: .42rem;
    height: .42rem;
    border: .02rem solid transparent;
    border-radius: 50% 0 50% 50%;
    font-weight: 500;
    font-size: .16rem;
    color: #FFFFFF;
    margin-left: .06rem;
    cursor: pointer;
    transition: .5s;
}
.box-letterList li:first-of-type{
    margin-left: 0;
}
.box-letterList .logo{
    width: .58rem;
    height: .58rem;
    margin-right: .14rem;
    background: #fff;
    border-radius: 50%;
}
.box-letterList .logo img{
    width: .35rem;
}

.iuco-bg1{ background: #000; }
.iuco-bg2{ background: #512372; }
.iuco-bg4{ background: #EB2F2D; }
.iuco-bg8{ background: #EC823A; }
.iuco-bg16{ background: #F4F136; }
.iuco-bg32{ background: #93CE58; }
.iuco-bg64{ background: #1AAF55; }
.iuco-bg128{ background: #666666; }
.iuco-bg256{ background: #808080; }

.iuco-color1{ color: #000; }
.iuco-color2{ color: #512372; }
.iuco-color4{ color: #EB2F2D; }
.iuco-color8{ color: #EC823A; }
.iuco-color16{ color: #F4F136; }
.iuco-color32{ color: #93CE58; }
.iuco-color64{ color: #1AAF55; }
.iuco-color128{ color: #666666; }
.iuco-color256{ color: #808080; }

.box-letterList li.active{
    width: .58rem;
    height: .58rem;
    border: .02rem solid #fff;
    box-shadow: 0 .03rem .07rem 0 rgba(0,0,0,0.5);
}
.box-letterList li.logo.active{
    background: #fff;
}

.box-cbList{
    width: 3.28rem;
    position: absolute;
    bottom: .3rem;
    left: 4.45rem;
    z-index: 1;
    background: #EEFCFE;
    border-radius: .12rem .12rem .04rem .04rem;
    padding: 0 0 .14rem;
}
.box-cbList h4{
    padding: 0 .1rem;
    line-height: .32rem;
    background: #00A88B;
    border-radius: .12rem .12rem 0 0;
    font-weight: 500;
    font-size: .14rem;
    color: #FFFFFF;
}
.box-cbList .list{
    padding: .11rem .22rem 0;
    display: flex;
}
.box-cbList .item{
    margin-left: .2rem;
}
.box-cbList .item:first-of-type{
    min-width: 1.6rem;
    margin-left: 0;
}
.box-cbList .c-checkbox{
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: .08rem 0;
}
.box-cbList .c-checkbox strong{
    display: block;
    font-size: .14rem;
    line-height: .16rem;
    color: #00A88B;
    margin-left: .1rem;
}
.box-cbList .c-checkbox input[type=radio],
.box-cbList .c-checkbox input[type=checkbox]{
    width: .14rem;
    height: .14rem;
    position: relative;
}
.box-cbList .c-checkbox input[type=radio]:before,
.box-cbList .c-checkbox input[type=checkbox]:before{
    content: "";
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: .02rem;
    background: #EEFCFE;
    border: 1px solid #2CA264;
    position: absolute;
    top: 0;
    left: 0;
}
.box-cbList .c-checkbox input[type=radio]:checked:after,
.box-cbList .c-checkbox input[type=checkbox]:checked:after{
    background-color: #2CA264;
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    width: 0.12rem;
    line-height: 0.12rem;
    color: #fff;
    text-align: center;
    border: 1px solid #2CA264;
    border-radius: .02rem;
    font-size: .12rem;
}

.box-cbList .c-checkbox input[type=radio],
.box-cbList .c-checkbox input[type=radio]:before,
.box-cbList .c-checkbox input[type=radio]:checked:after{
    border-radius: 50%;
}

.box-cbList .c-list{
    border-top: 1px solid rgba(0,168,139,.2);
    padding-left: .24rem;
}


/* 数据来源 */
.side-panel .data-sources {
    position: absolute;
    left: 4.52rem;
    bottom: 0;
    /*width: max-content;*/
    width: 3.06rem;
    background: #fafcff;
    padding: .07rem .14rem;
    border-radius: .05rem;
    margin-bottom: .18rem;
}
.side-panel .data-sources p {
    font-size: .12rem;
    color: #78797a;
    line-height: .22rem;
}


.page-of-air .side-panel .side-wrap .pager-wrap{
    margin-top: .2rem;
    background: rgba(0,168,139,.2);
}


/* 公共样式 */
.page-of-air .section{
    z-index: 0;
}
.map-sidebar-right .select-parent {
    width: 1.68rem;
}
.select-parent .select-title {
    font-size: .16rem;
}

.page-of-air .map-container {
    left: auto !important;
    right: 0;
}
.page-of-air .map-type {
    right: .2rem;
    bottom: 1.19rem;
    padding: .04rem .1rem .07rem;
}
.page-of-air .map-type .map-tool {
    padding: 0;
}


/* 打点 */
.marker{
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    border: .02rem solid #fff;
    overflow: hidden;
}
.custom-marker {
    background: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    font-size: .08rem;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 .02rem .05rem rgba(0,0,0,0.2);
}
.custom-marker .name{
    text-align: center;
}
.custom-marker .number{
    /*margin-top: .02rem;*/
}

.custom-markerImg .img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 弹窗 */
.common-open-mask{
    /*max-width: 268px;*/
    background: #FFFFFF;
    box-shadow: 0 .02rem .1rem 0 rgba(0,0,15,0.3);
    border-radius: .12rem;
    padding: .3rem .3rem .18rem .3rem;
    position: relative;
}
.common-open-mask .btn-close {
    width: 0.14rem;
    height: 0.14rem;
    background: url(/public/static/images/pages/map/close.png) no-repeat center center;
    position: absolute;
    top: .12rem;
    right: .1rem;
    cursor: pointer;
}
.box-mapMask {
    display: flex;
}
.box-mapMask .box-cover{
    width: 1.8rem;
    position: relative;
}
.box-mapMask .box-cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box-mapMask .box-cover .iuco{
    display: flex;
    align-items: center;
    justify-content: center;
    width: .4rem;
    height: .4rem;
    border-radius: 50% 0 50% 50%;
    font-weight: 500;
    font-size: .16rem;
    color: #FFFFFF;
    position: absolute;
    top: -.2rem;
    left: -.2rem;
}

.box-mapMask .box-info {
    margin-left: .2rem;
}
.box-mapMask h3 {
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: .2rem;
    color: #333333;
    line-height: .28rem;
    text-align: left;
    width: max-content;
}
.box-mapMask .ct {
    padding: .12rem 0 0;
    /*border-bottom: 1px solid rgba(224,244,223,.4);*/
}
.box-mapMask .ct p,
.box-mapMask .btn {
    font-family: Microsoft YaHei;
    font-size: .16rem;
    line-height: .24rem;
    color: #666666;
}
.box-mapMask .ct p {
    margin-top: .04rem;
    text-align: left;
    width: max-content;
}
.box-mapMask .ct p span {
    font-weight: bold;
    color: #262e3d;
}
.box-mapMask .ct p .wuzhong-color{
    color: #59B22B;
}
.box-mapMask .iuco-type{
    margin-top: .1rem;
}
.box-mapMask .iuco-type p{
    color: #262e3d;
}

.box-mapMask .btn {
    display: block;
    padding: .12rem 0 .02rem;
    text-align: center;
    color: #247cd2;
}
.box-mapMask .seal {
    width: .68rem;
    height: .68rem;
    border-radius: 50%;
}
.box-mapMask .ellipsis2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}