/* ===============================
   全局
================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

       background: linear-gradient(
        180deg,
        #050505 0%,
        #111111 45%,
        #1a1407 100%
    );

    font-family:"Microsoft YaHei";

    display:flex;

    justify-content:center;

    overflow-x:hidden;
     
}

/* 页面宽度 */

.phone{

    width:450px;

    max-width:100%;

    background:#000;

    position:relative;

    padding-bottom:120px;

}

/* ===============================
   顶部
================================== */

.top{

    width:100%;

}

.top img{

    width:100%;

    display:block;

}

/* ===============================
   Banner
================================== */

.banner{

    width:100%;

    position:relative;

}

.banner img{

    width:100%;

    display:block;

}

/* ===============================
   第一屏下载按钮
================================== */

.download-btn{

    position:absolute;

    left:50%;

    bottom:90px;

    transform:translateX(-50%);

    width:250px;

    height:62px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#fff;

    font-size:22px;

    font-weight:bold;

    border-radius:40px;

    background:linear-gradient(90deg,#ff5d00,#ff8800);

    box-shadow:0 0 25px rgba(255,120,0,.8);

    animation:download 1s infinite;

}

.download-btn:hover{

    transform:translateX(-50%) scale(1.05);

}

.icon{

    font-size:26px;

}

/* 呼吸动画 */

@keyframes download{

    0%{

        transform:translateX(-50%) scale(1);

    }

    50%{

        transform:translateX(-50%) scale(1.08);

    }

    100%{

        transform:translateX(-50%) scale(1);

    }

}

/* ===============================
   上滑提示
================================== */

.scroll-tip{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    font-size:16px;

    animation:upDown 1.2s infinite;

}

@keyframes upDown{

    50%{

        transform:translate(-50%,-6px);

    }

}

/* ===============================
   底部固定按钮
================================== */

.bottom{

    position:fixed;

    left:50%;

    transform:translateX(-50%);

    bottom:0;

    width:450px;

    max-width:100%;

    padding:10px;

    background:rgba(20,20,20,.95);

    backdrop-filter:blur(10px);

    border-top:1px solid rgba(255,255,255,.08);

    z-index:999;

}

.tips{

    display:flex;

    gap:10px;

}

.item{

    flex:1;

    text-align:center;

}

/* ===============================
   提示气泡
================================== */

.bubble{

    display:inline-block;

    padding:7px 15px;

    background:#ff2d55;

    color:#fff;

    font-size:13px;

    border-radius:20px;

    margin-bottom:8px;

    animation:bubble 1s infinite;

}

@keyframes bubble{

    50%{

        transform:translateY(-5px);

    }

}

/* ===============================
   两个按钮
================================== */

.listen-btn,
.download{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:52px;

    color:#fff;

    text-decoration:none;

    border-radius:12px;

    font-size:19px;

    font-weight:bold;

}

.listen-btn{

    background:linear-gradient(90deg,#00b894,#00d29b);

}

.download{

    background:linear-gradient(90deg,#ff6200,#ff9500);

}

.listen-btn:hover,
.download:hover{

    opacity:.9;

}
/* ===========================
   H5线路
=========================== */

.line-box{

    padding:20px 10px 20px;

    background:#090909;

}

.line-title{

    text-align:center;

    color:#FFD700;

    font-size:20px;

    font-weight:bold;

    margin-bottom:5px;

}

.recommend{

    text-align:center;

    color:#999;

    margin-bottom:25px;

}

.line-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#181818;

    border-radius:15px;

    margin-bottom:18px;

    padding:15px;

    transition:.3s;

}

.line-item:hover{

    transform:translateY(-3px);

}

.recommend-line{

    border:2px solid gold;

    box-shadow:0 0 20px rgba(255,215,0,.35);

}

.line-left{

    width:70px;

    text-align:center;

}

.signal{

    color:#00ff33;

    font-size:26px;

}

.ms{

    color:#00ff33;

    font-size:16px;

}

.ms.testing{

    color:#888;

    font-size:14px;

}

.ms.timeout{

    color:#ff3b30;

    font-size:16px;

}

.signal.dead{

    color:#555;

}

.line-name{

    flex:1;

    text-align:center;

    color:#fff;

    font-size:18px;

}

.hot{

    display:inline-block;

    margin-left:8px;

    background:#ff3b30;

    color:#fff;

    padding:2px 8px;

    border-radius:20px;

    font-size:12px;

}

.enter-btn{

    width:100px;

    height:45px;

    border-radius:10px;

    background:#1677ff;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

}

.enter-btn:hover{

    background:#4096ff;

}

.enter-btn.disabled{

    background:#333;

    color:#888;

    pointer-events:none;

    cursor:not-allowed;

}