:root {
    --global-font-size: 14px;
    --global-bg: #fff;
    --font-color: #4c4948;
    --hr-border: #a4d8fa;
    --hr-before-color: #80c8f8;
    --search-bg: #f6f8fa;
    --search-input-color: #4c4948;
    --search-result-title: #4c4948;
    --preloader-bg: #37474f;
    --preloader-color: #fff;
    --tab-border-color: #f0f0f0;
    --tab-botton-bg: #f0f0f0;
    --tab-botton-color: #1f2d3d;
    --tab-button-hover-bg: #dcdcdc;
    --tab-button-active-bg: #fff;
    --card-bg: #fff;
    --card-head-bg:var(--Primary-1, #FAF5F0);
    --sidebar-bg: #f6f8fa;
    --btn-hover-color: #ff7242;
    --btn-color: #fff;
    --btn-bg: #49b1f5;
    --text-bg-hover: #49b1f5;
    --light-grey: #eee;
    --white: #fff;
    --text-highlight-color: #1f2d3d;
    --blockquote-color: #6a737d;
    --blockquote-bg: rgba(73,177,245,0.1);
    --reward-pop: #f5f5f5;
    --toc-link-color: #666261;
    --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.06);
    --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.15);
  }

.public-fnav .f_cont:before{
    background-color: var(--global-bg) !important;
}
#content-inner {
    padding: 0; 
}
#content-inner .title {
      color: #000000d9;
      font-family: "PingFang SC";
      font-size: 2em;
      font-style: normal;
      font-weight: 500;
      line-height: 48px;
  }

  #content-inner .attr {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      overflow-y: auto;
      margin: 14px 0 0 0;
  }

  #content-inner .attr>div {
      width: fit-content;
      float: left;
      margin-right: 8px;
  }

  #content-inner .attr .tag {
      padding: 0 8px;
      border-radius: 4px;
      background: var(--Primary-2, #E6D9CB);
      color: #000000d9;
      font-family: "PingFang SC";
  }

  #content-inner .attr .author,
  #content-inner .attr .datetime {
      color: #00000073;
  }

  #content-inner .head .clear {
      clear: both;
      margin: 16px 0;
      border: 1px dashed #00000073;
      opacity: 0.20;
  }

  #content-inner .content img::before {
      background-color: #F5F5F5;
  }

  #post{
    -webkit-box-shadow: var(--global-bg); 
    box-shadow: var(--global-bg);
    padding:0;
  }

  #post ol, #post ul{
    margin-left: 20px;
  }
  #post ol li,#post ul li{
    list-style: auto;
  }
  #post ol li{
    list-style-type: decimal;
  }
  #post ul li{
    list-style-type: disc;
  }


  .layout {
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: box;
      display: flex;
      margin: 0 auto;
      padding: 20px 0.8rem;
      max-width: 1300px;
  }

  @media screen and (max-width: 1000px) {
      .layout {
          -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
          -o-box-orient: vertical;
          -webkit-flex-direction: column;
          -ms-flex-direction: column;
          flex-direction: column;
      }
  }

  @media screen and (max-width: 768px) {
      .layout {
        padding: 0.2rem 0.4rem;
      }
      #post{
        padding:0 !important;
      }
      #content-inner .title {
        font-size: 1.6em;
    }
  }

  @media screen and (min-width: 2000px) {
      .layout {
          max-width: 1500px;
      }
  }

  .layout>div:first-child:not(.recent-posts) {
      -webkit-align-self: flex-start;
      align-self: flex-start;
      -ms-flex-item-align: start;
      padding: 50px 40px;
      border-radius: 8px;
      background: var(--card-bg);
      -webkit-box-shadow: var(--card-box-shadow);
      box-shadow: var(--card-box-shadow);
  }

  .layout>div:first-child:not(.recent-posts):hover {
      -webkit-box-shadow: var(--card-hover-box-shadow);
      box-shadow: var(--card-hover-box-shadow);
  }

  @media screen and (max-width: 768px) {
      .layout>div:first-child:not(.recent-posts) {
          padding: 1.8rem 0.7rem !important;
      }
  }

  .layout>div:first-child {
      width: 75%;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      -ms-transition: all 0.3s;
      transition: all 0.3s;
  }

  @media screen and (max-width: 1000px) {
      .layout>div:first-child {
          width: 100% !important;
      }
  }

  .layout.hide-aside {
      max-width: 1000px;
  }

  @media screen and (min-width: 2000px) {
      .layout.hide-aside {
          max-width: 1300px;
      }
  }

  .layout.hide-aside>div {
      width: 100% !important;
  }

  #article-container .flink .flink-desc {
      margin: 0.2rem 0 0.5rem;
  }

  #article-container .flink .flink-list {
      overflow: auto;
      padding: 10px 10px 0;
      text-align: center;
  }

  #article-container .flink .flink-list>.flink-list-item {
      position: relative;
      float: left;
      overflow: hidden;
      margin: 15px 7px;
      width: calc(100% / 3 - 15px);
      height: 90px;
      border-radius: 8px;
      line-height: 17px;
      -webkit-transform: translateZ(0);
  }

  @media screen and (max-width: 1024px) {
      #article-container .flink .flink-list>.flink-list-item {
          width: calc(50% - 15px) !important;
      }
  }

  @media screen and (max-width: 600px) {
      #article-container .flink .flink-list>.flink-list-item {
          width: calc(100% - 15px) !important;
      }
  }

  #article-container .flink .flink-list>.flink-list-item:hover img {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
  }

  #article-container .flink .flink-list>.flink-list-item:before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      background: var(--text-bg-hover);
      content: '';
      -webkit-transition: -webkit-transform 0.3s ease-out;
      -moz-transition: -moz-transform 0.3s ease-out;
      -o-transition: -o-transform 0.3s ease-out;
      -ms-transition: -ms-transform 0.3s ease-out;
      transition: transform 0.3s ease-out;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
  }

  #article-container .flink .flink-list>.flink-list-item:hover:before,
  #article-container .flink .flink-list>.flink-list-item:focus:before,
  #article-container .flink .flink-list>.flink-list-item:active:before {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
  }

  #article-container .flink .flink-list>.flink-list-item a {
      color: var(--font-color);
      text-decoration: none;
  }

  #article-container .flink .flink-list>.flink-list-item a img {
      float: left;
      margin: 15px 10px;
      width: 60px;
      height: 60px;
      border-radius: 35px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      -ms-transition: all 0.3s;
      transition: all 0.3s;
  }

  #article-container .flink .flink-list>.flink-list-item a .img-alt {
      display: none;
  }

  #article-container .flink .flink-list>.flink-list-item a .flink-item-name {
      display: block;
      padding: 16px 10px 0 0;
      height: 40px;
      font-weight: bold;
      font-size: 1.43em;
  }

  #article-container .flink .flink-list>.flink-list-item a .flink-item-desc {
      display: block;
      padding: 16px 10px 16px 0;
      height: 50px;
      font-size: 0.93em;
  }
  
  #aside-content {
    width: 25%;
  }
  @media screen and (min-width: 1000px) {
    #aside-content {
      padding-left: 15px;
    }
  }
  @media screen and (max-width: 1000px) {
    #aside-content {
      width: 100%;
    }
  }
  #aside-content > .card-widget:first-child {
    margin-top: 0;
  }
  @media screen and (max-width: 1000px) {
    #aside-content > .card-widget:first-child {
      margin-top: 1rem;
    }
  }
  #aside-content .card-widget {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    padding: 0;
    background: var(--card-bg);
    -webkit-box-shadow: var(--card-bg);
    box-shadow: var(--card-bg);
    -webkit-transition: box-shadow 0.3s;
    -moz-transition: box-shadow 0.3s;
    -o-transition: box-shadow 0.3s;
    -ms-transition: box-shadow 0.3s;
    transition: box-shadow 0.3s;
  }
  #aside-content .card-widget:hover {
    -webkit-box-shadow: var(--card-bg);
    box-shadow: var(--card-bg);
  }
  #aside-content .card-info img {
    width: 110px;
    height: 110px;
    border-radius: 70px;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
  }
  #aside-content .card-info img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  #aside-content .card-info .author-info__name {
    font-weight: 500;
    font-size: 1.57em;
  }
  #aside-content .card-info .author-info__description {
    margin-top: -0.3rem;
  }
  #aside-content .card-info .card-info-data {
    display: table;
    margin: 0.7rem 0 0.2rem;
    width: 100%;
    table-layout: fixed;
  }
  #aside-content .card-info .card-info-data > .card-info-data-item {
    display: table-cell;
  }
  #aside-content .card-info .card-info-data > .card-info-data-item a .headline {
    color: var(--font-color);
    font-size: 1em;
  }
  #aside-content .card-info .card-info-data > .card-info-data-item a .length-num {
    margin-top: -0.3rem;
    color: var(--text-highlight-color);
    font-size: 1.4em;
  }
  #aside-content .card-info .card-info-social-icons {
    margin: 0.3rem 0 -0.3rem;
  }
  #aside-content .card-info .card-info-social-icons .social-icon {
    margin: 0 0.5rem;
    color: var(--font-color);
    font-size: 1.4em;
    cursor: pointer;
  }
  #aside-content .card-info .card-info-social-icons i {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
  }
  #aside-content .card-info .card-info-social-icons i:hover {
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
    transform: rotate(540deg);
  }
  #aside-content .card-info #card-info-btn {
    display: block;
    margin-top: 0.7rem;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    text-align: center;
    line-height: 2.4;
  }
  #aside-content .card-info #card-info-btn span {
    padding-left: 0.5rem;
  }
  #aside-content .item-headline {
    font-size: 1.2em;
    line-height: 60px;
    padding-left: 16px;
    margin-bottom: 0.15rem;
    background-color: var(--card-head-bg);
  }
  #aside-content .item-headline span {
    margin-left: 16px;
  }
  @media screen and (min-width: 1000px) {
    #aside-content .sticky_layout {
      position: sticky;
      position: -webkit-sticky;
      top: 70px;
      -webkit-transition: top 0.3s;
      -moz-transition: top 0.3s;
      -o-transition: top 0.3s;
      -ms-transition: top 0.3s;
      transition: top 0.3s;
    }
  }
  #aside-content .card-tag-cloud a {
    display: inline-block;
    padding: 0 0.1rem;
  }
  #aside-content .card-tag-cloud a:hover {
    color: #c68643 !important;
  }
  #aside-content .aside-list > span {
    display: block;
    margin-bottom: 0.5rem;
    text-align: center;
  }
  #aside-content .aside-list > .aside-list-item {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0.15rem 0;
  }
  #aside-content .aside-list > .aside-list-item:first-child {
    padding-top: 0;
  }
  #aside-content .aside-list > .aside-list-item:not(:last-child) {
    border-bottom: 1px dashed #f5f5f5;
  }
  #aside-content .aside-list > .aside-list-item:last-child {
    padding-bottom: 0;
  }
  #aside-content .aside-list > .aside-list-item .thumbnail {
    overflow: hidden;
    width: 7.5em;
    height: 4.0em;
    padding: 0px;
    margin: 0px;
  }
  #aside-content .aside-list > .aside-list-item .thumbnail > img {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    -ms-transition: all 0.6s;
    transition: all 0.6s;
    object-fit: cover;
  }
  #aside-content .aside-list > .aside-list-item .thumbnail > img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  #aside-content .aside-list > .aside-list-item .content {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: 10px;
    word-break: break-all;
  }
  #aside-content .aside-list > .aside-list-item .content > .name {
    -webkit-line-clamp: 1;
  }
  #aside-content .aside-list > .aside-list-item .content > time,
  #aside-content .aside-list > .aside-list-item .content > .name {
    display: block;
    color: #858585;
    font-size: 85%;
  }
  #aside-content .aside-list > .aside-list-item .content > .title,
  #aside-content .aside-list > .aside-list-item .content > .comment {
    color: var(--font-color);
    font-size: 95%;
    line-height: 1.5;
    -webkit-line-clamp: 2;
  }
  #aside-content .aside-list > .aside-list-item .content > .title:hover,
  #aside-content .aside-list > .aside-list-item .content > .comment:hover {
    color: #c68643;
  }
  #aside-content .aside-list > .aside-list-item.no-cover {
    min-height: 4.4em;
  }
  #aside-content .card-archives ul.card-archive-list,
  #aside-content .card-categories ul.card-category-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a,
  #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    width: 100%;
    color: var(--font-color);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
  }
  #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
  #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
    padding: 0.15rem 0.85rem;
    background-color: var(--text-bg-hover);
  }
  #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span,
  #aside-content .card-categories ul.card-category-list > .card-category-list-item a span {
    display: inline-block;
    vertical-align: bottom;
  }
  #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child,
  #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
    width: 80%;
  }
  #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child,
  #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
    width: 20%;
    text-align: right;
  }
  #aside-content .card-categories .card-category-list.child {
    padding: 0 0 0 0.8rem;
  }
  #aside-content .card-categories .card-category-list > .parent > a .card-category-list-name {
    width: 70% !important;
  }
  #aside-content .card-categories .card-category-list > .parent > a .card-category-list-count {
    width: calc(100% - 70% - 20px);
    text-align: right;
  }
  #aside-content .card-categories .card-category-list > .parent i {
    float: right;
    margin-right: -0.35rem;
    padding: 0.35rem;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -ms-transition: -ms-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  #aside-content .card-categories .card-category-list > .parent i.expand {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  #aside-content .card-webinfo .webinfo .webinfo-item {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0.1rem 0.5rem 0;
  }
  #aside-content .card-webinfo .webinfo .webinfo-item div:first-child {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-right: 1rem;
  }
  @media screen and (min-width: 901px) {
    #aside-content #card-toc {
      right: 0 !important;
    }
  }
  @media screen and (max-width: 1000px) {
    #aside-content #card-toc {
      position: fixed;
      right: -100%;
      bottom: 30px;
      z-index: 100;
      max-height: calc(100% - 60px);
      width: 300px;
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      -webkit-transform-origin: right bottom;
      -moz-transform-origin: right bottom;
      -o-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
    }
  }
  #aside-content #card-toc .toc-content {
    overflow-y: auto;
    max-height: calc(100vh - 120px);
  }
  @media screen and (max-width: 1000px) {
    #aside-content #card-toc .toc-content {
      max-height: calc(100vh - 140px);
    }
  }
  #aside-content #card-toc .toc-content .toc-child {
    display: none;
  }
  @media screen and (max-width: 1000px) {
    #aside-content #card-toc .toc-content .toc-child {
      display: block !important;
    }
  }
  #aside-content #card-toc .toc-content .toc-item.active .toc-child {
    display: block;
  }
  #aside-content #card-toc .toc-content ol,
  #aside-content #card-toc .toc-content li {
    list-style: none;
  }
  #aside-content #card-toc .toc-content > ol {
    padding: 0 !important;
  }
  #aside-content #card-toc .toc-content ol {
    margin: 0;
    padding-left: 0.4rem;
  }
  #aside-content #card-toc .toc-content .toc-link {
    display: block;
    padding-left: 0.3rem;
    border-left: 3px solid transparent;
    color: var(--toc-link-color);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  #aside-content #card-toc .toc-content .toc-link.active {
    border-left-color: #009d92;
    background: #00c4b6;
    color: #fff;
  }
  #aside-content #card-toc .toc-content:before {
    position: absolute;
    top: 0.6rem;
    right: 1.2rem;
    color: #a9a9a9;
    content: attr(progress-percentage);
    font-style: italic;
    font-size: 1.2rem;
  }
  #aside-content :only-child > .card-widget {
    margin-top: 0;
  }
  #aside-content .card-more-btn {
    float: right;
    color: inherit;
  }
  #aside-content .card-more-btn:hover {
    -webkit-animation: more-btn-move 1s infinite;
    -moz-animation: more-btn-move 1s infinite;
    -o-animation: more-btn-move 1s infinite;
    -ms-animation: more-btn-move 1s infinite;
    animation: more-btn-move 1s infinite;
  }

  #aside-content .aside-list > .aside-list-item .content > .title{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }