/* =========================
   1. 全局基础设置
   ========================= */


/* 清除浏览器默认边距 */

*{
    margin:0;
    padding:0;

    /* 让宽高计算更加准确 */
    box-sizing:border-box;


    /* 全站字体 */

    font-family:
    "Microsoft YaHei",
    Arial,
    sans-serif;
}



/* 页面背景 */

body{

    /* 黑色背景 */

    background:#050505;


    /* 默认文字颜色 */

    color:#fff;

}





/* =========================
   2. 页面主体容器
   ========================= */


.container{


    /* 宽度100% */

    width:100%;


    /* 最大宽度450px

       手机不会撑满

       电脑保持居中

    */

    max-width:450px;


    /* 居中 */

    margin:auto;


    /* 上 左右 下 内边距 */

    padding:

    30px 15px 50px;

}





/* =========================
   3. 顶部宣传图片区域
   ========================= */



.banner{


    /* 方便里面文字绝对定位 */

    position:relative;



    width:100%;



    margin-top:20px;



    /* 超出隐藏 */

    overflow:hidden;


}





/* 顶部熊猫宣传图片 */

.banner-img{


    /* 图片占满容器 */

    width:100%;



    /* 自动高度 */

    height:auto;



    display:block;



    /* 防止变形 */

    object-fit:contain;


}





/* =========================
   4. 顶部文字覆盖层
   ========================= */


.banner-text{


    /* 文字浮在图片上 */

    position:absolute;



    /* 距离左边距离 */

    left:12px;



    /* 距离顶部 */

    top:45px;



    /* 保证显示在图片上面 */

    z-index:2;


}







/* =========================
   5. Logo区域
   51图片 + 吃瓜文字
   ========================= */



.logo-line{


    /* 图片和文字横向排列 */

    display:flex;



    /* 垂直居中 */

    align-items:center;



    /* 两者间距 */

    gap:8px;



    /* 淡入动画 */

    animation:

    fadeDown 1s ease;


}


@keyframes fadeDown{

    from{
        opacity:0;
        transform:translateY(-15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}






/* 51图片大小 */

.logo-img{


    width:70px;


    height:auto;


}





/* 吃瓜文字 */

.logo-word{


    /* 字体大小 */

    font-size:42px;



    /* 加粗 */

    font-weight:900;



    line-height:1;



    /* 粉色 */

    color:#ff237f;



    /* 字间距 */

    letter-spacing:1px;



    /* 发光效果 */

    text-shadow:


    0 0 10px rgba(255,0,120,.8);


}








/* =========================
   6. 主宣传标题
   ========================= */


/* 总控制 */

.main-title{


    /* 距离Logo */

    margin-top:35px;



    /* 字体 */

    font-family:

    "Arial Black",

    "Microsoft YaHei",

    sans-serif;



    /* 加粗 */

    font-weight:900;



    /* 横向压缩

       海报字体效果

    */

    transform:scaleX(.85);



    /* 从左边开始缩放 */

    transform-origin:left center;



    /* 字间距 */

    letter-spacing:1px;


}





/* 第一行白色文字

   例如：

   吃瓜热门

*/


.white-text{


    /* 文字大小 */

    font-size:34px;



    /* 行高 */

    line-height:1.1;



    color:#fff;



    /* 黑色描边 */

    -webkit-text-stroke:

    1.5px #050505;



    /* 阴影 */

    text-shadow:


    0 3px 0 #000,


    0 0 8px rgba(255,255,255,.3);


}






/* 第二行粉色区域 */

.pink-text{


    margin-top:2px;



    font-size:34px;



    line-height:1.1;



    font-weight:900;


}




/* 粉色文字 */

.pink-text span{


    /* 两个词横向排列 */

    display:inline-block;



    /* 粉色渐变 */

    background:


    linear-gradient(

    180deg,

    #ff5a9d,

    #ff0060

    );



    /* 文字裁剪渐变 */

    -webkit-background-clip:text;



    /* 隐藏原文字颜色 */

    -webkit-text-fill-color:transparent;



    /* 黑色描边 */

    -webkit-text-stroke:

    1.5px #050505;



    /* 发光 */

    text-shadow:


    0 3px 0 #000,


    0 0 10px rgba(255,0,100,.8);


}


/* 红色文字（网红吃瓜） */

.pink-text span.red{


    color:#ff1f1f;


    /* 覆盖基础粉色渐变 */

    background:none;

    -webkit-background-clip:border-box;

    background-clip:border-box;

    -webkit-text-fill-color:#ff1f1f;


    /* 去掉黑底上发糊的黑描边/黑投影 */

    -webkit-text-stroke:0;

    text-shadow:

    0 0 8px rgba(255,31,31,.8),

    0 0 18px rgba(255,0,0,.45);


}


/* 白色霓虹文字（万篇的长征路） */

.pink-text span.neon{


    color:#fff;


    /* 覆盖原粉色渐变 */

    background:none;

    -webkit-background-clip:border-box;

    background-clip:border-box;

    -webkit-text-fill-color:#fff;


    -webkit-text-stroke:0;


    /* 白色霓虹发光 */

    text-shadow:

    0 0 8px rgba(255,255,255,.85),

    0 0 18px rgba(255,255,255,.45);


    filter:none;


}






/* =========================
   7. 线路卡片
   ========================= */


/* 整个线路点击区域 */

.line-link{

    /* 去掉a标签默认下划线 */

    text-decoration:none;


    /* 继承文字颜色 */

    color:inherit;


    /* 整块可点击 */

    display:block;

}





.line-box{


    /* 与上方距离 */

    margin-top:18px;



    /* 粉色边框 */

    border:

    1px solid #ff237f;



    /* 圆角 */

    border-radius:12px;



    /* 内边距 */

    padding:14px 15px;



    /* 黑粉渐变背景 */

    background:


    linear-gradient(

    120deg,

    rgba(255,0,120,.08),

    rgba(0,0,0,.8)

    );



    /* 动画 */

    transition:.3s;



}





/* 鼠标悬停发光 */

.line-link:hover .line-box{


    box-shadow:


    0 0 15px rgba(255,0,120,.7);


}





/* 手机点击缩放效果 */

.line-link:active .line-box{


    transform:scale(.97);


}





/* 线路标题 */

.line-title{


    font-size:16px;

    font-weight:bold;

}





/* 标签 */

.tag{


    font-size:12px;


    padding:3px 8px;


    border-radius:5px;


    margin-left:8px;


    background:#00c878;


}





/* 正常状态 */

.ok{


    background:#00c878;


}





/* 网站地址 */

.url{


    color:#aaa;


    margin-top:6px;


    font-size:14px;


}



/* =========================
   8. 按钮区域
   ========================= */


.buttons{


    display:flex;


    gap:10px;


    margin-top:12px;


}





.btn{


    flex:1;


    height:45px;



    /* a标签当按钮用：内容居中并去掉下划线 */

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;



    border-radius:10px;



    border:1px solid #333;



    background:#111;



    color:white;



    font-size:14px;



    cursor:pointer;

}





/* 鼠标经过 */

.btn:hover{


    border-color:#ff237f;


}







/* =========================
   9. 公告区域
   ========================= */


.notice{


    margin-top:20px;


    height:70px;



    border-radius:12px;



    border:1px solid #222;



    display:flex;



    align-items:center;



    padding:12px;



    background:#080808;


}





.notice span{


    font-size:13px;


    color:#ddd;


}





.notice b{


    color:#ff277d;


}







/* =========================
   10. 底部导航
   ========================= */


.nav{


    margin-top:35px;


    display:flex;


    justify-content:space-around;


}





.nav-item{


    display:block;


    text-align:center;


    /* a标签当导航项用：去掉下划线，继承配色 */

    text-decoration:none;


    color:#ddd;


    font-size:12px;


    transition:color .2s;

}


.nav-item:hover{


    color:#ff237f;

}


.nav-item:hover .icon{


    border-color:#ff237f;

}





/* 圆形图标 */

.icon{


    width:42px;


    height:42px;


    border-radius:50%;



    border:1px solid #333;



    display:flex;



    align-items:center;



    justify-content:center;



    margin:0 auto 8px;



    font-size:20px;


}





/* =========================
   11. 底部版权
   ========================= */


.footer{


    margin-top:35px;



    text-align:center;



    font-size:12px;



    color:#777;



    line-height:25px;


}




.footer a{


    color:#ff237f;


}








/* =========================
   12. 手机适配
   ========================= */


@media(max-width:500px){


.container{


    padding:

    10px 15px 50px;


}



/* 图片文字位置 */

.banner-text{


    left:10px;


    top:35px;


}



/* Logo缩小 */

.logo-img{


    width:60px;


}



.logo-word{


    font-size:36px;


}



}





/* =========================
   13. 小屏手机
   例如 iPhone SE
   ========================= */


@media(max-width:380px){



.logo-img{


    width:50px;


}



.logo-word{


    font-size:30px;


}


}