.node-map {
    position: relative;
    width: 830px;
    height: 686px;
    margin: 50px auto 20px;
    background-image: url('/img/dt2@2x.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    overflow: hidden;

}

.node-map .introduce {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    font-size: 14px;
    color: #555;
}
.node-map .introduce li {
    margin: 1em 0;
    display: flex;
    align-items: center;
}
.node-map .introduce li .hint {
    font-size: 13px;
    margin: -10px 0 0 22px;
}
.node-map .introduce li .map_icon {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 4px;
    background-size: 100%;
}
.node-map .introduce li .map_icon.map_icon1 {
    background-image: url('/img/map_icon1.png');
}
.node-map .introduce li .map_icon.map_icon2 {
    background-image: url('/img/map_icon2.png');
}
.node-map .map_state {
    position: absolute;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 300ms ease-in;
    font-size: 14px;
    color: #555;
}
.node-map .map_state img {
    margin-right: 5px;
}
.node-map .map_state.off .circle-dian {
    background-color: #888;
}
.node-map .map_state.off .circle-outside {
    background-color: #bbb;
    animation: none;
}
.node-map .map_state.off .circle-inside {
    width: 17px;
    height: 17px;
    left: 50%;
    top: 50%;
    border: 1px solid #000;
    transform: translate(-50%, -50%);
    animation: none;
}
.node-map .map_state.map_state1 {
    top: 124px;
    left: 719px;
}
.node-map .map_state.map_state2 {
    top: 204px;
    left: 688px;
}
.node-map .map_state.map_state3 {
    top: 230px;
    left: 523px;
}
.node-map .map_state.map_state4 {
    top: 246px;
    left: 588px;
}
.node-map .map_state.map_state5 {
    top: 332px;
    left: 407px;
}
.node-map .map_state.map_state6 {
    top: 314px;
    left: 607px
}
.node-map .map_state.map_state7 {
    top: 303px;
    left: 539px;
}
.node-map .map_state.map_state8 {
    top: 283px;
    left: 567px;
}
.node-map .map_state.map_state9 {
    top: 353px;
    left: 557px;
}
.node-map .map_state.map_state10 {
    top: 388px;
    left: 640px;
}
.node-map .map_state.map_state11 {
    top: 427px;
    left: 407px;
}
.node-map .map_state.map_state12 {
    top: 434px;
    left: 665px;
}
.node-map .map_state.map_state13 {
    top: 482px;
    left: 552px;
}
.node-map .map_state.map_state14 {
    top: 573px;
    left: 561px;
}
.node-map .map_state.map_state15 {
    top: 532px;
    left: 378px;
}
.node-map .map_state.map_state16 {
    top: 643px;
    left: 509px;
}
.node-map .map_state.map_state17 {
    top: 432px;
    left: 570px;
}
.node-map .map_state.map_state18 {
    top: 309px;
    left: 376px;
}
.node-map .map_state.map_state19 {
    top: 411px;
    left: 682px;
}
.node-map .map_state.map_state20 {
    top: 362px;
    left: 485px;
}
.node-map .map_state.map_state21 {
    top: 510px;
    left: 659px;
}
.node-map .map_state.map_state22 {
    top: 507px;
    left: 448px;
}
.node-map .map_state.map_state23 {
    top: 580px;
    left: 473px;
}
.node-map .map_state.map_state24 {
    top: 160px;
    left: 707px;
}
.node-map .map_state.map_state25 {
    top: 408px;
    left: 615px
}
.node-map .map_state.map_state26 {
    top: 282px;
    left: 447px;
}
.node-map .map_state.map_state01 {
    top: 145px;
    left: 200px;
}
.node-map .map_state.map_state02 {
    top: 421px;
    left: 199px;
}
.node-map .map_state.map_state03 {
    top: 533px;
    left: 699px;
}
.node-map .map_state.map_state04 {
    top: 266px;
    left: 603px;
}
.node-map .map_state.map_state05 {
    top: 453px;
    left: 445px;
}
.node-map .map_state.map_state06 {
    top: 463px;
    left: 600px;
}
.circle-inside {
    animation: circle_inside 4500ms ease-out 500ms infinite;
}
.circle-outside {
    animation: circle_outside 4500ms ease-out 3250ms infinite;
}
.circle-inside {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #2878ff;
    border-radius: 50%;
    opacity: 0.2;
    transition: width 0.5s ease-out;
}
.circle-outside {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2878ff;
    border-radius: 50%;
    opacity: 0.1;
    transition: width 0.5s ease-out;
}
.circle-dian {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 8px;
    height: 8px;
    margin: auto;
    border-radius: 50%;
    background: #2878ff;
    opacity: 0.8;
    z-index: 4;
}
.circle_box {
    width: 30px;
    height: 30px;
    position: relative;
}
@keyframes circle_outside {
    from {
        opacity: 0;
        transform: scale(0.1, 0.1);
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
@keyframes circle_inside {
    from {
        opacity: 0;
        transform: scale(0.1, 0.1);
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

.kefu-box{
    background-color: #fdfef9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 360px;
}
.kefu-box>div{
    text-align: center;
}
.kefu-box img{
    width: 200px;
    object-fit: cover;
    margin-top: 20px;
}
.kefu-box .layui-icon-close{
    font-size: 14px;
    cursor: pointer;
    top:10px;
    right:10px;
    position: absolute;
    color: #999;
}
.kefu-box-content{
    margin:22px 0;
    text-align: center;
}
.kefu-box-content>p{
    font-size: 14px;
    color: #999;
    margin-top: 10px;
}
.kefu-box h3{
    font-size: 20px;
}
.kefu-box-btn{
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: center;
}
.kefu-box-btn>a{
    padding:10px 20px;
    border-radius: 5px;
    background-color: #f4f7ff;
    border: solid 1px #a3b6ff;
    color: #3355db;
    font-size: 14px;
    cursor: pointer;
}
.kefu-box-btn>a:last-child{
    background-color: #3355db;
    color: #f4f7ff;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}