body {
    background-image: url('../img/bg.png');
    background-repeat: repeat-y;
}

.bannerbx {
    background-image: url("../img/banner-bg.jpg");
    background-size: 100% auto;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    /* height: 8.15rem; */
    /*padding-top: 0.4rem;*/
    margin-top: -2.8rem;
    overflow: hidden;
}

.bannerbx .contbx {
    width: 6.18rem;
    height: 6.18rem;
    margin: 0 auto;
}

.bannerbx .imgbx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: 100% 100%;
    -webkit-animation: spin 20s linear infinite;
    animation: spin 20s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.bannerbx .imgbx.img01 {
    background-image: url("../img/banner-img01.png");
}

.bannerbx .imgbx.img02 {
    background-image: url("../img/banner-img02.png");
    -webkit-animation: spin 30s linear infinite;
    animation: spin 30s linear infinite;
}

.bannerbx .imgbx.img03 {
    background-image: url("../img/banner-img03.png");
    -webkit-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
}

/* 星云背景 */
.nebula {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: nebulaFlow 25s linear infinite;
    z-index: 0;
}

/* 星云流动 */
@keyframes nebulaFlow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

/* ----------------- 核心：星光样式（清晰 + 高亮 + 不模糊）----------------- */
/* 基础星星 */
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 2.8s ease-in-out infinite alternate;
    box-shadow: 0 0 6px white, 0 0 12px rgba(255, 255, 255, 0.6);
    z-index: 1;
}

/* 尖角十字星光光晕 */
.star.cross {
    z-index: 2;
}

.star.cross::before,
.star.cross::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.star.cross::before {
    width: 2px;
    height: 32px;
    background: linear-gradient(to top, transparent 0%, white 50%, transparent 100%);
    filter: blur(1px);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.star.cross::after {
    width: 32px;
    height: 2px;
    background: linear-gradient(to left, transparent 0%, white 50%, transparent 100%);
    filter: blur(1px);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* 闪烁动画 */
@keyframes twinkle {
    0% {
        opacity: 0.2;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


.fansbx li {
    width: calc(33.33% - 0.01rem);
    padding-right: 0.2rem;
    margin-bottom: 0.3rem;
}

.coinbx .imgbx {
    width: 0.68rem;
    height: 0.68rem;
    background-size: cover;
    background-position: center;
}

.infobx li {
    margin-bottom: 0.44rem;
    position: relative;
}

.infobx li .imgbx {
    width: 1.93rem;
    height: 1.94rem;
    background-size: cover;
    background-position: center;
    position: absolute;
    bottom: -0.1rem;
}

.infobx li:nth-child(odd) {
    padding-top: 0.3rem;
    padding-right: 0.2rem;
    padding-bottom: 0.4rem;
    padding-left: 2.2rem;
}

.infobx li:nth-child(odd) .imgbx {
    left: 0;
}

.infobx li:nth-child(even) {
    padding-top: 0.3rem;
    padding-left: 0.2rem;
    padding-bottom: 0.4rem;
    padding-right: 2.2rem;
}

.infobx li:nth-child(even) .imgbx {
    right: -0.04rem;
}

.infobx li:nth-child(1) {
    background-color: rgba(8, 21, 192, 0.9);
    color: #fff;
}
.infobx li:nth-child(2) {
    background-color: rgba(251, 197, 50, 0.9);
    color: #000;
}
.infobx li:nth-child(3) {
    background-color: rgba(214, 50, 51, 0.9);
    color: #fff;
}
.infobx li:nth-child(4) {
    background-color: rgba(38, 222, 129, 0.9);
    color: #000;
}