/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {

    line-height: 1.15;

    -webkit-text-size-adjust: 100%

}



body {

    margin: 0

}



main {

    display: block

}



h1 {

    font-size: 2em;

    margin: .67em 0

}



hr {

    box-sizing: content-box;

    height: 0;

    overflow: visible

}



pre {

    font-family: monospace, monospace;

    font-size: 1em

}



a {

    background-color: transparent

}



abbr[title] {

    border-bottom: none;

    text-decoration: underline;

    text-decoration: underline dotted

}



b,

strong {

    font-weight: bolder

}



code,

kbd,

samp {

    font-family: monospace, monospace;

    font-size: 1em

}



small {

    font-size: 80%

}



sub,

sup {

    font-size: 75%;

    line-height: 0;

    position: relative;

    vertical-align: baseline

}



sub {

    bottom: -.25em

}



sup {

    top: -.5em

}



img {

    border-style: none

}



button,

input,

optgroup,

select,

textarea {

    font-family: inherit;

    font-size: 100%;

    line-height: 1.15;

    margin: 0

}



button,

input {

    overflow: visible

}



button,

select {

    text-transform: none

}



[type=button],

[type=reset],

[type=submit],

button {

    -webkit-appearance: button

}



[type=button]::-moz-focus-inner,

[type=reset]::-moz-focus-inner,

[type=submit]::-moz-focus-inner,

button::-moz-focus-inner {

    border-style: none;

    padding: 0

}



[type=button]:-moz-focusring,

[type=reset]:-moz-focusring,

[type=submit]:-moz-focusring,

button:-moz-focusring {

    outline: 1px dotted ButtonText

}



fieldset {

    padding: .35em .75em .625em

}



legend {

    box-sizing: border-box;

    color: inherit;

    display: table;

    max-width: 100%;

    padding: 0;

    white-space: normal

}



progress {

    vertical-align: baseline

}



textarea {

    overflow: auto

}



[type=checkbox],

[type=radio] {

    box-sizing: border-box;

    padding: 0

}



[type=number]::-webkit-inner-spin-button,

[type=number]::-webkit-outer-spin-button {

    height: auto

}



[type=search] {

    -webkit-appearance: textfield;

    outline-offset: -2px

}



[type=search]::-webkit-search-decoration {

    -webkit-appearance: none

}



::-webkit-file-upload-button {

    -webkit-appearance: button;

    font: inherit

}



details {

    display: block

}



summary {

    display: list-item

}



template {

    display: none

}



[hidden] {

    display: none

}



#article-container .flink .flink-item-desc,

#article-container .flink .flink-item-name,

#aside-content .card-archives ul.card-archive-list>.card-archive-list-item a span,

#aside-content .card-categories ul.card-category-list>.card-category-list-item a span,

#nav #blog-info,

#pagination .next_info,

#pagination .prev_info,

#sidebar #sidebar-menus .menus_items .site-page,

.limit-one-line,

.site-data>a .headline {

    overflow: hidden;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis;

    white-space: nowrap

}



#article-container figure.gallery-group .gallery-group-name,

#article-container figure.gallery-group p,

#aside-content .aside-list>.aside-list-item .content>.comment,

#aside-content .aside-list>.aside-list-item .content>.name,

#aside-content .aside-list>.aside-list-item .content>.title,

#post-info .post-title,

#recent-posts>.recent-post-item>.recent-post-info>.article-title,

#recent-posts>.recent-post-item>.recent-post-info>.content,

.article-sort-item-title,

.error404 #error-wrap .error-content .error-info .error_subtitle,

.limit-more-line,

.relatedPosts>.relatedPosts-list .content .title {

    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical

}



#article-container a.headerlink:after,

#article-container.post-content h1:before,

#article-container.post-content h2:before,

#article-container.post-content h3:before,

#article-container.post-content h4:before,

#article-container.post-content h5:before,

#article-container.post-content h6:before,

#post .post-copyright:before,

#post .post-outdate-notice:before,

.fontawesomeIcon,

.note:not(.no-icon)::before,

hr:before {

    display: inline-block;

    font-weight: 600;

    font-family: 'Font Awesome 6 Free';

    text-rendering: auto;

    -webkit-font-smoothing: antialiased

}



#aside-content .card-widget,

#recent-posts>.recent-post-item,

.cardHover,

.error404 #error-wrap .error-content,

.layout>.recent-posts .pagination>:not(.space),

.layout>div:first-child:not(.recent-posts) {

    border-radius: 8px;

    background: var(--card-bg);

    -webkit-box-shadow: var(--card-box-shadow);

    box-shadow: var(--card-box-shadow);

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -o-transition: all .3s;

    -ms-transition: all .3s;

    transition: all .3s

}



#aside-content .card-widget:hover,

#recent-posts>.recent-post-item:hover,

.cardHover:hover,

.error404 #error-wrap .error-content:hover,

.layout>.recent-posts .pagination>:not(.space):hover,

.layout>div:first-child:not(.recent-posts):hover {

    -webkit-box-shadow: var(--card-hover-box-shadow);

    box-shadow: var(--card-hover-box-shadow)

}



#aside-content .aside-list>.aside-list-item .thumbnail :first-child,

#recent-posts>.recent-post-item .post_cover .post-bg,

.article-sort-item-img :first-child,

.error404 #error-wrap .error-content .error-img img,

.imgHover {

    width: 100%;

    height: 100%;

    -webkit-transition: filter 375ms ease-in .2s, -webkit-transform .6s;

    -moz-transition: filter 375ms ease-in .2s, -moz-transform .6s;

    -o-transition: filter 375ms ease-in .2s, -o-transform .6s;

    -ms-transition: filter 375ms ease-in .2s, -ms-transform .6s;

    transition: filter 375ms ease-in .2s, transform .6s;

    object-fit: cover

}



#aside-content .aside-list>.aside-list-item .thumbnail :first-child:hover,

#recent-posts>.recent-post-item .post_cover .post-bg:hover,

.article-sort-item-img :first-child:hover,

.error404 #error-wrap .error-content .error-img img:hover,

.imgHover:hover {

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -o-transform: scale(1.1);

    -ms-transform: scale(1.1);

    transform: scale(1.1)

}



#pagination .next-post:hover .cover,

#pagination .prev-post:hover .cover,

.postImgHover:hover .cover,

.relatedPosts>.relatedPosts-list>div:hover .cover {

    opacity: .8;

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -o-transform: scale(1.1);

    -ms-transform: scale(1.1);

    transform: scale(1.1)

}



#pagination .next-post .cover,

#pagination .prev-post .cover,

.postImgHover .cover,

.relatedPosts>.relatedPosts-list>div .cover {

    position: absolute;

    width: 100%;

    height: 100%;

    opacity: .4;

    -webkit-transition: all .6s, filter 375ms ease-in .2s;

    -moz-transition: all .6s, filter 375ms ease-in .2s;

    -o-transition: all .6s, filter 375ms ease-in .2s;

    -ms-transition: all .6s, filter 375ms ease-in .2s;

    transition: all .6s, filter 375ms ease-in .2s;

    object-fit: cover

}



.category-lists ul,

.list-beauty {

    list-style: none

}



.category-lists ul li,

.list-beauty li {

    position: relative;

    padding: .12em .4em .12em 1.4em

}



.category-lists ul li:hover:before,

.list-beauty li:hover:before {

    border-color: var(--pseudo-hover)

}



.category-lists ul li:before,

.list-beauty li:before {

    position: absolute;

    top: .67em;

    left: 0;

    width: .43em;

    height: .43em;

    border: .215em solid #45677d;

    border-radius: .43em;

    background: 0 0;

    content: '';

    cursor: pointer;

    -webkit-transition: all .3s ease-out;

    -moz-transition: all .3s ease-out;

    -o-transition: all .3s ease-out;

    -ms-transition: all .3s ease-out;

    transition: all .3s ease-out

}



#content-inner,

#footer {

    -webkit-animation: bottom-top 1s;

    -moz-animation: bottom-top 1s;

    -o-animation: bottom-top 1s;

    -ms-animation: bottom-top 1s;

    animation: bottom-top 1s

}



#page-header {

    -webkit-animation: header-effect 1s;

    -moz-animation: header-effect 1s;

    -o-animation: header-effect 1s;

    -ms-animation: header-effect 1s;

    animation: header-effect 1s

}



#site-subtitle,

#site-title {

    -webkit-animation: titleScale 1s;

    -moz-animation: titleScale 1s;

    -o-animation: titleScale 1s;

    -ms-animation: titleScale 1s;

    animation: titleScale 1s

}



#nav.show {

    -webkit-animation: headerNoOpacity 1s;

    -moz-animation: headerNoOpacity 1s;

    -o-animation: headerNoOpacity 1s;

    -ms-animation: headerNoOpacity 1s;

    animation: headerNoOpacity 1s

}



#web_bg,

canvas:not(#ribbon-canvas) {

    -webkit-animation: to_show 4s;

    -moz-animation: to_show 4s;

    -o-animation: to_show 4s;

    -ms-animation: to_show 4s;

    animation: to_show 4s

}



#ribbon-canvas {

    -webkit-animation: ribbon_to_show 4s;

    -moz-animation: ribbon_to_show 4s;

    -o-animation: ribbon_to_show 4s;

    -ms-animation: ribbon_to_show 4s;

    animation: ribbon_to_show 4s

}



#sidebar-menus.open>:nth-child(1) {

    -webkit-animation: sidebarItem .2s;

    -moz-animation: sidebarItem .2s;

    -o-animation: sidebarItem .2s;

    -ms-animation: sidebarItem .2s;

    animation: sidebarItem .2s

}



#sidebar-menus.open>:nth-child(2) {

    -webkit-animation: sidebarItem .4s;

    -moz-animation: sidebarItem .4s;

    -o-animation: sidebarItem .4s;

    -ms-animation: sidebarItem .4s;

    animation: sidebarItem .4s

}



#sidebar-menus.open>:nth-child(3) {

    -webkit-animation: sidebarItem .6s;

    -moz-animation: sidebarItem .6s;

    -o-animation: sidebarItem .6s;

    -ms-animation: sidebarItem .6s;

    animation: sidebarItem .6s

}



#sidebar-menus.open>:nth-child(4) {

    -webkit-animation: sidebarItem .8s;

    -moz-animation: sidebarItem .8s;

    -o-animation: sidebarItem .8s;

    -ms-animation: sidebarItem .8s;

    animation: sidebarItem .8s

}



.scroll-down-effects {

    -webkit-animation: scroll-down-effect 1.5s infinite;

    -moz-animation: scroll-down-effect 1.5s infinite;

    -o-animation: scroll-down-effect 1.5s infinite;

    -ms-animation: scroll-down-effect 1.5s infinite;

    animation: scroll-down-effect 1.5s infinite

}



.reward-main {

    -webkit-animation: donate_effcet .3s .1s ease both;

    -moz-animation: donate_effcet .3s .1s ease both;

    -o-animation: donate_effcet .3s .1s ease both;

    -ms-animation: donate_effcet .3s .1s ease both;

    animation: donate_effcet .3s .1s ease both

}



@-moz-keyframes scroll-down-effect {

    0% {

        top: 0;

        opacity: .4

    }



    50% {

        top: -16px;

        opacity: 1;

        -ms-filter: none;

        filter: none

    }



    100% {

        top: 0;

        opacity: .4

    }

}



@-webkit-keyframes scroll-down-effect {

    0% {

        top: 0;

        opacity: .4

    }



    50% {

        top: -16px;

        opacity: 1;

        -ms-filter: none;

        filter: none

    }



    100% {

        top: 0;

        opacity: .4

    }

}



@-o-keyframes scroll-down-effect {

    0% {

        top: 0;

        opacity: .4

    }



    50% {

        top: -16px;

        opacity: 1;

        -ms-filter: none;

        filter: none

    }



    100% {

        top: 0;

        opacity: .4

    }

}



@keyframes scroll-down-effect {

    0% {

        top: 0;

        opacity: .4

    }



    50% {

        top: -16px;

        opacity: 1;

        -ms-filter: none;

        filter: none

    }



    100% {

        top: 0;

        opacity: .4

    }

}



@-moz-keyframes header-effect {

    0% {

        opacity: 0;

        -webkit-transform: translateY(-50px);

        -moz-transform: translateY(-50px);

        -o-transform: translateY(-50px);

        -ms-transform: translateY(-50px);

        transform: translateY(-50px)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-webkit-keyframes header-effect {

    0% {

        opacity: 0;

        -webkit-transform: translateY(-50px);

        -moz-transform: translateY(-50px);

        -o-transform: translateY(-50px);

        -ms-transform: translateY(-50px);

        transform: translateY(-50px)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-o-keyframes header-effect {

    0% {

        opacity: 0;

        -webkit-transform: translateY(-50px);

        -moz-transform: translateY(-50px);

        -o-transform: translateY(-50px);

        -ms-transform: translateY(-50px);

        transform: translateY(-50px)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@keyframes header-effect {

    0% {

        opacity: 0;

        -webkit-transform: translateY(-50px);

        -moz-transform: translateY(-50px);

        -o-transform: translateY(-50px);

        -ms-transform: translateY(-50px);

        transform: translateY(-50px)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-moz-keyframes headerNoOpacity {

    0% {

        -webkit-transform: translateY(-50px);

        -moz-transform: translateY(-50px);

        -o-transform: translateY(-50px);

        -ms-transform: translateY(-50px);

        transform: translateY(-50px)

    }



    100% {

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-webkit-keyframes headerNoOpacity {

    0% {

        -webkit-transform: translateY(-50px);

        -moz-transform: translateY(-50px);

        -o-transform: translateY(-50px);

        -ms-transform: translateY(-50px);

        transform: translateY(-50px)

    }



    100% {

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-o-keyframes headerNoOpacity {

    0% {

        -webkit-transform: translateY(-50px);

        -moz-transform: translateY(-50px);

        -o-transform: translateY(-50px);

        -ms-transform: translateY(-50px);

        transform: translateY(-50px)

    }



    100% {

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@keyframes headerNoOpacity {

    0% {

        -webkit-transform: translateY(-50px);

        -moz-transform: translateY(-50px);

        -o-transform: translateY(-50px);

        -ms-transform: translateY(-50px);

        transform: translateY(-50px)

    }



    100% {

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-moz-keyframes bottom-top {

    0% {

        margin-top: 50px;

        opacity: 0

    }



    100% {

        margin-top: 0;

        opacity: 1;

        -ms-filter: none;

        filter: none

    }

}



@-webkit-keyframes bottom-top {

    0% {

        margin-top: 50px;

        opacity: 0

    }



    100% {

        margin-top: 0;

        opacity: 1;

        -ms-filter: none;

        filter: none

    }

}



@-o-keyframes bottom-top {

    0% {

        margin-top: 50px;

        opacity: 0

    }



    100% {

        margin-top: 0;

        opacity: 1;

        -ms-filter: none;

        filter: none

    }

}



@keyframes bottom-top {

    0% {

        margin-top: 50px;

        opacity: 0

    }



    100% {

        margin-top: 0;

        opacity: 1;

        -ms-filter: none;

        filter: none

    }

}



@-moz-keyframes titleScale {

    0% {

        opacity: 0;

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }

}



@-webkit-keyframes titleScale {

    0% {

        opacity: 0;

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }

}



@-o-keyframes titleScale {

    0% {

        opacity: 0;

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }

}



@keyframes titleScale {

    0% {

        opacity: 0;

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }

}



@-moz-keyframes search_close {

    0% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }

}



@-webkit-keyframes search_close {

    0% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }

}



@-o-keyframes search_close {

    0% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }

}



@keyframes search_close {

    0% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }

}



@-moz-keyframes to_show {

    0% {

        opacity: 0

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none

    }

}



@-webkit-keyframes to_show {

    0% {

        opacity: 0

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none

    }

}



@-o-keyframes to_show {

    0% {

        opacity: 0

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none

    }

}



@keyframes to_show {

    0% {

        opacity: 0

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none

    }

}



@-moz-keyframes to_hide {

    0% {

        opacity: 1;

        -ms-filter: none;

        filter: none

    }



    100% {

        opacity: 0

    }

}



@-webkit-keyframes to_hide {

    0% {

        opacity: 1;

        -ms-filter: none;

        filter: none

    }



    100% {

        opacity: 0

    }

}



@-o-keyframes to_hide {

    0% {

        opacity: 1;

        -ms-filter: none;

        filter: none

    }



    100% {

        opacity: 0

    }

}



@keyframes to_hide {

    0% {

        opacity: 1;

        -ms-filter: none;

        filter: none

    }



    100% {

        opacity: 0

    }

}



@-moz-keyframes ribbon_to_show {

    0% {

        opacity: 0

    }



    100% {

        opacity: .6

    }

}



@-webkit-keyframes ribbon_to_show {

    0% {

        opacity: 0

    }



    100% {

        opacity: .6

    }

}



@-o-keyframes ribbon_to_show {

    0% {

        opacity: 0

    }



    100% {

        opacity: .6

    }

}



@keyframes ribbon_to_show {

    0% {

        opacity: 0

    }



    100% {

        opacity: .6

    }

}



@-moz-keyframes avatar_turn_around {

    from {

        -webkit-transform: rotate(0);

        -moz-transform: rotate(0);

        -o-transform: rotate(0);

        -ms-transform: rotate(0);

        transform: rotate(0)

    }



    to {

        -webkit-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@-webkit-keyframes avatar_turn_around {

    from {

        -webkit-transform: rotate(0);

        -moz-transform: rotate(0);

        -o-transform: rotate(0);

        -ms-transform: rotate(0);

        transform: rotate(0)

    }



    to {

        -webkit-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@-o-keyframes avatar_turn_around {

    from {

        -webkit-transform: rotate(0);

        -moz-transform: rotate(0);

        -o-transform: rotate(0);

        -ms-transform: rotate(0);

        transform: rotate(0)

    }



    to {

        -webkit-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@keyframes avatar_turn_around {

    from {

        -webkit-transform: rotate(0);

        -moz-transform: rotate(0);

        -o-transform: rotate(0);

        -ms-transform: rotate(0);

        transform: rotate(0)

    }



    to {

        -webkit-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@-moz-keyframes sub_menus {

    0% {

        opacity: 0;

        -webkit-transform: translateY(10px);

        -moz-transform: translateY(10px);

        -o-transform: translateY(10px);

        -ms-transform: translateY(10px);

        transform: translateY(10px)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-webkit-keyframes sub_menus {

    0% {

        opacity: 0;

        -webkit-transform: translateY(10px);

        -moz-transform: translateY(10px);

        -o-transform: translateY(10px);

        -ms-transform: translateY(10px);

        transform: translateY(10px)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-o-keyframes sub_menus {

    0% {

        opacity: 0;

        -webkit-transform: translateY(10px);

        -moz-transform: translateY(10px);

        -o-transform: translateY(10px);

        -ms-transform: translateY(10px);

        transform: translateY(10px)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@keyframes sub_menus {

    0% {

        opacity: 0;

        -webkit-transform: translateY(10px);

        -moz-transform: translateY(10px);

        -o-transform: translateY(10px);

        -ms-transform: translateY(10px);

        transform: translateY(10px)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-moz-keyframes donate_effcet {

    0% {

        opacity: 0;

        -webkit-transform: translateY(-20px);

        -moz-transform: translateY(-20px);

        -o-transform: translateY(-20px);

        -ms-transform: translateY(-20px);

        transform: translateY(-20px)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-webkit-keyframes donate_effcet {

    0% {

        opacity: 0;

        -webkit-transform: translateY(-20px);

        -moz-transform: translateY(-20px);

        -o-transform: translateY(-20px);

        -ms-transform: translateY(-20px);

        transform: translateY(-20px)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-o-keyframes donate_effcet {

    0% {

        opacity: 0;

        -webkit-transform: translateY(-20px);

        -moz-transform: translateY(-20px);

        -o-transform: translateY(-20px);

        -ms-transform: translateY(-20px);

        transform: translateY(-20px)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@keyframes donate_effcet {

    0% {

        opacity: 0;

        -webkit-transform: translateY(-20px);

        -moz-transform: translateY(-20px);

        -o-transform: translateY(-20px);

        -ms-transform: translateY(-20px);

        transform: translateY(-20px)

    }



    100% {

        opacity: 1;

        -ms-filter: none;

        filter: none;

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-moz-keyframes sidebarItem {

    0% {

        -webkit-transform: translateX(200px);

        -moz-transform: translateX(200px);

        -o-transform: translateX(200px);

        -ms-transform: translateX(200px);

        transform: translateX(200px)

    }



    100% {

        -webkit-transform: translateX(0);

        -moz-transform: translateX(0);

        -o-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }

}



@-webkit-keyframes sidebarItem {

    0% {

        -webkit-transform: translateX(200px);

        -moz-transform: translateX(200px);

        -o-transform: translateX(200px);

        -ms-transform: translateX(200px);

        transform: translateX(200px)

    }



    100% {

        -webkit-transform: translateX(0);

        -moz-transform: translateX(0);

        -o-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }

}



@-o-keyframes sidebarItem {

    0% {

        -webkit-transform: translateX(200px);

        -moz-transform: translateX(200px);

        -o-transform: translateX(200px);

        -ms-transform: translateX(200px);

        transform: translateX(200px)

    }



    100% {

        -webkit-transform: translateX(0);

        -moz-transform: translateX(0);

        -o-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }

}



@keyframes sidebarItem {

    0% {

        -webkit-transform: translateX(200px);

        -moz-transform: translateX(200px);

        -o-transform: translateX(200px);

        -ms-transform: translateX(200px);

        transform: translateX(200px)

    }



    100% {

        -webkit-transform: translateX(0);

        -moz-transform: translateX(0);

        -o-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }

}



:root {

    --global-font-size: 14px;

    --global-bg: #fff;

    --font-color: #4c4948;

    --hr-border: #a4d8fa;

    --hr-before-color: #80c8f8;

    --search-bg: #f6f8fa;

    --search-input-color: #4c4948;

    --search-result-title: #4c4948;

    --preloader-bg: #37474f;

    --preloader-color: #fff;

    --tab-border-color: #f0f0f0;

    --tab-botton-bg: #f0f0f0;

    --tab-botton-color: #1f2d3d;

    --tab-button-hover-bg: #dcdcdc;

    --tab-button-active-bg: #fff;

    --card-bg: #fff;

    --sidebar-bg: #f6f8fa;

    --btn-hover-color: #ff7242;

    --btn-color: #fff;

    --btn-bg: #45677d;

    --text-bg-hover: rgba(73, 177, 245, 0.7);

    --light-grey: #eee;

    --dark-grey: #cacaca;

    --white: #fff;

    --text-highlight-color: #1f2d3d;

    --blockquote-color: #6a737d;

    --blockquote-bg: rgba(73, 177, 245, 0.1);

    --reward-pop: #f5f5f5;

    --toc-link-color: #666261;

    --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);

    --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.09);

    --pseudo-hover: #ff7242;

    --headline-presudo: #a0a0a0;

    --scrollbar-color: #45677d;

    --default-bg-color: #45677d

}



body {

    position: relative;

    min-height: 100%;

    background: var(--global-bg);

    color: var(--font-color);

    font-size: var(--global-font-size);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;

    line-height: 2;

    -webkit-tap-highlight-color: transparent

}



::-webkit-scrollbar {

    width: 8px;

    height: 8px

}



::-webkit-scrollbar-thumb {

    background: var(--scrollbar-color)

}



::-webkit-scrollbar-track {

    background-color: transparent

}



* {

    scrollbar-width: thin;

    scrollbar-color: var(--scrollbar-color) transparent

}



input::placeholder {

    color: var(--font-color)

}



h1,

h2,

h3,

h4,

h5,

h6 {

    position: relative;

    margin: 20px 0 14px;

    color: var(--text-highlight-color);

    font-weight: 700

}



h1 code,

h2 code,

h3 code,

h4 code,

h5 code,

h6 code {

    font-size: inherit !important

}



* {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box

}



hr {

    position: relative;

    margin: 40px auto;

    border: 2px dashed var(--hr-border);

    width: calc(100% - 4px)

}



hr:hover:before {

    left: calc(95% - 20px)

}



hr:before {

    position: absolute;

    top: -10px;

    left: 5%;

    z-index: 1;

    color: var(--hr-before-color);

    content: '\f0c4';

    font-size: 20px;

    line-height: 1;

    -webkit-transition: all 1s ease-in-out;

    -moz-transition: all 1s ease-in-out;

    -o-transition: all 1s ease-in-out;

    -ms-transition: all 1s ease-in-out;

    transition: all 1s ease-in-out

}



.table-wrap {

    overflow-x: scroll;

    margin: 0 0 20px

}



table {

    display: table;

    width: 100%;

    border-spacing: 0;

    border-collapse: collapse;

    empty-cells: show

}



table thead {

    background: rgba(153, 169, 191, .1)

}



table td,

table th {

    padding: 6px 12px;

    border: 1px solid var(--light-grey);

    vertical-align: middle

}



::selection {

    background: #00c4b6;

    color: #f7f7f7

}



button {

    padding: 0;

    outline: 0;

    border: none;

    background: 0 0;

    cursor: pointer;

    touch-action: manipulation

}



a {

    color: #99a9bf;

    text-decoration: none;

    word-wrap: break-word;

    -webkit-transition: all .2s;

    -moz-transition: all .2s;

    -o-transition: all .2s;

    -ms-transition: all .2s;

    transition: all .2s;

    overflow-wrap: break-word

}



a:hover {

    color: #45677d

}



#aside-content .author-info__description,

#aside-content .author-info__name,

#site-subtitle,

#site-title,

.site-name {

    font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif

}



.is-center {

    text-align: center

}



.copy-true {

    -webkit-user-select: all;

    -moz-user-select: all;

    -ms-user-select: all;

    user-select: all

}



.pull-left {

    float: left

}



.pull-right {

    float: right

}



img:not([src]),

img[src=''] {

    opacity: 0

}



.img-alt {

    margin: -10px 0 10px;

    color: #858585

}



.img-alt:hover {

    text-decoration: none !important

}



blockquote {

    margin: 0 0 20px;

    padding: 12px 15px;

    border-left: 3px solid #45677d;

    background-color: var(--blockquote-bg);

    color: var(--blockquote-color)

}



blockquote footer cite:before {

    padding: 0 5px;

    content: '—'

}



blockquote>:last-child {

    margin-bottom: 0 !important

}



:root {

    --hl-color: #90a4ae;

    --hl-bg: #f6f8fa;

    --hltools-bg: #e6ebf1;

    --hltools-color: #90a4ae;

    --hlnumber-bg: #f6f8fa;

    --hlnumber-color: rgba(144, 164, 174, 0.5);

    --hlscrollbar-bg: #dce4eb;

    --hlexpand-bg: linear-gradient(180deg, rgba(246, 248, 250, 0.6), rgba(246, 248, 250, 0.9))

}



figure.highlight table {

    scrollbar-color: var(--hlscrollbar-bg) transparent

}



figure.highlight table::-webkit-scrollbar-thumb {

    background: var(--hlscrollbar-bg)

}



figure.highlight pre .deletion {

    color: #bf42bf

}



figure.highlight pre .addition {

    color: #105ede

}



figure.highlight pre .meta {

    color: #7c4dff

}



figure.highlight pre .comment {

    color: rgba(149, 165, 166, .8)

}



figure.highlight pre .attribute,

figure.highlight pre .css .class,

figure.highlight pre .css .id,

figure.highlight pre .css .pseudo,

figure.highlight pre .html .doctype,

figure.highlight pre .regexp,

figure.highlight pre .ruby .constant,

figure.highlight pre .tag .name,

figure.highlight pre .variable,

figure.highlight pre .xml .doctype,

figure.highlight pre .xml .pi,

figure.highlight pre .xml .tag .title {

    color: #e53935

}



figure.highlight pre .tag {

    color: #39adb5

}



figure.highlight pre .command,

figure.highlight pre .constant,

figure.highlight pre .literal,

figure.highlight pre .number,

figure.highlight pre .params,

figure.highlight pre .preprocessor {

    color: #f76d47

}



figure.highlight pre .built_in {

    color: #ffb62c

}



figure.highlight pre .css .rules .attribute,

figure.highlight pre .formula,

figure.highlight pre .header,

figure.highlight pre .inheritance,

figure.highlight pre .number,

figure.highlight pre .ruby .class .title,

figure.highlight pre .ruby .symbol,

figure.highlight pre .special,

figure.highlight pre .string,

figure.highlight pre .value,

figure.highlight pre .xml .cdata {

    color: #91b859

}



figure.highlight pre .css .hexcolor,

figure.highlight pre .keyword,

figure.highlight pre .title {

    color: #39adb5

}



figure.highlight pre .coffeescript .title,

figure.highlight pre .function,

figure.highlight pre .javascript .title,

figure.highlight pre .perl .sub,

figure.highlight pre .python .decorator,

figure.highlight pre .python .title,

figure.highlight pre .ruby .function .title,

figure.highlight pre .ruby .title .keyword {

    color: #6182b8

}



figure.highlight pre .javascript .function,

figure.highlight pre .tag .attr {

    color: #7c4dff

}



#article-container figure.highlight .line.marked {

    background-color: rgba(128, 203, 196, .251)

}



#article-container figure.highlight table {

    display: block;

    overflow: auto;

    border: none

}



#article-container figure.highlight table td {

    padding: 0;

    border: none

}



#article-container figure.highlight .gutter pre {

    padding-right: 10px;

    padding-left: 10px;

    background-color: var(--hlnumber-bg);

    color: var(--hlnumber-color);

    text-align: right

}



#article-container figure.highlight .code pre {

    padding-right: 10px;

    padding-left: 10px;

    width: 100%

}



#article-container figure.highlight,

#article-container pre {

    overflow: auto;

    margin: 0 0 20px;

    padding: 0;

    background: var(--hl-bg);

    color: var(--hl-color);

    line-height: 1.6

}



#article-container code,

#article-container pre {

    font-size: var(--global-font-size);

    font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif !important

}



#article-container code {

    padding: 2px 4px;

    background: rgba(27, 31, 35, .05);

    color: #f47466

}



#article-container pre {

    padding: 10px 20px

}



#article-container pre code {

    padding: 0;

    background: 0 0;

    color: var(--hl-color);

    text-shadow: none

}



#article-container figure.highlight {

    position: relative

}



#article-container figure.highlight pre {

    margin: 0;

    padding: 8px 0;

    border: none

}



#article-container figure.highlight .caption,

#article-container figure.highlight figcaption {

    padding: 6px 0 2px 14px;

    font-size: var(--global-font-size);

    line-height: 1em

}



#article-container figure.highlight .caption a,

#article-container figure.highlight figcaption a {

    float: right;

    padding-right: 10px;

    color: var(--hl-color)

}



#article-container figure.highlight .caption a:hover,

#article-container figure.highlight figcaption a:hover {

    border-bottom-color: var(--hl-color)

}



#article-container .highlight-tools {

    position: relative;

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: box;

    display: flex;

    -webkit-box-align: center;

    -moz-box-align: center;

    -o-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    overflow: hidden;

    min-height: 24px;

    height: 2.15em;

    background: var(--hltools-bg);

    color: var(--hltools-color);

    font-size: var(--global-font-size)

}



#article-container .highlight-tools.closed~* {

    display: none

}



#article-container .highlight-tools .expand {

    position: absolute;

    padding: .57em .7em;

    cursor: pointer;

    -webkit-transition: -webkit-transform .3s;

    -moz-transition: -moz-transform .3s;

    -o-transition: -o-transform .3s;

    -ms-transition: -ms-transform .3s;

    transition: transform .3s

}



#article-container .highlight-tools .expand+.code-lang {

    left: 1.7em

}



#article-container .highlight-tools .expand.closed {

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -o-transition: all .3s;

    -ms-transition: all .3s;

    transition: all .3s;

    -webkit-transform: rotate(-90deg) !important;

    -moz-transform: rotate(-90deg) !important;

    -o-transform: rotate(-90deg) !important;

    -ms-transform: rotate(-90deg) !important;

    transform: rotate(-90deg) !important

}



#article-container .highlight-tools .code-lang {

    position: absolute;

    left: 14px;

    text-transform: uppercase;

    font-weight: 700;

    font-size: 1.15em;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none

}



#article-container .highlight-tools .copy-notice {

    position: absolute;

    right: 2.4em;

    opacity: 0;

    -webkit-transition: opacity .4s;

    -moz-transition: opacity .4s;

    -o-transition: opacity .4s;

    -ms-transition: opacity .4s;

    transition: opacity .4s

}



#article-container .highlight-tools .copy-button {

    position: absolute;

    right: 14px;

    cursor: pointer;

    -webkit-transition: color .2s;

    -moz-transition: color .2s;

    -o-transition: color .2s;

    -ms-transition: color .2s;

    transition: color .2s

}



#article-container .highlight-tools .copy-button:hover {

    color: #45677d

}



#article-container .gutter {

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none

}



#article-container .gist table {

    width: auto

}



#article-container .gist table td {

    border: none

}



#article-container .code-expand-btn {

    position: absolute;

    bottom: 0;

    z-index: 10;

    width: 100%;

    background: var(--hlexpand-bg);

    text-align: center;

    font-size: var(--global-font-size);

    cursor: pointer

}



#article-container .code-expand-btn i {

    padding: 6px 0;

    color: var(--hlnumber-color);

    -webkit-animation: code-expand-key 1.2s infinite;

    -moz-animation: code-expand-key 1.2s infinite;

    -o-animation: code-expand-key 1.2s infinite;

    -ms-animation: code-expand-key 1.2s infinite;

    animation: code-expand-key 1.2s infinite

}



#article-container .code-expand-btn.expand-done>i {

    -webkit-transform: rotate(180deg);

    -moz-transform: rotate(180deg);

    -o-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    transform: rotate(180deg)

}



#article-container .code-expand-btn.expand-done+pre,

#article-container .code-expand-btn.expand-done+table {

    margin-bottom: 1.8em

}



#article-container .code-expand-btn:not(.expand-done)~pre,

#article-container .code-expand-btn:not(.expand-done)~table {

    overflow: hidden;

    height: 400px

}



@-moz-keyframes code-expand-key {

    0% {

        opacity: .6

    }



    50% {

        opacity: .1

    }



    100% {

        opacity: .6

    }

}



@-webkit-keyframes code-expand-key {

    0% {

        opacity: .6

    }



    50% {

        opacity: .1

    }



    100% {

        opacity: .6

    }

}



@-o-keyframes code-expand-key {

    0% {

        opacity: .6

    }



    50% {

        opacity: .1

    }



    100% {

        opacity: .6

    }

}



@keyframes code-expand-key {

    0% {

        opacity: .6

    }



    50% {

        opacity: .1

    }



    100% {

        opacity: .6

    }

}



.error404 #error-wrap {

    position: absolute;

    top: 50%;

    right: 0;

    left: 0;

    margin: 0 auto;

    padding: 60px 20px 0;

    max-width: 1000px;

    -webkit-transform: translate(0, -50%);

    -moz-transform: translate(0, -50%);

    -o-transform: translate(0, -50%);

    -ms-transform: translate(0, -50%);

    transform: translate(0, -50%)

}



.error404 #error-wrap .error-content {

    overflow: hidden;

    margin: 0 20px;

    height: 360px

}



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

    .error404 #error-wrap .error-content {

        margin: 0;

        height: 500px

    }

}



.error404 #error-wrap .error-content .error-img {

    display: inline-block;

    overflow: hidden;

    width: 50%;

    height: 100%

}



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

    .error404 #error-wrap .error-content .error-img {

        width: 100%;

        height: 45%

    }

}



.error404 #error-wrap .error-content .error-img img {

    background-color: #45677d

}



.error404 #error-wrap .error-content .error-info {

    display: -webkit-inline-box;

    display: -moz-inline-box;

    display: -webkit-inline-flex;

    display: -ms-inline-flexbox;

    display: inline-box;

    display: inline-flex;

    -webkit-box-orient: vertical;

    -moz-box-orient: vertical;

    -o-box-orient: vertical;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: center;

    -moz-box-pack: center;

    -o-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -ms-flex-line-pack: center;

    -webkit-align-content: center;

    align-content: center;

    width: 50%;

    height: 100%;

    vertical-align: top;

    text-align: center;

    font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif

}



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

    .error404 #error-wrap .error-content .error-info {

        width: 100%;

        height: 55%

    }

}



.error404 #error-wrap .error-content .error-info .error_title {

    margin-top: -.6em;

    font-size: 9em

}



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

    .error404 #error-wrap .error-content .error-info .error_title {

        font-size: 8em

    }

}



.error404 #error-wrap .error-content .error-info .error_subtitle {

    margin-top: -3em;

    word-break: break-word;

    font-size: 1.6em;

    -webkit-line-clamp: 2

}



.error404+#rightside {

    display: none

}



.article-sort {

    margin-left: 10px;

    padding-left: 20px;

    border-left: 2px solid #aadafa

}



.article-sort-title {

    position: relative;

    margin-left: 10px;

    padding-bottom: 20px;

    padding-left: 20px;

    font-size: 1.72em

}



.article-sort-title:hover:before {

    border-color: var(--pseudo-hover)

}



.article-sort-title:before {

    position: absolute;

    top: calc(((100% - 36px)/ 2));

    left: -9px;

    z-index: 1;

    width: 10px;

    height: 10px;

    border: 5px solid #45677d;

    border-radius: 10px;

    background: var(--card-bg);

    content: '';

    line-height: 10px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out

}



.article-sort-title:after {

    position: absolute;

    bottom: 0;

    left: 0;

    z-index: 0;

    width: 2px;

    height: 1.5em;

    background: #aadafa;

    content: ''

}



.article-sort-item {

    position: relative;

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: box;

    display: flex;

    -webkit-box-align: center;

    -moz-box-align: center;

    -o-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    margin: 0 0 20px 10px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out

}



.article-sort-item:hover:before {

    border-color: var(--pseudo-hover)

}



.article-sort-item:before {

    position: absolute;

    left: calc(-20px - 17px);

    width: 6px;

    height: 6px;

    border: 3px solid #45677d;

    border-radius: 6px;

    background: var(--card-bg);

    content: '';

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out

}



.article-sort-item.no-article-cover {

    height: 80px

}



.article-sort-item.no-article-cover .article-sort-item-info {

    padding: 0

}



.article-sort-item.year {

    font-size: 1.43em

}



.article-sort-item.year:hover:before {

    border-color: #45677d

}



.article-sort-item.year:before {

    border-color: var(--pseudo-hover)

}



.article-sort-item-time {

    color: #858585;

    font-size: 95%

}



.article-sort-item-time time {

    padding-left: 6px;

    cursor: default

}



.article-sort-item-title {

    color: var(--font-color);

    font-size: 1.1em;

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -o-transition: all .3s;

    -ms-transition: all .3s;

    transition: all .3s;

    -webkit-line-clamp: 2

}



.article-sort-item-title:hover {

    color: #45677d;

    -webkit-transform: translateX(10px);

    -moz-transform: translateX(10px);

    -o-transform: translateX(10px);

    -ms-transform: translateX(10px);

    transform: translateX(10px)

}



.article-sort-item-img {

    overflow: hidden;

    width: 80px;

    height: 80px

}



.article-sort-item-info {

    -webkit-box-flex: 1;

    -moz-box-flex: 1;

    -o-box-flex: 1;

    box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

    padding: 0 16px

}



.category-lists .category-title {

    font-size: 2.57em

}



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

    .category-lists .category-title {

        font-size: 2em

    }

}



.category-lists .category-list {

    margin-bottom: 0

}



.category-lists .category-list a {

    color: var(--font-color)

}



.category-lists .category-list a:hover {

    color: #45677d

}



.category-lists .category-list .category-list-count {

    margin-left: 8px;

    color: #858585

}



.category-lists .category-list .category-list-count:before {

    content: '('

}



.category-lists .category-list .category-list-count:after {

    content: ')'

}



.category-lists ul {

    padding: 0 0 0 20px

}



.category-lists ul ul {

    padding-left: 4px

}



.category-lists ul li {

    position: relative;

    margin: 6px 0;

    padding: .12em .4em .12em 1.4em

}



#body-wrap {

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: box;

    display: flex;

    -webkit-box-orient: vertical;

    -moz-box-orient: vertical;

    -o-box-orient: vertical;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column;

    min-height: 100vh

}



.layout {

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: box;

    display: flex;

    -webkit-box-flex: 1;

    -moz-box-flex: 1;

    -o-box-flex: 1;

    box-flex: 1;

    -webkit-flex: 1 auto;

    -ms-flex: 1 auto;

    flex: 1 auto;

    margin: 0 auto;

    padding: 40px 15px;

    max-width: 1200px;

    width: 100%

}



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

    .layout {

        -webkit-box-orient: vertical;

        -moz-box-orient: vertical;

        -o-box-orient: vertical;

        -webkit-flex-direction: column;

        -ms-flex-direction: column;

        flex-direction: column

    }

}



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

    .layout {

        padding: 20px 5px

    }

}



@media screen and (min-width:2000px) {

    .layout {

        max-width: 1500px

    }

}



.layout>div:first-child:not(.recent-posts) {

    -webkit-align-self: flex-start;

    align-self: flex-start;

    -ms-flex-item-align: start;

    padding: 50px 40px

}



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

    .layout>div:first-child:not(.recent-posts) {

        padding: 36px 14px

    }

}



.layout>div:first-child {

    width: 74%;

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -o-transition: all .3s;

    -ms-transition: all .3s;

    transition: all .3s

}



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

    .layout>div:first-child {

        width: 100% !important

    }

}



.layout.hide-aside {

    max-width: 1000px

}



@media screen and (min-width:2000px) {

    .layout.hide-aside {

        max-width: 1300px

    }

}



.layout.hide-aside>div {

    width: 100% !important

}



.apple #page-header.full_page {

    background-attachment: scroll !important

}



.apple .avatar-img,

.apple .flink-item-icon,

.apple .recent-post-item {

    -webkit-transform: translateZ(0);

    -moz-transform: translateZ(0);

    -o-transform: translateZ(0);

    -ms-transform: translateZ(0);

    transform: translateZ(0)

}



#article-container .flink {

    margin-bottom: 20px

}



#article-container .flink .flink-list {

    overflow: auto;

    padding: 10px 10px 0;

    text-align: center

}



#article-container .flink .flink-list>.flink-list-item {

    position: relative;

    float: left;

    overflow: hidden;

    margin: 15px 7px;

    width: calc(100% / 3 - 15px);

    height: 90px;

    border-radius: 8px;

    line-height: 17px;

    -webkit-transform: translateZ(0)

}



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

    #article-container .flink .flink-list>.flink-list-item {

        width: calc(50% - 15px) !important

    }

}



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

    #article-container .flink .flink-list>.flink-list-item {

        width: calc(100% - 15px) !important

    }

}



#article-container .flink .flink-list>.flink-list-item:hover .flink-item-icon {

    margin-left: -10px;

    width: 0

}



#article-container .flink .flink-list>.flink-list-item:before {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: -1;

    background: var(--text-bg-hover);

    content: '';

    -webkit-transition: -webkit-transform .3s ease-out;

    -moz-transition: -moz-transform .3s ease-out;

    -o-transition: -o-transform .3s ease-out;

    -ms-transition: -ms-transform .3s ease-out;

    transition: transform .3s ease-out;

    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    -o-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0)

}



#article-container .flink .flink-list>.flink-list-item:active:before,

#article-container .flink .flink-list>.flink-list-item:focus:before,

#article-container .flink .flink-list>.flink-list-item:hover:before {

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -o-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1)

}



#article-container .flink .flink-list>.flink-list-item a {

    color: var(--font-color);

    text-decoration: none

}



#article-container .flink .flink-list>.flink-list-item a .flink-item-icon {

    float: left;

    overflow: hidden;

    margin: 15px 10px;

    width: 60px;

    height: 60px;

    border-radius: 35px;

    -webkit-transition: width .3s ease-out;

    -moz-transition: width .3s ease-out;

    -o-transition: width .3s ease-out;

    -ms-transition: width .3s ease-out;

    transition: width .3s ease-out

}



#article-container .flink .flink-list>.flink-list-item a .flink-item-icon img {

    width: 100%;

    height: 100%;

    -webkit-transition: filter 375ms ease-in .2s, -webkit-transform .3s;

    -moz-transition: filter 375ms ease-in .2s, -moz-transform .3s;

    -o-transition: filter 375ms ease-in .2s, -o-transform .3s;

    -ms-transition: filter 375ms ease-in .2s, -ms-transform .3s;

    transition: filter 375ms ease-in .2s, transform .3s;

    object-fit: cover

}



#article-container .flink .flink-list>.flink-list-item a .img-alt {

    display: none

}



#article-container .flink .flink-item-name {

    padding: 16px 10px 0 0;

    height: 40px;

    font-weight: 700;

    font-size: 1.43em

}



#article-container .flink .flink-item-desc {

    padding: 16px 10px 16px 0;

    height: 50px;

    font-size: .93em

}



#article-container .flink .flink-name {

    margin-bottom: 5px;

    font-weight: 700;

    font-size: 1.5em

}



#recent-posts>.recent-post-item:not(:first-child) {

    margin-top: 20px

}



#recent-posts>.recent-post-item {

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: box;

    display: flex;

    -webkit-box-orient: horizontal;

    -moz-box-orient: horizontal;

    -o-box-orient: horizontal;

    -webkit-flex-direction: row;

    -ms-flex-direction: row;

    flex-direction: row;

    -webkit-box-align: center;

    -moz-box-align: center;

    -o-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    overflow: hidden;

    height: 18em

}



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

    #recent-posts>.recent-post-item {

        -webkit-box-orient: vertical;

        -moz-box-orient: vertical;

        -o-box-orient: vertical;

        -webkit-flex-direction: column;

        -ms-flex-direction: column;

        flex-direction: column;

        height: auto

    }

}



#recent-posts>.recent-post-item:hover img.post-bg {

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -o-transform: scale(1.1);

    -ms-transform: scale(1.1);

    transform: scale(1.1)

}



#recent-posts>.recent-post-item.ads-wrap {

    display: block !important;

    height: auto !important

}



#recent-posts>.recent-post-item .post_cover {

    overflow: hidden;

    width: 44%;

    height: 100%

}



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

    #recent-posts>.recent-post-item .post_cover {

        width: 100%;

        height: 230px

    }

}



#recent-posts>.recent-post-item .post_cover.right {

    -webkit-box-ordinal-group: 1;

    -moz-box-ordinal-group: 1;

    -o-box-ordinal-group: 1;

    -ms-flex-order: 1;

    -webkit-order: 1;

    order: 1

}



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

    #recent-posts>.recent-post-item .post_cover.right {

        -webkit-box-ordinal-group: 0;

        -moz-box-ordinal-group: 0;

        -o-box-ordinal-group: 0;

        -ms-flex-order: 0;

        -webkit-order: 0;

        order: 0

    }

}



#recent-posts>.recent-post-item>.recent-post-info {

    padding: 0 40px;

    width: 57%

}



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

    #recent-posts>.recent-post-item>.recent-post-info {

        padding: 20px 20px 30px;

        width: 100%

    }

}



#recent-posts>.recent-post-item>.recent-post-info.no-cover {

    width: 100%

}



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

    #recent-posts>.recent-post-item>.recent-post-info.no-cover {

        padding: 30px 20px

    }

}



#recent-posts>.recent-post-item>.recent-post-info>.article-title {

    color: var(--text-highlight-color);

    font-size: 1.72em;

    line-height: 1.4;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    -webkit-line-clamp: 2

}



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

    #recent-posts>.recent-post-item>.recent-post-info>.article-title {

        font-size: 1.43em

    }

}



#recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {

    color: #45677d

}



#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {

    margin: 6px 0;

    color: #858585;

    font-size: 90%

}



#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap>.post-meta-date {

    cursor: default

}



#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap .sticky {

    color: #ff7242

}



#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap i {

    margin: 0 4px 0 0

}



#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap .fa-spinner {

    margin: 0

}



#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap .article-meta-label {

    padding-right: 4px

}



#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap .article-meta-separator {

    margin: 0 6px

}



#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap .article-meta-link {

    margin: 0 4px

}



#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap time {

    display: none

}



#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap a {

    color: #858585

}



#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap a:hover {

    color: #45677d;

    text-decoration: underline

}



#recent-posts>.recent-post-item>.recent-post-info>.content {

    -webkit-line-clamp: 2

}



.tag-cloud-list a {

    display: inline-block;

    padding: 0 8px;

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -o-transition: all .3s;

    -ms-transition: all .3s;

    transition: all .3s

}



.tag-cloud-list a:hover {

    color: #45677d !important;

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -o-transform: scale(1.1);

    -ms-transform: scale(1.1);

    transform: scale(1.1)

}



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

    .tag-cloud-list a {

        zoom: .85

    }

}



.tag-cloud-title {

    font-size: 2.57em

}



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

    .tag-cloud-title {

        font-size: 2em

    }

}



h1.page-title+.tag-cloud-list {

    text-align: left

}



#aside-content {

    width: 26%

}



@media screen and (min-width:900px) {

    #aside-content {

        padding-left: 15px

    }

}



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

    #aside-content {

        width: 100%

    }

}



#aside-content>.card-widget:first-child {

    margin-top: 0

}



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

    #aside-content>.card-widget:first-child {

        margin-top: 20px

    }

}



#aside-content .card-widget {

    position: relative;

    overflow: hidden;

    margin-top: 20px;

    padding: 20px 24px

}



#aside-content .card-info .author-info__name {

    font-weight: 500;

    font-size: 1.57em

}



#aside-content .card-info .author-info__description {

    margin-top: -.42em

}



#aside-content .card-info .card-info-data {

    margin: 14px 0 4px

}



#aside-content .card-info .card-info-social-icons {

    margin: 6px 0 -6px

}



#aside-content .card-info .card-info-social-icons .social-icon {

    margin: 0 10px;

    color: var(--font-color);

    font-size: 1.4em

}



#aside-content .card-info .card-info-social-icons i {

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -o-transition: all .3s;

    -ms-transition: all .3s;

    transition: all .3s

}



#aside-content .card-info .card-info-social-icons i:hover {

    -webkit-transform: rotate(540deg);

    -moz-transform: rotate(540deg);

    -o-transform: rotate(540deg);

    -ms-transform: rotate(540deg);

    transform: rotate(540deg)

}



#aside-content .card-info #card-info-btn {

    display: block;

    margin-top: 14px;

    background-color: var(--btn-bg);

    color: var(--btn-color);

    text-align: center;

    line-height: 2.4

}



#aside-content .card-info #card-info-btn:hover {

    background-color: var(--btn-hover-color)

}



#aside-content .card-info #card-info-btn span {

    padding-left: 10px

}



#aside-content .item-headline {

    padding-bottom: 6px;

    font-size: 1.2em

}



#aside-content .item-headline span {

    margin-left: 6px

}



@media screen and (min-width:900px) {

    #aside-content .sticky_layout {

        position: sticky;

        position: -webkit-sticky;

        top: 20px;

        -webkit-transition: top .3s;

        -moz-transition: top .3s;

        -o-transition: top .3s;

        -ms-transition: top .3s;

        transition: top .3s

    }

}



#aside-content .card-tag-cloud a {

    display: inline-block;

    padding: 0 4px

}



#aside-content .card-tag-cloud a:hover {

    color: #45677d !important

}



#aside-content .aside-list>span {

    display: block;

    margin-bottom: 10px;

    text-align: center

}



#aside-content .aside-list>.aside-list-item {

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: box;

    display: flex;

    -webkit-box-align: center;

    -moz-box-align: center;

    -o-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    padding: 6px 0

}



#aside-content .aside-list>.aside-list-item:first-child {

    padding-top: 0

}



#aside-content .aside-list>.aside-list-item:not(:last-child) {

    border-bottom: 1px dashed #f5f5f5

}



#aside-content .aside-list>.aside-list-item:last-child {

    padding-bottom: 0

}



#aside-content .aside-list>.aside-list-item .thumbnail {

    overflow: hidden;

    width: 4.2em;

    height: 4.2em

}



#aside-content .aside-list>.aside-list-item .content {

    -webkit-box-flex: 1;

    -moz-box-flex: 1;

    -o-box-flex: 1;

    box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

    padding-left: 10px;

    word-break: break-all

}



#aside-content .aside-list>.aside-list-item .content>.name {

    -webkit-line-clamp: 1

}



#aside-content .aside-list>.aside-list-item .content>.name,

#aside-content .aside-list>.aside-list-item .content>time {

    display: block;

    color: #858585;

    font-size: 85%

}



#aside-content .aside-list>.aside-list-item .content>.comment,

#aside-content .aside-list>.aside-list-item .content>.title {

    color: var(--font-color);

    font-size: 95%;

    line-height: 1.5;

    -webkit-line-clamp: 2

}



#aside-content .aside-list>.aside-list-item .content>.comment:hover,

#aside-content .aside-list>.aside-list-item .content>.title:hover {

    color: #45677d

}



#aside-content .aside-list>.aside-list-item.no-cover {

    min-height: 4.4em

}



#aside-content .card-archives ul.card-archive-list,

#aside-content .card-categories ul.card-category-list {

    margin: 0;

    padding: 0;

    list-style: none

}



#aside-content .card-archives ul.card-archive-list>.card-archive-list-item a,

#aside-content .card-categories ul.card-category-list>.card-category-list-item a {

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: box;

    display: flex;

    -webkit-box-orient: horizontal;

    -moz-box-orient: horizontal;

    -o-box-orient: horizontal;

    -webkit-flex-direction: row;

    -ms-flex-direction: row;

    flex-direction: row;

    padding: 3px 10px;

    color: var(--font-color);

    -webkit-transition: all .4s;

    -moz-transition: all .4s;

    -o-transition: all .4s;

    -ms-transition: all .4s;

    transition: all .4s

}



#aside-content .card-archives ul.card-archive-list>.card-archive-list-item a:hover,

#aside-content .card-categories ul.card-category-list>.card-category-list-item a:hover {

    padding: 3px 17px;

    background-color: var(--text-bg-hover)

}



#aside-content .card-archives ul.card-archive-list>.card-archive-list-item a span:first-child,

#aside-content .card-categories ul.card-category-list>.card-category-list-item a span:first-child {

    -webkit-box-flex: 1;

    -moz-box-flex: 1;

    -o-box-flex: 1;

    box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1

}



#aside-content .card-categories .card-category-list.child {

    padding: 0 0 0 16px

}



#aside-content .card-categories .card-category-list>.parent>a .card-category-list-name {

    width: 70% !important

}



#aside-content .card-categories .card-category-list>.parent>a .card-category-list-count {

    width: calc(100% - 70% - 20px);

    text-align: right

}



#aside-content .card-categories .card-category-list>.parent i {

    float: right;

    margin-right: -.5em;

    padding: .5em;

    -webkit-transition: -webkit-transform .3s;

    -moz-transition: -moz-transform .3s;

    -o-transition: -o-transform .3s;

    -ms-transition: -ms-transform .3s;

    transition: transform .3s;

    -webkit-transform: rotate(0);

    -moz-transform: rotate(0);

    -o-transform: rotate(0);

    -ms-transform: rotate(0);

    transform: rotate(0)

}



#aside-content .card-categories .card-category-list>.parent i.expand {

    -webkit-transform: rotate(-90deg);

    -moz-transform: rotate(-90deg);

    -o-transform: rotate(-90deg);

    -ms-transform: rotate(-90deg);

    transform: rotate(-90deg)

}



#aside-content .card-categories .card-category-list>.parent>.child {

    display: none

}



#aside-content .card-webinfo .webinfo .webinfo-item {

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: box;

    display: flex;

    -webkit-box-align: center;

    -moz-box-align: center;

    -o-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    padding: 2px 10px 0

}



#aside-content .card-webinfo .webinfo .webinfo-item div:first-child {

    -webkit-box-flex: 1;

    -moz-box-flex: 1;

    -o-box-flex: 1;

    box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

    padding-right: 20px

}



@media screen and (min-width:901px) {

    #aside-content #card-toc {

        right: 0 !important

    }

}



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

    #aside-content #card-toc {

        position: fixed;

        right: -100%;

        bottom: 30px;

        z-index: 100;

        max-width: 380px;

        max-height: calc(100% - 60px);

        width: calc(100% - 80px);

        opacity: 0;

        -webkit-transition: initial;

        -moz-transition: initial;

        -o-transition: initial;

        -ms-transition: initial;

        transition: initial;

        -webkit-transform-origin: right bottom;

        -moz-transform-origin: right bottom;

        -o-transform-origin: right bottom;

        -ms-transform-origin: right bottom;

        transform-origin: right bottom

    }

}



#aside-content #card-toc .toc-percentage {

    float: right;

    margin-top: -9px;

    color: #a9a9a9;

    font-style: italic;

    font-size: 140%

}



#aside-content #card-toc .toc-content {

    overflow-y: scroll;

    overflow-y: overlay;

    margin: 0 -24px;

    max-height: calc(100vh - 120px)

}



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

    #aside-content #card-toc .toc-content {

        max-height: calc(100vh - 140px)

    }

}



#aside-content #card-toc .toc-content>* {

    margin: 0 20px !important

}



#aside-content #card-toc .toc-content>*>.toc-item>.toc-child {

    margin-left: 10px;

    padding-left: 10px;

    border-left: 1px solid var(--dark-grey)

}



#aside-content #card-toc .toc-content:not(.is-expand) .toc-child {

    display: none

}



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

    #aside-content #card-toc .toc-content:not(.is-expand) .toc-child {

        display: block !important

    }

}



#aside-content #card-toc .toc-content:not(.is-expand) .toc-item.active .toc-child {

    display: block

}



#aside-content #card-toc .toc-content li,

#aside-content #card-toc .toc-content ol {

    list-style: none

}



#aside-content #card-toc .toc-content>ol {

    padding: 0 !important

}



#aside-content #card-toc .toc-content ol {

    margin: 0;

    padding-left: 18px

}



#aside-content #card-toc .toc-content .toc-link {

    display: block;

    margin: 4px 0;

    padding: 1px 6px;

    color: var(--toc-link-color);

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out

}



#aside-content #card-toc .toc-content .toc-link:hover {

    color: #45677d

}



#aside-content #card-toc .toc-content .toc-link.active {

    background: #00c4b6;

    color: #fff

}



#aside-content :only-child>.card-widget {

    margin-top: 0

}



#aside-content .card-more-btn {

    float: right;

    color: inherit

}



#aside-content .card-more-btn:hover {

    -webkit-animation: more-btn-move 1s infinite;

    -moz-animation: more-btn-move 1s infinite;

    -o-animation: more-btn-move 1s infinite;

    -ms-animation: more-btn-move 1s infinite;

    animation: more-btn-move 1s infinite

}



#aside-content .card-announcement .item-headline i {

    color: red

}



.avatar-img {

    overflow: hidden;

    margin: 0 auto;

    width: 110px;

    height: 110px;

    border-radius: 70px

}



.avatar-img img {

    width: 100%;

    height: 100%;

    -webkit-transition: filter 375ms ease-in .2s, -webkit-transform .3s;

    -moz-transition: filter 375ms ease-in .2s, -moz-transform .3s;

    -o-transition: filter 375ms ease-in .2s, -o-transform .3s;

    -ms-transition: filter 375ms ease-in .2s, -ms-transform .3s;

    transition: filter 375ms ease-in .2s, transform .3s;

    object-fit: cover

}



.avatar-img img:hover {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    transform: rotate(360deg)

}



.site-data {

    display: table;

    width: 100%;

    table-layout: fixed

}



.site-data>a {

    display: table-cell

}



.site-data>a div {

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -o-transition: all .3s;

    -ms-transition: all .3s;

    transition: all .3s

}



.site-data>a:hover div {

    color: #45677d !important

}



.site-data>a .headline {

    color: var(--font-color)

}



.site-data>a .length-num {

    margin-top: -.32em;

    color: var(--text-highlight-color);

    font-size: 1.4em

}



@media screen and (min-width:900px) {

    html.hide-aside .layout {

        -webkit-box-pack: center;

        -moz-box-pack: center;

        -o-box-pack: center;

        -ms-flex-pack: center;

        -webkit-justify-content: center;

        justify-content: center

    }



    html.hide-aside .layout>.aside-content {

        display: none

    }



    html.hide-aside .layout>div:first-child {

        width: 80%

    }

}



.page .sticky_layout {

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: box;

    display: flex;

    -webkit-box-orient: vertical;

    -moz-box-orient: vertical;

    -o-box-orient: vertical;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column

}



@-moz-keyframes more-btn-move {



    0%,

    100% {

        -webkit-transform: translateX(0);

        -moz-transform: translateX(0);

        -o-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }



    50% {

        -webkit-transform: translateX(3px);

        -moz-transform: translateX(3px);

        -o-transform: translateX(3px);

        -ms-transform: translateX(3px);

        transform: translateX(3px)

    }

}



@-webkit-keyframes more-btn-move {



    0%,

    100% {

        -webkit-transform: translateX(0);

        -moz-transform: translateX(0);

        -o-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }



    50% {

        -webkit-transform: translateX(3px);

        -moz-transform: translateX(3px);

        -o-transform: translateX(3px);

        -ms-transform: translateX(3px);

        transform: translateX(3px)

    }

}



@-o-keyframes more-btn-move {



    0%,

    100% {

        -webkit-transform: translateX(0);

        -moz-transform: translateX(0);

        -o-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }



    50% {

        -webkit-transform: translateX(3px);

        -moz-transform: translateX(3px);

        -o-transform: translateX(3px);

        -ms-transform: translateX(3px);

        transform: translateX(3px)

    }

}



@keyframes more-btn-move {



    0%,

    100% {

        -webkit-transform: translateX(0);

        -moz-transform: translateX(0);

        -o-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }



    50% {

        -webkit-transform: translateX(3px);

        -moz-transform: translateX(3px);

        -o-transform: translateX(3px);

        -ms-transform: translateX(3px);

        transform: translateX(3px)

    }

}



@-moz-keyframes toc-open {

    0% {

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }



    100% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }

}



@-webkit-keyframes toc-open {

    0% {

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }



    100% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }

}



@-o-keyframes toc-open {

    0% {

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }



    100% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }

}



@keyframes toc-open {

    0% {

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }



    100% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }

}



@-moz-keyframes toc-close {

    0% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }



    100% {

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }

}



@-webkit-keyframes toc-close {

    0% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }



    100% {

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }

}



@-o-keyframes toc-close {

    0% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }



    100% {

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }

}



@keyframes toc-close {

    0% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -o-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1)

    }



    100% {

        -webkit-transform: scale(.7);

        -moz-transform: scale(.7);

        -o-transform: scale(.7);

        -ms-transform: scale(.7);

        transform: scale(.7)

    }

}



#post-comment .comment-head {

    margin-bottom: 20px

}



#post-comment .comment-head .comment-headline {

    display: inline-block;

    vertical-align: middle;

    font-weight: 700;

    font-size: 1.43em

}



#post-comment .comment-head #comment-switch {

    display: inline-block;

    float: right;

    margin: 2px auto 0;

    padding: 4px 16px;

    width: max-content;

    border-radius: 8px;

    background: #f6f8fa

}



#post-comment .comment-head #comment-switch .first-comment {

    color: #45677d

}



#post-comment .comment-head #comment-switch .second-comment {

    color: #ff7242

}



#post-comment .comment-head #comment-switch .switch-btn {

    position: relative;

    display: inline-block;

    margin: -4px 8px 0;

    width: 42px;

    height: 22px;

    border-radius: 34px;

    background-color: #45677d;

    vertical-align: middle;

    cursor: pointer;

    -webkit-transition: .4s;

    -moz-transition: .4s;

    -o-transition: .4s;

    -ms-transition: .4s;

    transition: .4s

}



#post-comment .comment-head #comment-switch .switch-btn:before {

    position: absolute;

    bottom: 4px;

    left: 4px;

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background-color: #fff;

    content: '';

    -webkit-transition: .4s;

    -moz-transition: .4s;

    -o-transition: .4s;

    -ms-transition: .4s;

    transition: .4s

}



#post-comment .comment-head #comment-switch .switch-btn.move {

    background-color: #ff7242

}



#post-comment .comment-head #comment-switch .switch-btn.move:before {

    -webkit-transform: translateX(20px);

    -moz-transform: translateX(20px);

    -o-transform: translateX(20px);

    -ms-transform: translateX(20px);

    transform: translateX(20px)

}



#post-comment .comment-wrap>div:nth-child(2) {

    display: none

}



#footer {

    position: relative;

    background-color: #45677d;

    background-attachment: scroll;

    background-position: bottom;

    background-size: cover

}



#footer:before {

    position: absolute;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, .5);

    content: ''

}



#footer-wrap {

    position: relative;

    padding: 40px 20px;

    color: var(--light-grey);

    text-align: center

}



#footer-wrap a {

    color: var(--light-grey)

}



#footer-wrap a:hover {

    text-decoration: underline

}



#footer-wrap .footer-separator {

    margin: 0 4px

}



#footer-wrap .icp-icon {

    padding: 0 4px;

    max-height: 1.4em;

    width: auto;

    vertical-align: text-bottom

}



#page-header {

    position: relative;

    width: 100%;

    background-color: #45677d;

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    -o-transition: all .5s;

    -ms-transition: all .5s;

    transition: all .5s

}



#page-header:not(.not-top-img):before {

    position: absolute;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, .3);

    content: ''

}



#page-header.full_page {

    height: 100vh;

    background-attachment: fixed

}



#page-header.full_page #site-info {

    position: absolute;

    top: 43%;

    padding: 0 10px;

    width: 100%

}



#page-header #scroll-down .scroll-down-effects,

#page-header #site-subtitle,

#page-header #site-title {

    text-align: center;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, .15);

    line-height: 1.5

}



#page-header #site-title {

    margin: 0;

    color: var(--white);

    font-size: 1.85em

}



@media screen and (min-width:768px) {

    #page-header #site-title {

        font-size: 2.85em

    }

}



#page-header #site-subtitle {

    color: var(--light-grey);

    font-size: 1.15em

}



@media screen and (min-width:768px) {

    #page-header #site-subtitle {

        font-size: 1.72em

    }

}



#page-header #site_social_icons {

    display: none;

    margin: 0 auto;

    width: 300px;

    text-align: center

}



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

    #page-header #site_social_icons {

        display: block

    }

}



#page-header #site_social_icons .social-icon {

    margin: 0 10px;

    color: var(--light-grey);

    text-shadow: 2px 2px 4px rgba(0, 0, 0, .15);

    font-size: 1.43em

}



#page-header #scroll-down {

    position: absolute;

    bottom: 0;

    width: 100%;

    cursor: pointer

}



#page-header #scroll-down .scroll-down-effects {

    position: relative;

    width: 100%;

    color: var(--light-grey);

    font-size: 30px

}



#page-header.not-home-page {

    height: 400px

}



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

    #page-header.not-home-page {

        height: 280px

    }

}



#page-header #page-site-info {

    position: absolute;

    top: 200px;

    padding: 0 10px;

    width: 100%

}



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

    #page-header #page-site-info {

        top: 140px

    }

}



#page-header.post-bg {

    height: 400px

}



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

    #page-header.post-bg {

        height: 360px

    }

}



#page-header.post-bg:before {

    background-color: rgba(0, 0, 0, .5)

}



#page-header #post-info {

    position: absolute;

    bottom: 100px;

    padding: 0 8%;

    width: 100%;

    text-align: center

}



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

    #page-header #post-info {

        bottom: 30px;

        text-align: left

    }

}



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

    #page-header #post-info {

        bottom: 22px;

        padding: 0 22px

    }

}



#page-header.not-top-img {

    margin-bottom: 10px;

    height: 60px;

    background: 0

}



#page-header.not-top-img #nav {

    background: rgba(255, 255, 255, .8);

    -webkit-box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6);

    box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)

}



#page-header.not-top-img #nav a {

    color: var(--font-color);

    text-shadow: none

}



#page-header.nav-fixed #nav {

    position: fixed;

    top: -60px;

    z-index: 91;

    background: rgba(255, 255, 255, .8);

    -webkit-box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6);

    box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6);

    -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;

    -moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;

    -o-transition: -o-transform .2s ease-in-out, opacity .2s ease-in-out;

    -ms-transition: -ms-transform .2s ease-in-out, opacity .2s ease-in-out;

    transition: transform .2s ease-in-out, opacity .2s ease-in-out

}



#page-header.nav-fixed #nav.fixed {

    top: 0;

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    -o-transition: all .5s;

    -ms-transition: all .5s;

    transition: all .5s

}



#page-header.nav-fixed #nav #blog-info {

    color: var(--font-color)

}



#page-header.nav-fixed #nav #blog-info:hover {

    color: #45677d

}



#page-header.nav-fixed #nav #blog-info .site-name {

    text-shadow: none

}



#page-header.nav-fixed #nav #toggle-menu,

#page-header.nav-fixed #nav a {

    color: var(--font-color);

    text-shadow: none

}



#page-header.nav-fixed #nav #toggle-menu:hover,

#page-header.nav-fixed #nav a:hover {

    color: #45677d

}



#page-header.nav-visible #nav:not(.fixed) {

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    -o-transition: all .5s;

    -ms-transition: all .5s;

    transition: all .5s;

    -webkit-transform: translate3d(0, 100%, 0);

    -moz-transform: translate3d(0, 100%, 0);

    -o-transform: translate3d(0, 100%, 0);

    -ms-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0)

}



#page-header.nav-visible+.layout>.aside-content>.sticky_layout {

    top: 70px;

    -webkit-transition: top .5s;

    -moz-transition: top .5s;

    -o-transition: top .5s;

    -ms-transition: top .5s;

    transition: top .5s

}



#page h1.page-title {

    margin: 8px 0 20px

}



#post>#post-info {

    margin-bottom: 30px

}



#post>#post-info .post-title {

    padding-bottom: 4px;

    border-bottom: 1px solid var(--light-grey);

    color: var(--text-highlight-color)

}



#post>#post-info .post-title .post-edit-link {

    float: right

}



#post>#post-info #post-meta,

#post>#post-info #post-meta a {

    color: #78818a

}



#post-info .post-title {

    margin-bottom: 8px;

    color: var(--white);

    font-weight: 400;

    font-size: 2.5em;

    line-height: 1.5;

    -webkit-line-clamp: 3

}



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

    #post-info .post-title {

        font-size: 2.1em

    }

}



#post-info .post-title .post-edit-link {

    padding-left: 10px

}



#post-info #post-meta {

    color: var(--light-grey);

    font-size: 95%

}



@media screen and (min-width:768px) {

    #post-info #post-meta>.meta-secondline>span:first-child {

        display: none

    }

}



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

    #post-info #post-meta {

        font-size: 90%

    }



    #post-info #post-meta>.meta-firstline,

    #post-info #post-meta>.meta-secondline {

        display: inline

    }

}



#post-info #post-meta .post-meta-separator {

    margin: 0 5px

}



#post-info #post-meta .post-meta-icon {

    margin-right: 4px

}



#post-info #post-meta .post-meta-label {

    margin-right: 4px

}



#post-info #post-meta a {

    color: var(--light-grey);

    -webkit-transition: all .3s ease-out;

    -moz-transition: all .3s ease-out;

    -o-transition: all .3s ease-out;

    -ms-transition: all .3s ease-out;

    transition: all .3s ease-out

}



#post-info #post-meta a:hover {

    color: #45677d;

    text-decoration: underline

}



#post-info #post-meta time {

    display: none

}



#nav {

    position: absolute;

    top: 0;

    z-index: 90;

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: box;

    display: flex;

    -webkit-box-align: center;

    -moz-box-align: center;

    -o-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    padding: 0 36px;

    width: 100%;

    height: 60px;

    font-size: 1.3em;

    opacity: 0;

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    -o-transition: all .5s;

    -ms-transition: all .5s;

    transition: all .5s

}



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

    #nav {

        padding: 0 16px

    }

}



#nav.show {

    opacity: 1;

    -ms-filter: none;

    filter: none

}



#nav.fixed {

    position: fixed

}



#nav #blog-info {

    -webkit-box-flex: 1;

    -moz-box-flex: 1;

    -o-box-flex: 1;

    box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

    color: var(--light-grey)

}



#nav #blog-info .site-icon {

    margin-right: 6px;

    height: 36px;

    vertical-align: middle

}



#nav #toggle-menu {

    display: none;

    padding: 2px 0 0 6px;

    vertical-align: top

}



#nav #toggle-menu:hover {

    color: var(--white)

}



#nav a {

    color: var(--light-grey)

}



#nav a:hover {

    color: var(--white)

}



#nav .site-name {

    text-shadow: 2px 2px 4px rgba(0, 0, 0, .15);

    font-weight: 700

}



#nav .menus_items {

    display: inline

}



#nav .menus_items .menus_item {

    position: relative;

    display: inline-block;

    padding: 0 0 0 14px

}



#nav .menus_items .menus_item:hover .menus_item_child {

    display: block

}



#nav .menus_items .menus_item:hover>a>i:last-child {

    -webkit-transform: rotate(180deg);

    -moz-transform: rotate(180deg);

    -o-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    transform: rotate(180deg)

}



#nav .menus_items .menus_item>a>i:last-child {

    padding: 4px;

    -webkit-transition: -webkit-transform .3s;

    -moz-transition: -moz-transform .3s;

    -o-transition: -o-transform .3s;

    -ms-transition: -ms-transform .3s;

    transition: transform .3s

}



#nav .menus_items .menus_item .menus_item_child {

    position: absolute;

    right: 0;

    display: none;

    margin-top: 8px;

    padding: 0;

    width: max-content;

    border-radius: 5px;

    background-color: var(--sidebar-bg);

    -webkit-box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5);

    box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5);

    -webkit-animation: sub_menus .3s .1s ease both;

    -moz-animation: sub_menus .3s .1s ease both;

    -o-animation: sub_menus .3s .1s ease both;

    -ms-animation: sub_menus .3s .1s ease both;

    animation: sub_menus .3s .1s ease both

}



#nav .menus_items .menus_item .menus_item_child:before {

    position: absolute;

    top: -8px;

    left: 0;

    width: 100%;

    height: 20px;

    content: ''

}



#nav .menus_items .menus_item .menus_item_child li {

    list-style: none

}



#nav .menus_items .menus_item .menus_item_child li:hover {

    background: var(--text-bg-hover)

}



#nav .menus_items .menus_item .menus_item_child li:first-child {

    border-top-left-radius: 5px;

    border-top-right-radius: 5px

}



#nav .menus_items .menus_item .menus_item_child li:last-child {

    border-bottom-right-radius: 5px;

    border-bottom-left-radius: 5px

}



#nav .menus_items .menus_item .menus_item_child li a {

    display: inline-block;

    padding: 8px 16px;

    width: 100%;

    color: var(--font-color) !important;

    text-shadow: none !important

}



#nav.hide-menu #toggle-menu {

    display: inline-block !important

}



#nav.hide-menu #toggle-menu .site-page {

    font-size: inherit

}



#nav.hide-menu .menus_items {

    display: none

}



#nav.hide-menu #search-button span {

    display: none

}



#nav #search-button {

    display: inline;

    padding: 0 0 0 14px

}



#nav .site-page {

    position: relative;

    padding-bottom: 6px;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);

    font-size: .78em;

    cursor: pointer

}



#nav .site-page:not(.child):after {

    position: absolute;

    bottom: 0;

    left: 0;

    z-index: -1;

    width: 0;

    height: 3px;

    background-color: #80c8f8;

    content: '';

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    -ms-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out

}



#nav .site-page:not(.child):hover:after {

    width: 100%

}



#pagination .pagination {

    margin-top: 20px;

    text-align: center

}



#pagination .page-number.current {

    background: #00c4b6;

    color: var(--white)

}



#pagination .pagination-info {

    position: absolute;

    top: 50%;

    padding: 20px 40px;

    width: 100%;

    -webkit-transform: translate(0, -50%);

    -moz-transform: translate(0, -50%);

    -o-transform: translate(0, -50%);

    -ms-transform: translate(0, -50%);

    transform: translate(0, -50%)

}



#pagination .next_info,

#pagination .prev_info {

    color: var(--white);

    font-weight: 500

}



#pagination .next-post .pagination-info {

    text-align: right

}



#pagination .pull-full {

    width: 100% !important

}



#pagination .next-post .label,

#pagination .prev-post .label {

    color: var(--light-grey);

    text-transform: uppercase;

    font-size: 90%

}



#pagination .next-post,

#pagination .prev-post {

    width: 50%

}



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



    #pagination .next-post,

    #pagination .prev-post {

        width: 100%

    }

}



#pagination .next-post a,

#pagination .prev-post a {

    position: relative;

    display: block;

    overflow: hidden;

    height: 150px

}



#pagination.pagination-post {

    overflow: hidden;

    margin-top: 40px;

    width: 100%;

    background: #000

}



.layout>.recent-posts .pagination>* {

    display: inline-block;

    margin: 0 6px;

    width: 2.5em;

    height: 2.5em;

    line-height: 2.5em

}



.layout>.recent-posts .pagination>:not(.space):hover {

    background: var(--btn-hover-color);

    color: var(--btn-color)

}



.layout>div:not(.recent-posts) .pagination .page-number {

    display: inline-block;

    margin: 0 4px;

    min-width: 24px;

    height: 24px;

    text-align: center;

    line-height: 24px;

    cursor: pointer

}



#article-container {

    word-wrap: break-word;

    overflow-wrap: break-word

}



#article-container a {

    color: #45677d

}



#article-container a:hover {

    text-decoration: underline

}



#article-container img {

    display: block;

    margin: 0 auto 20px;

    max-width: 100%;

    -webkit-transition: filter 375ms ease-in .2s;

    -moz-transition: filter 375ms ease-in .2s;

    -o-transition: filter 375ms ease-in .2s;

    -ms-transition: filter 375ms ease-in .2s;

    transition: filter 375ms ease-in .2s

}



#article-container p {

    margin: 0 0 16px

}



#article-container iframe {

    margin: 0 0 20px

}



#article-container kbd {

    margin: 0 3px;

    padding: 3px 5px;

    border: 1px solid #b4b4b4;

    border-radius: 3px;

    background-color: #f8f8f8;

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 2px 1px 0 rgba(255, 255, 255, .6) inset;

    box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 2px 1px 0 rgba(255, 255, 255, .6) inset;

    color: #34495e;

    white-space: nowrap;

    font-weight: 600;

    font-size: .9em;

    font-family: Monaco, 'Ubuntu Mono', monospace;

    line-height: 1em

}



#article-container a.headerlink:after {

    float: right;

    color: var(--headline-presudo);

    content: '\f0c1';

    font-size: .95em;

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -o-transition: all .3s;

    -ms-transition: all .3s;

    transition: all .3s

}



#article-container a.headerlink:hover:after {

    color: var(--pseudo-hover)

}



#article-container a.headerlink:after {

    opacity: 0

}



#article-container h1:hover a.headerlink:after,

#article-container h2:hover a.headerlink:after,

#article-container h3:hover a.headerlink:after,

#article-container h4:hover a.headerlink:after,

#article-container h5:hover a.headerlink:after,

#article-container h6:hover a.headerlink:after {

    opacity: 1;

    -ms-filter: none;

    filter: none

}



#article-container ol ol,

#article-container ol ul,

#article-container ul ol,

#article-container ul ul {

    padding-left: 20px

}



#article-container ol li,

#article-container ul li {

    margin: 4px 0

}



#article-container ol p,

#article-container ul p {

    margin: 0 0 8px

}



#article-container.post-content h1,

#article-container.post-content h2,

#article-container.post-content h3,

#article-container.post-content h4,

#article-container.post-content h5,

#article-container.post-content h6 {

    -webkit-transition: all .2s ease-out;

    -moz-transition: all .2s ease-out;

    -o-transition: all .2s ease-out;

    -ms-transition: all .2s ease-out;

    transition: all .2s ease-out

}



#article-container.post-content h1:before,

#article-container.post-content h2:before,

#article-container.post-content h3:before,

#article-container.post-content h4:before,

#article-container.post-content h5:before,

#article-container.post-content h6:before {

    position: absolute;

    top: calc(50% - 7px);

    color: #f47466;

    content: '\f0c1';

    line-height: 1;

    -webkit-transition: all .2s ease-out;

    -moz-transition: all .2s ease-out;

    -o-transition: all .2s ease-out;

    -ms-transition: all .2s ease-out;

    transition: all .2s ease-out

}



#article-container.post-content h1:hover:before,

#article-container.post-content h2:hover:before,

#article-container.post-content h3:hover:before,

#article-container.post-content h4:hover:before,

#article-container.post-content h5:hover:before,

#article-container.post-content h6:hover:before {

    color: #45677d

}



#article-container.post-content h1 {

    padding-left: 32px

}



#article-container.post-content h1:before {

    margin-left: -26px;

    font-size: 20px

}



#article-container.post-content h1:hover {

    padding-left: 38px

}



#article-container.post-content h2 {

    padding-left: 30px

}



#article-container.post-content h2:before {

    margin-left: -24px;

    font-size: 18px

}



#article-container.post-content h2:hover {

    padding-left: 36px

}



#article-container.post-content h3 {

    padding-left: 28px

}



#article-container.post-content h3:before {

    margin-left: -22px;

    font-size: 16px

}



#article-container.post-content h3:hover {

    padding-left: 34px

}



#article-container.post-content h4 {

    padding-left: 26px

}



#article-container.post-content h4:before {

    margin-left: -20px;

    font-size: 14px

}



#article-container.post-content h4:hover {

    padding-left: 32px

}



#article-container.post-content h5 {

    padding-left: 24px

}



#article-container.post-content h5:before {

    margin-left: -18px;

    font-size: 12px

}



#article-container.post-content h5:hover {

    padding-left: 30px

}



#article-container.post-content h6 {

    padding-left: 24px

}



#article-container.post-content h6:before {

    margin-left: -18px;

    font-size: 12px

}



#article-container.post-content h6:hover {

    padding-left: 30px

}



#article-container.post-content ol p,

#article-container.post-content ul p {

    margin: 0 0 8px

}



#article-container.post-content li::marker {

    color: #45677d;

    font-weight: 600;

    font-size: 1.05em

}



#article-container.post-content li:hover::marker {

    color: var(--pseudo-hover)

}



#article-container.post-content ul>li {

    list-style-type: circle

}



#article-container>:last-child {

    margin-bottom: 0 !important

}



#post .tag_share:after {

    display: block;

    clear: both;

    content: ''

}



#post .tag_share .post-meta__tag-list {

    display: inline-block

}



#post .tag_share .post-meta__tags {

    display: inline-block;

    margin: 8px 8px 8px 0;

    padding: 0 12px;

    width: fit-content;

    border: 1px solid #45677d;

    border-radius: 12px;

    color: #45677d;

    font-size: .85em;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out

}



#post .tag_share .post-meta__tags:hover {

    background: #45677d;

    color: var(--white)

}



#post .tag_share .post_share {

    display: inline-block;

    float: right;

    margin: 8px 0 0;

    width: fit-content

}



#post .tag_share .post_share .social-share {

    font-size: .85em

}



#post .tag_share .post_share .social-share .social-share-icon {

    margin: 0 4px;

    width: 1.85em;

    height: 1.85em;

    font-size: 1.2em;

    line-height: 1.85em

}



#post .post-copyright {

    position: relative;

    margin: 40px 0 10px;

    padding: 10px 16px;

    border: 1px solid var(--light-grey);

    -webkit-transition: box-shadow .3s ease-in-out;

    -moz-transition: box-shadow .3s ease-in-out;

    -o-transition: box-shadow .3s ease-in-out;

    -ms-transition: box-shadow .3s ease-in-out;

    transition: box-shadow .3s ease-in-out

}



#post .post-copyright:before {

    position: absolute;

    top: 2px;

    right: 12px;

    color: #45677d;

    content: '\f1f9';

    font-size: 1.3em

}



#post .post-copyright:hover {

    -webkit-box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);

    box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

}



#post .post-copyright .post-copyright-meta {

    color: #45677d;

    font-weight: 700

}



#post .post-copyright .post-copyright-info {

    padding-left: 6px

}



#post .post-copyright .post-copyright-info a {

    text-decoration: underline;

    word-break: break-word

}



#post .post-copyright .post-copyright-info a:hover {

    text-decoration: none

}



#post .post-outdate-notice {

    position: relative;

    margin: 0 0 20px;

    padding: .5em 1.2em;

    border-radius: 3px;

    background-color: #ffe6e6;

    color: #f66;

    padding: .5em 1em .5em 2.6em;

    border-left: 5px solid #ff8080

}



#post .post-outdate-notice:before {

    position: absolute;

    top: 50%;

    left: .9em;

    color: #ff8080;

    content: '\f071';

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%)

}



#post .ads-wrap {

    margin: 40px 0

}



.relatedPosts {

    margin-top: 40px

}



.relatedPosts>.headline {

    margin-bottom: 5px;

    font-weight: 700;

    font-size: 1.43em

}



.relatedPosts>.relatedPosts-list>div {

    position: relative;

    display: inline-block;

    overflow: hidden;

    margin: 3px;

    width: calc(33.333% - 6px);

    height: 200px;

    background: #000;

    vertical-align: bottom

}



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

    .relatedPosts>.relatedPosts-list>div {

        margin: 2px;

        width: calc(50% - 4px);

        height: 150px

    }

}



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

    .relatedPosts>.relatedPosts-list>div {

        width: calc(100% - 4px)

    }

}



.relatedPosts>.relatedPosts-list .content {

    position: absolute;

    top: 50%;

    padding: 0 20px;

    width: 100%;

    -webkit-transform: translate(0, -50%);

    -moz-transform: translate(0, -50%);

    -o-transform: translate(0, -50%);

    -ms-transform: translate(0, -50%);

    transform: translate(0, -50%)

}



.relatedPosts>.relatedPosts-list .content .date {

    color: var(--light-grey);

    font-size: 90%

}



.relatedPosts>.relatedPosts-list .content .title {

    color: var(--white);

    -webkit-line-clamp: 2

}



.post-reward {

    position: relative;

    margin-top: 80px;

    width: 100%;

    text-align: center;

    pointer-events: none

}



.post-reward>* {

    pointer-events: auto

}



.post-reward .reward-button {

    display: inline-block;

    padding: 4px 24px;

    background: var(--btn-bg);

    color: var(--btn-color);

    cursor: pointer

}



.post-reward:hover .reward-button {

    background: var(--btn-hover-color)

}



.post-reward:hover>.reward-main {

    display: block

}



.post-reward .reward-main {

    position: absolute;

    bottom: 40px;

    left: 0;

    z-index: 100;

    display: none;

    padding: 0 0 15px;

    width: 100%

}



.post-reward .reward-main .reward-all {

    display: inline-block;

    margin: 0;

    padding: 20px 10px;

    border-radius: 4px;

    background: var(--reward-pop)

}



.post-reward .reward-main .reward-all:before {

    position: absolute;

    bottom: -10px;

    left: 0;

    width: 100%;

    height: 20px;

    content: ''

}



.post-reward .reward-main .reward-all:after {

    position: absolute;

    right: 0;

    bottom: 2px;

    left: 0;

    margin: 0 auto;

    width: 0;

    height: 0;

    border-top: 13px solid var(--reward-pop);

    border-right: 13px solid transparent;

    border-left: 13px solid transparent;

    content: ''

}



.post-reward .reward-main .reward-all .reward-item {

    display: inline-block;

    padding: 0 8px;

    list-style-type: none;

    vertical-align: top

}



.post-reward .reward-main .reward-all .reward-item img {

    width: 130px;

    height: 130px

}



.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {

    width: 130px;

    color: #858585

}



#rightside {

    position: fixed;

    right: -48px;

    bottom: 40px;

    z-index: 100;

    opacity: 0;

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    -o-transition: all .5s;

    -ms-transition: all .5s;

    transition: all .5s

}



#rightside #rightside-config-hide {

    height: 0;

    opacity: 0;

    -webkit-transition: -webkit-transform .4s;

    -moz-transition: -moz-transform .4s;

    -o-transition: -o-transform .4s;

    -ms-transition: -ms-transform .4s;

    transition: transform .4s;

    -webkit-transform: translate(45px, 0);

    -moz-transform: translate(45px, 0);

    -o-transform: translate(45px, 0);

    -ms-transform: translate(45px, 0);

    transform: translate(45px, 0)

}



#rightside #rightside-config-hide.show {

    height: auto;

    opacity: 1;

    -ms-filter: none;

    filter: none;

    -webkit-transform: translate(0, 0);

    -moz-transform: translate(0, 0);

    -o-transform: translate(0, 0);

    -ms-transform: translate(0, 0);

    transform: translate(0, 0)

}



#rightside #rightside-config-hide.status {

    height: auto;

    opacity: 1;

    -ms-filter: none;

    filter: none

}



#rightside>div>a,

#rightside>div>button {

    display: block;

    margin-bottom: 5px;

    width: 35px;

    height: 35px;

    border-radius: 5px;

    background-color: var(--btn-bg);

    color: var(--btn-color);

    text-align: center;

    font-size: 16px;

    line-height: 35px

}



#rightside>div>a:hover,

#rightside>div>button:hover {

    background-color: var(--btn-hover-color)

}



#rightside #mobile-toc-button {

    display: none

}



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

    #rightside #mobile-toc-button {

        display: block

    }

}



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

    #rightside #hide-aside-btn {

        display: none

    }

}



#rightside #go-up .scroll-percent {

    display: none

}



#rightside #go-up.show-percent .scroll-percent {

    display: block

}



#rightside #go-up.show-percent .scroll-percent+i {

    display: none

}



#rightside #go-up:hover .scroll-percent {

    display: none

}



#rightside #go-up:hover .scroll-percent+i {

    display: block

}



#sidebar #menu-mask {

    position: fixed;

    z-index: 102;

    display: none;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, .8)

}



#sidebar #sidebar-menus {

    position: fixed;

    top: 0;

    right: -300px;

    z-index: 103;

    overflow-x: hidden;

    overflow-y: auto;

    width: 300px;

    height: 100%;

    background: var(--sidebar-bg);

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    -o-transition: all .5s;

    -ms-transition: all .5s;

    transition: all .5s

}



#sidebar #sidebar-menus.open {

    -webkit-transform: translate3d(-100%, 0, 0);

    -moz-transform: translate3d(-100%, 0, 0);

    -o-transform: translate3d(-100%, 0, 0);

    -ms-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0)

}



#sidebar #sidebar-menus>.avatar-img {

    margin: 20px auto

}



#sidebar #sidebar-menus .sidebar-site-data {

    padding: 0 10px

}



#sidebar #sidebar-menus hr {

    margin: 20px auto

}



#sidebar #sidebar-menus .menus_items {

    padding: 0 10px 40px

}



#sidebar #sidebar-menus .menus_items .site-page {

    position: relative;

    display: block;

    padding: 6px 30px 6px 22px;

    color: var(--font-color);

    font-size: 1.15em

}



#sidebar #sidebar-menus .menus_items .site-page:hover {

    background: var(--text-bg-hover)

}



#sidebar #sidebar-menus .menus_items .site-page i:first-child {

    width: 15%;

    text-align: left

}



#sidebar #sidebar-menus .menus_items .site-page.group>i:last-child {

    position: absolute;

    top: .78em;

    right: 18px;

    -webkit-transition: -webkit-transform .3s;

    -moz-transition: -moz-transform .3s;

    -o-transition: -o-transform .3s;

    -ms-transition: -ms-transform .3s;

    transition: transform .3s

}



#sidebar #sidebar-menus .menus_items .site-page.group.hide>i:last-child {

    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg)

}



#sidebar #sidebar-menus .menus_items .site-page.group.hide+.menus_item_child {

    display: none

}



#sidebar #sidebar-menus .menus_items .menus_item_child {

    margin: 0;

    list-style: none

}



#vcomment {

    font-size: 1.1em

}



#vcomment .vbtn {

    border: none;

    background: var(--btn-bg);

    color: var(--btn-color)

}



#vcomment .vbtn:hover {

    background: var(--btn-hover-color)

}



#vcomment .vimg {

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -o-transition: all .3s;

    -ms-transition: all .3s;

    transition: all .3s

}



#vcomment .vimg:hover {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    transform: rotate(360deg)

}



#vcomment .vcards .vcard .vcontent.expand:after,

#vcomment .vcards .vcard .vcontent.expand:before {

    z-index: 22

}



#waline-wrap {

    --waline-font-size: 1.1em;

    --waline-theme-color: #45677d;

    --waline-active-color: #ff7242

}



#waline-wrap .wl-comment-actions>button:not(last-child) {

    padding-right: 4px

}



#waline-wrap textarea {

    background: url(/img/comment_bg.png) 100% 100% no-repeat

}



#waline-wrap textarea:focus {

    background-image: none

}



.fireworks {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 9999;

    pointer-events: none

}



.medium-zoom-image--opened {

    z-index: 99999 !important;

    margin: 0 !important

}



.medium-zoom-overlay {

    z-index: 99999 !important

}



.mermaid-wrap {

    margin: 0 0 20px;

    text-align: center

}



.mermaid-wrap>svg {

    height: 100%

}



.fb-comments iframe,

.utterances {

    width: 100% !important

}



#gitalk-container .gt-meta {

    margin: 0 0 .8em;

    padding: 6px 0 16px

}



.katex-wrap {

    overflow: auto

}



.katex-wrap::-webkit-scrollbar {

    display: none

}



.mathjax-overflow {

    overflow-x: auto;

    overflow-y: hidden

}



span.mathjax-overflow {

    display: inline-block;

    padding: 0 2px;

    max-width: 100%;

    vertical-align: bottom

}



.aplayer {

    color: #4c4948

}



#article-container .aplayer {

    margin: 0 0 20px

}



#article-container .aplayer ol,

#article-container .aplayer ul {

    margin: 0;

    padding: 0

}



#article-container .aplayer ol li,

#article-container .aplayer ul li {

    margin: 0;

    padding: 0 15px

}



#article-container .aplayer ol li:before,

#article-container .aplayer ul li:before {

    content: none

}



.snackbar-css {

    border-radius: 5px !important

}



#article-container .btn-center {

    margin: 0 0 20px;

    text-align: center

}



#article-container .btn-beautify {

    display: inline-block;

    margin: 0 4px 6px;

    padding: 0 15px;

    background-color: var(--btn-beautify-color, #777);

    color: #fff;

    line-height: 2

}



#article-container .btn-beautify.blue {

    --btn-beautify-color: #428bca

}



#article-container .btn-beautify.pink {

    --btn-beautify-color: #ff69b4

}



#article-container .btn-beautify.red {

    --btn-beautify-color: #f00

}



#article-container .btn-beautify.purple {

    --btn-beautify-color: #6f42c1

}



#article-container .btn-beautify.orange {

    --btn-beautify-color: #ff8c00

}



#article-container .btn-beautify.green {

    --btn-beautify-color: #5cb85c

}



#article-container .btn-beautify:hover {

    background-color: var(--btn-hover-color)

}



#article-container .btn-beautify i+span {

    margin-left: 6px

}



#article-container .btn-beautify:not(.block)+.btn-beautify:not(.block) {

    margin: 0 4px 20px

}



#article-container .btn-beautify.block {

    display: block;

    margin: 0 0 20px;

    width: fit-content;

    width: -moz-fit-content

}



#article-container .btn-beautify.block.center {

    margin: 0 auto 20px

}



#article-container .btn-beautify.block.right {

    margin: 0 0 20px auto

}



#article-container .btn-beautify.larger {

    padding: 6px 15px

}



#article-container .btn-beautify:hover {

    text-decoration: none

}



#article-container .btn-beautify.outline {

    border: 1px solid transparent;

    border-color: var(--btn-beautify-color, #777);

    background-color: transparent;

    color: var(--btn-beautify-color, #777)

}



#article-container .btn-beautify.outline:hover {

    background-color: var(--btn-beautify-color, #777)

}



#article-container .btn-beautify.outline:hover {

    color: #fff !important

}



#article-container figure.gallery-group {

    position: relative;

    float: left;

    overflow: hidden;

    margin: 6px 4px;

    width: calc(50% - 8px);

    height: 250px;

    border-radius: 8px;

    background: #000;

    -webkit-transform: translate3d(0, 0, 0)

}



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

    #article-container figure.gallery-group {

        width: calc(100% - 8px)

    }

}



#article-container figure.gallery-group:hover img {

    opacity: .4;

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0)

}



#article-container figure.gallery-group:hover .gallery-group-name::after {

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0)

}



#article-container figure.gallery-group:hover p {

    opacity: 1;

    -ms-filter: none;

    filter: none;

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0)

}



#article-container figure.gallery-group img {

    position: relative;

    margin: 0;

    max-width: none;

    width: calc(100% + 20px);

    height: 250px;

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    backface-visibility: hidden;

    opacity: .8;

    -webkit-transition: all .3s, filter 375ms ease-in .2s;

    -moz-transition: all .3s, filter 375ms ease-in .2s;

    -o-transition: all .3s, filter 375ms ease-in .2s;

    -ms-transition: all .3s, filter 375ms ease-in .2s;

    transition: all .3s, filter 375ms ease-in .2s;

    -webkit-transform: translate3d(-10px, 0, 0);

    -moz-transform: translate3d(-10px, 0, 0);

    -o-transform: translate3d(-10px, 0, 0);

    -ms-transform: translate3d(-10px, 0, 0);

    transform: translate3d(-10px, 0, 0);

    object-fit: cover

}



#article-container figure.gallery-group figcaption {

    position: absolute;

    top: 0;

    left: 0;

    padding: 30px;

    width: 100%;

    height: 100%;

    color: #fff;

    text-transform: uppercase;

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    backface-visibility: hidden

}



#article-container figure.gallery-group figcaption>a {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 1000;

    opacity: 0

}



#article-container figure.gallery-group p {

    margin: 0;

    padding: 8px 0 0;

    letter-spacing: 1px;

    font-size: 1.1em;

    line-height: 1.5;

    opacity: 0;

    -webkit-transition: opacity .35s, -webkit-transform .35s;

    -moz-transition: opacity .35s, -moz-transform .35s;

    -o-transition: opacity .35s, -o-transform .35s;

    -ms-transition: opacity .35s, -ms-transform .35s;

    transition: opacity .35s, transform .35s;

    -webkit-transform: translate3d(100%, 0, 0);

    -moz-transform: translate3d(100%, 0, 0);

    -o-transform: translate3d(100%, 0, 0);

    -ms-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

    -webkit-line-clamp: 4

}



#article-container figure.gallery-group .gallery-group-name {

    position: relative;

    margin: 0;

    padding: 8px 0;

    font-weight: 700;

    font-size: 1.65em;

    line-height: 1.5;

    -webkit-line-clamp: 2

}



#article-container figure.gallery-group .gallery-group-name:after {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 2px;

    background: #fff;

    content: '';

    -webkit-transition: -webkit-transform .35s;

    -moz-transition: -moz-transform .35s;

    -o-transition: -o-transform .35s;

    -ms-transition: -ms-transform .35s;

    transition: transform .35s;

    -webkit-transform: translate3d(-100%, 0, 0);

    -moz-transform: translate3d(-100%, 0, 0);

    -o-transform: translate3d(-100%, 0, 0);

    -ms-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0)

}



#article-container .gallery-group-main {

    overflow: auto;

    padding: 0 0 16px

}



#article-container .gallery {

    margin: 0 0 16px;

    text-align: center

}



#article-container .gallery .fj-gallery {

    opacity: 0

}



#article-container .gallery .fj-gallery .img-alt {

    display: none

}



#article-container .gallery .fj-gallery.lazyload+button {

    display: inline-block

}



#article-container .gallery .fj-gallery .gallery-data {

    display: none

}



#article-container .gallery button {

    display: none;

    margin-top: 25px;

    padding: 10px;

    width: 9em;

    border-radius: 5px;

    background: var(--btn-bg);

    color: var(--btn-color);

    font-weight: 700;

    font-size: 1.1em;

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -o-transition: all .3s;

    -ms-transition: all .3s;

    transition: all .3s

}



#article-container .gallery button>* {

    -webkit-transition: all .4s;

    -moz-transition: all .4s;

    -o-transition: all .4s;

    -ms-transition: all .4s;

    transition: all .4s

}



#article-container .gallery button i {

    width: 0;

    opacity: 0

}



#article-container .gallery button:hover {

    background: var(--btn-hover-color)

}



#article-container .gallery button:hover i {

    margin-left: 2px;

    width: 20px;

    opacity: 1;

    -ms-filter: none;

    filter: none

}



blockquote.pullquote {

    position: relative;

    max-width: 45%;

    font-size: 110%

}



blockquote.pullquote.left {

    float: left;

    margin: 1em .5em 0 0

}



blockquote.pullquote.right {

    float: right;

    margin: 1em 0 0 .5em

}



.video-container {

    position: relative;

    overflow: hidden;

    margin-bottom: 16px;

    padding-top: 56.25%;

    height: 0

}



.video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    margin-top: 0;

    width: 100%;

    height: 100%

}



.hide-block>.hide-button,

.hide-inline>.hide-button {

    display: inline-block;

    padding: 5px 18px;

    background: #45677d;

    color: var(--white)

}



.hide-block>.hide-button:hover,

.hide-inline>.hide-button:hover {

    background-color: var(--btn-hover-color)

}



.hide-block>.hide-button.open,

.hide-inline>.hide-button.open {

    display: none

}



.hide-block>.hide-button.open+div,

.hide-inline>.hide-button.open+div {

    display: block

}



.hide-block>.hide-button.open+span,

.hide-inline>.hide-button.open+span {

    display: inline

}



.hide-block>.hide-content,

.hide-inline>.hide-content {

    display: none

}



.hide-inline>.hide-button {

    margin: 0 6px

}



.hide-inline>.hide-content {

    margin: 0 6px

}



.hide-block {

    margin: 0 0 16px

}



.toggle {

    margin-bottom: 20px;

    border: 1px solid #f0f0f0

}



.toggle>.toggle-button {

    padding: 6px 15px;

    background: #f0f0f0;

    color: #1f2d3d;

    cursor: pointer

}



.toggle>.toggle-content {

    margin: 30px 24px

}



#article-container .inline-img {

    display: inline;

    margin: 0 3px;

    height: 1.1em;

    vertical-align: text-bottom

}



.hl-label {

    padding: 2px 4px;

    border-radius: 3px;

    color: #fff

}



.hl-label.default {

    background-color: #777

}



.hl-label.blue {

    background-color: #428bca

}



.hl-label.pink {

    background-color: #ff69b4

}



.hl-label.red {

    background-color: red

}



.hl-label.purple {

    background-color: #6f42c1

}



.hl-label.orange {

    background-color: #ff8c00

}



.hl-label.green {

    background-color: #5cb85c

}



.note {

    position: relative;

    margin: 0 0 20px;

    padding: 15px;

    border-radius: 3px

}



.note.icon-padding {

    padding-left: 3em

}



.note>.note-icon {

    position: absolute;

    top: calc(50% - .5em);

    left: .8em;

    font-size: larger

}



.note.blue:not(.disabled) {

    border-left-color: #428bca !important

}



.note.blue:not(.disabled).modern {

    border-left-color: transparent !important;

    color: #428bca

}



.note.blue:not(.disabled):not(.simple) {

    background: #e3eef7 !important

}



.note.blue>.note-icon {

    color: #428bca

}



.note.pink:not(.disabled) {

    border-left-color: #ff69b4 !important

}



.note.pink:not(.disabled).modern {

    border-left-color: transparent !important;

    color: #ff69b4

}



.note.pink:not(.disabled):not(.simple) {

    background: #ffe9f4 !important

}



.note.pink>.note-icon {

    color: #ff69b4

}



.note.red:not(.disabled) {

    border-left-color: red !important

}



.note.red:not(.disabled).modern {

    border-left-color: transparent !important;

    color: red

}



.note.red:not(.disabled):not(.simple) {

    background: #ffd9d9 !important

}



.note.red>.note-icon {

    color: red

}



.note.purple:not(.disabled) {

    border-left-color: #6f42c1 !important

}



.note.purple:not(.disabled).modern {

    border-left-color: transparent !important;

    color: #6f42c1

}



.note.purple:not(.disabled):not(.simple) {

    background: #e9e3f6 !important

}



.note.purple>.note-icon {

    color: #6f42c1

}



.note.orange:not(.disabled) {

    border-left-color: #ff8c00 !important

}



.note.orange:not(.disabled).modern {

    border-left-color: transparent !important;

    color: #ff8c00

}



.note.orange:not(.disabled):not(.simple) {

    background: #ffeed9 !important

}



.note.orange>.note-icon {

    color: #ff8c00

}



.note.green:not(.disabled) {

    border-left-color: #5cb85c !important

}



.note.green:not(.disabled).modern {

    border-left-color: transparent !important;

    color: #5cb85c

}



.note.green:not(.disabled):not(.simple) {

    background: #e7f4e7 !important

}



.note.green>.note-icon {

    color: #5cb85c

}



.note.simple {

    border: 1px solid #eee;

    border-left-width: 5px

}



.note.modern {

    border: 1px solid transparent !important;

    background-color: #f5f5f5;

    color: #4c4948

}



.note.flat {

    border: initial;

    border-left: 5px solid #eee;

    background-color: #f9f9f9;

    color: #4c4948

}



.note h2,

.note h3,

.note h4,

.note h5,

.note h6 {

    margin-top: 3px;

    margin-bottom: 0;

    padding-top: 0 !important;

    border-bottom: initial

}



.note blockquote:first-child,

.note img:first-child,

.note ol:first-child,

.note p:first-child,

.note pre:first-child,

.note table:first-child,

.note ul:first-child {

    margin-top: 0 !important

}



.note blockquote:last-child,

.note img:last-child,

.note ol:last-child,

.note p:last-child,

.note pre:last-child,

.note table:last-child,

.note ul:last-child {

    margin-bottom: 0 !important

}



.note:not(.no-icon) {

    padding-left: 3em

}



.note:not(.no-icon)::before {

    position: absolute;

    top: calc(50% - .95em);

    left: .8em;

    font-size: larger

}



.note.default.flat {

    background: #f7f7f7

}



.note.default.modern {

    border-color: #e1e1e1;

    background: #f3f3f3;

    color: #666

}



.note.default.modern a:not(.btn) {

    color: #666

}



.note.default.modern a:not(.btn):hover {

    color: #454545

}



.note.default:not(.modern) {

    border-left-color: #777

}



.note.default:not(.modern) h2,

.note.default:not(.modern) h3,

.note.default:not(.modern) h4,

.note.default:not(.modern) h5,

.note.default:not(.modern) h6 {

    color: #777

}



.note.default:not(.no-icon)::before {

    content: '\f0a9'

}



.note.default:not(.no-icon):not(.modern)::before {

    color: #777

}



.note.primary.flat {

    background: #f5f0fa

}



.note.primary.modern {

    border-color: #e1c2ff;

    background: #f3daff;

    color: #6f42c1

}



.note.primary.modern a:not(.btn) {

    color: #6f42c1

}



.note.primary.modern a:not(.btn):hover {

    color: #453298

}



.note.primary:not(.modern) {

    border-left-color: #6f42c1

}



.note.primary:not(.modern) h2,

.note.primary:not(.modern) h3,

.note.primary:not(.modern) h4,

.note.primary:not(.modern) h5,

.note.primary:not(.modern) h6 {

    color: #6f42c1

}



.note.primary:not(.no-icon)::before {

    content: '\f055'

}



.note.primary:not(.no-icon):not(.modern)::before {

    color: #6f42c1

}



.note.info.flat {

    background: #eef7fa

}



.note.info.modern {

    border-color: #b3e5ef;

    background: #d9edf7;

    color: #31708f

}



.note.info.modern a:not(.btn) {

    color: #31708f

}



.note.info.modern a:not(.btn):hover {

    color: #215761

}



.note.info:not(.modern) {

    border-left-color: #428bca

}



.note.info:not(.modern) h2,

.note.info:not(.modern) h3,

.note.info:not(.modern) h4,

.note.info:not(.modern) h5,

.note.info:not(.modern) h6 {

    color: #428bca

}



.note.info:not(.no-icon)::before {

    content: '\f05a'

}



.note.info:not(.no-icon):not(.modern)::before {

    color: #428bca

}



.note.success.flat {

    background: #eff8f0

}



.note.success.modern {

    border-color: #d0e6be;

    background: #dff0d8;

    color: #3c763d

}



.note.success.modern a:not(.btn) {

    color: #3c763d

}



.note.success.modern a:not(.btn):hover {

    color: #32562c

}



.note.success:not(.modern) {

    border-left-color: #5cb85c

}



.note.success:not(.modern) h2,

.note.success:not(.modern) h3,

.note.success:not(.modern) h4,

.note.success:not(.modern) h5,

.note.success:not(.modern) h6 {

    color: #5cb85c

}



.note.success:not(.no-icon)::before {

    content: '\f058'

}



.note.success:not(.no-icon):not(.modern)::before {

    color: #5cb85c

}



.note.warning.flat {

    background: #fdf8ea

}



.note.warning.modern {

    border-color: #fae4cd;

    background: #fcf4e3;

    color: #8a6d3b

}



.note.warning.modern a:not(.btn) {

    color: #8a6d3b

}



.note.warning.modern a:not(.btn):hover {

    color: #714f30

}



.note.warning:not(.modern) {

    border-left-color: #f0ad4e

}



.note.warning:not(.modern) h2,

.note.warning:not(.modern) h3,

.note.warning:not(.modern) h4,

.note.warning:not(.modern) h5,

.note.warning:not(.modern) h6 {

    color: #f0ad4e

}



.note.warning:not(.no-icon)::before {

    content: '\f06a'

}



.note.warning:not(.no-icon):not(.modern)::before {

    color: #f0ad4e

}



.note.danger.flat {

    background: #fcf1f2

}



.note.danger.modern {

    border-color: #ebcdd2;

    background: #f2dfdf;

    color: #a94442

}



.note.danger.modern a:not(.btn) {

    color: #a94442

}



.note.danger.modern a:not(.btn):hover {

    color: #84333f

}



.note.danger:not(.modern) {

    border-left-color: #d9534f

}



.note.danger:not(.modern) h2,

.note.danger:not(.modern) h3,

.note.danger:not(.modern) h4,

.note.danger:not(.modern) h5,

.note.danger:not(.modern) h6 {

    color: #d9534f

}



.note.danger:not(.no-icon)::before {

    content: '\f056'

}



.note.danger:not(.no-icon):not(.modern)::before {

    color: #d9534f

}



#article-container .tabs {

    position: relative;

    margin: 0 0 20px;

    border-right: 1px solid var(--tab-border-color);

    border-bottom: 1px solid var(--tab-border-color);

    border-left: 1px solid var(--tab-border-color)

}



#article-container .tabs>.nav-tabs {

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: box;

    display: flex;

    -webkit-box-lines: multiple;

    -moz-box-lines: multiple;

    -o-box-lines: multiple;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    margin: 0;

    padding: 0;

    background: var(--tab-botton-bg)

}



#article-container .tabs>.nav-tabs>.tab {

    margin: 0;

    padding: 0;

    list-style: none

}



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

    #article-container .tabs>.nav-tabs>.tab {

        -webkit-box-flex: 1;

        -moz-box-flex: 1;

        -o-box-flex: 1;

        -ms-box-flex: 1;

        box-flex: 1;

        -webkit-flex-grow: 1;

        flex-grow: 1

    }

}



#article-container .tabs>.nav-tabs>.tab button {

    display: block;

    padding: 8px 18px;

    width: 100%;

    border-top: 2px solid var(--tab-border-color);

    background: var(--tab-botton-bg);

    color: var(--tab-botton-color);

    line-height: 2;

    -webkit-transition: all .4s;

    -moz-transition: all .4s;

    -o-transition: all .4s;

    -ms-transition: all .4s;

    transition: all .4s

}



#article-container .tabs>.nav-tabs>.tab button i {

    width: 1.5em

}



#article-container .tabs>.nav-tabs>.tab.active button {

    border-top: 2px solid #45677d;

    background: var(--tab-button-active-bg);

    cursor: default

}



#article-container .tabs>.nav-tabs>.tab:not(.active) button:hover {

    border-top: 2px solid var(--tab-button-hover-bg);

    background: var(--tab-button-hover-bg)

}



#article-container .tabs>.tab-contents .tab-item-content {

    position: relative;

    display: none;

    padding: 36px 24px

}



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

    #article-container .tabs>.tab-contents .tab-item-content {

        padding: 24px 14px

    }

}



#article-container .tabs>.tab-contents .tab-item-content.active {

    display: block;

    -webkit-animation: tabshow .5s;

    -moz-animation: tabshow .5s;

    -o-animation: tabshow .5s;

    -ms-animation: tabshow .5s;

    animation: tabshow .5s

}



#article-container .tabs .tab-to-top {

    position: relative;

    display: block;

    margin: 0 0 0 auto;

    color: #99a9bf

}



@-moz-keyframes tabshow {

    0% {

        -webkit-transform: translateY(15px);

        -moz-transform: translateY(15px);

        -o-transform: translateY(15px);

        -ms-transform: translateY(15px);

        transform: translateY(15px)

    }



    100% {

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-webkit-keyframes tabshow {

    0% {

        -webkit-transform: translateY(15px);

        -moz-transform: translateY(15px);

        -o-transform: translateY(15px);

        -ms-transform: translateY(15px);

        transform: translateY(15px)

    }



    100% {

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@-o-keyframes tabshow {

    0% {

        -webkit-transform: translateY(15px);

        -moz-transform: translateY(15px);

        -o-transform: translateY(15px);

        -ms-transform: translateY(15px);

        transform: translateY(15px)

    }



    100% {

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



@keyframes tabshow {

    0% {

        -webkit-transform: translateY(15px);

        -moz-transform: translateY(15px);

        -o-transform: translateY(15px);

        -ms-transform: translateY(15px);

        transform: translateY(15px)

    }



    100% {

        -webkit-transform: translateY(0);

        -moz-transform: translateY(0);

        -o-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



#article-container .timeline {

    margin: 0 0 20px 10px;

    padding: 14px 20px 5px;

    border-left: 2px solid var(--timeline-color, #45677d)

}



#article-container .timeline.blue {

    --timeline-color: #428bca;

    --timeline-bg: rgba(66, 139, 202, 0.2)

}



#article-container .timeline.pink {

    --timeline-color: #ff69b4;

    --timeline-bg: rgba(255, 105, 180, 0.2)

}



#article-container .timeline.red {

    --timeline-color: #f00;

    --timeline-bg: rgba(255, 0, 0, 0.2)

}



#article-container .timeline.purple {

    --timeline-color: #6f42c1;

    --timeline-bg: rgba(111, 66, 193, 0.2)

}



#article-container .timeline.orange {

    --timeline-color: #ff8c00;

    --timeline-bg: rgba(255, 140, 0, 0.2)

}



#article-container .timeline.green {

    --timeline-color: #5cb85c;

    --timeline-bg: rgba(92, 184, 92, 0.2)

}



#article-container .timeline .timeline-item {

    margin: 0 0 15px

}



#article-container .timeline .timeline-item:hover .item-circle:before {

    border-color: var(--timeline-color, #45677d)

}



#article-container .timeline .timeline-item.headline .timeline-item-title .item-circle>p {

    font-weight: 600;

    font-size: 1.2em

}



#article-container .timeline .timeline-item.headline .timeline-item-title .item-circle:before {

    left: -28px;

    border: 4px solid var(--timeline-color, #45677d)

}



#article-container .timeline .timeline-item.headline:hover .item-circle:before {

    border-color: var(--pseudo-hover)

}



#article-container .timeline .timeline-item .timeline-item-title {

    position: relative

}



#article-container .timeline .timeline-item .item-circle:before {

    position: absolute;

    top: 50%;

    left: -27px;

    width: 6px;

    height: 6px;

    border: 3px solid var(--pseudo-hover);

    border-radius: 50%;

    background: var(--card-bg);

    content: '';

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -o-transition: all .3s;

    -ms-transition: all .3s;

    transition: all .3s;

    -webkit-transform: translate(0, -50%);

    -moz-transform: translate(0, -50%);

    -o-transform: translate(0, -50%);

    -ms-transform: translate(0, -50%);

    transform: translate(0, -50%)

}



#article-container .timeline .timeline-item .item-circle>p {

    margin: 0 0 8px;

    font-weight: 500

}



#article-container .timeline .timeline-item .timeline-item-content {

    position: relative;

    padding: 12px 15px;

    border-radius: 8px;

    background: var(--timeline-bg, #e4f3fd);

    font-size: .93em

}



#article-container .timeline .timeline-item .timeline-item-content>:last-child {

    margin-bottom: 0

}



#article-container .timeline+.timeline {

    margin-top: -20px

}



[data-theme=dark] {

    --global-bg: #0d0d0d;

    --font-color: rgba(255, 255, 255, 0.7);

    --hr-border: rgba(255, 255, 255, 0.4);

    --hr-before-color: rgba(255, 255, 255, 0.7);

    --search-bg: #121212;

    --search-input-color: rgba(255, 255, 255, 0.7);

    --search-result-title: rgba(255, 255, 255, 0.9);

    --preloader-bg: #0d0d0d;

    --preloader-color: rgba(255, 255, 255, 0.7);

    --tab-border-color: #2c2c2c;

    --tab-botton-bg: #2c2c2c;

    --tab-botton-color: rgba(255, 255, 255, 0.7);

    --tab-button-hover-bg: #383838;

    --tab-button-active-bg: #121212;

    --card-bg: #121212;

    --sidebar-bg: #121212;

    --btn-hover-color: #787878;

    --btn-color: rgba(255, 255, 255, 0.7);

    --btn-bg: #1f1f1f;

    --text-bg-hover: #383838;

    --light-grey: rgba(255, 255, 255, 0.7);

    --dark-grey: rgba(255, 255, 255, 0.2);

    --white: rgba(255, 255, 255, 0.9);

    --text-highlight-color: rgba(255, 255, 255, 0.9);

    --blockquote-color: rgba(255, 255, 255, 0.7);

    --blockquote-bg: #2c2c2c;

    --reward-pop: #2c2c2c;

    --toc-link-color: rgba(255, 255, 255, 0.6);

    --hl-color: rgba(255, 255, 255, 0.7);

    --hl-bg: #171717;

    --hltools-bg: #1a1a1a;

    --hltools-color: #90a4ae;

    --hlnumber-bg: #171717;

    --hlnumber-color: rgba(255, 255, 255, 0.4);

    --hlscrollbar-bg: #1f1f1f;

    --hlexpand-bg: linear-gradient(180deg, rgba(23, 23, 23, 0.6), rgba(23, 23, 23, 0.9));

    --scrollbar-color: #1f1f1f;

    --timeline-bg: #1f1f1f

}



[data-theme=dark] #footer:before,

[data-theme=dark] #page-header:before,

[data-theme=dark] #web_bg:before {

    position: absolute;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, .7);

    content: ''

}



[data-theme=dark] #article-container code {

    background: #2c2c2c

}



[data-theme=dark] #article-container pre>code {

    background: #171717

}



[data-theme=dark] #article-container figure.highlight {

    -webkit-box-shadow: none;

    box-shadow: none

}



[data-theme=dark] #article-container .note code {

    background: rgba(27, 31, 35, .05)

}



[data-theme=dark] #article-container .aplayer {

    filter: brightness(.8)

}



[data-theme=dark] #article-container kbd {

    border-color: #696969;

    background-color: #525252;

    color: #e2f1ff

}



[data-theme=dark] #page-header.nav-fixed>#nav,

[data-theme=dark] #page-header.not-top-img>#nav {

    background: rgba(18, 18, 18, .8);

    -webkit-box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0);

    box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)

}



[data-theme=dark] #post-comment #comment-switch {

    background: #2c2c2c !important

}



[data-theme=dark] #post-comment #comment-switch .switch-btn {

    filter: brightness(.8)

}



[data-theme=dark] .note {

    filter: brightness(.8)

}



[data-theme=dark] #article-container iframe,

[data-theme=dark] .ads-wrap,

[data-theme=dark] .btn-beautify,

[data-theme=dark] .error-img,

[data-theme=dark] .gist,

[data-theme=dark] .hide-button,

[data-theme=dark] .hl-label,

[data-theme=dark] .post-outdate-notice {

    filter: brightness(.8)

}



[data-theme=dark] img {

    filter: brightness(.8)

}



[data-theme=dark] #aside-content .aside-list>.aside-list-item:not(:last-child) {

    border-bottom: 1px dashed rgba(255, 255, 255, .1)

}



[data-theme=dark] #gitalk-container {

    filter: brightness(.8)

}



[data-theme=dark] #gitalk-container svg {

    fill: rgba(255, 255, 255, .9) !important

}



[data-theme=dark] #disqusjs #dsqjs .dsqjs-no-comment,

[data-theme=dark] #disqusjs #dsqjs .dsqjs-tab-active,

[data-theme=dark] #disqusjs #dsqjs:focus,

[data-theme=dark] #disqusjs #dsqjs:hover {

    color: rgba(255, 255, 255, .7)

}



[data-theme=dark] #disqusjs #dsqjs .dsqjs-order-label {

    background-color: #1f1f1f

}



[data-theme=dark] #disqusjs #dsqjs .dsqjs-post-body {

    color: rgba(255, 255, 255, .7)

}



[data-theme=dark] #disqusjs #dsqjs .dsqjs-post-body code,

[data-theme=dark] #disqusjs #dsqjs .dsqjs-post-body pre {

    background: #2c2c2c

}



[data-theme=dark] #disqusjs #dsqjs .dsqjs-post-body blockquote {

    color: rgba(255, 255, 255, .7)

}



[data-theme=dark] #artitalk_main #lazy {

    background: #121212

}



[data-theme=dark] #operare_artitalk .c2 {

    background: #121212

}



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

    [data-theme=dark] #card-toc {

        background: #1f1f1f

    }

}



.read-mode {

    --font-color: #4c4948;

    --readmode-light-color: #fff;

    --white: #4c4948;

    --light-grey: #4c4948;

    --gray: #d6dbdf;

    --hr-border: #d6dbdf;

    --hr-before-color: #b9c2c9;

    --highlight-bg: #f7f7f7;

    --exit-btn-bg: #c0c0c0;

    --exit-btn-color: #fff;

    --exit-btn-hover: #8d8d8d;

    --pseudo-hover: none

}



[data-theme=dark] .read-mode {

    --font-color: rgba(255, 255, 255, 0.7);

    --readmode-light-color: #0d0d0d;

    --white: rgba(255, 255, 255, 0.9);

    --light-grey: rgba(255, 255, 255, 0.7);

    --gray: rgba(255, 255, 255, 0.7);

    --hr-border: rgba(255, 255, 255, 0.5);

    --hr-before-color: rgba(255, 255, 255, 0.7);

    --highlight-bg: #171717;

    --exit-btn-bg: #1f1f1f;

    --exit-btn-color: rgba(255, 255, 255, 0.9);

    --exit-btn-hover: #525252

}



.read-mode {

    background: var(--readmode-light-color)

}



.read-mode .exit-readmode {

    position: fixed;

    top: 30px;

    right: 30px;

    z-index: 100;

    width: 40px;

    height: 40px;

    border-radius: 8px;

    background: var(--exit-btn-bg);

    color: var(--exit-btn-color);

    font-size: 16px;

    -webkit-transition: background .3s;

    -moz-transition: background .3s;

    -o-transition: background .3s;

    -ms-transition: background .3s;

    transition: background .3s

}



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

    .read-mode .exit-readmode {

        top: initial;

        bottom: 30px

    }

}



.read-mode .exit-readmode:hover {

    background: var(--exit-btn-hover)

}



.read-mode #aside-content {

    display: none

}



.read-mode #page-header.post-bg {

    background-color: transparent;

    background-image: none !important

}



.read-mode #page-header.post-bg:before {

    opacity: 0

}



.read-mode #page-header.post-bg>#post-info {

    text-align: center

}



.read-mode #post {

    margin: 0 auto;

    background: 0 0;

    -webkit-box-shadow: none;

    box-shadow: none

}



.read-mode #post:hover {

    -webkit-box-shadow: none;

    box-shadow: none

}



.read-mode>canvas {

    display: none !important

}



.read-mode #footer,

.read-mode #nav,

.read-mode #post>:not(#post-info):not(.post-content),

.read-mode #rightside,

.read-mode #web_bg,

.read-mode .highlight-tools,

.read-mode .not-top-img,

.read-mode .post-outdate-notice {

    display: none !important

}



.read-mode #article-container a {

    color: #99a9bf

}



.read-mode #article-container .highlight:not(.js-file-line-container),

.read-mode #article-container pre {

    background: var(--highlight-bg) !important

}



.read-mode #article-container .highlight:not(.js-file-line-container) *,

.read-mode #article-container pre * {

    color: var(--font-color) !important

}



.read-mode #article-container figure.highlight {

    border-radius: 0 !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important

}



.read-mode #article-container figure.highlight>:not(.highlight-tools) {

    display: block !important

}



.read-mode #article-container figure.highlight .line:before {

    color: var(--font-color) !important

}



.read-mode #article-container figure.highlight .hljs {

    background: var(--highlight-bg) !important

}



.read-mode #article-container h1,

.read-mode #article-container h2,

.read-mode #article-container h3,

.read-mode #article-container h4,

.read-mode #article-container h5,

.read-mode #article-container h6 {

    padding: 0

}



.read-mode #article-container h1:before,

.read-mode #article-container h2:before,

.read-mode #article-container h3:before,

.read-mode #article-container h4:before,

.read-mode #article-container h5:before,

.read-mode #article-container h6:before {

    content: ''

}



.read-mode #article-container h1:hover,

.read-mode #article-container h2:hover,

.read-mode #article-container h3:hover,

.read-mode #article-container h4:hover,

.read-mode #article-container h5:hover,

.read-mode #article-container h6:hover {

    padding: 0

}



.read-mode #article-container li:hover:before,

.read-mode #article-container ol:hover:before,

.read-mode #article-container ul:hover:before {

    -webkit-transform: none !important;

    -moz-transform: none !important;

    -o-transform: none !important;

    -ms-transform: none !important;

    transform: none !important

}



.read-mode #article-container li:before,

.read-mode #article-container ol:before {

    background: 0 0 !important;

    color: var(--font-color) !important

}



.read-mode #article-container ul>li:before {

    border-color: var(--gray) !important

}



.read-mode #article-container .tabs {

    border: 2px solid var(--tab-border-color)

}



.read-mode #article-container .tabs>.nav-tabs {

    background: 0 0

}



.read-mode #article-container .tabs>.nav-tabs>.tab {

    border-bottom: 0

}



.read-mode #article-container .tabs>.nav-tabs>.tab button {

    border-top: none !important;

    background: 0 0

}



.read-mode #article-container .tabs>.nav-tabs>.tab button:hover {

    background: 0 0 !important

}



.read-mode #article-container .tabs>.nav-tabs>.tab.active button {

    text-decoration: underline

}



.read-mode #article-container .tabs>.tab-contents .tab-item-content.active {

    -webkit-animation: none;

    -moz-animation: none;

    -o-animation: none;

    -ms-animation: none;

    animation: none

}



.read-mode #article-container code {

    color: var(--font-color)

}



.read-mode #article-container blockquote {

    border-color: var(--gray);

    background-color: var(--readmode-light-color)

}



.read-mode #article-container kbd {

    border: 1px solid var(--gray);

    background-color: transparent;

    -webkit-box-shadow: none;

    box-shadow: none;

    color: var(--font-color)

}



.read-mode #article-container .hide-toggle {

    border: 1px solid var(--gray) !important

}



.read-mode #article-container .btn-beautify,

.read-mode #article-container .hide-button,

.read-mode #article-container .hl-label {

    border: 1px solid var(--gray) !important;

    background: var(--readmode-light-color) !important;

    color: var(--font-color) !important

}



.read-mode #article-container .note {

    border: 2px solid var(--gray);

    border-left-color: var(--gray) !important;

    filter: none;

    background-color: var(--readmode-light-color) !important;

    color: var(--font-color)

}



.read-mode #article-container .note .note-icon,

.read-mode #article-container .note:before {

    color: var(--font-color)

}



.search-dialog {

    position: fixed;

    top: 10%;

    left: 50%;

    z-index: 1001;

    display: none;

    margin-left: -300px;

    padding: 20px;

    width: 600px;

    border-radius: 8px;

    background: var(--search-bg)

}



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

    .search-dialog {

        top: 0;

        left: 0;

        margin: 0;

        width: 100%;

        height: 100%;

        border-radius: 0

    }

}



.search-dialog hr {

    margin: 20px auto

}



.search-dialog .search-nav {

    margin: 0 0 14px;

    color: #45677d;

    font-size: 1.4em;

    line-height: 1

}



.search-dialog .search-nav .search-dialog-title {

    margin-right: 10px

}



.search-dialog .search-nav .search-close-button {

    float: right;

    color: #858585;

    -webkit-transition: color .2s ease-in-out;

    -moz-transition: color .2s ease-in-out;

    -o-transition: color .2s ease-in-out;

    -ms-transition: color .2s ease-in-out;

    transition: color .2s ease-in-out

}



.search-dialog .search-nav .search-close-button:hover {

    color: #45677d

}



#search-mask {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 1000;

    display: none;

    background: rgba(0, 0, 0, .6)

}



#local-search .search-dialog .local-search-box {

    margin: 0 auto;

    max-width: 100%;

    width: 100%

}



#local-search .search-dialog .local-search-box input {

    padding: 5px 14px;

    width: 100%;

    outline: 0;

    border: 2px solid #45677d;

    border-radius: 40px;

    background: var(--search-bg);

    color: var(--search-input-color);

    -webkit-appearance: none

}



#local-search .search-dialog .search-wrap {

    display: none

}



#local-search .search-dialog .local-search__hit-item {

    position: relative;

    padding-left: 24px;

    line-height: 1.7

}



#local-search .search-dialog .local-search__hit-item:hover:before {

    border-color: var(--pseudo-hover)

}



#local-search .search-dialog .local-search__hit-item:before {

    position: absolute;

    top: .45em;

    left: 0;

    width: .5em;

    height: .5em;

    border: 3px solid #45677d;

    border-radius: .5em;

    background: 0 0;

    content: '';

    line-height: .5em;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out

}



#local-search .search-dialog .local-search__hit-item a {

    display: block;

    color: var(--search-result-title);

    font-weight: 600;

    cursor: pointer

}



#local-search .search-dialog .local-search__hit-item a:hover {

    color: #45677d

}



#local-search .search-dialog .local-search__hit-item .search-result {

    margin: 0 0 8px;

    word-break: break-word

}



#local-search .search-dialog .local-search__hit-item .search-keyword {

    color: #f47466;

    font-weight: 700

}



#local-search .search-dialog .search-result-list {

    overflow-y: overlay;

    margin: 0 -20px;

    padding: 0 22px;

    max-height: calc(80vh - 130px)

}



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

    #local-search .search-dialog .search-result-list {

        padding-bottom: 40px;

        max-height: 75vh !important

    }

}