.dians{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}

.dians .dian{position: absolute;left: 25%;top: 28%;color: #fff;display: flex;align-items: center;width: 40px;}

.dians .dian2{left: 59%;top: 28%;}

.dians .dian3{left:85%;top: 28%;}

.dians .dian4{left: 28%;top: 55%;}

.dians .dian5{left: 64%;top: 80%;}

.dians .dian6{left: 81%;top: 63.36%;}

.dians .dian7{left: 68%;top: 45%;}

.dians .dian8{left: 30%;top: 74%;}



.dians .dian p{position: relative;width: 4px;height: 4px;margin-right: 30px;cursor: pointer;}

.dians .dian s{width: 4px;height: 4px;border-radius: 100%;background: #fff;display: block;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 5;}

.dians .dian p::after{content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 21px;height: 21px;background: #20bf86;border-radius: 100%;animation: dongh2 2s infinite linear alternate;}

.dians .dian p::before{content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 36px;height: 36px;background: rgb(32, 191, 134,.4);border-radius: 100%;animation: dongh 2s infinite linear alternate;}


.dians .dian .txt{display:flex;align-items: center;justify-content: center; height: 50px;background: rgb(32, 191, 134,.9);border-radius: 100px;z-index: -2; opacity: 0;transform: translateX(10px);width: 170px;position: absolute;left: 30px;}

.dians .dian2 .txt{width: 220px;}

.dians .dian .txt a{display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 5;}

.dians .dian .txt img{margin-left: 30px;}

.dians .dian:hover .txt{opacity: 1;z-index: 2;pointer-events: visible;transform: translateX(0);}


@keyframes dongh {
    0%{transform: translate(-50%, -50%) scale(1) ;opacity: 1;}
    50%{transform:translate(-50%, -50%) scale(1.2) ;opacity: 0.5;}
    100%{transform: translate(-50%, -50%) scale(1.5) ;opacity: 0.1;}
   

}

@keyframes dongh2 {
    0%{transform: translate(-50%, -50%) scale(1) ;opacity: 1;}
    50%{transform:translate(-50%, -50%) scale(1.1) ;opacity: 0.8;}
    100%{transform: translate(-50%, -50%) scale(1.2) ;opacity: 0.5;}
   

}









@media screen and (max-width:1025px) {
    /* .dians{display: none;} */

    .dians .dian .txt{height: 44px;}

    .dians .dian:first-child{left: 48%;top: 33%;}

    .dians .dian4,.dians .dian8{display: none;}

    .dians .dian2{left: 15%;top: 30%;}

    .dians .dian3 .txt,.dians .dian6 .txt{left: auto;right:60px;transform: translateX(-10px);width: 140px;}

    .dians .dian .txt img{margin-left: 15px;}

    .dians .dian3:hover .txt{transform: translate(0);}

    .dians .dian:first-child .txt{width: 150px;}

    .dians .dian2 .txt{width: 170px;}

    .dians .dian7{left: 25%;top: 44%;}

    .dians .dian7 .txt{width: 140px;}

    .dians .dian5{left: 33%;}

    .dians .dian5 .txt{width: 150px;}








}