﻿.popup-main {
    position: fixed;
    top: 50px;
    right: 4px;
    z-index: 98;
}

.popup-black {
    width: 4.3pc;
    height: 4.3pc;
    cursor: pointer;
    float: right;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1);
    margin-right: 5px;
}

    .popup-black, .popup-black:hover {
        transition: ease .5s;
    }

        .popup-black:before {
            content: '';
            background: #080808;
            height: 4.3pc;
            width: 4.3pc;
            border-radius: 50%;
            z-index: 1;
            position: absolute;
            top: 0;
            right: 5px;
            -webkit-animation: fadein 1s linear infinite .5s;
        }

        .popup-black:after {
            content: '';
            background: #080808;
            height: 4.3pc;
            width: 4.3pc;
            border-radius: 50%;
            z-index: -1;
            position: absolute;
            top: 0;
            right: 5px;
            -webkit-animation: fadein 1s linear infinite;
        }

.popup-white {
    width: 4.3pc;
    height: 4.3pc;
    cursor: pointer;
    float: right;
    border-radius: 50%;
    border: 5px solid #fff;
    margin-right: 5px;
    box-shadow: 0 0 15px 2px rgb(255,255,255);
}

    .popup-white, .popup-white:hover {
        transition: ease .5s;
    }

        .popup-white:before {
            content: '';
            background: #fff;
            height: 4.3pc;
            width: 4.3pc;
            border-radius: 50%;
            z-index: 1;
            position: absolute;
            top: 0;
            right: 5px;
            -webkit-animation: fadein 1s linear infinite .5s;
        }

        .popup-white:after {
            content: '';
            background: #fff;
            height: 4.3pc;
            width: 4.3pc;
            border-radius: 50%;
            z-index: -1;
            position: absolute;
            top: 0;
            right: 5px;
            -webkit-animation: fadein 1s linear infinite;
        }

.popup-consult {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 99;
}

    .popup-consult p {
        color: #fff;
        display: block;
        margin-bottom: 0;
        font-size: 14px;
        text-align: center;
    }

.bgBlue {
    background: #1CB2E3;
}

.bgGreen {
    background: #28a745;
}

.bgRed {
    background: #dc3545;
}

.popup-content {
    background-color: #d7fbf4;
    border-radius: 10px;
    padding: 8px;
    float: right;
    margin-right: 13px;
}

.popupShow {
    display: inline-block;
    pointer-events: auto;
    transition: opacity 0.5s ease;
}

.popupHidden {
    display: none;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-container {
    padding: 5px 0;
}

/* 学校和服务数据窗口 */
.popup-container ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 创建两列，每列宽度相等 */
    list-style-type: none; /* 移除列表项前的默认符号 */
    margin: 0; /* 移除默认的外边距 */
    padding: 0; /* 移除默认的内边距 */
    gap: 0px; /* 设置网格项之间的间隔 */
    color: black;
}

.popup-container li {
    padding: 0px; /* 添加一些内边距 */
    border: 0px solid #ccc; /* 添加边框以便于观察布局 */
    font-size: 15px;
}

@-webkit-keyframes fadein {
    0% {
        -webkit-transform: scale(1);
        opacity: .5
    }

    100% {
        -webkit-transform: scale(1.5);
        opacity: 0
    }
}
