@charset "UTF-8";
/*
Theme Name: Document
Theme URI: https://nicen.cn
Author: 友人a丶
Author URI: https://nicen.cn
Description: 一个基于文档类型的博客主题，更加方便的记录、查询学习笔记
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Document
Tags: 文档,自适应,主题切换,阅读进度跟随
*/
/* 基于1920*938的窗口  */
/*主题变量*/
/*
  主题所有变量
*/
:root {
  /*基础样式变量*/
  --theme-text-super-mini: 0.4rem;
  --theme-text-mini: 0.76rem;
  --theme-text-more-mini: 0.69rem;
  --theme-text: 0.84rem;
  --theme-header-size: 1.1rem;
  --theme-secondary: 0.78rem;
  --theme-first-level-title: 1.35rem;
  --theme-secondary-level-title: 1.15rem;
  --theme-third-level-title: 0.96rem;
  --theme-fourth-level-title: 0.84rem;
  /*主题文件样式变量*/
  --theme-black-text: #333;
  --theme-white: #f5f7fd;
  --theme-black: #333;
  --theme-color: #3eaf7c;
  --theme-color-20: rgba(66, 185, 131, 0.2);
  --theme-text-color: #262626;
  --theme-text-secondary: rgba(0, 0, 0, 0.65);
  --theme-text-mini-color: rgba(0, 0, 0, 0.65);
  --theme-margin-bottom: 1rem;
  --theme-margin-bottom-max: 1.1rem;
  --theme-li-padding: 1.2rem;
  --theme-bg-color: var(--theme-white);
  --theme-pre: #ccc;
  --theme-front-main-color: #fff;
  --theme-front-color: #fafbfc;
  --theme-header-color: var(--theme-color);
  --theme-header-border: #e1e1e1;
  --theme-hover-bg: #444;
  --theme-hover-color: white;
  --theme-hover-shadow: rgba(0, 0, 0, 0.1);
  --theme-code-bg: #eeeeee;
  --theme-code-text: #4e6e8e;
  /*文字块样式变量*/
  --theme-success-bg-color: #f3f4f5;
  --theme-success-line-color: #42b983;
  --theme-success-title-color: #2c3e50;
  --theme-success-text-color: #2c3e50;
  --theme-alert-bg-color: #fffae3;
  --theme-alert-title-color: #ad9000;
  --theme-alert-line-color: #e7c000;
  --theme-alert-text-color: #746000;
  --theme-error-bg-color: #ffe0e0;
  --theme-error-title-color: #990000;
  --theme-error-line-color: #cc0000;
  --theme-error-text-color: #660000;
  /*文章导航、目录样式变量*/
  --theme-first-index-title: 0.78rem;
  --theme-secondary-index-title: 0.78rem;
  --theme-third-index-title: 0.78rem;
  /*代码块样式*/
  --theme-pre-code-bg: #f7f7f7;
  --theme-pre-code-shadow: #fff;
  /*底部标签样式变量*/
  --theme-label-bg: #aaa;
  --theme-label-color: #fff;
  --theme-label-hover: #8d8d8d;
  --theme-emoji-size: 1.3rem;
  --theme-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.22);
  --theme-placeholder: #a4a4a4; }

.theme-one {
  --theme-color: #f5222d !important; }

.theme-two {
  --theme-color: #fa541c !important; }

.theme-three {
  --theme-color: #fadb14 !important; }

.theme-four {
  --theme-color: #3eaf7c !important; }

.theme-five {
  --theme-color: #13c2c2 !important; }

.theme-six {
  --theme-color: #1890ff !important; }

.theme-seven {
  --theme-color: #722ed1 !important; }

.theme-eight {
  --theme-color: #eb2f96 !important; }

/* 变量 */
/*暗黑模式变量*/
/*
  暗黑模式变量
*/
.dark {
  --theme-text-color: rgba(255, 255, 255, 0.87);
  --theme-black-text: white;
  --theme-bg-color: var(--theme-black);
  /*
    暗黑模式，导航栏样式
  */
  --theme-header-bg-color: #141414;
  --theme-header-font-color: white;
  --theme-sub-menu-bg-color: #141414;
  --theme-sub-menu-font-color: white;
  --theme-header-border-color: transparent;
  --theme-header-shadow-color: transparent;
  /*
    页脚
  */
  --theme-footer-bg-color: transparent;
  --theme-footer-font-color: white;
  --theme-text-secondary: rgba(235, 235, 235, 0.99);
  --theme-hover-bg: var(--theme-text-color);
  --theme-hover-color: var(--theme-black);
  --theme-front-color: #2a2a2b;
  --theme-text-mini-color: rgba(235, 235, 235, 0.99);
  --theme-hover-shadow: rgba(223, 223, 223, 0.5);
  --theme-header-color: #141414;
  --theme-header-border: #141414;
  --theme-front-main-color: #2a2a2b;
  --theme-pre: rgba(255, 255, 255, 0.87);
  --theme-pre-code-bg: #141414;
  --theme-pre-code-shadow: transparent;
  --theme-label-bg: #141414;
  --theme-label-hover: #2a2a2b; }

/*图标库*/
/*标题字体库*/
@font-face {
  font-family: 'webfont';
  font-weight: 400;
  src: url("./assets/font/jvCAx4yMYVNwLkPwjfDmG.woff2") format("woff2"), url("./assets/font/jvCAx4yMYVNwLkPwjfDmG.woff") format("woff"); }

/*图标库*/
@font-face {
  font-family: "iconfont";
  /* Project id 3434890 */
  src: url("data:application/x-font-woff2;charset=utf-8;base64,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") format("woff2"); }

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-biaoqing:before {
  content: "\e600"; }

.icon-biaoqian:before {
  content: "\e602"; }

.icon-chenggong:before {
  content: "\e686"; }

.icon-fuzhi:before {
  content: "\e8b0"; }

.icon-yueliang:before {
  content: "\e631"; }

.icon-loading:before {
  content: "\e891"; }

.icon-daohangmoren:before {
  content: "\e606"; }

.icon-cha:before {
  content: "\e65d"; }

.icon-xiala:before {
  content: "\e6b9"; }

.icon-zhankai:before {
  content: "\e677"; }

.icon-anhei:before {
  content: "\ea4f"; }

.icon-shezhi1:before {
  content: "\e654"; }

.icon-baitian-qing:before {
  content: "\e672"; }

.icon-baitian-qing-copy:before {
  content: "\ea50"; }

.icon-you-copy-copy-copy:before {
  content: "\e652"; }

.icon-shangyi:before {
  content: "\e692"; }

.icon-xiangxiazhankai1:before {
  content: "\e662"; }

.icon-daohang-caidan:before {
  content: "\e60e"; }

.icon-icon-test:before {
  content: "\e6e7"; }

.icon-pinglun1:before {
  content: "\e629"; }

.icon-shijian:before {
  content: "\e612"; }

.icon-chuangzuozhejieshao:before {
  content: "\e622"; }

.icon-wodewo:before {
  content: "\e6df"; }

.icon-pinglun:before {
  content: "\e6f5"; }

.icon-shouye:before {
  content: "\e6dd"; }

.icon-bijijilu:before {
  content: "\e6f3"; }

.icon-jihua:before {
  content: "\e722"; }

.icon-shoucang:before {
  content: "\e72c"; }

.icon-fenlei:before {
  content: "\e739"; }

.icon-fenxiangzhuanfa:before {
  content: "\e74f"; }

.icon-sousuo:before {
  content: "\e626"; }

/*动画效果*/
/*
  站点用到的动画
*/
@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(180deg); }
  to {
    transform: rotate(360deg); } }

/*公共初始化*/
/*
公共初始化
*/
* {
  font-size: var(--theme-text);
  color: var(--theme-text-color);
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--theme-color) var(--theme-bg-color);
  line-height: 1.75;
  word-wrap: break-word;
  word-break: break-all;
  word-spacing: normal;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; }

pre * {
  color: #65a4e3; }

p {
  margin: 0 0 var(--theme-margin-bottom) 0;
  font-weight: normal; }

::selection {
  background-color: var(--theme-color);
  color: white; }

/*
  滚动条样式
*/
::-webkit-scrollbar {
  -webkit-appearance: none;
  background: transparent;
  width: 6px !important;
  height: 6px !important; }

:hover::-webkit-scrollbar-thumb {
  display: block;
  border-radius: 4px;
  box-shadow: 0 0 0 2px transparent; }

::-webkit-scrollbar-thumb {
  background: var(--theme-color);
  border-radius: 4px;
  border-style: solid;
  border-color: transparent;
  border-width: 2px;
  background-clip: padding-box; }

/*
  文字提示
*/
.tooltip {
  position: relative; }
  .tooltip:hover:before {
    position: absolute;
    top: calc(100% + 5px);
    left: 5%;
    width: 0;
    height: 0;
    content: " ";
    border: 5px solid transparent;
    border-bottom-color: #2c3e50; }
  .tooltip:hover:after {
    position: absolute;
    top: calc(100% + 0.81rem);
    left: 1%;
    z-index: 100;
    padding: 10px 0.81rem;
    box-shadow: 0 0 5px 1px rgba(44, 62, 80, 0.5);
    font-size: 0.5rem;
    color: white;
    content: attr(data-hint);
    background-color: #2c3e50;
    white-space: nowrap;
    line-height: 1.5;
    letter-spacing: 1px;
    border-radius: 0.45rem; }

/*
  弹性布局
*/
/*正常的所有样式*/
/*
  正常样式
*/
/*
  网页样式
*/
html {
  min-width: 1100px;
  -webkit-font-smoothing: antialiased; }
  html body {
    background-color: var(--theme-bg-color);
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
    /*
      定义最小高度
    */
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    /*
      全局标题
    */
    /*
      顶部导航栏
    */
    /*请输入密码样式*/
    /*
      网页容器
    */
    /*
      悬浮工具
    */
    /*
      首页容器
     */ }
    html body h1, html body h2, html body h3, html body h4 {
      font-weight: 550;
      cursor: pointer;
      margin: 0 0 var(--theme-margin-bottom) 0; }
    html body h1 {
      font-weight: 510;
      font-size: var(--theme-first-level-title);
      margin-top: 1rem; }
    html body h2 {
      font-size: var(--theme-secondary-level-title); }
    html body h3 {
      font-size: var(--theme-third-level-title); }
    html body h4 {
      font-size: var(--theme-fourth-level-title); }
    html body .main-header {
      display: flex;
      position: fixed;
      background: var(--theme-header-bg-color);
      border-bottom: 1px solid var(--theme-header-border-color);
      box-shadow: 0px 10px 10px var(--theme-header-shadow-color);
      justify-content: space-between;
      align-items: center;
      padding: 0 3.25rem 0 2rem;
      top: 0;
      left: 0;
      height: 60px;
      width: 100vw;
      min-width: 1100px;
      z-index: 100;
      box-sizing: border-box; }
      html body .main-header a {
        color: inherit;
        font-size: inherit;
        text-decoration: none; }
      html body .main-header .left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        margin: 0;
        height: 100%; }
        html body .main-header .left a.logo {
          height: 55%;
          margin-right: 1rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          white-space: nowrap; }
          html body .main-header .left a.logo img {
            height: 100%;
            min-width: 30px;
            margin-right: 1rem; }
          html body .main-header .left a.logo .title {
            font-size: var(--theme-header-size);
            letter-spacing: 0.1rem;
            margin: 0 !important;
            font-weight: 600;
            font-family: webfont; }
      html body .main-header .daohang {
        cursor: pointer;
        display: none; }
      html body .main-header .right {
        height: 100%;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: center; }
        html body .main-header .right .menu {
          list-style: none;
          height: 100%;
          margin: 0;
          display: flex;
          align-items: center;
          align-content: center;
          /*
            阅读模式图标
          */
          /*
            如果拥有子菜单
          */ }
          html body .main-header .right .menu .read-mode .iconfont {
            color: inherit;
            font-size: var(--theme-text); }
          html body .main-header .right .menu .menu-item-has-children > a {
            font-family: "iconfont" !important;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale; }
            html body .main-header .right .menu .menu-item-has-children > a:after {
              font-size: 10px;
              display: inline-flex;
              margin: 0 3px;
              transform: rotate(180deg);
              transition: all 0.2s linear;
              content: "\e652"; }
          html body .main-header .right .menu .menu-item-has-children:hover > a:after {
            transform: rotate(360deg); }
          html body .main-header .right .menu .menu-item {
            display: flex;
            align-items: center;
            position: relative;
            margin-left: 1.3rem;
            height: 100%;
            cursor: pointer;
            font-size: var(--theme-text);
            color: var(--theme-header-font-color);
            white-space: nowrap; }
            html body .main-header .right .menu .menu-item:hover > .sub-menu {
              visibility: visible;
              opacity: 1; }
            html body .main-header .right .menu .menu-item:hover > a {
              color: var(--theme-color); }
            html body .main-header .right .menu .menu-item:hover .iconfont {
              transform: rotate(0); }
            html body .main-header .right .menu .menu-item .sub-menu {
              display: block;
              visibility: hidden;
              opacity: 0;
              position: absolute;
              background: var(--theme-sub-menu-bg-color);
              box-shadow: 0 12px 32px var(--theme-hover-shadow), 0 2px 6px var(--theme-hover-shadow);
              margin: 0;
              padding: 0.5rem 0;
              border-radius: 0.45rem;
              transition: all 0.25s;
              top: 66px;
              left: -1.2rem;
              list-style: none; }
              html body .main-header .right .menu .menu-item .sub-menu .menu-item {
                margin: 0;
                color: var(--theme-sub-menu-font-color);
                padding: 3px 1.2rem; }
                html body .main-header .right .menu .menu-item .sub-menu .menu-item:hover > a {
                  color: var(--theme-color) !important; }
              html body .main-header .right .menu .menu-item .sub-menu .sub-menu {
                top: 0;
                left: 105%; }
        html body .main-header .right .menu-left {
          display: flex;
          align-items: center; }
          html body .main-header .right .menu-left .search-div {
            display: flex;
            align-items: center;
            height: 60px;
            position: relative; }
            html body .main-header .right .menu-left .search-div .search-icon {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 100%;
              position: absolute;
              color: var(--theme-text-color);
              left: 0.5rem;
              top: 0; }
            html body .main-header .right .menu-left .search-div .iconfont {
              cursor: pointer;
              color: var(--theme-header-font-color); }
            html body .main-header .right .menu-left .search-div .search {
              height: 60%;
              width: 12rem;
              border: 1px solid #cfd4db;
              outline: none;
              background-color: transparent;
              padding: 0 1rem 0 1.6rem;
              font-size: var(--theme-secondary);
              border-radius: 32px;
              color: var(--theme-header-font-color); }
              html body .main-header .right .menu-left .search-div .search::placeholder {
                color: #757575; }
              html body .main-header .right .menu-left .search-div .search:focus, html body .main-header .right .menu-left .search-div .search:hover {
                box-shadow: 0 0 5px 2px var(--theme-color-20);
                border-color: var(--theme-color); }
    html body .password {
      width: 100%;
      height: 100vh;
      padding-top: calc(60px + 4.5rem);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column; }
      html body .password img {
        width: 25%;
        margin-bottom: 2rem; }
      html body .password p {
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--theme-text-secondary);
        font-size: var(--theme-secondary);
        width: 70%;
        flex-wrap: wrap;
        text-align: center;
        margin: 0 auto; }
        html body .password p input[type=password] {
          border: 1px solid #cfd4db;
          padding: 0 0.45rem;
          margin-right: 0.5rem;
          border-radius: 2px;
          outline: none; }
          html body .password p input[type=password]:hover, html body .password p input[type=password]:focus {
            box-shadow: 0 0 5px 2px var(--theme-color-20);
            border-color: var(--theme-color); }
          html body .password p input[type=password]::placeholder {
            color: var(--theme-placeholder); }
        html body .password p input[type=submit] {
          background-color: var(--theme-color);
          border: none;
          color: white;
          border-radius: 4px;
          height: 60%;
          padding: 0 1rem;
          cursor: pointer;
          margin-top: 1rem; }
        html body .password p label {
          color: transparent;
          margin-top: -0.8rem; }
          html body .password p label input {
            height: 2rem;
            width: 100%; }
    html body .main-container {
      margin-top: calc(60px + 1rem);
      display: flex;
      justify-content: center;
      height: 100%;
      position: relative;
      overflow: hidden;
      /*
        右边侧边栏
      */
      /*
        左边文章导航
      */ }
      html body .main-container #fixed {
        min-width: 16.6rem;
        padding: 0;
        margin: 0 0 0 1rem;
        height: fit-content; }
        html body .main-container #fixed .main-right {
          flex-shrink: 0;
          height: fit-content;
          width: 16.6rem;
          display: flex;
          flex-direction: column;
          /*
            近期文章
          */
          /*
            作者信息
          */ }
          html body .main-container #fixed .main-right .recent .ul li, html body .main-container #fixed .main-right .update .ul li {
            margin-top: 0.6rem; }
            html body .main-container #fixed .main-right .recent .ul li a, html body .main-container #fixed .main-right .update .ul li a {
              display: flex;
              align-items: center;
              width: 100%;
              box-sizing: border-box;
              overflow: hidden;
              text-decoration: none;
              max-height: 65px; }
              html body .main-container #fixed .main-right .recent .ul li a .thumnbnail, html body .main-container #fixed .main-right .update .ul li a .thumnbnail {
                flex-shrink: 0;
                width: 30%;
                margin-right: 0.8rem;
                overflow: hidden;
                border-radius: 5px;
                height: 56px; }
                html body .main-container #fixed .main-right .recent .ul li a .thumnbnail img, html body .main-container #fixed .main-right .update .ul li a .thumnbnail img {
                  width: 100%;
                  height: 100%;
                  transition: all 0.3s ease-out; }
                  html body .main-container #fixed .main-right .recent .ul li a .thumnbnail img:hover, html body .main-container #fixed .main-right .update .ul li a .thumnbnail img:hover {
                    transform: scale(1.1); }
              html body .main-container #fixed .main-right .recent .ul li a .article, html body .main-container #fixed .main-right .update .ul li a .article {
                display: flex;
                width: 100%;
                height: 65px;
                flex-direction: column;
                justify-content: space-between; }
                html body .main-container #fixed .main-right .recent .ul li a .article .caption, html body .main-container #fixed .main-right .update .ul li a .article .caption {
                  white-space: normal;
                  line-height: 1.55;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: var(--theme-text-more-mini); }
                  html body .main-container #fixed .main-right .recent .ul li a .article .caption:hover, html body .main-container #fixed .main-right .recent .ul li a .article .caption:active, html body .main-container #fixed .main-right .update .ul li a .article .caption:hover, html body .main-container #fixed .main-right .update .ul li a .article .caption:active {
                    color: var(--theme-color); }
                html body .main-container #fixed .main-right .recent .ul li a .article .datetime, html body .main-container #fixed .main-right .update .ul li a .article .datetime {
                  font-size: var(--theme-text-super-mini);
                  color: var(--theme-text-mini-color); }
          html body .main-container #fixed .main-right .author {
            background-color: var(--theme-front-main-color);
            padding: 0;
            margin-bottom: 1rem;
            border-radius: 4px;
            width: 100%;
            position: relative; }
            html body .main-container #fixed .main-right .author .author-beijin {
              border-radius: 4px;
              overflow: hidden;
              display: flex;
              width: 100%; }
              html body .main-container #fixed .main-right .author .author-beijin img {
                width: 100%; }
            html body .main-container #fixed .main-right .author .statistic {
              display: flex;
              justify-content: space-between;
              margin-top: 10px; }
              html body .main-container #fixed .main-right .author .statistic .item {
                display: flex;
                align-items: center;
                flex-direction: column;
                width: 33.3%; }
                html body .main-container #fixed .main-right .author .statistic .item .top {
                  font-size: var(--theme-text-mini);
                  white-space: nowrap; }
                html body .main-container #fixed .main-right .author .statistic .item .bottom {
                  color: var(--theme-black-text);
                  font-size: 1.1rem; }
            html body .main-container #fixed .main-right .author .offset {
              position: relative;
              padding: 0.45rem 0.5rem 1rem 0.5rem; }
              html body .main-container #fixed .main-right .author .offset .author-avatar {
                position: absolute;
                top: -1.75rem;
                left: 0;
                width: 100%;
                display: flex;
                justify-content: center; }
                html body .main-container #fixed .main-right .author .offset .author-avatar img {
                  width: 3.5rem;
                  height: 3.5rem;
                  border-radius: 50%; }
              html body .main-container #fixed .main-right .author .offset .author-info {
                margin-top: 2rem;
                width: 100%;
                align-items: center;
                display: flex;
                justify-content: center; }
                html body .main-container #fixed .main-right .author .offset .author-info .nickname {
                  font-size: var(--theme-third-level-title); }
                html body .main-container #fixed .main-right .author .offset .author-info .tag {
                  background-color: var(--theme-color);
                  border-radius: 6px;
                  padding: 2px 0.5rem;
                  color: white;
                  height: fit-content;
                  line-height: normal;
                  font-size: var(--theme-text-super-mini); }
              html body .main-container #fixed .main-right .author .offset .author-self {
                margin-top: 0.45rem;
                line-height: 1.6;
                padding: 0.5rem;
                font-size: var(--theme-text-mini);
                color: var(--theme-text-secondary); }
      html body .main-container #space {
        display: flex;
        min-width: 16.6rem;
        max-width: 16.6rem;
        padding: 0;
        width: 16.6rem;
        margin: 0 1rem 0 0;
        height: 50vh;
        min-height: 50vh; }
        html body .main-container #space #navigator {
          position: fixed;
          top: 0;
          left: 0;
          background-color: var(--theme-front-main-color);
          min-height: 50vh;
          height: fit-content;
          max-height: calc(100vh - 60px - 2rem);
          margin: 0 1rem 0 0;
          flex-shrink: 0;
          min-width: 16.6rem;
          width: 16.6rem;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          padding-top: 0.45rem;
          border-radius: 4px;
          opacity: 0;
          z-index: 10; }
          html body .main-container #space #navigator .tag {
            list-style: none;
            padding: 0; }
            html body .main-container #space #navigator .tag li {
              display: inline;
              background-color: var(--theme-color);
              color: white;
              padding: 0.2rem 0.5rem;
              margin: 0.2rem 0.5rem;
              border-radius: 8px; }
              html body .main-container #space #navigator .tag li a {
                font-size: var(--theme-text-mini);
                color: inherit;
                text-decoration: none; }
          html body .main-container #space #navigator .main-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: var(--theme-third-level-title);
            width: 100%;
            padding: 0.15rem 1rem 5px 1rem;
            border-bottom: 1px solid #e1e1e1; }
            html body .main-container #space #navigator .main-top .iconfont {
              font-size: var(--theme-text-mini);
              cursor: pointer; }
            html body .main-container #space #navigator .main-top * {
              color: inherit;
              font-weight: inherit;
              font-size: inherit; }
            html body .main-container #space #navigator .main-top ul {
              list-style: none;
              padding: 0;
              margin: 0; }
              html body .main-container #space #navigator .main-top ul li {
                padding: 0.45rem 0 0.45rem 0;
                cursor: pointer;
                display: inline;
                margin-right: 0.5rem; }
              html body .main-container #space #navigator .main-top ul .active {
                font-weight: 510;
                border-bottom: 2px solid var(--theme-color); }
          html body .main-container #space #navigator .scroll {
            height: 100%;
            position: relative;
            overflow-y: auto;
            margin-bottom: 4.2rem;
            padding: 0.7rem 0.5rem 0 0; }
            html body .main-container #space #navigator .scroll .iconfont {
              margin-right: 1px;
              font-size: var(--theme-text-more-mini); }
            html body .main-container #space #navigator .scroll li .first-index, html body .main-container #space #navigator .scroll li .secondary-index, html body .main-container #space #navigator .scroll li .third-index {
              margin-right: 1px;
              font-size: var(--theme-text-more-mini); }
            html body .main-container #space #navigator .scroll .line {
              position: absolute;
              background-color: var(--theme-color);
              left: 4.5px;
              top: 0;
              height: 30px;
              width: 4.5px;
              border-radius: 5px;
              transition: all;
              transition-duration: 0.3s; }
            html body .main-container #space #navigator .scroll ul {
              margin: 0;
              padding: 0;
              list-style: none; }
            html body .main-container #space #navigator .scroll li {
              display: block;
              padding: 0 0 0 1rem; }
              html body .main-container #space #navigator .scroll li:hover {
                color: var(--theme-color); }
              html body .main-container #space #navigator .scroll li .first-index, html body .main-container #space #navigator .scroll li .secondary-index, html body .main-container #space #navigator .scroll li .third-index {
                display: flex;
                align-items: center;
                padding: 3px 1em;
                color: inherit; }
              html body .main-container #space #navigator .scroll li .secondary-index div {
                padding: 0 0 0 1.2rem; }
              html body .main-container #space #navigator .scroll li .third-index div {
                padding: 0 0 0 2.4rem; }
              html body .main-container #space #navigator .scroll li .first-index div, html body .main-container #space #navigator .scroll li .secondary-index div, html body .main-container #space #navigator .scroll li .third-index div {
                color: inherit;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis; }
                html body .main-container #space #navigator .scroll li .first-index div a, html body .main-container #space #navigator .scroll li .secondary-index div a, html body .main-container #space #navigator .scroll li .third-index div a {
                  color: inherit;
                  font-size: inherit;
                  text-decoration: none; }
                  html body .main-container #space #navigator .scroll li .first-index div a:visited, html body .main-container #space #navigator .scroll li .first-index div a:active, html body .main-container #space #navigator .scroll li .secondary-index div a:visited, html body .main-container #space #navigator .scroll li .secondary-index div a:active, html body .main-container #space #navigator .scroll li .third-index div a:visited, html body .main-container #space #navigator .scroll li .third-index div a:active {
                    color: inherit;
                    font-size: inherit;
                    text-decoration: none; }
              html body .main-container #space #navigator .scroll li i {
                color: inherit;
                float: left;
                margin-left: -1em; }
                html body .main-container #space #navigator .scroll li i.rotate {
                  transform: rotate(-90deg); }
            html body .main-container #space #navigator .scroll .first li div {
              cursor: pointer;
              font-size: var(--theme-first-index-title);
              font-weight: normal; }
            html body .main-container #space #navigator .scroll .first .secondary li div {
              font-size: var(--theme-secondary-index-title);
              font-weight: normal; }
            html body .main-container #space #navigator .scroll .first .secondary .third li div {
              font-size: var(--theme-third-index-title);
              font-weight: normal; }
            html body .main-container #space #navigator .scroll .first .first-index:hover, html body .main-container #space #navigator .scroll .first .secondary-index:hover, html body .main-container #space #navigator .scroll .first .third-index:hover {
              color: var(--theme-color); }
          html body .main-container #space #navigator .index-scroll {
            margin-bottom: 0.7rem; }
            html body .main-container #space #navigator .index-scroll li .first-index div, html body .main-container #space #navigator .index-scroll li .secondary-index div, html body .main-container #space #navigator .index-scroll li .third-index div {
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal; }
          html body .main-container #space #navigator .divider {
            font-size: var(--theme-text-mini); }
          html body .main-container #space #navigator .icp-beian {
            position: absolute;
            bottom: 0;
            display: flex;
            width: 100%;
            font-size: var(--theme-text-more-mini);
            padding: 0.25rem 1rem 0.5rem 1rem;
            justify-content: center; }
            html body .main-container #space #navigator .icp-beian div {
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0.3rem;
              cursor: pointer;
              position: relative;
              width: 2.5rem;
              transition: all;
              transition-duration: 0.3s;
              border: 1px solid #e1e1e1;
              border-radius: 50%;
              margin: 0 1rem; }
              html body .main-container #space #navigator .icp-beian div:active {
                background-color: var(--theme-color); }
              html body .main-container #space #navigator .icp-beian div .number {
                position: absolute;
                top: -0.5rem;
                right: -0.5rem;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 1.2rem;
                height: 1.2rem;
                color: #2C3E50FF;
                font-size: var(--theme-text-more-mini);
                background-color: var(--theme-code-bg); }
              html body .main-container #space #navigator .icp-beian div img {
                width: 100%; }
      html body .main-container .div-info {
        padding: 0.1rem 1rem 1rem 1.1rem;
        margin-bottom: 1rem;
        width: 100%;
        border-radius: 4px;
        background-color: var(--theme-front-main-color);
        font-size: var(--theme-secondary);
        color: var(--theme-text);
        /*
          评论小部件
        */ }
        html body .main-container .div-info * {
          color: inherit; }
        html body .main-container .div-info .ul {
          white-space: nowrap;
          font-size: var(--theme-secondary); }
          html body .main-container .div-info .ul li {
            white-space: nowrap;
            font-size: var(--theme-secondary); }
        html body .main-container .div-info span {
          font-size: var(--theme-text-mini); }
        html body .main-container .div-info .ul {
          padding: 0.3rem 0 0 0;
          margin: 0;
          display: flex;
          list-style: none;
          flex-direction: column; }
        html body .main-container .div-info .title, html body .main-container .div-info .comment-widget {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0.2rem 0;
          margin-left: 3px;
          font-size: var(--theme-text-more-mini); }
          html body .main-container .div-info .title a, html body .main-container .div-info .comment-widget a {
            text-decoration: none;
            font-size: var(--theme-secondary);
            color: var(--theme-text-secondary); }
            html body .main-container .div-info .title a:hover, html body .main-container .div-info .comment-widget a:hover {
              color: var(--theme-color); }
            html body .main-container .div-info .title a .iconfont, html body .main-container .div-info .comment-widget a .iconfont {
              color: var(--theme-pre);
              display: inline-block;
              transform: rotate(-90deg);
              font-size: var(--theme-text-super-mini);
              margin-right: 3px; }
        html body .main-container .div-info .comment-widget {
          display: flex;
          align-items: center;
          align-items: flex-start;
          padding-left: 0; }
          html body .main-container .div-info .comment-widget .author-avatar {
            width: 20px;
            border-radius: 50%; }
          html body .main-container .div-info .comment-widget a {
            display: -webkit-box;
            width: 90%;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis; }
            html body .main-container .div-info .comment-widget a img {
              width: 12px; }
            html body .main-container .div-info .comment-widget a .name {
              color: var(--theme-black-text);
              margin: 0 3px;
              font-size: var(--theme-text); }
            html body .main-container .div-info .comment-widget a .comment-widget-content {
              white-space: normal; }
        html body .main-container .div-info .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: var(--theme-third-level-title);
          width: 100%;
          padding: 0.15rem 0 5px 0;
          border-bottom: 1px solid #e1e1e1; }
          html body .main-container .div-info .header * {
            color: inherit;
            font-weight: inherit;
            font-size: inherit; }
          html body .main-container .div-info .header ul {
            list-style: none;
            padding: 0;
            margin: 0; }
            html body .main-container .div-info .header ul li {
              padding: 0.45rem 0 0.45rem 0;
              cursor: pointer;
              display: inline;
              margin-right: 0.5rem;
              height: inherit; }
            html body .main-container .div-info .header ul .active {
              display: flex;
              align-items: center; }
              html body .main-container .div-info .header ul .active:before {
                top: 1px;
                display: block;
                content: " ";
                font-weight: 510;
                border-radius: 5px;
                width: 3px;
                height: 1rem;
                margin-right: 0.6rem;
                background-color: var(--theme-color); }
      html body .main-container .main-main {
        display: flex;
        flex-direction: column;
        width: 55%;
        padding: 0;
        height: fit-content;
        margin: 0;
        margin-bottom: 1rem;
        /* 文章推荐 */ }
        html body .main-container .main-main .div-info {
          margin-bottom: 0; }
        html body .main-container .main-main .main-content {
          position: relative;
          width: 100%;
          padding: 0 2rem;
          padding-top: 1rem;
          border-radius: 4px;
          margin-bottom: 1rem;
          background-color: var(--theme-front-main-color);
          /*
            动态文章加载
          */
          /*
            动态效果
           */
          /*面包屑导航的样式*/ }
          html body .main-container .main-main .main-content .dynamic {
            display: flex;
            height: 2.5rem;
            margin: 0.5rem 0 0.38rem 0;
            border-bottom: 1px solid #e1e1e1; }
            html body .main-container .main-main .main-content .dynamic ul.list {
              display: block;
              white-space: nowrap;
              padding: 0;
              margin: 0;
              height: 100%;
              list-style: none;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis; }
              html body .main-container .main-main .main-content .dynamic ul.list .tab {
                display: inline-flex;
                align-items: center;
                height: 100%;
                margin-right: 1.2rem;
                font-size: var(--theme-third-level-title);
                color: var(--theme-text-secondary);
                white-space: nowrap;
                cursor: pointer;
                border-bottom: 1px solid transparent;
                overflow: hidden;
                text-overflow: ellipsis;
                flex-shrink: 0; }
                html body .main-container .main-main .main-content .dynamic ul.list .tab:last-of-type {
                  flex-shrink: 1; }
                html body .main-container .main-main .main-content .dynamic ul.list .tab:hover, html body .main-container .main-main .main-content .dynamic ul.list .tab:active {
                  color: var(--theme-color); }
              html body .main-container .main-main .main-content .dynamic ul.list .active-tab {
                color: var(--theme-color);
                border-bottom-color: var(--theme-color); }
          html body .main-container .main-main .main-content #dynamic {
            display: none;
            justify-content: center;
            align-items: center;
            height: 8rem;
            width: 100%; }
            html body .main-container .main-main .main-content #dynamic .iconfont {
              color: var(--theme-color);
              font-size: 1.5rem;
              animation-iteration-count: infinite;
              animation-duration: 0.3s;
              animation-timing-function: linear; }
            html body .main-container .main-main .main-content #dynamic .animate-rotate {
              animation-name: rotate; }
          html body .main-container .main-main .main-content .breadcrumb {
            border-bottom: 1px solid #e1e1e1;
            font-size: var(--theme-text-mini);
            color: var(--theme-text-secondary);
            padding: 0 0 0.9rem 0; }
            html body .main-container .main-main .main-content .breadcrumb a {
              color: inherit;
              font-size: inherit; }
              html body .main-container .main-main .main-content .breadcrumb a:hover {
                color: var(--theme-text-color);
                transform: scale(1.1); }
          html body .main-container .main-main .main-content a {
            text-decoration: none; }
          html body .main-container .main-main .main-content .article-info {
            padding-bottom: 0.3rem; }
          html body .main-container .main-main .main-content .article-info ul {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0 0 0.1rem 0;
            margin-bottom: var(--theme-margin-bottom); }
            html body .main-container .main-main .main-content .article-info ul li {
              padding: 0 0.45rem;
              cursor: pointer;
              border-right: 1px solid #e1e1e1;
              display: inline;
              white-space: nowrap;
              font-size: var(--theme-text-mini);
              color: var(--theme-text-mini-color); }
              html body .main-container .main-main .main-content .article-info ul li a {
                color: inherit;
                font-size: inherit; }
              html body .main-container .main-main .main-content .article-info ul li .iconfont {
                font-size: var(--theme-text-mini);
                color: var(--theme-text-mini-color);
                margin-right: 0.24rem; }
              html body .main-container .main-main .main-content .article-info ul li:hover {
                color: var(--theme-text-color);
                transform: scale(1.1); }
                html body .main-container .main-main .main-content .article-info ul li:hover .iconfont {
                  color: var(--theme-text-color); }
          html body .main-container .main-main .main-content .main-article {
            /*
              限制文章的大小
            */ }
            html body .main-container .main-main .main-content .main-article h2 {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              padding: 0 0 0.25rem 0;
              border-bottom: 1px solid #e1e1e1;
              font-weight: normal;
              vertical-align: middle; }
              html body .main-container .main-main .main-content .main-article h2:before {
                display: block;
                content: " ";
                font-weight: 510;
                border-radius: 5px;
                width: 3px;
                margin-top: 0.1rem;
                height: 1rem;
                margin-right: 0.6rem;
                background-color: var(--theme-color); }
            html body .main-container .main-main .main-content .main-article h2，h3, html body .main-container .main-main .main-content .main-article h4 {
              position: relative;
              cursor: pointer; }
            html body .main-container .main-main .main-content .main-article ul, html body .main-container .main-main .main-content .main-article ol, html body .main-container .main-main .main-content .main-article dl {
              margin: 0;
              padding: 0;
              margin-bottom: var(--theme-margin-bottom);
              margin-left: 1.25rem; }
            html body .main-container .main-main .main-content .main-article ul li, html body .main-container .main-main .main-content .main-article ol li, html body .main-container .main-main .main-content .main-article dl li {
              margin-top: 1px; }
            html body .main-container .main-main .main-content .main-article a {
              color: var(--theme-color); }
              html body .main-container .main-main .main-content .main-article a:visited, html body .main-container .main-main .main-content .main-article a:active {
                color: var(--theme-color); }
            html body .main-container .main-main .main-content .main-article code.code {
              background-color: var(--theme-code-bg);
              margin: 0 .2rem;
              overflow-wrap: break-word;
              color: var(--theme-code-text);
              font-size: var(--theme-first-index-title);
              padding: .2rem .5rem .21rem .5rem;
              border-radius: 4px; }
            html body .main-container .main-main .main-content .main-article .custom-container {
              border-radius: 3px;
              margin: 0 0 var(--theme-margin-bottom) 0;
              padding: 0.8rem 1.22rem 0.7rem 1.22rem; }
              html body .main-container .main-main .main-content .main-article .custom-container .content {
                font-size: var(--theme-secondary); }
              html body .main-container .main-main .main-content .main-article .custom-container .title {
                font-weight: 550;
                padding: 0 0 0.8rem 0; }
              html body .main-container .main-main .main-content .main-article .custom-container ol:last-child, html body .main-container .main-main .main-content .main-article .custom-container ul:last-child, html body .main-container .main-main .main-content .main-article .custom-container p:last-child, html body .main-container .main-main .main-content .main-article .custom-container div:last-child {
                margin-bottom: 0; }
            html body .main-container .main-main .main-content .main-article .success {
              border-left: 0.31rem solid var(--theme-success-line-color);
              background-color: var(--theme-success-bg-color); }
              html body .main-container .main-main .main-content .main-article .success .content {
                color: var(--theme-success-text-color); }
                html body .main-container .main-main .main-content .main-article .success .content * {
                  color: var(--theme-success-text-color); }
              html body .main-container .main-main .main-content .main-article .success .title {
                color: var(--theme-success-title-color); }
            html body .main-container .main-main .main-content .main-article .alert {
              border-left: 0.31rem solid var(--theme-alert-line-color);
              background-color: var(--theme-alert-bg-color); }
              html body .main-container .main-main .main-content .main-article .alert .content {
                color: var(--theme-alert-text-color); }
                html body .main-container .main-main .main-content .main-article .alert .content * {
                  color: var(--theme-alert-text-color); }
              html body .main-container .main-main .main-content .main-article .alert .title {
                color: var(--theme-alert-title-color); }
            html body .main-container .main-main .main-content .main-article .error {
              border-left: 0.31rem solid var(--theme-error-line-color);
              background-color: var(--theme-error-bg-color); }
              html body .main-container .main-main .main-content .main-article .error .content {
                color: var(--theme-error-text-color); }
                html body .main-container .main-main .main-content .main-article .error .content * {
                  color: var(--theme-error-text-color); }
              html body .main-container .main-main .main-content .main-article .error .title {
                color: var(--theme-error-title-color); }
            html body .main-container .main-main .main-content .main-article img {
              cursor: pointer;
              border-radius: 5px;
              max-width: 80%;
              margin: 0 auto;
              height: unset; }
            html body .main-container .main-main .main-content .main-article .container-image {
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              margin: 0 auto var(--theme-margin-bottom) auto; }
              html body .main-container .main-main .main-content .main-article .container-image img {
                cursor: pointer;
                border-radius: 5px;
                max-width: 80%;
                height: unset; }
              html body .main-container .main-main .main-content .main-article .container-image .image-info {
                font-size: var(--theme-text-mini);
                color: var(--theme-text-secondary);
                margin-top: 10px; }
            html body .main-container .main-main .main-content .main-article table {
              border-spacing: 0;
              border-collapse: collapse;
              margin: 0 0 var(--theme-margin-bottom-max) 0; }
              html body .main-container .main-main .main-content .main-article table tr:hover {
                background: rgba(60, 90, 100, 0.04); }
              html body .main-container .main-main .main-content .main-article table tr td, html body .main-container .main-main .main-content .main-article table tr th {
                padding: 0.3rem 0.66rem;
                border: 1px solid #d0d7de; }
          html body .main-container .main-main .main-content footer {
            padding: 2.6rem 0 0 0;
            width: 100%; }
            html body .main-container .main-main .main-content footer .article-footer {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center; }
              html body .main-container .main-main .main-content footer .article-footer .copyright {
                color: var(--theme-text-secondary);
                font-size: var(--theme-text-more-mini); }
                html body .main-container .main-main .main-content footer .article-footer .copyright a {
                  font-size: var(--theme-text-more-mini); }
              html body .main-container .main-main .main-content footer .article-footer .donate button {
                background-color: var(--theme-color);
                margin-top: 1.2rem;
                cursor: pointer;
                color: white;
                border: none;
                padding: 2px 0.81rem;
                border-radius: 5px;
                font-size: var(--theme-text-mini); }
              html body .main-container .main-main .main-content footer .article-footer .label {
                display: block;
                margin: 1.2rem 0 0.3rem 0;
                width: 100%; }
                html body .main-container .main-main .main-content footer .article-footer .label .iconfont {
                  color: var(--theme-label-bg); }
                html body .main-container .main-main .main-content footer .article-footer .label ul {
                  list-style: none;
                  display: inline;
                  padding: 0;
                  margin: 0; }
                  html body .main-container .main-main .main-content footer .article-footer .label ul li {
                    display: inline;
                    cursor: pointer;
                    white-space: nowrap;
                    border-radius: 2px;
                    margin: 0 3.5px;
                    padding: 2px 8px; }
                    html body .main-container .main-main .main-content footer .article-footer .label ul li, html body .main-container .main-main .main-content footer .article-footer .label ul li * {
                      color: var(--theme-label-color);
                      font-size: var(--theme-text-more-mini);
                      background-color: var(--theme-label-bg); }
                    html body .main-container .main-main .main-content footer .article-footer .label ul li:hover, html body .main-container .main-main .main-content footer .article-footer .label ul li:hover * {
                      background-color: var(--theme-label-hover); }
            html body .main-container .main-main .main-content footer .footer-nav {
              width: 100%;
              border-top: 1px solid #e1e1e1;
              margin-top: 0;
              padding: 1.4rem 0;
              display: flex;
              justify-content: space-between; }
              html body .main-container .main-main .main-content footer .footer-nav .to {
                display: flex;
                width: 48%;
                flex-direction: column;
                color: var(--theme-text-secondary); }
                html body .main-container .main-main .main-content footer .footer-nav .to .text {
                  color: inherit;
                  font-size: var(--theme-text-mini); }
                html body .main-container .main-main .main-content footer .footer-nav .to a {
                  font-size: var(--theme-secondary);
                  color: inherit;
                  text-decoration: none;
                  white-space: nowrap;
                  width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  margin-top: 0.35rem; }
                  html body .main-container .main-main .main-content footer .footer-nav .to a:hover {
                    color: var(--theme-color); }
              html body .main-container .main-main .main-content footer .footer-nav .right {
                align-items: flex-end; }
                html body .main-container .main-main .main-content footer .footer-nav .right a {
                  text-align: right; }
        html body .main-container .main-main .div-info .comment-form {
          display: flex;
          flex-direction: column; }
          html body .main-container .main-main .div-info .comment-form * {
            border-radius: 4px; }
          html body .main-container .main-main .div-info .comment-form .comment-header {
            width: 100%;
            padding: 0 0.35rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 1rem 0; }
            html body .main-container .main-main .div-info .comment-form .comment-header .comment-person {
              width: 70%;
              display: flex;
              justify-content: flex-start;
              align-items: center; }
              html body .main-container .main-main .div-info .comment-form .comment-header .comment-person .comment-avatar {
                display: flex;
                justify-content: center;
                align-items: center; }
                html body .main-container .main-main .div-info .comment-form .comment-header .comment-person .comment-avatar img {
                  border-radius: 50%;
                  width: 3rem;
                  height: 3rem;
                  /*border: 1px solid #cfd4db;*/ }
              html body .main-container .main-main .div-info .comment-form .comment-header .comment-person .comment-info {
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-left: 0.6rem; }
                html body .main-container .main-main .div-info .comment-form .comment-header .comment-person .comment-info .comment-info-top {
                  font-weight: 550;
                  font-size: var(--theme-text); }
                html body .main-container .main-main .div-info .comment-form .comment-header .comment-person .comment-info .comment-info-bottom {
                  color: var(--theme-text-secondary);
                  font-size: var(--theme-secondary); }
            html body .main-container .main-main .div-info .comment-form .comment-header .comment-loginout {
              width: 30%;
              display: flex;
              justify-content: flex-end; }
              html body .main-container .main-main .div-info .comment-form .comment-header .comment-loginout a {
                margin: 0 0.3rem;
                cursor: pointer;
                text-decoration: none;
                border: none; }
                html body .main-container .main-main .div-info .comment-form .comment-header .comment-loginout a:hover {
                  color: var(--theme-color); }
          html body .main-container .main-main .div-info .comment-form .comment-form-main {
            padding: 0 0.35rem;
            display: flex;
            flex-direction: column; }
            html body .main-container .main-main .div-info .comment-form .comment-form-main textarea, html body .main-container .main-main .div-info .comment-form .comment-form-main input {
              border: 1px solid #cfd4db;
              background-color: var(--theme-front-main-color); }
              html body .main-container .main-main .div-info .comment-form .comment-form-main textarea::placeholder, html body .main-container .main-main .div-info .comment-form .comment-form-main input::placeholder {
                font-size: var(--theme-secondary);
                color: var(--theme-placeholder); }
              html body .main-container .main-main .div-info .comment-form .comment-form-main textarea:hover, html body .main-container .main-main .div-info .comment-form .comment-form-main textarea:focus, html body .main-container .main-main .div-info .comment-form .comment-form-main input:hover, html body .main-container .main-main .div-info .comment-form .comment-form-main input:focus {
                box-shadow: 0 0 5px 2px var(--theme-color-20);
                border-color: var(--theme-color);
                outline: none; }
            html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-textarea {
              position: relative; }
              html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-textarea .comment-content {
                width: 100%;
                margin-bottom: 0.7rem;
                padding: 0.35rem 0.5rem;
                color: var(--theme-text-color);
                font-size: var(--theme-secondary); }
              html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-textarea .focus {
                box-shadow: 0 0 5px 2px var(--theme-color-20);
                border-color: var(--theme-color);
                outline: none; }
              html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-textarea .emoji {
                position: absolute;
                right: 15px;
                bottom: 15px;
                cursor: pointer;
                color: var(--theme-text-secondary);
                font-size: var(--theme-emoji-size); }
                html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-textarea .emoji:hover {
                  color: var(--theme-color); }
              html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-textarea .emoji-list {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                position: absolute;
                right: 10px;
                bottom: 36px;
                list-style: none;
                display: none;
                width: 65%;
                padding: 20px 10px 10px 15px;
                border-radius: 5px;
                box-shadow: 0 12px 32px var(--theme-hover-shadow), 0 2px 6px var(--theme-hover-shadow), 0 -2px 6px var(--theme-hover-shadow);
                border: none;
                background-color: var(--theme-front-color); }
                html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-textarea .emoji-list li {
                  cursor: pointer;
                  padding: 1px; }
                  html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-textarea .emoji-list li img {
                    width: 25px; }
                html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-textarea .emoji-list:before {
                  position: absolute;
                  top: 100%;
                  right: 10px;
                  width: 0;
                  height: 0;
                  content: " ";
                  border: 6px solid transparent;
                  border-top-color: var(--theme-front-color); }
            html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-container {
              display: flex;
              width: 100%;
              justify-content: space-between;
              margin-bottom: 1.2rem;
              border: none;
              box-shadow: unset !important; }
              html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-container * {
                height: 2.1rem;
                padding: 0 0.5rem; }
              html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-container input {
                font-size: var(--theme-secondary); }
                html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-container input::placeholder {
                  color: var(--theme-placeholder); }
              html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-container .comment-name {
                width: 33%; }
              html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-container .comment-mail {
                width: 33%;
                margin: 0 0.5rem; }
              html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-container .comment-url {
                width: 33%; }
          html body .main-container .main-main .div-info .comment-form .comment-form-footer {
            display: flex;
            justify-content: flex-end; }
            html body .main-container .main-main .div-info .comment-form .comment-form-footer button {
              color: var(--theme-color);
              padding: 0.2rem 2rem;
              background-color: var(--theme-front-color);
              border: 1px solid var(--theme-color);
              cursor: pointer; }
              html body .main-container .main-main .div-info .comment-form .comment-form-footer button:hover {
                color: white;
                background-color: var(--theme-color); }
        html body .main-container .main-main .div-info .pagination {
          width: 100%;
          display: flex;
          justify-content: center;
          padding: 1rem 0 1rem 0; }
          html body .main-container .main-main .div-info .pagination a {
            line-height: 1.5;
            background-color: rgba(0, 0, 0, 0.05);
            padding: 0.3rem 0.72rem;
            margin: 0 0.32rem;
            font-size: 14px;
            color: var(--theme-text-secondary);
            border-radius: 4px;
            text-decoration: none; }
          html body .main-container .main-main .div-info .pagination span {
            line-height: 1.5;
            background-color: rgba(0, 0, 0, 0.05);
            padding: 0.3rem 0.72rem;
            margin: 0 0.32rem;
            font-size: 14px;
            color: var(--theme-text-secondary);
            border-radius: 4px;
            text-decoration: none; }
            html body .main-container .main-main .div-info .pagination span.current {
              padding: 0.3rem 0.72rem;
              font-size: 14px;
              background-color: var(--theme-color);
              color: white;
              border-radius: 4px; }
          html body .main-container .main-main .div-info .pagination a:hover {
            padding: 0.3rem 0.72rem;
            font-size: 14px;
            background-color: var(--theme-color);
            color: white;
            border-radius: 4px; }
        html body .main-container .main-main .div-info .comment_list {
          padding: 0.5rem 0.5rem 3rem 0.5rem;
          margin-top: 0.2rem; }
          html body .main-container .main-main .div-info .comment_list * {
            text-decoration: none !important;
            font-style: normal !important; }
          html body .main-container .main-main .div-info .comment_list ul {
            list-style: none;
            padding-left: 2.5rem; }
          html body .main-container .main-main .div-info .comment_list .front {
            margin-bottom: 0;
            padding-left: 0; }
          html body .main-container .main-main .div-info .comment_list li .comment-body {
            display: flex;
            flex-wrap: wrap;
            border-top: 1px solid #e1e1e170;
            padding: 1rem 0; }
            html body .main-container .main-main .div-info .comment_list li .comment-body a {
              color: inherit;
              font-size: inherit; }
            html body .main-container .main-main .div-info .comment_list li .comment-body .comment-author {
              order: 1;
              width: 100%;
              display: flex;
              align-items: center; }
              html body .main-container .main-main .div-info .comment_list li .comment-body .comment-author .url {
                font-size: var(--theme-third-level-title); }
              html body .main-container .main-main .div-info .comment_list li .comment-body .comment-author .says {
                margin-left: 0.3rem; }
              html body .main-container .main-main .div-info .comment_list li .comment-body .comment-author .avatar {
                width: 2.5rem;
                height: 2.5rem;
                margin-right: 1rem;
                border-radius: 50%;
                box-shadow: var(--theme-shadow);
                /*border: 1px solid #cfd4db;*/ }
            html body .main-container .main-main .div-info .comment_list li .comment-body .comment-content {
              order: 2;
              display: block;
              width: 100%;
              padding-left: 3.5rem;
              margin: 0.83rem 0 0 0; }
              html body .main-container .main-main .div-info .comment_list li .comment-body .comment-content img {
                vertical-align: middle;
                max-width: 25px;
                margin: 0 1px; }
            html body .main-container .main-main .div-info .comment_list li .comment-body .comment-awaiting-moderation {
              margin: 1.2rem 3.5rem;
              color: var(--theme-color); }
            html body .main-container .main-main .div-info .comment_list li .comment-body .comment-meta {
              order: 3;
              padding-left: 3.5rem;
              color: var(--theme-text-secondary);
              font-size: var(--theme-text-mini); }
              html body .main-container .main-main .div-info .comment_list li .comment-body .comment-meta .comment-edit-link {
                display: none; }
            html body .main-container .main-main .div-info .comment_list li .comment-body .reply {
              color: var(--theme-text-secondary);
              font-size: var(--theme-text-mini);
              margin-left: 0.3rem;
              order: 4; }
              html body .main-container .main-main .div-info .comment_list li .comment-body .reply:hover {
                color: var(--theme-text); }
        html body .main-container .main-main .recommend {
          margin-bottom: 1rem;
          padding: 0;
          overflow: hidden; }
          html body .main-container .main-main .recommend .list {
            width: 100%;
            padding: 0 1rem 1rem;
            margin: 0;
            position: relative; }
            html body .main-container .main-main .recommend .list .swiper-slide {
              width: calc(20% - 12px);
              display: inline-block;
              margin: 1rem 12px 0 0;
              border-radius: 4px;
              flex-shrink: 0;
              border: 1px solid rgba(0, 0, 0, 0.1);
              transition-property: all;
              transition-duration: 0.3s; }
              html body .main-container .main-main .recommend .list .swiper-slide:hover {
                box-shadow: 0 2px 10px 3px rgba(0, 0, 0, 0.15);
                transform: translateY(-3px); }
              html body .main-container .main-main .recommend .list .swiper-slide a {
                display: flex;
                flex-direction: column;
                text-decoration: none;
                height: 100%;
                position: relative; }
                html body .main-container .main-main .recommend .list .swiper-slide a .thumnbnail {
                  width: 100%;
                  height: 120px;
                  border-top-left-radius: 4px;
                  border-top-right-radius: 4px;
                  overflow: hidden; }
                  html body .main-container .main-main .recommend .list .swiper-slide a .thumnbnail img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover; }
                html body .main-container .main-main .recommend .list .swiper-slide a .caption {
                  font-size: var(--theme-text);
                  color: var(--theme-text-color);
                  margin: 0.8rem 0.65rem;
                  display: -webkit-box;
                  line-height: 1.5;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  min-height: 2.5rem; }
                html body .main-container .main-main .recommend .list .swiper-slide a .detail {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0 0.5rem 0.5rem;
                  white-space: nowrap; }
                  html body .main-container .main-main .recommend .list .swiper-slide a .detail * {
                    font-size: var(--theme-text-mini);
                    color: var(--theme-text-mini-color); }
                html body .main-container .main-main .recommend .list .swiper-slide a .category {
                  position: absolute;
                  top: 6px;
                  left: 6px;
                  width: fit-content;
                  padding: 0 0.5rem;
                  border-radius: 5px;
                  font-size: var(--theme-text-mini);
                  color: white;
                  background-color: rgba(0, 0, 0, 0.6); }
                  html body .main-container .main-main .recommend .list .swiper-slide a .category:hover {
                    color: white;
                    transform: scale(1);
                    background-color: var(--theme-color); }
            html body .main-container .main-main .recommend .list .swiper-button-next, html body .main-container .main-main .recommend .list .swiper-button-prev {
              color: var(--theme-color); }
          html body .main-container .main-main .recommend .empty {
            display: flex;
            align-items: center;
            flex-direction: column; }
            html body .main-container .main-main .recommend .empty img {
              max-width: 25%;
              min-height: 80px; }
            html body .main-container .main-main .recommend .empty span {
              margin-top: -25px;
              margin-bottom: 20px;
              font-size: var(--theme-text-mini);
              color: var(--theme-text-mini-color); }
        html body .main-container .main-main .no-title {
          background-color: transparent; }
          html body .main-container .main-main .no-title .list {
            background-color: transparent;
            padding: 0; }
            html body .main-container .main-main .no-title .list .swiper-slide {
              margin-top: 0;
              background-color: white; }
    html body .main-bottom {
      width: 100%;
      text-align: center;
      color: var(--theme-footer-font-color);
      padding: 2rem 1rem 2rem 1rem;
      font-size: var(--theme-text-mini);
      background-color: var(--theme-footer-bg-color); }
      html body .main-bottom * {
        font-size: inherit;
        color: inherit;
        text-decoration: none; }
      html body .main-bottom .plain, html body .main-bottom a {
        color: inherit; }
    html body .fixed {
      display: flex;
      flex-direction: column;
      position: fixed;
      z-index: 1000;
      right: 0.5rem;
      bottom: 10vh; }
      html body .fixed #theme-color {
        position: relative; }
        html body .fixed #theme-color .iconfont {
          color: inherit;
          font-size: 1rem; }
        html body .fixed #theme-color:hover .theme-color {
          padding: 0 0.2rem;
          width: 15.6rem; }
        html body .fixed #theme-color .theme-color {
          display: flex;
          align-items: center;
          width: 0;
          height: 120%;
          position: absolute;
          right: calc(100% + 0.3rem);
          top: -10%;
          transition: all;
          transition-duration: 0.2s;
          box-shadow: 0 12px 32px var(--theme-hover-shadow), 0 2px 6px var(--theme-hover-shadow);
          background-color: var(--theme-front-color); }
          html body .fixed #theme-color .theme-color ul {
            width: 100%;
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex; }
            html body .fixed #theme-color .theme-color ul li {
              width: 15%;
              margin: 0 1%;
              display: inline-block; }
              html body .fixed #theme-color .theme-color ul li div {
                border-radius: 4px;
                cursor: pointer;
                height: 0;
                padding-bottom: 100%;
                background-color: var(--theme-color); }
      html body .fixed button {
        height: 1.8rem;
        width: 1.6rem;
        white-space: nowrap;
        outline: none;
        position: relative;
        box-sizing: content-box;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding-top: 0.2rem;
        box-shadow: 0 12px 32px var(--theme-hover-shadow), 0 2px 6px var(--theme-hover-shadow);
        border: none;
        background-color: var(--theme-front-color);
        margin-top: 1vh;
        border-radius: 3px;
        font-weight: bolder;
        font-size: 0.5rem; }
        html body .fixed button:hover {
          background-color: var(--theme-hover-bg) !important;
          color: var(--theme-hover-color); }
      html body .fixed .toTop {
        visibility: hidden; }
        html body .fixed .toTop .iconfont {
          color: inherit;
          transform: rotate(0) !important;
          font-size: 1rem; }
    html body .index .main-main {
      /*搜索结果*/
      /*
          不显示分页
        */
      /*
          如果有动态页面加载
        */ }
      html body .index .main-main .non-result {
        background-color: var(--theme-front-main-color);
        width: 100%;
        padding: 0.8rem 2rem;
        border-radius: 4px;
        display: flex;
        margin-bottom: 1rem;
        flex-direction: column; }
        html body .index .main-main .non-result .in {
          display: flex;
          align-items: center;
          margin-bottom: 0;
          font-weight: lighter;
          font-size: 1.1rem; }
          html body .index .main-main .non-result .in .belong {
            font-size: var(--theme-first-level-title);
            font-weight: 550;
            color: var(--theme-color);
            margin-right: 0.5rem; }
          html body .index .main-main .non-result .in * {
            font-size: inherit;
            font-weight: inherit;
            color: inherit; }
        html body .index .main-main .non-result .number {
          display: flex;
          font-size: 1rem;
          font-weight: lighter;
          align-items: center; }
          html body .index .main-main .non-result .number .iconfont {
            font-size: 1.5rem;
            margin-right: 0.5rem;
            color: var(--theme-text-color); }
      html body .index .main-main .main-content {
        padding-top: 1.2rem;
        margin-bottom: 0; }
        html body .index .main-main .main-content .pagination {
          width: 100%;
          display: flex;
          justify-content: center;
          padding: 1rem 0 1.8rem 0;
          /*
              动态加载下一页
            */ }
          html body .index .main-main .main-content .pagination .loadnext {
            background-color: transparent;
            border: 1px solid var(--theme-color);
            color: var(--theme-color);
            font-size: var(--theme-text-mini);
            padding: 3px 2.3rem;
            border-radius: 5px;
            cursor: pointer;
            outline: none; }
            html body .index .main-main .main-content .pagination .loadnext span {
              color: inherit;
              font-size: inherit; }
            html body .index .main-main .main-content .pagination .loadnext .iconfont {
              color: inherit;
              font-size: inherit;
              display: none;
              animation-iteration-count: infinite;
              animation-duration: 0.3s;
              animation-timing-function: linear; }
            html body .index .main-main .main-content .pagination .loadnext .animate-rotate {
              animation-name: rotate; }
            html body .index .main-main .main-content .pagination .loadnext:active {
              background-color: var(--theme-color);
              color: white; }
          html body .index .main-main .main-content .pagination ul {
            list-style: none;
            margin: 0;
            padding: 0; }
            html body .index .main-main .main-content .pagination ul li {
              display: inline;
              margin: 0 2px; }
              html body .index .main-main .main-content .pagination ul li a {
                background-color: rgba(0, 0, 0, 0.05);
                font-size: 0.72rem;
                padding: 0.3rem 0.72rem;
                color: var(--theme-text-secondary);
                border-radius: 4px;
                text-decoration: none; }
              html body .index .main-main .main-content .pagination ul li span {
                background-color: rgba(0, 0, 0, 0.05);
                font-size: 0.72rem;
                padding: 0.3rem 0.72rem;
                color: var(--theme-text-secondary);
                border-radius: 4px;
                text-decoration: none; }
                html body .index .main-main .main-content .pagination ul li span.current {
                  padding: 0.3rem 0.72rem;
                  font-size: 0.72rem;
                  background-color: var(--theme-color);
                  color: white;
                  border-radius: 4px; }
              html body .index .main-main .main-content .pagination ul li a:hover {
                padding: 0.3rem 0.72rem;
                font-size: 0.72rem;
                background-color: var(--theme-color);
                color: white;
                border-radius: 4px; }
        html body .index .main-main .main-content .article-list {
          overflow: hidden; }
        html body .index .main-main .main-content .i-article {
          margin-bottom: 1.05rem;
          display: flex;
          justify-content: flex-start;
          border-bottom: 1px solid #e1e1e1;
          position: relative;
          padding: 0 0 1.05rem 0; }
          html body .index .main-main .main-content .i-article:first-of-type {
            margin-top: 0.85rem; }
          html body .index .main-main .main-content .i-article .i-article-summary {
            width: 100%;
            overflow: hidden; }
            html body .index .main-main .main-content .i-article .i-article-summary .i-article-title {
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              font-weight: normal;
              font-size: 1.12rem;
              line-height: 1.55;
              color: inherit;
              text-overflow: ellipsis; }
              html body .index .main-main .main-content .i-article .i-article-summary .i-article-title a {
                text-decoration: none;
                font-size: inherit; }
                html body .index .main-main .main-content .i-article .i-article-summary .i-article-title a:hover {
                  color: var(--theme-color); }
            html body .index .main-main .main-content .i-article .i-article-summary .i-article-excerpt {
              font-size: 0.80rem;
              color: var(--theme-text-secondary);
              margin: 0.6rem 0 1rem 0;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              min-height: 2.5rem; }
            html body .index .main-main .main-content .i-article .i-article-summary .i-article-info {
              margin-top: 0.6rem;
              font-size: 0.8rem;
              color: var(--theme-text-secondary);
              display: flex;
              justify-content: space-between; }
              html body .index .main-main .main-content .i-article .i-article-summary .i-article-info ul {
                list-style: none;
                margin: 0;
                white-space: nowrap;
                padding: 0; }
                html body .index .main-main .main-content .i-article .i-article-summary .i-article-info ul .category {
                  position: absolute;
                  top: 0.9rem;
                  right: 0.3rem;
                  z-index: 99;
                  color: white;
                  padding: 0 0.5rem;
                  border-radius: 5px;
                  background-color: rgba(0, 0, 0, 0.6);
                  border-right: none; }
                  html body .index .main-main .main-content .i-article .i-article-summary .i-article-info ul .category:hover {
                    color: white;
                    transform: scale(1);
                    background-color: var(--theme-color); }
                html body .index .main-main .main-content .i-article .i-article-summary .i-article-info ul .category-left {
                  right: unset;
                  left: 0.3rem; }
                html body .index .main-main .main-content .i-article .i-article-summary .i-article-info ul li {
                  padding: 0 0.45rem;
                  border-right: 1px solid #e1e1e1;
                  cursor: pointer;
                  display: inline;
                  white-space: nowrap;
                  font-size: var(--theme-text-mini);
                  color: var(--theme-text-mini-color); }
                  html body .index .main-main .main-content .i-article .i-article-summary .i-article-info ul li a {
                    color: inherit;
                    font-size: inherit; }
                  html body .index .main-main .main-content .i-article .i-article-summary .i-article-info ul li.first {
                    padding: 0 0.45rem 0 0; }
                  html body .index .main-main .main-content .i-article .i-article-summary .i-article-info ul li:hover {
                    color: var(--theme-text-color);
                    transform: scale(1.1); }
                    html body .index .main-main .main-content .i-article .i-article-summary .i-article-info ul li:hover .iconfont {
                      color: var(--theme-text-color); }
                  html body .index .main-main .main-content .i-article .i-article-summary .i-article-info ul li .iconfont {
                    font-size: var(--theme-text-mini);
                    color: var(--theme-text-mini-color);
                    margin-right: 0.24rem; }
          html body .index .main-main .main-content .i-article .i-article-thumb {
            width: 24%;
            flex-shrink: 0;
            margin-left: 1.5rem;
            overflow: hidden;
            height: inherit;
            display: flex;
            align-items: center;
            border-radius: 3px; }
            html body .index .main-main .main-content .i-article .i-article-thumb a {
              display: flex;
              overflow: hidden;
              border-radius: 3px;
              height: 94%;
              width: 100%; }
              html body .index .main-main .main-content .i-article .i-article-thumb a img {
                width: 100%;
                height: 100%;
                max-height: 140px;
                margin: 0;
                border-radius: 3px;
                transition: all;
                transition-duration: 0.5s; }
                html body .index .main-main .main-content .i-article .i-article-thumb a img:hover {
                  transform: scale(1.35); }
          html body .index .main-main .main-content .i-article .i-article-left {
            margin: 0 1.5rem 0 0;
            order: 1; }
      html body .index .main-main .nopage .i-article:last-of-type {
        margin-bottom: 0.5rem;
        border-bottom: none; }
      html body .index .main-main .hasDynamic {
        padding-top: 0; }

/*## 平板电脑/Ipad竖屏，##768px - 1024px */
/*
  1580-1024大小的公共样式
*/
@media (min-width: 1024px) and (max-width: 1580px) {
  html body .main-container .main-main {
    width: 55%;
    /* 文章推荐 */ }
    html body .main-container .main-main .recommend .list .swiper-slide {
      width: calc(25% - 12px); } }

/* 1024px以下的屏幕 */
/*
  1024已下的样式
*/
@media (max-width: 1024px) {
  html {
    min-width: unset; }
    html body .main-container {
      justify-content: center; }
      html body .main-container .main-main {
        margin-left: 0; }
    html body .main-header {
      min-width: unset;
      padding: 0 1rem 0 1.25rem; }
      html body .main-header .daohang {
        display: block;
        font-size: 1.6rem; }
      html body .main-header .right {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: fixed;
        top: 0;
        left: -70%;
        width: 60%;
        background: var(--theme-sub-menu-bg-color);
        padding: 1rem 0.7rem 1rem 0.7rem;
        box-shadow: 0 12px 32px var(--theme-hover-shadow);
        transition-property: all;
        transition-duration: 0.3s;
        overflow: auto; }
        html body .main-header .right::-webkit-scrollbar {
          display: none; }
        html body .main-header .right .menu-left {
          /*background-color: var(--theme-front-color);*/
          /*border: 1px solid #f3f3f3;*/
          margin: 0;
          padding: 0 0.2rem;
          width: 100%;
          /*&:hover{
              box-shadow: 0 0 5px 2px var(--theme-color-20);
              border-color: var(--theme-color);
            }*/ }
          html body .main-header .right .menu-left .search-div {
            display: flex;
            width: 100%; }
            html body .main-header .right .menu-left .search-div .iconfont {
              display: none; }
            html body .main-header .right .menu-left .search-div .search {
              height: 35px;
              width: 100%;
              flex-shrink: 0;
              padding: 0 1rem 0 0.6rem;
              color: var(--theme-sub-menu-font-color); }
          html body .main-header .right .menu-left .search-icon {
            height: unset;
            margin-right: 0.2rem;
            line-height: normal;
            color: var(--theme-sub-menu-font-color); }
        html body .main-header .right .menu {
          align-content: center;
          flex-direction: column;
          align-items: flex-start;
          padding: 0;
          width: 100%;
          height: unset;
          /*
              如果拥有子菜单
            */ }
          html body .main-header .right .menu .menu-item {
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            padding: 0.5rem 1rem;
            color: var(--theme-sub-menu-font-color);
            justify-content: space-between;
            font-weight: lighter;
            flex-wrap: wrap;
            font-size: var(--theme-third-level-title);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
            html body .main-header .right .menu .menu-item i {
              line-height: normal; }
            html body .main-header .right .menu .menu-item span {
              font-size: 1rem; }
          html body .main-header .right .menu .menu-item-has-children > a:after {
            display: none; }
          html body .main-header .right .menu .menu-item-has-children .sub-menu {
            display: none; }
          html body .main-header .right .menu .read-mode {
            position: absolute !important;
            display: none;
            top: 1rem;
            z-index: 50;
            right: 12px;
            margin-top: 0;
            height: fit-content;
            width: fit-content;
            color: var(--theme-front-color); }
            html body .main-header .right .menu .read-mode img {
              width: 1.2rem;
              padding: 0; }
    html body .main-container .main-main .non-result {
      padding: 0.8rem 1rem; }
    html body .main-container .main-main .main-content .main-article .container-image img {
      max-width: 100%; } }

/* ##平板电脑/Ipad竖屏，##768px - 1024px*/
/*
  768-1024px的屏幕
*/
@media (min-width: 768px) and (max-width: 1024px) {
  html {
    min-width: unset; }
    html body .password img {
      width: 50%; }
    html body .main-container .main-main {
      width: 80%;
      /* 文章推荐 */ }
      html body .main-container .main-main .recommend .list .swiper-slide {
        width: calc(25% - 12px); }
    html body .main-container #space, html body .main-container #fixed {
      display: none; } }

/*低分辨率平板*/
/*
  小平板
*/
@media (min-width: 481px) and (max-width: 767px) {
  html {
    min-width: unset; }
    html body .password img {
      width: 45%; }
    html body .main-container .main-main {
      width: 95%;
      /* 文章推荐 */ }
      html body .main-container .main-main .recommend .list .swiper-slide {
        width: calc(33.3% - 12px); }
    html body .main-container #space, html body .main-container #fixed {
      display: none; } }

/*手机*/
/*
  手机
*/
@media (max-width: 480px) {
  :root {
    --theme-first-level-title: 1.25rem;
    --theme-text: 0.95rem;
    --theme-secondary: 0.85rem;
    --theme-text-mini: 0.75rem;
    --theme-text-more-mini: 0.75rem;
    --theme-secondary-level-title: 1.05rem;
    --theme-third-level-title: 1rem;
    --theme-fourth-level-title: 0.95rem;
    --theme-header-size: 1.15rem;
    --theme-margin-bottom: 1.1rem;
    --theme-margin-bottom-max: 1.2rem; }
  html {
    min-width: unset; }
    html body {
      /*
        如果有动态页面加载
      */
      /*评论区*/ }
      html body h1 {
        margin-top: 0.6rem;
        line-height: 1.5; }
      html body #category {
        padding-left: 0 !important; }
      html body .main-header {
        height: 55px;
        border-top: 1px solid var(--theme-header-border);
        border-bottom: none;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); }
        html body .main-header .daohang {
          font-size: 1.45rem; }
        html body .main-header .right .menu-left .menu .menu-item {
          font-size: var(--theme-text); }
      html body .password img {
        width: 60%; }
      html body .main-container {
        margin-top: 55px; }
        html body .main-container .div-info {
          padding: .1rem 1rem .85rem 1.1rem; }
        html body .main-container .main-main {
          width: 100%; }
          html body .main-container .main-main .non-result {
            margin-top: 1rem;
            /* 文章推荐 */ }
            html body .main-container .main-main .non-result .in {
              font-size: var(--theme-header-size); }
              html body .main-container .main-main .non-result .in .belong {
                font-size: inherit; }
            html body .main-container .main-main .non-result .recommend .list .swiper-slide {
              width: calc(50% - 12px); }
          html body .main-container .main-main .main-bottom {
            padding: 0 0.3rem; }
          html body .main-container .main-main .main-content {
            padding: 1.1rem 1rem 0 1rem; }
            html body .main-container .main-main .main-content .main-article h2 {
              font-weight: bold !important; }
            html body .main-container .main-main .main-content .main-article h3 {
              font-weight: bold; }
            html body .main-container .main-main .main-content .main-article h4 {
              font-weight: bold; }
            html body .main-container .main-main .main-content .breadcrumb {
              padding-bottom: 0.75rem; }
            html body .main-container .main-main .main-content .dynamic ul.list .tab {
              font-size: var(--theme-text); }
        html body .main-container #space, html body .main-container #fixed {
          display: none; }
      html body .index .main-main .main-content {
        padding: 1rem 0.9rem 0 0.9rem; }
        html body .index .main-main .main-content .i-article {
          margin-top: 0.9rem;
          padding-bottom: 0.9rem; }
          html body .index .main-main .main-content .i-article h2 {
            margin: 0;
            min-height: 50px; }
          html body .index .main-main .main-content .i-article:first-of-type {
            margin-top: 1rem; }
          html body .index .main-main .main-content .i-article .i-article-thumb {
            width: 30%;
            margin-left: 0.5rem;
            /*
              缩略图最小高度
            */ }
            html body .index .main-main .main-content .i-article .i-article-thumb a {
              display: flex;
              align-items: flex-start;
              height: 90%; }
              html body .index .main-main .main-content .i-article .i-article-thumb a img {
                min-height: 64px;
                max-height: 75px;
                height: 100%; }
          html body .index .main-main .main-content .i-article .i-article-left {
            margin-right: 0.5rem;
            margin-left: 0; }
          html body .index .main-main .main-content .i-article .i-article-summary {
            display: flex;
            flex-direction: column;
            justify-content: space-between; }
            html body .index .main-main .main-content .i-article .i-article-summary .i-article-title {
              font-size: var(--theme-text); }
              html body .index .main-main .main-content .i-article .i-article-summary .i-article-title a {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.55; }
            html body .index .main-main .main-content .i-article .i-article-summary .i-article-excerpt {
              display: none; }
            html body .index .main-main .main-content .i-article .i-article-summary .i-article-info {
              margin-top: 0.25rem; }
              html body .index .main-main .main-content .i-article .i-article-summary .i-article-info ul li {
                font-size: var(--theme-text-mini); }
                html body .index .main-main .main-content .i-article .i-article-summary .i-article-info ul li:nth-child(3) {
                  padding-left: 0; }
              html body .index .main-main .main-content .i-article .i-article-summary .i-article-info .category {
                display: none; }
      html body .index .main-main .hasDynamic {
        padding-top: 0; }
      html body #author {
        display: none; }
      html body .main-container .main-main .div-info .comment-form .comment-form-main .comment-textarea .emoji-list {
        width: 80%; } }