body {
    -webkit-overflow-scrolling: touch;
    overflow: overlay;
    overflow: auto;
    transition: background .25s
}

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

#Joe {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    position: relative;
    z-index: 1
}

#Joe .joe_main_container {
    flex: 1;
    margin-top: 20px
}

#Joe .aplayer {
    min-height: 66px
}

#Joe .aplayer .aplayer-body .aplayer-bar .aplayer-played,
#Joe .aplayer .aplayer-body .aplayer-bar .aplayer-thumb,
#Joe .aplayer .aplayer-body .aplayer-time .aplayer-volume {
    background-color: var(--theme) !important
}

#Joe .aplayer .aplayer-list li {
    transition: none !important
}

#Joe .aplayer .aplayer-list li.aplayer-list-light {
    background: #fff8f3
}

#Joe .aplayer .aplayer-list li.aplayer-list-light .aplayer-list-cur {
    background-color: var(--theme) !important
}

#Joe .page-links .joe_detail__article {
    padding: 10px 0
}

#Joe .page-links .joe_detail__article h3 {
    margin: 20px 0
}

#Joe .page-links .totals {
    background: var(--sub-background);
    border-radius: 3px;
    color: var(--minor);
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    margin-left: 5px;
    padding: 0 5px;
    position: relative;
    top: -1px
}

#Joe .page-links .links-group {
    padding-left: 24px
}

#Joe .page-links .links-group h5 {
    font-size: 16px
}

#Joe .page-links .links-group .joe_detail__friends {
    padding-left: 0
}

#Joe .page-leaving .joe_comment>h2 {
    display: none
}

#Joe .joe_leaving-list .emoji-item,
#Joe .newreply .emoji-item {
    display: inline-block;
    height: 24px;
    margin: 0 2px;
    overflow: hidden;
    padding: 0;
    width: 24px
}

@media (max-width:860px) {

    #Joe .joe_leaving-list .emoji-item,
    #Joe .newreply .emoji-item {
        transform: scale(.8)
    }
}

#Joe .joe_leaving-list .emoji-item img,
#Joe .newreply .emoji-item img {
    border: 0;
    display: block;
    height: 24px;
    width: 24px
}

#Joe .joe_leaving-list .emoji-animate,
#Joe .newreply .emoji-animate {
    position: relative
}

#Joe .joe_leaving-list .emoji-animate .img,
#Joe .newreply .emoji-animate .img {
    cursor: default;
    height: 24px;
    width: 24px
}

#Joe .joe_leaving-list .emoji-animate .img:hover,
#Joe .newreply .emoji-animate .img:hover {
    transform: translateY(0)
}

#Joe .joe_leaving-list .emoji-img,
#Joe .newreply .emoji-img {
    cursor: default;
    height: 20px;
    position: relative;
    width: 20px
}

#Joe .joe_leaving-list .emoji-img:hover,
#Joe .newreply .emoji-img:hover {
    transform: translateY(0)
}

#Joe .newreply .emoji-animate {
    top: 5px
}

#Joe .newreply .emoji-animate .img {
    height: 24px;
    width: 24px
}

#Joe .newreply .emoji-img {
    height: 20px;
    top: -3px;
    width: 20px
}

.joe_container {
    display: flex;
    flex-direction: row;
    margin: 0 auto 30px;
    padding: 0 15px;
    width: 100%
}

.joe_container.revert {
    flex-direction: row-reverse
}

.joe_container.revert .joe_aside {
    margin-left: 0;
    margin-right: 15px
}

.joe_container img {
    max-width: 100%
}

.joe_container pre code {
    overflow-x: auto
}

.joe_container code:not([class]) {
    background: var(--code-background);
    border-radius: var(--radius-inner);
    color: var(--code);
    display: inline-block;
    font-size: 13px;
    margin: 2px 5px;
    padding: 0 8px;
    text-indent: 0;
    user-select: auto;
    vertical-align: baseline;
    white-space: normal;
    word-break: break-word
}

.joe_container .code-toolbar {
    border-radius: 8px;
    box-shadow: 1px 1px 5px 0 var(--shadow-code);
    margin: 20px 0;
    overflow: hidden;
    position: relative
}

.joe_container .code-toolbar .toolbar {
    display: none;
    height: 30px;
    left: 0;
    line-height: 30px;
    opacity: 1;
    pointer-events: none;
    right: 0;
    text-align: center;
    top: 0;
    z-index: unset
}

.joe_container .code-toolbar .toolbar .toolbar-item {
    opacity: 1;
    pointer-events: none;
    user-select: none
}

.joe_container .code-toolbar .toolbar .toolbar-item span {
    background: none;
    border: none;
    box-shadow: none;
    color: #999;
    font-size: 14px;
    font-weight: 700
}

.joe_container .code-toolbar .toolbar .toolbar-item span:hover {
    color: #999
}

.joe_container .code-toolbar .toolbar .toolbar-item:last-child {
    display: none
}

.joe_container .code-toolbar .toolbar .autofold-tip {
    font-size: 12px;
    padding-left: 5px
}

.joe_container .code-toolbar pre[class*=language-] {
    border-radius: 8px;
    font-size: 16px;
    margin: 0;
    overflow: hidden;
    padding: 20px 0 0;
    position: relative;
    text-shadow: none;
    user-select: auto;
    white-space: pre
}

.joe_container .code-toolbar pre[class*=language-] code[class*=language-] {
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 8px 8px;
    display: block;
    margin-bottom: 0;
    overflow-x: auto;
    padding: 0 12px 12px 18px;
    text-shadow: none;
    user-select: none
}

.joe_container .code-toolbar pre[class*=language-] code[class*=language-] .token.operator,
.joe_container .code-toolbar pre[class*=language-] code[class*=language-] .token.string {
    background: none
}

.joe_container .code-toolbar pre[class*=language-] .line-numbers-rows {
    border: none;
    bottom: 0;
    left: 0;
    padding-top: 12px;
    top: 0
}

.joe_container .code-toolbar pre[class*=language-] .code-expander {
    color: #999;
    cursor: pointer;
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 5px;
    transition: all .25s;
    user-select: none;
    z-index: 2
}

.joe_container .code-toolbar pre[class*=language-] .code-expander:hover {
    filter: brightness(1.2)
}

.joe_container .code-toolbar pre[class*=language-] .copy-button {
    color: #999;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    position: absolute;
    right: 10px;
    top: 3px;
    transition: opacity .25s;
    user-select: none;
    z-index: 5
}

.joe_container .code-toolbar pre[class*=language-] .copy-button:hover {
    filter: brightness(1.2)
}

.joe_container .code-toolbar pre[class*=language-].c_title+.toolbar {
    display: block
}

.joe_container .code-toolbar pre[class*=language-].c_title code {
    padding: 12px 12px 12px 18px
}

.joe_container .code-toolbar pre[class*=language-].c_hr {
    padding: 30px 0 0
}

.joe_container .code-toolbar pre[class*=language-].c_hr:after {
    background: #d8d8d8;
    content: "";
    height: 1px;
    mix-blend-mode: overlay;
    position: absolute;
    top: 30px;
    width: 100%;
    z-index: 1
}

.joe_container .code-toolbar pre[class*=language-].c_hr code {
    padding: 12px 12px 14px 18px
}

.joe_container .code-toolbar pre[class*=language-].c_macdot:before {
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: "";
    height: 12px;
    left: 12px;
    position: absolute;
    top: 9px;
    width: 12px;
    z-index: 1
}

.joe_container .code-toolbar pre[class*=language-].c_newline code {
    white-space: pre-wrap;
    word-break: break-all
}

.joe_container .code-toolbar pre[class*=language-].c_hover_tools .code-expander,
.joe_container .code-toolbar pre[class*=language-].c_hover_tools .copy-button {
    opacity: 0;
    pointer-events: none
}

.joe_container .code-toolbar pre[class*=language-].c_hover_tools:hover .code-expander,
.joe_container .code-toolbar pre[class*=language-].c_hover_tools:hover .copy-button {
    opacity: 1;
    pointer-events: auto
}

.joe_container .code-toolbar pre[class*=language-].c_copy,
.joe_container .code-toolbar pre[class*=language-].c_copy code {
    user-select: auto
}

.joe_container .code-toolbar pre[class*=language-].c_copy .code-expander {
    right: 40px
}

.joe_container .code-toolbar pre[class*=language-].line-numbers code {
    padding: 12px 12px 16px 54px
}

.joe_container .code-toolbar pre[class*=language-].close {
    height: 30px
}

.joe_container .code-toolbar pre[class*=language-].close .code-expander {
    transform: rotate(90deg)
}

.joe_container .code-toolbar pre[class*=language-].close:after {
    visibility: hidden
}

.joe_main {
    flex: 1;
    min-width: 0;
    padding-bottom: 15px
}

.joe_dropdown {
    position: relative
}

.joe_dropdown__link {
    align-items: center;
    display: flex
}

.joe_dropdown__link-icon {
    margin-left: -12px;
    transition: transform .35s
}

.joe_dropdown__menu {
    background: var(--sib-background);
    border-radius: 0 0 var(--radius-inner) var(--radius-inner);
    border-top: 3px solid var(--theme);
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    left: 50%;
    opacity: 0;
    padding: 10px 0;
    position: absolute;
    transform: translateX(-50%) perspective(600px) rotateX(-45deg);
    transform-origin: top;
    transition: opacity .35s, visibility .35s, transform .35s;
    visibility: hidden;
    z-index: 5
}

.joe_dropdown__menu:before {
    border-bottom: 7px solid var(--theme);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: -10px;
    transform: translateX(-50%);
    width: 0
}

.joe_dropdown.active .joe_dropdown__link-icon {
    transform: rotate(-180deg)
}

.joe_dropdown.active .joe_dropdown__menu {
    opacity: 1;
    transform: translateX(-50%) perspective(600px) rotateX(0);
    visibility: visible
}

.joe_dropdown.active .joe_dropdown__menu li:not(.joe_nav_sub-li) {
    display: flex;
    justify-content: flex-start
}

.joe_header {
    height: 60px;
    position: relative;
    z-index: 100
}

.joe_header .joe_container {
    margin: 0 auto
}

.joe_header .full {
    max-width: 100% !important
}

.joe_header__above {
    background: var(--background);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
    position: fixed;
    top: 0;
    transform: translateZ(0);
    transition: opacity, transform .35s;
    width: 100%;
    will-change: opacity, transform;
    z-index: 6
}

.joe_header__above .joe_container {
    align-items: center;
    max-width: auto !important;
    min-height: 44px;
    width: 100%
}

.joe_header__above-logo {
    align-items: center;
    display: flex;
    height: 60px;
    margin-right: 10px;
    padding-right: 18px;
    position: relative
}

.joe_header__above-logo img {
    height: 40px;
    max-width: 150px;
    min-width: 40px;
    object-fit: cover
}

.joe_header__above-logo svg {
    display: none
}

.joe_header__above-logo:after {
    background: var(--classC);
    content: "";
    height: 20px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px
}

.joe_header__above-nav,
.joe_header__above-nav .item {
    align-items: center;
    display: flex
}

.joe_header__above-nav .item {
    -webkit-box-align: center;
    -ms-flex-align: center;
    color: var(--main);
    cursor: pointer;
    font-size: 15px;
    height: 60px;
    line-height: 60px;
    margin-right: 10px;
    padding: 0 8px;
    position: relative;
    transition: color .35s;
    user-select: none;
    white-space: nowrap
}

.joe_header__above-nav .item>i {
    display: inline-block;
    font-size: 18px;
    margin-right: 4px;
    transition: transform .5s
}

.joe_header__above-nav .item:last-child {
    margin-right: 0;
    width: 100%
}

.joe_header__above-nav .item:after {
    background: var(--theme);
    border-radius: 6px 6px 0 0;
    bottom: 0;
    content: "";
    height: 3px;
    left: 6px;
    opacity: 0;
    position: absolute;
    right: 6px;
    transform: scaleX(.25);
    transition: opacity .5s, transform .5s
}

.joe_header__above-nav .item.current {
    color: var(--theme)
}

.joe_header__above-nav .item.current:after,
.joe_header__above-nav .item.current:hover:after {
    opacity: 1;
    transform: scaleX(1)
}

.joe_header__above-nav .item:hover {
    color: var(--theme)
}

.joe_header__above-nav .item:hover:after {
    opacity: .3;
    transform: scaleX(.7)
}

.joe_header__above-nav .item:hover+.joe-icon-arrow-down {
    color: var(--theme) !important
}

.joe_header__above-nav.active-shadow .item.current {
    text-shadow: 0 4px 20px var(--theme)
}

.joe_header__above-nav.active-animate .item:hover .m-icon {
    animation: dung .3s ease .12s
}

.joe_header__above-nav .joe_dropdown {
    margin-right: 15px
}

.joe_header__above-nav .joe_dropdown__link a {
    color: var(--main);
    font-size: 15px;
    height: 60px;
    line-height: 60px;
    padding-left: 8px;
    padding-right: 3px;
    transition: color .35s;
    white-space: nowrap
}

.joe_header__above-nav .joe_dropdown__menu {
    max-width: 200px;
    min-width: 90px;
    text-align: left
}

.joe_header__above-nav .joe_dropdown__menu a {
    color: var(--classF);
    display: block;
    height: 34px;
    line-height: 34px;
    margin-right: 0;
    overflow: hidden;
    padding: 0 15px;
    text-overflow: ellipsis;
    transition: color .35s, background .35s;
    white-space: nowrap
}

.joe_header__above-nav .joe_dropdown__menu a:after {
    display: none
}

.joe_header__above-nav .joe_dropdown__menu a.current,
.joe_header__above-nav .joe_dropdown__menu a:hover {
    background: var(--sib);
    color: var(--theme)
}

.joe_header__above-nav .joe_dropdown .item:hover:after {
    display: none
}

.joe_header__above-nav .joe_dropdown.active .joe_dropdown__link a,
.joe_header__above-nav .joe_dropdown.active .joe_dropdown__link i {
    color: var(--theme) !important
}

.joe_header__above-nav .joe_dropdown.active .joe_dropdown__link a:after,
.joe_header__above-nav .joe_dropdown.active .joe_dropdown__link i:after {
    display: none
}

.joe_header__above-nav .joe_nav_sub-li {
    height: 34px;
    position: relative
}

.joe_header__above-nav .joe_nav_sub-li .m-icon {
    vertical-align: bottom
}

.joe_header__above-nav .joe_nav_sub-li:hover .joe_nav_sub {
    opacity: 1;
    transform: translateX(0) perspective(600px) rotateY(0);
    visibility: visible
}

.joe_header__above-nav .joe_nav_sub {
    border-radius: 0 var(--radius-inner) var(--radius-inner) 0;
    box-shadow: 7px 3px 8px 0 rgba(0, 0, 0, .15);
    left: 100%;
    opacity: 0;
    padding-left: 7px;
    position: absolute;
    top: 0;
    transform: translateX(-20%) perspective(600px) rotateY(-45deg);
    transform-origin: top;
    transition: opacity .35s, visibility .35s, transform .35s;
    visibility: hidden;
    z-index: 10
}

.joe_header__above-nav .joe_nav_sub:before {
    border: 7px solid transparent;
    border-right: 7px solid var(--theme);
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    width: 0
}

.joe_header__above-nav .joe_nav_sub:after {
    background: var(--theme);
    content: "";
    height: 100%;
    left: 7px;
    position: absolute;
    top: 0;
    width: 2px
}

.joe_header__above-nav .joe_nav_sub li {
    background: var(--sib-background)
}

.joe_header__above-search,
.joe_header__above-search-mobile {
    align-items: center;
    display: flex;
    margin-left: auto;
    position: relative
}

.joe_header__above-search .input,
.joe_header__above-search-mobile .input {
    background: var(--classC);
    border: 1px solid transparent;
    border-radius: 17px 0 0 17px;
    color: var(--routine);
    height: 34px;
    padding: 0 14px 0 16px;
    transition: width .35s, border-color .35s, padding-right .35s;
    width: 170px
}

.joe_header__above-search .input:focus,
.joe_header__above-search-mobile .input:focus {
    background: var(--background);
    border-color: var(--theme);
    padding-right: 28px;
    width: 170px
}

.joe_header__above-search .input:focus~.icon,
.joe_header__above-search-mobile .input:focus~.icon {
    transform: translate3d(0, -50%, 0) rotateY(180deg)
}

@keyframes swag {
    0% {
        transform: rotate(-10deg)
    }

    50% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(10deg)
    }
}

.joe_header__above-search .submit,
.joe_header__above-search-mobile .submit {
    background: var(--theme);
    border: none;
    border-radius: 0 17px 17px 0;
    color: #fff;
    height: 34px;
    position: relative;
    width: 50px;
    z-index: 1
}

.joe_header__above-search .submit i,
.joe_header__above-search-mobile .submit i {
    font-size: 20px;
    transform-origin: right bottom
}

.joe_header__above-search .submit:hover i,
.joe_header__above-search-mobile .submit:hover i {
    animation: swag .3s ease infinite alternate
}

.joe_header__above-search .icon,
.joe_header__above-search-mobile .icon {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAmCAYAAADX7PtfAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAHKElEQVRYw93Xe3DNdxrH8ecXiSK7i1qWFWW3rekiE2x3VEemtkkVVbWy4jY6atma2YpS6rJoozvbpRF1qW1EEYIk5xZE5EKE3CQi0SB30VwEIeeWnDi3nPf+kUNTE1R3mNn945n5nZkz8zrP53y/39/3EUCeZsn/HCgi80Rky1MDn/H2vjB6SpBVRMb9V6CI+InIBhE58bOez5b9xm9E0wu//0NTr/4+9SKyX0TGicjiP320kpBd+xCRv/0kUFEUf49OnfJGBwWzWn3UcfCGSa8xO1zxFoi3gLbJyZb8S/QeOIhRb0/hiA1GvjkREfF9bFBEQv0C3ySyrIaEO5DjaCXFYkdttKEyWFEbrKiNNjRmBztLrrIqVsfAYb507tJVryjKi48FisiK8Qs/IL4FVEYbOTY7l3FSjJNCp4PDpnZoOzi+BSKKq+j3wostiqK8/KPBv27+6pja9H03uXYHl3FwyeWgGCcFTscPwXalMdnZU1VPn4GDTCLS90eB2ibHHpXRhtpgRWWwkmqxU4yTEpwcvaUno7kZ7f1dtitds4tVcYcRkZMiskhRlCEPBdUG2/a7oNpoQ2Oyc8zUwrsp+QREp7CxpA6N0YbaaENtvBtrW2lMdsIy8xn00u/4aPly9h04QEBgICKy+oGgymiNUBltaN2xflxwlUmqdArKvyX0RBZf1ejbge5y/zi10cbg4SO4Ul3N8dRUqmprcQETJ01CUZQxHXdotH+jMtpYdLact9RniMzOxX6rDAzlrEzOIKLO+EPMXRqTnbCs88yePQuA18aOpWuPXuyIiKCouBgROfQA0Bq1tqiGsPRsMFbiaigBfQXoy1mZnMnOa6YOMBsHb7ewKbuAWTNnAhAQGEjPPn3JyMmh2W5HUZScDkGd0b5/RuoFqmtLiNj8GSLCxcwEMFTw95RM/l1ruBepxtTW2YKMYiYdPouuycHg4SOpqa8nTqPhclkZDuBcYSEiEtMxaLZHByXmU1qUiYeHByLCsZhIMFayPfMs/yy9TrzZQZzByqeX6pigzSLqbB5z4k+jNTvYcCqbvj4++i/Cwi7kFZxvidq/3+UzYAAi8l6HYLzZfiAoIZfoiHBEBBGhNDcZ9BXkln5LoCaLoMR8punOsCM7j8b6EjBWsDjxDHtuNKE1O9h95RrT14QyJngm01at48u8IkTktPtg6da9e/dffb8PTXbVVG0mqRva4pw8PgBMV6CxHBrLuVhZRMO1Ypw3LrPt8zXYrl8CfTmrUzL5ut2C0jY50TW3om1yEm+B/oNf0rvBYfPff//59pEefUd9BtKPU5oQS+vtMmgsx3W7DJf7GfNV5kyfgoiQpNoNxko+Tsog8u6Cuu8wiLfAb/2Gt7hBRUR6tAdTpmozQV/etjrbYXfBxspzKEpb3MU5x8FYwUxdOirDfXvTvT+1TU569vt17YP+w+RJ0ae4WdUWlcsdJfqKtmd9BWcSDiIijHvdH8xVVFdfYmpiPjqznQP1BmIamu6dRBqTnfCcQkQkukPQPyZdNToqzfZWaLKzuvwiGCpoLcrAnqS917G1/iKfL5iLMUkH3xWiK8hnWX4Vhy0uJi9ayqpYHRqzo+1stbgIePc9u4i83iE4O7128cvRp1mRZ2Hy+qRWQ25aW2d1RW0x3+04/zScTITcNJYmZxFxzcj+2lsM8vUjrrHlXrRR1Q107tLlYodnqaIo2iHDhlp8g+bzaSkcqbO0xiXn80boCdbtOkXuuUJuVRdjqbuI42YxNXmpLFkwh6FvTOCoDdeYP09nVazOpWtuRW20oWtu5Z0PlyMiwR2CIrJbG7WNyPD1DBrxCoEh61snhEYwcc1WXvnLelffgOX6gcE7VN1+3sM2cuwfEU9PRCRtftgWQnbupVf/AQSvXMta3TE0ZgeHbprx7tGz6oGvJxHx8vDyOr35sxWYrp4n8VAEsZGbiNsVTvy+7TzXr0+j+3sHRkx4G1GUnc90885bGhWDh4dHlqIo10Xk9oqDanQWF/M3bUVEPnjo+/CTEkJeXbgOX9+h/GPlIrR7t3I8difHYiLp3evZanf03iIyQkR6iKcXnl6dTymK0lVRFD8RmTpj7XqO2mDIq/6ISM+HgicbnPM+r4TVhS1M26IhYNlGxixcg4hiFpHnOrjd/fL+z8P8XyPmtoVOXl6Zj7xinLrpnLux3EXaDQff1ED4dxD8ZRwisvYxbuHquf8KR0Q2PRJcdcm5JL3BwR2blRablVZg1KhRLkVRej8GOFg6dUJEFj0S3F3NYpPVRrPNSovDweGEBERkx0+YNWYoivL8I8E7Tue8O04nFrsdBzDG3x8R8Xli01NISMiSrdu2kZGTzd7oaERk7xMd12ZFJC0b/8nX9Brsh4ikiUj3Jwpes/Ph3qzLeHb7RbGIeD7xgfRIQsIyH5/+RkVR+j+VCXjkyJHdFEXx/r+b8f8DZyW8Jd6/P38AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDItMjBUMTE6NTI6MjQrMDA6MDA4bfPmAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAyLTIwVDExOjUyOjI0KzAwOjAwSTBLWgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII=);
    background-size: 100% 100%;
    height: 38px;
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translate3d(100%, -50%, 0) rotateY(180deg);
    transition: transform .35s;
    width: 28px
}

.joe_header__above-search .result,
.joe_header__above-search-mobile .result {
    background: var(--sib-background);
    border-radius: var(--radius-inner);
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 60px;
    transform: translate3d(0, 15px, 0);
    transition: visibility .35s, opacity .35s, transform .35s;
    user-select: none;
    visibility: hidden;
    z-index: 2
}

.joe_header__above-search .result.active,
.joe_header__above-search-mobile .result.active {
    opacity: 1;
    transform: translateZ(0);
    visibility: visible
}

.joe_header__above-search .result .item,
.joe_header__above-search-mobile .result .item {
    align-items: center;
    border-bottom: 1px solid var(--classD);
    display: flex;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    padding: 0 10px;
    transition: background .35s
}

.joe_header__above-search .result .item:last-child,
.joe_header__above-search-mobile .result .item:last-child {
    border-bottom: none
}

.joe_header__above-search .result .item:first-child .sort,
.joe_header__above-search-mobile .result .item:first-child .sort {
    background: #fe2d46
}

.joe_header__above-search .result .item:nth-child(2) .sort,
.joe_header__above-search-mobile .result .item:nth-child(2) .sort {
    background: #f60
}

.joe_header__above-search .result .item:nth-child(3) .sort,
.joe_header__above-search-mobile .result .item:nth-child(3) .sort {
    background: #faa90e
}

.joe_header__above-search .result .item:hover,
.joe_header__above-search-mobile .result .item:hover {
    background: var(--classC)
}

.joe_header__above-search .result .item .sort,
.joe_header__above-search-mobile .result .item .sort {
    background: #7f7f8c;
    border-radius: 2px;
    color: #fff;
    font-weight: 500;
    height: 18px;
    line-height: 18px;
    margin-right: 8px;
    text-align: center;
    width: 18px
}

.joe_header__above-search .result .item .text,
.joe_header__above-search-mobile .result .item .text {
    color: var(--routine);
    flex: 1;
    font-size: 12px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_header__above-search .result .item .views,
.joe_header__above-search-mobile .result .item .views {
    color: var(--seat);
    font-size: 12px;
    margin-left: 5px
}

.joe_header__above-search-mobile input {
    flex: 1;
    width: 100%
}

.joe_header__above-searchicon {
    color: var(--routine);
    cursor: pointer;
    display: none;
    font-size: 23px !important
}

.joe_header__above-slideicon {
    color: var(--routine);
    cursor: pointer;
    display: none;
    height: 20px;
    width: 20px
}

.joe_header__above.active {
    transform: translate3d(0, -60px, 0)
}

.joe_header__above.glass {
    backdrop-filter: blur(4px);
    background: var(--glass-background)
}

.joe_header__above.solid {
    backdrop-filter: unset;
    background: var(--background);
    box-shadow: unset
}

.joe_header__below {
    border-top: 1px solid var(--classC);
    height: 45px;
    position: relative
}

.joe_header__below-title {
    animation: showHeaderTitle .35s;
    color: var(--main);
    display: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 45px;
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_header__below-class {
    display: flex
}

.joe_header__below-class .item {
    color: var(--minor);
    height: 45px;
    line-height: 45px;
    margin-right: 15px;
    transition: color .35s;
    white-space: nowrap
}

.joe_header__below-class .item.active,
.joe_header__below-class .item:hover {
    color: var(--theme)
}

.joe_header__below-class .joe_dropdown {
    margin-right: 15px
}

.joe_header__below-class .joe_dropdown__link .item {
    margin-right: 3px
}

.joe_header__below-class .joe_dropdown__menu {
    text-align: center;
    width: 110px
}

.joe_header__below-class .joe_dropdown__menu a {
    color: var(--classF);
    display: block;
    height: 34px;
    line-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .35s, background .35s;
    white-space: nowrap
}

.joe_header__below-class .joe_dropdown__menu a.active,
.joe_header__below-class .joe_dropdown__menu a:hover {
    background: var(--classD);
    color: var(--theme)
}

.joe_header__below-sign {
    margin-left: auto
}

.joe_header__below-sign .joe_dropdown__link {
    align-items: center;
    color: var(--minor);
    cursor: pointer;
    display: flex;
    height: 45px;
    transition: color .35s;
    user-select: none
}

.joe_header__below-sign .joe_dropdown__link .icon {
    fill: var(--minor);
    margin-right: 3px;
    transition: fill .35s
}

.joe_header__below-sign .joe_dropdown__link:hover {
    color: var(--theme)
}

.joe_header__below-sign .joe_dropdown__link:hover .icon {
    fill: var(--theme)
}

.joe_header__below-sign .joe_dropdown__menu {
    text-align: center;
    width: 110px
}

.joe_header__below-sign .joe_dropdown__menu a {
    color: var(--minor);
    display: block;
    height: 34px;
    line-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .35s, background .35s;
    white-space: nowrap
}

.joe_header__below-sign .joe_dropdown__menu a.active,
.joe_header__below-sign .joe_dropdown__menu a:hover {
    background: var(--classD);
    color: var(--theme)
}

.joe_header__below-sign .item {
    align-items: center;
    color: var(--minor);
    display: flex;
    height: 45px
}

.joe_header__below-sign .item .icon {
    fill: var(--minor);
    margin-right: 5px
}

.joe_header__below-sign .item a {
    color: var(--minor);
    transition: color .25s
}

.joe_header__below-sign .item a:hover {
    color: var(--theme)
}

.joe_header__below-sign .item .split {
    margin: 0 5px
}

.joe_header__searchout {
    background: var(--background);
    border-top: 1px solid var(--classC);
    left: 0;
    position: absolute;
    right: 0;
    top: 60px;
    transform: translate3d(0, -100%, 0);
    transition: transform .35s, visibility .35s;
    visibility: hidden;
    z-index: 5
}

.joe_header__searchout .joe_container {
    margin-bottom: 10px !important
}

.joe_header__searchout.active {
    transform: translateZ(0);
    visibility: visible
}

.joe_header__searchout-inner {
    padding: 15px 0;
    width: 100%
}

.joe_header__searchout-inner .search {
    align-items: center;
    display: flex;
    width: 100%
}

.joe_header__searchout-inner .search input {
    background: var(--classD);
    border: 1px solid var(--classB);
    border-radius: 2px 0 0 2px;
    border-right: none;
    color: var(--routine);
    flex: 1;
    height: 36px;
    padding: 0 10px
}

.joe_header__searchout-inner .search button {
    background: var(--theme);
    border: none;
    border-radius: 0 2px 2px 0;
    color: #fff;
    height: 36px;
    padding: 0 16px
}

.joe_header__searchout-inner .title {
    align-items: center;
    color: var(--routine);
    display: flex;
    font-size: 14px;
    padding: 14px 0 10px
}

.joe_header__searchout-inner .title .joe-font {
    color: var(--routine);
    font-size: 20px;
    margin-right: 5px
}

.joe_header__searchout-inner .cloud {
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px -5px;
    max-height: 250px;
    overflow-y: auto;
    overscroll-behavior: contain
}

.joe_header__searchout-inner .cloud .item {
    padding: 4px
}

.joe_header__searchout-inner .cloud .item a {
    border-radius: 2px;
    color: #fff;
    display: block;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    padding: 0 10px
}

.joe_header__slideout {
    background: var(--classD);
    bottom: 0;
    left: 0;
    max-width: 480px;
    position: fixed;
    top: 0;
    transform: translate3d(-100%, 0, 0);
    transition: transform .35s, visibility .35s;
    visibility: hidden;
    width: 78%;
    z-index: 10
}

.joe_header__slideout-wrap {
    -webkit-overflow-scrolling: touch;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 135px 15px 15px;
    position: relative
}

.joe_header__slideout-wrap::-webkit-scrollbar {
    display: none
}

.joe_header__slideout-wrap .social-account {
    border: unset;
    margin-bottom: 10px;
    padding: 0
}

.joe_header__slideout.active {
    transform: translateZ(0);
    visibility: visible
}

.joe_header__slideout-image {
    height: 150px;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.joe_header__slideout-author {
    background: var(--background);
    border-radius: var(--radius-wrap);
    box-shadow: var(--box-shadow);
    display: flex;
    margin-bottom: 15px;
    padding: 15px
}

.joe_header__slideout-author .avatar {
    border-radius: var(--radius-inner);
    height: 50px;
    margin-right: 10px;
    width: 50px
}

.joe_header__slideout-author .info {
    line-height: 25px;
    overflow: hidden
}

.joe_header__slideout-author .info .level {
    height: 23px;
    margin-left: 2px
}

.joe_header__slideout-author .info .link,
.joe_header__slideout-author .info .motto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_header__slideout-author .info .link {
    color: var(--main);
    display: block;
    font-size: 15px;
    font-weight: 500
}

.joe_header__slideout-author .info .motto {
    color: var(--routine);
    font-size: 12px
}

.joe_header__slideout-count {
    background: var(--background);
    border-radius: var(--radius-wrap);
    box-shadow: var(--box-shadow);
    margin-bottom: 15px;
    padding: 10px 15px
}

.joe_header__slideout-count .item {
    align-items: center;
    color: var(--routine);
    display: flex;
    padding: 5px 0
}

.joe_header__slideout-count .item .joe-font {
    color: var(--routine);
    margin-right: 5px
}

.joe_header__slideout-count .item strong {
    color: var(--theme);
    font-weight: 500
}

.joe_header__slideout-menu {
    background: var(--background);
    border-radius: var(--radius-wrap);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    padding: 10px 15px
}

.joe_header__slideout-menu .link {
    align-items: center;
    color: var(--main);
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    transition: color .15s
}

.joe_header__slideout-menu .link a {
    color: var(--routine);
    transition: color .15s
}

.joe_header__slideout-menu .link .joe-font {
    color: var(--minor);
    transition: transform .15s, fill .15s
}

.joe_header__slideout-menu .link.in,
.joe_header__slideout-menu .link.in a {
    color: var(--theme)
}

.joe_header__slideout-menu .link.in .joe-font {
    color: var(--theme);
    transform: rotate(90deg)
}

.joe_header__slideout-menu .current a {
    color: var(--theme);
    font-size: 15px;
    font-weight: 500
}

.joe_header__slideout-menu .slides {
    border-left: 1px solid var(--classC);
    display: none;
    padding-left: 15px
}

.joe_header__slideout-menu .slides .link {
    color: var(--routine)
}

.joe_header__slideout-menu .slides .current {
    color: var(--theme);
    font-size: 15px;
    font-weight: 500
}

.joe_header__toc {
    background: var(--classD);
    bottom: 0;
    left: 0;
    max-width: 480px;
    position: fixed;
    top: 0;
    transform: translate3d(-100%, 0, 0);
    transition: transform .35s, visibility .35s;
    visibility: hidden;
    width: 70%;
    z-index: 10
}

.joe_header__toc-wrap {
    -webkit-overflow-scrolling: touch;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative
}

.joe_header__toc-wrap::-webkit-scrollbar {
    display: none
}

.joe_header__toc.active {
    transform: translateZ(0);
    visibility: visible
}

.joe_header__toc .toc_top {
    position: relative;
    z-index: 2
}

.joe_header__toc .toc_top h3 {
    background: rgba(0, 0, 0, .35);
    border-radius: 10px 2px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    left: 20px;
    letter-spacing: 2px;
    padding: 6px 10px;
    position: absolute;
    top: 60px;
    z-index: 1
}

.joe_header__toc .toc_top h3 span {
    color: #ccc;
    display: block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0
}

.joe_header__toc .toc_top img {
    display: block;
    width: 100%
}

.joe_header__toc #js-toc-mobile {
    max-height: calc(100vh - 150px);
    overflow: overlay;
    padding: 20px 15px 40px 0;
    position: relative;
    top: -5px;
    user-select: none;
    z-index: 1
}

.joe_header__toc #js-toc-mobile>.toc-list {
    overflow: hidden;
    position: relative
}

.joe_header__toc #js-toc-mobile>.toc-list li {
    list-style: none
}

.joe_header__toc #js-toc-mobile .toc-list {
    font-size: 14px;
    margin: 0;
    padding-left: 14px;
    position: relative;
    z-index: 1
}

.joe_header__toc #js-toc-mobile .toc-list .toc-list-item {
    padding: 6px 0;
    position: relative
}

.joe_header__toc #js-toc-mobile .toc-list .toc-list-item a {
    color: var(--main);
    font-size: 14px
}

.joe_header__toc #js-toc-mobile .toc-list .toc-list {
    font-size: 13px
}

.joe_header__toc #js-toc-mobile .toc-nodata {
    background: var(--classD);
    color: var(--minor);
    font-style: italic;
    margin-top: 60px;
    padding: 20px;
    text-align: center;
    user-select: none
}

.joe_header__toc #js-toc-mobile .toc-nodata em {
    background: url(../../img/folder_empty.png) no-repeat 50%;
    background-size: auto 100%;
    display: block;
    height: 90px;
    margin: 0 auto 14px;
    width: 90px
}

.joe_header__mask {
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .5);
    bottom: 0;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: visibility .35s, opacity .35s;
    visibility: hidden;
    z-index: 4
}

.joe_header__mask.active {
    opacity: 1;
    visibility: visible
}

.joe_header__mask.slideout {
    z-index: 6
}

.joe_index {
    background: var(--background);
    border-radius: var(--radius-wrap);
    box-shadow: var(--box-shadow)
}

.joe_index__title {
    align-items: center;
    border-bottom: 1px solid var(--classC);
    display: flex
}

.joe_index__title-title {
    align-items: center;
    color: var(--theme);
    display: flex;
    font-weight: 500;
    height: 44px;
    line-height: 44px;
    position: relative
}

.joe_index__title-title .item {
    color: var(--routine);
    cursor: pointer;
    margin-right: 16px;
    transition: color .35s;
    user-select: none
}

.joe_index__title-title .item.active {
    color: var(--theme);
    font-weight: 700
}

.joe_index__title-title .totals {
    background: var(--sub-background);
    border-radius: 3px;
    color: var(--minor);
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    margin-left: 5px;
    padding: 0 5px
}

.joe_index__title-title .line {
    background: var(--theme);
    border-radius: 1px;
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    transition: left .35s, width .35s
}

.joe_index__title-title.default .item {
    cursor: default
}

.joe_index__title-title.pl-15 {
    padding-left: 15px
}

.joe_index__title-notice {
    align-items: center;
    display: flex;
    height: 40px;
    margin-left: auto
}

.joe_index__title-notice i,
.joe_index__title-notice svg {
    margin-right: 2px;
    vertical-align: bottom
}

.joe_index__title-notice a {
    color: var(--minor);
    line-height: 20px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .35s;
    white-space: nowrap
}

.joe_index__title-notice a:hover {
    color: var(--theme)
}

.joe_index__hot {
    padding: 0 15px
}

.joe_index__hot.categories {
    padding-bottom: 10px
}

.joe_index__hot-list {
    column-gap: 15px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 12px
}

.joe_index__hot-list.hotlist .item {
    margin-bottom: 0
}

.joe_index__hot-list.hotlist .item .link {
    cursor: default
}

.joe_index__hot-list.hotlist .item .link.clickable {
    cursor: pointer
}

.joe_index__hot-list.hotlist .item .link .inner {
    height: 120px
}

.joe_index__hot-list.hotlist .item .link .inner .image {
    height: 100%
}

.joe_index__hot-list.hotlist .item .link .inner .title {
    align-items: center;
    background: rgba(0, 0, 0, .4);
    bottom: 0;
    color: #fff;
    display: flex;
    flex-wrap: nowrap;
    font-size: 14px;
    height: 30px;
    justify-content: center;
    left: 0;
    position: absolute;
    right: auto;
    top: auto;
    transition: background .5s;
    width: 100%;
    will-change: background
}

.joe_index__hot-list.hotlist .item .link .inner:hover .image {
    background: rgba(0, 0, 0, .5);
    transform: scale(1.1)
}

.joe_index__hot-list.hotlist .item .link .inner:hover .title {
    background: rgba(0, 0, 0, .3)
}

.joe_index__hot-list.hotlist .item .link .inner .post-nums {
    align-items: center;
    background-color: #f84c39;
    background-image: linear-gradient(90deg, #fc712a, #f84c39);
    border-radius: 8px;
    color: #fff;
    display: flex;
    font-size: 12px;
    height: 18px;
    padding: 0 8px;
    position: absolute;
    right: 5px;
    top: 5px;
    white-space: nowrap;
    z-index: 1
}

.joe_index__hot-list.hotlist .item:nth-child(2) {
    animation-delay: .1s
}

.joe_index__hot-list.hotlist .item:nth-child(3) {
    animation-delay: .2s
}

.joe_index__hot-list.hotlist .item:nth-child(4) {
    animation-delay: .3s
}

.joe_index__hot-list .item {
    border: 1px solid var(--classC);
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden
}

.joe_index__hot-list .item .link {
    display: block
}

.joe_index__hot-list .item .link .inner {
    position: relative
}

.joe_index__hot-list .item .link .inner:hover .image {
    opacity: .85
}

.joe_index__hot-list .item .link .inner:hover .title {
    background: var(--classC)
}

.joe_index__hot-list .item .link .inner .image {
    border-radius: var(--radius-inner) var(--radius-inner) 0 0;
    height: 120px;
    object-fit: cover;
    transition: opacity .35s, transform .3s;
    width: 100%;
    will-change: transform
}

.joe_index__hot-list .item .link .inner .title {
    background: var(--classD);
    border-radius: 0 0 var(--radius-inner) var(--radius-inner);
    color: var(--minor);
    font-size: 13px;
    line-height: 32px;
    overflow: hidden;
    padding: 0 8px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_index__hot-list .item .link .inner .post-nums {
    align-items: center;
    background-color: #4f3edd;
    background-image: linear-gradient(90deg, #2afcfc, #4f3edd);
    border-radius: 8px;
    color: #fff;
    display: flex;
    font-size: 12px;
    font-style: normal;
    height: 18px;
    padding: 0 8px;
    position: absolute;
    right: 5px;
    top: 5px;
    white-space: nowrap;
    z-index: 1
}

.joe_index__hot-list-tag {
    overflow: hidden;
    padding-top: 20px
}

.joe_index__hot-list-tag .item {
    background: var(--background-tags);
    border: 1px solid var(--classB);
    border-radius: 3px;
    color: var(--routine);
    float: left;
    font-size: 14px;
    margin: 0 6px 10px;
    transition: transform .25s
}

.joe_index__hot-list-tag .item a {
    color: var(--routine);
    display: block;
    font-size: 0;
    height: 28px;
    line-height: 28px;
    padding: 0 10px
}

.joe_index__hot-list-tag .item a span {
    display: inline-block;
    font-size: 14px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_index__hot-list-tag .item a em {
    color: var(--theme);
    display: inline-block;
    font-size: 14px;
    font-style: normal;
    padding-left: 5px;
    vertical-align: top
}

.joe_index__hot-list-tag .item:hover {
    background: var(--theme);
    border-color: var(--theme);
    box-shadow: var(--box-shadow-tags);
    transform: scale(1.1)
}

.joe_index__hot-list-tag .item:hover a,
.joe_index__hot-list-tag .item:hover a em {
    color: var(--classD)
}

.joe_aside {
    margin-left: 15px;
    padding-bottom: 15px
}

.joe_aside.hide {
    display: none
}

.joe_aside.pos_left #he-plugin-simple {
    left: 4px;
    right: auto !important
}

.joe_aside__item {
    border-radius: var(--radius-wrap);
    box-shadow: var(--box-shadow);
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
    width: 280px
}

.joe_aside__item:last-child {
    margin-bottom: 0;
    position: sticky;
    top: 75px;
    transition: top .35s
}

.joe_aside__item-title {
    align-items: center;
    border-bottom: 1px solid var(--classC);
    color: var(--classF);
    display: flex;
    font-size: 16px;
    font-weight: 500;
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    position: relative
}

.joe_aside__item-title .joe-font {
    color: var(--theme);
    font-size: 20px;
    font-weight: 700;
    margin-right: 5px
}

.joe_aside__item-title .line {
    background: #54b5db;
    height: 1px;
    margin-left: 12px;
    width: 10px
}

.joe_aside__item-contain {
    padding: 15px;
    position: relative
}

.joe_aside__item.author {
    background: var(--background);
    padding: 45px 15px 15px
}

.joe_aside__item.author:before {
    background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0), var(--background));
    content: "";
    height: 30px;
    left: 0;
    position: absolute;
    top: 90px;
    width: 100%;
    z-index: 2
}

.joe_aside__item.author #he-plugin-simple {
    right: 4px;
    top: 4px;
    z-index: 6
}

.joe_aside__item.author #he-plugin-simple .s-sticker {
    background-color: rgba(0, 0, 0, .5) !important
}

.joe_aside__item.author #he-plugin-simple .s-sticker-cond img {
    position: relative;
    top: -2px
}

.joe_aside__item.author #he-plugin-simple.he_left {
    left: 4px;
    right: auto
}

.joe_aside__item.author #he-plugin-simple>div:last-child {
    margin-top: -5px !important
}

.joe_aside__item.author #he-plugin-simple>div:last-child>div {
    background-color: #242422;
    border-radius: 4px;
    overflow: hidden
}

.joe_aside__item.author #canvas-strips {
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 5
}

.joe_aside__item.author:hover #canvas-strips {
    opacity: 1
}

.joe_aside__item.author .image {
    border-radius: var(--radius-wrap) var(--radius-wrap) 0 0;
    height: 120px;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.joe_aside__item.author .user {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-bottom: 15px;
    position: relative;
    z-index: 4
}

.joe_aside__item.author .user .avatar_wrapper {
    height: 75px;
    margin-bottom: 12px;
    position: relative;
    user-select: none;
    width: 75px
}

.joe_aside__item.author .user .avatar_wrapper.round .avatar {
    border-radius: 6px
}

.joe_aside__item.author .user .avatar {
    background: var(--classC);
    border-radius: 50%;
    display: block;
    height: 75px;
    object-fit: cover;
    overflow: hidden;
    padding: 5px;
    transition: transform .75s;
    width: 75px
}

.joe_aside__item.author .user .avatar:hover {
    transform: rotate(1turn)
}

.joe_aside__item.author .user .avatar_frame {
    filter: drop-shadow(1px 1px 2px var(--classL));
    height: 75px;
    left: 0;
    max-width: unset;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: scale(1.23);
    width: 75px;
    z-index: 2
}

.joe_aside__item.author .user .avatar_frame.honor-light,
.joe_aside__item.author .user .avatar_frame.rainbow-girl {
    top: 1px
}

.joe_aside__item.author .user .avatar_frame.bird-girl {
    height: 80px;
    left: -2px;
    top: -2px;
    width: 80px
}

.joe_aside__item.author .user .avatar_frame.purple-crystal {
    height: 74px;
    top: 2px;
    width: 74px
}

.joe_aside__item.author .user .avatar_frame.flower-ring {
    height: 78px;
    left: -3px;
    top: -2px;
    width: 78px
}

.joe_aside__item.author .user .avatar_frame.lantern-cloud {
    height: 78px;
    left: -5px;
    top: -3px;
    width: 78px
}

.joe_aside__item.author .user .avatar_frame.ease-cloud {
    height: 80px;
    left: -1px;
    top: -3px;
    width: 80px
}

.joe_aside__item.author .user .avatar_frame.festival-luck {
    height: 78px;
    left: -2px;
    top: -3px;
    width: 78px
}

.joe_aside__item.author .user .avatar_frame.happy-mouse {
    height: 80px;
    left: -2px;
    top: 1px;
    width: 80px
}

.joe_aside__item.author .user .avatar_frame.two-mouse {
    height: 82px;
    left: -3px;
    top: -4px;
    width: 82px
}

.joe_aside__item.author .user .avatar_frame.bull-puff {
    left: -1px;
    top: -1px;
    width: 76px
}

.joe_aside__item.author .user .avatar_frame.christmas-knot {
    height: 90px;
    left: -7px;
    top: -15px;
    width: 90px
}

.joe_aside__item.author .user .avatar_frame.christmas-ring {
    height: 80px;
    left: -4px;
    top: -2px;
    width: 80px
}

.joe_aside__item.author .user .avatar_frame.santa-claus {
    height: 88px;
    left: -13px;
    top: -8px;
    width: 88px
}

.joe_aside__item.author .user .avatar_frame.catcus {
    height: 82px;
    left: -3px;
    top: -4px;
    width: 82px
}

.joe_aside__item.author .user .avatar_frame.rabbit {
    height: 90px;
    left: -7px;
    top: -8px;
    width: 90px
}

.joe_aside__item.author .user .avatar_frame.gaoda {
    height: 98px;
    left: -12px;
    top: -11px;
    width: 98px
}

.joe_aside__item.author .user .avatar_frame.donut {
    height: 80px;
    left: -2px;
    top: -6px;
    width: 78px
}

.joe_aside__item.author .user .avatar_frame.bat {
    height: 98px;
    left: -11px;
    top: -12px;
    width: 98px
}

.joe_aside__item.author .user .avatar_frame.bilibili {
    height: 90px;
    left: -11px;
    top: -10px;
    width: 90px
}

.joe_aside__item.author .user .avatar_frame.constellation {
    height: 90px;
    left: -7px;
    top: -8px;
    width: 90px
}

.joe_aside__item.author .user .avatar_frame.putin {
    height: 97px;
    left: -9px;
    top: -10px;
    width: 97px
}

.joe_aside__item.author .user .avatar_frame.princess {
    height: 94px;
    left: -10px;
    top: -10px;
    width: 94px
}

.joe_aside__item.author .user .avatar_frame.mangci {
    height: 97px;
    left: -11px;
    top: -11px;
    width: 97px
}

.joe_aside__item.author .user .avatar_frame.maid {
    height: 98px;
    left: -11px;
    top: -13px;
    width: 98px
}

.joe_aside__item.author .user .avatar_frame.gulu,
.joe_aside__item.author .user .avatar_frame.orchid {
    height: 98px;
    left: -11px;
    top: -11px;
    width: 98px
}

.joe_aside__item.author .user .avatar_frame.gufeng {
    height: 90px;
    left: -5px;
    top: -8px;
    width: 90px
}

.joe_aside__item.author .user .avatar_widget {
    left: 0;
    max-width: unset;
    pointer-events: none;
    position: absolute;
    top: -10px;
    width: 75px;
    z-index: 3
}

.joe_aside__item.author .user .avatar_widget.wing {
    top: -28px
}

.joe_aside__item.author .user .avatar_widget.rotate-heart {
    top: 8px
}

.joe_aside__item.author .user .avatar_widget.zouni {
    left: 0;
    top: 52px
}

.joe_aside__item.author .user .avatar_widget.fall-in-love {
    left: -23px;
    top: -13px;
    width: 115px
}

.joe_aside__item.author .user .link {
    color: var(--theme);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    text-align: center;
    text-shadow: 1px 1px 8px var(--theme)
}

.joe_aside__item.author .user .link .level {
    height: 24px;
    margin-left: 2px
}

.joe_aside__item.author .user .motto {
    color: var(--main);
    text-align: center;
    word-break: break-word
}

.joe_aside__item.author .count {
    align-items: center;
    display: flex;
    padding-bottom: 10px;
    width: 100%
}

.joe_aside__item.author .count .item {
    align-items: center;
    color: var(--routine);
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: 12px;
    min-width: 0;
    position: relative
}

.joe_aside__item.author .count .item:after {
    background: var(--classC);
    content: "";
    height: 30px;
    position: absolute;
    right: 0;
    top: 12px;
    width: 1px
}

.joe_aside__item.author .count .item:last-child:after {
    display: none
}

.joe_aside__item.author .count .item .num {
    color: var(--title);
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 3px;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: var(--text_shadow);
    white-space: nowrap
}

.joe_aside__item.author .social-account {
    align-items: center;
    border-top: 1px solid var(--classC);
    display: flex;
    font-size: 14px;
    justify-content: space-around;
    padding-top: 10px;
    text-align: center
}

.joe_aside__item.author .social-account a {
    color: var(--minor);
    display: inline-block;
    font-size: 0;
    margin: 0 2px;
    transform: scale(.9);
    transition: transform .2s
}

.joe_aside__item.author .social-account a img {
    border-radius: 3px;
    display: inline-block;
    height: 20px
}

.joe_aside__item.author .social-account a:hover {
    transform: scale(1)
}

.joe_aside__item.author .list {
    padding-top: 15px
}

.joe_aside__item.author .list .item {
    align-items: center;
    display: flex;
    justify-content: space-between;
    line-height: 30px
}

.joe_aside__item.author .list .item .link {
    color: var(--routine);
    max-width: 85%;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_aside__item.author .list .item .link:after {
    background: var(--theme);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    transition: all .35s;
    width: 0
}

.joe_aside__item.author .list .item .link:hover {
    color: var(--theme)
}

.joe_aside__item.author .list .item .link:hover:after {
    width: 100%
}

.joe_aside__item.newest {
    background: var(--background)
}

.joe_aside__item.newest .list {
    padding-top: 1px
}

.joe_aside__item.newest .list .item {
    align-items: center;
    display: flex;
    justify-content: space-between;
    line-height: 20px;
    margin-bottom: 15px
}

.joe_aside__item.newest .list .item .joe-font {
    color: var(--routine);
    font-size: 18px;
    transition: transform .3s
}

.joe_aside__item.newest .list .item:hover .link {
    color: var(--theme)
}

.joe_aside__item.newest .list .item:hover .link:after {
    width: 100%
}

.joe_aside__item.newest .list .item:hover .joe-font {
    color: var(--theme);
    transform: rotate(-135deg)
}

.joe_aside__item.newest .list .item:last-child {
    margin-bottom: 0
}

.joe_aside__item.newest .list .item .title {
    align-items: center;
    color: var(--minor);
    display: flex;
    font-size: 12px;
    margin-bottom: 5px
}

.joe_aside__item.newest .list .item .title .text {
    color: var(--theme);
    font-size: 14px;
    font-weight: 500;
    margin: 0 5px
}

.joe_aside__item.newest .list .item .link {
    color: var(--routine);
    max-width: 85%;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_aside__item.newest .list .item .link:after {
    background: var(--theme);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    transition: all .35s;
    width: 0
}

.joe_aside__item.notice {
    background: var(--background)
}

.joe_aside__item.notice .joe_aside__item-title,
.joe_aside__item.notice .joe_aside__item-title .joe-font {
    color: var(--notice)
}

.joe_aside__item.notice .joe_aside__item-contain {
    animation: var(--animation-notice);
    background: var(--background-notice);
    box-shadow: var(--shadow-notice)
}

.joe_aside__item.notice .notice_content {
    color: var(--routine);
    font-size: 14px;
    white-space: pre-line;
    word-break: break-word
}

.joe_aside__item.notice .notice_content a[href*=http] {
    color: var(--theme);
    max-width: 85%;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_aside__item.notice .notice_content a[href*=http]:after {
    background: var(--theme);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    transition: all .35s;
    width: 0
}

.joe_aside__item.notice .notice_content a[href*=http]:hover {
    color: var(--theme)
}

.joe_aside__item.notice .notice_content a[href*=http]:hover:after {
    width: 100%
}

.joe_aside__item.reward {
    background: var(--background)
}

.joe_aside__item.reward .pay-tab-content {
    height: 310px;
    padding: 0 15px;
    width: 100%
}

.joe_aside__item.reward .pay-tab-content input[type=radio]:checked+label+div {
    display: block;
    left: 0;
    opacity: 1
}

.joe_aside__item.reward .pay-tab-content input[type=radio]:checked+label {
    border-bottom-color: var(--theme);
    color: var(--theme)
}

.joe_aside__item.reward .pay-tab-content ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    position: relative
}

.joe_aside__item.reward .pay-tab-content ul>li {
    flex: 1;
    line-height: 40px;
    list-style-type: none;
    margin: 0 3px;
    text-align: center
}

.joe_aside__item.reward .pay-tab-content ul>li:hover label {
    color: var(--theme)
}

.joe_aside__item.reward .pay-tab-content ul>li label {
    border-bottom: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    transition: color .3s;
    width: 100%
}

.joe_aside__item.reward .pay-tab-content ul>li>input {
    display: none
}

.joe_aside__item.reward .pay-tab-content ul>li>div {
    left: 300px;
    opacity: 0;
    position: absolute;
    width: 100%
}

.joe_aside__item.reward .pay-tab-content ul>li .reward_image {
    height: 250px;
    width: 250px
}

.joe_aside__item.qrcode {
    background: var(--background)
}

.joe_aside__item.qrcode .qrcode_img {
    border-radius: 5px;
    display: block;
    user-select: none;
    width: 100%
}

.joe_aside__item.qrcode .qrcode_description {
    color: var(--routine);
    font-size: 14px;
    margin-top: 10px
}

.joe_aside__item.timelife {
    background: var(--background)
}

.joe_aside__item.timelife .item {
    margin-bottom: 15px
}

.joe_aside__item.timelife .item:last-child {
    margin-bottom: 0
}

.joe_aside__item.timelife .item .title {
    align-items: center;
    color: var(--minor);
    display: flex;
    font-size: 12px;
    margin-bottom: 5px
}

.joe_aside__item.timelife .item .title .text {
    color: var(--theme);
    font-size: 14px;
    font-weight: 500;
    margin: 0 5px
}

.joe_aside__item.timelife .item .progress {
    align-items: center;
    display: flex
}

.joe_aside__item.timelife .item .progress-bar {
    background: var(--classC);
    border-radius: 5px;
    flex: 1;
    height: 10px;
    margin-right: 5px;
    min-width: 0;
    overflow: hidden;
    width: 0
}

.joe_aside__item.timelife .item .progress-bar-inner {
    animation: progress .75s linear infinite;
    border-radius: 5px;
    height: 100%;
    transition: width .35s;
    width: 0
}

.joe_aside__item.timelife .item .progress-bar-inner-0 {
    background: #bde6ff;
    background-image: linear-gradient(135deg, #50bfff 25%, transparent 0, transparent 50%, #50bfff 0, #50bfff 75%, transparent 0, transparent);
    background-size: 30px 30px
}

.joe_aside__item.timelife .item .progress-bar-inner-1 {
    background: #ffd980;
    background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 0, transparent 50%, #f7ba2a 0, #f7ba2a 75%, transparent 0, transparent);
    background-size: 30px 30px
}

.joe_aside__item.timelife .item .progress-bar-inner-2 {
    background: #ffa9a9;
    background-image: linear-gradient(135deg, #ff4949 25%, transparent 0, transparent 50%, #ff4949 0, #ff4949 75%, transparent 0, transparent);
    background-size: 30px 30px
}

.joe_aside__item.timelife .item .progress-bar-inner-3 {
    background: #67c23a;
    background-image: linear-gradient(135deg, #4f9e28 25%, transparent 0, transparent 50%, #4f9e28 0, #4f9e28 75%, transparent 0, transparent);
    background-size: 30px 30px
}

.joe_aside__item.timelife .item .progress-percentage {
    color: var(--minor);
    width: 38px
}

.joe_aside__item.weather {
    background: var(--background)
}

.joe_aside__item.weather .joe_aside__item-contain {
    min-height: 300px
}

.joe_aside__item.hot {
    background: var(--background)
}

.joe_aside__item.hot .empty {
    color: var(--routine);
    text-align: center
}

.joe_aside__item.hot .item {
    margin-bottom: 15px
}

.joe_aside__item.hot .item:last-child {
    margin-bottom: 0
}

.joe_aside__item.hot .item:first-child .link .sort {
    background: #ff183e
}

.joe_aside__item.hot .item:nth-child(2) .link .sort {
    background: #ff5c38
}

.joe_aside__item.hot .item:nth-child(3) .link .sort {
    background: #ffb821
}

.joe_aside__item.hot .item .link {
    border-radius: var(--radius-inner);
    display: block;
    overflow: hidden;
    position: relative
}

.joe_aside__item.hot .item .link:hover .image {
    transform: scale(1.2)
}

.joe_aside__item.hot .item .link .sort {
    background: #7f7f8c;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    position: absolute;
    right: -20px;
    text-align: center;
    top: 5px;
    transform: rotate(45deg);
    width: 65px;
    z-index: 1
}

.joe_aside__item.hot .item .link .image {
    height: 130px;
    object-fit: cover;
    transition: transform .35s;
    width: 100%
}

.joe_aside__item.hot .item .link .describe {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75));
    bottom: 0;
    color: var(--seat);
    font-size: 12px;
    left: 0;
    padding: 10px;
    position: absolute;
    right: 0;
    z-index: 1
}

.joe_aside__item.hot .item .link .describe h6 {
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_aside__item.today {
    background: var(--background)
}

.joe_aside__item.today .joe_aside__item-contain .item {
    position: relative
}

.joe_aside__item.today .joe_aside__item-contain .item .tail {
    border-left: 1px solid var(--classC);
    height: 100%;
    left: 6px;
    position: absolute;
    top: 0
}

.joe_aside__item.today .joe_aside__item-contain .item .head {
    background: var(--background);
    border-radius: 50%;
    height: 13px;
    position: absolute;
    width: 13px
}

.joe_aside__item.today .joe_aside__item-contain .item .desc {
    padding-bottom: 15px;
    padding-left: 24px;
    position: relative;
    top: -2px
}

.joe_aside__item.today .joe_aside__item-contain .item .desc time {
    display: block;
    font-weight: 600;
    margin-bottom: 7px
}

.joe_aside__item.today .joe_aside__item-contain .item .desc a {
    color: var(--routine);
    display: block;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .25s;
    white-space: nowrap
}

.joe_aside__item.today .joe_aside__item-contain .item .desc a:hover {
    color: var(--theme)
}

.joe_aside__item.today .joe_aside__item-contain .item:nth-child(2n) .head {
    border: 1px solid #f48b29
}

.joe_aside__item.today .joe_aside__item-contain .item:nth-child(2n) .desc {
    color: #f48b29
}

.joe_aside__item.today .joe_aside__item-contain .item:nth-child(odd) .head {
    border: 1px solid #f05454
}

.joe_aside__item.today .joe_aside__item-contain .item:nth-child(odd) .desc {
    color: #f05454
}

.joe_aside__item.today .joe_aside__item-contain .item:last-child .desc {
    padding-bottom: 0
}

.joe_aside__item.newreply {
    background: var(--background)
}

.joe_aside__item.newreply .empty {
    color: var(--routine);
    text-align: center
}

.joe_aside__item.newreply .item {
    border-bottom: 1px dashed var(--classC);
    margin-bottom: 15px;
    padding-bottom: 15px
}

.joe_aside__item.newreply .item:last-child {
    border-bottom-color: transparent;
    margin-bottom: 0;
    padding-bottom: 0
}

.joe_aside__item.newreply .item .user {
    display: flex;
    margin-bottom: 12px
}

.joe_aside__item.newreply .item .user .avatar {
    border: 1px solid var(--classA);
    border-radius: 50%;
    height: 40px;
    margin-right: 12px;
    min-height: 40px;
    min-width: 40px;
    padding: 3px;
    width: 40px
}

.joe_aside__item.newreply .item .user .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.joe_aside__item.newreply .item .user .info .author {
    color: var(--main);
    font-weight: 600;
    margin-bottom: 4px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_aside__item.newreply .item .user .info .date {
    color: var(--minor);
    font-size: 12px
}

.joe_aside__item.newreply .item .reply {
    background: var(--classD);
    border-radius: 6px;
    padding: 5px 10px;
    position: relative
}

.joe_aside__item.newreply .item .reply:before {
    border-bottom: 6px solid var(--classD);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    bottom: 100%;
    content: "";
    height: 0;
    left: 15px;
    position: absolute;
    width: 0
}

.joe_aside__item.newreply .item .reply .link {
    -webkit-line-clamp: 1;
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    color: var(--minor);
    display: -webkit-box;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    max-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .35s;
    word-break: break-word
}

.joe_aside__item.newreply .item .reply .link:hover {
    color: var(--theme)
}

.joe_aside__item.newreply .item .reply .link .owo_image {
    height: 18px;
    vertical-align: -5px
}

.joe_aside__item.newreply .item .reply .link a {
    color: var(--theme)
}

.joe_aside__item.advert,
.joe_aside__item.aside_custom {
    background: var(--background)
}

.joe_aside__item.advert {
    display: block;
    min-height: 32px
}

.joe_aside__item.advert img {
    object-fit: cover;
    width: 100%
}

.joe_aside__item.advert .icon {
    background: rgba(0, 0, 0, .25);
    border-radius: 2px;
    color: #ebebeb;
    font-size: 12px;
    padding: 2px 5px;
    pointer-events: none;
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 1
}

.joe_aside__item.tags-cloud {
    background: var(--background);
    margin-bottom: 15px
}

.joe_aside__item.tags-cloud .text {
    flex: 1
}

.joe_aside__item.tags-cloud .tags_more {
    color: var(--minor);
    font-size: 14px;
    font-weight: 400;
    position: relative;
    top: 2px
}

.joe_aside__item.tags-cloud .tags_more i {
    color: var(--minor);
    font-size: 14px;
    font-weight: 400;
    margin: 0
}

.joe_aside__item.tags-cloud .tags_more:hover,
.joe_aside__item.tags-cloud .tags_more:hover i {
    color: var(--theme)
}

.joe_aside__item.tags-cloud .cloud-list {
    font-size: 0
}

.joe_aside__item.tags-cloud .cloud-list a {
    background: var(--background-tag);
    border: 1px solid var(--classE);
    border-radius: 3px;
    color: var(--minor);
    display: inline-block;
    font-size: 13px;
    line-height: 1.2;
    margin: 4px;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 30%
}

.joe_aside__item.tags-cloud .cloud-list a:hover {
    color: var(--theme)
}

.joe_aside__item.tags-cloud .cloud-list.responsive a {
    line-height: 1.2;
    margin: 4px;
    overflow: unset;
    text-align: left;
    text-overflow: unset;
    white-space: unset;
    width: unset
}

.joe_aside__item.tags-cloud .tags-cloud-list {
    font-size: 0
}

.joe_aside__item.tags-cloud .tags-cloud-list a {
    background: var(--background-tag);
    border: 1px solid var(--classE);
    border-radius: 3px;
    color: var(--minor);
    display: inline-block;
    font-size: 13px;
    line-height: 1.2;
    margin: 4px;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 30%
}

.joe_aside__item.tags-cloud .tags-cloud-list a:hover {
    color: var(--theme)
}

.joe_aside__item.tags-cloud .tags-cloud-list.responsive a {
    line-height: 1.2;
    margin: 4px;
    overflow: unset;
    text-align: left;
    text-overflow: unset;
    white-space: unset;
    width: unset
}

.joe_aside__item.tags-cloud .categories-cloud-list {
    font-size: 0
}

.joe_aside__item.tags-cloud .categories-cloud-list a {
    background: var(--background-tag);
    border: 1px solid var(--classE);
    border-radius: 3px;
    color: var(--minor);
    display: inline-block;
    font-size: 13px;
    line-height: 1.2;
    margin: 4px;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 30%
}

.joe_aside__item.tags-cloud .categories-cloud-list a:hover {
    color: var(--theme)
}

.joe_aside__item.tags-cloud .categories-cloud-list.responsive a {
    line-height: 1.2;
    margin: 4px;
    overflow: unset;
    text-align: left;
    text-overflow: unset;
    white-space: unset;
    width: unset
}

.joe_aside__item.tags-cloud .empty {
    color: var(--routine);
    text-align: center
}

.joe_aside .speaker-anim-icon {
    margin-right: 6px;
    position: relative;
    top: -2px
}

.joe_archive {
    background: var(--background);
    border-radius: var(--radius-wrap);
    box-shadow: var(--box-shadow);
    padding: 0 15px
}

.joe_archive__title {
    align-items: center;
    border-bottom: 1px solid var(--classC);
    color: var(--main);
    display: flex;
    height: 45px;
    line-height: 45px
}

.joe_archive__title-icon {
    color: var(--theme);
    font-size: 18px;
    margin-right: 5px;
    vertical-align: middle
}

.joe_archive__title-title {
    align-items: center;
    display: flex
}

.joe_archive__title-title .muted {
    color: var(--theme);
    font-weight: 700;
    margin: 0 5px;
    position: relative;
    top: -1px
}

.joe_list__item {
    border-bottom: 1px solid var(--classC);
    padding: 15px 0;
    position: relative;
    width: 100%
}

.joe_list__item:last-child {
    border-bottom: none
}

.joe_list__item .thumbnail {
    background: var(--classD);
    border-radius: var(--radius-inner)
}

.joe_list__item .information .title {
    -webkit-line-clamp: 2;
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    color: var(--main);
    display: -webkit-box;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 10px;
    max-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .35s;
    word-break: break-word
}

.joe_list__item .information .title .badge {
    background-image: -webkit-linear-gradient(0deg, #3ca5f6, #a86af9);
    border-radius: 2px 6px;
    color: #fff;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    margin-right: 5px;
    padding: 0 6px;
    vertical-align: 2px;
    white-space: nowrap
}

.joe_list__item .information .abstract {
    -webkit-line-clamp: 2;
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    color: var(--minor);
    display: -webkit-box;
    line-height: 22px;
    max-height: 44px;
    opacity: .85;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word
}

.joe_list__item:before {
    background: var(--theme);
    border-radius: 2px;
    content: "";
    height: 25px;
    left: -15px;
    position: absolute;
    top: 15px;
    transform: scaleY(0);
    transition: transform .35s;
    width: 4px;
    z-index: 1
}

.joe_list__item .meta {
    align-items: center;
    color: var(--minor);
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    margin-top: auto
}

.joe_list__item .meta .items {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: flex-start
}

.joe_list__item .meta .items li .joe-font {
    font-size: 15px;
    margin-right: 3px
}

.joe_list__item .meta .items li:after {
    color: var(--seat);
    content: "/";
    padding: 0 5px
}

.joe_list__item .meta .items li:last-child:after {
    display: none
}

.joe_list__item .meta .categories {
    align-items: center;
    display: flex;
    justify-content: space-between;
    max-width: 320px;
    overflow-x: auto;
    white-space: nowrap
}

.joe_list__item .meta .categories::-webkit-scrollbar {
    height: 4px
}

.joe_list__item .meta .categories .pcate {
    align-items: center;
    display: flex;
    margin-left: 5px
}

.joe_list__item .meta .categories .pcate .icon {
    margin-right: 3px
}

.joe_list__item .meta .categories .pcate .link {
    color: var(--minor)
}

.joe_list__item .meta .categories .pcate .link:hover,
.joe_list__item:hover .title {
    color: var(--theme)
}

.joe_list__item:hover:before {
    transform: scaleY(1)
}

.joe_list__item.default {
    display: flex;
    position: relative
}

.joe_list__item.default:hover .thumbnail img {
    opacity: .8
}

.joe_list__item.default:hover .thumbnail time {
    transform: translateZ(0)
}

.joe_list__item.default .thumbnail {
    flex-shrink: 0;
    height: 140px;
    margin-right: 15px;
    overflow: hidden;
    position: relative;
    width: 210px
}

.joe_list__item.default .thumbnail img {
    border: 1px solid var(--classD);
    border-radius: var(--radius-inner);
    box-sizing: border-box;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s;
    width: 100%
}

.joe_list__item.default .thumbnail time {
    background: var(--theme);
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    position: absolute;
    right: 5px;
    top: 5px;
    transform: translate3d(120%, 0, 0);
    transition: transform .35s;
    z-index: 1
}

.joe_list__item.default .thumbnail .joe-font {
    color: #f5f5f5;
    font-size: 18px;
    left: 5px;
    position: absolute;
    top: 3px;
    z-index: 1
}

.joe_list__item.default .information {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0
}

.joe_list__item.single:hover .thumbnail img {
    opacity: .8
}

.joe_list__item.single:hover .thumbnail time {
    transform: translateZ(0)
}

.joe_list__item.single .information {
    margin-bottom: 15px
}

.joe_list__item.single .thumbnail {
    display: block;
    height: 280px;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
    width: 100%
}

.joe_list__item.single .thumbnail img {
    border-radius: var(--radius-inner);
    height: 100%;
    object-fit: cover;
    transition: opacity .35s;
    width: 100%
}

.joe_list__item.single .thumbnail time {
    background: var(--theme);
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    position: absolute;
    right: 10px;
    top: 10px;
    transform: translate3d(120%, 0, 0);
    transition: transform .35s;
    z-index: 1
}

.joe_list__item.multiple .information {
    margin-bottom: 15px
}

.joe_list__item.multiple .thumbnail {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 180px;
    margin-bottom: 15px
}

.joe_list__item.multiple .thumbnail img {
    border-radius: var(--radius-inner);
    height: 100%;
    object-fit: cover;
    transition: transform .35s, opacity .35s;
    width: 100%
}

.joe_list__item.multiple .thumbnail img:hover {
    opacity: .85;
    transform: scale(1.025)
}

.joe_list__item.none .information {
    display: flex;
    flex-direction: column;
    height: 140px
}

.joe_list__loading .item {
    border-bottom: 1px solid var(--classC);
    display: flex;
    padding: 15px 0;
    position: relative;
    width: 100%
}

.joe_list__loading .item:last-child {
    border-bottom: none
}

.joe_list__loading .item .thumbnail {
    animation: list_thumbnail_loading .5s infinite alternate;
    background: var(--classD);
    border-radius: var(--radius-inner);
    flex-shrink: 0;
    height: 140px;
    margin-right: 15px;
    position: relative;
    width: 210px
}

.joe_list__loading .item .information {
    flex: 1;
    min-width: 0
}

.joe_list__loading .item .information .title {
    animation: list_title_loading .75s infinite alternate;
    background: var(--classD);
    border-radius: var(--radius-inner);
    height: 24px;
    margin-bottom: 15px
}

.joe_list__loading .item .information .abstract p {
    animation: list_abstract_loading .8s infinite alternate;
    background: var(--classD);
    border-radius: var(--radius-inner);
    height: 18px;
    margin-bottom: 5px
}

.joe_progress_bar {
    background: linear-gradient(45deg, #3884d9 50%, #40d968);
    bottom: 0;
    height: 4px;
    left: 0;
    position: fixed;
    width: 0;
    z-index: 80
}

.joe_loading {
    padding: 40px;
    text-align: center
}

.joe_loading img,
.joe_loading svg {
    width: 40px
}

.joe_load {
    background: var(--background);
    border-radius: 16px;
    box-shadow: var(--box-shadow);
    color: var(--routine);
    cursor: pointer;
    height: 32px;
    line-height: 32px;
    margin: 15px auto 0;
    position: relative;
    text-align: center;
    transition: transform .25s;
    user-select: none;
    width: 120px;
    z-index: 1
}

.joe_load:active {
    transform: scale(.75)
}

.joe_load:hover {
    color: var(--theme)
}

.joe_empty {
    align-items: center;
    color: var(--routine);
    display: flex;
    flex-direction: column;
    font-style: italic;
    justify-content: center;
    padding: 50px 0;
    user-select: none
}

.joe_empty-icon {
    fill: var(--routine);
    height: 90px;
    margin-bottom: 20px;
    width: 90px
}

.joe_empty.mini {
    padding: 20px 0
}

.joe_empty.hide {
    display: none
}

.joe_raw {
    background: url(../../img/raw.png) no-repeat 50%;
    background-size: cover;
    display: inline-block;
    height: 24px;
    width: 22px
}

.joe_alert {
    border-radius: var(--radius-inner);
    line-height: 26px;
    padding: 12px
}

.joe_alert.info {
    border: 1px solid #abdcff
}

.joe_alert.success {
    border: 1px solid #8ce6b0
}

.joe_alert.warning {
    border: 1px solid #ffd77a
}

.joe_alert.error {
    border: 1px solid #ffb08f
}

.joe_alert :last-child {
    margin-bottom: 0 !important
}

.joe_gird {
    display: grid
}

.joe_gird__item :last-child {
    margin-bottom: 0 !important
}

.joe_checkbox {
    -webkit-appearance: none;
    border: 2px solid var(--theme);
    border-radius: 2px;
    height: 15px;
    position: relative;
    vertical-align: -2px;
    width: 15px
}

.joe_checkbox:disabled {
    cursor: not-allowed
}

.joe_checkbox:checked {
    background: var(--theme);
    border: none
}

.joe_checkbox:checked:after {
    border: 2px solid #fff;
    border-left: 0;
    border-top: 0;
    content: "";
    height: 7px;
    left: 5px;
    position: absolute;
    top: 2px;
    transform: rotate(45deg);
    width: 3px
}

.joe_mtitle {
    display: flex;
    justify-content: center
}

.joe_mtitle__text {
    color: var(--minor);
    padding: 0 12px;
    position: relative;
    transition: padding .35s
}

.joe_mtitle__text:hover {
    padding: 0
}

.joe_mtitle__text:after,
.joe_mtitle__text:before {
    background: var(--theme);
    content: "";
    height: 1px;
    position: absolute;
    top: 50%;
    width: 20px
}

.joe_mtitle__text:before {
    left: -35px
}

.joe_mtitle__text:after {
    right: -35px
}

.joe_abtn {
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    transform: translateZ(0);
    transform-origin: 100% 0
}

.joe_abtn:hover {
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-name: wobble-bottom;
    animation-timing-function: ease-in-out
}

.joe_abtn__icon {
    display: inline-block;
    text-align: center;
    vertical-align: top
}

.joe_abtn__icon .fa {
    color: #fff
}

.joe_abtn__icon [class^=fa-] {
    margin-right: 4px
}

.joe_abtn__content {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap
}

.joe_abtn__content,
.joe_anote {
    color: #fff;
    display: inline-block
}

.joe_anote {
    border-radius: 3px;
    height: 35px;
    line-height: 35px;
    position: relative;
    transform: translateZ(0);
    transition: transform .35s
}

.joe_anote:hover {
    transform: translateY(-3px)
}

.joe_anote__icon {
    background: rgba(0, 0, 0, .2);
    display: inline-block;
    height: 35px;
    text-align: center;
    vertical-align: top;
    width: 35px
}

.joe_anote__icon .fa {
    color: #fff
}

.joe_anote__content {
    color: #fff;
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    padding: 0 12px 0 6px;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap
}

.joe_anote.secondary {
    background: #34495e
}

.joe_anote.success {
    background: #27ae60
}

.joe_anote.warning {
    background: #f39c12
}

.joe_anote.error {
    background: #e74c3c
}

.joe_anote.info {
    background: #3498db
}

.joe_dotted {
    background-size: 80px;
    display: block;
    height: 2px;
    width: 100%
}

.joe_read_limited {
    background: linear-gradient(0deg, var(--background) 30px, transparent 180px);
    bottom: 0;
    height: 180px;
    line-height: 146px;
    position: absolute;
    text-align: center;
    user-select: none;
    width: 100%;
    z-index: 5
}

.joe_read_limited p {
    backdrop-filter: blur(3px);
    background: hsla(0, 0%, 100%, .76);
    border: 1px solid var(--classA);
    border-radius: 5px;
    -webkit-box-shadow: 13px 16px 8px -3px var(--shadow-code);
    box-shadow: 13px 16px 8px -3px var(--shadow-code);
    color: var(--minor);
    display: inline-block;
    line-height: 1.5;
    padding: 26px
}

.joe_read_limited p:hover {
    animation: dung 1s ease
}

.joe_read_limited__button {
    color: var(--theme);
    cursor: pointer;
    font-style: normal;
    position: relative
}

.joe_card__default {
    background: var(--background);
    border: 1px solid var(--classC);
    border-radius: var(--radius-inner);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    line-height: 26px;
    margin: 0 auto
}

.joe_card__default-title {
    border-bottom: 1px solid var(--classC);
    color: var(--main);
    padding: 8px 12px;
    user-select: none
}

.joe_card__default-content {
    color: var(--routine);
    padding: 12px
}

.joe_card__default-content :last-child {
    margin-bottom: 0 !important
}

.joe_message {
    border-left-style: solid;
    border-left-width: 4px;
    border-radius: 0 4px 4px 0;
    display: block;
    line-height: 26px;
    padding: 8px 15px;
    position: relative
}

.joe_message:hover .joe_message__icon {
    transform: rotate(1turn)
}

.joe_message__icon {
    border-radius: 50%;
    height: 18px;
    left: -11px;
    position: absolute;
    top: -9px;
    transition: transform .85s;
    width: 18px
}

.joe_message__icon:before {
    fill: #fff;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    height: 10px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px
}

.joe_message.success {
    background: #2bde3f20;
    border-left-color: #2bde3f;
    color: #2bde3f
}

.joe_message.success .joe_message__icon {
    background: #2bde3f
}

.joe_message.success .joe_message__icon:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==)
}

.joe_message.info {
    background: #1d72f320;
    border-left-color: #1d72f3;
    color: #1d72f3
}

.joe_message.info .joe_message__icon {
    background: #1d72f3
}

.joe_message.info .joe_message__icon:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiPjxwYXRoIGQ9Ik03NjcuOTc0IDExNi4zNDZjMCA2NC4yNTMtNDEuNjgzIDExNi4zODktOTMuMDk0IDExNi4zODlzLTkzLjA5NC01Mi4xMzYtOTMuMDk0LTExNi4zODlDNTgxLjc4NiA1Mi4wOTMgNjIzLjQ3IDAgNjc0Ljg4IDBzOTMuMDk0IDUyLjA5MyA5My4wOTQgMTE2LjM0NnpNMjU2IDUwNC4yOTRzNzAuODIzLTI4NC43ODUgMjg2Ljc0OC0yNzEuMDQ3YzIxNS45MjUgMTMuNjk1IDY3LjI0IDI2MS40NDgtMTMuMjY5IDUwMS42NDktODAuNTA3IDI0MC4yMDEgMTAwLjI2MiA3MS40MiAxNDUuNDAxLTcuNTUyIDAgMC05My4xMzcgNDA2Ljc2NC0zNjcuMzQxIDI2Ny42NzctMTI4LjU0OC02NS4yMzQgMzIuMjU0LTM5OC4wNiAxMDMuMTItNTQ1LjU5MyA3MC45MDgtMTQ3LjYyLTc0LjAyMy02MS44MjEtMTU0LjY1OSA1NC44MjR6IiBmaWxsPSIjZmZmIi8+PC9zdmc+)
}

.joe_message.warning {
    background: #ffc00720;
    border-left-color: #ffc007;
    color: #ffc007
}

.joe_message.warning .joe_message__icon {
    background: #ffc007
}

.joe_message.warning .joe_message__icon:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiPjxwYXRoIGQ9Ik00NzkuODE3IDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJjMC02MS40NC01MS4yLTEwMi40LTEwMi40LTEwMi40LTYxLjQ0IDAtMTAyLjQgNTEuMi0xMDIuNCAxMTIuNjRsNDAuOTYgNTUyLjk2em02MS40NCAxNTMuNmMtNjEuNDQgMC0xMDIuNCA0MC45Ni0xMDIuNCAxMDIuNCAwIDYxLjQ0IDQwLjk2IDEwMi40IDEwMi40IDEwMi40IDYxLjQ0IDAgMTAyLjQtNDAuOTYgMTAyLjQtMTAyLjQgMC02MS40NC00MC45Ni0xMDIuNC0xMDIuNC0xMDIuNHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=)
}

.joe_message.error {
    background: #f56c6c20;
    border-left-color: #f56c6c;
    color: #f56c6c
}

.joe_message.error .joe_message__icon {
    background: #f56c6c
}

.joe_message.error .joe_message__icon:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik04MzAuMiA4MzAuMmMtMTkuNCAxOS40LTUxLjMgMTkuNC03MC43IDBMMTkzLjggMjY0LjVjLTE5LjQtMTkuNC0xOS40LTUxLjMgMC03MC43IDE5LjQtMTkuNCA1MS4zLTE5LjQgNzAuNyAwbDU2NS43IDU2NS43YzE5LjQgMTkuNCAxOS40IDUxLjMgMCA3MC43eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==)
}

.joe_message__content {
    display: block
}

.joe_progress {
    align-items: center;
    display: flex;
    width: 100%
}

.joe_progress__strip {
    background: var(--classC);
    border-radius: 6px;
    flex: 1;
    height: 12px;
    margin-right: 10px;
    min-width: 0;
    overflow: hidden
}

.joe_progress__strip-percent {
    border-radius: 6px;
    height: 100%;
    position: relative;
    transition: width .35s
}

.joe_progress__strip-percent:before {
    animation: progress-active 3s ease-in-out infinite;
    background: #fff;
    border-radius: 6px;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0
}

.joe_progress__percentage {
    color: var(--minor)
}

.joe_callout {
    border: 1px solid var(--classB);
    border-left-width: 4px;
    border-radius: var(--radius-inner);
    color: var(--routine);
    line-height: 26px;
    padding: 12px
}

.joe_callout :last-child {
    margin-bottom: 0 !important
}

.joe_card__list {
    border: 1px solid var(--classC);
    border-radius: var(--radius-inner);
    line-height: 26px;
    overflow: hidden
}

.joe_card__list-item {
    border-bottom: 1px solid var(--classC);
    padding: 12px
}

.joe_card__list-item:last-child {
    border-bottom: none
}

.joe_card__list-item :last-child {
    margin-bottom: 0 !important
}

.joe_timeline {
    line-height: 26px
}

.joe_timeline__item {
    padding-bottom: 15px;
    position: relative
}

.joe_timeline__item-tail {
    border-left: 1px solid var(--classC);
    height: 100%;
    left: 6px;
    position: absolute;
    top: 0
}

.joe_timeline__item-circle {
    background-color: var(--background);
    border: 1px solid #19be6b;
    border-radius: 50%;
    height: 13px;
    position: absolute;
    width: 13px
}

.joe_timeline__item-content {
    padding-left: 24px;
    position: relative;
    top: -5px
}

.joe_timeline__item-content :last-child {
    margin-bottom: 0 !important
}

.joe_timeline__item:last-child {
    padding-bottom: 0
}

.joe_timeline__item:last-child .joe_timeline__item-tail {
    display: none
}

.joe_tabs {
    background: var(--background);
    border: 1px solid var(--classC);
    border-radius: var(--radius-inner);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    line-height: 26px;
    overflow: hidden;
    width: 100%
}

.joe_tabs__head {
    background: var(--classD);
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%
}

.joe_tabs__head-item {
    color: var(--minor);
    cursor: pointer;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    position: relative;
    transition: color .5s;
    white-space: nowrap
}

.joe_tabs__head-item:after {
    background: var(--theme);
    border-radius: 2px;
    bottom: 0;
    content: "";
    height: 2px;
    left: 15px;
    opacity: 0;
    position: absolute;
    right: 15px;
    transform: scaleX(.5);
    transition: opacity .25s, transform .25s
}

.joe_tabs__head-item.active {
    color: var(--theme)
}

.joe_tabs__head-item.active:after {
    opacity: 1;
    transform: scaleX(1)
}

.joe_tabs__body-item {
    padding: 15px
}

.joe_tabs__body-item :last-child {
    margin-bottom: 0 !important
}

.joe_vplayer {
    border-radius: var(--radius-img)
}

.joe_pdf iframe,
.joe_vplayer {
    box-shadow: var(--box-shadow);
    height: 500px;
    width: 100%
}

.joe_pdf iframe {
    border: none;
    border-radius: var(--radius-img);
    display: block;
    margin: 0 auto;
    overflow: hidden
}

.joe_card__describe {
    border: 1px dashed var(--classA);
    line-height: 26px;
    position: relative
}

.joe_card__describe-title {
    background: var(--background);
    color: var(--main);
    font-weight: 500;
    left: 8px;
    max-width: 200px;
    overflow: hidden;
    padding: 0 5px;
    position: absolute;
    text-overflow: ellipsis;
    top: 0;
    transform: translateY(-50%);
    white-space: nowrap
}

.joe_card__describe-content {
    color: var(--routine);
    padding: 18px 15px 15px
}

.joe_card__describe-content :last-child {
    margin-bottom: 0 !important
}

.joe_lamp {
    animation: lamp-background 4s linear infinite;
    border-radius: 1.5px;
    display: block;
    height: 3px;
    overflow: hidden;
    position: relative;
    width: 100%
}

.joe_lamp:after,
.joe_lamp:before {
    animation: lamp-front 4s linear infinite;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.joe_lamp:before {
    right: 50%;
    transform-origin: right
}

.joe_lamp:after {
    left: 50%;
    transform-origin: left
}

.joe_collapse {
    line-height: 26px
}

.joe_collapse__item {
    border: 1px solid var(--classC);
    color: var(--routine);
    margin-bottom: 10px
}

.joe_collapse__item-head {
    align-items: center;
    background: var(--classD);
    cursor: pointer;
    display: flex;
    overflow: hidden;
    padding: 10px 8px 10px 12px;
    user-select: none
}

.joe_collapse__item-head--label {
    padding-right: 8px
}

.joe_collapse__item-head--icon {
    fill: var(--minor);
    flex-shrink: 0;
    margin-left: auto;
    transition: transform .3s ease
}

.joe_collapse__item-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease
}

.joe_collapse__item-wrapper--content {
    padding: 12px
}

.joe_collapse__item-wrapper--content :last-child {
    margin-bottom: 0 !important
}

.joe_collapse__item:last-child {
    margin-bottom: 0
}

.joe_collapse__item.active .joe_collapse__item-head--icon {
    transform: rotate(-180deg)
}

.joe_cloud {
    align-items: center;
    border: 1px solid var(--classC);
    border-radius: var(--radius-inner);
    box-shadow: 1px 1px 5px 0 var(--classD);
    display: flex;
    overflow: hidden;
    padding: 10px
}

.joe_cloud__describe {
    flex: 1;
    line-height: normal;
    overflow: hidden
}

.joe_cloud__describe-title {
    color: var(--theme);
    font-size: 14px;
    margin-bottom: 3px
}

.joe_cloud__describe-title,
.joe_cloud__describe-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_cloud__describe-type {
    font-size: 12px
}

.joe_cloud__btn {
    background: var(--theme);
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
    height: 30px;
    line-height: 30px;
    margin-left: auto;
    text-align: center;
    width: 30px
}

.joe_detail {
    background: var(--background);
    border-radius: var(--radius-wrap);
    box-shadow: var(--box-shadow);
    margin-bottom: 15px;
    padding: 20px;
    position: relative
}

.joe_detail .post-status {
    background: var(--classD);
    border-radius: 4px;
    height: 26px;
    left: 12px;
    line-height: 26px;
    padding: 0 8px;
    position: absolute;
    top: 12px;
    user-select: none
}

.joe_detail .post-status i {
    font-size: 16px;
    margin-right: 3px;
    vertical-align: middle
}

.joe_detail .post-status.s_draft {
    background: #fdd9a9;
    color: #7a5001
}

.joe_detail .post-status.s_intimate {
    background: var(--classJ);
    color: #ef44b9
}

.joe_detail .post-status.s_recycle {
    color: #c50a00
}

.joe_detail__category {
    align-items: center;
    display: flex;
    margin-bottom: 15px
}

.joe_detail__category .item {
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    margin-right: 5px;
    max-width: 120px;
    overflow: hidden;
    padding: 3px 8px;
    text-overflow: ellipsis;
    transition: transform .35s, opacity .35s;
    white-space: nowrap
}

.joe_detail__category .item:hover {
    opacity: .85;
    transform: translate3d(0, -3px, 0)
}

.joe_detail__category .item:last-child {
    margin-right: 0;
    width: 100%
}

.joe_detail__category .item-0 {
    background: #0396ff
}

.joe_detail__category .item-1 {
    background: #ea5455
}

.joe_detail__category .item-2 {
    background: #7367f0
}

.joe_detail__category .item-3 {
    background: #28c76f
}

.joe_detail__category .item-4 {
    background: #9f44d3
}

.joe_detail__category .edit {
    color: var(--minor);
    margin-left: auto
}

.joe_detail__category .edit:hover {
    color: var(--theme)
}

.joe_detail__title {
    color: var(--classF);
    font-size: 24px;
    margin-bottom: 15px;
    padding-top: 40px;
    text-align: center;
    word-break: break-word
}

.joe_detail__title.txt-shadow {
    text-shadow: var(--text-shadow)
}

.joe_detail__count {
    align-items: center;
    border-bottom: 1px solid var(--classC);
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 15px;
    position: relative
}

.joe_detail__count:after {
    background: var(--theme);
    border-radius: 1.5px;
    bottom: -1.5px;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 80px
}

.joe_detail__count-information {
    align-items: center;
    display: flex
}

.joe_detail__count-information .avatar {
    background: var(--classC);
    border: 1px solid var(--classA);
    border-radius: 50%;
    height: 35px;
    margin-right: 10px;
    object-fit: cover;
    padding: 3px;
    width: 35px
}

.joe_detail__count-information .meta {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    height: 35px;
    justify-content: space-between
}

.joe_detail__count-information .meta .author .link {
    color: var(--theme);
    font-weight: 500
}

.joe_detail__count-information .meta .author .link:hover {
    text-decoration: underline
}

.joe_detail__count-information .meta .item {
    align-items: center;
    color: var(--minor);
    display: flex;
    line-height: 16px
}

.joe_detail__count-information .meta .item .line {
    color: var(--seat);
    margin: 0 5px;
    vertical-align: middle
}

.joe_detail__count-created {
    color: var(--routine);
    font-size: 32px;
    line-height: 42px;
    text-shadow: var(--text-shadow);
    user-select: none
}

.joe_detail__overdue {
    padding-top: 5px
}

.joe_detail__overdue-wrapper {
    animation: overdue 1.5s ease-in-out;
    background: var(--overdue-background);
    border: 1px solid var(--overdue-border);
    border-radius: var(--radius-inner);
    color: #db7c22;
    padding: 15px
}

.joe_detail__overdue-wrapper .title {
    align-items: center;
    display: flex;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px
}

.joe_detail__overdue-wrapper .title .icon {
    height: 20px;
    margin-right: 8px;
    width: 20px
}

.joe_detail__overdue-wrapper .content {
    padding-left: 28px
}

.joe_detail__overdue-wrapper:hover {
    clip-path: circle(75%)
}

.joe_detail__agree {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 30px 0 10px
}

.joe_detail__agree .agree {
    color: var(--minor);
    font-size: 12px;
    text-align: center;
    user-select: none
}

.joe_detail__agree .agree .icon {
    align-items: center;
    background: #f56c6c;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 42px;
    justify-content: center;
    margin-bottom: 8px;
    position: relative;
    width: 42px
}

.joe_detail__agree .agree .icon.active {
    animation: box_shadow 1s;
    box-shadow: 0 0 0 20px hsla(0, 0%, 100%, 0)
}

.joe_detail__agree .agree .icon .joe-font {
    color: #fff;
    font-size: 26px;
    opacity: 0;
    position: absolute;
    transform: scale(0);
    transition: transform .85s, opacity .85s
}

.joe_detail__agree .agree .icon .joe-font.active {
    opacity: 1;
    transform: scale(1)
}

.joe_detail__agree .agree .icon .icon-like {
    border-radius: 50%
}

.joe_detail__agree .agree .icon .icon-like:hover {
    animation: box_shadow 1s infinite;
    box-shadow: 0 0 0 20px hsla(0, 0%, 100%, 0)
}

.joe_detail__operate {
    align-items: center;
    color: var(--routine);
    display: flex;
    margin-bottom: 15px;
    padding-top: 20px
}

.joe_detail__operate-tags {
    align-items: center;
    display: flex;
    flex: 1;
    margin-right: 5px;
    overflow-x: auto
}

.joe_detail__operate-tags::-webkit-scrollbar {
    display: none
}

.joe_detail__operate-tags a {
    background-color: var(--classD);
    border: 1px solid var(--classD);
    border-radius: 13px;
    color: var(--minor);
    flex-shrink: 0;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
    margin-right: 10px;
    max-width: 125px;
    overflow: hidden;
    padding-left: 29px;
    padding-right: 8px;
    position: relative;
    text-overflow: ellipsis;
    transition: border .25s, color .25s;
    white-space: nowrap
}

.joe_detail__operate-tags a:hover {
    border: 1px solid var(--classC);
    color: var(--routine)
}

.joe_detail__operate-tags a:last-child,
.joe_detail__operate-tags a:nth-child(5) {
    margin-right: 0
}

.joe_detail__operate-tags a:nth-child(n+6) {
    display: none
}

.joe_detail__operate-tags a:before {
    background: var(--background);
    border-radius: 50%;
    content: "";
    height: 24px;
    left: 0;
    position: absolute;
    top: 0;
    width: 24px
}

.joe_detail__operate-tags a:after {
    background: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiPjxwYXRoIGQ9Ik02ODIuNjY3IDM1Ni44NDhIMzI1LjgxOGEzOC43ODggMzguNzg4IDAgMCAxLTM4Ljc4OC0zOC43ODcgMzguNzg4IDM4Ljc4OCAwIDAgMSAzOC43ODgtMzguNzg4aDM1Ni44NDlhMzguNzg4IDM4Ljc4OCAwIDAgMSAzOC43ODggMzguNzg4IDM4Ljc4OCAzOC43ODggMCAwIDEtMzguNzg4IDM4Ljc4N3oiIGZpbGw9IiM1NGI1ZGIiLz48cGF0aCBkPSJNOTA3LjYzNiAxMDI0aC0xNS41MTVMNTEyIDgwNi43ODhsLTM4MC4xMjEgMjA5LjQ1NEg5My4wOWE2Mi4wNiA2Mi4wNiAwIDAgMS0xNS41MTUtMzEuMDNWMTE2LjM2NEExMTYuMzY0IDExNi4zNjQgMCAwIDEgMTkzLjkzOSAwaDYzNi4xMjJhMTE2LjM2NCAxMTYuMzY0IDAgMCAxIDExNi4zNjMgMTE2LjM2NHY4NjguODQ4YTYyLjA2IDYyLjA2IDAgMCAxLTE1LjUxNSAzMS4wM3pNNTEyIDcyMS40NTVoMjMuMjczbDMzMy41NzUgMTg2LjE4MVYxMTYuMzY0YTM4Ljc4OCAzOC43ODggMCAwIDAtMzguNzg3LTM4Ljc4OEgxOTMuOTM5YTM4Ljc4OCAzOC43ODggMCAwIDAtMzguNzg3IDM4Ljc4OHY3OTkuMDNsMzQxLjMzMy0xODYuMTgyeiIgZmlsbD0iIzU0YjVkYiIvPjwvc3ZnPg==) no-repeat;
    background-size: 100% 100%;
    content: "";
    height: 12px;
    left: 12px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px
}

.joe_detail__operate-share {
    border-radius: 30px;
    height: 30px;
    margin-right: 6px;
    overflow: hidden;
    position: relative;
    top: 1px;
    transition: all .25s;
    width: 30px;
    z-index: 10
}

.joe_detail__operate-share .joe-icon-share {
    background: #99f;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 18px;
    font-weight: 700;
    height: 28px;
    line-height: 28px;
    position: relative;
    text-align: center;
    transition: transform .35s;
    width: 28px;
    z-index: 3
}

.joe_detail__operate-share .share-icon-list {
    align-items: center;
    background: var(--classD);
    border-radius: 50px;
    display: flex;
    opacity: 0;
    padding: 4px 40px 4px 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: -5px;
    transform: scale(0);
    transform-origin: right center;
    transition: all .2s;
    z-index: 1
}

.joe_detail__operate-share .share-icon-list a {
    display: inline-block;
    margin: 0 3px;
    position: relative
}

.joe_detail__operate-share .qrcode_wrapper {
    background: #fff;
    border-radius: 5px;
    box-shadow: var(--block-shadow);
    display: none;
    left: -68px;
    padding: 10px;
    position: absolute;
    top: -199px
}

.joe_detail__operate-share .qrcode_wrapper:after {
    border: 10px solid transparent;
    border-top-color: #e0e0e0;
    content: "";
    height: 0;
    margin: 10px 0 0 62px;
    position: absolute;
    width: 0
}

.joe_detail__operate-share .qrcode_wrapper p {
    color: #666;
    font-size: 12px;
    padding: 6px 0 0;
    text-align: center
}

.joe_detail__operate-share:hover {
    background: var(--classD);
    overflow: initial;
    width: auto
}

.joe_detail__operate-share:hover .joe-icon-share {
    box-shadow: 0 0 1px 1px #c3c3c3;
    transform: rotate(1turn) scale(1.25)
}

.joe_detail__operate-share:hover .share-icon-list {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1)
}

.joe_detail__operate-share #share_to_weixin:hover .qrcode_wrapper {
    display: block
}

.joe_detail .joe_donate {
    font-size: 30px;
    height: 30px;
    margin-left: 5px;
    position: relative;
    text-align: center;
    width: 30px;
    z-index: 10
}

.joe_detail .joe_donate .joe-font {
    border-radius: 50%;
    color: #f16520;
    cursor: pointer;
    display: block;
    font-size: 30px;
    height: 30px;
    width: 30px
}

.joe_detail .joe_donate .joe_donate_list {
    background: var(--sub-background);
    border-radius: 5px;
    box-shadow: var(--block-shadow);
    display: flex;
    opacity: 0;
    padding: 12px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: -240px;
    transform: translateY(10px);
    transition: all .25s
}

.joe_detail .joe_donate .joe_donate_list:before {
    border: 10px solid transparent;
    border-top: 10px solid var(--classG);
    bottom: -20px;
    content: "";
    height: 0;
    position: absolute;
    right: 4px;
    width: 0
}

.joe_detail .joe_donate .joe_donate_list li {
    float: left
}

.joe_detail .joe_donate .joe_donate_list li img {
    border-radius: 5px;
    display: block;
    max-width: unset;
    width: 200px
}

.joe_detail .joe_donate .joe_donate_list.two li:first-child img {
    border-radius: 5px 0 0 5px
}

.joe_detail .joe_donate .joe_donate_list.two li:last-child img {
    border-radius: 0 5px 5px 0
}

.joe_detail .joe_donate:hover .joe-font {
    animation: dong .5s ease .2s infinite alternate
}

.joe_detail .joe_donate:hover .joe_donate_list {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
}

.joe_detail__related {
    padding-top: 15px
}

.joe_detail__related-title {
    color: var(--main);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    padding-left: 15px;
    position: relative
}

.joe_detail__related-title:before {
    background: var(--theme);
    border-radius: 2px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 4px
}

.joe_detail__related-content {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(4, 1fr)
}

.joe_detail__related-content .item {
    border-radius: var(--radius-inner);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s
}

.joe_detail__related-content .item:hover {
    box-shadow: 0 34px 20px -24px rgba(136, 161, 206, .3);
    transform: translateY(-5px)
}

.joe_detail__related-content .item img {
    height: 120px;
    object-fit: cover;
    width: 100%
}

.joe_detail__related-content .item h6 {
    background: var(--classD);
    color: var(--minor);
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    padding: 0 12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_detail__friends {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 15px
}

.joe_detail__friends-item {
    line-height: 1.5 !important;
    list-style: none !important
}

.joe_detail__friends-item .contain {
    border-radius: 8px 0 28px 0;
    color: #fff;
    display: block;
    overflow: hidden;
    padding: 15px;
    transform: translateZ(0) scale(1);
    transform-origin: bottom center;
    transition: transform .35s;
    word-break: break-word
}

.joe_detail__friends-item .contain:hover {
    transform: translate3d(0, -2px, 0) scale(1.01)
}

.joe_detail__friends-item .contain .title {
    font-weight: 700;
    position: relative
}

.joe_detail__friends-item .contain .title:after {
    background: #fff;
    bottom: -5px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%
}

.joe_detail__friends-item .contain .content {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 15px
}

.joe_detail__friends-item .contain .content .desc {
    -webkit-line-clamp: 2;
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    display: -webkit-box;
    flex: 1;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all
}

.joe_detail__friends-item .contain .content .avatar {
    border-radius: 50%;
    cursor: pointer;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    object-fit: cover;
    width: 40px
}

.joe_detail .link-requirement {
    padding-left: 30px
}

.joe_detail .joe_comment_box {
    padding-top: 20px
}

.joe_detail .joe_comment_box h2 {
    display: none
}

.joe_leaving {
    padding-top: 15px;
    position: relative
}

.joe_leaving-list {
    height: 500px;
    position: relative
}

.joe_leaving-list .item {
    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
    display: none;
    opacity: .88;
    overflow: hidden;
    position: absolute;
    user-select: none;
    width: 200px
}

.joe_leaving-list .item .user {
    align-items: center;
    border-bottom: 1px dashed hsla(0, 0%, 100%, .85);
    color: #fff;
    cursor: move;
    display: flex;
    height: 40px;
    padding: 0 10px
}

.joe_leaving-list .item .user .avatar {
    border-radius: 50%;
    cursor: default;
    height: 20px;
    transform: translateZ(0);
    width: 20px
}

.joe_leaving-list .item .user .nickname {
    flex: 1;
    font-size: 13px;
    margin: 0 5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_leaving-list .item .user .nickname a {
    color: #fff
}

.joe_leaving-list .item .user .date {
    font-size: 12px;
    margin-left: auto
}

.joe_leaving-list .item .wrapper {
    padding: 10px
}

.joe_leaving-list .item .wrapper .content {
    color: #fff;
    height: 140px;
    line-height: 24px;
    overflow-y: auto;
    word-break: break-word
}

.joe_leaving-list .item .wrapper .content .draw_image {
    max-width: 100%
}

.joe_leaving-list .item .wrapper .content .owo_image {
    max-height: 24px
}

.joe_leaving-list .item .wrapper .content pre code {
    background: var(--classB);
    border-radius: 4px;
    color: var(--main);
    font-size: 13px;
    text-shadow: unset;
    white-space: pre;
    word-break: break-all
}

.joe_leaving-list .item ul {
    margin-bottom: 12px;
    padding-left: 20px
}

.joe_leaving-list .item p {
    font-size: 13px
}

.joe_leaving .joe_loading {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0)
}

.joe_leaving-none {
    color: var(--minor);
    display: none;
    padding: 15px 0;
    text-align: center;
    user-select: none
}

.joe_footer {
    background: var(--background);
    border-top: 1px solid var(--classD);
    color: var(--minor);
    z-index: -1
}

.joe_footer .joe_container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 15px 20px;
    position: relative
}

.joe_footer .joe_container.central {
    justify-content: center
}

.joe_footer .joe_container.central .item {
    text-align: center
}

.joe_footer .joe_container .item a {
    margin: 0 5px
}

.joe_footer .joe_container a {
    color: var(--minor);
    transition: all .35s
}

.joe_footer .joe_container a:hover {
    color: var(--theme)
}

.joe_footer .joe_container .site_powered {
    padding: 2px 0 !important
}

.joe_footer .joe_container .site_powered .a-powered {
    color: #007cff;
    font-weight: 600
}

.joe_footer .joe_container .site_powered .a-theme {
    color: var(--theme);
    font-weight: 600
}

.joe_footer .joe_container .site_driven a {
    margin: 0 3px
}

.joe_footer .joe_container .site_driven img {
    height: 18px
}

.joe_footer .joe_container .site_driven img.huawei,
.joe_footer .joe_container .site_driven img.jinshan {
    height: 22px
}

.joe_footer .joe_container .site_life {
    font-size: 12px;
    padding-top: 2px
}

.joe_footer .joe_container .site_life>i {
    animation: swing 1s ease infinite;
    color: #5dad16;
    display: inline-block;
    font-size: 14px;
    margin-right: 3px;
    vertical-align: bottom
}

.joe_footer .joe_container .site_police {
    padding-top: 5px
}

.joe_footer .joe_container .site_police a {
    font-size: 12px;
    margin-left: 0
}

.joe_footer .joe_container .site_police a:before {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGPC/xhBQAAAwBQTFRFtJR+///krYt6n2hV0a52/b9Ummlc2aht27qH//eX26xi8Na74bNo+M562rB75MGP5LaA5LaC47xp68l57N2y/vrs369n/++G1qx+/tiP6sN6+//e//nQ79l/+NqC6MZ87NmN+PPJ3qdc3alT25xR46xT57xs69KY57Vcw38+2a+C05NwyoRb6che5LxZ5MJt7d6A4bBn0Ktx+/TQ3KdZ8d/H9N+L7+ij8+mS9/O48deu///i7NOF+fG28+eq/vzgAAAAgVg6o31ShGlK7HEtxGsznl8wp41Z+sREcoWUHD6XlIx1xa58tYA/6Zc09oI24kYeo5mEBAVtbmJiNhpNtJlYAAiR96Q53bZp2U4qFzCJa3OEeWRg14pGxb2H/+Jj0RUKvbp+7XE02Mx3AABqzcJxfHp502U9CwZn/7VJzng6/Mxk24Y43Z9CXllm2QAG8F4eu0wo07yHuk0kk2A2yrZ4aX6O9LBA4JU504c9+9Jv46pKABB65G82vwAR2203YB5Q118zzCcT/S0U1Ugq00AmzaxSxicTTg5OxVIkyz0h/SsKDABdzD4txBgKrKJzjYZ3/75gQiREVDhTyQACaQI2XF94wQwLqbSRzxcR0QwR+59GuYtYABuOTAA5tgAQxj4dsQ4OAABhtKNm1JY94qlXyVkqbHmKVk5vzywa/I4sTjVP/9JmhI+Z8K9I1sB41jEfvZBe0iEa83wo7cJi/+9t/9hN469L1hoX6KA945M925tF+MRY15FT2J5Y8M1k67tc3oMy8dNp1XQo1o480oM92pZK68Vd5rZW5sBV6cpt7tRw6K5J7LlP6bFL6bdS7r5Q6L9O4KRM6LlP8slW58Rm6F8mAACAlI+B0zgiAAR33pBE13U41mUw2kko1AMJ6YI+8stuAABm/sVSORQ4cniCk3ha/9te4rJT5L5R8Nh21ZBG5bFQ3qNJ57ta3plE7c1m7Mlb6cFg6r1Z7cph68BX5rlZ6cZe9eNzAABuzgACAAB51z4g1h8Y/9JY5LVdEd5zqQAAAEF0Uk5TyxjR92/D++WYNfUc+cGpn7HH4MSDIdu+rrLmKUzsMPsnWsbG0uS8jOScSBRd8PTs4ecCXOtBunyrAmkclEJBCABK/YzMAAABgElEQVQY02NwgABGKwYmK2sohwFM2vIxuzk6O7FJyCAE7Tc+KXG95hLR/2SOPUzQmnf1s833b0b+mj1jsqQ9RFCaJyRv1aa/K+/NnD4xepKUAliQ0/u6e8H9DTtm3ZxyLfHnBDmQIDfrjVu+Afl///z5++tP8s80cVGgIEt44PVQ/1/Llry8nZCU+vPGPxGgIIefT1iwR/GCu3fqY+NjfseV8wMF2XMeegUVPmjpamytTc+IelUhBhTkysr0/D2/+27nnQfNdSlljyuFgIICudlFc+ct7Gtvutc7taa06oUNUFDw9tI1a289WtTR0PPo99Pn/6uFgYLy+/buerj+2fLFbdNWPN2yc/d2WaCg4su3rw/veb7t8bp/W/8dfP3iox3IR8a6J48e+XDgzbv9h94fO6VvC/amqeH37ye+Hv/05fPbb6evmtiBBc1+vPr///ObT+ffX/r27sMPC7CgvY3e5SsXzp098/XjxS8G5pbQQNbW0VRWUdVQUlPXMgLxASGRxIfJhdfLAAAAAElFTkSuQmCC) no-repeat 50%;
    background-size: 100% 100%;
    content: "";
    display: inline-block;
    height: 14px;
    margin-right: 4px;
    vertical-align: text-bottom;
    width: 14px
}

.joe_footer .joe_container .busuanzi-statistic {
    margin-top: 10px;
    opacity: .8;
    text-align: center;
    user-select: none
}

.joe_footer .joe_container .busuanzi-statistic span {
    background: var(--background-reverse);
    border-radius: 5px;
    color: var(--classB);
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    height: 24px;
    line-height: 24px;
    margin: 0 0 4px 6px;
    overflow: hidden;
    padding-left: 26px;
    position: relative
}

.joe_footer .joe_container .busuanzi-statistic span .joe-font {
    font-size: 14px;
    left: 9px;
    margin-right: 3px;
    position: absolute
}

.joe_footer .joe_container .busuanzi-statistic span em {
    background: #29deb3;
    color: #fff;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    height: 24px;
    line-height: 24px;
    margin-left: 6px;
    padding: 0 10px
}

.joe_footer .joe_container .busuanzi-statistic span.site-pv em {
    background: linear-gradient(0deg, #d0339b, #d03336)
}

.joe_footer .joe_container .busuanzi-statistic span.site-uv em {
    background: linear-gradient(0deg, #e2c63a, #f58044)
}

.joe_footer .joe_container .busuanzi-statistic span.site-page-pv em {
    background: linear-gradient(0deg, #367eda, #964fdb)
}

.joe_footer .joe_container .rss i {
    color: #f18651;
    font-size: 14px
}

.joe_footer .joe_container .side-col {
    align-items: flex-end;
    display: flex;
    flex-direction: column
}

.joe_footer.fixed {
    bottom: 0;
    box-shadow: -2px 0 4px 0 var(--classG);
    position: fixed;
    width: 100%;
    z-index: 2
}

.joe_footer.full .joe_container {
    max-width: 100% !important
}

.joe_pagination {
    align-items: center;
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
    padding-top: 36px
}

.joe_pagination li {
    background: var(--sib-background);
    border-radius: 3px;
    box-shadow: var(--box-shadow-pager);
    margin-left: 5px;
    overflow: hidden;
    user-select: none
}

.joe_pagination li a {
    color: var(--main);
    display: block;
    height: 32px;
    line-height: 32px;
    padding: 0 14px
}

.joe_pagination li a:hover {
    background: var(--theme);
    color: #fff
}

.joe_pagination li.prev {
    border-radius: 6px 3px 3px 6px
}

.joe_pagination li.next {
    border-radius: 3px 6px 6px 3px
}

.joe_pagination li.active {
    background: var(--theme);
    box-shadow: 0 3px 20px -2px var(--theme);
    font-weight: 600
}

.joe_pagination li.active a {
    color: #fff
}

.joe_pagination li.disabled {
    pointer-events: none
}

.joe_pagination li.disabled a {
    color: var(--classA)
}

.joe_action {
    bottom: 90px;
    pointer-events: none;
    position: fixed;
    right: 30px;
    z-index: 90
}

.joe_action_item {
    align-items: center;
    background: var(--sib-background);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1), 0 5px 20px rgba(0, 0, 0, .2);
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    position: relative;
    width: 40px
}

.joe_action_item svg {
    fill: var(--theme);
    height: 25px;
    position: absolute;
    width: 25px
}

.joe_action_item.toc {
    display: none;
    line-height: 40px;
    margin-bottom: 15px;
    pointer-events: auto;
    text-align: center
}

.joe_action_item.toc i {
    color: var(--theme);
    font-size: 24px;
    font-weight: 700
}

.joe_action_item.edit,
.joe_action_item.random {
    margin-bottom: 15px;
    pointer-events: auto
}

.joe_action_item.edit a,
.joe_action_item.random a {
    display: block;
    height: 25px;
    width: 25px
}

.joe_action_item.edit svg,
.joe_action_item.random svg {
    opacity: 1;
    transform: scale(1);
    transition: transform .85s, opacity .85s, scale .85s
}

.joe_action_item.mode {
    margin-bottom: 15px;
    pointer-events: auto
}

.joe_action_item.mode svg {
    opacity: 0;
    transform: scale(0);
    transition: transform .85s, opacity .85s
}

.joe_action_item.mode svg.active {
    opacity: 1;
    transform: scale(1)
}

.joe_action_item.back2top {
    pointer-events: none;
    transform: scale(0);
    transition: visibility .35s, transform .35s;
    visibility: hidden
}

.joe_action_item.back2top.active {
    pointer-events: auto;
    transform: scale(1);
    visibility: visible
}

.joe_comment_box {
    text-align: revert
}

.joe_comment_box .box_title {
    text-align: center
}

.joe_comment_box h2 {
    background: url(../../img/t_left.png) 0/90px auto, url(../../img/t_right.png) 100%/90px auto;
    background-repeat: no-repeat;
    color: var(--routine);
    display: inline-block;
    filter: grayscale(1);
    font-size: 18px;
    padding: 28px 110px;
    text-align: center !important
}

.joe_comment {
    background: var(--background);
    border-radius: var(--radius-wrap);
    box-shadow: var(--box-shadow);
    padding: 20px
}

.joe_comment__title {
    border-bottom: 1px solid var(--classC);
    color: var(--main);
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 15px;
    padding-bottom: 15px;
    text-align: center;
    text-shadow: var(--text-shadow)
}

.joe_comment__close {
    align-items: center;
    color: var(--routine);
    display: flex;
    justify-content: center
}

.joe_comment__close-icon {
    fill: var(--routine);
    margin-right: 5px
}

.joe_comment__respond-type {
    align-items: center;
    display: flex;
    justify-content: flex-end
}

.joe_comment__respond-type .item {
    background: var(--classD);
    border: none;
    color: var(--main);
    height: 32px;
    padding: 0 15px;
    transition: color .35s, background .35s
}

.joe_comment__respond-type .item:first-child {
    border-top-left-radius: var(--radius-inner)
}

.joe_comment__respond-type .item:last-child {
    border-top-right-radius: var(--radius-inner)
}

.joe_comment__respond-type .item.active {
    background: var(--theme);
    color: #fff
}

.joe_comment__respond-form {
    background: var(--classD);
    border-radius: 6px 0 6px 6px
}

.joe_comment__respond-form .head {
    align-items: center;
    border-bottom: 1px solid var(--classA);
    display: flex
}

.joe_comment__respond-form .head .list {
    flex: 1
}

.joe_comment__respond-form .head .list input {
    background: transparent;
    border: none;
    color: var(--routine);
    height: 40px;
    padding: 0 15px;
    width: 100%
}

.joe_comment__respond-form .head .list:nth-child(2) {
    position: relative
}

.joe_comment__respond-form .head .list:nth-child(2):after,
.joe_comment__respond-form .head .list:nth-child(2):before {
    background: var(--classA);
    content: "";
    height: 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px
}

.joe_comment__respond-form .head .list:nth-child(2):before {
    left: 0
}

.joe_comment__respond-form .head .list:nth-child(2):after {
    right: 0
}

.joe_comment__respond-form .body {
    padding: 15px
}

.joe_comment__respond-form .body .text {
    background: transparent;
    border: none;
    color: var(--routine);
    height: 200px;
    resize: none;
    vertical-align: middle;
    width: 100%
}

.joe_comment__respond-form .body .draw {
    position: relative;
    width: 100%
}

.joe_comment__respond-form .body .draw .line {
    align-items: center;
    display: flex;
    left: 10px;
    position: absolute;
    top: 10px;
    user-select: none
}

.joe_comment__respond-form .body .draw .line li {
    color: var(--main);
    cursor: pointer;
    margin-right: 10px;
    transition: color .35s
}

.joe_comment__respond-form .body .draw .line li.active {
    color: var(--theme)
}

.joe_comment__respond-form .body .draw .color {
    align-items: center;
    bottom: 10px;
    display: flex;
    left: 10px;
    position: absolute
}

.joe_comment__respond-form .body .draw .color li {
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    margin: 0 5px;
    transition: box-shadow .35s;
    width: 20px
}

.joe_comment__respond-form .body .draw .color li.active {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .35)
}

.joe_comment__respond-form .body .draw .color li:first-child {
    background: #303133
}

.joe_comment__respond-form .body .draw .color li:nth-child(2) {
    background: #67c23a
}

.joe_comment__respond-form .body .draw .color li:nth-child(3) {
    background: #e6a23c
}

.joe_comment__respond-form .body .draw .color li:nth-child(4) {
    background: #f56c6c
}

.joe_comment__respond-form .body .draw .icon {
    fill: var(--minor);
    cursor: pointer;
    position: absolute;
    right: 10px;
    user-select: none
}

.joe_comment__respond-form .body .draw .icon-undo {
    top: 10px
}

.joe_comment__respond-form .body .draw .icon-animate {
    bottom: 10px
}

.joe_comment__respond-form .body .draw canvas {
    background: var(--background);
    border-radius: var(--radius-inner)
}

.joe_comment__respond-form .foot {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0 15px 15px;
    position: relative
}

.joe_comment__respond-form .foot .owo {
    min-height: 32px;
    padding-top: 3px
}

.joe_comment__respond-form .foot .owo .seat {
    background: var(--background);
    border-radius: 13px;
    color: var(--routine);
    height: 26px;
    line-height: 26px;
    opacity: .85;
    text-align: center;
    width: 70px
}

.joe_comment__respond-form .foot .submit {
    position: absolute;
    right: 15px;
    top: 0;
    white-space: nowrap
}

.joe_comment__respond-form .foot .submit .cancle {
    color: var(--main);
    cursor: pointer;
    display: none;
    margin-right: 10px;
    transition: color .35s
}

.joe_comment__respond-form .foot .submit .cancle:hover {
    color: var(--theme)
}

.joe_comment__respond-form .foot .submit button {
    background: var(--theme);
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    height: 32px;
    padding: 0 15px
}

.joe_comment__respond-form .foot .submit button:hover {
    animation: shaked 5s ease-in-out 0s infinite normal none running
}

.joe_comment .comment-list {
    padding-top: 15px
}

.joe_comment .comment-list__item-contain .term {
    display: flex;
    margin-bottom: 15px
}

.joe_comment .comment-list__item-contain .term .avatar {
    border: 1px solid var(--classD);
    border-radius: 50%;
    height: 48px;
    margin-right: 15px;
    object-fit: cover;
    padding: 3px;
    width: 48px
}

.joe_comment .comment-list__item-contain .term .content {
    border-bottom: 1px solid var(--classC);
    flex: 1;
    min-width: 0;
    padding-bottom: 15px
}

.joe_comment .comment-list__item-contain .term .content .user {
    align-items: center;
    color: var(--main);
    display: flex;
    line-height: 20px;
    margin-bottom: 8px
}

.joe_comment .comment-list__item-contain .term .content .user .author {
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.joe_comment .comment-list__item-contain .term .content .user .author a {
    color: #409eff
}

.joe_comment .comment-list__item-contain .term .content .user .owner {
    background: var(--theme);
    border-radius: 2px;
    color: #fff;
    flex-shrink: 0;
    font-style: normal;
    padding: 0 5px
}

.joe_comment .comment-list__item-contain .term .content .user .agent {
    color: var(--minor);
    font-size: 12px;
    margin-left: auto
}

.joe_comment .comment-list__item-contain .term .content .user .waiting {
    color: #e6a23c;
    font-style: normal
}

.joe_comment .comment-list__item-contain .term .content .substance {
    background: var(--classD);
    border-radius: 0 var(--radius-inner) var(--radius-inner) 10px;
    color: var(--main);
    line-height: 24px;
    margin-bottom: 8px;
    padding: 12px 15px;
    width: 100%;
    word-break: break-word
}

.joe_comment .comment-list__item-contain .term .content .substance .parent {
    color: #388bff;
    font-weight: 500;
    margin-bottom: 5px;
    user-select: none
}

.joe_comment .comment-list__item-contain .term .content .substance .owo_image {
    height: 22px
}

.joe_comment .comment-list__item-contain .term .content .substance .draw_image {
    max-width: 100%
}

.joe_comment .comment-list__item-contain .term .content .handle {
    align-items: center;
    color: var(--minor);
    display: flex
}

.joe_comment .comment-list__item-contain .term .content .handle .date {
    margin-right: 10px
}

.joe_comment .comment-list__item-contain .term .content .handle .reply {
    align-items: center;
    color: var(--main);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    transition: color .35s
}

.joe_comment .comment-list__item-contain .term .content .handle .reply .icon {
    margin-right: 5px
}

.joe_comment .comment-list__item-contain .term .content .handle .reply:hover {
    color: var(--theme)
}

.joe_comment .comment-list__item-contain .term .content .handle .reply:hover .icon {
    fill: var(--theme)
}

.joe_comment .comment-list__item-children {
    padding-left: 63px
}

.joe_comment .comment-list__item-children .comment-list__item-children {
    padding-left: 0
}

.joe_comment .comment-list__item .joe_comment__respond {
    animation: showComment .5s;
    margin-bottom: 15px;
    margin-left: 63px
}

.joe_comment .comment-list .comment-list,
.joe_comment .joe_pagination {
    padding-top: 0
}

.joe_run__day,
.joe_run__hour,
.joe_run__minute,
.joe_run__second {
    color: var(--theme);
    font-weight: 500
}

.joe_owo__contain {
    position: relative
}

.joe_owo__contain .seat {
    cursor: pointer;
    user-select: none
}

.joe_owo__contain .box {
    background: var(--background);
    border-radius: var(--radius-inner);
    display: none;
    margin-top: 15px;
    overflow: hidden;
    width: 100%
}

.joe_owo__contain .box .scroll {
    display: none;
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: none;
    padding: 5px
}

.joe_owo__contain .box .scroll .item {
    border-radius: var(--radius-inner);
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    text-align: center;
    transition: background .25s;
    width: 5.55556%
}

.joe_owo__contain .box .scroll .item img {
    max-height: 100%;
    max-width: 100%
}

.joe_owo__contain .box .scroll .item:hover {
    background: var(--classD)
}

.joe_owo__contain .box .scroll:nth-child(3) .item {
    color: var(--routine);
    width: 20%
}

.joe_owo__contain .box .bar {
    align-items: center;
    border-top: 1px solid var(--classC);
    display: flex
}

.joe_owo__contain .box .bar .item {
    color: var(--routine);
    cursor: pointer;
    line-height: 30px;
    padding: 0 10px;
    transition: background .25s, color .25s
}

.joe_owo__contain .box .bar .item.active {
    background: var(--theme);
    color: #fff
}

.joe_nodata {
    align-items: center;
    color: var(--minor);
    display: flex;
    font-style: italic;
    padding: 20px;
    user-select: none
}

.joe_nodata i {
    margin-right: 4px;
    vertical-align: middle
}

.joe_advert-large,
.joe_advert-small {
    background: var(--sib-background);
    min-height: 32px;
    position: relative
}

.joe_advert-large img,
.joe_advert-small img {
    display: block;
    object-fit: cover;
    width: 100%
}

.joe_advert-large .icon,
.joe_advert-small .icon {
    background: rgba(0, 0, 0, .25);
    border-radius: 2px;
    color: #ebebeb;
    font-size: 12px;
    padding: 2px 5px;
    pointer-events: none;
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 1
}

.joe_advert-large {
    border-radius: var(--radius-inner);
    margin-top: 10px;
    overflow: hidden
}

.social-account {
    align-items: center;
    border-top: 1px solid var(--classC);
    display: flex;
    font-size: 14px;
    justify-content: space-around;
    padding-top: 10px;
    text-align: center
}

.social-account a {
    color: var(--minor);
    display: inline-block;
    font-size: 0;
    margin: 0 2px;
    transform: scale(.9);
    transition: transform .2s
}

.social-account a img {
    border-radius: 3px;
    display: inline-block;
    height: 20px
}

.social-account a:hover {
    transform: scale(1)
}

.katex-block {
    overflow-x: hidden
}

.canvas-backdrop {
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 0
}

.canvas-backdrop.above {
    z-index: 90
}

.nav_login {
    height: 34px;
    margin-left: 15px
}

.nav_login,
.nav_login a {
    align-items: center;
    display: flex;
    justify-content: center
}

.nav_login a {
    background-color: #f2f2f2;
    border-radius: 50%;
    color: #333;
    font-size: 24px;
    height: 30px;
    text-decoration: none;
    transition: background-color .3s, color .3s;
    width: 30px
}

.nav_login a:hover {
    background-color: var(--theme);
    color: #f2f2f2
}

.nav_login img {
    border-radius: 50%;
    height: 30px;
    object-fit: cover;
    overflow: hidden;
    width: 30px
}

.blur-up {
    filter: blur(5px) !important;
    transition: filter .4s
}

.blur-up.lazyloaded {
    filter: blur(0) !important
}

.profile-color-modes-illu-frame {
    animation: profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;
    opacity: 0
}

.profile-color-modes-illu-red {
    stroke: #da3633;
    animation-delay: .4s;
    animation-duration: .1s
}

.profile-color-modes-illu-orange {
    stroke: #f0883e;
    animation-delay: .5s;
    animation-duration: .1s
}

.profile-color-modes-illu-purple {
    stroke: #8957e5;
    animation-delay: .6s;
    animation-duration: .1s
}

.profile-color-modes-illu-green {
    stroke: #3fb950;
    animation-delay: .8s;
    animation-duration: .2s;
    animation-timing-function: cubic-bezier(.47, 2.92, .84, -1.5)
}

.profile-color-modes-illu-blue {
    stroke: #388bfd;
    animation-delay: .7s;
    animation-duration: .1s
}

.profile-color-modes-illu-group {
    animation: profile-color-modes-illu-anim .2s cubic-bezier(.72, .08, 1, .68) backwards
}

.profile-color-modes-illu-frame:first-child {
    animation: profile-color-modes-illu-anim-frame-hide 0s forwards;
    animation-delay: 1.8s;
    opacity: 1
}

.profile-color-modes-illu-frame:nth-child(8) {
    animation: profile-color-modes-illu-anim-frame-show 0s forwards;
    animation-delay: 3.56s
}

.profile-color-modes-illu-frame:nth-child(2) {
    animation-delay: 1.8s, 2.58s
}

.profile-color-modes-illu-frame:nth-child(3) {
    animation-delay: 2.58s, 2.66s
}

.profile-color-modes-illu-frame:nth-child(4) {
    animation-delay: 2.66s, 2.78s
}

.profile-color-modes-illu-frame:nth-child(5) {
    animation-delay: 2.78s, 2.84s
}

.profile-color-modes-illu-frame:nth-child(6) {
    animation-delay: 2.84s, 3.44s
}

.profile-color-modes-illu-frame:nth-child(7) {
    animation-delay: 3.44s, 3.56s
}

.profile-color-modes-illu-frame:nth-child(10),
.profile-color-modes-illu-frame:nth-child(9) {
    animation: none
}

.showInUp {
    animation: showInUp .35s
}

@keyframes showInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100px, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.topInDown {
    animation: topInDown .8s
}

.showInDown {
    animation: showInDown .35s
}

@keyframes topInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -60px, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes showInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100px, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes im-emotion-step {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@keyframes dung {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    30% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    60% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px)
    }

    80% {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px)
    }

    90% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes wobble-bottom {
    16.65% {
        transform: skew(-12deg)
    }

    33.3% {
        transform: skew(10deg)
    }

    49.95% {
        transform: skew(-6deg)
    }

    66.6% {
        transform: skew(4deg)
    }

    83.25% {
        transform: skew(-2deg)
    }

    to {
        transform: skew(0)
    }
}

@keyframes showComment {
    0% {
        opacity: 0;
        transform: scale(.3)
    }

    50% {
        opacity: 1;
        transform: scale(1.05)
    }

    70% {
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes box_shadow {
    0% {
        box-shadow: 0 0 0 0 #f56c6c
    }
}

@keyframes progress {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 30px 0
    }
}

@keyframes list_thumbnail_loading {
    0% {
        transform: scale(.85)
    }

    to {
        transform: scale(1)
    }
}

@keyframes list_title_loading {
    0% {
        width: 80%
    }

    to {
        width: 95%
    }
}

@keyframes list_abstract_loading {
    0% {
        width: 60%
    }

    to {
        width: 80%
    }
}

@keyframes profile-color-modes-illu-anim {
    0% {
        stroke: #666
    }
}

@keyframes profile-color-modes-illu-anim-frame-show {
    0% {
        animation-timing-function: ease-out;
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes profile-color-modes-illu-anim-frame-hide {
    0% {
        animation-timing-function: ease-in;
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes shaked {
    2% {
        transform: translateY(1.5px) rotate(1.5deg)
    }

    4% {
        transform: translateY(-1.5px) rotate(-.5deg)
    }

    6% {
        transform: translateY(1.5px) rotate(-1.5deg)
    }

    8% {
        transform: translateY(-1.5px) rotate(-1.5deg)
    }

    10% {
        transform: translateY(2.5px) rotate(1.5deg)
    }

    12% {
        transform: translateY(-.5px) rotate(1.5deg)
    }

    14% {
        transform: translateY(-1.5px) rotate(1.5deg)
    }

    16% {
        transform: translateY(-.5px) rotate(-1.5deg)
    }

    18% {
        transform: translateY(.5px) rotate(-1.5deg)
    }

    20% {
        transform: translateY(-1.5px) rotate(2.5deg)
    }

    22% {
        transform: translateY(.5px) rotate(-1.5deg)
    }

    24% {
        transform: translateY(1.5px) rotate(1.5deg)
    }

    26% {
        transform: translateY(.5px) rotate(.5deg)
    }

    28% {
        transform: translateY(.5px) rotate(1.5deg)
    }

    30% {
        transform: translateY(-.5px) rotate(2.5deg)
    }

    32%,
    34% {
        transform: translateY(1.5px) rotate(-.5deg)
    }

    36% {
        transform: translateY(-1.5px) rotate(2.5deg)
    }

    38% {
        transform: translateY(1.5px) rotate(-1.5deg)
    }

    40% {
        transform: translateY(-.5px) rotate(2.5deg)
    }

    42% {
        transform: translateY(2.5px) rotate(-1.5deg)
    }

    44% {
        transform: translateY(1.5px) rotate(.5deg)
    }

    46% {
        transform: translateY(-1.5px) rotate(2.5deg)
    }

    48% {
        transform: translateY(-.5px) rotate(.5deg)
    }

    50% {
        transform: translateY(.5px) rotate(.5deg)
    }

    52% {
        transform: translateY(2.5px) rotate(2.5deg)
    }

    54% {
        transform: translateY(-1.5px) rotate(1.5deg)
    }

    56% {
        transform: translateY(2.5px) rotate(2.5deg)
    }

    58% {
        transform: translateY(.5px) rotate(2.5deg)
    }

    60% {
        transform: translateY(2.5px) rotate(2.5deg)
    }

    62% {
        transform: translateY(-.5px) rotate(2.5deg)
    }

    64% {
        transform: translateY(-.5px) rotate(1.5deg)
    }

    66% {
        transform: translateY(1.5px) rotate(-.5deg)
    }

    68% {
        transform: translateY(-1.5px) rotate(-.5deg)
    }

    70% {
        transform: translateY(1.5px) rotate(.5deg)
    }

    72% {
        transform: translateY(2.5px) rotate(1.5deg)
    }

    74% {
        transform: translateY(-.5px) rotate(.5deg)
    }

    76% {
        transform: translateY(-.5px) rotate(2.5deg)
    }

    78% {
        transform: translateY(-.5px) rotate(1.5deg)
    }

    80% {
        transform: translateY(1.5px) rotate(1.5deg)
    }

    82% {
        transform: translateY(-.5px) rotate(.5deg)
    }

    84% {
        transform: translateY(1.5px) rotate(2.5deg)
    }

    86% {
        transform: translateY(-1.5px) rotate(-1.5deg)
    }

    88% {
        transform: translateY(-.5px) rotate(2.5deg)
    }

    90% {
        transform: translateY(2.5px) rotate(-.5deg)
    }

    92% {
        transform: translateY(.5px) rotate(-.5deg)
    }

    94% {
        transform: translateY(2.5px) rotate(.5deg)
    }

    96% {
        transform: translateY(-.5px) rotate(1.5deg)
    }

    98% {
        transform: translateY(-1.5px) rotate(-.5deg)
    }

    0%,
    to {
        transform: translate(0) rotate(0deg)
    }
}

@keyframes overdue {
    0% {
        clip-path: circle(0 at 0 0)
    }

    to {
        clip-path: circle(100%)
    }
}

@keyframes progress-active {
    0% {
        opacity: .3;
        width: 0
    }

    to {
        opacity: 0;
        width: 100%
    }
}

@keyframes lamp-background {

    0%,
    24.9% {
        background-color: #54b5db
    }

    25%,
    49.9% {
        background-color: #da4733
    }

    50%,
    74.9% {
        background-color: #3b78e7
    }

    75%,
    to {
        background-color: #fdba2c
    }
}

@keyframes lamp-front {
    0% {
        background-color: #da4733;
        transform: scaleX(0)
    }

    24.9% {
        background-color: #da4733;
        transform: scaleX(.5)
    }

    25% {
        background-color: #3b78e7;
        transform: scaleX(0)
    }

    49.9% {
        background-color: #3b78e7;
        transform: scaleX(.5)
    }

    50% {
        background-color: #fdba2c;
        transform: scaleX(0)
    }

    74.9% {
        background-color: #fdba2c;
        transform: scaleX(.5)
    }

    75% {
        background-color: #409eff;
        transform: scaleX(0)
    }

    to {
        background-color: #409eff;
        transform: scaleX(.5)
    }
}

@keyframes showHeaderTitle {
    0% {
        opacity: .25;
        transform: scale(.25)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes twinkle {
    to {
        box-shadow: inset 0 0 15px #f4b393
    }
}

@keyframes twinkle-night {
    to {
        box-shadow: inset 0 0 15px #595997
    }
}

@keyframes dong {
    0% {
        transform: translateY(3px) scaleY(.95)
    }

    to {
        transform: translateY(-3px) scaleY(1)
    }
}

@media (min-width:576px) {
    #Joe>.joe_container {
        max-width: 540px
    }
}

@media (min-width:768px) {
    #Joe>.joe_container {
        max-width: 720px
    }
}

@media (min-width:992px) {
    #Joe>.joe_container {
        max-width: 960px
    }
}

@media (min-width:1200px) {
    #Joe>.joe_container {
        max-width: 1140px
    }
}

.takagi {
    z-index: 50 !important
}