/* 首页地球 Banner（scoped） */
.banner-content-earth .ball-cont {
    width: 620px;
    height: 620px;
    position: relative;
    flex-shrink: 0;
    transform: scale(0.72);
    transform-origin: center center;
    margin-right: 0;
    z-index: 2;
}

.banner-content-earth .ball-bg {
    overflow: hidden;
    position: relative;
    width: 620px;
    height: 620px;
    background-image: url("../img/index/earth/ball-bg2.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: grab;
}

.banner-content-earth .axlewire-cont {
    position: absolute;
    z-index: 5;
    inset: 0;
    width: 620px;
    height: 620px;
    perspective: 1200px;
}

.banner-content-earth div.axlewire {
    width: 1px;
    height: 380px;
    position: relative;
    margin: 120px auto 0;
    background: transparent;
    border-right: 1px dashed #0cc9fa;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(16deg);
}

.banner-content-earth div.axlewire.ani {
    animation: earth-myrotate 30s linear infinite forwards;
}

.banner-content-earth .cirh {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid #17a6fa;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.banner-content-earth .cirh1 {
    width: 330px;
    height: 330px;
    margin: -165px 0 0 -165px;
    transform: translateZ(0) translateY(-95px) rotateX(90deg);
    background-image: url("../img/index/earth/320-320.png");
}

.banner-content-earth .cirh2 {
    width: 380px;
    height: 380px;
    margin: -190px 0 0 -190px;
    transform: translateZ(0) translateY(0) rotateX(90deg);
    background-image: url("../img/index/earth/380-380.png");
}

.banner-content-earth .cirh3 {
    width: 330px;
    height: 330px;
    margin: -165px 0 0 -165px;
    transform: translateZ(0) translateY(95px) rotateX(90deg);
    background-image: url("../img/index/earth/320-320.png");
}

.banner-content-earth .cirh4 {
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    transform: translateZ(0) translateY(160px) rotateX(90deg);
    background-image: url("../img/index/earth/200-200.png");
}

.banner-content-earth .cirv {
    position: absolute;
    left: 0;
    top: 0;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    margin-left: -190px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.banner-content-earth .cirv1 { background-image: url("../img/index/earth/cirv1.png"); transform: rotateY(0deg) translateZ(0); }
.banner-content-earth .cirv4 { background-image: url("../img/index/earth/cirv4.png"); transform: rotateY(72deg) translateZ(0); }
.banner-content-earth .cirv2 { background-image: url("../img/index/earth/cirv2.png"); transform: rotateY(144deg) translateZ(0); }
.banner-content-earth .cirv5 { background-image: url("../img/index/earth/cirv4.png"); transform: rotateY(216deg) translateZ(0); }
.banner-content-earth .cirv3 { background-image: url("../img/index/earth/cirv3.png"); transform: rotateY(288deg) translateZ(0); }

.banner-content-earth .dot-cont {
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 100px;
    height: 28px;
    margin: -13px 0 0 -56px;
    transform-style: preserve-3d;
}

.banner-content-earth .axlewire .dc1 { transform: rotateY(-3deg) translateY(0) translateZ(190px); }
.banner-content-earth .axlewire .dc2 { transform: rotateY(68deg) translateY(0) translateZ(195px); }
.banner-content-earth .axlewire .dc3 { transform: rotateY(102deg) translateY(0) translateZ(195px); }
.banner-content-earth .axlewire .dc4 { transform: rotateY(173deg) translateY(0) translateZ(195px); }
.banner-content-earth .axlewire .dc5 { transform: rotateY(210deg) translateY(0) translateZ(190px); }
.banner-content-earth .axlewire .dc6 { transform: rotateY(257deg) translateY(0) translateZ(190px); }
.banner-content-earth .axlewire .dc7 { transform: rotateY(321deg) translateY(0) translateZ(190px); }

.banner-content-earth .dot-cont .info {
    display: inline-block;
    border: 1px solid #0563f1;
    padding: 0 5px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 28px;
    box-sizing: border-box;
    text-decoration: none;
    background-color: rgba(0, 21, 81, 0.82);
    white-space: nowrap;
}

.banner-content-earth .dot-cont .dot {
    display: inline-block;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid #0563f1;
    background: #000;
}

.banner-content-earth .ball-shade1 {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    margin: -190px 0 0 -190px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background-image: url("../img/index/earth/ball-shade3.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(61, 66, 186, 0.58);
}

.banner-content-earth .ball-shade1.ani {
    animation: earth-myrotate2 30s linear infinite forwards;
}

.banner-content-earth .roaDot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    margin: -5px 0 0 -5px;
    border: 2px solid #0cc9fa;
}

.banner-content-earth .roaDot-cont {
    position: absolute;
    width: 6px;
    height: 6px;
    left: 50%;
    top: 50%;
    margin: -3px 0 0 -3px;
    animation: earth-roaDotrotate 10s linear infinite forwards;
}

.banner-content-earth .rd1 { top: 121px; left: 233px; }
.banner-content-earth .rd2 { right: 206px; bottom: 152px; }

@keyframes earth-roaDotrotate {
    0% { transform: rotateX(0deg) rotateZ(0deg); }
    100% { transform: rotateX(0deg) rotateZ(360deg); }
}

@keyframes earth-myrotate {
    0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(16deg); }
    100% { transform: rotateX(0deg) rotateY(360deg) rotateZ(16deg); }
}

@keyframes earth-myrotate2 {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .banner-content-earth div.axlewire.ani,
    .banner-content-earth .ball-shade1.ani,
    .banner-content-earth .roaDot-cont {
        animation: none;
    }
}