:root {
    --theme: #8183ff;
    --theme-sub: #58b3f5;
    --theme-1: #8183ff1a;
    --theme-2: #8183ff33;
    --theme-3: #8183ff4d;
    --theme-5: #8183ff80;
    --notice: #8183ff26;
    --bgc-0: #ffffff00;
    --text-keep: #f5f6f7;
    --input: 0 10px 20px 1px var(--theme-1);
    --radius: 6px;
    --radius-sub: 4px;
    --tr1: all .1s;
    --tr2: all .2s;
    --tr3: all .3s;
    --tr6: all .6s cubic-bezier(.28,.9,.34,.99);
    --tr1-c: .1s;
    --tr2-c: .2s;
    --tr3-c: .3s;
    --tr6-c: .6s cubic-bezier(.28,.9,.34,.99);
}

[data-color-mode=light] {
    --text: #3c3c3c;
    --text-sub: #4e5358;
    --text-info: #999999;
    --border: #eeeeee;
    --bgc: #ffffff;
    --bgc-sub: #f5f5f5;
    --bgc-blur: rgba(255 255 255 / .7);
    --bgc-blur-say: var(--bgc-blur);
    --box: 0 0 10px rgba(28 31 35 / 4%);
    --side-icon: 0 0 4px rgb(28 31 35 / 2%),0 0 16px 4px rgb(28 31 35 / 5%);
    --box-l: 0 2px 8px rgb(28 31 35 / 3%),0 16px 48px 8px rgb(28 31 35 / 12%);
    --mask-3: #0000004d;
    --mask-5: #00000080;
}

[data-color-mode=night] {
    --text: #f5f6f7;
    --text-sub: #eeeeee;
    --text-info: #999999;
    --border: #3c3c3c;
    --bgc: #292A2D;
    --bgc-sub: #34363a;
    --bgc-blur: rgb(41 42 45 / .7);
    --bgc-blur-say: rgb(55 56 58 / .7);
    --box: 0 0 10px rgba(28 31 35 / 40%);
    --side-icon: 0 0 20px rgba(28 31 35 / 50%);
    --mask-3: #0000004d;
    --mask-5: #00000080;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0 0 0 / 0);
    font-family: sans-serif;
}

html,body {
    height: 100%;
}

html {
    scroll-padding-top: 70px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bgc);
    transition: var(--tr3);
}

section {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

li {
    list-style: none;
}

a {
    color: var(--text);
    text-decoration: none;
    transition: var(--tr3);
}

a:hover {
    color: var(--theme);
}

img {
    object-fit: cover;
}

.img-night {
    filter: brightness(.7);
}

.container-small {
    width: 680px;
    margin: 0 auto;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

.container-full {
    width: 100%;
    padding: 0 30px;
}

::-moz-selection {
    background-color: var(--theme);
    color: #fff;
}

::-webkit-selection {
    background-color: var(--theme);
    color: #fff;
}

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

body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body::-webkit-scrollbar-thumb {
    background: var(--theme-sub);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    border-radius: var(--radius);
}

@keyframes hueRotate {
    from {
        filter: hue-rotate(0);
    }

    to {
        filter: hue-rotate(30deg);
    }
}

.author-info-box {
    border-radius: var(--radius);
    padding: 20px 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    transition: var(--tr3);
}

.author-info-box:hover {
    border: 1px solid var(--theme);
}

.author-info-box .author-info .post-author-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 10px;
    transition: var(--tr3);
}

.author-info-box:hover .author-info .post-author-logo {
    border: 1px solid var(--theme);
}

.author-info-box .author-info .post-author-logo a {
    border-radius: 50%;
}

.author-info-box .author-info img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    vertical-align: middle;
}

.author-info-box .author-info .post-author-name {
    font-weight: 400;
    font-size: 16px;
    color: var(--text);
    text-align: center;
    transition: var(--tr3);
}

.author-info-box .author-info .post-author-name a {
    transition: var(--tr3);
}

.author-info-box .author-info .post-author-description {
    font-size: 13px;
    color: var(--text-info);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}

.author-info-box .author-info .post-author-new {
    margin-top: 20px;
}

.author-info-box .author-info .post-author-new li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-info);
    margin-top: 5px;
    transition: var(--tr3);
}

.author-info-box .author-info .post-author-new li::before {
    content: '\e610';
    font-family: 'iconfont';
    font-size: 14px;
    color: var(--theme);
    margin-right: 2px;
}

.author-info-box .author-info .post-author-new li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--text-info);
    transition: var(--tr3);
}

.author-info-box .author-info .post-author-new li:hover,.author-info-box .author-info .post-author-new li a:hover {
    color: var(--theme);
}

#primary-sidebar > li {
    width: 100%;
    height: auto;
    color: var(--text);
    margin-bottom: 20px;
    transition: var(--tr3);
}

#primary-sidebar > li > * {
    width: 100%;
}

#primary-sidebar > li img,#primary-sidebar > li video {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    vertical-align: middle;
}

#primary-sidebar > li h2 {
    font-size: 15px;
    font-weight: 400;
    color: var(--text);
    position: relative;
    padding-left: 15px;
    margin-left: 20px;
    margin-bottom: -10px;
    line-height: 1.5;
    transition: var(--tr3);
}

#primary-sidebar > li h2::before {
    content: '';
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    border-radius: var(--radius);
    background-color: var(--theme);
    box-shadow: 1px 1px 3px -1px var(--theme-sub);
}

#primary-sidebar .widget_recent_entries {
    border-radius: var(--radius);
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    transition: var(--tr3);
}

#primary-sidebar .widget_recent_entries:hover {
    border: 1px solid var(--theme);
}

#primary-sidebar .widget_recent_comments {
    padding: 0;
    margin-bottom: 20px;
}

#primary-sidebar .widget_recent_comments li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: var(--tr3);
}

#primary-sidebar .widget_recent_comments li:hover {
    border: 1px solid var(--theme);
}

#primary-sidebar .widget_recent_comments li:last-child {
    margin-bottom: 0;
}

#primary-sidebar .widget_recent_comments li img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

#primary-sidebar .widget_recent_comments li a:hover {
    color: var(--theme);
}

#primary-sidebar .widget_recent_comments li article {
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 10px;
    font-size: 14px;
    color: var(--text-info);
    overflow: hidden;
}

#primary-sidebar .widget_recent_comments li .wp-block-latest-comments__comment-meta {
    display: flex;
    align-items: center;
}

#primary-sidebar .widget_recent_comments li .wp-block-latest-comments__comment-author {
    display: block;
    max-width: 52%;
    color: var(--theme);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#primary-sidebar .widget_recent_comments li .wp-block-latest-comments__comment-link {
    color: var(--text-info);
    margin-right: 5px;
    transition: var(--tr3);
    display: none;
}

#primary-sidebar .widget_recent_comments li .wp-block-latest-comments__comment-date {
    display: block;
    font-size: 12px;
    margin-left: 5px;
}

#primary-sidebar .widget_recent_comments li .wp-block-latest-comments__comment-date::before {
    content: '\e74b';
    font-family: 'iconfont';
}

#primary-sidebar .widget_recent_comments li .wp-block-latest-comments__comment-excerpt {
    width: 100%;
}

#primary-sidebar .widget_recent_comments li .wp-block-latest-comments__comment-excerpt a {
    display: inline-grid;
    color: var(--text);
    font-size: 14px;
    transition: var(--tr3);
}

#primary-sidebar .widget_recent_comments li .wp-block-latest-comments__comment-excerpt a:hover {
    color: var(--theme);
}

#primary-sidebar .widget_recent_comments li .wp-block-latest-comments__comment-excerpt p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#primary-sidebar .widget_recent_comments li .wp-block-latest-comments__comment-author > i {
    display: none;
}

#primary-sidebar .widget_tag_cloud {
    cursor: default;
    max-height: 400px;
    padding: 10px 9px 5px 10px;
    margin-bottom: 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: var(--tr3);
}

#primary-sidebar .widget_tag_cloud:hover {
    border: 1px solid var(--theme);
}

#primary-sidebar .widget_tag_cloud a {
    display: inline-block;
    position: relative;
    width: 32%;
    padding: 2px 6px;
    margin-bottom: 1px;
    font-size: 13px !important;
    border-radius: var(--radius-sub);
    color: var(--theme);
    background-color: var(--theme-1);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: var(--tr2);
    z-index: 1;
}

#primary-sidebar .widget_tag_cloud a::before {
    content: '\e74c ';
    font-family: 'iconfont';
    font-size: 14px;
}

#primary-sidebar .widget_tag_cloud a:hover {
    color: var(--text-keep);
}

#primary-sidebar .widget_tag_cloud a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    opacity: 0;
    transition: var(--tr2);
    z-index: -1;
}

#primary-sidebar .widget_tag_cloud a:hover::after {
    opacity: 1;
    animation: hueRotate 3s infinite alternate;
}

#primary-sidebar .widget_categories,#primary-sidebar .widget_archive {
    border-radius: var(--radius);
    padding-left: 0;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    transition: var(--tr3);
}

#primary-sidebar .widget_categories:hover,#primary-sidebar .widget_archive:hover {
    border: 1px solid var(--theme);
}

#primary-sidebar .wp-block-categories,#primary-sidebar .widget_archive {
    padding: 10px;
}

#primary-sidebar .wp-block-categories li,#primary-sidebar .widget_archive li {
    margin-bottom: 5px;
}

#primary-sidebar .wp-block-categories li:last-child,#primary-sidebar .widget_archive li:last-child {
    margin-bottom: 0;
}

#primary-sidebar .widget_search {
    padding-left: 0;
    margin-bottom: 20px;
}

#primary-sidebar .widget_search label {
    display: none;
}

#primary-sidebar .widget_search .wp-block-search__inside-wrapper {
    position: relative;
}

#primary-sidebar .widget_search input {
    width: 100%;
    height: 40px;
    padding: 0 25px 0 10px;
    outline: none;
    color: var(--text);
    background-color: var(--bgc);
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--tr3);
}

#primary-sidebar .widget_search input:hover,#primary-sidebar .widget_search input:focus {
    border: 1px solid var(--theme);
}

#primary-sidebar .widget_search input:focus {
    box-shadow: var(--input);
}

#primary-sidebar .widget_search button {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--radius);
    background-color: var(--bgc);
    cursor: pointer;
    transition: var(--tr3);
}

#primary-sidebar .widget_search button span {
    font-size: 18px;
    color: var(--text-info);
}

#primary-sidebar .wp-block-group__inner-container li,#primary-sidebar .widget_block > ul li {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
}

#primary-sidebar .wp-block-group__inner-container li:last-child,#primary-sidebar .widget_block > ul li:last-child {
    margin-bottom: 0;
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container {
    width: 100%;
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container h2 {
    margin-bottom: 10px;
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-posts,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-archives,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-categories {
    width: 100%;
    border-radius: var(--radius);
    padding: 10px;
    border: 1px solid var(--border);
    transition: var(--tr3);
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-posts:hover,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-archives:hover,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-categories:hover {
    border: 1px solid var(--theme);
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: var(--tr3);
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment:hover {
    border: 1px solid var(--theme);
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment a:hover {
    color: var(--theme);
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment article {
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 10px;
    font-size: 14px;
    color: var(--text-info);
    overflow: hidden;
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
    display: flex;
    align-items: center;
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment .wp-block-latest-comments__comment-author {
    display: block;
    max-width: 52%;
    color: var(--theme);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment .wp-block-latest-comments__comment-author > i {
    display: none;
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment .wp-block-latest-comments__comment-link {
    color: var(--text-info);
    margin-right: 5px;
    transition: var(--tr3);
    display: none;
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment .wp-block-latest-comments__comment-date {
    display: block;
    font-size: 12px;
    margin-left: 5px;
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment .wp-block-latest-comments__comment-date::before {
    content: '\e74b';
    font-family: 'iconfont';
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt {
    width: 100%;
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt a {
    display: inline-grid;
    color: var(--text);
    font-size: 14px;
    transition: var(--tr3);
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt a:hover {
    color: var(--theme);
}

#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#primary-sidebar .widget_recent_entries li a,#primary-sidebar .wp-block-categories li a,#primary-sidebar .widget_archive li a,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-posts li a,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-archives li a,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-categories li a {
    display: block;
    position: relative;
    width: 100%;
    color: var(--text-sub);
    font-size: 14px;
    padding: 4px 6px;
    border-radius: var(--radius-sub);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: var(--tr2);
    z-index: 1;
}

#primary-sidebar .widget_recent_entries li a:hover,#primary-sidebar .wp-block-categories li a:hover,#primary-sidebar .widget_archive li a:hover,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-posts li a:hover,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-archives li a:hover,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-categories li a:hover {
    padding-left: 24px;
    color: var(--text-keep);
}

#primary-sidebar .widget_recent_entries li a::before,#primary-sidebar .wp-block-categories li a::before,#primary-sidebar .widget_archive li a::before,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-posts li a::before,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-archives li a::before,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-categories li a::before {
    content: '\e610 ';
    font-family: 'iconfont';
    color: var(--text-keep);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -14px;
    transition: var(--tr2);
}

#primary-sidebar .widget_recent_entries li a:hover::before,#primary-sidebar .wp-block-categories li a:hover::before,#primary-sidebar .widget_archive li a:hover::before,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-posts li a:hover::before,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-archives li a:hover::before,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-categories li a:hover::before {
    left: 7px;
}

#primary-sidebar .widget_recent_entries li a::after,#primary-sidebar .wp-block-categories li a::after,#primary-sidebar .widget_archive li a::after,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-posts li a::after,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-archives li a::after,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-categories li a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    opacity: 0;
    transition: var(--tr2);
    z-index: -1;
}

#primary-sidebar .widget_recent_entries li a:hover::after,#primary-sidebar .wp-block-categories li a:hover::after,#primary-sidebar .widget_archive li a:hover::after,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-latest-posts li a:hover::after,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-archives li a:hover::after,#primary-sidebar .wp-block-group .wp-block-group__inner-container .wp-block-categories li a:hover::after {
    opacity: 1;
    animation: hueRotate 3s infinite alternate;
}

.page-404 {
    width: 100%;
    height: auto;
    padding-bottom: 50px;
    overflow: hidden;
}

.page-404-detail {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    padding: 130px 50px 85px 50px;
}

.page-404-detail img {
    width: 350px;
    max-width: 100%;
}

.page-404-detail p {
    color: var(--text-info);
    margin-bottom: 20px;
}

.page-404-detail a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: 14px;
    margin: 5px;
    transition: var(--tr3);
}

.page-404-detail .back-home {
    color: var(--text-keep);
    background: var(--theme);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
}

.page-404-detail .back-history {
    color: var(--theme);
    border: 1px solid var(--theme);
}

.page-404-detail a:hover {
    opacity: .8;
}

.single-top {
    margin-top: 70px;
    margin-bottom: 20px;
}

.single-banner {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    transition: var(--tr3);
}

.single-banner .single-cate {
    margin: 20px 0 13px 0;
}

.single-banner .single-cate .single-cate-box {
    display: inline-block;
    padding: 2px 10px 3px 4px;
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    border-radius: 15px;
}

.single-banner .single-cate .single-cate-box span {
    font-size: 22px;
    color: var(--bgc-sub);
    vertical-align: middle;
    transition: color var(--tr3-c);
}

.single-banner .single-cate .single-cate-box a {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-keep);
}

.single-banner .single-title h1 {
    font-size: 32px;
    color: var(--text);
    margin-bottom: 15px;
    text-align: justify;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
    transition: var(--tr3);
}

.single-banner .single-detail .author,.single-banner .single-detail .other {
    display: flex;
    align-items: center;
}

.single-banner .single-detail .author {
    margin-bottom: 15px;
}

.single-banner .single-detail .date::before {
    content: '\e74b';
    font-family: 'iconfont';
    font-size: 18px;
}

.single-banner .single-detail .views::before {
    content: '\e745';
    font-family: 'iconfont';
    font-size: 18px;
}

.single-banner .single-detail .comments::before {
    content: '\e7b2';
    font-family: 'iconfont';
    font-size: 18px;
}

.single-banner .single-detail .date,.single-banner .single-detail .views,.single-banner .single-detail .comments {
    margin-right: 5px;
    display: flex;
    align-items: center;
}

.single-banner .single-detail span,.single-banner .single-detail a {
    font-size: 14px;
    color: var(--text-info);
    transition: var(--tr3);
}

.single-banner .single-detail .author > span a {
    color: var(--text-sub);
    font-weight: 700;
}

.single-banner .single-detail .author a:hover {
    color: var(--theme);
}

.single-banner .single-detail .author > a {
    margin-right: 8px;
    border-radius: 50%;
}

.single-banner .single-detail img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    vertical-align: middle;
}

.single-banner .single-detail .post-edit-link {
    font-size: 14px;
    color: var(--theme);
    margin-left: 5px;
}

.single-banner .breadcrumb {
    margin-top: 15px;
    color: var(--text-sub);
}

.single-banner .breadcrumb span {
    font-size: 20px;
    margin-right: 5px;
}

.single-banner .breadcrumb ul {
    display: flex;
    align-items: center;
}

.single-banner .breadcrumb ul li {
    margin-right: 5px;
    font-size: 14px;
    color: var(--text-info);
}

.single-banner .breadcrumb ul li a {
    color: var(--text-info);
    transition: var(--tr3);
}

.single-banner .breadcrumb ul li a:hover {
    color: var(--theme);
}

.single-banner .breadcrumb ul li:first-child a {
    display: flex;
    align-items: center;
}

.single-banner .breadcrumb ul li:first-child a::before {
    content: '\e67a';
    font-family: 'iconfont';
    font-size: 18px;
}

.single-main {
    display: flex;
    justify-content: space-between;
}

.post-menu-btn {
    display: none;
    position: fixed;
    right: 30px;
    bottom: 150px;
    background-color: var(--bgc);
    width: 45px;
    height: 45px;
    border-radius: 8px;
    box-shadow: var(--side-icon);
    cursor: pointer;
    display: none;
    z-index: 5;
    -webkit-animation: open .5s;
    animation: open .5s;
    transition: var(--tr3);
}

.post-menu-btn div {
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    justify-content: center;
    align-items: center;
    transition: var(--tr3);
}

.post-menu-btn div:hover {
    border: 1px solid var(--theme);
}

.post-menu-btn span {
    font-size: 24px;
    color: var(--text-info);
    transition: var(--tr3);
}

.post-menu-btn:hover span {
    color: var(--theme);
}

#article-toc {
    display: block;
    position: fixed;
    width: 285px;
    height: auto;
    max-height: 50%;
    bottom: 205px;
    right: -310px;
    margin-bottom: 0;
    background-color: var(--bgc);
    box-shadow: var(--box);
    padding: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: auto;
    z-index: 5;
    transition: var(--tr3);
}

#article-toc:hover {
    border: 1px solid var(--theme);
}

#article-toc::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    border-radius: var(--radius);
}

#article-toc::-webkit-scrollbar-thumb {
    border-radius: var(--radius);
}

#article-toc:hover::-webkit-scrollbar-thumb {
    background-color: var(--theme);
}

.article-toc {
    right: 30px !important;
}

#article-toc ul,#article-toc ul li {
    margin-left: 0;
}

#article-toc #article-toc-title {
    width: 100%;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    text-align: center;
    transition: var(--tr3);
}

#article-toc #article-toc-ul {
    margin-top: 10px;
}

#article-toc #article-toc-ul a * {
    font-style: normal;
    font-weight: 400;
}

#article-toc ul li {
    list-style: none;
    margin-bottom: 5px;
    width: 100%;
    height: auto;
}

#article-toc ul li:last-child {
    margin-bottom: 0;
}

#article-toc ul li a {
    font-size: 14px;
    display: block;
    width: 100%;
    padding: 2px 6px;
    padding-left: 6px;
    border-radius: var(--radius-sub);
    transition: var(--tr3);
}

#article-toc ul li a:hover {
    color: var(--text-keep);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
}

#article-toc #article-toc-ul .heading-level-1,#article-toc #article-toc-ul .heading-level-2 {
    font-size: 15px;
}

#article-toc #article-toc-ul .heading-level-3 {
    margin-left: 10px;
    width: calc(100% - 10px);
}

#article-toc #article-toc-ul .heading-level-4,#article-toc #article-toc-ul .heading-level-5,#article-toc #article-toc-ul .heading-level-6 {
    margin-left: 20px;
    width: calc(100% - 20px);
}

#article-toc #article-toc-ul .heading-level-1 a,#article-toc #article-toc-ul .heading-level-2 a {
    font-size: 15px;
}

#article-toc #article-toc-ul .heading-level-4 a,#article-toc #article-toc-ul .heading-level-5 a,#article-toc #article-toc-ul .heading-level-6 a {
    font-size: 13px;
}

#article-toc #article-toc-ul .heading-level-1 a,#article-toc #article-toc-ul .heading-level-2 a,#article-toc #article-toc-ul .heading-level-3 a,#article-toc #article-toc-ul .heading-level-4 a,#article-toc #article-toc-ul .heading-level-5 a,#article-toc #article-toc-ul .heading-level-6 a {
    display: block;
    position: relative;
    width: 100%;
    color: var(--text-sub);
    font-size: 14px;
    padding: 2px 6px;
    border-radius: var(--radius-sub);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: var(--tr2);
    z-index: 1;
}

#article-toc #article-toc-ul .heading-level-1 a:hover,#article-toc #article-toc-ul .heading-level-2 a:hover,#article-toc #article-toc-ul .heading-level-3 a:hover,#article-toc #article-toc-ul .heading-level-4 a:hover,#article-toc #article-toc-ul .heading-level-5 a:hover,#article-toc #article-toc-ul .heading-level-6 a:hover {
    text-decoration: none;
    padding-left: 24px;
    color: var(--text-keep);
}

#article-toc #article-toc-ul .heading-level-1 a::before,#article-toc #article-toc-ul .heading-level-2 a::before,#article-toc #article-toc-ul .heading-level-3 a::before,#article-toc #article-toc-ul .heading-level-4 a::before,#article-toc #article-toc-ul .heading-level-5 a::before,#article-toc #article-toc-ul .heading-level-6 a::before {
    content: '\e610 ';
    font-weight: 400;
    font-family: 'iconfont';
    color: var(--text-keep);
    position: absolute;
    left: -14px;
    transition: var(--tr2);
}

#article-toc #article-toc-ul .heading-level-1 a:hover::before,#article-toc #article-toc-ul .heading-level-2 a:hover::before,#article-toc #article-toc-ul .heading-level-3 a:hover::before,#article-toc #article-toc-ul .heading-level-4 a:hover::before,#article-toc #article-toc-ul .heading-level-5 a:hover::before,#article-toc #article-toc-ul .heading-level-6 a:hover::before {
    left: 7px;
}

#article-toc #article-toc-ul .heading-level-1 a::after,#article-toc #article-toc-ul .heading-level-2 a::after,#article-toc #article-toc-ul .heading-level-3 a::after,#article-toc #article-toc-ul .heading-level-4 a::after,#article-toc #article-toc-ul .heading-level-5 a::after,#article-toc #article-toc-ul .heading-level-6 a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    opacity: 0;
    transition: var(--tr2);
    z-index: -1;
}

#article-toc #article-toc-ul .heading-level-1 a:hover::after,#article-toc #article-toc-ul .heading-level-2 a:hover::after,#article-toc #article-toc-ul .heading-level-3 a:hover::after,#article-toc #article-toc-ul .heading-level-4 a:hover::after,#article-toc #article-toc-ul .heading-level-5 a:hover::after,#article-toc #article-toc-ul .heading-level-6 a:hover::after {
    opacity: 1;
    animation: hueRotate 3s infinite alternate;
}

.single-main .left {
    width: calc(100% - 305px);
    border-right: 1px solid var(--border);
    padding-right: 20px;
    transition: border-right var(--tr3-c);
}

.single-main .left .post-tip {
    display: none;
}

.single-main .left .the-tag {
    margin-bottom: 0;
    margin-top: 40px;
    cursor: default;
}

.single-main .left .the-tag span a {
    display: inline-block;
    position: relative;
    font-size: 13px;
    padding: 2px 6px 2px 4px;
    margin-right: 5px;
    color: var(--theme);
    background: var(--theme-1);
    border-radius: var(--radius-sub);
    white-space: nowrap;
    transition: var(--tr2);
    z-index: 1;
}

.single-main .left .the-tag span a::before {
    content: '\e74c';
    font-family: 'iconfont';
    font-size: 14px;
}

.single-main .left .the-tag span a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    opacity: 0;
    border-radius: var(--radius-sub);
    transition: var(--tr2);
    z-index: -1;
}

.single-main .left .the-tag span a:hover::after {
    opacity: 1;
    animation: hueRotate 3s infinite alternate;
}

.single-main .left .the-tag span a:hover {
    color: var(--text-keep);
    text-decoration: none;
}

.single-main .left .the-end {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-info);
    font-size: 14px;
    margin-bottom: 20px;
    margin-top: 40px;
}

.single-main .left .the-end i {
    display: block;
    width: 30%;
    height: 1px;
    background-color: var(--border);
    transition: var(--tr3);
}

.single-main .left .post-copyright {
    width: 100%;
    font-size: 14px;
    padding: 15px;
    margin-top: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-info);
    background-color: var(--bgc);
    transition: var(--tr3);
}

.single-main .left .post-copyright:hover {
    border: 1px solid var(--theme);
}

.single-main .left .post-copyright div {
    line-height: 1.8;
    transition: var(--tr3);
}

.single-main .left .post-copyright + .the-end {
    display: none;
}

.single-main .left .post-context {
    transition: var(--tr3);
}

.single-main .left .post-context .post-prev-next {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: var(--tr3);
}

.single-main .left .post-context .post-prev-next:hover {
    border: 1px solid var(--theme);
}

.single-main .left .post-context .post-prev-next .post-prev,.single-main .left .post-context .post-prev-next .post-next {
    width: calc(50% - 15.5px);
    height: auto;
    font-size: 15px;
    transition: var(--tr3);
}

.single-main .left .post-context .post-prev-next i {
    display: block;
    width: 1px;
    height: 50px;
    background-color: var(--border);
    margin: 0 15px;
    transition: var(--tr3);
}

.single-main .left .post-context .post-prev-next span,.single-main .left .post-context .post-prev-next a {
    color: var(--text);
    text-align: center;
    transition: var(--tr3);
}

.single-main .left .post-context .post-prev-next a {
    display: inline;
    font-size: 15px;
}

.single-main .left .post-context .post-prev-next a:hover {
    color: var(--theme);
}

.single-main .left .post-context .post-prev-next span {
    color: var(--text-info);
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
}

.single-main .left .post-context .post-prev-next p {
    font-size: 14px;
    color: var(--text-info);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.single-main .left .post-context .post-prev-next .post-prev {
    border-right: var(--border);
}

.single-main .right {
    width: 285px;
}

.post-comments {
    width: 100%;
}

.post-comments img,.post-comments video {
    max-width: 100%;
    vertical-align: bottom;
    border-radius: var(--radius);
}

.post-comments .navigation {
    display: none;
}

.post-comments .reply {
    text-align: right;
    margin-top: 5px;
}

.post-comments .nocomments {
    text-align: center;
    color: var(--text-info);
}

.post-comments #comments {
    display: none;
}

.post-comments .comment-reply-title,.post-comments .post-comments-title,.post-context .post-context_text {
    color: var(--text-sub);
    font-size: 16px;
    font-weight: 400;
    margin-top: 60px;
    margin-bottom: 20px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: left;
    background: var(--theme-2);
    background: linear-gradient(120deg,var(--theme-2) 0%,var(--bgc-0) 100%);
    border-radius: var(--radius);
    transition: var(--tr3);
}

.post-context .post-context_text::before,.post-comments .comment-reply-title::before,.post-comments .post-comments-title::before {
    margin-right: 4px;
    font-family: 'iconfont';
    font-size: 26px;
    font-weight: 400;
}

.post-context .post-context_text::before {
    content: '\e751';
}

.post-comments .comment-reply-title::before {
    content: '\e767';
}

.post-comments .comment-reply-title > a {
    transition: var(--tr3);
}

.post-comments .comment-reply-title > a i {
    display: none;
}

.post-comments .comment-reply-title #cancel-comment-reply-link {
    display: none;
    color: var(--text-info);
    font-weight: 400;
    font-size: 12px;
    margin-left: 5px;
    transition: var(--tr3);
}

.post-comments .comment-reply-title #cancel-comment-reply-link:hover {
    color: var(--theme);
}

.post-comments .post-comments-title::before {
    content: '\e7b2';
    font-family: 'iconfont';
    font-size: 26px;
    font-weight: 400;
}

.post-comments .post-comments-title a {
    color: var(--text-sub);
}

.post-comments ol li {
    width: 100%;
    background-color: var(--bgc-sub);
    word-break: break-all;
    word-wrap: break-word;
    border-radius: var(--radius);
}

.post-comments .comment {
    padding-top: 10px;
}

.post-comments .depth-1 {
    padding: 20px 20px 10px 20px;
    margin-top: 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: var(--tr3);
}

.post-comments .depth-1:hover {
    border: 1px solid var(--theme);
}

.post-comments .depth-2,.post-comments .depth-3 {
    padding: 10px 0 0 40px;
    border-radius: 0;
}

.post-comments .comment-body {
    font-size: 15px;
    color: var(--text-sub);
    width: 100%;
    border-top: 1px dashed var(--border);
    padding-top: 20px;
    transition: var(--tr3);
}

.post-comments .depth-1 > .comment-body {
    border-top: 0;
    padding-top: 0;
}

.post-comments .comment-body .comment-awaiting-moderation {
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    color: var(--theme);
    line-height: 1.5;
    margin-bottom: 5px;
}

.post-comments .comment-body p {
    width: 100%;
    font-size: 15px;
    line-height: 24px;
    color: var(--text);
    word-break: break-all;
    word-wrap: break-word;
    transition: var(--tr3);
}

.post-comments .comment-body p a {
    color: var(--theme);
}

.post-comments .comment-body p a:hover {
    text-decoration: underline;
}

.post-comments .comment-body p a i {
    display: none;
}

.post-comments #respond #reply-title > a {
    color: var(--theme);
    margin: 0 5px;
    transition: var(--tr3);
}

.post-comments #respond #reply-title a:hover {
    color: var(--theme);
}

.post-comments .comment-body .reply a {
    position: relative;
    font-size: 12px;
    color: var(--text-info);
    visibility: hidden;
    opacity: 0;
    display: inline-block;
    padding: 4px 8px;
    margin-bottom: 5px;
    border-radius: var(--radius-sub);
    transition: var(--tr2);
    z-index: 1;
}

.post-comments .comment-body .reply a:hover {
    color: var(--theme);
}

.post-comments .comment-body:hover .reply a {
    visibility: visible;
    opacity: 1;
    background-color: var(--bgc-0);
    color: var(--text-info);
}

.post-comments .comment-body:hover .reply a:hover {
    color: var(--text-keep);
}

.post-comments .comment-body:hover .reply a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    opacity: 0;
    border-radius: var(--radius-sub);
    transition: var(--tr2);
    z-index: -1;
}

.post-comments .comment-body:hover .reply a:hover::after {
    opacity: 1;
    animation: hueRotate 3s infinite alternate;
}

.post-comments .comment-author {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.post-comments .comment-author img {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin-right: 10px;
}

.post-comments .fn,.post-comments .fn a {
    color: var(--text);
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: var(--tr3);
}

.post-comments .comment-author .fn {
    font-style: normal;
    display: flex;
}

.post-comments .comment-author .says {
    display: none;
}

.post-comments .comment-meta {
    font-size: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.post-comments .comment-meta a {
    color: var(--text-info);
    transition: var(--tr3);
}

.post-comments .comment-meta a:first-child::before {
    content: '\e74b';
    font-family: 'iconfont';
    font-size: 16px;
}

.post-comments .comment-meta .comment-edit-link::before {
    content: '\e6f6';
    font-family: 'iconfont';
    font-size: 16px;
}

.post-comments .comment-meta .comment-edit-link:hover {
    color: var(--theme);
}

.post-comments .comment-meta a:first-child,.post-comments .comment-meta .comment-edit-link {
    display: flex;
    align-items: center;
}

.post-comments .comment-respond {
    border-radius: var(--radius);
}

.post-comments .comment-respond .comment-form .comment-notes {
    font-size: 16px;
    color: var(--text-sub);
    margin-bottom: 15px;
    text-align: center;
    display: none;
}

.post-comments .comment-respond .comment-form .comment-notes .required-field-message {
    display: none;
}

.post-comments .comment-respond .comment-form .comment-form-comment label {
    display: none;
}

.post-comments .comment-respond textarea {
    font-size: 14px;
    line-height: 24px;
    width: 100%;
    color: var(--text-sub);
    background-color: var(--bgc);
    resize: none;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    margin-bottom: 6px;
    transition: var(--tr3);
}

.post-comments .comment-respond textarea:hover,.post-comments .comment-respond textarea:focus {
    border: 1px solid var(--theme);
}

.post-comments .comment-respond textarea:focus {
    box-shadow: var(--input);
}

.post-comments .comment-respond textarea::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    border-radius: var(--radius);
}

.post-comments .comment-respond textarea::-webkit-scrollbar-thumb {
    background-color: var(--theme-sub);
    border-radius: var(--radius);
}

.post-comments .comment-respond textarea::-webkit-scrollbar:hover {
    cursor: default;
}

.post-comments .comment-respond .logged-in-as {
    display: none;
}

.post-comments .comment-respond .comment-form {
    font-size: 0;
    margin-bottom: 5px;
}

.post-comments .comment-respond .comment-form-author,.post-comments .comment-respond .comment-form-email,.post-comments .comment-respond .comment-form-url {
    display: inline-block;
    width: 33.33%;
    height: auto;
}

.post-comments .comment-respond .comment-form-author {
    padding-right: 5px;
}

.post-comments .comment-respond .comment-form-email {
    padding: 5px;
}

.post-comments .comment-respond .comment-form-url {
    padding-left: 5px;
}

.post-comments .comment-respond .comment-form-author label,.post-comments .comment-respond .comment-form-email label,.post-comments .comment-respond .comment-form-url label {
    display: none;
}

.post-comments .comment-respond .comment-form-author input,.post-comments .comment-respond .comment-form-email input,.post-comments .comment-respond .comment-form-url input {
    outline: none;
    font-size: 12px;
    width: 100%;
    height: 35px;
    padding: 0 10px;
    background-color: var(--bgc);
    color: var(--text-sub);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--tr3);
}

.post-comments .comment-respond .comment-form-author input:hover,.post-comments .comment-respond .comment-form-email input:hover,.post-comments .comment-respond .comment-form-url input:hover,.post-comments .comment-respond .comment-form-author input:focus,.post-comments .comment-respond .comment-form-email input:focus,.post-comments .comment-respond .comment-form-url input:focus {
    border: 1px solid var(--theme);
}

.post-comments .comment-respond .comment-form-author input:focus,.post-comments .comment-respond .comment-form-email input:focus,.post-comments .comment-respond .comment-form-url input:focus {
    box-shadow: var(--input);
}

.post-comments .comment-respond .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    margin: 10px 0 5px 0;
}

.post-comments .comment-respond .comment-form-cookies-consent input {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.post-comments .comment-respond .comment-form-cookies-consent label {
    font-size: 14px;
    color: var(--text-sub);
    transition: var(--tr3);
}

.post-comments .comment-respond .form-submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
}

.post-comments .comment-respond .form-submit input {
    font-size: 14px;
    font-weight: 400;
    padding: 4px 0;
    outline: none;
    width: 100%;
    height: 35px;
    color: var(--text-keep);
    background: var(--theme-sub);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    border-radius: var(--radius);
    border: 0;
    margin-top: 10px;
    cursor: pointer;
    box-shadow: var(--box-p);
    opacity: 1;
    transition: opacity .3s;
}

.post-comments .comment-respond .form-submit input:hover {
    opacity: .8;
}

.post-comments .comment-respond .form-submit .comment-cancel-btn {
    display: inline-block;
    text-align: center;
    font-size: 14px;
    width: calc(30% - 10px);
    height: 35px;
    line-height: 33px;
    color: #ef3b36;
    border: 1px solid #ef3b36;
    border-radius: var(--radius);
    margin-top: 10px;
    box-shadow: var(--box-p);
    transition: var(--tr3);
}

.post-comments .comment-respond .form-submit .comment-cancel-btn:hover {
    color: var(--text-keep);
    background: #ef3b36;
}

.post-comments .comment > .comment-body > .vcard > .fn i,.post-comments .byuser > .comment-body > .vcard > .fn i {
    margin-left: 8px;
    display: inline-block;
    font-size: 13px;
    font-style: normal;
    color: var(--text-keep);
    background: var(--theme-sub);
    padding: 2px 6px;
    border-radius: var(--radius-sub);
}

.post-comments .comment > .comment-body > .vcard > .fn,.post-comments .comment > .comment-body > .vcard > .fn a {
    color: #ff8703;
}

.post-comments .comment > .comment-body > .vcard > .fn i {
    background: #ff8703;
    background: -webkit-linear-gradient(120deg,#ff8703,#ffaf58);
    background: linear-gradient(120deg,#ff8703,#ffaf58);
}

.post-comments .byuser > .comment-body > .vcard > .fn,.post-comments .byuser > .comment-body > .vcard > .fn a {
    color: #ff637d;
}

.post-comments .byuser > .comment-body > .vcard > .fn > i {
    background: #ff637d;
    background: -webkit-linear-gradient(120deg,#ff637d,#ff8ea1);
    background: linear-gradient(120deg,#ff637d,#ff8ea1);
}

.post-comments .bypostauthor > .comment-body > .vcard > .fn,.post-comments .bypostauthor > .comment-body > .vcard > .fn a {
    color: #01ab07;
}

.post-comments .bypostauthor > .comment-body > .vcard > .fn > i {
    background: #01ab07;
    background: -webkit-linear-gradient(120deg,#1ea91e,#4ac53b);
    background: linear-gradient(120deg,#01ab07,#4ac53b);
}

.post-comments .byuser > .comment-body > .vcard > .fn .master {
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.post-comments .byuser > .comment-body > .vcard > .fn .master::selection {
    background: var(--theme);
    -webkit-text-fill-color: #fff
}

.post-comments .byuser > .comment-body > .vcard > .fn a i {
    background: var(--theme);
    background: -webkit-linear-gradient(120deg,var(--theme),var(--theme-sub));
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
}

.is-logined {
    width: 100%;
    height: 100px;
    transition: var(--tr3);
}

.is-logined .is-logined-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text-info);
    transition: var(--tr3);
}

.is-logined .is-logined-box:hover {
    border: 1px solid var(--theme);
}

.is-logined .is-logined-box a {
    margin: 0 5px;
    color: var(--text-keep);
    background: var(--theme-sub);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    padding: 2px 8px;
    border-radius: var(--radius-sub);
    transition: var(--tr3);
}

.is-logined .is-logined-box a:hover {
    opacity: .8;
}

.post-comments #post-comments-nav {
    width: 100%;
    height: 60px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.post-comments #post-comments-nav a,.post-comments #post-comments-nav span {
    display: block;
    width: 30px;
    height: 30px;
    color: var(--text-info);
    font-size: 14px;
    background-color: var(--border);
    line-height: 30px;
    text-align: center;
    margin: 0 3px;
    border-radius: var(--radius-sub);
    overflow: hidden;
    transition: var(--tr3);
}

.post-comments #post-comments-nav a:hover {
    background-color: var(--theme);
    color: var(--text-keep);
}

.post-comments #post-comments-nav .dots {
    background-color: var(--bgc-0);
    cursor: default;
}

.post-comments #post-comments-nav .current {
    cursor: default;
    color: var(--text-keep);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    overflow: hidden;
}

@media screen and (max-width: 1280px) {
    .single-top,.article-main {
        width:100%;
        padding: 0 30px;
    }
}

@media screen and (max-width: 960px) {
    .single-top,.article-main {
        width:100%;
        padding: 0 20px;
    }

    .single-main .left {
        width: 100%;
        border-right: none;
        padding-right: 0;
    }

    .single-main .right {
        display: none;
    }

    .single-banner .single-title h1,.page-banner .page-title h1 {
        font-size: 28px;
    }

    .post-comments .comment-body .reply a {
        visibility: visible;
        opacity: 1;
    }

    .post-comments .depth-2,.post-comments .depth-3 {
        padding: 10px 0 0 30px;
    }

    .post-menu-btn {
        display: none;
        right: 20px;
        bottom: 91px;
        width: 41px;
        height: 41px;
        transition: var(--tr3);
    }

    #article-toc {
        bottom: 142px;
    }

    .article-toc {
        bottom: 193px;
        right: 20px !important;
    }
}

@media screen and (max-width: 640px) {
    .single-top {
        margin-bottom:15px;
    }

    .single-banner {
        border-bottom: 1px solid var(--border);
        padding-bottom: 15px;
    }

    .single-banner .single-title h1,.page-banner .page-title h1 {
        font-size: 24px;
    }

    .single-banner .single-title h1 {
        margin-bottom: 10px;
    }

    .single-main .left {
        border: none;
    }

    .single-main .left .the-end {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .post-comments .fn,.post-comments .fn a {
        font-size: 15px;
    }

    .post-comments .comment-respond textarea {
        padding: 15px;
        margin-bottom: 5px;
    }

    .post-comments .comment-respond .comment-form-author,.post-comments .comment-respond .comment-form-email,.post-comments .comment-respond .comment-form-url {
        width: 100%;
        margin-bottom: 10px;
    }

    .post-comments .comment-respond .comment-form-author {
        padding-right: 0;
        margin-top: 5px;
    }

    .post-comments .comment-respond .comment-form-email {
        padding: 0;
    }

    .post-comments .comment-respond .comment-form-url {
        padding-left: 0;
        margin-bottom: 5px;
    }

    .post-comments .comment-respond .comment-form-cookies-consent {
        display: flex;
        align-items: center;
        margin: 10px 0 5px 0;
    }

    .post-comments .comment {
        padding-top: 10px;
    }

    .post-comments .depth-1 {
        padding: 15px 15px 10px 15px;
    }

    .post-comments .comment-body {
        padding-top: 15px;
    }

    .single-main .left .the-tag {
        margin-top: 20px;
    }

    .post-context .post-context_text,.post-comments .comment-reply-title,.post-comments .post-comments-title {
        font-size: 15px;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 6px 8px;
    }

    .post-context .post-context_text::before,.post-comments .comment-reply-title::before,.post-comments .post-comments-title::before {
        font-size: 24px;
    }

    .single-main .left .the-end {
    }

    .single-main .left .post-context {
        margin-top: 0;
    }

    .single-main .left .the-end {
        margin-top: 20px;
    }
}

@keyframes open {
    from {
        opacity: 0;
        visibility: hidden;
    }

    to {
        opacity: 1;
        visibility: visible;
    }
}

.single-main .left .post-content {
    font-size: 16px;
    color: var(--text);
    transition: var(--tr3);
}

.single-main .left .post-content > * {
    margin-bottom: 20px;
    width: 100%;
    position: relative;
    transition: var(--tr3);
}

.single-main .left .post-content > *:last-child {
    margin-bottom: 0;
}

.single-main .left .post-content a {
    color: #ffffff;
}


.xh-regbox .xh-btn-sm,.xh-btn-sm {
    padding: 4px 16px;
    font-size: 14px;
    line-height: 1.33;
    border-radius: 3px;
}
.xh-regbox .xh-btn-xs,.xh-btn-xs {
    padding: 2px 14px;
    font-size: 12px;
    line-height: 1.33;
    border-radius: 3px;
}
.xh-regbox .xh-btn-primary,.xh-btn-primary {
    color: #fff;
    background-color: #009a61;
    border-color: #008151;
}
.xh-regbox .xh-btn-warning,.xh-btn-warning {
    color: #fff;
    background-color: #ff851b;
    border-color: #e56e06;
	margin: 5px;
}

.single-main .left .post-content a:hover {
    text-decoration: underline;
}

.single-main .left .post-content p {
    line-height: 1.8;
    text-align: justify;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
}

.single-main .left .post-content .has-text-align-center {
    text-align: center;
}

.single-main .left .post-content .has-text-align-right {
    text-align: right;
}

.single-main .left .post-content h6,.single-main .left .post-content h5,.single-main .left .post-content h4,.single-main .left .post-content h3,.single-main .left .post-content h2,.single-main .left .post-content h1 {
    text-align: justify;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
}

.single-main .left .post-content .attachment a {
    background: none;
}

.single-main .left .post-content .attachment a img {
    margin: 0;
}

.single-main .left .post-content blockquote {
    background-color: var(--bgc-sub);
    border-left: 4px solid var(--theme);
    padding: 10px;
    color: var(--text-sub);
    transition: var(--tr3);
}

.single-main .left .post-content blockquote p {
    color: var(--text-info);
}

.single-main .left .post-content blockquote cite {
    display: inline-block;
    font-size: 14px;
    color: var(--text-info);
    margin-top: 10px;
}

.single-main .left .post-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    vertical-align: bottom;
    transition: var(--tr3);
}

.single-main .left .post-content figcaption {
    font-size: 14px;
    font-style: italic;
    color: var(--text-info);
    margin-top: 5px;
    text-align: center;
}

.single-main .left .post-content .wp-block-audio {
    text-align: center;
}

.single-main .left .post-content .wp-block-video {
    width: 100%;
    padding-bottom: 60%;
    position: relative;
    background-color: #000;
    border-radius: var(--radius);
}

.single-main .left .post-content .wp-block-video video {
    position: absolute;
    width: 100%;
    height: 100%;
}

.single-main .left .post-content .wp-block-video figcaption {
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
}

.single-main .left .post-content > .wp-block-image {
    text-align: center;
    width: 100%;
    height: 100%;
}

.single-main .left .post-content > .wp-block-image img {
    cursor: pointer;
    transition: var(--tr3);
}

.single-main .left .post-content > .wp-block-image img:hover {
    box-shadow: var(--box-l);
}

.single-main .left .post-content .wp-block-gallery {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.single-main .left .post-content .wp-block-gallery .wp-block-image {
    cursor: pointer;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}

.single-main .left .post-content .wp-block-gallery .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    vertical-align: middle;
    position: absolute;
    transition: var(--tr3);
}

.single-main .left .post-content .wp-block-gallery .wp-block-image img:hover {
    box-shadow: var(--box-l);
}

.single-main .left .post-content video {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    vertical-align: bottom;
}

.single-main .left .post-content .wp-block-table {
    overflow-x: auto;
}

.single-main .left .post-content .wp-block-table::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    border-radius: var(--radius);
}

.single-main .left .post-content .wp-block-table::-webkit-scrollbar-thumb {
    background-color: var(--theme-3);
}

.single-main .left .post-content .wp-block-table::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-sub);
}

.single-main .left .post-content table {
    width: 100%;
    border-collapse: collapse;
}

.single-main .left .post-content tr:nth-child(odd) {
    background-color: var(--bgc-sub);
    transition: var(--tr3);
}

.single-main .left .post-content table,.single-main .left .post-content th,.single-main .left .post-content td {
    font-size: 15px;
    border: 1px solid var(--border);
    transition: var(--tr3);
}

.single-main .left .post-content th,.single-main .left .post-content td {
    padding: 10px;
    text-align: left;
}

.single-main .left .post-content th {
    background-color: var(--theme);
    color: var(--text-keep);
}

.single-main .left .post-content td a {
    text-decoration: underline;
    transition: var(--tr3);
}

.single-main .left .post-content > .wp-block-image a {
    display: inline-block;
    outline: 0;
}

.single-main .left .post-content > .wp-block-image a:before {
    display: none;
}

.single-main .left .post-content ul,.single-main .left .post-content ol {
    margin-left: 20px;
}

.single-main .left .post-content ul {
    display: flex;
    flex-direction: column;
}

.single-main .left .post-content ul li {
    list-style: disc;
}

.single-main .left .post-content ol li {
    list-style: lower-greek;
}

.single-main .left .post-content ul li,.single-main .left .post-content ol li {
    line-height: 1.8;
    margin-left: 20px;
    width: calc(100% - 40px);
    word-break: break-all;
    word-wrap: break-word;
}

.single-main .left .post-content pre {
    max-height: 512px;
    font-family: 'Consolas','Courier New','monospace';
    border-radius: var(--radius);
    overflow: auto;
}

.single-main .left .post-content pre code {
    font-size: 14px;
    line-height: 1.5;
}

.single-main .left .post-content .wp-block-preformatted {
    font-size: 14px;
    color: var(--text-sub);
    background-color: var(--bgc-sub);
    padding: 10px;
}

.single-main .left .post-content p code,.single-main .left .post-content li code {
    border-radius: var(--radius-sub);
    background-color: var(--theme-1);
    color: var(--theme);
    font-size: 14px;
    padding: 2px 4px;
}

.single-main .left .post-content code {
    font-family: 'PingFang SC','Consolas','Courier New';
}

.single-main .left .post-content p img {
    width: 100%;
    height: 100%;
    vertical-align: sub;
}

.single-main .left .post-content .wp-block-button {
    margin-bottom: 15px;
}

.single-main .left .post-content .wp-block-button__link {
    text-decoration: none;
    cursor: pointer;
    line-height: 3;
    padding: 6px 15px;
    border-radius: var(--radius-sub);
    color: var(--text-keep);
    font-size: 14px;
    background: var(--theme-sub);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    transition: var(--tr3);
}

.single-main .left .post-content .wp-block-button__link:hover {
    color: var(--text-keep);
    opacity: .8;
    text-decoration: none;
}

.single-main .left .post-content .wp-block-button__link::before {
    display: none;
}

.single-main .left .post-content .has-black-color {
    color: #000;
}

.single-main .left .post-content .has-cyan-bluish-gray-color {
    color: #abb8c3;
}

.single-main .left .post-content .has-white-color {
    color: var(--text-keep);
}

.single-main .left .post-content .has-pale-pink-color {
    color: #f78da7;
}

.single-main .left .post-content .has-vivid-red-color {
    color: #cf2e2e;
}

.single-main .left .post-content .has-luminous-vivid-orange-color {
    color: #ff6900;
}

.single-main .left .post-content .has-luminous-vivid-amber-color {
    color: #fcb900;
}

.single-main .left .post-content .has-light-green-cyan-color {
    color: #7bdcb5;
}

.single-main .left .post-content .has-vivid-green-cyan-color {
    color: #00d084;
}

.single-main .left .post-content .has-pale-cyan-blue-color {
    color: #8ed1fc;
}

.single-main .left .post-content .has-vivid-cyan-blue-color {
    color: #0693e3;
}

.single-main .left .post-content .has-vivid-purple-color {
    color: #9b51e0;
}

.single-main .left .post-content h6,.single-main .left .post-content h5,.single-main .left .post-content h4,.single-main .left .post-content h3,.single-main .left .post-content h2,.single-main .left .post-content h1 {
    margin-bottom: 25px;
    line-height: 1.8;
    transition: var(--tr3);
}

.single-main .left .post-content h6 {
    font-size: 15px;
    color: var(--text);
    font-weight: 400;
    position: relative;
}

.single-main .left .post-content h5 {
    font-size: 15px;
    color: var(--text);
    position: relative;
}

.single-main .left .post-content h4 {
    font-size: 15px;
    color: var(--text);
    position: relative;
}

.single-main .left .post-content h3 {
    font-size: 16px;
    color: var(--text);
    position: relative;
}

.single-main .left .post-content h2 {
    font-size: 18px;
    color: var(--text);
    position: relative;
}

.single-main .left .post-content h1 {
    font-size: 20px;
    color: var(--text);
    position: relative;
}

.single-main .left .post-content h4::after,.single-main .left .post-content h3::after,.single-main .left .post-content h2::after,.single-main .left .post-content h1::after {
    content: '';
    width: 10%;
    height: 4px;
    position: absolute;
    bottom: -4px;
    left: 0;
    border-radius: var(--radius);
    background-color: var(--theme);
    box-shadow: 1px 1px 3px -1px var(--theme-sub);
    transition: var(--tr3);
}

.single-main .left .post-content h4::after {
    width: 30px;
}

.single-main .left .post-content h3::after {
    width: 40px;
}

.single-main .left .post-content h2::after {
    width: 50px;
}

.single-main .left .post-content h1::after {
    width: 60px;
}

@media screen and (max-width: 640px) {
    .single-main .left .post-content {
        font-size:15px;
    }
}

.footer {
    margin-top: 20px;
    background-color: var(--bgc);
    border-top: 1px solid var(--border);
    padding-top: 20px;
    padding-bottom: 20px;
    transition: var(--tr3);
}

.footer .footer-box,.footer .footer-box a {
    font-size: 14px;
}

.footer .footer-box,.footer .footer-box .author,.footer .footer-box .icp_gov {
    justify-content: center;
    text-align: center;
}

.footer .footer-box {
    display: flex;
    flex-direction: column;
    line-height: 28px;
    color: var(--text-info);
}

.footer .footer-box a {
    color: var(--text-info);
    transition: var(--tr3);
}

.footer .footer-box a:hover {
    color: var(--theme);
}

.footer .footer-box .upyun img {
    vertical-align: middle;
    height: 28px;
    margin-top: -3px;
}

.footer .footer-box .author {
    display: flex;
    align-items: center;
}

.footer .footer-box .author span {
    margin-right: 5px;
}

.footer .footer-box .icp_gov {
    display: flex;
    align-items: center;
}

.footer .footer-box .icp_gov img {
    vertical-align: middle;
    width: 18px;
    margin-right: 2px;
}

@media screen and (max-width: 1280px) {
    .footer .footer-box {
        width:100%;
    }
}

@media screen and (max-width: 960px) {
    .footer {
        padding:20px;
    }
}

.headroom {
    transition: var(--tr6);
}

.headroom--pinned {
    transform: translateY(0%);
}

.headroom--unpinned {
    transform: translateY(-100%);
}

.nav-bar {
    height: 70px;
    background-color: var(--bgc-blur);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 10;
    transition: var(--tr3);
    justify-content: space-around;
}

.nav-bar .left,.nav-bar .right {
    display: flex;
    align-items: center;
}

.nav-bar .left {
    max-width: calc(100% - 100px);
}

.nav-bar .logo {
    margin-right: 20px;
}

.nav-bar .logo img {
    height: 75px;
    vertical-align: middle;
    transition: var(--tr3);
}

.nav-bar .nav-menu {
    display: flex;
}

#nav-menu > ul,#nav-menu-mb > ul {
    display: none;
}

.nav-menu a {
    font-size: 15px;
}

.nav-menu > li > a {
    display: block;
    padding: 10px 0;
    margin: 0 10px;
    margin-bottom: 3px;
    position: relative;
    transition: var(--tr2);
    overflow: hidden;
}

.nav-menu > li > a i:first-child {
    font-size: 15px;
}

.nav-menu > li > a:hover {
    color: var(--theme);
}

.nav-menu > .current-menu-item > a {
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.nav-menu > li > a::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: -100%;
    width: 100%;
    height: 2px;
    background-color: var(--theme);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    transition: var(--tr2);
}

.nav-menu > li > a:hover::before,.nav-menu > .current-menu-item > a::before {
    left: 0;
}

.nav-menu .menu-item-has-children > a::after {
    content: '\e6b9';
    color: var(--text-info);
    display: inline-block;
    font-family: 'iconfont';
    font-size: 14px;
    margin-left: 2px;
    transition: var(--tr3);
}

.nav-menu .menu-item-has-children > a:hover::after {
    transform: rotate(-90deg);
    color: var(--theme);
}

.nav-menu > .current-menu-item > a::after {
    color: var(--theme);
    -webkit-text-fill-color: var(--theme);
}

.nav-menu .menu-item-has-children .sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: auto;
    height: auto;
    background-color: var(--bgc);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--box);
    padding: 5px 8px;
    transform: translate(-5px,-5px);
    transition: var(--tr2);
}

.nav-menu .menu-item-has-children:hover > .sub-menu {
    transform: translate(0,0);
    visibility: visible;
    opacity: 1;
}

.nav-menu .menu-item-has-children .sub-menu:hover {
    border: 1px solid var(--theme);
}

.nav-menu .menu-item-has-children .sub-menu li {
    padding: 3px 0;
}

.nav-menu .menu-item-has-children .sub-menu li a {
    display: block;
    color: var(--text-sub);
    padding: 4px 50px 4px 6px;
    border-radius: var(--radius-sub);
    transition: var(--tr1);
}

.nav-menu .menu-item-has-children .sub-menu li a:hover {
    color: var(--text-sub);
    background-color: var(--theme-2);
}

.nav-menu .menu-item-has-children .sub-menu li a:hover::after {
    color: var(--text-sub);
    transition: var(--tr3);
}

.nav-menu .menu-item-has-children .sub-menu li > .sub-menu {
    width: 100%;
    position: absolute;
    transform: translate(-5px,-14px);
    margin-left: calc(100% - 16px);
    margin-top: -28px;
    transition: var(--tr2);
}

.nav-menu .menu-item-has-children .sub-menu .sub-menu a {
    padding: 4px 0 4px 6px;
}

.nav-menu .menu-item-has-children .sub-menu li:hover > .sub-menu,.nav-menu .menu-item-has-children .sub-menu li .sub-menu li:hover .sub-menu {
    transform: translate(0,-9px);
    visibility: visible;
    opacity: 1;
}

.nav-menu > .menu-item-has-children .sub-menu > .menu-item-has-children .sub-menu > .menu-item-has-children .sub-menu > .menu-item-has-children .sub-menu {
    display: none;
}

.nav-menu > .menu-item-has-children > .sub-menu .current-menu-item > a,.nav-menu > .menu-item-has-children > .sub-menu .current-menu-item > a:hover {
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    color: var(--text-keep);
}

.nav-menu > .menu-item-has-children > .sub-menu .current-menu-item a::after,.nav-menu > .menu-item-has-children > .sub-menu .current-menu-item a:hover::after {
    color: var(--text-keep);
}

.nav-bar .admin {
    border-radius: 50%;
}

.nav-bar .admin img {
    cursor: pointer;
    transition: var(--tr3);
}

.nav-bar .admin:hover img {
    opacity: .8;
}

.nav-bar .admin img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    vertical-align: middle;
}

.nav-bar .user-menu {
    position: absolute;
    top: 69px;
    width: auto;
    height: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bgc);
    box-shadow: var(--box);
    display: flex;
    flex-direction: column;
    transform: translateY(8px);
    visibility: hidden;
    opacity: 0;
    transition: var(--tr3);
    z-index: 2;
}

.nav-bar .user-menu:hover {
    border: 1px solid var(--theme);
}

.nav-bar .user-menu a {
    display: block;
    position: relative;
    color: var(--text-sub);
    font-size: 15px;
    padding: 4px 6px 4px 6px;
    border-radius: var(--radius-sub);
    margin-bottom: 4px;
    transition: var(--tr1);
    z-index: 1;
}

.nav-bar .user-menu a:last-child {
    margin-bottom: 0;
}

.nav-bar .user-menu a:hover {
    color: var(--text-keep);
}

.nav-bar .user-menu a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    opacity: 0;
    border-radius: var(--radius-sub);
    transition: var(--tr1);
    z-index: -1;
}

.nav-bar .user-menu a:hover::after {
    opacity: 1;
    animation: hueRotate 3s infinite alternate;
}

.nav-bar .user-menu-open {
    visibility: visible;
    opacity: 1;
}

.nav-bar .user-menu .logout::after,.nav-bar .user-menu .logout:hover::after {
    background: #EF3B36 !important;
}

.nav-bar .login {
}

.nav-bar .login span {
    font-size: 22px;
    transition: var(--tr3);
}

.nav-bar .login span:hover {
    color: var(--theme);
}

.nav-menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > a::after {
    display: none;
}

.nav-menu li a span {
    font-size: 15px;
}

.nav-bar-mb,.menu-mb-mask,.menu-mb {
    display: none;
}

.nav-bar-mb {
    height: 70px;
    background-color: var(--bgc-blur);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    z-index: 8;
    padding: 0 20px;
    transition: var(--tr3);
}

.nav-bar-mb .center .logo-mb img {
    height: 75px;
    vertical-align: middle;
}

.nav-bar-mb .left,.nav-bar-mb .right {
    width: 22px;
}

.nav-bar-mb .right {
    text-align: right;
}

.nav-bar-mb .left span,.nav-bar-mb .login span {
    font-size: 24px;
    color: var(--text-sub);
    cursor: pointer;
    vertical-align: middle;
    transition: var(--tr3);
}

.nav-bar-mb .login span {
    font-size: 22px;
}

.nav-bar-mb .left span:hover,.nav-bar-mb .login span:hover {
    color: var(--theme);
}

.nav-bar-mb .admin {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.nav-bar-mb .admin img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--tr3);
}

.nav-bar-mb .admin img:hover {
    opacity: .8;
}

.nav-bar-mb .user-menu {
    position: absolute;
    right: 0px;
    top: 69px;
    width: auto;
    height: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bgc);
    box-shadow: var(--box);
    display: flex;
    flex-direction: column;
    transform: translateY(8px);
    visibility: hidden;
    opacity: 0;
    transition: var(--tr3);
    z-index: 2;
}

.nav-bar-mb .user-menu:hover {
    border: 1px solid var(--theme);
}

.nav-bar-mb .user-menu-open-mb {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

.nav-bar-mb .user-menu a {
    display: block;
    color: var(--text-sub);
    font-size: 15px;
    padding: 4px 6px 4px 6px;
    border-radius: var(--radius-sub);
    margin-bottom: 4px;
    transition: all 0s;
}

.nav-bar-mb .user-menu a:last-child {
    margin-bottom: 0;
}

.nav-bar-mb .user-menu a:hover {
    color: var(--text-keep);
    background: linear-gradient(to right,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
}

.nav-bar-mb .user-menu a:last-child:hover {
    background: #DD440F;
    animation: none;
}

.menu-mb {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    background-color: var(--bgc);
    width: 70%;
    height: 100%;
    overflow: auto;
    transition: transform var(--tr3-c);
    z-index: 10;
}

.menu-mb-open {
    left: 0;
    transform: translateX(0);
    transition: transform var(--tr6-c);
}

.menu-mb::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.menu-mb-mask {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mask-5);
    transition: opacity var(--tr3-c),visibility var(--tr3-c);
    z-index: 9;
}

.menu-mb-mask-block {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--tr6-c),visibility var(--tr6-c);
}

.menu-mb-top {
    width: 100%;
    height: 70px;
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 10px;
    background-color: var(--bgc);
    z-index: 10;
    transition: var(--tr3);
}

.menu-mb-top .menu-mb-box {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-mb-top .menu-mb-box .user-info {
    display: flex;
    align-items: center;
    width: calc(100% - 50px);
}

.menu-mb-top .menu-mb-box .user-info > .visitor {
    display: flex;
    align-items: center;
    width: 100%;
    transition: var(--tr3);
}

.menu-mb-top .menu-mb-box .user-info > .visitor img {
    border-radius: 50%;
}

.menu-mb-top .menu-mb-box .user-info > .visitor p {
    line-height: 40px;
    color: var(--text-sub);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: var(--tr3);
}

.menu-mb-top .menu-mb-box .user-info img {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    vertical-align: middle;
}

.menu-mb-top .menu-mb-box .user-info > span {
    font-size: 16px;
}

.menu-mb-top .menu-mb-box > span {
    font-size: 22px;
    color: var(--text);
    cursor: pointer;
    transition: var(--tr3);
}

.menu-mb-top .menu-mb-box > span:hover {
    color: var(--theme);
}

.nav-mb-content {
    padding: 70px 0 80px;
    padding-top: 0;
}

.nav-mb-content .nav-mb-content-top {
    border-bottom: 1px solid var(--border);
    position: relative;
    display: flex;
    transition: var(--tr3);
}

.nav-mb {
    margin: 10px;
}

.nav-mb .nav-menu-mb a {
    transition: var(--tr3);
}

.nav-menu-mb .current-menu-item > a {
    color: var(--text-keep) !important;
    background: linear-gradient(120deg,var(--theme),var(--theme-sub)) !important;
    animation: hueRotate 3s infinite alternate;
}

.nav-menu-mb .current-menu-item > a:hover {
    color: var(--text-keep) !important;
}

.nav-mb .nav-menu-mb li a {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 0;
}

.nav-mb .nav-menu-mb li a span {
    font-size: 14px;
}

.nav-mb .nav-menu-mb li a span::before {
}

.nav-mb .nav-menu-mb > li {
    margin-bottom: 10px;
}

.nav-mb .nav-menu-mb > li a {
    display: block;
    padding: 10px;
    border-radius: var(--radius);
    transition: var(--tr1);
}

.nav-mb .nav-menu-mb > li a:hover {
    background: var(--bgc-sub);
    color: var(--text);
}

.nav-mb > ul > .menu-item-has-children ul li a {
    padding: 8px 10px;
}

.nav-mb .nav-menu-mb > li ul {
    transition: var(--tr3);
}

.nav-mb .nav-menu-mb > li > ul {
    padding: 10px 10px 0.1px 10px;
    margin-top: 10px;
    border: 0;
    background-color: var(--bgc-sub);
    border-radius: var(--radius);
    transition: var(--tr3);
}

.nav-mb .nav-menu-mb > li ul > li {
}

.nav-mb .nav-menu-mb > li ul a {
    margin-bottom: 10px;
    border-radius: var(--radius);
    color: var(--text-sub);
}

.nav-mb .nav-menu-mb > li ul a:hover {
    background: var(--theme-2);
    color: var(--text);
}

.nav-mb .nav-menu-mb > li > ul ul {
    margin-left: 10px;
    padding-left: 10px;
}

.nav-mb .nav-menu-mb > .menu-item-has-children {
    overflow: hidden;
    transition: var(--tr3);
}

.nav-mb .nav-menu-mb > .menu-item-has-children > a,.nav-mb .nav-menu-mb > .menu-item-has-children > .sub-menu .menu-item-has-children a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-mb .nav-menu-mb > .menu-item-has-children > a {
    transition: var(--tr3);
}

.nav-mb .nav-menu-mb > .menu-item-has-children > .sub-menu .menu-item-has-children a i {
    font-size: 14px;
}

.nav-mb .nav-menu-mb > .menu-item-has-children > a.open {
    background-color: var(--bgc-sub);
    color: var(--theme);
}

.nav-mb > ul > .menu-item-has-children > a.current {
    color: var(--theme);
}

.nav-mb .nav-menu-mb > .menu-item-has-children > a > i {
    transition: var(--tr3);
}

.nav-mb .nav-menu-mb > .menu-item-has-children > .sub-menu > .menu-item-has-children .sub-menu {
    margin-left: 0;
    margin-bottom: 10px;
    padding: 10px 0 0 10px;
    border-left: 1px solid var(--theme-5);
    background: var(--theme-2);
    background: linear-gradient(to right,var(--theme-1) -100%,var(--bgc-0) 100%);
}

.nav-mb .nav-menu-mb > .menu-item-has-children > .sub-menu > .menu-item-has-children .sub-menu li {
    padding-bottom: 0.1px;
}

.nav-menu-mb > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu,.nav-menu-mb > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > .sub-menu > .menu-item-has-children > a > i {
    display: none;
}

.change-night {
    width: 45px;
    height: 45px;
    position: fixed;
    right: 30px;
    bottom: 95px;
    border-radius: var(--radius);
    background-color: var(--bgc);
    border: 1px solid var(--border);
    box-shadow: var(--side-icon);
    cursor: pointer;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 5;
    -webkit-animation: open .5s;
    animation: open .5s;
    transition: var(--tr3);
}

.change-night:hover {
    border: 1px solid var(--theme);
}

.change-night span {
    font-size: 20px;
    color: var(--text-info);
    margin-top: -1px;
    transition: var(--tr3);
    -webkit-animation: open .5s;
    animation: open .5s;
}

.change-night:hover span {
    color: var(--theme);
}

.progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 40px;
    height: 45px;
    width: 45px;
    cursor: pointer;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--bgc);
    box-shadow: var(--side-icon);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: var(--tr3);
    transition: var(--tr3);
    z-index: 5;
}

.progress-wrap:hover {
    border: 1px solid var(--theme);
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.progress-wrap svg,.progress-wrap svg path {
    display: none;
}

.progress-wrap::before {
    content: '\e64a';
    font-family: 'iconfont';
    font-size: 26px;
    width: 100%;
    height: 100%;
    margin-top: -1px;
    color: var(--text-info);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--tr3);
}

.progress-wrap:hover::before {
    color: var(--theme);
}

@media screen and (min-width: 961px) {
    .nav-bar-mb,.menu-mb-mask,.menu-mb {
        visibility:hidden;
        opacity: 0;
        transition: all 0s;
    }
}

@media screen and (max-width: 960px) {
    .nav-bar {
        display:none;
    }

    .nav-bar-mb {
        display: flex;
    }

    .menu-mb-mask {
        display: block;
    }

    .menu-mb {
        display: block;
    }

    .article-toc-mb {
        right: 20px !important;
    }

    .change-night-pc {
        width: 41px;
        height: 41px;
        right: 20px;
        bottom: 91px;
    }

    .change-night-mb {
        width: 39px;
        height: 39px;
        position: absolute;
        right: 10px;
        top: 10px;
        background-color: var(--bgc-sub);
        border: 1px solid var(--bgc-sub);
        box-shadow: none;
        display: flex;
        animation: none;
    }

    .change-night-mb span {
        animation: none;
    }

    .progress-wrap {
        right: 20px;
        bottom: 40px;
        height: 41px;
        width: 41px;
    }
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.wrapper-home {
    margin-top: 100px;
}

.wrapper-home .swiper {
    --swiper-navigation-size: 24px;
    --swiper-navigation-color: var(--bgc);
    border-radius: var(--radius);
    overflow: hidden;
}

.wrapper-home .swiper-pagination {
    bottom: 20px !important;
}

.wrapper-home .swiper-button-prev {
    left: 0;
}

.wrapper-home .swiper-button-next {
    right: 0;
}

.wrapper-home .swiper-button-prev,.wrapper-home .swiper-button-next {
    transform: translateY(-50%);
    margin-top: 0;
    padding: 25px 18px;
    visibility: hidden;
    opacity: 0;
    color: var(--text-keep);
    transition: var(--tr3);
}

.wrapper-home .swiper-button-prev:hover,.wrapper-home .swiper-button-next:hover {
    background-color: var(--mask-5);
}

.wrapper-home .swiper:hover .swiper-button-prev,.wrapper-home .swiper:hover .swiper-button-next {
    visibility: visible;
    opacity: 1;
}

.wrapper-home .swiper:hover .swiper-button-prev {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.wrapper-home .swiper:hover .swiper-button-next {
    border-radius: var(--radius) 0 0 var(--radius);
}

.wrapper-home .swiper-pagination-bullet {
    height: 6px;
    background-color: var(--text-keep);
    padding: 0 10px;
    border-radius: 8px;
    transition: var(--tr3);
}

.wrapper-home .swiper-pagination-bullet-active {
    padding: 0 20px;
    transition: var(--tr3);
}

.wrapper-home .swiper-slide {
    background-color: var(--bgc);
    width: 100%;
    height: 0;
    border-radius: var(--radius);
    padding-bottom: 40%;
    position: relative;
    overflow: hidden;
}

.wrapper-home .swiper-slide img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    vertical-align: middle;
    pointer-events: none;
    transition: filter var(--tr3-c);
}

.wrapper-home .swiper-slide .swiper-img-mask {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--mask-3);
    background: linear-gradient(to top,var(--mask-3),rgba(0 0 0 / .05));
    border-radius: var(--radius);
}

.wrapper-home .swiper-slide .title {
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 0 5px var(--mask-3);
    color: var(--text-keep);
    line-height: 1.5;
    position: absolute;
    bottom: 15%;
    padding: 0 50px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.wrapper-recommend {
    display: flex;
}

.wrapper-recommend .swiper {
    width: calc(70% - 20px);
    margin: 0;
}

.wrapper-recommend .swiper-slide {
    padding-bottom: 50%;
}

.wrapper-recommend .swiper-slide .title {
    font-size: 24px;
}

.wrapper-recommend .recommend {
    width: 30%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wrapper-recommend .recommend > .box {
    position: relative;
    width: 100%;
    height: calc(50% - 10px);
    border-radius: var(--radius);
    overflow: hidden;
}

.wrapper-recommend .recommend a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.wrapper-recommend .recommend a::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--mask-3);
    background: linear-gradient(to top,var(--mask-3),rgba(0 0 0 / .05));
    border-radius: var(--radius);
    z-index: 1;
}

.wrapper-recommend .recommend .box .recommend-text {
    position: absolute;
    left: 0;
    top: 10px;
    transform: translateX(-105%);
    font-size: 14px;
    color: var(--text-keep);
    padding: 2px 12px;
    background: var(--theme-sub);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    border-radius: var(--radius-sub);
    box-shadow: var(--box-l);
    transition: transform var(--tr2-c);
}

.wrapper-recommend .recommend a:hover ~ .recommend-text {
    transform: translateX(10px);
}

.wrapper-recommend .recommend a img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
    pointer-events: none;
    border-radius: var(--radius);
    transition: filter var(--tr3-c);
}

.wrapper-recommend .recommend a .title {
    width: 100%;
    position: absolute;
    bottom: 0;
    color: var(--text-keep);
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 0 5px var(--mask-3);
    padding: 15px;
    transition: var(--tr3);
    z-index: 2;
}

.wrapper-recommend .recommend a .title p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wrapper .banner {
    width: 1200px;
    height: 200px;
    position: absolute;
    left: 50%;
    opacity: .5;
    transform: translateX(-50%);
    background-image: url('../images/banner.png');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -10;
    padding: 0 30px;
}

.wrapper {
    margin-top: 70px;
    width: 100%;
    height: 200px;
    border-bottom: 1px solid var(--border);
    transition: var(--tr3);
}

.content-wrapper {
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.content-wrapper .text-wrapper {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.content-wrapper .text-wrapper h2 {
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 5px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    transition: var(--tr3);
}

.content-wrapper .text-wrapper i {
    color: var(--text-sub);
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: var(--tr3);
}

.main-content {
    margin-bottom: 20px;
}

.main-content .notice {
    width: 100%;
    height: 50px;
    margin-top: 30px;
    background: var(--notice);
    border-radius: var(--radius);
    padding: 0 15px;
}

.main-content .notice .notice-box {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-content .notice .notice-box::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.main-content .notice .notice-box > span {
    color: var(--text-sub);
    margin-right: 10px;
    margin-top: 2px;
    transition: var(--tr3);
}

.main-content .notice .notice-box > span::before {
    content: '\e60c';
    font-family: 'iconfont';
    font-size: 20px;
}

.main-content .notice .notice-box > p {
    color: var(--text-sub);
    font-size: 15px;
    transition: var(--tr3);
}

.content .title-part {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

.content .title-part p {
    max-width: calc(100% - 300px);
    padding-bottom: 5px;
    border-bottom: 3px solid var(--theme);
    font-size: 15px;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: var(--tr3);
}

.content .title-part p span {
    color: var(--theme);
    display: flex;
    align-items: center;
}

.content .title-part .cate span::before {
    content: '\eac5';
    font-family: 'iconfont';
    margin-right: 3px;
}

.content .title-part .tag span::before {
    content: '\e74c ';
    font-family: 'iconfont';
    font-size: 18px;
}

.content .title-part .date span::before {
    content: '\e74b';
    font-family: 'iconfont';
    font-size: 18px;
}

.content .title-part .name span::before {
    content: '\e744';
    font-family: 'iconfont';
    font-size: 18px;
}

.content .title-part .search::before {
    content: '\e752';
    font-family: 'iconfont';
    margin-right: 3px;
}

.content .title-part .cate span,.content .title-part .tag span,.content .title-part .date span,.content .title-part .name span {
    margin-right: 5px;
}

.content .main-part {
    width: 100%;
}

.content .main-part > ul {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}

.content .main-part > ul > li {
    width: 100%;
    background-color: var(--bgc);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 10px;
    overflow: hidden;
    transition: var(--tr3);
}

.content .main-part > ul > li:hover {
    border: 1px solid var(--theme);
}

.content .main-part ul li .home-pic {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: var(--radius);
    position: relative;
}

.content .main-part ul li .home-pic .post-top {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 12px;
    color: var(--text-keep);
    padding: 2px 8px;
    background: var(--theme-sub);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    border-radius: var(--radius-sub);
    box-shadow: var(--box);
    z-index: 2;
}

.content .main-part ul li .home-pic > a {
    display: block;
    width: 100%;
    height: 275px;
}

.content .main-part ul li .home-pic .mask-pic {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--bgc-0);
    border-radius: var(--radius);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--tr3);
    z-index: 1;
}

.content .main-part ul li .home-pic:hover .mask-pic {
    background-color: var(--mask-3);
    opacity: 1;
}

.content .main-part ul li .home-pic .mask-pic span {
    color: var(--text-keep);
    font-size: 42px;
}

.content .main-part ul li .home-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    transition: filter var(--tr3-c);
}

.home-detail .home-cate {
    margin-bottom: 5px;
    height: 20px;
    margin-top: 0px;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    cursor: default;
    align-items: center;
    justify-content: center;
}

.home-detail .home-cate::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.home-detail .home-cate a {
    margin-right: 0px;
    font-size: 13px;
    color: var(--text-info);
    padding: 2px 6px;
    /* background: linear-gradient(120deg,var(--theme),var(--theme-sub)); */
    animation: hueRotate 3s infinite alternate;
    border-radius: var(--radius-sub);
    transition: var(--tr3);
}

.home-detail .home-cate a:hover {
    opacity: .8;
}

.home-detail .home-cate a::before {
    content: '\eac5';
    font-family: 'iconfont';
    margin-right: 3px;
}

.home-detail .home-title {
    width: 100%;
    height: 20px;
    color: var(--text);
    margin-bottom: 5px;
    line-height: 1.2;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    transition: var(--tr3);
    display: flex;
    justify-content: center;
}

.home-detail .home-title a {
    font-size: 14px;
    color: var(--text);
    transition: var(--tr3);
}

.home-detail .home-title a:hover {
    color: var(--theme);
}

.home-detail .home-msg {
    height: 20px;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--text-info);
}

.home-detail .home-msg > a {
    border-radius: 50%;
}

.home-detail .home-msg span {
    margin: 0 5px;
}

.home-detail .home-msg .home-date::before {
    content: '\e74b';
    font-family: 'iconfont';
    font-size: 16px;
}

.home-detail .home-msg .home-watch::before {
    content: '\e745';
    font-family: 'iconfont';
    font-size: 18px;
}

.home-detail .home-msg .home-comments::before {
    content: '\e7b2';
    font-family: 'iconfont';
    font-size: 18px;
}

.home-detail .home-msg .home-date,.home-detail .home-msg .home-watch,.home-detail .home-msg .home-comments {
    margin-left: 0px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.home-detail .home-msg .home-comments a {
    font-size: 12px;
    color: var(--text-info);
    transition: var(--tr3);
}

.home-detail .home-msg .home-comments a:hover {
    color: var(--theme);
}

.home-detail .home-msg img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    vertical-align: middle;
}

.home-2 {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.home-2 .home-2-mian {
    width: calc(100% - 305px);
}

.home-2 .home-2-mian ul {
}

.home-2 .home-2-mian ul li {
    display: flex;
    width: 100%;
    height: auto;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bgc);
    transition: var(--tr3);
}

.home-2 .home-2-mian ul li:hover {
    border: 1px solid var(--theme);
}

.home-2 .home-2-mian ul li:last-child {
    margin-bottom: 0;
}

.home-2 .home-2-mian ul li .home-2-pic {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
}

.home-2 .home-2-mian ul li .home-2-pic .post-top {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 12px;
    color: var(--text-keep);
    padding: 2px 8px;
    background: var(--theme-sub);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    border-radius: var(--radius-sub);
    box-shadow: var(--box);
    z-index: 2;
}

.home-2 .home-2-mian ul li .home-2-pic a {
    display: block;
    width: 214px;
    height: 150px;
}

.home-2 .home-2-mian ul li .home-2-pic .mask-pic {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--bgc-0);
    border-radius: var(--radius);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--tr3);
    z-index: 1;
}

.home-2 .home-2-mian ul li .home-2-pic:hover .mask-pic {
    background-color: var(--mask-3);
    opacity: 1;
}

.home-2 .home-2-mian ul li .home-2-pic .mask-pic span {
    color: var(--text-keep);
    font-size: 42px;
}

.home-2 .home-2-mian ul li .home-2-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    transition: filter var(--tr3-c);
}

.home-2 .home-2-mian ul li .home-2-detail {
    width: calc(100% - 214px);
    padding-left: 15px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-top-title {
    margin-top: 5px;
    color: var(--text);
    transition: var(--tr3);
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom {
    margin-bottom: 5px;
}

.home-2 .home-2-mian ul li .home-2-detail h2 {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.2;
    font-weight: 400;
    font-size: 17px;
}

.home-2 .home-2-mian ul li .home-2-detail h2 span {
    font-size: 20px;
    font-weight: 400;
    color: var(--theme);
}

.home-2 .home-2-mian ul li .home-2-detail h2 a {
    color: var(--text);
    font-weight: 400;
    font-size: 16px;
    transition: var(--tr3);
}

.home-2 .home-2-mian ul li .home-2-detail h2 a:hover {
    color: var(--theme);
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-top-abstract p {
    color: var(--text-info);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-cate {
    margin-bottom: 8px;
    height: 25px;
    overflow-x: auto;
    white-space: nowrap;
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-cate::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-cate a {
    font-size: 13px;
    color: var(--text-keep);
    margin-right: 5px;
    padding: 2px 6px;
    border-radius: var(--radius-sub);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    transition: var(--tr3);
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-cate a:hover {
    color: var(--text-keep);
    opacity: .8;
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-cate a::before {
    content: '\eac5';
    font-family: 'iconfont';
    margin-right: 3px;
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-msg {
    color: var(--text-info);
    font-size: 12px;
    display: flex;
    align-items: center;
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-msg .home-2-detail-time::before {
    content: '\e74b';
    font-family: 'iconfont';
    font-size: 16px;
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-msg .home-2-detail-views::before {
    content: '\e745';
    font-family: 'iconfont';
    font-size: 16px;
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-msg .home-2-detail-comments::before {
    content: '\e7b2';
    font-family: 'iconfont';
    font-size: 16px;
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-msg .home-2-detail-time,.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-msg .home-2-detail-views,.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-msg .home-2-detail-comments {
    margin-left: 5px;
    display: flex;
    align-items: center;
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-msg a {
    color: var(--text-info);
    font-size: 13px;
    transition: var(--tr3);
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-msg > a {
    border-radius: 50%;
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-msg a:hover {
    color: var(--theme);
}

.home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-msg img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    vertical-align: middle;
}

.home-2 .home-2-sidebar {
    width: 285px;
}

.page-nav-bar {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.page-nav-bar .page-nav {
    font-size: 15px;
    cursor: default;
    display: flex;
}

.page-nav-bar .page-nav .page-numbers {
    display: block;
    width: 30px;
    height: 30px;
    color: var(--text-info);
    font-size: 14px;
    background-color: var(--border);
    line-height: 30px;
    text-align: center;
    margin: 0 3px;
    border-radius: var(--radius-sub);
    overflow: hidden;
    transition: var(--tr3);
}

.page-nav-bar .page-nav .page-numbers:hover {
    background-color: var(--theme);
    color: var(--text-keep);
}

.page-nav-bar .page-nav .current {
    color: var(--text-keep);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    overflow: hidden;
}

.page-nav-bar .page-nav .dots {
    background-color: var(--bgc-0);
}

.page-nav-bar .page-nav .dots:hover {
    background-color: var(--bgc-0);
    color: var(--text-info);
}

.haveNoMore {
    text-align: center;
    color: var(--text-info);
    margin-top: 20px;
}

.haveNoMore span {
    font-size: 14px;
}

@media screen and (max-width: 1280px) {
    .wrapper-home {
        width:100%;
        padding: 0 30px;
    }

    .wrapper-home .swiper-slide .title {
        font-size: 24px;
        font-weight: 700;
    }

    .wrapper-recommend .swiper-slide .title {
        font-size: 22px;
    }

    .wrapper .content-wrapper .text-wrapper {
        width: calc(100% - 60px);
    }

    .wrapper .banner {
        width: calc(100% - 60px);
    }

    .main {
        width: 100%;
        padding: 0 30px;
    }

    .content .main-part ul {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .home-2 {
        width: 100%;
    }
}

@media screen and (max-width: 1200px) {
    .content-wrapper {
        width:100%;
    }
}

@media screen and (max-width: 960px) {
    .wrapper-home {
        width:100%;
        padding: 0 20px;
        margin-top: 90px;
    }

    .wrapper-home .swiper-slide {
        padding-bottom: 50%;
    }

    .wrapper-home .swiper-slide .title {
        font-size: 20px;
        font-weight: 700;
    }

    .wrapper-recommend .recommend a .title {
        font-size: 14px;
    }

    .wrapper-recommend .swiper-pagination {
        bottom: 12px !important;
    }

    .wrapper-recommend .swiper-slide .title {
        font-size: 18px;
    }

    .wrapper-recommend .recommend a .title {
        padding: 10px;
    }

    .wrapper-recommend .recommend {
        display: none;
    }

    .wrapper-recommend .swiper {
        width: 100%;
    }

    .content-wrapper .text-wrapper {
        width: calc(100% - 40px);
    }

    .wrapper .banner {
        width: calc(100% - 40px);
        padding: 0 20px;
    }

    .main-content .notice {
        margin-top: 20px;
    }

    .main {
        padding: 0 20px;
    }

    .content .title-part p {
        font-size: 14px;
        max-width: 100%;
    }

    .content .main-part ul {
        grid-template-columns: 1fr 1fr;
    }

    .home-2-sidebar {
        display: none;
    }

    .home-2 .home-2-mian {
        width: 100%;
    }

    .home-2 .home-2-mian ul li .home-2-detail-bottom-msg .home-2-detail-author {
        display: block;
    }
}

@media screen and (max-width: 640px) {
    .wrapper-home .swiper {
        --swiper-navigation-size:14px;
    }

    .wrapper-home .swiper-button-prev,.wrapper-home .swiper-button-next {
        display: none;
    }

    .wrapper-home .swiper-pagination-bullet {
        height: 4px;
        border-radius: 6px;
        padding: 0 5px;
        margin: 0 2px !important;
    }

    .wrapper-home .swiper-pagination-bullet-active {
        padding: 0 10px;
        transition: var(--tr3);
    }

    .wrapper-home .swiper-pagination {
        bottom: 10px !important;
    }

    .wrapper-home .swiper-slide {
        padding-bottom: 50%;
    }

    .wrapper-home .swiper-slide .title {
        padding: 0 20px;
        font-size: 16px;
    }

    .wrapper-recommend {
        flex-direction: column;
    }

    .wrapper-recommend .swiper {
        width: 100%;
    }

    .wrapper-recommend .swiper-slide {
    }

    .wrapper-recommend .recommend {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
        height: 100px;
        flex-direction: row;
    }

    .wrapper-recommend .recommend > .box {
        position: relative;
        width: calc(50% - 10px);
        height: 100%;
        border-radius: var(--radius);
        overflow: hidden;
    }

    .wrapper-recommend .recommend a .title {
        font-size: 13px;
    }

    .wrapper .banner,.wrapper {
        height: 145px;
    }

    .content-wrapper .text-wrapper h2 {
        font-size: 20px;
    }

    .content-wrapper .text-wrapper i {
        font-size: 15px;
    }

    .main-content .notice {
        height: 42px;
    }

    .main-content .notice .notice-box > span {
        font-size: 20px;
        margin-top: 0;
    }

    .main-content .notice .notice-box > p {
        font-size: 14px;
    }

    .content .main-part ul {
        grid-template-columns: 1fr 1fr;
        grid-gap: 5px;
    }

    .content .main-part > ul > li {
        padding: 10px;
        border: 1px solid var(--border);
        transition: var(--tr3);
    }

    .content .main-part > ul > li:hover {
        border: 1px solid var(--theme);
    }

    .content .main-part > ul > li .home-detail {
        border-radius: var(--radius);
        border-top: 0;
    }

    .content .main-part > ul > li .home-detail .home-cate {
        margin-top: 0;
    }

    .content .main-part ul li .home-pic {
        border-radius: var(--radius);
        margin-bottom: 10px;
    }

    .content .main-part ul li .home-pic .mask-pic {
        border-radius: var(--radius);
    }

    .home-2 .home-2-mian ul {
        border: 0;
    }

    .home-2 .home-2-mian ul li {
        padding: 0;
        border: none;
    }

    .home-2 .home-2-mian ul li:hover {
        border: none;
    }

    .home-2 .home-2-mian ul li .home-2-pic a {
        width: 140px;
        height: 100px;
    }

    .home-2 .home-2-mian ul li .home-2-pic .mask-pic span {
        font-size: 32px;
    }

    .home-2 .home-2-mian ul li .home-2-detail {
        width: calc(100% - 130px);
        padding-left: 10px;
        padding-right: 0;
    }

    .home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-cate {
        margin-bottom: 5px;
    }

    .home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-cate a {
        margin-right: 2px;
    }

    .home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom-msg img {
        width: 20px;
        height: 20px;
    }

    .home-2 .home-2-mian ul li .home-2-detail .home-2-detail-top-abstract,.home-2 .home-2-mian ul li .home-2-detail-bottom-msg .home-2-detail-comments,.home-2 .home-2-mian ul li .home-2-detail-bottom-msg .home-2-detail-comments::before {
        display: none !important;
    }

    .home-2 .home-2-mian ul li .home-2-detail .home-2-detail-top-title {
        margin-top: 0;
    }

    .home-2 .home-2-mian ul li .home-2-detail .home-2-detail-bottom {
        margin-bottom: 0;
    }

    .home-2 .home-2-mian ul li .home-2-detail h2 a {
        font-size: 15px;
    }

    .page-nav-bar .page-nav {
        font-size: 12px;
    }
}

@media screen and (max-width: 550px) {
    .wrapper-recommend .recommend {
        margin-top:10px;
        height: 80px;
    }

    .wrapper-recommend .recommend > .box {
        width: calc(50% - 5px);
    }

    .wrapper-recommend .swiper-pagination {
        bottom: 8px !important;
    }
}

.page-link {
    margin-top: 90px;
}

.linkcat h2 {
    display: none;
}

.linkcat ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}

.linkcat ul,.linkcat ul li {
    margin: 0 !important;
    width: 100% !important;
}

.linkcat ul li {
    list-style: none !important;
    line-height: 1 !important;
    color: var(--text-info);
    font-size: 14px;
    margin-bottom: 20px;
    background-color: var(--bgc);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: var(--radius);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: var(--tr3);
}

.linkcat ul li:hover {
    border: 1px solid var(--theme);
}

.linkcat ul li a {
    color: var(--text) !important;
    display: flex;
    text-decoration: none !important;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: var(--tr3);
}

.linkcat ul li a:hover {
    color: var(--theme) !important;
}

.linkcat ul li a img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    margin-right: 10px;
    transition: var(--tr3);
}

.linkcat ul li a:hover img {
    opacity: .8;
}

@media screen and (max-width: 960px) {
    .linkcat ul {
        display:grid !important;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
}

@media screen and (max-width: 640px) {
    .linkcat ul {
        display:grid !important;
        grid-template-columns: 1fr;
    }

    .linkcat ul li {
        padding: 10px;
    }

    .linkcat ul li a {
        font-size: 15px;
    }

    .linkcat ul li a img {
        width: 40px !important;
        height: 40px !important;
    }
}

.login-page {
    display: flex;
    height: 100vh;
    justify-content: center;
}

.login-page .login-main {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.login-page .login-main .login-img {
    width: 450px;
    border-radius: 10%;
    margin-right: 80px;
    pointer-events: none;
    transition: filter var(--tr3-c);
}

.login-page .login-msg {
    position: relative;
    display: flex;
    align-items: center;
    width: 400px;
    height: auto;
}

.login-page .login-msg > * {
    position: absolute;
    width: 300px;
    height: auto;
    border-radius: 15px;
}

.login-page .login-msg h2 {
    color: var(--text);
    font-size: 28px;
    margin-bottom: 5px;
    transition: var(--tr3);
}

.login-page .login-msg .des {
    margin-bottom: 20px;
    color: var(--text-sub);
    transition: var(--tr3);
}

.login-page .login-msg p,.login-page .login-msg p span {
    margin-bottom: 10px;
    font-size: 14px;
}

.login-page .login-msg .form-item {
    position: relative;
    width: 300px;
    height: 40px;
    margin-bottom: 20px;
    border-radius: var(--radius);
}

.login-page .login-msg .form-item:last-child {
    margin-bottom: 0;
}

.login-page .login-msg .form-item span {
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 42px;
    font-size: 20px;
    text-align: center;
    color: var(--text);
    transition: var(--tr3);
}

.login-page .login-msg .form-item input {
    width: 100%;
    height: 100%;
    font-size: 14px;
    background-color: var(--bgc-sub);
    outline: 0;
    border: 1px solid var(--bgc-sub);
    color: var(--text);
    border-radius: var(--radius);
    padding: 0 10px 0 35px;
    transition: var(--tr3);
}

.login-page .login-msg .form-item input:hover,.login-page .login-msg .form-item input:focus {
    border: 1px solid var(--theme);
    background-color: var(--bgc);
}

.login-page .login-msg .form-item input:focus {
    box-shadow: var(--input);
}

.login-page .login-msg .form-other {
    display: flex;
    justify-content: space-between;
}

.login-page .login-msg .form-other span {
    font-size: 14px;
    color: var(--text-info);
    margin-bottom: 20px;
}

.login-page .login-msg .form-other span a {
    cursor: pointer;
    color: var(--theme);
}

.login-page .login-msg .form-other span a:hover {
    text-decoration: underline;
}

.login-page .login-msg .form-item button {
    width: 100%;
    height: 100%;
    font-size: 15px;
    font-weight: 400;
    outline: 0;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-keep);
    background: var(--theme);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    box-shadow: var(--box-p);
    transition: var(--tr3);
}

.login-page .login-msg .form-item button:hover {
    opacity: .8;
}

.login-page .login-msg .login-third .hr-line {
    text-align: center;
    margin: 20px 0 15px 0;
}

.login-page .login-msg .login-third .hr-line > * {
    display: inline-block;
    color: var(--text-info);
}

.login-page .login-msg .login-third hr {
    width: 50px;
    height: 1px;
    border: 0;
    vertical-align: middle;
    background-color: var(--text-info);
}

.login-page .login-msg .login-third p {
    margin: 0 10px;
}

.login-page .login-msg .login-third .qqlogin {
    display: flex;
    justify-content: center;
}

.login-page .login-msg .login-third .qqlogin a {
    border-radius: 50%;
}

.login-page .login-msg .login-third .qqlogin img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    border-radius: 50%;
}

@media screen and (max-width: 1100px) {
    .login-page .login-main .login-img {
        display:none;
    }

    .login-page .login-msg {
        width: 300px;
    }
}

.register-back-home {
    color: var(--theme);
}

.register-back-home:hover {
    text-decoration: underline;
}

.page-banner {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    transition: var(--tr3);
}

.page-banner .page-title h1 {
    font-size: 32px;
    color: var(--text);
    margin-bottom: 15px;
    margin-top: 20px;
    transition: var(--tr3);
}

.page-banner .page-detail .author,.page-banner .page-detail .other {
    display: flex;
    align-items: center;
}

.page-banner .page-detail .author {
    margin-bottom: 15px;
}

.page-banner .page-detail .date::before {
    content: '\e74b';
    font-family: 'iconfont';
    font-size: 18px;
}

.page-banner .page-detail .views::before {
    content: '\e745';
    font-family: 'iconfont';
    font-size: 18px;
}

.page-banner .page-detail .comments::before {
    content: '\e7b2';
    font-family: 'iconfont';
    font-size: 18px;
}

.page-banner .page-detail .date,.page-banner .page-detail .views,.page-banner .page-detail .comments {
    margin-right: 5px;
    display: flex;
    align-items: center;
}

.page-banner .page-detail span,.page-banner .page-detail a {
    font-size: 14px;
    color: var(--text-info);
    transition: var(--tr3);
}

.page-banner .page-detail .author > span a {
    color: var(--text-sub);
    font-weight: 700;
}

.page-banner .page-detail .author a:hover {
    color: var(--theme);
}

.page-banner .page-detail .author > a {
    margin-right: 8px;
    border-radius: 50%;
}

.page-banner .page-detail img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    vertical-align: middle;
}

.page-banner .page-detail .post-edit-link {
    color: var(--theme);
    margin-left: 5px;
}

.page-main .left {
    width: 100% !important;
    border: none !important;
    padding-right: 0 !important;
}

@media screen and (max-width: 1280px) {
    .page-main {
        width:100%;
        padding: 0 30px !important;
    }
}

@media screen and (max-width: 960px) {
    .page-main {
        padding:0 20px !important;
    }
}

@media screen and (max-width: 640px) {
    .page-banner .page-title h1 {
        font-size:24px;
        margin-bottom: 8px;
    }
}

.say {
    margin-top: 70px;
}

.say .say-banner {
    width: 100%;
    height: 0;
    padding-bottom: 70%;
    border-radius: 0 0 10px 10px;
    position: relative;
    overflow: hidden;
}

.say .say-banner img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
    z-index: -9;
    pointer-events: none;
    transition: filter var(--tr3-c);
}

.say .say-banner::before {
    content: "";
    width: 100%;
    height: 70px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -8;
}

.say-author {
    width: 100%;
    padding: 0 20px;
}

.say-author .say-author-box {
    width: 100%;
    padding: 0 20px;
    border-radius: 10px;
    background-color: var(--bgc-blur-say);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 8px rgb(28 31 35 / 3%),0 0 24px 8px rgb(28 31 35 / 5%);
    position: relative;
    top: -30px;
    transition: var(--tr3);
}

.say-author .say-author-box .say-author-logo {
    width: 75px;
    height: 75px;
    background-color: var(--bgc);
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    top: -39px;
    overflow: hidden;
    transition: var(--tr3);
}

.say-author .say-author-box .say-author-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.say-author .say-author-box .say-author-name,.say-author .say-author-box .say-author-des {
    text-align: center;
}

.say-author .say-author-box .say-author-name {
    position: relative;
    top: -25px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    transition: var(--tr3);
}

.say-author .say-author-box .say-author-des {
    position: relative;
    top: -20px;
    font-size: 14px;
    color: var(--text-info);
    transition: var(--tr3);
}

.say-content .say-post-item {
    list-style: none;
    width: 100%;
    position: relative;
    padding: 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    transition: var(--tr3);
}

.say-content .say-post-item:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.say-content .say-post-item .say-post-box {
    display: flex;
    margin-bottom: 15px;
}

.say-content .say-post-item .say-post-box .say-author-logo {
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin-right: 10px;
}

.say-content .say-post-item .say-post-box .say-author-logo a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.say-content .say-post-item .say-post-box .say-author-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: middle;
}

.say-content .say-post-item .say-post-box .say-post-msg {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.say-content .say-post-item .say-post-box .say-post-msg .say-author-name {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.say-content .say-post-item .say-post-box .say-post-msg .say-author-name a {
    transition: var(--tr3);
}

.say-content .say-post-item .say-post-box .say-post-msg .say-author-name span {
    margin-left: 10px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-keep);
    background: var(--theme-sub);
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    padding: 2px 6px;
    border-radius: var(--radius-sub);
}

.say-content .say-post-item .say-post-box .say-post-msg .say-post-time {
    font-size: 12px;
    color: var(--text-info);
    margin-top: 5px;
}

.say-content .say-post-item .say-post-content {
    word-break: break-all;
    word-wrap: break-word;
}

.say-content .say-post-item .say-post-content #article-toc-mb,.say-content .say-post-item .say-post-content #article-toc {
    display: none;
}

.say-content .say-post-item .say-post-comments {
    margin-top: 40px;
    transition: var(--tr3);
    display: flex;
    justify-content: right;
    align-items: center;
}

.say-content .say-post-item .say-post-comments::before {
    content: '\e7b2';
    font-family: 'iconfont';
    font-size: 17px;
    margin-right: 3px;
    color: var(--text-info);
}

.say-content .say-post-item .say-post-comments a {
    font-size: 14px;
    color: var(--text-info);
    transition: var(--tr3);
}

.say-content .say-post-item .say-post-comments a:hover {
    color: var(--theme);
}

.say-content .say-post-item .say-post-comments .close:hover {
    color: var(--text-info);
}

.say-content .say-page-nav {
    padding-bottom: 20px;
}

.say-content .say-page-nav .say-page-nav-bar {
    display: flex;
    justify-content: center;
    color: var(--text-sub);
}

.say-content .say-page-nav .say-page-nav-bar > * {
    display: block;
    width: 30px;
    height: 30px;
    color: var(--text-info);
    font-size: 14px;
    background-color: var(--border);
    line-height: 30px;
    text-align: center;
    margin: 0 3px;
    border-radius: var(--radius-sub);
    overflow: hidden;
    transition: var(--tr3);
}

.say-content .say-page-nav .say-page-nav-bar .current {
    background: linear-gradient(120deg,var(--theme),var(--theme-sub));
    animation: hueRotate 3s infinite alternate;
    color: var(--text-keep);
}

.say-content .say-page-nav .say-page-nav-bar a:hover {
    background-color: var(--theme);
    color: var(--text-keep);
}

.say-content .say-page-nav .say-page-nav-bar .dots {
    background-color: var(--bgc-0);
}

.say-content .say-page-nav .say-page-nav-bar .dots:hover {
    cursor: default;
}

.haveNoMore-say {
    text-align: center;
    color: var(--text-info);
    margin-bottom: 20px;
}

.haveNoMore-say span {
    font-size: 14px;
}

.say-post-content > * {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text);
    transition: var(--tr3);
}

.say-post-content > *:last-child {
    margin-bottom: 0;
}

.say-post-content p {
    line-height: 1.5;
}

.say-post-content h1,.say-post-content h2,.say-post-content h3,.say-post-content h4,.say-post-content h5,.say-post-content h6 {
    position: relative;
    padding-left: 15px;
}

.say-post-content h1::before,.say-post-content h2::before,.say-post-content h3::before,.say-post-content h4::before,.say-post-content h5::before,.say-post-content h6::before {
    content: '';
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    border-radius: var(--radius);
    background-color: var(--theme);
    box-shadow: 1px 1px 3px -1px var(--theme-sub);
}

.say-post-content h1 {
    font-size: 20px;
}

.say-post-content h2 {
    font-size: 18px;
}

.say-post-content h3 {
    font-size: 16px;
}

.say-post-content h4 {
    font-size: 15px;
}

.say-post-content h5 {
    font-size: 14px;
}

.say-post-content h6 {
    font-size: 14px;
    font-weight: 400;
}

.say-post-content pre {
    padding: 10px;
    background-color: var(--bgc-sub);
    border-radius: var(--radius);
}

.say-post-content a {
    color: var(--theme);
}

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

.say-post-content ul,.say-post-content ol {
    margin-left: 30px;
}

.say-post-content ul li,.say-post-content ol li {
    line-height: 1.5;
    color: var(--text);
    font-size: 15px;
    word-break: break-all;
    word-wrap: break-word;
    transition: var(--tr3);
}

.say-post-content ul li {
    list-style: disc;
}

.say-post-content ol li {
    list-style: lower-greek;
}

.say-post-content .say-img {
    display: block;
    width: 66%;
    height: 0;
    padding-bottom: 66%;
    position: relative;
    outline: 0;
}

.say-post-content img {
    vertical-align: middle;
    border-radius: var(--radius);
    transition: filter var(--tr3-c);
}

.say-post-content .say-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    transition: var(--tr3);
}

.say-post-content .say-img img:hover {
    box-shadow: var(--box-l);
}

.say-post-content .gallery {
    margin-bottom: 10px !important;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.say-post-content .gallery:last-child {
    margin-bottom: 0 !important;
}

.say-post-content .gallery br {
    display: none;
}

.say-post-content .gallery .gallery-item {
    margin-top: 0 !important;
    width: 100% !important;
    text-align: left !important;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}

.say-post-content .gallery .gallery-item dt {
    cursor: pointer;
}

.say-post-content .gallery .gallery-item img {
    border: 0 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    transition: var(--tr3);
}

.say-post-content .gallery .gallery-item img:hover {
    box-shadow: var(--box-l);
}

.say-top .single-banner .single-title h1 {
    margin-top: 20px;
}

@media screen and (max-width: 700px) {
    .say {
        width:100%;
    }

    .say-post-content > * {
        font-size: 15px;
    }

    .say-post-content ul li,.say-post-content ol li {
        font-size: 14px;
    }
}

.searchform {
    width: 285px;
    height: 100%;
    position: relative;
}

.searchform input {
    width: 220px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    outline: none;
    background-color: var(--bgc-sub);
    color: var(--text);
    border: 1px solid var(--bgc-sub);
    border-radius: var(--radius);
    padding: 0 36px 0 10px;
    transition: var(--tr3);
}

.searchform input:hover {
    background-color: var(--bgc);
    border: 1px solid var(--theme);
}

.searchform input:focus {
    width: 285px;
    background-color: var(--bgc);
    border: 1px solid var(--theme);
    box-shadow: var(--input);
}

.searchform button {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    border-radius: var(--radius-sub);
    background-color: var(--bgc-0);
    cursor: pointer;
}

.searchform button span {
    color: var(--text-info);
    font-size: 18px;
}

.searchform-mb {
    display: none;
}

@media screen and (max-width: 960px) {
    .searchform {
        display:none;
    }

    .searchform-mb {
        display: block;
        width: calc(100% - 49px);
        position: relative;
        padding: 10px;
        transition: var(--tr3);
    }

    .searchform-mb input {
        width: 100%;
        height: 39px;
        font-size: 14px;
        outline: none;
        background-color: var(--bgc-sub);
        color: var(--text);
        border: 1px solid var(--bgc-sub);
        border-radius: var(--radius);
        padding: 0 39px 0 10px;
        transition: var(--tr3);
    }

    .searchform-mb input:hover {
        background-color: var(--bgc);
        border: 1px solid var(--theme);
    }

    .searchform-mb input:focus {
        background-color: var(--bgc);
        border: 1px solid var(--theme);
        box-shadow: var(--input);
    }

    .searchform-mb button {
        width: 39px;
        height: 39px;
        position: absolute;
        margin-right: 10px;
        top: 10px;
        right: 0;
        border: 0;
        border-radius: var(--radius-sub);
        background-color: var(--bgc-0);
        cursor: pointer;
    }

    .searchform-mb button span {
        font-size: 18px !important;
        color: var(--text-info) !important;
    }
}