.map-target{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    // align-content: space-between;
    gap: 20px;
}
.map-container{
    width: 660PX;
    height: 520PX;
    position: relative;
    margin: 0 auto;
    #cq-contianer,
    #dialog-map_1,
    #dialog-map_2,
    #dialog-map_3,
    #dialog-map_4,
    #dialog-map_5,
    #dialog-map_6,
    #dialog-map_7,
    #dialog-map_8,
    #dialog-map_9,
    #dialog-map_10,
    #dialog-map_11,
    #dialog-map_12,
    #dialog-map_13,
    #dialog-map_all,
    #cq-contianer_1,
    #cq-contianer_2,
    #cq-contianer_3,
    #cq-contianer_4,
    #cq-contianer_5,
    #cq-contianer_6,
    #cq-contianer_7,
    #cq-contianer_8,
    #cq-contianer_9,
    #cq-contianer_10,
    #cq-contianer_11,
    #cq-contianer_12,
    #cq-contianer_13, 
    #cq-contianer_all {
        position: absolute;
        left:2PX;
        top: 6PX;
        width: 100%;
        height: 100%;
        z-index: 3;
    }
    #main9-contianer,
    #main9-contianer_1,
    #main9-contianer_2,
    #main9-contianer_3,
    #main9-contianer_4,
    #main9-contianer_5,
    #main9-contianer_6,
    #main9-contianer_7,
    #main9-contianer_8,
    #main9-contianer_9,
    #main9-contianer_10,
    #main9-contianer_11,
    #main9-contianer_12,
    #main9-contianer_13,
    #main9-contianer_all,
    #main9-dialog_1,
    #main9-dialog_2,
    #main9-dialog_3,
    #main9-dialog_4,
    #main9-dialog_5,
    #main9-dialog_6,
    #main9-dialog_7,
    #main9-dialog_8,
    #main9-dialog_9,
    #main9-dialog_10,
    #main9-dialog_11,
    #main9-dialog_12,
    #main9-dialog_13,
    #main9-dialog_all{
        position: absolute;
        width: 190PX;
        height: 240PX;
        top: 6PX;
        left: 82PX;
        z-index: 4;
        .ljxq {
            z-index: 990;
            background: url("~@/assets/img/bigScreen/ljxq1.png") no-repeat;
            background-size: 100%;
            width: 75PX;
            height: 26PX;
            display: inline-block;
            position: absolute;
            top: 66PX;
            left: -50%;
            cursor: pointer;
            &::before {
                position: absolute;
                content: '';
                left: 8PX;
                top: 11PX;
                width: 8PX;
                height: 8PX;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
            }
        }
        

        .ljxq::after {
            z-index: 990;
            content: "";
            display: inline-block;
            width: 110PX;
            height: 1PX;
            background-image: linear-gradient(to right, white 0%, white 50%, transparent 50%);
            background-size: 8px 1px;
            background-repeat: repeat-x;
            position: absolute;
            left: 75PX;
            top: 14PX;
        }

        .gxq {
            z-index: 999;
            background: url("~@/assets/img/bigScreen/gxq1.png") no-repeat;
            background-size: 100%;
            width: 75PX;
            height: 26PX;
            display: inline-block;
            position: absolute;
            top: 120PX;
            left: -50%;
            cursor: pointer;
            &::before {
                position: absolute;
                content: '';
                left: 8PX;
                top: 11PX;
                width: 8PX;
                height: 8PX;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
            }
        }
        
        .gxq::after {
            z-index: 999;
            content: "";
            display: inline-block;
            width: 60PX;
            height: 1PX;
            background-image: linear-gradient(to right, white 0%, white 50%, transparent 50%);
            background-size: 8px 1px;
            background-repeat: repeat-x;
            position: absolute;
            left: 75PX;
            top: 14PX;
        }
        .grade-A {
            &::before {
                background-color: #20A367;
            }
        }
        .grade-B {
            &::before {
                background-color: #3877B2;
            }
        }
        .grade-C {
            &::before {
                background-color: #E3C428;
            }
        }
        .grade-D {
            &::before {
                background-color: #E49317;
            }
        }
        .grade-E {
            &::before {
                background-color: #B04332;
            }
        }
    }
    .map-sign{
    position: absolute;
    right: 1.5%;
    bottom: 6%;
    width: 70px;
    z-index: 998;
    .map-sign-icon-color{
        text-align: center;
        font-family: SimHei;
        font-size: 14px;
        color: #FFFFFF;
        width: 100%;
        height: 28px;
        line-height: 28px;
        margin-top: 10px;
        background-color: #398C8F;
        border-radius: 10px;
    }
    .map-sign-icon-color.color2{
        background-color: #1970C1;
    }
    .map-sign-icon-color.color3{
        background-color: #A3A355;
    }
    .map-sign-icon-color.color4{
        background-color: #B0825C;
    }
    .map-sign-icon-color.color5{
        background-color: #9B4E55;
    }
    .map-sign-icon{
        text-align: center;
        font-family: SimHei;
        font-weight: 400;
        color: #FFFFFF;
        width: 100%;
        height: 28px;
        line-height: 28px;
        margin-top: 10px;
    }
    .map-sign-icon.you{
        background: url('~@/assets/img/bigScreen/btn57.png') no-repeat center / 100% 100%;
    }
    .map-sign-icon.liang{
        background: url('~@/assets/img/bigScreen/btn58.png') no-repeat center / 100% 100%;
    }
    .map-sign-icon.yi{
        background: url('~@/assets/img/bigScreen/btn59.png') no-repeat center / 100% 100%;
    }
    .map-sign-icon.cha{
        background: url('~@/assets/img/bigScreen/btn60.png') no-repeat center / 100% 100%;
    }
}
}
.map-tip{
    position: absolute;
    left: 0%;
    bottom: -15px;
    line-height: 140%;
    font-family: '微软雅黑', sans-serif;
    font-size: 16PX;
    // color: #cce9fa;
    color: #fff;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.level-container{
    width: calc(100% - 660PX);
    height: 100%;
    display: flex;
    gap: 15px;
}
.level-item{
    width: 20%;
    height: 100%;
    span{
        font-size: 16px;
        display: inline-block;
        padding: 12px 2px;
        flex: 1;
        text-align: center;
        color:#b1e3ff;
    }
    span:nth-child(1){
        // flex: 1.3;
        flex: 1;
    }
    .level-title{
        width: 100%;
        text-align: center;
        font-size: 28px;
        font-weight: bold;
    }
    
}
.map-tip {
    .tip-item {
        // width: 20%;
        flex: 1;
        // padding-right: 3px;
        .level-title{
            width: 100%;
            text-align: center;
            font-size: 18PX;
            // font-weight: bold;
            // padding: 3px 0;
            line-height: 30PX;
        }
        .tip-text {
            display: flex;
            justify-content: center;
            // margin-top: 3px;
            background-color: #22416d;
            padding: 0 7PX;
            text-align: center;
            font-size: 18PX;
            align-items: center;
            // line-height: 0PX;
            min-height: 60PX;
        }
        
    }
    :last-child {
        padding-right: 0;
    }
    // :nth-child(2n) {
    //     .tip-text {
    //         background-color: rgba(#1970C1, 0.2);
    //     }
    // }
}
.level-item:nth-child(1),
.tip-item:nth-child(1){
    .level-title{
        // background-color: #398C8F;
        background-color: #20A367;
    }
}
.level-item:nth-child(2),
.tip-item:nth-child(2){
    .level-title{
        // background-color: #1970c1;
        background-color: #3877B2;
    }
}
.level-item:nth-child(3),
.tip-item:nth-child(3){
    .level-title{
        // background-color: #A3A355;
        background-color: #E3C428;
    }
}
.level-item:nth-child(4),
.tip-item:nth-child(4){
    .level-title{
        // background-color: #B0825C; #E49317
        background-color: #E49317; 
    }
}
.level-item:nth-child(5),
.tip-item:nth-child(5){
    .level-title{
        // background-color: #9B4E55; #B04332
        background-color: #B04332; 
    }
}

.level-header{
    width:100%;
    display: flex;
}
.level-content-wrapper{
    width: 100%;
    height: calc(100% - 80PX);
    overflow-y: auto;
}
.level-content-empty{
    width: 100%;
    font-size: 16px;
    padding: 12px 2px;
    box-sizing: border-box;
    margin-top: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #cce9fa;
    background-color: rgba(#1970C1, 0.4);
}
.level-content-item{
    width:100%;
    display: flex;
    background-color: rgba(#1970C1, 0.2);
    margin-top: 2px;
    span{
        // color:#cce9fa;
        color: #fff;
    }
    span:nth-child(1){
        flex: 1.3;
        // color: #4ba0f0;
        // font-weight: 600;
    }
}
.level-content-item:nth-child(2n + 1){
    background-color: rgba(#1970C1, 0.4);
}
.level-content-item:hover {
    cursor: pointer;
    background-color: #0450a6;
}
.level-container{
    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width: 8px !important; //垂直方向上的宽
        height: 8px !important; //水平方向上的宽
    }
    
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        border-radius: 0!important;
        background-color: #0740a2 !important;
    }
    
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius: 6px!important;
        background-color: rgba(#fff, 0.1) !important;
    }
    /*滚动条交叉样式*/
    ::-webkit-scrollbar-corner {
        background: #0740a2 !important;
    }
}
.map-tip-container{
    position: relative;
    width: calc(50% - 30PX);
    height: 100%;
}
.list-container {
    width: calc(50% - 24PX);
    >* {
        letter-spacing: 2PX;
        font-family: 'Microsoft YaHei' !important;
    }
}
.fdgz {
    letter-spacing: 2PX;
    color: #fff;
    font-size: 18PX;
    line-height: 2;
    font-family: 'Microsoft YaHei', sans-serif;
    margin-top: 20PX;
}

.dot {
    position: absolute;
    width: 10PX;
    height: 10PX;
    background: #fff;
    border-radius: 50%;
    right: -120PX;
    top: 50%;
    transform: translateY(-40%);
}
.gxq {
    .dot {
        right: -70PX;
    }
}

// 只晾晒不分档样式
.isSub {
    /deep/ .box-list {
        flex-direction: row-reverse;
    }

    /deep/ .box-list .box-list-title {
        display: none;
    }
}