@font-face {
    font-family: FontAwesomePro;
    src: url("/assets/fontawesome-pro/webfonts/fa-regular-400");
    src: url("/assets/fontawesome-pro/webfonts/fa-regular-400?#iefix") format("embedded-opentype"), url("/assets/fontawesome-pro/webfonts/fa-regular-400.woff") format("woff"), url("/assets/fontawesome-pro/webfonts/fa-regular-400.ttf") format("truetype"), url("/assets/fontawesome-pro/webfonts/fa-regular-400#FontAwesomePro") format("svg");
    font-weight: normal;
    font-style: normal;
}

:root {

    --background-color-light: #f2f5f6;
    --background-color-dark: #3d3d3d;

    --box-color-light:#ffffff;
    --box-color-dark:#262626;

    --subbox-color-light:#F5F7F8;
    --subbox-color-dark:#2d2d2d;

    --tiptag-color-light:#f0f0fa;
    --tiptag-color-dark:#303033;


    --font-title-color-light:#37374c;
    --font-title-color-dark:#bfb9b1;

    --font-des-color-light:#3d3d52;
    --font-des-color-dark:#c5bfb7;

    --font-light-dark-light:#aaaaaa;
    --font-light-dark-dark:#5d5d5d;

    --font-active-color-light:#6666cc;
    --font-active-color-dark:#6666cc;
}


/**
 * Reset some basic elements
 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
hr,
img dl,
ol,
ul,
figure {
    margin: 0;
    padding: 0;
}

dd {
    margin-left: 1em;
    margin-top: 0.4em;
    margin-bottom: 0.6em;
}

table {
    min-width: 50%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

table tr:nth-child(even) {
    background: #f8f8f8;
}


/**
 * Images
 */
img {
    max-width: 100%;
    vertical-align: middle;
    border-radius:4px;
}


/**
 *  BootStrap basic elements
 */
.container {
    width: 100%;
    height: 100%;
    padding-left: 0;
    padding-right: 0;
}

.row {
    height: 100%;
    margin:0;
}

.timebadge {
    font-family: 'heiti SC';
    font-size: 12.5px;
    color: #333;
    display: inline-block;
    float: right;
}

.task-list {
    list-style: none;
    margin-left: 0;
}

/**
 * preloader styling
 */
#preloader {
    position: fixed;
    width: 100%;
    height: auto;
    min-height: 100%;
    top: 0;
    left: 0;
    background-color: #ffffff;
    z-index: 9999;
}

#spinner {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
}

.active {
    color: #ff0000;
    /* 替换成你想要的高亮颜色 */
    font-weight: bold;
    /* 或其他样式 */
}

/* 在您的 CSS 文件中添加这段样式，确保匹配您的 CSS 选择器 */
.active-item {
    color: red;
    /* 这里可以设置您想要的红色 */
}
/**
 * Basic styling
 */
body {
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    font-weight: 400;
    color: #333;
    background-color: var(--background-color-light);
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    /*background: url(/assets/img/body_bg_new.png);*/

}
/*背景格子*/
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -520;
    pointer-events: none;
}

body::before {
    background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0);
    background-size: 20px 20px;
    background-position: 50%;
    background-repeat: repeat;
}

.night-mode {
    background-color: #282c33;
}

/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1,
h2,
h3,
h4,
h5,
h6,
    {
    margin: 0.25em 0;
}

pre {
    padding-left: 0.5em;
}

p,
ul,
ol,
dl,
figure,
.highlight {
    margin: 0;
}
.highlight{
    min-height:3.6125em;;
}

/**
 * custom style
 */


.center {
    text-align: center;
}

.clear {
    clear: both;
}

.hide {
    display: none;
}

.bottom0 {
    padding-bottom: 0;
}

.box-shadow {
    border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    /*-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.75);
    -moz-box-shadow: 0 2px 102px rgba(0,0,0,.75);
    box-shadow: 0 2px 10px rgba(0,0,0,.75);
    */
}

.navbar {
    border-radius: 0;
}

.navbar-header {
    /*  padding-top:4px;*/
}

.index-post-tag {
    /*max-width: 36%;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.index-post-tag a {
    font-size: 13px;
    font-weight: normal;
    height: 16px;
    position: relative;
    border-radius: 16px;
    /*margin: 0 5px 0 0;*/
    /*border: 1px solid #ececec;*/
    /*padding: 2px 10px;*/
    color: #888;
    font-weight: 300;
    font-family: 'serif';
}

.post-header .info {
    display: flex;
    /*padding-left: 0;
    padding-right: 7px;
    line-height: 25px;
    min-height: 25px;*/
    font-size: 13px;
    color: #888;
/*    margin-top: 2px;
    margin-bottom: 2px;*/
    font-weight: 300;
    font-family: 'serif';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top:10px;
}

.post-header .info p {
    margin: 0.25em 0;
    color: #828282;

}

.index-post-tag a:visited {
    /*color: #6666cc;*/
}

.index-post-tag a:hover,
.index-post-tag a:focus {
    text-decoration: none;
    color: #6f19e8;
}
/*
    博客成长记录
*/
.record-desItem{
    padding: 3px 0;
    color:#000;
    display: flex;
    align-items: baseline;
}
.record-time{
    min-width:100px;
    display:inline-block;
    color:#999;
    margin-right: 20px;
    font-family: "heiti SC";
    flex-shrink: 0;
    opacity: 0.5;
}
.record-des{
    padding: 5px 0;
    color:#000;
}
.record-light-color{
    color:#999;
}
.record-post-content img{
    margin-top:0;
}
.record-detail-img{
    margin:10px 0;
    border:1px #b9b9cd dashed;
    border-radius:16px;
}
/*
    pagination
*/
.pagination {
    display: block;
    position: relative;
    text-align: center;

}

.pagination .x1 {
    display: inline-table;
    font-family: "heiti SC";
    color: var(--font-title-color-light);
    border: 1px solid var(--font-title-color-light);
    border-radius: 4px;
    width: 1.75em;
    height: 1.75em;
    text-align: center;
    margin: 20px auto;
    padding-top: 0.1em;
}

.pagination a:hover {
    text-decoration: none;
    color: #fff;
}

.box_paginator {
    display: block;
    margin-top: 2.5em;
    position: relative;
    text-align: center;
}

.btn-outline-paginator {
    display: inline-table;
    border-radius: 4px;
    min-width: 1.8em;
    margin-bottom: 0.5em;
    padding: 0 0.4em;
    color: #37374c;
    box-shadow: 1px 1px 1px #dfd6d6;
    font-weight: 300;
}

.active-paginator {
    background: rgba(55, 55, 75, 0.75);
    color: #fff;

}

.disable-paginator {
    color: #ccc;
    border: 0px solid #aaa;
    pointer-events: none;
}

.totalCount-paginator{
    border: 0 solid #aaa;
    font-size: 0.8em;
    box-shadow: none;
}

.sutehome {
    margin: 0 auto;
}

.homeicon {
    font-size: 2.9em;
    color: white;
    vertical-align: middle;
    margin-right: 5px;
}
.tags-a {
    color: #888;
    font-size: 13px;
    font-weight: 300;
    font-family: 'serif';
}
.custom-font {
    color: #666;
    font-size: 0.9em;
}
.articleLink {
      color: #666;
}

.articleLink a:hover, .articleLink a:focus {
    text-decoration: none;
    color: #6f19e8;
}   

.topTip {
    background: #EE3B3B;
    background: linear-gradient(80deg, #FFA54F, #FF4500);
    color: #fff;
    padding: 0 8px;
    font-size: 15px;
    font-weight: 400;
    border-radius: 4px;
    margin-right: 0.5em;
    text-align: center;
}

.percentageCounter {
    position: fixed;
    left: 0;
    top: 0;
    height: 2px;
    z-index: 99999;
    /*background-image: linear-gradient(to right, #E8EAF6, #C5CAE9, #9FA8DA, #7986CB, #5C6BC0, #3F51B5, #3949AB, #303F9F, #283593, #1A237E);*/
    /*background-image: linear-gradient(to right, #339933,#FF6666);*/
background-image: linear-gradient(to right, 
  #E8EAF6, 
  #D8DDF0, 
  #C8CCE8, 
  #B8BAE0, 
  #B0B1DC, 
  #A8A8D8, 
  #ffbe80
);
    border-radius: 5px;
}

/**
 * 标签页
 */
div.page-tag {
    text-align: center;
}

.page-tag a {
    text-decoration: none;
    color: #4d4d4d;
    float: left;
    margin: 0.5em;
    padding: 4px 10px;
    /*border: 1px solid #d9d9d9;*/
    /*border-radius: 14px;*/
    box-sizing: border-box;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5;
    opacity: 0.7;
    border-radius: 8px;
    background: #f1f2f3;
}

/*.page-tag a:visited {
    text-decoration: none;
    color: black;
    opacity: 0.7;
}*/

.page-tag a:hover {
    text-decoration: none;
    color: black;
    opacity: 1;
}

.tag-count {
    color: #888;
}

.page-tag a:hover span.tag-count {
    color: #444;
    opacity: 1;
}

.tags {
    margin-left: 0;
    padding-left: 10px;
    border-left: 4px solid #ececec;
}

.target-fix {
    padding-top: 4em;
    margin-top: -4em;
    /*  background: #fff000;*/
}

.class-fix {
    padding-top: 4em;
    margin-top: -4em;
    /*   background: #9F79EE;*/
}

h1.tag-name {
    font-size: 1.5em;
    font-weight: normal;
    padding-bottom: 0.25em;
    margin-bottom: 1em;
    margin-top: 0.5em;
    font-family: "heiti SC";
}

.tag-name::after {
    transition: all .35s;
    content: "";
    position: absolute;
    background: linear-gradient(#6E6E96 30%, #6E6E96 70%);
    width: 1.5em;
    left: 0;
    box-shadow: 0 2px 2px rgba(102, 102, 204, .4);
    bottom: -8px;
    height: 3px;
    border-radius: 3px;
}

.tag-name::before {
    content: "";
    width: 100%;
    border-bottom: 1px dashed #eee;
    bottom: -7px;
    position: absolute
}

.tag-name {
    position: relative;
    font-size: 1.55em;
}

.tag-name:hover::after {
    width: 3em
}

.tag-ul {
    margin-bottom: 2.2em;
    margin-top: 1.1em;
}

.tag-ul .time {
    font-family: "heiti SC";
    /*margin-right: 1em;*/
    flex-shrink: 0;
    opacity: 0.5;
    width: 12ch;
}

/*倒计时*/
.countdownNav {
    margin-top: 1em;
    background-color: var(--box-color-light);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    overflow: hidden;
    width: 100%;
}
.card-countdown {
    margin: 0.75em 1.5em;
}

.card-countdown .item-content {
    display: flex;
}

.cd-count-left {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-right: 0.8rem;
    line-height: 1.5;
    align-items: center;
    justify-content: center;
}

.cd-count-left .cd-text {
    font-size: 14px;
    opacity: 0.5;
}

.cd-count-left .cd-name {
    font-size: 18px;
    color:#505050;
}

.cd-count-left .cd-time {
    font-size: 30px;
    font-weight: bold;
    color: #dad9e6;
}

.cd-count-left .cd-date {
    font-size: 12px;
    opacity: 0.5;
}

.cd-count-left::after {
    content: "";
    position: absolute;
    right: -0.8rem;
    /*width: 2px;*/
    height: 80%;
    /*background-color: #dad9e6;*/
    opacity: 0.5;
    border: 1px #dad9e6 dashed;
}

.cd-count-right {
    flex: 1;
    margin-left: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cd-count-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 24px;
}

.cd-item-name {
    font-size: 14px;
    margin-right: 0.8rem;
    white-space: nowrap;
}

.cd-item-progress {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    border-radius: 8px;
    background-color: var(--background-color-light);
    overflow: hidden;
}

.cd-progress-bar {
    height: 100%;
    border-radius: 8px;
    background-color: #dad9e6;
}

.cd-percentage,
.cd-remaining {
    position: absolute;
    font-size: 12px;
    margin: 0 6px;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.cd-many {
    color: #fff;
}

.cd-remaining {
    opacity: 0;
    transform: translateX(10px);
}

.card-countdown .item-content:hover .cd-remaining {
    transform: translateX(0);
    opacity: 1;
}

.card-countdown .item-content:hover .cd-percentage {
    transform: translateX(-10px);
    opacity: 0;
}

/*
li.article {
  padding-left : 2em;
  margin-top: 1em;
}
li.article span {
  font-size: 1em;
}
li.article a {
    text-decoration: none;
    padding: 5px 20px;
    font-size: 1em;
    margin-left: -4em;
    padding-left: 4em;
    display: block;
      color: #666;
}   
li.article a:hover,li.article a:focus{
      color: #6666cc;
      box-shadow: 3px 0 var(--font-title-color-light) inset;
      background-color: #f5f5f5;
}
*/


/* 基础卡片样式 */
.post-card {
  overflow: hidden;
  margin: 10px 0;
  padding: 15px 15px 15px 35px; /* 直接声明内边距 */
  border-radius: 10px; /* 直接声明圆角 */
  box-shadow: 6px 0 12px -5px rgba(0,0,0,0.1), -6px 0 12px -5px rgba(0,0,0,0.1); /* 直接声明阴影 */
  transition: all 0.3s ease; /* 保留过渡效果 */
}

/* 主题样式变体 */
.card-theme1 {
  background: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}

.card-theme2 {
  background: linear-gradient(220deg, #FF9A8B 0%, #FF99AC 100%);
  color: #555555;
  box-shadow: 6px 0 12px -5px rgba(255, 176, 172, 0.3), -6px 0 12px -5px rgba(255, 161, 174, 0.3);
}

.card-theme3 {
  background: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
  color: #555555;
}

.card-theme4 {
  background: radial-gradient(circle 263px at 100.2% 3%, #0c558d 31.1%, #cdb55d 36.4%, #f4665a 50.9%, #c7cebb 60.7%, #f98c45 72.5%, #0c4974 72.6%);
  color: #eeeeee;
  box-shadow: 6px 0 12px -5px #0c558d, -6px 0 12px -5px rgba(10, 58, 93, 0.3);
}

.card-theme5 {
  background: linear-gradient(102deg, #446e5c 17.4%, #6b9c78 49.3%, #9aa382 83.4%, #f7edbf 110.3%);
  color: #eeeeee;
  box-shadow: 6px 0 12px -5px #446e5c, -6px 0 12px -5px rgba(204, 212, 163, 0.3);
}

.card-theme6 {
  background: radial-gradient(circle farthest-corner at -8.9% 51.2%, #ff7c00 0%, #ff7c00 15.9%, #ffa34d 15.9%, #ffa34d 24.4%, #131e25 24.5%, #131e25 66%);
  color: #ffffff;
  box-shadow: 6px 0 12px -5px rgba(253, 223, 234, 0.3), -6px 0 12px -5px rgba(215, 240, 243, 0.3);
}

.card-theme7 {
  background: radial-gradient(circle farthest-corner at 10% 20%, #5f75e3 0%, #bcabd1 90%);
  color: #ffffff;
  box-shadow: 6px 0 12px -5px rgba(175, 160, 208, 0.3), -6px 0 12px -5px rgba(177, 161, 207, 0.1);
}

.card-theme8 {
  background: radial-gradient(circle farthest-corner at 10% 20%, #000000 0%, #404040 90.2%);
  color: #c7c7c7;
  box-shadow: 6px 0 12px -5px #9bade1, -6px 0 12px -5px rgba(177, 161, 207, 0.1);
}


@media (max-width: 992px) {

    /*
    li.article {
        padding-left : 0.5em;
    }
    li.article a {
        margin-left: -0.5em;
        padding-left: 0.5em;
    }
*/
    .postbox {
        border: 0.5px solid;
    }
}
/*mirroring 防盗链页面*/
    .alert-message {
        position: fixed;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #f8d7da;
        color: #721c24;
        padding: 1em 1.5em;
        z-index: 10000;
        opacity: 1;
        transition: opacity 3s;
        border-radius:16px;
        box-shadow: 1px 1px 2px #dfd6d6;    
    }

    .alert-message.fade-out {
        opacity: 0;
    }
    @media screen and (max-width: 768px) {
        .alert-message {
            width: 80%;
        }
    }
/**
 * 归档页
 */
.archives_li {
    margin: 0.5em 0;
    list-style: none;
}


/**
 * 标签页
 */
.article_span {
    font-size: 1em;
    text-decoration: none;
    font-size: 1em;
    margin-bottom: 0.5em;
    margin-top: 0.64em;
    display: flex;
    /* 使用flex布局，确保span和a在同一行 */
    align-items: center;
    color:rgb(0,0,0,0.4);
    list-style:none;
}

@media (max-width: 992px) {
    .home ul {
        margin-left: 0;
    }
}


/*项目*/
.single-promotion a {
    display: block;
}

.single-promotion>a:after {
    border: 0 solid transparent;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 300ms ease-in-out 0s;
    z-index: 2;
}

.single-promotion:hover>a:after {
    border: 1px solid #f95d96;
    transition: all 500ms ease-in-out 0s;
}

.single-promotion h3 {
    font-size: 20px;
    font-weight: 400;
    line-height: 50px;
    margin: 0;
    position: relative;
}

.single-promotion h3:after {
    border-bottom: 1px dashed;
    content: "";
    display: block;
    left: 20%;
    position: absolute;
    top: 0;
    width: 60%;
}

.single-promotion p {
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    padding: 10% 40px;

}

.single-promotion span a {
    background: var(--font-title-color-light) none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-family: "Fredoka One", cursive;
    font-size: 16px;
    font-weight: 400;
    line-height: 40px;
    padding: 0 25px;
    text-transform: capitalize;
}

.single-promotion {
    color: #5e686d;
    display: block;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    border: 1px #DCDCDC solid;

}

.singleh {
    background-color: rgba(255, 255, 255, 0.5);
    height: 100% left: 0;
    position: absolute;
    text-align: center;
    top: calc(100% - 50px);
    transition: all 300ms ease-in 0s;
    width: 100%;

}

.single-promotion:hover div.singleh {
    top: 0;
    transition: all 500ms ease-in 0s;
    background-color: rgba(255, 255, 255, 0.9);
}

/*手机端 menu 菜单*/
 

/**
 * 
 */
.home {
    margin: 0 0 1em 0;
    padding: 2em 3em;
    background: white;
    min-height: 50em;
    border-radius: 10px;
}

.homeTwo {
    border-radius: 10px;
    padding: 2em 3em;
    background: white;
    font-size: 0.9em;
    margin-bottom: 1em;
}

@media (max-width: 992px) {
    .home {
        padding: 1em 1.5em;
    }

    .homeTwo {
        padding: 1em 1.5em;
    }
}


.search-tip {
    font-size: 0.77em;
    color: #ccc;
    display: none;
}

#cb-search-btn:hover .search-tip {
    display: block;
    color: rgba(102, 102, 204, 0.4);
}

/**
 * 最近访客和最新评论
 */
.recentcome {
    background: white;
    padding: 1em 2em;
    margin-top: 1em;
}

.comment {
    margin-top: 1em;
    background: white;
    padding: 1em 2em;
}

.ds-recent-visitors,
.ds-recent-comments {
    margin-left: 0;
    padding-left: 0;
}

.recentuse {
    margin-top: 1.0em;
    background: #fff;
    padding: 1em 2em;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.recentuse ul {
    margin-top: 1em;
    margin-left: 1em;
    padding-left: 0;
}

.friendlinkNav {
    margin-top: 1em;
    background-color: var(--box-color-light);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    overflow: hidden;
    width: 100%;
    padding-bottom: 7.5%;

}

.friendlinkNavTitle {
    padding: 0.75em 2em;
    color: var(--font-title-color-light);
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    border-radius: 10px 10px 0 0;
}

.friendlinkNav .friend-container {
    margin: 0 1.5em;
    border-top: 1px dashed rgba(55, 55, 76, 0.5);
    overflow: hidden;
    text-align: center;

}

.friend-item {
    position: relative;
    width: 100%;
    text-align: left;
    margin-top: 7.5%;
    display: flex;
}

.friend-item:hover {
    background: rgba(102, 102, 204, 0.15);
    border-radius: 8px;
    padding: 0 5px;
}

.friend-item:hover .friend-name {
    color: #6666cc;
}

.friend-item .friend-name {
    color: #000000;
    font-size: 14px;
    margin-left: 1em;
    line-height: 30px;
}

.friend-item img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    margin-top: 5px;
}


/*站点导航*/
.siteNav {
    margin-top: 1em;
    background-color: var(--box-color-light);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    /*padding-bottom: 0.5em;*/

}

.siteNav .navTitle {
    padding: 0.75em 2em;
    color: var(--font-title-color-light);
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    border-radius: 10px 10px 0 0;
}

.siteNav ul {
    border-top: 1px dashed rgba(55, 55, 76, 0.5);
    list-style-type: none;
    margin: 0 1.5em;
    padding: 0.5em 0;
}

.siteNav ul li {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.siteNav ul li:hover {
    background: rgba(102, 102, 204, 0.15);
    border-radius: 8px;
    padding: 5px 5px;
}

.siteNav ul li:hover .articleCount {
    color: #6666cc !important;
}


.siteNav ul li.active {}

.siteNav ul li a {
    color: var(--font-title-color-light);
    padding: 4px;
    font-size: 16px;
}

.siteNav ul li a:hover {
    color: #6666cc;
}

.siteNav ul li:hover a {
    color: #6666cc;
}


.siteNav ul li a i {

    padding-right: 30px;
    font-size: 16px;

}

/*
站点信息
*/

.siteInfoNav {
    margin-top: 1em;
    background-color: var(--box-color-light);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    /*padding-bottom: 0.5em;*/

}

.siteInfoNav .navTitle {
    padding: 0.75em 2em;
    color: var(--font-title-color-light);
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    border-radius: 10px 10px 0 0;
}

.siteInfoNav ul {
    border-top: 1px dashed rgba(55, 55, 76, 0.5);
    list-style-type: none;
    margin: 0 1.5em;
    padding: 0.5em 0;
}

.siteInfoNav ul li {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.siteInfoNav ul li p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
    font-size: 14px;
}

/*公告 start*/
.noticeTitle{
    padding: 0.75em 2em;
    color: var(--font-title-color-light);
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    border-radius: 10px 10px 0 0;
}
.noticeTitle i{
    color:red;
}
.fa-shake {
    animation-name: fa-shake;
    animation-duration: 1.5s; /* 添加动画持续时间 */
    animation-iteration-count: infinite; /* 让动画无限循环 */
}
.noticeDetail{    
    border-top: 1px dashed rgba(55, 55, 76, 0.5);
    margin: 0 1.5em;
    padding: 1em 0;
}
@keyframes fa-shake {
    0% {
        transform: rotate(-15deg)
    }

    4% {
        transform: rotate(15deg)
    }

    8%,24% {
        transform: rotate(-18deg)
    }

    12%,28% {
        transform: rotate(18deg)
    }

    16% {
        transform: rotate(-22deg)
    }

    20% {
        transform: rotate(22deg)
    }

    32% {
        transform: rotate(-12deg)
    }

    36% {
        transform: rotate(12deg)
    }

    40%,to {
        transform: rotate(0deg)
    }
}
/*公告 end*/

/*联系方式*/
.contactNav {
    margin-top: 1em;
    background-color: var(--box-color-light);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    overflow: hidden;
    width: 100%;
    padding-bottom: 7.5%;

}

.contactNav .contactNavTitle {
    padding: 0.75em 2em;
    color: var(--font-title-color-light);
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    border-radius: 10px 10px 0 0;
}

.contactNav .contact-container {
    margin: 0 1.5em;
    border-top: 1px dashed rgba(55, 55, 76, 0.5);
    overflow: hidden;
    text-align: center;

}

.contact-item {
    position: relative;
    width: 100%;
    text-align: left;
    margin-top: 7.5%;
    display: flex;
}


.contact-item:hover {
    background: rgba(102, 102, 204, 0.15);
    border-radius: 8px;
    padding: 0 5px;

}

.contact-item:hover .contact-name {
    color: #6666cc;
}

.contact-item .contact-name {
    color: #000000;
    font-size: 14px;
    margin-left: 0.5em;
    line-height: 30px;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-item img {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin-top: 5px;
}

}

/**
 * 移动端 菜单 menu
 */
.site-header-menu{
        position: fixed;
 
}
 .menuNav {
      position: fixed;
      bottom: 4em;
      left: 0;
      display: none;
    }

    .menuNav * {
      text-decoration: none;
      font-size: 10pt;

    }

    .menuNav * a:hover {
      /*background-color: rgba(0, 0, 0, 0.75);*/
    }

    .menuBtn {
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
    }

    .menuNav {
      list-style: none;
      display: none;
      margin-left: 15px;
    }

    .menuNav li {
      float: left;
      border-top: 1px solid #aaa;
      background-color: rgba(50, 50, 50, 0.75);
    }

    .menuNav li a {
      color: #fff;
      padding: 15px 0;
      display: block;
      width: 2em;
      text-align: center;
    }

    .menuNav li div {
      color: #fff;
    }

    .menuNav li a i,
    .menuNav li div i {
      margin-right: 0.5em;
    }

    .menuNav li a:focus {
      -moz-outline-style: none;
    }

    .menuNav li .sub-nav {
      position: absolute;
      bottom: 0;
      left: calc(2em - 30px);
      list-style: none;
      /*background-color: rgba(0, 0, 0, 0.5);*/
      display: none;
    }

    .menuNav li .sub-nav li {
      text-align: center;
      clear: left;
      width: 140px;
      height: 35px;
      line-height: 35px;
      position: relative;
    }

    .menuNav li .sub-nav li a {
      height: 34px;
      line-height: 34px;
      width: 138px;
      padding: 0;
      display: inline-block;
    }

    @media (max-width: 678px) {
      .menuNav {
        display: block;
      }
    }



/**
 * Figures
 */
figure>img {
    display: block;
}

figcaption {
    font-size: 14px;
}

/**
 * Lists
 */
ul,
ol {
    margin-left: 3em;
    margin-bottom: 20px;
}

ul,
ol li {
    /*list-style-type: decimal;*/
    /*overflow: scroll;*/
    word-wrap: break-word;
}

li>ul,
li>ol {
    margin-bottom: 0;
}

/**
 * Headings
 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    color: var(--font-title-color-light);
}


/**
 * Links
 */
a {
    color: #6666cc;
    text-decoration: none;
    word-break: break-all;
}

a:hover,
a:focus {
    text-decoration: none;
}




/**
 * Wrapper
 */
.wrapper {
    max-width: -webkit-calc(800px - (10px * 2));
    max-width: calc(800px - (10px * 2));
    margin-right: auto;
    margin-left: auto;
    padding-right: 10px;
    padding-left: 10px;
}

@media screen and (max-width: 800px) {
    .wrapper {
        max-width: -webkit-calc(800px - (10px));
        max-width: calc(800px - (10px));
        padding-right: 10px;
        padding-left: 10px;
    }
}

/**
 * Clearfix
 */
.wrapper:after,
.footer-col-wrapper:after {
    content: "";
    display: table;
    clear: both;
}

/**
 * Icons
 */
.icon>svg {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.icon>svg path {
    fill: #828282;
}

/**
 * Site header
 */
.site-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 5000;
}

.site-title {
    font-size: 1.4em;
    line-height: 2.2em;
    vertical-align: middle;
    letter-spacing: 1px;
    margin-left: 2em;
}

.site-title {
    text-decoration: none;
}

.site-title,
.site-title:visited {
    color: #fff;
}

.site-title:hover {
    text-decoration: none;
}

@media screen and (max-width: 600px) {
    .site-title {
        margin-left: 0;
    }
}

.site-nav {
    font-size: 1.2em;
    padding-bottom: 0;
    line-height: 2.9em;
    letter-spacing: 1px;
    margin: 0 auto;
    text-align: center;
}

.site-nav .nav {
    list-style-type: none;
    float: left;
    position: relative;
    margin-left: 0;
    width: 100%;
    margin: 0;
}

.site-nav .nav li {
    float: left;
    min-width: 24.6%;
    position: relative;
}

.site-nav .page-link {
    padding: 0;
    color: #fff;
    min-width: 80px;
}

.site-nav .page-link:hover,
.site-nav .page-link:focus {
    background-color: #506274;
    color: #fff;
}

.site-nav .page-link:not(:first-child) {
    margin-left: 20px;
}

@media screen and (max-width: 600px) {
    .site-nav {
        position: absolute;
        top: 0px;
        right: 30px;
        background-color: #fdfdfd;
        border: 1px solid #e8e8e8;
        border-radius: 5px;
        text-align: right;
    }

    .site-nav .trigger {
        clear: both;
        display: none;
    }

    .site-nav:hover .trigger {
        display: block;
        padding-bottom: 5px;
    }

    .site-nav .page-link {
        display: block;
        padding: 5px 10px;
    }

}
.default-categoryNav-name{
    display: inline-block;
    white-space: nowrap;
    width: calc(100% - 42px);
    overflow: hidden;
    text-overflow: ellipsis;
}


/**
 * 手机屏幕上的导航
 */

.phone-nav {
    font-size: 1.2em;
    color: #fff;
    letter-spacing: 1px;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.phone-nav li {
    min-width: 16.6%;
}

.phone-nav li a {
    line-height: 2em;
}

.phone-nav .page-link {
    padding: 0;
    color: #fff ! important;
}

.phone-nav li a:hover {
    background-color: #428bca !important;
    color: #fff;
}

@media (min-width: 768px) {
    .navbar-nav {
        width: 100%;
    }
}

/*内容折叠 start*/
.toggle {
    margin-bottom: 20px;
    font-size: 14px;
}

.toggle>.toggle-button {
    padding: 6px 10px;
    background: #f6f6f6;
    color: #1f2d3d;
    cursor: pointer;
    margin-top: 1em;
}

.toggle>.toggle-content {}

.toggle-button::before {
    content: "\25B6";
    display: inline-block;
    margin-right: 5px;
    color: #333;
    transition: transform 0.3s;
    font-size: 12px;
}

details[open] .toggle-button::before {
    content: "\25BC";
}

.box-detail {
    background: #fafafa;
    padding: 0.5em 1em 0.5em 1em;
}

.navbar-toggle {
    position: fixed;
    right: 0.5em;
}
/* 重置展开指示器样式 */
details summary::-webkit-details-marker {
    display: none;
}

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .toggle - button::before {
        /* 重新确认样式，确保显示正常 */
        content: "\25B6";
        display: inline - block;
        margin-right: 5px;
        color: #333;
        transition: transform 0.3s;
        font-size: 12px;
    }
    details[open].toggle-button::before {
        content: "\25BC";
    }
}

/*内容折叠 end*/

.navbar-default {
    /*background-image: url(/assets/img/bg5.png);*/
    border-width: 0;
    background: var(--font-title-color-light);
}

@media (min-width: 768px) and (max-width : 991px) {
    .navbar-collapse.collapse {
        display: none;
    }

}

@media (min-width: 992px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
}


/**
 * back to top icon
 */
#backtotop {
    position: fixed;
    bottom: 90px;
    z-index: 9999;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    display: none;
}

#backtotop a {
    color: black;
}

#backtotop a:visited {
    color: black;
    opacity: 0.7;
}

#backtotop a:hover {
    color: black;
    opacity: 1;
}

#backtotop.showme {
    right: 12px;
    display: block;
}

#backtotop .bttbg {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.3) url(/assets/img/top_button.png) no-repeat center center;
    background-size: 60%;
    border-radius: 10px;
    box-shadow: 0 0 4px 1px rgba(102, 102, 204, 0.5);
}


.themeModel {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.3) url(/assets/img/theme_dark.png) no-repeat center center;
    background-size: 60%;
    position: fixed;
    bottom: 140px;
    right: 12px;
    border-radius: 10px;
    box-shadow: 0 0 4px 1px rgba(102, 102, 204, 0.5);
}
.themeModelLight {
    background: rgba(0, 0, 0, 0.3) url(/assets/img/theme_light.png) no-repeat center center;
    background-size: 60%;
}
.qrcode {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.3) url(/assets/img/blog_qrcode.png) no-repeat center center;
    background-size: 60%;
    position: fixed;
    bottom: 90px;
    right: 12px;
    border-radius: 10px;
    box-shadow: 0 0 4px 1px rgba(102, 102, 204, 0.5);
}

.qrcodeImg {
    width: 160px;
    height: 200px;
    background: #E6E6FA;
    position: fixed;
    bottom: 80px;
    right: 65px;
    display: none;
    padding: 10px;
    border-radius: 10px;
}

.qrcodeMoveTop {
    bottom: 140px;
}

.themeModelMoveTop {
    bottom: 190px;
}

.scan-text {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    color: #333;
}

/*
#backtotop a:hover{
    cursor : pointer;
    background-position : left bottom;
}
*/


/**
 * Search
 */
.search {
    margin: 0 auto;
    line-height: 50px;
}


.st-ui-search-input,
.st-default-search-input {
    display: inline-block;
    width: 220px;
    height: 16px;
    padding: 7px 11px 7px 7px;
    border: 1px solid #bbb;
    border: 1px solid rgba(0, 0, 0, 0.25);
    font-weight: 400;
    color: #444;
    font-size: 14px;
    line-height: 16px;
    box-sizing: content-box;
    background-clip: padding-box;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.search-query:focus {
    width: 220px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

}

/**
 * Profile elements style
 */
.aside1 {
    /*padding-left: 4em;*/
    padding-right: 1em;
    margin-bottom: 1em;
}

.aside1 .profile {
    position: relative;
    background-color: var(--box-color-light);
    margin: 0 auto;
    padding: 1em 1em 0.5em 1em;
    opacity: 1;
    /*border: 1px solid black;*/
    min-height: 25em;
    height: 100%;
}

.profile .overlay {
    position: relative;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    height: 6.2em;
    background: rgba(55, 55, 75, 0.96);
    margin: -1em -1em -4em -1em;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 76%, 0% 100%);
}



a.profile_gavatar {
    position: relative;
    width: 7em;
    height: 7em;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    /*border: 0.02em solid var(--font-title-color-light);*/
    box-shadow: 1px 1px 2px #dfd6d6;
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border-radius: 99em;
    display: -webkit-box;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

a.profile_gavatar .circle {
    opacity: 1;
    height: 100%;
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border-radius: 99em;
}




.light-sweep {
    position: absolute;
    display: inline-block;
    -webkit-animation: changeImg 3s ease 0s;
    -o-animation: changeImg 3s ease 0s;
    animation: changeImg 3s ease 0s;
    top: 0;
    width: 30%;
    height: 100%;
    content: "";
    background: -webkit-linear-gradient(left, rgba(236, 236, 236, 0) 0, rgba(236, 236, 236, .4) 50%, rgba(236, 236, 236, 0) 100%);
    background: -o-linear-gradient(left, rgba(236, 236, 236, 0) 0, rgba(236, 236, 236, .4) 50%, rgba(236, 236, 236, 0) 100%);
    background: -moz-linear-gradient(left, rgba(236, 236, 236, 0) 0, rgba(236, 236, 236, .4) 50%, rgba(236, 236, 236, 0) 100%);
    background: linear-gradient(to right, rgba(236, 236, 236, 0) 0, rgba(236, 236, 236, .4) 50%, rgba(236, 236, 236, 0) 100%);
    transform: skewX(-45deg);
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count:
        infinite;
}


@keyframes changeImg {
    from {
        left: -100%;
    }

    100% {
        left: 150%;
    }
}

div.gavatar a:hover {
    -moz-transform: scale(1) rotate(-360deg) translate(0px);
    -webkit-transform: scale(1) rotate(-360deg) translate(0px);
    -o-transform: scale(1) rotate(-360deg) translate(0px);
    transform: scale(1) rotate(-360deg) translate(0px);
}

.profile .nickname {
    margin-top: 0.5em;
    border-bottom: 0.01em solid var(--font-title-color-light);
    padding-bottom: 0.5em;
    font-family: cursive;
    font-size: 1.5em;
    color: var(--font-title-color-light);

}

.profile_desc {
    margin-top: 2em;
    letter-spacing: 1px;
    font-size: 0.85em;
    line-height: 1.5em;
    width: 100%;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    margin-bottom: 0.5em;
    color: var(--font-title-color-light);

}

.profile_subdesc {
    margin-top: 0.5em;
    letter-spacing: 1px;
    font-size: 0.85em;
    line-height: 1.5em;
    width: 100%;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    margin-bottom: 1.0em;
    color: var(--font-light-dark-light);
}

.site-state {
    overflow: hidden;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
    margin-top: 1.4em;
    width: 100%;
}

.site-state-item {
    display: inline-block;
    width: 30%;
    padding: 4px 0;
}

.site-state-item:nth-child(2) {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

.site-state-item:hover {
    background: rgba(102, 102, 204, 0.15);
    border-radius: 8px;
}

.site-state-item a {
    border-bottom: none;
}

.site-state-item-count {
    display: block;
    text-align: center;
    color: var(--font-title-color-light);
    font-weight: 600;
    font-size: 18px;
}

.site-state-item-name {
    font-size: 12px;
    color: var(--font-light-dark-light);
    display: block;
    text-align: center;
    margin-top: 0.1em;
}

.site-state-item.site-state-posts:hover .site-state-item-count,
.site-state-item.site-state-posts:hover .site-state-item-name,
.site-state-item.site-state-categories:hover .site-state-item-count,
.site-state-item.site-state-categories:hover .site-state-item-name,
.site-state-item.site-state-tags:hover .site-state-item-count,
.site-state-item.site-state-tags:hover .site-state-item-name{
    color: rgba(102, 102, 204, 1.0);
}

.rss-subscribe {
    margin-top: 1.5em;
    height: 1.0em;
    line-height: 1.0em;
    color: #aaa;
    margin-bottom: 1.0em;
}

.rss-subscribe a {
    color: var(--font-light-dark-light);
    font-size: 14px;
    padding: 2px 5px;
}

.rss-subscribe a:link {
    text-decoration: none;
}

.rss-subscribe a:hover {
    color: #6666cc;
    background: rgba(102, 102, 204, 0.15);
    text-decoration: none;
    padding: 2px 5px;
    border-radius: 6px;
}



@media (max-width: 1200px) {
    .profile_desc {
        font-size: 0.9em;
    }

    .profile .overlay {
        margin: -1em -1em -3em -1em;
    }

    a.profile_gavatar {
        width: 6em;
        height: 6em;
    }

}

.articleCount {
    color: #bcbcbc !important;
    background: var(--tiptag-color-light);
    border-radius: 6px;
    font-size: 13px !important;
    width: 32px;
    text-align: center;
    line-height: 1.5em;
    height: 1.5em;
    margin-left: 10px;
}



.customCatalog {
    display: none;
    margin-top: 1em;
    background: #fff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    /*width: 100%;*/
    padding-bottom: 7.5%;
    padding: 1em;
    position: relative;
    top: 0;
    overflow-y: scroll;
    max-height: calc(100% - 6em);
    font-size: 15px;
    font-family: 'heiti SC';
}

/* 滚动条整体部分 */
.customCatalog::-webkit-scrollbar {
    width: 7px; 
}

/*.customCatalog::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.customCatalog::-webkit-scrollbar-thumb {
    background: #dedede; 
    border-radius: 2.5px; 
}

.customCatalog::-webkit-scrollbar-track:hover {
    background: #efefef; 
}
.customCatalog::-webkit-scrollbar-thumb:hover {
    background: #cdcdcd; 
}
*/
.customCatalog.fixed {
    position: fixed;
    top: 0;
    z-index: 99999;

}

.toc-normal{
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    list-style: none;
    color:var(--font-title-color-light);
}

.toc-active{
    color:var(--font-active-color-dark);
    background: var(--background-color-light);
    border-radius: 6px;
    /*padding: 0 8px;*/ 
}


.element::-webkit-scrollbar {
    width: 0 !important
}

.element {
    -ms-overflow-style: none;
}

.element {
    overflow: -moz-scrollbars-none;
}

.categoryList {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}




/**
 * 左侧标签云
 */
.tag-cloud-text {
    margin-top: 1em;
    letter-spacing: 5px;
}

.tag-cloud-text p {
    margin: 0 auto;
    font-size: 1.5em;
    padding: 3px;
    border-radius: 10px 10px 0 0;
    background: white;
    border-bottom: 2px solid;
    /*background-image: url(/assets/img/bg5.png);*/
    background: var(--font-title-color-light);
    color: white;
}

.tag-cloud-text a {
    text-decoration: none;
}

/**
 * 左侧分类云
 */
.categoryNav {
    margin-top: 1em;
    background-color: var(--box-color-light);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    /*padding-bottom: 0.5em;*/

}

.categoryNav .categoryNavTitle {
    padding: 0.75em 2em;
    color: var(--font-title-color-light);
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    border-radius: 10px 10px 0 0;
}

.categoryNav ul {
    border-top: 1px dashed rgba(55, 55, 76, 0.5);
    list-style-type: none;
    margin: 0 1.5em;
    padding: 0.75em 0;
}

.categoryNav ul li {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.categoryNav ul li:hover {
    background: rgba(102, 102, 204, 0.15);
    border-radius: 8px;
    padding: 5px 5px;
}

.categoryNav ul li:hover .articleCount {
    color: #6666cc !important;
}

.categoryNav ul li.active {}

.categoryNav ul li a {
    color: var(--font-title-color-light);
    padding: 0;
    font-size: 16px;
}

.categoryNav ul li a:hover {
    color: #6666cc;
}

.categoryNav ul li a i {

    padding-right: 30px;
    font-size: 16px;

}

.navbar-wrapper {
    position: relative;
    z-index: 15;
}

.isStuck {
    width: -webkit-calc(25% - 4em);
    width: calc(25% - 4em);
    margin-top: 4em;
}

.isStuck p {
    border: 2px solid;
}

.tag-cloud {
    background: #fff;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
}

.tag-cloud .page-tag {
    min-height: 15em;
    background: #fff;
    padding: 1.0em;
    float: left;
    -moz-border-radius: 0 0 7px 7px;
    -webkit-border-radius: 0 0 7px 7px;
}

/*标签*/
#tagscloud {
    height: 250px;
    position: relative;
    font-size: 12px;
    border-top: 1px dashed rgba(55, 55, 76, 0.5);
    list-style-type: none;
    margin: 0 1.5em;
    padding: 0.75em 0;
}

#tagscloud a {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    background-color: var(--font-title-color-light);
    text-decoration: none;
    line-height: 18px;
    padding: 1px 5px;
    display: inline-block;
    border-radius: 3px
}

#tagscloud a:hover {
    color: #fff;
    background: #09f
}

#tagscloud {
    text-align: center
}

/**
 * 右侧最近来访和最新评论
 */
.aside3 {
    padding-left: 1em;
    padding-right: 3em;
    min-height: 35em;
    height: 85%;
}

.socialInfo {
    background: #fff;
    margin: 0 auto;
    padding: 2em 2em 0 2em;
    /*  border: 1px solid black;*/
    min-height: 35em;
    height: 100%;
}

/**
 * Site footer
 */

.site-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5em 15px;
    margin-bottom: 1.5em;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    position: relative;
}

.img-container {
    position: relative;
    margin-left: auto;
    position: absolute;
    bottom: -20px;
    right: 70px;
    width: 222px;
    height: auto;

}

.girlImg {
    opacity: 0.5;
}

/* 鼠标悬停时图片变清晰 */
.img-container:hover .girlImg {
    opacity: 1;
}

/* 竖排显示的提示文字 */
.img-container:after {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    color: #777;
    content: '好久不见';
    font-size: 18px;
    height: 150px;
    opacity: 0;
    transition: all .3s;
    text-align: center;
    margin-right:16px;
}

.img-container:hover:after {
    opacity: 1;
    visibility: visible;
}

  .runTime {
    color: #777;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    position: relative;
  }

  .runTime:hover::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 4px;
    left: 0;
    border-bottom: 1px dashed #777;
  }

  .footerImg {
    margin-top: -3px;
    margin-right: 2px;
  }

  .footerDes,
  .footerDes a {
    color: #666;
    text-align: center;
    bottom: -0.25em;
    font-size: 12px;
  }

  #heartbeat {
    color: red;
    animation: heartbeat 1s infinite;
  }

  .post-margin {
  }

  @keyframes heartbeat {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.2);
    }

    100% {
      transform: scale(1);
    }
  }
.footer-heading {
    font-size: 18px;
    margin-bottom: 15px;
}

.contact-list,
.social-media-list {
    list-style: none;
    margin-left: 0;
}

.social-media-list a {
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    text-indent: -9999px;
    margin: 5px 8px;
    opacity: 0.5;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    -webkit-transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.social-media-list a:visited {
    opacity: 0.5;
}

.social-media-list a:hover {
    opacity: 0.8;
}

/*.social-media-list a.github {
    background: url(/assets/img/social/github.png) center no-repeat #291B91;
    border: 1px solid #291B91;
}


.social-media-list a.weibo {
    background: url(/assets/img/social/weibo.png)center no-repeat #580641;
    border: 1px solid #580641;
}

.social-media-list a.rss {
    background: url(/assets/img/social/rss.png) center no-repeat #ef7522;
    border: 1px solid #ef7522;
}*/

.footer-col-wrapper {
    font-size: 15px;
    color: #828282;
    margin-left: -15px;
}

.footer-col {
    float: left;
    margin-bottom: 15px;
    padding-left: 15px;
}

.footer-col-1 {
    width: -webkit-calc(35% - (30px / 2));
    width: calc(35% - (30px / 2));
}

.footer-col-2 {
    width: -webkit-calc(20% - (30px / 2));
    width: calc(20% - (30px / 2));
}

.footer-col-3 {
    width: -webkit-calc(45% - (30px / 2));
    width: calc(45% - (30px / 2));
}

@media screen and (max-width: 800px) {

    .footer-col-1,
    .footer-col-2 {
        width: -webkit-calc(50% - (30px / 2));
        width: calc(50% - (30px / 2));
    }

    .footer-col-3 {
        width: -webkit-calc(100% - (30px / 2));
        width: calc(100% - (30px / 2));
    }
    .img-container{
        display:none;
    }
}

@media screen and (max-width: 600px) {
    .footer-col {
        float: none;
        width: -webkit-calc(100% - (30px / 2));
        width: calc(100% - (30px / 2));
    }
}

.social-media-list a:visited {
    color: black;
}

.social-media-list a:hover {
    color: black;
}


.content {
    margin: 0 auto;
    padding-top: 2.4em;
    min-height: 600px;
    /*background: #f2f5f6;*/
    /*background:url(/assets/img/body_bg_new.jpeg) no-repeat right top ;*/
    /*    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
    background-image: linear-gradient(transparent 29px, rgba(236,236,236,.9) 29px,rgba(236,236,236,.9) 31px, transparent 31px), linear-gradient(90deg, transparent 29px, rgba(236,236,236,.9) 29px,rgba(236,236,236,.9) 31px, transparent 31px);
    background-size: 30px 30px, 30px 30px, 5px 5px, 5px 5px;
    background-position: center;*/
}


/**
 * 浏览器滚动条样式
 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
}

::-webkit-scrollbar-button:start:increment,
::-webkit-scrollbar-button:end:decrement {
    display: none;
}

::-webkit-scrollbar-corner {
    display: block;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
}

::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

::-webkit-scrollbar-button:start {
    width: 10px;
    height: 10px;
    background: url("/assets/img/scrollbar_arrow.png") no-repeat 0 0;
}

::-webkit-scrollbar-button:start:hover {
    background: url("/assets/img/scrollbar_arrow.png") no-repeat -15px 0;
}

::-webkit-scrollbar-button:start:active {
    background: url("/assets/img/scrollbar_arrow.png") no-repeat -30px 0;
}

::-webkit-scrollbar-button:end {
    width: 10px;
    height: 10px;
    background: url("/assets/img/scrollbar_arrow.png") no-repeat 0 -18px;
}

::-webkit-scrollbar-button:end:hover {
    background: url("/assets/img/scrollbar_arrow.png") no-repeat -15px -18px;
}

::-webkit-scrollbar-button:end:active {
    background: url("/assets/img/scrollbar_arrow.png") no-repeat -30px -18px;
}




/**
 * Page content
 */

.aside2 {
    /*padding-right: 3em;*/
    padding-left: 1em;
}

@media (max-width: 992px) {
    .aside2 {
        padding-right: 0;
        padding-left: 0;
    }
}

.page-content {
    /*padding-bottom: 1em;*/
    /*min-height: 50em;*/
    margin-bottom: 1em;
    border-radius: 7px;
    width: 100%;
}

.page-content row {
    padding-left: 1em;
    padding-right: 1em;
}



.post {
    background: #fff;
    padding: 1em 3em;
    border-radius: 10px;
}

@media (max-width: 992px) {
    .post {
        padding: 1em 1.5em;
    }
}



.page-heading {
    font-size: 20px;
}

.post-list {
    margin-left: 0;
    list-style: none;
}

.post-list>li {
    margin-bottom: 30px;
}

.post-meta {
    margin-right: 1em;
    display: inline-block;
    font-size: 14px;
    color: #828282;
}

.post-link {
    display: block;
    font-size: 18px;
}

/**
 * post box style
 */



.postbox {
    width: 100%;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 25px 10px 25px;
    margin-bottom: 15px;
    background-color: var(--box-color-light);
    /*    border-top: 2.5px solid var(--font-title-color-light);
    position: relative;*/
    box-shadow: 1px 1px 4px #c5c5c5;
    border-radius: 10px;
}


.postbox .post-format-icon {
    display: block;
    line-height: 26px;
    background: #636263;
    width: 55px;
    height: 55px;
    position: absolute;
    top: -29px;
    left: 50%;
    z-index: 9;
    text-align: center;
    color: #FFF;
    font-size: 12px;
    font-family: " heiti SC";
    margin: 11px 0 0px 0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.postbox .post-format-icon a:visited {
    text-decoration: none;
}

.postbox .post-format-icon a:hover {
    text-decoration: none;
    color: #b0a0aa;
}

.postbox .post-format-icon a.item-date span {
    display: block;
    clear: both;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: -8px;
    color: #FFF !important;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 20% 80%;
    -moz-transform-origin: 20% 80%;
    -ms-transform-origin: 20% 80%;
    -o-transform-origin: 20% 80%;
    transform-origin: 20% 80%;
}


.postbox a.readmore {
    position: relative;
    float: right;
    display: inline-block;
    width: 80px;
    padding: 5px 0 5px 7.5px;
    text-decoration: none;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
    color: rgba(0, 0, 0, 0.8);
    top: 5px;
    height: 25px;
    line-height: 15px;
}

.postbox a.readmore:visited {
    background: transparent;
    color: var(--font-title-color-light);
    border-bottom: 1px solid var(--font-title-color-light);
    padding: 5px 0 5px 7.5px;
}

.postbox a.readmore:hover {
    background-color: rgba(55, 55, 75, 0.8);
    color: #fff;
    padding: 5px 0 5px 7.5px;
    border-radius: 4px;
}

.postbox .allpost .title {
    display: flex;
    font-size: 1.5em;
    text-align: left;
    width: 100%;
    /*border-left: 4px solid black;
    padding-left: 0.5em;*/
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    letter-spacing: 1px;
    font-weight: bold;
    word-break: break-all;

}

@media (max-width: 992px) {
    .postbox .allpost .title {
        font-size: 1.4em;
    }

    .postbox {
        border: 0;
        /*border-top: 2.5px solid var(--font-title-color-light);*/
        box-shadow: none;
        border-radius: 0;
        box-shadow: 1px 1px 4px #d3d3e9;
    }

    .content {
        padding-top: 0;

    }



}



.postbox .allpost .title a {
    color: var(--font-title-color-light);
}

.postbox .allpost .title a:visited {
    text-decoration: none;
}

.postbox .allpost .title a:hover {
    color: #6666cc;
    text-decoration: none;
}

.postbox .allpost .info {
    display: flex;
    padding-left: 0;
    padding-right: 7px;
    line-height: 25px;
    min-height: 25px;
    font-size: 13px;
    color: #888;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 300;
    font-family: 'serif';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.postbox .allpost .contentAbstract {
    font-size: 14px;
    line-height: 1.75em;
    color: var(--font-des-color-light);
    background-color: var(--subbox-color-light);
    text-indent: 30px;
    word-break: break-all;
    padding: 10px;
    border-radius: 10px;
}



/**
 * Posts
 */

.post-content {
    line-height: 1.8em;
    letter-spacing: 1px;

}

.post-green-background{
    background:#E3FDE6;
    border: 1px #68CB67 solid;
    padding:10px;
    border-radius: 10px;
}

div.contentAbstract img {
    width: 60%;
}

.post-header {
    margin-top: 0.5em;
    margin-bottom: 2em;
    border-left: 6px solid;
    margin-left: -3em;
    color: var(--font-title-color-light);
    padding:10px calc(3.0em - 10px);/*calc(3.0em - 6px)正好 视觉差 设置为减10*/
    padding-right: 0;

}



@media (max-width: 992px) {
    .post-header {
        margin-left: -1.5em;
        padding-left: calc(1.5em - 6px);
    }
    .post-header .info {
    margin-top:4px;
}
}


.post-title {
    font-size: 2em;
    /*padding: 10px 0;*/
    letter-spacing: -1px;
    line-height: 1;
}

@media (max-width: 992px) {
    .post-title {
        font-size: 1.4em;
        line-height: 30px;
    }
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {

    letter-spacing: 1px;
    font-weight: bold;
    margin: 1em 0 1em 0;
    padding: 5px 0 10px 0;
    word-wrap: break-word;

}

.post-content p {
    margin: 0.75em 0.2em;
    word-break: break-all;
    color: #4d4d4d;
    font-weight: 400;
}

.post-content p strong {
    color: #444;
}

.post-content h1,
.post-content h2,
.post-content h3 {
    border-bottom: 1px dashed #ececec;
}


.post-content blockquote {
    background: #f7f7f7;
    border-left: 5px solid #e3e3e3;
    padding: 0.2em 0.5em;
    margin: 1em 0;
}


.post-content blockquote p {
    padding: 0;
    margin: 0.5em;
}




/*自定义css*/
/*自定义 color*/
.color-gray {
    color: #AAA !important;
    background-color: transparent !important;
    font-style: normal !important;
    font-size: 14px !important;
    word-wrap: break-word;
}

.color-light-gray {
    color: #F5F5F5 !important;
    background-color: transparent !important;
    font-style: normal !important;
    font-size: 14px !important;
    word-wrap: break-word;
}

.color-light-gray:hover {
    color: #888 !important;
}
/*自定义 高斯模糊*/
.blur {
    filter: blur(5px);
    transition: filter 0.3s;
    font-style: normal !important;
}

.blur:hover {
    filter: none;
    font-style: normal !important;
}

/*自定义 图片位置*/
.img-left {
    display: inline !important;
}

.img-right {
    margin: 0 !important;
    margin-left: auto !important;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

/*自定义 背景色bg*/
.bg-green{
    background: rgba(123, 247, 144, 0.2) !important;
    color:#4a5565 !important;
}
.bg-blue{
    background: rgb(225 245 254) !important;
    color:#4a5565 !important;
}
.bg-red{
    background: rgba(248, 215, 218, 0.56) !important;
    color:#4a5565 !important;
}
.bg-yellow{
    background: rgb(255, 243, 205)!important;
    color:#4a5565 !important;
}
.bg-purple{
    background: #f3e8ff !important;
    color:#4a5565 !important;
}
.bg-gray{
    color:#666 !important;
}

/*自定义 提示 tip*/
.tip-green {
    background-color: rgba(123, 247, 144, 0.2) !important;
    border-left: 5px solid rgba(123, 247, 144, 0.8) !important;
    border-radius: 0 8px 8px 0;
}

.tip-blue {
    background-color: rgb(225 245 254) !important;
    border-left: 5px solid rgba(0, 112, 203, 0.8) !important;
    border-radius: 0 8px 8px 0;
}


.tip-yellow {
    background-color: rgb(255, 243, 205) !important;
    border-left: 5px solid rgba(239, 156, 3, 0.8) !important;
    border-radius: 0 8px 8px 0;
}

.tip-red {
    background-color: rgba(248, 215, 218, 0.56) !important;
    border-left: 5px solid rgba(223, 60, 48, 0.8) !important;
    border-radius: 0 8px 8px 0;
}

.post-content img {
    /*
    margin:0 auto; 
    display: table-cell;
*/
    margin: 1em auto;
    vertical-align: middle;
    display: table-cell;
}

.post-content .image-center img {
    /*
    text-align: left;
    display: inline; 
*/
    margin: 10px auto;
    display: table-cell;

}

#blog-problem{
    display: block;
    width: 100%;
    margin-bottom: 1em;
    background: var(--background-color-light);
    padding: 0.5em 1em;
    border-radius: 16px;
}

#blog-problem-title{
    font-weight: bold;
    color: #333;
}

#blog-problem-des{
    font-weight: 200;
    color: #666;
}
.problems-detail-light{
    color: #bcbcbc;
}

.problems-detail-strong{
    color: #363636;
}

/* 一些自定义的微小改动 */
.footer-heading {
    padding-left: 2em;
    color: #ececec;
}

.contact-list a {
    color: #ececec;
}

.sitedesc {
    color: #333;
}

.sitedesc a:link {
    color: #ececec;
}

.sitedesc a:visited {
    color: #ececec;
}

.sitedesc a:hover {
    color: #ececec;
}


/*--------------------------------------------------
------------------- Skills bar ---------------------
---------------------------------------------------*/
.skillbar {
    position: relative;
    display: block;
    margin-bottom: 15px;
    width: 100%;
    background: #eee;
    height: 22px;
    border-radius: 5px;
    -webkit-transition: 0.4s linear;
    -moz-transition: 0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linear;
    transition: 0.4s linear;
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -ms-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
}

.skillbar-title {
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 11px;
    color: #fff;
    background-color: rgba(59, 89, 152, 0.8);
    text-transform: capitalize;
}

.skillbar-title span {
    display: block;
    background: rgba(0, 0, 0, 0.1);
    padding: 0 20px;
    height: 22px;
    line-height: 22px;
}

.skillbar-bar {
    border-radius: 5px;
    background: rgba(59, 89, 152, 0.8);
    height: 22px;
    width: 0;
}

.skill-bar-percent {

    position: absolute;
    right: 10px;
    top: 0;
    font-size: 13px;
    height: 22px;
    line-height: 22px;
    /*35*/
    color: #444;
    color: rgba(0, 0, 0, 0.4);
}


/* 双实线 */
.hr-double {
    border: 0;
    border-top: 3px double #d0d0d5;
}

/* 斜纹分隔线 黑色 */
.hr-twill {
    border: 0;
    padding: 3px;
    background: repeating-linear-gradient(135deg, #a2a9b6 0px, #a2a9b6 1px, transparent 1px, transparent 6px);
}

/* 斜纹分隔线 彩色 现代浏览器only */
.hr-twill-colorful {
    border: 0;
    padding: 3px;
    background: linear-gradient(135deg, red, orange,green, blue, purple);
    --mask-image: repeating-linear-gradient(135deg, #000 0px, #000 1px, transparent 1px, transparent 6px);
    -webkit-mask-image: var(--mask-image);
    mask-image: var(--mask-image);
}

/* 带文字内容的分隔线 */
.hr-solid-content {
    color: #a2a9b6;
    border: 0;
    font-size: 12px;
    padding: 1em 0;
    position: relative;
}

/* 两端淡出 */
.hr-fade-content {
    color: #a2a9b6;
    border: 0;
    font-size: 12px;
    padding: 1em 0;
    position: relative;
    overflow: hidden;
        -webkit-mask-image: linear-gradient(to right, transparent, black, transparent);
    mask-image: linear-gradient(to right, transparent, black, transparent);
    
}

.hr-solid-content::before,.hr-fade-content::before {
    content: attr(data-content);
    position: absolute;
    padding: 0 1ch;
    line-height: 2px;
    border: solid #d0d0d5;
    border-width: 0 99vw;
    width: fit-content;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
}


/*上一篇和下一篇*/
.prevandnext {
    margin-top: 1em;
    border-radius: 10px;
    padding: 1em 3em;
    background: white;
    font-size: 0.9em;

}

.copyright {
    margin-top: 1em;
    border-radius: 10px;
    padding: 1em 3em;
    background: white;
    font-size: 0.9em;
    color: #666;
}

@media (max-width: 992px) {
    .copyright {
        padding: 1em 2em;
    }

       .prevandnext {
        padding: 1em 2em;
    }
}


/*.copyright a {
    color: #6666cc;
    font-size: 0.9em;
}*/

/*评论*/
.livere {
    margin-bottom: 2em;
    margin-top: 1em;
    border-radius: 10px;
    padding: 1em 3em;
    background: white;
}


/*.waline-box{
    min-height:32em;
}*/

@media (max-width: 768px) {
    .livere {
        padding: 1em 1.5em;
    }
/*    .waline-box{
        min-height:37em;
    }*/
}

/*百度分享*/
.bdshare {
    margin-bottom: 3em;
    padding-bottom: 1em;
}

.fenx {
    float: left;
    padding-top: 6px;
}

.fl {
    float: left;
}


.fadein,
.fadein-top,
.fadein-right,
.fadein-bottom,
.fadein-left,
.bouncein,
.rotatein {
    -webkit-animation: 1s ease-out backwards;
    -moz-animation: 1s ease-out backwards;
    -ms-animation: 1s ease-out backwards;
    animation: 1s ease-out backwards
}

.fadeout,
.fadeout-top,
.fadeout-right,
.fadeout-bottom,
.fadeout-left,
.bounceout,
.rotateout {
    -webkit-animation: 1s ease-in forwards;
    -moz-animation: 1s ease-in forwards;
    -ms-animation: 1s ease-in forwards;
    animation: 1s ease-in forwards
}

.rotate,
.rotate-hover {
    -webkit-animation: 2s infinite linear;
    -moz-animation: 2s infinite linear;
    -ms-animation: 2s infinite linear;
    animation: 2s infinite linear
}

.fadein {
    -webkit-animation-name: a-fadein;
    -moz-animation-name: a-fadein;
    -ms-animation-name: a-fadein;
    animation-name: a-fadein
}

@-webkit-keyframes a-fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-moz-keyframes a-fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-ms-keyframes a-fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes a-fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.fadein-top {
    -webkit-animation-name: fadeinT;
    -moz-animation-name: fadeinT;
    -ms-animation-name: fadeinT;
    animation-name: fadeinT
}

@-webkit-keyframes fadeinT {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes fadeinT {
    0% {
        opacity: 0;
        -moz-transform: translateY(-50px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

@-ms-keyframes fadeinT {
    0% {
        opacity: 0;
        -ms-transform: translateY(-50px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
}

@keyframes fadeinT {
    0% {
        opacity: 0;
        transform: translateY(-50px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadein-right {
    -webkit-animation-name: fadeinR;
    -moz-animation-name: fadeinR;
    -ms-animation-name: fadeinR;
    animation-name: fadeinR
}

@-webkit-keyframes fadeinR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(50px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes fadeinR {
    0% {
        opacity: 0;
        -moz-transform: translateX(50px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-ms-keyframes fadeinR {
    0% {
        opacity: 0;
        -ms-transform: translateX(50px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateX(0)
    }
}

@keyframes fadeinR {
    0% {
        opacity: 0;
        transform: translateX(50px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

.fadein-bottom {
    -webkit-animation-name: fadeinB;
    -moz-animation-name: fadeinB;
    -ms-animation-name: fadeinB;
    animation-name: fadeinB
}

@-webkit-keyframes fadeinB {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes fadeinB {
    0% {
        opacity: 0;
        -moz-transform: translateY(50px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

@-ms-keyframes fadeinB {
    0% {
        opacity: 0;
        -ms-transform: translateY(50px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
}

@keyframes fadeinB {
    0% {
        opacity: 0;
        transform: translateY(50px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadein-left {
    -webkit-animation-name: fadeinL;
    -moz-animation-name: fadeinL;
    -ms-animation-name: fadeinL;
    animation-name: fadeinL
}

@-webkit-keyframes fadeinL {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes fadeinL {
    0% {
        opacity: 0;
        -moz-transform: translateX(-50px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-ms-keyframes fadeinL {
    0% {
        opacity: 0;
        -ms-transform: translateX(-50px)
    }

    100% {
        opacity: 1;
        -ms-transform: translateX(0)
    }
}

@keyframes fadeinL {
    0% {
        opacity: 0;
        transform: translateX(-50px)
    }}
    


/*适配黑夜模式*/
body.dark-mode {
    background-color: var(--background-color-dark);
}
body.dark-mode::before {
    background-image: linear-gradient(90deg, rgba(195, 245, 225, .04) 3%, transparent 0), linear-gradient(1turn, rgba(195, 245, 225, .04) 3%, transparent 0);
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6 {
    color: var(--font-title-color-dark);
}

body.dark-mode img {
    filter: brightness(50%); 
}

body.dark-mode hr{
    border-top-color: #35393b;
}

body.dark-mode table{
    color: var(--font-title-color-dark);
}
body.dark-mode td, 
body.dark-mode th {
    border-color: var(--background-color-dark);
}
body.dark-mode table tr:nth-child(2n) {
    background-color: var(--tiptag-color-dark);
}
body.dark-mode .highlight{
    /*background-color: var(--box-color-dark);*/
}
body.dark-mode pre {
    border-color: var(--box-color-dark);
}
body.dark-mode input{
    background-color: var(--box-color-dark);
}
body.dark-mode button{
    background-color: var(--subbox-color-dark);
    color: var(--font-title-color-dark);
}
/*
allpost
*/
body.dark-mode .postbox {
    background-color: var(--box-color-dark);
    box-shadow: #604d4d 1px 1px 4px;
}
body.dark-mode .postbox .allpost .contentAbstract {
    background-color: var(--subbox-color-dark);
    color: var(--font-des-color-dark);
}

body.dark-mode .postbox .allpost .title a{
    color: var(--font-title-color-dark);
}

body.dark-mode .postbox a.readmore{
    color: #bfb9b1;
    border-bottom-color: #776e61;
}


/*
profile
*/

body.dark-mode .profile .overlay{
    background: rgba(55, 55, 75, 0.5);
}

body.dark-mode .profile .nickname,
 body.dark-mode .profile_desc,
 body.dark-mode .site-state-item-count{
 color: var(--font-title-color-dark);

}
body.dark-mode .profile_subdesc ,
body.dark-mode .site-state-item-name,
body.dark-mode .rss-subscribe a{
    color: var(--font-light-dark-dark);
}
body.dark-mode .site-state-item:nth-child(2) {
    border-left-color: var(--font-light-dark-dark);
    border-right-color: var(--font-light-dark-dark);
}
body.dark-mode a.profile_gavatar{
    box-shadow: 1px 1px 2px #604d4d;
}

/*
aside1
*/
body.dark-mode .aside1 .profile,
body.dark-mode .siteNav,
body.dark-mode .categoryNav,
body.dark-mode .contactNav,
body.dark-mode .friendlinkNav,
body.dark-mode .siteInfoNav,
body.dark-mode .countdownNav{
    background-color: var(--box-color-dark);
}

body.dark-mode .siteNav .navTitle,
body.dark-mode .noticeTitle,
body.dark-mode .categoryNav .categoryNavTitle,
body.dark-mode .contactNav .contactNavTitle,
body.dark-mode .friendlinkNavTitle,
body.dark-mode .siteInfoNav .navTitle {
    color: var(--font-title-color-dark);
}

body.dark-mode .siteNav ul li a,
body.dark-mode .categoryNav ul li a{
    color: var(--font-title-color-dark);
}
body.dark-mode .siteNav ul,
body.dark-mode .categoryNav ul,
body.dark-mode .contactNav .contact-container,
body.dark-mode .friendlinkNav .friend-container,
body.dark-mode .siteInfoNav ul,
body.dark-mode .noticeDetail{
    border-top: 1px dashed rgba(145, 145, 176, 0.5);
}
body.dark-mode .contact-item .contact-name,
body.dark-mode .friend-item .friend-name,
body.dark-mode .siteInfoNav ul li p {
    color: var(--font-title-color-dark);
}
body.dark-mode .articleCount{
    background-color: var(--tiptag-color-dark);
}

body.dark-mode .cd-count-left,
body.dark-mode .cd-count-right,
body.dark-mode .cd-count-left .cd-time,
body.dark-mode .cd-many{
    color: var(--font-title-color-dark);
}
body.dark-mode .cd-item-progress {
    background-color: var(--background-color-dark);
}
body.dark-mode .cd-progress-bar {
    background-color: #6f6f77;
}
body.dark-mode .cd-count-left::after{
    border: 1px #7a7795 dashed;
}
body.dark-mode .noticeDetail{
    color: var(--font-des-color-dark);
}
/*
pagination
*/
body.dark-mode .btn-outline-paginator {
    color: var(--font-title-color-dark);
    box-shadow: #604d4d 1px 1px 1px;
}

body.dark-mode .disable-paginator {
    color: var(--font-light-dark-dark);
}
body.dark-mode .active-paginator {
    background-color: var(--box-color-dark);
    color: var(--font-title-color-dark);
}

/*
footer
*/

body.dark-mode .runTime,
body.dark-mode .footerDes,
body.dark-mode .footerDes a {
    color:var(--font-title-color-dark);
}
body.dark-mode .img-container:after {
    /*color: var(--font-title-color-dark);*/
}
/*
qrcode
*/
body.dark-mode .qrcodeImg {
    background-color: #808080;
}

/*
toc
*/
body.dark-mode .customCatalog{
    background-color: var(--box-color-dark);
    color:var(--font-title-color-dark);
}
body.dark-mode .toc-normal{
    color:var(--font-title-color-dark);
}

body.dark-mode .toc-active{
    color:var(--font-active-color-dark);
    background:var(--background-color-dark);
}



/*
post
*/
body.dark-mode .post{
    background-color: var(--box-color-dark);
}
body.dark-mode .post-header {
    color: var(--font-title-color-dark);
}
body.dark-mode .post-content p,
body.dark-mode .post-content ul,
body.dark-mode .post-content ol{
    color: var(--font-des-color-dark);
}
body.dark-mode .post-content p strong{
    color: var(--font-title-color-dark);
}

body.dark-mode .post-content h1,
body.dark-mode .post-content h2,
body.dark-mode .post-content h3 {
    border-bottom-color: var(--background-color-dark);
}


body.dark-mode .highlighter-rouge {
    background-color: var(--tiptag-color-dark);
    color: #dd496e;
}
body.dark-mode .color-gray {
    color: var(--font-light-dark-dark) !important;
}
body.dark-mode .copyright {
    background-color: var(--box-color-dark);
}
body.dark-mode .custom-font,
body.dark-mode .articleLink {
    color: var(--font-des-color-dark);
}
body.dark-mode .prevandnext,
body.dark-mode .livere,
body.dark-mode .wl-editor:focus {
    background-color: var(--box-color-dark);
}

/*other post*/
body.dark-mode .post-green-background{
    background:#829b84;
    border: 1px #1d9a29 solid;
}
body.dark-mode .post-green-background ul,
body.dark-mode .tip-green p,
body.dark-mode .tip-blue p,
body.dark-mode .tip-yellow p,
body.dark-mode .tip-red p{
    color:#cbcbcb !important;
}
body.dark-mode .bg-blue,
body.dark-mode .bg-green,
body.dark-mode .bg-red,
body.dark-mode .bg-yellow,
body.dark-mode .bg-purple,{
    color:#ebe7e7 !important;
}
body.dark-mode .bg-gray{
    color:#bfbfbf !important;
}

body.dark-mode .tip-green,
body.dark-mode .bg-green{
    background-color:rgb(103 209 121 / 20%) !important;
}
body.dark-mode .tip-blue,
body.dark-mode .bg-blue{
   background-color:rgb(111 142 157) !important;
}
body.dark-mode .tip-yellow,
body.dark-mode .bg-yellow{
   background-color:rgb(179 166 125) !important;
}
body.dark-mode .tip-red,
body.dark-mode .bg-red{
   background-color:rgb(127 75 80 / 56%) !important;
}
body.dark-mode .bg-purple{
   background-color:#91859d !important;
}

body.dark-mode .color-light-gray{
    color: var(--box-color-dark) !important;
}
body.dark-mode .color-light-gray:hover {
    color: var(--font-des-color-dark) !important;
}
body.dark-mode #blog-problem{
    background: var(--background-color-dark);
}

body.dark-mode #blog-problem-title{
    color: var(--font-title-color-dark);
}

body.dark-mode #blog-problem-des{
    color: #a8a095;
}

/* 博客成长记录文章 */
body.dark-mode .page-content .post .post-content .desItem .time{
    color:var(--font-des-color-dark);
}
body.dark-mode .page-content .post .post-content .desItem .des{
    color:var(--font-des-color-dark);
}
/*
waline
*/
body.dark-mode .wl-card .wl-meta > span {
    color: #6d6d6d;
    background: var(--subbox-color-dark);
}
body.dark-mode .wl-card .wl-quote {
    border-inline-start-color: var(--background-color-dark);
}
body.dark-mode .wl-card {
    border-bottom: 1px dashed var(--background-color-dark);
}
body.dark-mode .wl-header input {
    border-bottom-color: var(--background-color-dark);
}
body.dark-mode .wl-editor, 
body.dark-mode .wl-input {
    color: #7d7d7d;
}
body.dark-mode #wl-edit::placeholder {
    color: #7d7d7d;
}
body.dark-mode .wl-panel{
    border:1px solid var(--background-color-dark);
}
body.dark-mode .wl-card .wl-content p{
    color: #9d9d9d;
}
/*
archives
categories
tags
*/
body.dark-mode .home,
body.dark-mode .homeTwo{
    background-color: var(--box-color-dark);
}
body.dark-mode .page-tag a {
    color: #ececec;
    background-color: var(--subbox-color-dark);
}
body.dark-mode .tag-name::before {
    border-bottom-color: var(--background-color-dark);
}
body.dark-mode .article_span {
    color:var(--font-des-color-dark);
}
body.dark-mode .article_span a{
    color:#7878b8;
}

/*
work
*/

body.dark-mode .box {
    background-color: var(--box-color-dark);
    color:var(--font-title-color-dark);
}
body.dark-mode .box .title code {
    color: #c9506f;
    background-color: #37292d; 
}
body.dark-mode .box .des {
    color:var(--font-des-color-dark);
}
body.dark-mode .htmlTitle {
    background-color: var(--subbox-color-dark);
}


/*
links
*/

body.dark-mode .toggle>.toggle-button {
    background-color: var(--subbox-color-dark);
    color:var(--font-title-color-dark);
}
body.dark-mode .toggle-button::before{
    color:var(--font-title-color-dark);
}
body.dark-mode .box-detail{
    background-color:#303132;
}
body.dark-mode blockquote {
    background-color: var(--subbox-color-dark);
    border-left-color: var(--background-color-dark);
}
body.dark-mode .post {
    color:var(--font-title-color-dark);
}
body.dark-mode .tiptext {
    background-color: var(--tiptag-color-dark);
}
body.dark-mode .link_item,
body.dark-mode .link_item_no_jump {
    box-shadow: #604d4d 1px 1px 2px;
    background-color: var(--subbox-color-dark);
}
body.dark-mode .links-title{
    color:var(--font-title-color-dark);
}
body.dark-mode .problem-box {
    background-color: var(--box-color-dark);
}
body.dark-mode .problemItemTitle {
    color:var(--font-title-color-dark);
}
body.dark-mode .problemItemDes {
    color: #a8a095;
}

/*
about
*/
body.dark-mode .home {
    color:var(--font-title-color-dark);
}
body.dark-mode .contact-author {
    color:var(--font-title-color-dark);
}
body.dark-mode .customCopyright {
    background-color: var(--subbox-color-dark);
    color:var(--font-title-color-dark);
}
body.dark-mode .about-copyright-focus{
    color: #c8c3bc;
}


/*search*/
body.dark-mode .cb-search-content {
    background-color: var(--box-color-dark);
    color:var(--font-title-color-dark);
}
body.dark-mode .cb-search-tool ul{
    background-color: var(--box-color-dark);
    color:var(--font-title-color-dark);
}
body.dark-mode .cb-search-tool ul li a {
    color:var(--font-des-color-dark);
}

/*
friends
*/
body.dark-mode #cf-state, 
body.dark-mode #cf-more,
body.dark-mode .cf-article{
    background-color: var(--subbox-color-dark);
    color:var(--font-title-color-dark);
}

body.dark-mode .cf-article a.cf-article-title{
    color:var(--font-title-color-dark);
}
body.dark-mode .cf-article-author{
    color:var(--font-des-color-dark);
}
body.dark-mode .cf-time-created{
    color:var(--font-light-dark-dark);
}
body.dark-mode .cf-label{
    color:var(--font-des-color-dark);
}
body.dark-mode .cf-message{
    color:var(--font-light-dark-dark);
}

/*
hello world
*/

body.dark-mode .page-content .post .post-content .toggle .box-detail{
    background-color: var(--subbox-color-dark);
}

/*
record
*/
body.dark-mode .record-time,
body.dark-mode .record-des{
    color:var(--font-des-color-dark);
}