@charset "UTF-8";
body{
    font-family: "微软雅黑";
}
.feate_box{
    width: 100%;
    height: 410px;
    background-image:url(../img/feback.png);
    background-size: 100% 340px;
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 1px;
    color: #fff;
    position: relative;
    box-shadow: 2px 2px 11px 2px rgba(145,181,215,0.15);
}
.box_mnd{
    width: 100%;
    height: 70px;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    z-index: 9;
    .type_mb_km{
        width: 1440px;
        height: 70px;
        display: flex;
        margin: 0 auto;
        align-items: center;
        .onm_type{
            width: 180px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            color: #666666;
            cursor: pointer;
            margin-right: 30px;

        }
        


    }

}
.active_type{
    color: #007bff;
    border-bottom: 2px solid #007bff;
    font-weight: bold;

}
.ol-popups {
    position: absolute;
    background-image: url(../img/115.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height:auto;
    border-radius: 5px;
    bottom:20px;
    left: -175px;
    
}
.popup-content {
    width:350px;
}
.cont_fe_bxo{
    width: 100%;
    background-color:#f9fafb ;
    padding-bottom: 30px;
    background-image: url(../img/about3.png);
    background-repeat: no-repeat;
    background-position: top right;

    .cont_all_map{
        width: 1440px;
        margin: 0 auto;
        .map_box{
            width: 1440px;
            height: 750px;
            border-radius: 10px;
            overflow: hidden;
        }

        .length{
            /* width: 40px;
            height: 40px;
            border-radius: 4px;
            background: linear-gradient( 180deg, #DFECFC 0%, #B7D3FB 100%);
            border-radius: 8px 8px 8px 8px;
            text-align: center;
            position: absolute;
            bottom: 40px;
            right: 20px;
            cursor: pointer;
            z-index: 9; */


            width: 44px;
            height: 44px;
            text-align: center;
            position: absolute;
            bottom: 40px;
            right: 20px;
            cursor: pointer;
            z-index: 9;
            line-height: 17px;
            color: #236DB4;
            font-size: 15px;

            background: linear-gradient( 180deg, #DDEEFF 0%, #FFFFFF 100%);
            box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.2);
            border-radius: 10px;
            border: 2px solid #FFFFFF;
        }
        .bxhmsh{
            width: 148px;
            height: 69px;
            display: flex;
            text-align: center;
            position: absolute;
            bottom: 80px;
            right: 70px;
            cursor: pointer;
            z-index: 9;
            background: rgba(255,255,255,0.9);
            box-shadow: 0px 4px 20px 0px rgba(41,44,49,0.2);
            border-radius: 8px;
            transition: width .36s ease-in-out;
            overflow: hidden;
        }
        .bxhta{
            width: 56px;
            height: 52px;
            position: relative;
            margin-top: 8px;
            margin-left: 8px;
            div{
                position: absolute;
                bottom: 1px;
                font-size: 13px;
                width:30px;
                right: 1px;
                text-align: center;
                background: rgba(0,0,0,0.4);
                color: #fff;
            }

            img{
                width: 100%;
                height: 100%;
                border: 1px solid transparent;
            }
        }
        .active_bxhta{
            
            img{
                width: 100%;
                height: 100%;
                border: 1px solid #337EE8;
            }
            div{
                background-color: #3385FF;
            }
        }


        .earth_list{
            width: 330px;
            height: 710px;
            margin-top: 20px;
            position: absolute;
            top: 0px;
            left: 20px;
            .earth_title{
                width: 100%;
                height: 36px;
                line-height: 36px;
                padding-left: 30px;
                /* text-align: center; */
                font-size: 16px;
                font-weight: bold;
                color: #0262D6;
                /* background: linear-gradient( 180deg, #91D4F6 0%, #DBEFFF 100%); */
                border-radius: 0px;
                background-image: url(../img/tslmk.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            .earth_filter{
                width: 100%;
                height: 245px;
                /* background: #fff; */
                background: rgba(248,249,254,0.95);
                padding: 10px 15px 0px;
                font-size: 15px;
                .el-radio{
                    margin-bottom: 0;
                }
                .bxgtrse{
                    display: flex;
                    line-height: 32px;
                    margin-top: 8px;
                    justify-content: space-between;
                    .el-select{
                        .el-select__wrapper{
                            box-shadow: none;
                            border-bottom: 1px solid #e2e2e2;
                            border-radius: 0;
                        }
                    }
                }

            }
            .earth_lins{
                width: 100%;
                height:calc(100% - 300px);
                background-color: rgba(255,255,255,0.8);
                border-radius: 0 0 10px 10px;
                overflow: auto;
                
                .earth_list_item{
                    display: flex;
                    border-bottom: 1px solid #E6E6E6;
                    cursor: pointer;
                    padding: 4px 15px;
                    width: 100%;
                    .zjitem{
                        width: 60px;
                        line-height: 66px;
                        font-size: 26px;
                        font-weight: bold;
                        text-align: center;
                    }
                }
                .earth_list_itemAc{
                    background-color: #F5FCFF;
                }
                /* ::-webkit-scrollbar {
                    width: 2px;    
                    height: 2px; 
                    background: #333; 
                }
                ::-webkit-scrollbar-track{
                    background-color: #333 !important;
                } */

               
            }
            ::-webkit-scrollbar {
                width: 6px;    /* 垂直滚动条宽度 */
                height:6px;   /* 水平滚动条高度 */
                /* background: rgba(0,0,0,0.1) !important; */
            }
            ::-webkit-scrollbar-track{
                background: #f1f1f1;
                border-radius: 4px;
            }
            ::-webkit-scrollbar-thumb {
                background: #8b8b8b;
                border-radius: 6px;
            }
            ::-webkit-scrollbar-thumb:hover {
                background: #727272;
            }
        }

        .line_ku_h{
            width: 100%;
            height: 300px;
        
 
            margin-top: 20px;
            padding: 12px 16px;
   

            background: #FFFFFF;
            box-shadow: 5px 1px 13px 0px rgba(204,227,255,0.6);
            border-radius: 16px 16px 16px 16px;
            border: 1px solid #D6E8FF;

            .line_ku_h_title{
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: space-between;
            }
            .el-table{
                .el-table__header{
                    .el-table__cell{
                        background: #F2F6FC;
                    }
                }
            }

        }



            .xnttre{
                width: 86px;
                height: 60px;
                
                
                border-radius: 10px;
                /* border: 1px solid #FFFFFF; */
                color: #236DB4;
                text-align: center;
                position: absolute;
                top: 20px;
                right: 20px;
                z-index: 9;
                font-size: 15px;
                cursor: pointer;
                /* background: linear-gradient( 180deg, #DFECFC 0%, #B7D3FB 100%); */


                
                border: 2px solid #FFFFFF;
                background: linear-gradient( 180deg, #DDEEFF 0%, #FFFFFF 100%);
                box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.2);

            }
            .xnttre2{
                top: 180px;
            }
            .xnttre3{
                top: 90px;
            }
            .xnttre4{
                /* background: #EFF6FF; */
                /* box-shadow: inset 2px 2px 10px 0px rgba(55,99,170,0.6), inset -2px -2px 10px 0px rgba(255,255,255,0.3); */
                border-radius: 10px;
                border: 2px solid #FFFFFF;
                background: #FFFFFF;
                box-shadow: inset 2px 2px 10px 0px #ADC9E6, inset -2px -2px 10px 0px #ADC9E6;
                
            }
            .contbox_lsdz{
                width: 325px;
                height: 300px;
                padding: 15px;
                position: absolute;
                right: 120px;
                top: 20px;
                background-color: #fff;
                z-index: 7;
                border-radius: 5px;
                font-size: 15px;
                .el-radio{
                    margin-bottom: 0;
                }

                .fw_boxtb{
                    width: calc((100% - 30px) / 4);
                    height: 26px;
                    /* background-color: #fff; */
                    border-radius: 4px;
                    text-align: center;
                    line-height: 24px;
                    margin-left: 5px;
                    cursor: pointer;
                    font-size: 15px;
                    color: #666666;
                    background: #fff;
                    border: 1px solid #CECECE;
                    margin-top: 3px;
                }
                .fw_boxtb:nth-child(1){
                    margin-left: 0;
                }
                .fwActive{
                    /* border: 1px solid #3AA0F8; */
                    /* background: #E7A11E;
                    color: #fff !important; */
                    background: linear-gradient( 180deg, #DDEEFF 0%, #A3CBFF 100%);
                    color: #0262D6 !important;
                    border: 1px solid #DDEEFF;
                }

                .el-input__wrapper {
                    border: 1px solid #B1C9E3;
                    box-shadow: 0px 2px 8px 0px rgba(186,207,236,0.8);
                }
                .el-select__wrapper{
                    border: 1px solid #B1C9E3;
                    box-shadow: 0px 2px 8px 0px rgba(186,207,236,0.8);
                }

                .zdyst{
                    margin-top: -5px;
                    .el-input__inner{
                    border: none;
                    height: 24px;
                    line-height: 24px;
                    border-radius: 0;
                    padding: 0px;
                    text-align: center;
                    color: #666;
                    
                    font-size: 16px;
                    &::placeholder {
                        font-size: 12px;
                        color: #666666;
                    }
                    }
                    .el-input__wrapper{
                        box-shadow: none;
                        padding: 0px;
                        background-color: transparent;
                        color: #fff;
                        border: none;
                        box-shadow: none;
                    }

                }
            }
            .bbbhtxz{
                width: 100%;
                height: 34px;
                /* background: linear-gradient( 180deg, #DFECFC 0%, #B7D3FB 100%); */
                border-radius: 8px;
                text-align: center;
                line-height: 34px;
                font-size: 16px;
                color: #337EE8;
                margin-top: 15px;
                cursor: pointer;
                background: linear-gradient( 180deg, #DDEEFF 0%, #A3CBFF 100%);
                box-shadow: 0px 1px 8px 0px #81B1EB;

            }


            .legthinfo5{
                width:0px;
                height: 45px;
                background-color: rgba(255, 255, 255, 0.9);
                position: absolute;
                bottom: 24px;
                right: 68px;
                border-radius: 4px;
                display: flex;
                justify-content: space-between;
                transition: width .36s ease-in-out;
                overflow: hidden;
            }
            .aclegthinfo5{
                width: 300px;
            }
    }

    .ol-zoom{
        display: none;
    }
    

    .xbnn_kmut{
        display: flex;
        margin-right: 25px;
        cursor: pointer;
        color: #565656;
        .el-icon{
            line-height: 38px;
            &:hover{
                color: #337EE8;
            }
        }
        .xbnn_kmut_name:hover{
            color: #337EE8;
        }
        
    }
    /* .xbnn_kmut:hover{
        text-decoration: none;
        color: #337EE8;
    } */
    .xbnn_kmut img{
        width: 14px;
        height: 14px;
        margin:10px 5px 0 4px;
    }

}



.tools_boxk{
    width: 44px;
    height: 44px;
    position: absolute;
    right: 20px;
    bottom: 222px;
    z-index: 8;
    text-align: center;
    
    background: linear-gradient( 180deg, #DDEEFF 0%, #FFFFFF 100%);
    border-radius: 8px 8px 8px 8px;
    font-size: 14px;
    cursor: pointer;
    color: #606266;
}

.cjmyrt{
    width: 70px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    box-shadow: 0px 4px 20px 0px rgba(41,44,49,0.2);
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    position: absolute;
    right: 90px;
    bottom: 100px;
    z-index: 8;
    background-color: #FFF;

}

.active_cjmyrt{
    color: #337ee8;
}


.ol-viewport{
    .ol-tooltip-static{
    display: flex;
    background-color: #fff;
    color:#fff;
    border-radius: 2px;
    border: 1px solid red;

        .close-btn{
            width: 12px;
            height: 12px;
            cursor: pointer;
            margin: 10px 3px 0 3px;
        }
    }
}



.layerclass{
    width: 44px;
    height: 44px;
    text-align: center;
    position: absolute;
    bottom: 156px;
    right: 20px;
    cursor: pointer;
    z-index: 9;
    line-height: 17px;
    color: #236DB4;
    font-size: 15px;

    background: linear-gradient( 180deg, #DDEEFF 0%, #FFFFFF 100%);
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
    border: 2px solid #FFFFFF;
}
.layer_box{
    width: 160px;
    height: 175px;
    position: absolute;
    bottom: 88px;
    right: 70px;
    border-radius: 8px;
    padding: 10px 12px;
    z-index: 8;
    background: rgba(255,255,255,0.8);
    box-shadow: 0px 4px 20px 0px rgba(41,44,49,0.2);
    border: 1px solid #FFFFFF;
    .el-checkbox{
        margin-bottom:0px ;
    }
}