* {
    padding: 0;
    margin: 0;
}

@keyframes ringA {
    0%,4% {
        stroke-dasharray: 0 660;
        stroke-width: 20;
        stroke-dashoffset: -330
    }

    12% {
        stroke-dasharray: 60 600;
        stroke-width: 30;
        stroke-dashoffset: -335
    }

    32% {
        stroke-dasharray: 60 600;
        stroke-width: 30;
        stroke-dashoffset: -595
    }

    40%,54% {
        stroke-dasharray: 0 660;
        stroke-width: 20;
        stroke-dashoffset: -660
    }

    62% {
        stroke-dasharray: 60 600;
        stroke-width: 30;
        stroke-dashoffset: -665
    }

    82% {
        stroke-dasharray: 60 600;
        stroke-width: 30;
        stroke-dashoffset: -925
    }

    90%,to {
        stroke-dasharray: 0 660;
        stroke-width: 20;
        stroke-dashoffset: -990
    }
}

@keyframes ringB {
    0%,12% {
        stroke-dasharray: 0 220;
        stroke-width: 20;
        stroke-dashoffset: -110
    }

    20% {
        stroke-dasharray: 20 200;
        stroke-width: 30;
        stroke-dashoffset: -115
    }

    40% {
        stroke-dasharray: 20 200;
        stroke-width: 30;
        stroke-dashoffset: -195
    }

    48%,62% {
        stroke-dasharray: 0 220;
        stroke-width: 20;
        stroke-dashoffset: -220
    }

    70% {
        stroke-dasharray: 20 200;
        stroke-width: 30;
        stroke-dashoffset: -225
    }

    90% {
        stroke-dasharray: 20 200;
        stroke-width: 30;
        stroke-dashoffset: -305
    }

    98%,to {
        stroke-dasharray: 0 220;
        stroke-width: 20;
        stroke-dashoffset: -330
    }
}

@keyframes ringC {
    0% {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: 0
    }

    8% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -5
    }

    28% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -175
    }

    36%,58% {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: -220
    }

    66% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -225
    }

    86% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -395
    }

    94%,to {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: -440
    }
}

@keyframes ringD {
    0%,8% {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: 0
    }

    16% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -5
    }

    36% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -175
    }

    44%,50% {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: -220
    }

    58% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -225
    }

    78% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -395
    }

    86%,to {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: -440
    }
}


.body-loading{
    overflow: hidden;
}
#app-loading {
    background: #000000;
    position: fixed;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-loading {
    width: 40px;
    height: 40px;
    --c:no-repeat linear-gradient(#FFFFFF 0 0);
    background: var(--c),var(--c),var(--c),var(--c);
    background-size: 21px 21px;
    animation: l5 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes l5 {
    0%   {background-position: 0    0,100% 0   ,100% 100%,0 100%}
    33%  {background-position: 0    0,100% 0   ,100% 100%,0 100%;width:60px;height: 60px}
    66%  {background-position: 100% 0,100% 100%,0    100%,0 0   ;width:60px;height: 60px}
    100% {background-position: 100% 0,100% 100%,0    100%,0 0   }
}