/* ==================================================
   Global Reset
================================================== */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}



html {
    scroll-behavior: smooth;
}



body {
    background: #ffffff;
    color: #1e293b;
    line-height: 1.8;
    overflow-x: hidden;
}



a {
    text-decoration: none;
    color: inherit;
}



img {
    max-width: 100%;
}







/* ==================================================
   Header
================================================== */


header {
    height: 78px;
    padding: 0 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 8px 30px rgba(15,23,42,.08);
}



.logo {
    font-size: 28px;
    font-weight: 900;
    color: #2563eb;
}



nav {
    display: flex;
    align-items: center;
}



    nav a {
        margin-left: 35px;
        font-size: 16px;
        color: #334155;
        font-weight: 500;
        position: relative;
        transition: .3s;
    }



        nav a:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 0;
            height: 2px;
            background: #2563eb;
            transition: .3s;
        }



        nav a:hover {
            color: #2563eb;
        }



            nav a:hover:after {
                width: 100%;
            }



        /* 当前选中状态 */
        nav a.active {
            color: #1677ff;
            font-weight: 600;
        }


            /* 当前选中底部线 */
            nav a.active::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 3px;
                background: #1677ff;
                border-radius: 3px;
            }


            /* active时关闭动画覆盖 */
            nav a.active::before {
                display: none;
            }

.menu {
    display: none;
    font-size: 30px;
    color: #2563eb;
}









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


/* =================================================
   News Banner 新闻页Banner
================================================= */

.news-banner {
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 10%;
    color: white;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background-image: url("../picture/news-banner-bg.png");
    background-size: cover;
    background-position: center;
}


    /* 背景图片透明遮罩 */

    .news-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(15,40,90,.85), rgba(37,99,235,.75), rgba(79,70,229,.65) );
        z-index: 1;
    }



    /* 内容层 */

    .news-banner > * {
        position: relative;
        z-index: 2;
    }



    /* 标题 */

    .news-banner h1 {
        font-size: 46px;
        font-weight: 900;
        line-height: 1.3;
        margin-bottom: 25px;
        color: white;
    }



    /* 描述文字 */

    .news-banner p {
        max-width: 900px;
        margin: 0 auto 35px;
        font-size: 18px;
        line-height: 1.8;
        color: rgba(255,255,255,.95);
    }



    /* 按钮 */

    .news-banner a {
        display: inline-block;
        padding: 14px 38px;
        background: white;
        color: #2563eb;
        border-radius: 50px;
        font-weight: 700;
        text-decoration: none;
        transition: .3s;
    }



        .news-banner a:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,.25);
        }





    .news-banner:before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        background: rgba(255,255,255,.12);
        border-radius: 50%;
        right: -150px;
        top: -150px;
    }



.news-banner-content {
    position: relative;
    z-index: 2;
}



.news-banner h1 {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 25px;
}



.news-banner p {
    max-width: 850px;
    margin: auto;
    font-size: 19px;
    color: #f8fafc;
}




.banner-keywords {
    margin-top: 30px;
}



    .banner-keywords span {
        display: inline-block;
        padding: 8px 18px;
        margin: 5px;
        border-radius: 30px;
        background: rgba(255,255,255,.18);
        font-size: 14px;
    }








/* ==================================================
   Category
================================================== */


.category {
    padding: 80px 10%;
    text-align: center;
}



    .category h2,
    .news-container h2,
    .hot-news h2,
    .seo-content h2 {
        font-size: 38px;
        font-weight: 900;
        color: #0f172a;
        margin-bottom: 20px;
    }



    .category p {
        color: #64748b;
        margin-bottom: 35px;
    }




.category-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}



.category-btn {
    border: none;
    background: #f1f5f9;
    color: #334155;
    padding: 12px 28px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 15px;
    transition: .3s;
}



    .category-btn:hover,
    .category-btn.active {
        background: #2563eb;
        color: white;
    }









/* ==================================================
   Hot News
================================================== */


.hot-news {
    padding: 80px 10%;
    background: #f8fafc;
    text-align: center;
}




.hot-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}



    .hot-grid div {
        background: white;
        padding: 35px;
        border-radius: 22px;
        text-align: left;
        box-shadow: 0 10px 35px rgba(15,23,42,.08);
        transition: .35s;
    }



        .hot-grid div:hover {
            transform: translateY(-10px);
        }



    .hot-grid span {
        display: inline-block;
        background: #ef4444;
        color: white;
        padding: 4px 15px;
        border-radius: 30px;
        font-size: 12px;
    }



    .hot-grid h3 {
        margin: 20px 0;
        color: #2563eb;
        font-size: 21px;
    }



    .hot-grid p {
        color: #64748b;
        font-size: 15px;
    }



    .hot-grid a {
        display: inline-block;
        margin-top: 20px;
        color: #2563eb;
        font-weight: 600;
    }










/* ==================================================
   News List
================================================== */


.news-container {
    padding: 90px 10%;
    text-align: center;
}



.news-intro {
    color: #64748b;
    max-width: 900px;
    margin: 0 auto 50px;
}




.news-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    text-align: left;
}




.news-card {
    background: white;
    padding: 30px;
    border-radius: 22px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 35px rgba(15,23,42,.06);
    transition: .35s;
}



    .news-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(37,99,235,.15);
    }




.news-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 14px;
}




    .news-meta span {
        color: #2563eb;
        background: #eff6ff;
        padding: 3px 12px;
        border-radius: 20px;
    }



    .news-meta time {
        color: #94a3b8;
    }




.news-card h3 {
    font-size: 21px;
    color: #0f172a;
    margin-bottom: 15px;
}



.news-card p {
    color: #64748b;
    font-size: 15px;
}




.news-footer {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}



    .news-footer span {
        color: #94a3b8;
        font-size: 13px;
    }



    .news-footer a {
        color: #2563eb;
        font-weight: 600;
    }









/* ==================================================
 Pagination
================================================== */


.pagination-area {
    padding: 40px 0;
    text-align: center;
}



.pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
}



.page-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    cursor: pointer;
    transition: .3s;
}



    .page-btn:hover,
    .page-btn.active {
        background: #2563eb;
        color: white;
    }









/* ==================================================
 SEO Content
================================================== */


.seo-content {
    padding: 80px 10%;
    background: #f8fafc;
}



    .seo-content p {
        max-width: 1000px;
        margin: 20px auto;
        color: #475569;
        font-size: 17px;
    }









/* ==================================================
 Fly Button
================================================== */


.fly-button {
    position: fixed;
    right: 35px;
    bottom: 120px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient( 135deg, #2563eb, #7c3aed );
    color: white;
    font-size: 28px;
    box-shadow: 0 15px 35px rgba(37,99,235,.35);
    z-index: 999;
    transition: .35s;
}



    .fly-button:hover {
        transform: translateY(-8px) rotate(15deg);
    }









/* ==================================================
 Footer
================================================== */


footer {
    background: #0f172a;
    color: #cbd5e1;
    padding: 60px 10% 25px;
}



.footer-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 50px;
}



footer h3,
footer h4 {
    color: white;
    margin-bottom: 20px;
}



.footer-links a {
    display: block;
    margin-bottom: 10px;
    color: #cbd5e1;
}



    .footer-links a:hover {
        color: white;
    }



.footer-bottom {
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.15);
    text-align: center;
    font-size: 14px;
}









/* ==================================================
 Mobile
================================================== */


@media(max-width:768px) {



    header {
        padding: 0 20px;
    }



    .logo {
        font-size: 24px;
    }



    nav {
        display: none;
        position: absolute;
        top: 78px;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 20px;
    }



        nav a {
            margin: 0;
            padding: 12px 0;
            width: 100%;
            border-bottom: 1px solid #eee;
        }



    .menu {
        display: block;
    }



    .news-banner {
        padding: 70px 25px;
    }



        .news-banner h1 {
            font-size: 32px;
        }



        .news-banner p {
            font-size: 16px;
        }



    .category,
    .news-container,
    .hot-news,
    .seo-content {
        padding: 60px 25px;
    }




        .category h2,
        .news-container h2,
        .hot-news h2,
        .seo-content h2 {
            font-size: 30px;
        }




    .hot-grid,
    .news-list,
    .footer-container {
        grid-template-columns: 1fr;
    }



    .news-card {
        padding: 25px;
    }



    .fly-button {
        width: 52px;
        height: 52px;
        right: 20px;
        bottom: 80px;
    }
}