html, body { display: flex; flex-direction: column; margin: 0; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: 14px; color: #222529; font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, sans-serif, Apple Color Emoji, Segoe UI emoji; line-height: 1.5; background: #fff; font-feature-settings: "tnum"; }
body { height: 100vh }
a { color: #333 }
a:hover { color: #333; text-decoration: none }
.top_nav { height: 56px; flex-shrink: 0; padding: 12px 30px; border-bottom: 1px solid #f1f2f4 }
.top_nav .logo { height: 100% }
.top_nav .logo img { width: auto; height: 100% }
.article_main { display: block; flex: 1; width: 100%; overflow: hidden auto; }
.article_main::-webkit-scrollbar, .article_main .main_page .l_part::-webkit-scrollbar { width: 8px; height: 8px }
.article_main::-webkit-scrollbar-thumb, .article_main .main_page .l_part::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 8px; outline-offset: -2px; -moz-opacity: .5; -khtml-opacity: .5; opacity: .5 }
.article_main::-webkit-scrollbar-thumb:hover, .article_main .main_page .l_part::-webkit-scrollbar-thumb:hover { background-color: #b8b8b8; border-radius: 8px }
.article_main .article-page { display: flex; flex-direction: column; width: 1200px; padding: 0; margin: 0 auto }
.article_main .top_page { padding: 32px 0 10px; border-bottom: 1px solid rgba(204, 204, 204, .5); background: #fff; z-index: 1; position: sticky; top: 0; }
.article_main .top_page .title { font-size: 32px; font-weight: 500; }
.article_main .main_page { display: flex; flex: 1 }
.article_main .main_page .l_part { position: sticky; top: 91px; flex-shrink: 0; height: calc(100vh - 147px); padding: 24px 0; overflow: hidden auto; }
.article_main .main_page .l_part .menu { display: flex; flex-direction: column; gap: 5px; padding: 0 16px 0 0; width: 288px; height: 100%; border-right: 1px solid rgba(0, 0, 0, .08); }
.article_main .main_page .l_part .menu .item { display: flex; flex-direction: column; cursor: pointer; }
.article_main .main_page .l_part .menu .item:hover i { color: #50be80 }
.article_main .main_page .l_part .menu .item span { display: flex; height: 40px; align-items: center; padding: 6px 0 }
.article_main .main_page .l_part .menu .item i { font-size: 14px; font-weight: 700; margin-right: 10px; transition: all 0.3s }
.article_main .main_page .l_part .menu .item.open i { transform: rotate(90deg) }
.article_main .main_page .l_part .menu .item li { position: relative; padding: 0 0 0 24px; height: 40px; line-height: 40px; margin-bottom: 5px; word-break: keep-all; overflow: hidden; }
.article_main .main_page .l_part .menu .item li.active { background: #f1f2f4; border-radius: 8px }
.article_main .main_page .l_part .menu .item li .idot { position: absolute; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; padding: 0; background: #000; border-radius: 100%; }
.article_main .main_page .l_part .menu .item li .title { height: 100%; margin-left: 16px; text-overflow: ellipsis; overflow: hidden; }
.article_main .main_page .l_part .menu .item ul { display: none }
.article_main .main_page .l_part .menu .item.open ul { display: block; }
.article_main .main_page .r_part { flex: 1; padding: 24px 0; margin-left: 40px }
.article_main .main_page .r_part .title { font-size: 32px; font-weight: 700; margin-bottom: 8px; }
.article_main .main_page .r_part .time { margin-bottom: 32px; font-size: 14px; color: #7f8792; }
.article_main .main_page .r_part .content {font-size: 14px;line-height: 1.5;color: #333}
.article_main .main_page .r_part .content h2 {font-size: 24px; line-height: 32px; font-weight: 700; margin: 1em 0;padding: 0}
.article_main .main_page .r_part .content h3 {font-size: 20px; line-height: 28px; font-weight: 700; margin: 1em 0;;padding: 0}
.article_main .main_page .r_part .content p {font-size: 15px;line-height: 1.75;margin: 0 0 0.5em}
.article_main .main_page .r_part .content p img {border: 1px solid rgba(204, 204, 204, .5); padding: 8px; border-radius: 8px; overflow: hidden;}