.animation .vr-content {
    transition: opacity 300ms linear;
    /* transition-delay: 2.5s; */
    opacity: 1;
}
.vr-content {
    opacity: 0;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 99;
}
.vr-content img {
    display: block;
    width: auto;
}
.vr-content > div {
    position: absolute;
}
.vr-content .line-green-1 {
    bottom: 222px;
    left: 605px;
}
.vr-content .line-green-2 {
    bottom: 270px;
    left: 250px;
}

.vr-content .line-block-1 {
    top: 225.43px;
    left: 482.17px;
}

.vr-content .line-purple-1 {
    bottom: 420px;
    right: 509px;
}
.vr-content .line-purple-2 {
    bottom: 380px;
    right: 561px;
}
.vr-content .line-purple-3 {
    bottom: 374px;
    right: 587px;
}
.vr-content .line-purple-4 {
    bottom: 339px;
    left: 645px;
}
.vr-content .line-purple-5 {
    bottom: 294px;
    left: 646px;
}
.vr-content .line-purple-6 {
    bottom: 276.43px;
    left: 595.15px;
}
.vr-content .line-purple-7 {
    bottom: 215px;
    left: 538px;
}
.vr-content .line-purple-8 {
    bottom: 198px;
    left: 464.4px;
}
.vr-content .line-purple-9 {
    bottom: 181px;
    left: 388.52px;
}

.vr-content .line-red-1 {
    bottom: 222px;
    left: 606px;
}
.vr-content .line-red-2 {
    bottom: 298px;
    left: 484px;
}
.vr-content .line-red-3 {
    top: 360px;
    left: 484px
}
.vr-content .line-red-4 {
    bottom: 287px;
    left: 516px;
}
.vr-content .line-red-5 {
    bottom: 305px;
    left: 524px;
}
.vr-content .line-red-6 {
    top: 476.73px;
    left: 522px;
}
.vr-content .line-red-7 {
    top: 348px;
    left: 520px;
}
.vr-content .line-red-8 {
    bottom: 359px;
    right: 369px;
}
.vr-content .line-red-9 {
    bottom: 325px;
    right: 249.72px;
}
.vr-content .line-red-10 {
    top: 409px;
    right: 252px;
}
.vr-content .line-red-11 {
    top: 290px;
    right: 250px;
}
.vr-content .line-red-12 {
    top: 282.48px;
    right: 344.75px;
}
.vr-content .line-red-13 {
    top: 281px;
    right: 385px;
}
.vr-content .line-red-14 {
    top: 279px;
    right: 402.28px;
}
.vr-content .line-red-15 {
    top: 278px;
    right: 420px;
}
.vr-content .line-red-16 {
    bottom: 271px;
    left: 484px;
}
.vr-content .point-cnx {
    bottom: 398.51px;
    left: 171.35px;
}
.vr-content .point-cdz {
    bottom: 251px;
    left: 426.62px;
}
.vr-content .point-pdx {
    bottom: 307.27px;
    left: 636.43px;
}
.vr-content .point-znsb {
    bottom: 358px;
    left: 582.22px;
}
.vr-content .point-ejpdg {
    left: 462px;
    top: 415.45px;
}
.vr-content .point-gfnbq {
    top: 149px;
    left: 490px;
}
.vr-content .point-ups {
    left: 793px;
    bottom: 369.51px;
}
.vr-content .point-yyzx {
    left: 693px;
    top: 416px;
}
.vr-content .point-pds {
    right: 410px;
    bottom: 394px;
}
.vr-content .point-znjz {
    right: 457px;
    bottom: 434px;
}
.vr-content .point-pdx2 {
    right: 223.67px;
    bottom: 379px;
}
.vr-content .point-gf {
    top: 101px;
    right: 335px;
}
.vr-wrap.animation .name-point {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.vr-wrap.animation .point-cnx {
    animation-delay: 3s;
}

.vr-wrap.animation .point-cdz {
    animation-delay: 3.2s;
}
.vr-wrap.animation .point-pdx {
    animation-delay: 3.3s;
}
.vr-wrap.animation .point-znsb {
    animation-delay: 3.4s;
}
.vr-wrap.animation .point-ejpdg {
    animation-delay: 3.5s;
}
.vr-wrap.animation .point-gfnbq {
    animation-delay: 3.6s;
}

.vr-wrap.animation .point-ups {
    animation-delay: 3.8s;
}
.vr-wrap.animation .point-yyzx {
    animation-delay: 3.9s;
}

.vr-wrap.animation .point-pds {
    animation-delay: 4.1s;
}
.vr-wrap.animation .point-znjz {
    animation-delay: 4.2s;
}

.vr-wrap.animation .point-pdx2 {
    animation-delay: 4.4s;
}
.vr-wrap.animation .point-gf {
    animation-delay: 4.5s;
}
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 150%, 0);
        transform: translate3d(0, 150%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 150%, 0);
        transform: translate3d(0, 150%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
/* 线对应的点动画 */
.vr-content .move-point {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: red;
    box-shadow: 0 0 10px #fff;
    animation: pointMove 3s linear infinite;
}

.line-green-1 .move-point,
.line-green-2 .move-point {
}

.line-green-1 .move-point {
    offset-path: path("m402.49704,2.00028l0,8.988l75.142,13.228l0,12.239l-162.544,39.888s-17.339,4.345 -50.267,-1.5s-262.539,-42.137 -262.539,-42.137");
    animation-duration: 3.5s;
}
.line-green-2 .move-point {
    offset-path: path("m338.55999,35.77012l-109.641,-18.973l-87.494,-14.8l-139.08,26.964");
    animation-duration: 3.5s;
    animation-name: pointMoveGreen2;
}
@keyframes pointMoveGreen2 {
    0%,
    30% {
     opacity: 0;   
    }

    30.01% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}

.line-block-1 .move-point {
    offset-path: path("m46.4,2.2l-44.4,4.9l1.4,397.3c0,0 356,58.7 386.3,63.9s51.3,0 51.3,0l138.9,-35l-78.9,-13.3l0,-9.6");
    animation-duration: 6s;
}

.line-red-1 .move-point {
    offset-path: path("m448.355,2.00016l0,9.64l75.182,13.117l0,11.213l-203.45,51.056s-17.2,5.26 -46.52,1.062s-271.275,-43.255 -271.275,-43.255");
}

.line-red-16 .move-point {
    offset-path: path("m104.1,34.9l-102.1,-18.2l0,-10.6l20.4,-3.7");
    animation-name: pointMoveRed16;
}
@keyframes pointMoveRed16 {
    0%,
    67.99% {
     opacity: 0;   
    }

    68% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}

.line-red-5 .move-point {
    offset-path: path("m2.38096,14.36774l54.892,-11.987");
    animation-name: pointMoveRed5;
}
@keyframes pointMoveRed5 {
    0%,
    84.99% {
     opacity: 0;   
    }

    85% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}

.line-red-4 .move-point {
    offset-path: path("m2.27596,2.27574l98.623,14.872");
    animation-name: pointMoveRed4;
}
@keyframes pointMoveRed4 {
    0%,
    79.99% {
     opacity: 0;   
    }

    80% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}

.line-red-2 .move-point {
    offset-path: path("m2,138.68873l0,-131.906l19.245,-4.389");
    animation-name: pointMoveRed2;
}
@keyframes pointMoveRed2 {
    0%,
    67.99% {
     opacity: 0;   
    }

    68% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}

.line-red-6 .move-point {
    offset-path: path("m2.34897,13.35054l56.808,-11.006");
    animation-name: pointMoveRed6;
}
@keyframes pointMoveRed6 {
    0%,
    84.99% {
     opacity: 0;   
    }

    85% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}

.line-red-3 .move-point {
    offset-path: path("m2,139.29184l0,-133.362l19.027,-3.594");
    animation-name: pointMoveRed2;
}

.line-red-7 .move-point {
    offset-path: path("m2.27894,11.16359l58.249,-8.885");
    animation-name: pointMoveRed6;
}

.line-red-8 .move-point {
    offset-path: path("m26.10299,5.78248l-24.377,-4.056");
    animation-name: pointMoveRed8;
}
@keyframes pointMoveRed8 {
    0%,
    89.99% {
     opacity: 0;   
    }

    90% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}
.line-red-9 .move-point {
    offset-path: path("m29.34206,1.50017l0,28.877l-27.842,6.4l0,-11.1");
    animation-name: pointMoveRed9;
}
@keyframes pointMoveRed9 {
    0%,
    69.99% {
     opacity: 0;   
    }

    70% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}

.line-red-10 .move-point {
    offset-path: path("m1.49989,1.50013l0,32.229l12,-2.532");
    animation-name: pointMoveRed10;
}
@keyframes pointMoveRed10 {
    0%,
    79.99% {
     opacity: 0;   
    }

    80% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}

.line-red-11 .move-point {
    offset-path: path("m1.50088,1.50006l0,28.713l67.8,-12.065");
    animation-name: pointMoveRe11;
}
@keyframes pointMoveRe11 {
    0%,
    79.99% {
     opacity: 0;   
    }

    80% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}
.line-red-12 .move-point {
    offset-path: path("m35.288,5.12461l-33.642,-3.478");
    animation-name: pointMoveRe12;
}
@keyframes pointMoveRe12 {
    0%,
    88.99% {
     opacity: 0;   
    }

    89% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}

.line-red-13 .move-point {
    offset-path: path("m14.10993,2.86577l-12.47,-1.227");
    animation-name: pointMoveRe13;
}
@keyframes pointMoveRe13 {
    0%,
    95.99% {
     opacity: 0;   
    }

    96% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}
.line-red-14 .move-point {
    offset-path: path("m13.415,2.80253l-11.775,-1.162");
    animation-name: pointMoveRe13;
}

.line-purple-5 .move-point {
    offset-path: path("m31,25.4l-29,6.4l0,-29.8");
    animation-name: pointMovePurple5;
}
@keyframes pointMovePurple5 {
    0%,
    79.99% {
     opacity: 0;   
    }

    80% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}

.line-purple-6 .move-point {
    offset-path: path("m53.22795,2.42325l-51.228,12.7l0,4.265");
    animation-name: pointMovePurple5;
}

.line-purple-7 .move-point {
    offset-path: path("m51.5,2.4l-49.1,12.2");
    animation-name: pointMovePurple5;
}

.line-purple-8 .move-point {
    offset-path: path("m57.6,2.4l-55.2,13.9");
    animation-name: pointMovePurple5;
}
.line-purple-9 .move-point {
    offset-path: path("m59.7,2.4l-57.3,14.8");
    animation-name: pointMovePurple5;
}

.line-purple-4 .move-point {
    offset-path: path("m2.00004,19.41062l0,-10.82l30.489,-6.229");
    animation-name: pointMovePurple5;
}

.line-purple-3 .move-point {
    offset-path: path("m1.77198,31.00755l143.567,-29.508l0,41.522");
    animation-name: pointMovePurple3;
}
@keyframes pointMovePurple3 {
    0%,
    34.99% {
     opacity: 0;   
    }

    35% {
        offset-distance: 0%;
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
    }
}

.line-purple-2 .move-point {
    offset-path: path("m1.49999,54.47201l0,-52.972");
    animation-name: pointMovePurple5;
}
.line-purple-1 .move-point {
    offset-path: path("m1.66703,1.66426l36.018,4.291l0,11.067");
    animation-name: pointMovePurple5;
}

.vr-content .move-point-1 {
    opacity: 0.9;
}
.vr-content .move-point-2 {
    opacity: 0.8;
    transform: scale(0.9);
}
.vr-content .move-point-3 {
    opacity: 0.7;
    transform: scale(0.8);
}
.vr-content .move-point-4 {
    opacity: 0.6;
    transform: scale(0.7);
}
.vr-content .move-point-5 {
    opacity: 0.5;
    transform: scale(0.6);
}
.vr-content .move-point-6 {
    opacity: 0.4;
    transform: scale(0.5);
}
.vr-content .move-point-7 {
    opacity: 0.3;
    transform: scale(0.4);
}
.vr-content .move-point-8 {
    opacity: 0.2;
    transform: scale(0.3);
}
.vr-content .move-point-9 {
    opacity: 0.1;
    transform: scale(0.2);
}
@keyframes pointMove {
    0% {
        offset-distance: 0%;
    }

    100% {
        offset-distance: 100%;
    }
}