.twinkle-star{
    z-index: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: #3070f6;
    border-radius: 50%;
    box-shadow: 0 0 10px 5px rgba(96, 120, 162, 0.8);
    animation: twinkle 1.5s infinite ease;
}

 /* 星星闪烁动画 */
  @keyframes twinkle {
    0%, 100% {
        transform: translateX(-10cqw) translateY(5cqh);
        opacity: 0.5;
    }
    50% {
        transform: translateX(-10cqw) translateY(5cqh);
        opacity: 1;
    }
}

/* 流星 */
.pageshooting-star1 {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background:#3070f6;
    border-radius: 50%;
    box-shadow: 0 0 10px 5px rgba(96, 120, 162, 0.8);
    animation: pageshooting1 5s infinite ease;
}

.pageshooting-star2 {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: #3070f6;
    border-radius: 50%;
    box-shadow: 0 0 10px 5px rgba(96, 120, 162, 0.8);
    animation: pageshooting2 8s infinite ease;
}

.pageshooting-star3 {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    background: #3070f6;
    border-radius: 50%;
    box-shadow: 0 0 10px 5px rgba(96, 120, 162, 0.8);
    animation: pageshooting3 15s infinite ease;
}


/* 流星动画 */
@keyframes pageshooting1 {
    0% {
        transform: translateX(0cqw) translateY( 40cqh);
        opacity: 1;
    }
    100% {
        transform: translateX(100cqw) translateY(60cqh);
        opacity: 0;
    }
}

/* 流星动画 */
@keyframes pageshooting2 {
    0% {
        transform: translateX(50cqw) translateY(0cqh);
        opacity: 1;
    }
    100% {
        transform: translateX(40cqw) translateY(100cqh);
        opacity: 0;
    }
}

/* 流星动画 */
@keyframes pageshooting3 {
    0% {
        transform: translateX(70cqw) translateY( 100cqh);
        opacity: 1;
    }
    100% {
        transform: translateX(20cqw) translateY(0cqh);
        opacity: 0;
    }
}


.cameraAnimation1 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    font-size: 6px;
    padding: 1px;
    background:#fbfbfb;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: camera-move1-s 1s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: camera-move1-l 3s infinite alternate-reverse linear;
    }
}
@keyframes camera-move1-s {
    0% {
        transform: translate(-100px,110px);
        opacity: 1;
    }
    100% {
        transform: translate(50px,110px);
        opacity: 1;
    }
}
@keyframes camera-move1-l {
    0% {
        opacity: 1;
        transform: translate(-18cqw,clamp(112px,18.2cqw,302px)); 
    }
    100% {
        opacity: 1;
        transform: translate(10cqw,clamp(112px,18.2cqw,302px));
    }
}

.cameraAnimation2 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    padding: 1px;
    font-size: 6px;
    background:#f3e0a3;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: camera-move2-s 2s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: camera-move2-l 4s infinite alternate-reverse linear;
    }
}
@keyframes camera-move2-s {
    0% {
        transform: translate(-20px,40px);
        opacity: 1;
    }
    100% {
        transform: translate(50px,95px);
        opacity: 1;
    }
}
@keyframes camera-move2-l {
    0% {
        opacity: 1;
        transform: translate(-4cqw,5.4cqw);
    }
    100% {
        opacity: 1;
        transform: translate(10cqw,16.1cqw);
    }
}

.cameraAnimation3 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    padding: 1px;
    font-size: 6px;
    background:#79f6d9;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: camera-move3-s 3s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: camera-move3-l 5s infinite alternate-reverse linear;
    }
}
@keyframes camera-move3-s {
    0% {
        transform: translate(-10px,141px);
        opacity: 1;
    }
    100% {
        transform: translate(50px,104px);
        opacity: 1;
    }
}

@keyframes camera-move3-l {
    0% {
        opacity: 1;
        transform: translate(-2cqw,clamp(135px,25.6cqw,454px));
    }
    100% {
        opacity: 1;
        transform: translate(10cqw,clamp(98px,17.6cqw,374px));
    }
}


.boxAnimation1 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    font-size: 6px;
    padding: 1px;
    background:#fbfbfb;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: box-move1-s 1s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: box-move1-l 3s infinite alternate-reverse linear;
    }
}
@keyframes box-move1-s {
    0% {
        transform: translate(-100px,120px);
        opacity: 1;
    }
    100% {
        transform: translate(80px,120px);
        opacity: 1;
    }
}
@keyframes box-move1-l {
    0% {
        opacity: 1;
        transform: translate(-18cqw,clamp(120px,19.9cqw,330px)); 
    }
    100% {
        opacity: 1;
        transform: translate(15cqw,clamp(120px,19.9cqw,330px));
    }
}

.boxAnimation2 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    font-size: 6px;
    padding: 1px;
    background:#f3e0a3;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: box-move2-s 2s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: box-move2-l 4s infinite alternate-reverse linear;
    }
}
@keyframes box-move2-s {
    0% {
        transform: translate(-10px,38px);
        opacity: 1;
    }
    100% {
        transform: translate(80px,110px);
        opacity: 1;
    }
}
@keyframes box-move2-l {
    0% {
        opacity: 1;
        transform: translate(-2cqw,clamp(38px,5.4cqw,110px));
    }
    100% {
        opacity: 1;
        transform: translate(16cqw,clamp(80px,19cqw,316px));
    }
}

.boxAnimation3 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    font-size: 6px;
    padding: 1px;
    background:#79f6d9;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: box-move3-s 3s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: box-move3-l 5s infinite alternate-reverse linear;
    }
}
@keyframes box-move3-s {
    0% {
        transform: translate(-2px,162px);
        opacity: 1;
    }
    100% {
        transform: translate(80px,108px);
        opacity: 1;
    }
}

@keyframes box-move3-l {
    0% {
        opacity: 1;
        transform: translate(2cqw,clamp(162px,28cqw,459px));
    }
    100% {
        opacity: 1;
        transform: translate(16cqw,clamp(108px,19cqw,305px));
    }
}


.lockAnimation1 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    font-size: 6px;
    padding: 1px;
    background:#fbfbfb;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: lock-move1-s 1s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: lock-move1-l 3s infinite alternate-reverse linear;
    }
}
@keyframes lock-move1-s {
    0% {
        transform: translate(-100px,120px);
        opacity: 1;
    }
    100% {
        transform: translate(70px,120px);
        opacity: 1;
    }
}
@keyframes lock-move1-l {
    0% {
        opacity: 1;
        transform: translate(-18cqw,clamp(120px,19.8cqw,328px)); 
    }
    100% {
        opacity: 1;
        transform: translate(15cqw,clamp(120px,19.8cqw,328px));
    }
}

.lockAnimation2 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    font-size: 6px;
    padding: 1px;
    background:#f3e0a3;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: lock-move2-s 2s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: lock-move2-l 4s infinite alternate-reverse linear;
    }
}
@keyframes lock-move2-s {
    0% {
        transform: translate(-10px,40px);
        opacity: 1;
    }
    100% {
        transform: translate(70px,104px);
        opacity: 1;
    }
}
@keyframes lock-move2-l {
    0% {
        opacity: 1;
        transform: translate(-2cqw,clamp(40px,6.1cqw,98px));
    }
    100% {
        opacity: 1;
        transform: translate(15cqw,clamp(104px,19cqw,310px));
    }
}

.lockAnimation3 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    font-size: 6px;
    padding: 1px;
    background:#79f6d9;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: lock-move3-s 3s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: lock-move3-l 5s infinite alternate-reverse linear;
    }
}
@keyframes lock-move3-s {
    0% {
        transform: translate(-2px,160px);
        opacity: 1;
    }
    100% {
        transform: translate(80px,110px);
        opacity: 1;
    }
}

@keyframes lock-move3-l {
    0% {
        opacity: 1;
        transform: translate(0cqw,clamp(160px,28.4cqw,476px));
    }
    100% {
        opacity: 1;
        transform: translate(15cqw,clamp(110px,19.2cqw,312px));
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg); /* 从0度开始旋转 */
    }
    to {
        transform: rotate(360deg); /* 旋转到360度 */
    }
}


.devicetestAnimation1 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    font-size: 6px;
    padding: 1px;
    background:#fbfbfb;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: test-move1-s 2s infinite alternate-reverse linear;
    @media (min-width: 600px) {
    font-size: 10px;
    animation: test-move1-l 3s infinite alternate-reverse linear;
    }
}
@keyframes test-move1-s {
    0% {
        transform: translate(-90px,80px);
        opacity: 1;
    }
    100% {
        transform: translate(-30px,80px);
        opacity: 1;
    }
}
@keyframes test-move1-l {
    0% {
        opacity: 1;
        transform: translate(-20cqw,16.3cqw); 
    }
    100% {
        opacity: 1;
        transform: translate(-5cqw,16.3cqw);
    }
}



.devicetestAnimation2 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    font-size: 6px;
    padding: 1px;
    background:#d3fc9e;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: test-move2-s 1s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: test-move2-l 2s infinite alternate-reverse linear;
    }
}
@keyframes test-move2-s {
    0% {
        transform: translate(30px,70px);
        opacity: 1;
    }
    100% {
        transform: translate(80px,70px);
        opacity: 1;
    }
}
@keyframes test-move2-l {
    0% {
        opacity: 1;
        transform: translate(5cqw,15.3cqw); 
    }
    100% {
        opacity: 1;
        transform: translate(19cqw,15.3cqw);
    }
}

.magic-box-Animation1 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    font-size: 6px;
    padding: 1px;
    background:#fbfbfb;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: magic-box--move1-s 1s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: magic-box--move1-l 3s infinite alternate-reverse linear;
    }
}
@keyframes magic-box--move1-s {
    0% {
        transform: translate(-100px,93px);
        opacity: 1;
    }
    100% {
        transform: translate(38px,93px);
        opacity: 1;
    }
}
@keyframes magic-box--move1-l {
    0% {
        opacity: 1;
        transform: translate(-18cqw,clamp(122px,15.2cqw,312px)); 
    }
    100% {
        opacity: 1;
        transform: translate(6cqw,clamp(122px,15.2cqw,312px));
    }
}

.magic-box-Animation2 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    padding: 1px;
    font-size: 6px;
    background:#f3e0a3;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: magic-box--move2-s 2s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: magic-box--move2-l 4s infinite alternate-reverse linear;
    }
}
@keyframes magic-box--move2-s {
    0% {
        transform: translate(-30px,35px);
        opacity: 1;
    }
    100% {
        transform: translate(35px,83px);
        opacity: 1;
    }
}
@keyframes magic-box--move2-l {
    0% {
        opacity: 1;
        transform: translate(-6cqw,5.4cqw);
    }
    100% {
        opacity: 1;
        transform: translate(5.5cqw,13.6cqw);
    }
}

.magic-box-Animation3 {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    color: black;
    padding: 1px;
    font-size: 6px;
    background:#79f6d9;
    border-radius: 10%;
    box-shadow: 0 0 10px 5px rgba(223, 225, 229, 0.8);
    animation: magic-box--move3-s 3s infinite alternate-reverse linear;
    @media (min-width: 600px) {
        font-size: 10px;
        animation: magic-box--move3-l 5s infinite alternate-reverse linear;
    }
}
@keyframes magic-box--move3-s {
    0% {
        transform: translate(-26px,114px);
        opacity: 1;
    }
    100% {
        transform: translate(34px,78px);
        opacity: 1;
    }
}

@keyframes magic-box--move3-l {
    0% {
        opacity: 1;
        transform: translate(-5.5cqw,clamp(135px,20.6cqw,454px));
    }
    100% {
        opacity: 1;
        transform: translate(5.5cqw,clamp(98px,13.6cqw,374px));
    }
}