body{
    margin:0;
    font-family:Arial;
    background:#0b0b0f;
    display:flex;
    justify-content:center;
}

/* 主容器 */
.wrapper{
    width:100%;
    max-width:420px;
    background:#000;
    min-height:100vh;
    color:#fff;
}

/* PC优化 */
@media (min-width:768px){
    body{
        background: radial-gradient(circle,#1a1a2e,#000);
    }
    .wrapper{
        margin:30px 0;
        border-radius:20px;
        overflow:hidden;
        box-shadow:0 0 40px rgba(0,0,0,0.8);
    }
}

/* 头部 */
.header{
    background: linear-gradient(90deg,#ff00cc,#3333ff);
    padding:15px;
    display:flex;
    align-items:center;
}
.logo{
    width:160px;
    height:auto;
}

.header{
    background: linear-gradient(90deg,#ff00cc,#3333ff);
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:space-between; /* 关键：左右分开 */
}

/* 右上角域名 */
.domain{
    color:#fff;
    font-size:28px;
    font-weight:bold;
    text-shadow:0 0  10px rgba(255,255,255,0.8);
}

.title{
    font-size:22px;
    font-weight:bold;
}
.title span{
    color:#ffe600;
}

/* banner */
.banner{
    margin:15px;
    border-radius:15px;
    overflow:hidden;
}
.banner img{
    width:100%;
}

/* 轮播容器 */
.slider{
    position:relative;
    overflow:hidden;
    border-radius:15px;
}

/* 图片横排 */
.slides{
    display:flex;
    transition:transform 0.4s ease;
}

/* 每张图 */
.slides img{
    width:100%;
    flex-shrink:0;
}

/* 圆点 */
.dots{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
}

.dots span{
    width:8px;
    height:8px;
    background:#fff;
    opacity:0.5;
    border-radius:50%;
    cursor:pointer;
}

.dots .active{
    opacity:1;
    background:#ffe600;
}

/* 提示 */
.notice{
    font-size:12px;
    color:#bbb;
    padding:0 15px;
}

/* 列表 */
.item{
    display:flex;
    align-items:center;
    margin:10px 15px;
}
.ping{
    width:60px;
    border:2px solid #00cfff;
    border-radius:10px;
    text-align:center;
    padding:5px;
}
.route{
    flex:1;
    border:2px solid #ff4fd8;
    border-radius:10px;
    margin:0 10px;
    padding:10px;
    text-align:center;
}
.btn{
    width:90px;
    background:#8fd3ff;
    color:#000;
    border-radius:10px;
    text-align:center;
    padding:10px;
    cursor:pointer;
    transition:0.2s;
}
.btn:hover{
    transform:scale(1.05);
}



/* 底部 */
.footer{
    font-size:15px;
    color:#ffffff;
    text-align:center;
    padding:10px 20px;
}
.footer span{
    color:#ffe600;
}

.notice{
    overflow:hidden;
    white-space:nowrap;
    padding:10px 15px;
    color:#ccc;
    font-size:13px;
    position:relative;
}

.notice{
    margin:10px 15px;
    padding:10px 15px;
    background:#0d0d0d;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    overflow:hidden;
    white-space:nowrap;
    color:#ffffff;
    font-size:13px;
}

.notice{
    margin:10px 15px;
    padding:12px 15px;
    background:#99345d; /* 背景颜色 */
    border-radius:10px;
    overflow:hidden;

    display:flex;            /* 关键 */
    align-items:center;      /* 垂直居中 */
}

/* 核心：用flex实现无缝 */
.marquee{
    display:flex;
    align-items:center;   /* 关键：撑满高度 */
    white-space:nowrap;
    animation:marquee 7s linear infinite;
}

/* 每段文字间隔 */
.marquee span{
    margin-right:50px;
}

/* 动画 */
@keyframes marquee{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

.kf{
    margin:20px;
    text-align:center;
    animation:scalePulse 1.5s infinite; /* 可保留呼吸效果 */
}

@keyframes scalePulse{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.05);
    }
    100%{
        transform:scale(1);
    }
}

/* 图片按钮 */
.kf img{
    width:100%;
    max-width:350px;
    display:block;
    margin:0 auto;
}