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


body{

font-family:
"Inter",
"Microsoft Yahei",
Arial;

background:#f7f8fc;

color:#222;

line-height:1.8;

}



.site-header{


height:70px;

background:#fff;

border-bottom:1px solid #eee;

position:sticky;

top:0;

z-index:99;


}


.header-inner{

max-width:1200px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

height:100%;


}



/* logo区域 */
.logo{

    display:flex;

    align-items:center;

}


/* logo图片 */
.logo img{

    display:block;

    width:auto;

    max-width:180px;

    height:55px;

    object-fit:contain;

}



/* 头部布局 */
.site-header{

    height:72px;

    background:#fff;

    border-bottom:1px solid #eee;

}



.header-inner{

    max-width:1200px;

    height:100%;

    margin:0 auto;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



/* 手机端 */
@media(max-width:768px){


.site-header{

    height:60px;

}



.header-inner{

    padding:0 15px;

}



/* 移动端logo */
.logo img{


    max-width:150px;


    height:40px;


}



}


nav a{

margin-left:30px;

color:#555;

}



.ep-container{

max-width:1200px;

margin:30px auto;

}



.ep-breadcrumb{

font-size:14px;

margin-bottom:20px;

color:#888;

}



.ep-layout{

display:grid;

grid-template-columns:
1fr 320px;

gap:30px;

}



.ep-content{


background:#fff;

padding:35px;

border-radius:18px;

box-shadow:
0 10px 30px rgba(0,0,0,.05);


}



.article-title{

font-size:36px;

line-height:1.3;

font-weight:700;

}



.article-info{

color:#888;

font-size:14px;

margin:20px 0;

}



.article-body{

font-size:17px;

}



.article-body img{

max-width:100%;

height:auto;

}




.article-tags a{


display:inline-block;

background:#f0f4ff;

padding:5px 12px;

border-radius:20px;

margin:5px;

}



.article-nav{


margin-top:40px;

padding-top:20px;

border-top:1px solid #eee;

}



.ep-sidebar{


background:#fff;

padding:20px;

border-radius:18px;

height:max-content;


}



.side-box h3{

margin-bottom:15px;

}



.side-box a{

display:block;

padding:8px 0;

color:#555;

}



.site-footer{


background:#111;

color:#aaa;

margin-top:60px;

padding:50px 0;


}


.footer-inner{

max-width:1200px;

margin:auto;

display:flex;

justify-content:space-between;

}



.copyright{

text-align:center;

margin-top:30px;

}




@media(max-width:768px){


.ep-layout{

display:block;

}


.ep-sidebar{

display:none;

}



.article-title{

font-size:26px;

}



.ep-content{

padding:20px;

}


nav{

display:none;

}



}







/* 页面主体 */
.ep-container{
    max-width:1200px;
    margin:30px auto;
    padding:0 20px;
}


/* 面包屑 */
.ep-breadcrumb{
    max-width:900px;
    margin:0 auto 25px;
    font-size:14px;
    color:#888;
}


.ep-breadcrumb a{
    color:#666;
    text-decoration:none;
}


.ep-breadcrumb span{
    margin:0 8px;
}



/* 单文章布局 */
.ep-layout{

    display:block;

    width:100%;

}



/* 文章主体居中 */
.ep-content{

    max-width:1200px;

    margin:0 auto;

    background:#fff;

    padding:40px 50px;

    border-radius:18px;

    box-shadow:
    0 8px 30px rgba(0,0,0,.05);

}



/* 标题 */
.article-title{

    font-size:36px;

    line-height:1.4;

    text-align:center;

    font-weight:700;

    color:#111;

    margin-bottom:20px;

}



/* 作者信息 */
.article-info{

    text-align:center;

    color:#999;

    font-size:14px;

    padding-bottom:25px;

    border-bottom:1px solid #eee;

}


.article-info span{

    margin:0 12px;

}



/* 正文区域 */
.article-body{


    margin-top:35px;


    font-size:17px;


    color:#333;


    line-height:2;


}



//* ===============================
   新闻正文内容样式
   =============================== */

.article-content {
    font-size: 16px;
    line-height: 1.9;
    color: #333;
    word-break: break-word;
}


/* 段落 */
.article-content p {
    margin: 0 0 20px;
}


/* ===============================
   H2 一级章节标题
   =============================== */

.article-content h2 {
    position: relative;
    margin: 40px 0 22px;
    padding-left: 16px;
    font-size: 26px;
    line-height: 1.4;
    color: #222;
    font-weight: 700;
}

.article-content h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 26px;
    background: #1677ff;
    border-radius: 3px;
}


/* ===============================
   H3 二级标题
   =============================== */

.article-content h3 {
    margin: 32px 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 21px;
    line-height: 1.5;
    color: #333;
    font-weight: 600;
}


/* ===============================
   H4三级标题
   =============================== */

.article-content h4 {
    margin: 26px 0 15px;
    font-size: 18px;
    color: #444;
    font-weight: 600;
}


/* ===============================
   H5标题
   =============================== */

.article-content h5 {
    margin: 20px 0 12px;
    font-size: 16px;
    color: #555;
    font-weight: 600;
}


/* ===============================
   列表 ul li
   =============================== */

.article-content ul {
    margin: 20px 0;
    padding-left: 25px;
}


.article-content ul li {
    margin-bottom: 12px;
    line-height: 1.8;
    position: relative;
}


/* 自定义圆点 */

.article-content ul li::marker {
    color: #1677ff;
}


/* 有序列表 */

.article-content ol {
    margin:20px 0;
    padding-left:30px;
}


.article-content ol li {
    margin-bottom:12px;
}



/* ===============================
   表格 TABLE
   =============================== */

.article-content table {
    width:100%;
    border-collapse:collapse;
    margin:30px 0;
    background:#fff;
    font-size:15px;
}


/* 表头 */

.article-content table th {
    background:#f5f7fa;
    color:#222;
    font-weight:600;
    padding:14px 12px;
    border:1px solid #e5e7eb;
    text-align:center;
}


/* 单元格 */

.article-content table td {
    padding:12px;
    border:1px solid #e5e7eb;
    color:#555;
    text-align:center;
}


/* 鼠标经过 */

.article-content table tr:hover {
    background:#fafafa;
}



/* ===============================
   图片
   =============================== */

.article-content img {
    max-width:100%;
    height:auto;
    display:block;
    margin:25px auto;
}



/* ===============================
   引用
   =============================== */

.article-content blockquote {
    margin:25px 0;
    padding:15px 20px;
    background:#f8f9fa;
    border-left:4px solid #1677ff;
    color:#666;
}



/* ===============================
   链接
   =============================== */

.article-content a {
    color:#1677ff;
    text-decoration:none;
}

.article-content a:hover {
    text-decoration:underline;
}



/* ===============================
   移动端
   =============================== */

@media(max-width:768px){

    .article-content {
        font-size:15px;
        line-height:1.8;
    }


    .article-content h2 {
        font-size:22px;
        margin-top:30px;
    }


    .article-content h3 {
        font-size:19px;
    }


    .article-content table {
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }


    .article-content table th,
    .article-content table td {
        padding:10px;
        font-size:14px;
    }


    .article-content ul {
        padding-left:20px;
    }

}


.article-body table td,
.article-body table th{

    border:1px solid #eee;

    padding:10px;

}







/* 上下篇 */
.article-nav{

    margin-top:40px;

    padding-top:20px;

    border-top:1px solid #eee;

}


.article-nav div{

    padding:8px 0;

}



/* 手机端 */
@media(max-width:768px){


.ep-container{

    padding:0 15px;

}


.ep-content{


    padding:25px 20px;


    border-radius:12px;


}



.article-title{

    font-size:26px;

}


.article-body{

    font-size:16px;

}


.article-info span{

    display:block;

    margin:5px 0;

}



}