/* =========================
   基础样式
========================= */

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


body{
    background:#ffffff;
    color:#333;
    font-family:
    "Microsoft YaHei",
    "PingFang SC",
    Arial,
    sans-serif;
    line-height:1.9;
}



/* =========================
   顶部导航
========================= */

header{

    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 25px;

    border-bottom:1px solid #eee;

    background:#fff;

}


.logo{

    font-size:20px;
    font-weight:bold;
    color:#222;

}



nav a{

    margin-left:25px;

    color:#555;

    text-decoration:none;

    font-size:15px;

}



nav a:hover{

    color:#000;

}




/* =========================
   主体文章
========================= */


main{

    max-width:900px;

    margin:40px auto;

    padding:0 20px;

}



.article{

    max-width:760px;

    margin:auto;

}



.breadcrumb{

    font-size:14px;

    color:#999;

    margin-bottom:25px;

}




h1{

    font-size:34px;

    line-height:1.4;

    text-align:center;

    color:#222;

    margin-bottom:20px;

}




.article-info{

    text-align:center;

    color:#999;

    font-size:14px;

    margin-bottom:30px;

}





/* =========================
   提示区域
========================= */


.warning{

    background:#fff8e8;

    border:1px solid #f5dfaa;

    padding:15px 20px;

    border-radius:8px;

    color:#866;

    font-size:14px;

    margin-bottom:30px;

}





.notice{

    background:#f7f7f7;

    padding:15px;

    border-radius:8px;

    color:#666;

}





/* =========================
   目录
========================= */


.toc{

    background:#fafafa;

    border:1px solid #eee;

    padding:20px;

    border-radius:10px;

    margin:30px 0;

}



.toc h3{

    font-size:18px;

    margin-bottom:10px;

}



.toc ul{

    list-style:none;

}



.toc li{

    margin:8px 0;

}



.toc a{

    color:#555;

    text-decoration:none;

}



.toc a:hover{

    color:#111;

}





/* =========================
   下载区域
========================= */


.download-box{

    background:#f6f8fa;

    border-radius:10px;

    padding:20px;

    margin:30px 0;

}



.download-box p{

    margin-bottom:10px;

}



.download-box a{

    display:inline-block;

    background:#333;

    color:#fff;

    padding:8px 18px;

    border-radius:6px;

    text-decoration:none;

    font-size:14px;

}


.download-box a:hover{

    opacity:.8;

}





/* =========================
   正文
========================= */


.article p{

    font-size:17px;

    margin:24px 0;

    color:#333;

}



.article h2{

    font-size:25px;

    margin-top:50px;

    margin-bottom:20px;

    padding-left:15px;

    border-left:4px solid #333;

    color:#222;

}



.chapter{

    margin-top:30px;

}






/* =========================
   来源说明
========================= */


.source{

    margin-top:50px;

    padding:20px;

    background:#fafafa;

    border-radius:8px;

    color:#888;

    font-size:14px;

}





/* =========================
   上下篇
========================= */


.article-nav{

    margin-top:40px;

    padding-top:20px;

    border-top:1px solid #eee;

    display:flex;

    justify-content:space-between;

}



.article-nav a{

    color:#666;

    text-decoration:none;

    font-size:14px;

}



.article-nav a:hover{

    color:#000;

}







/* =========================
   页脚
========================= */


footer{

    margin-top:80px;

    padding:35px 20px;

    text-align:center;

    background:#fafafa;

    color:#999;

    border-top:1px solid #eee;

    font-size:14px;

}



footer p{

    margin:0;

}







/* =========================
   手机端优化
========================= */


@media(max-width:768px){


header{

    padding:0 15px;

}


.logo{

    font-size:18px;

}



nav a{

    margin-left:12px;

    font-size:14px;

}



main{

    margin-top:25px;

    padding:0 15px;

}



h1{

    font-size:26px;

}



.article p{

    font-size:16px;

    line-height:1.9;

}



.article h2{

    font-size:21px;

}



.article-nav{

    flex-direction:column;

    gap:15px;

}



}