@-webkit-keyframes swag {
    0% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }
}

@keyframes swag {
    0% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }
}

@-webkit-keyframes showInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes showInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes topInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -60px, 0);
        transform: translate3d(0, -60px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes topInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -60px, 0);
        transform: translate3d(0, -60px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes showInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes showInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes im-emotion-step {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@keyframes im-emotion-step {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@-webkit-keyframes dung {
    0%, to {
        -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)
    }
}

@keyframes dung {
    0%, to {
        -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)
    }
}

@-webkit-keyframes wobble-bottom {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }
    to {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}

@keyframes wobble-bottom {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg)
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg)
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg)
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg)
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg)
    }
    to {
        -webkit-transform: skew(0);
        transform: skew(0)
    }
}

@-webkit-keyframes showComment {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes showComment {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes box_shadow {
    0% {
        -webkit-box-shadow: 0 0 0 0 #f56c6c;
        box-shadow: 0 0 0 0 #f56c6c
    }
}

@keyframes box_shadow {
    0% {
        -webkit-box-shadow: 0 0 0 0 #f56c6c;
        box-shadow: 0 0 0 0 #f56c6c
    }
}

@-webkit-keyframes progress {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 30px 0
    }
}

@keyframes progress {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 30px 0
    }
}

@-webkit-keyframes list_thumbnail_loading {
    0% {
        -webkit-transform: scale(.85);
        transform: scale(.85)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes list_thumbnail_loading {
    0% {
        -webkit-transform: scale(.85);
        transform: scale(.85)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes list_title_loading {
    0% {
        width: 80%
    }
    to {
        width: 95%
    }
}

@keyframes list_title_loading {
    0% {
        width: 80%
    }
    to {
        width: 95%
    }
}

@-webkit-keyframes list_abstract_loading {
    0% {
        width: 60%
    }
    to {
        width: 80%
    }
}

@keyframes list_abstract_loading {
    0% {
        width: 60%
    }
    to {
        width: 80%
    }
}

@-webkit-keyframes profile-color-modes-illu-anim {
    0% {
        stroke: #666
    }
}

@keyframes profile-color-modes-illu-anim {
    0% {
        stroke: #666
    }
}

@-webkit-keyframes profile-color-modes-illu-anim-frame-show {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    to {
        opacity: 1
    }
}

@keyframes profile-color-modes-illu-anim-frame-show {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes profile-color-modes-illu-anim-frame-hide {
    0% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        opacity: 0
    }
}

@keyframes profile-color-modes-illu-anim-frame-hide {
    0% {
        opacity: 1;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        opacity: 0
    }
}

@-webkit-keyframes shaked {
    2%, 24%, 80% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translateY(1.5px) rotate(-1.5deg);
        transform: translateY(1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
        transform: translateY(-1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translateY(2.5px) rotate(1.5deg);
        transform: translateY(2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translateY(-1.5px) rotate(1.5deg);
        transform: translateY(-1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translateY(-.5px) rotate(-1.5deg);
        transform: translateY(-.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translateY(.5px) rotate(-1.5deg);
        transform: translateY(.5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translateY(.5px) rotate(.5deg);
        transform: translateY(.5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translateY(.5px) rotate(1.5deg);
        transform: translateY(.5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translateY(1.5px) rotate(-.5deg);
        transform: translateY(1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translateY(2.5px) rotate(-1.5deg);
        transform: translateY(2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translateY(1.5px) rotate(.5deg);
        transform: translateY(1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translateY(.5px) rotate(2.5deg);
        transform: translateY(.5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translateY(1.5px) rotate(2.5deg);
        transform: translateY(1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translateY(2.5px) rotate(-.5deg);
        transform: translateY(2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translateY(.5px) rotate(-.5deg);
        transform: translateY(.5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translateY(2.5px) rotate(.5deg);
        transform: translateY(2.5px) rotate(.5deg)
    }
    0%, to {
        -webkit-transform: translate(0) rotate(0deg);
        transform: translate(0) rotate(0deg)
    }
}

@keyframes shaked {
    2%, 24%, 80% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translateY(1.5px) rotate(-1.5deg);
        transform: translateY(1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
        transform: translateY(-1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translateY(2.5px) rotate(1.5deg);
        transform: translateY(2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translateY(-1.5px) rotate(1.5deg);
        transform: translateY(-1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translateY(-.5px) rotate(-1.5deg);
        transform: translateY(-.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translateY(.5px) rotate(-1.5deg);
        transform: translateY(.5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translateY(.5px) rotate(.5deg);
        transform: translateY(.5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translateY(.5px) rotate(1.5deg);
        transform: translateY(.5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translateY(1.5px) rotate(-.5deg);
        transform: translateY(1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translateY(2.5px) rotate(-1.5deg);
        transform: translateY(2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translateY(1.5px) rotate(.5deg);
        transform: translateY(1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translateY(.5px) rotate(2.5deg);
        transform: translateY(.5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translateY(1.5px) rotate(2.5deg);
        transform: translateY(1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translateY(2.5px) rotate(-.5deg);
        transform: translateY(2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translateY(.5px) rotate(-.5deg);
        transform: translateY(.5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translateY(2.5px) rotate(.5deg);
        transform: translateY(2.5px) rotate(.5deg)
    }
    0%, to {
        -webkit-transform: translate(0) rotate(0deg);
        transform: translate(0) rotate(0deg)
    }
}

@-webkit-keyframes overdue {
    0% {
        -webkit-clip-path: circle(0 at 0 0);
        clip-path: circle(0 at 0 0)
    }
    to {
        -webkit-clip-path: circle(100%);
        clip-path: circle(100%)
    }
}

@keyframes overdue {
    0% {
        -webkit-clip-path: circle(0 at 0 0);
        clip-path: circle(0 at 0 0)
    }
    to {
        -webkit-clip-path: circle(100%);
        clip-path: circle(100%)
    }
}

@-webkit-keyframes progress-active {
    0% {
        opacity: .3;
        width: 0
    }
    to {
        opacity: 0;
        width: 100%
    }
}

@keyframes progress-active {
    0% {
        opacity: .3;
        width: 0
    }
    to {
        opacity: 0;
        width: 100%
    }
}

@-webkit-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-background {
    0%, 24.9% {
        background-color: #54b5db
    }
    25%, 49.9% {
        background-color: #da4733
    }
    50%, 74.9% {
        background-color: #3b78e7
    }
    75%, to {
        background-color: #fdba2c
    }
}

@-webkit-keyframes lamp-front {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        background-color: #da4733
    }
    24.9% {
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
        background-color: #da4733
    }
    25% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        background-color: #3b78e7
    }
    49.9% {
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
        background-color: #3b78e7
    }
    50% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        background-color: #fdba2c
    }
    74.9% {
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
        background-color: #fdba2c
    }
    75% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        background-color: #409eff
    }
    to {
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
        background-color: #409eff
    }
}

@keyframes lamp-front {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        background-color: #da4733
    }
    24.9% {
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
        background-color: #da4733
    }
    25% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        background-color: #3b78e7
    }
    49.9% {
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
        background-color: #3b78e7
    }
    50% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        background-color: #fdba2c
    }
    74.9% {
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
        background-color: #fdba2c
    }
    75% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        background-color: #409eff
    }
    to {
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
        background-color: #409eff
    }
}

@-webkit-keyframes showHeaderTitle {
    0% {
        opacity: .25;
        -webkit-transform: scale(.25);
        transform: scale(.25)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes showHeaderTitle {
    0% {
        opacity: .25;
        -webkit-transform: scale(.25);
        transform: scale(.25)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes twinkle {
    to {
        -webkit-box-shadow: inset 0 0 15px #f4b393;
        box-shadow: inset 0 0 15px #f4b393
    }
}

@keyframes twinkle {
    to {
        -webkit-box-shadow: inset 0 0 15px #f4b393;
        box-shadow: inset 0 0 15px #f4b393
    }
}

@-webkit-keyframes twinkle-night {
    to {
        -webkit-box-shadow: inset 0 0 15px #595997;
        box-shadow: inset 0 0 15px #595997
    }
}

@keyframes twinkle-night {
    to {
        -webkit-box-shadow: inset 0 0 15px #595997;
        box-shadow: inset 0 0 15px #595997
    }
}

@-webkit-keyframes dong {
    0% {
        -webkit-transform: translateY(3px) scaleY(.95);
        transform: translateY(3px) scaleY(.95)
    }
    to {
        -webkit-transform: translateY(-3px) scaleY(1);
        transform: translateY(-3px) scaleY(1)
    }
}

@keyframes dong {
    0% {
        -webkit-transform: translateY(3px) scaleY(.95);
        transform: translateY(3px) scaleY(.95)
    }
    to {
        -webkit-transform: translateY(-3px) scaleY(1);
        transform: translateY(-3px) scaleY(1)
    }
}

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

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

#Joe, .joe_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal
}

#Joe {
    position: relative;
    z-index: 1;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh
}

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

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

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

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

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

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

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

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

#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, .joe_header__above-logo svg, .joe_header__above-nav .joe_dropdown__menu a::after {
    display: none
}

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

@media (max-width: 860px) {
    #Joe .joe_leaving-list .emoji-item, #Joe .newreply .emoji-item {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
}

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

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

#Joe .newreply .emoji-animate .img {
    cursor: default
}

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

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

#Joe .newreply .emoji-img {
    position: relative;
    cursor: default
}

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

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

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

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

.joe_container {
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    margin: 0 auto 30px;
    padding: 0 15px
}

.joe_container.revert {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

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

.joe_container img {
    max-width: 100%
}

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

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

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

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

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

.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 {
    padding-left: 5px;
    font-size: 12px
}

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

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

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

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

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

.joe_container .code-toolbar pre[class*=language-] .copy-button {
    top: 3px;
    z-index: 5;
    font-weight: 700;
    -webkit-transition: opacity .25s;
    transition: opacity .25s
}

.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 {
    position: absolute;
    top: 30px;
    z-index: 1;
    content: "";
    width: 100%;
    height: 1px;
    background: #d8d8d8;
    mix-blend-mode: overlay
}

.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 {
    content: "";
    position: absolute;
    top: 9px;
    left: 12px;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fc625d;
    -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
}

.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 {
    pointer-events: none;
    opacity: 0
}

.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 {
    pointer-events: auto;
    opacity: 1
}

.joe_container .code-toolbar pre[class*=language-].c_copy, .joe_container .code-toolbar pre[class*=language-].c_copy code {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    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 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

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

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

.joe_dropdown {
    position: relative
}

.joe_dropdown__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

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

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

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

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

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

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

.joe_header .joe_container {
    margin: 0 auto
}

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

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

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

.joe_header__above-logo {
    position: relative;
    height: 60px;
    margin-right: 10px;
    padding-right: 18px
}

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

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

.joe_header__above-logo, .joe_header__above-nav, .joe_header__above-nav .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

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

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

.joe_header__above-nav .item:last-child {
    margin-right: 0
}

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

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

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

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

.joe_header__above-nav .item:hover + .joe-icon-arrow-down, .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.active-shadow .item.current {
    text-shadow: 0 4px 20px var(--theme)
}

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

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

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

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

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

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

.joe_header__above-nav .joe_dropdown .item:hover:after, .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 {
    position: relative;
    height: 34px
}

.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 {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateX(0) perspective(600px) rotateY(0);
    transform: translateX(0) perspective(600px) rotateY(0)
}

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

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

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

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

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

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

.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 {
    -webkit-transform: translate3d(0, -50%, 0) rotateY(180deg);
    transform: translate3d(0, -50%, 0) rotateY(180deg)
}

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

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

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

.joe_header__above-search .icon, .joe_header__above-search-mobile .icon {
    position: absolute;
    top: 50%;
    right: 44px;
    width: 28px;
    height: 38px;
    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%;
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s;
    transition: transform .35s, -webkit-transform .35s;
    -webkit-transform: translate3d(100%, -50%, 0) rotateY(180deg);
    transform: translate3d(100%, -50%, 0) rotateY(180deg)
}

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

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

.joe_header__above-search .result .item, .joe_header__above-search-mobile .result .item {
    height: 40px;
    line-height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    padding: 0 10px;
    border-bottom: 1px solid var(--classD);
    -webkit-transition: background .35s;
    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:nth-child(1) .sort, .joe_header__above-search-mobile .result .item:nth-child(1) .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 {
    color: #fff;
    background: #7f7f8c;
    width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 2px;
    text-align: center;
    margin-right: 8px;
    font-weight: 500
}

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

.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 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%
}

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

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

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

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

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

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

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

.joe_header__below-class {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

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

.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 {
    width: 110px;
    text-align: center
}

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

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

.joe_header__below-sign {
    margin-left: auto
}

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

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

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

.joe_comment .comment-list__item-contain .term .content .handle .reply:hover .icon, .joe_header__below-sign .joe_dropdown__link:hover .icon {
    fill: var(--theme)
}

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

.joe_header__below-sign .joe_dropdown__menu a {
    color: var(--minor)
}

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

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

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

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

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

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

.joe_header__searchout.active {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

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

.joe_header__searchout-inner .search, .joe_header__searchout-inner .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.joe_header__searchout-inner .search {
    width: 100%
}

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

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

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

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

.joe_header__searchout-inner .cloud {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -5px -5px;
    max-height: 250px
}

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

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

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

.joe_header__searchout-inner .cloud, .joe_header__slideout-wrap {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain
}

.joe_header__slideout-wrap {
    position: relative;
    padding: 135px 15px 15px;
    height: 100%
}

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

.joe_header__slideout.active {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

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

.joe_header__slideout-author, .joe_header__slideout-count, .joe_header__slideout-menu {
    background: var(--background);
    border-radius: var(--radius-wrap);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow)
}

.joe_header__slideout-author {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 15px;
    padding: 15px
}

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

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

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

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

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

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

.joe_header__slideout-count, .joe_header__slideout-menu {
    padding: 10px 15px
}

.joe_header__slideout-count {
    margin-bottom: 15px
}

.joe_header__slideout-count .item, .joe_header__slideout-menu .link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--routine);
    padding: 5px 0
}

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

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

.joe_header__slideout-menu {
    overflow: hidden
}

.joe_header__slideout-menu .link {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 0;
    color: var(--main);
    -webkit-transition: color .15s;
    transition: color .15s
}

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

.joe_header__slideout-menu .link .joe-font {
    color: var(--minor);
    -webkit-transition: fill .15s, -webkit-transform .15s;
    transition: transform .15s, fill .15s;
    transition: transform .15s, fill .15s, -webkit-transform .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);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

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

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

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

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

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

.joe_header__mask.slideout {
    z-index: 6
}

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

.joe_index__title {
    border-bottom: 1px solid var(--classC)
}

.joe_index__title, .joe_index__title-notice, .joe_index__title-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

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

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

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

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

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

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

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

.joe_index__title-notice {
    margin-left: auto;
    height: 40px
}

.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;
    -webkit-transition: color .35s;
    transition: color .35s
}

.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 {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    -webkit-column-gap: 15px;
    -moz-column-gap: 15px;
    column-gap: 15px;
    padding-top: 12px
}

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

.joe_index__hot-list.hotlist .item .link .inner .post-nums, .joe_index__hot-list.hotlist .item .link .inner .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    color: #fff
}

.joe_index__hot-list.hotlist .item .link .inner .title {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    font-size: 14px;
    background: rgba(0, 0, 0, .4);
    -webkit-transition: background .5s;
    transition: background .5s;
    will-change: background
}

.joe_index__hot-list.hotlist .item .link .inner:hover .image {
    background: rgba(0, 0, 0, .5);
    -webkit-transform: scale(1.1);
    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 {
    z-index: 1;
    top: 5px;
    right: 5px;
    height: 18px;
    padding: 0 8px;
    white-space: nowrap;
    font-size: 12px;
    background-image: -webkit-gradient(linear, left top, right top, from(#fc712a), to(#f84c39));
    background-image: linear-gradient(to right, #fc712a, #f84c39);
    background-color: #f84c39;
    border-radius: 8px
}

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

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

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

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

.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 {
    width: 100%;
    height: 120px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: var(--radius-inner) var(--radius-inner) 0 0;
    -webkit-transition: opacity .35s, -webkit-transform .3s;
    transition: opacity .35s, transform .3s;
    transition: opacity .35s, transform .3s, -webkit-transform .3s;
    will-change: transform
}

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

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

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

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

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

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

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

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

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

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

.joe_aside.hide {
    display: none
}

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

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

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

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

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

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

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

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

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

.joe_aside__item.author #he-plugin-simple {
    top: 4px;
    right: 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 {
    right: auto;
    left: 4px
}

.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 {
    overflow: hidden;
    background-color: #242422;
    border-radius: 4px
}

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

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

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

.joe_aside__item.author .user {
    position: relative;
    z-index: 4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 15px
}

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

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

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

.joe_aside__item.author .user .avatar:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}

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

.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 {
    left: -2px;
    top: -2px;
    width: 80px;
    height: 80px
}

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

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

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

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

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

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

.joe_aside__item.author .user .avatar_frame.two-mouse {
    left: -3px;
    top: -4px;
    width: 82px;
    height: 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 {
    left: -7px;
    top: -15px;
    width: 90px;
    height: 90px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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);
    margin-bottom: 10px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    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, .joe_aside__item.author .count .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.joe_aside__item.author .count {
    width: 100%;
    padding-bottom: 10px
}

.joe_aside__item.author .count .item {
    position: relative;
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--routine);
    font-size: 12px
}

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

.joe_aside__item.author .count .item:last-child:after, .joe_list__item .meta .items li:last-child::after {
    display: none
}

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

.joe_aside__item.author .list .item, .joe_aside__item.author .social-account, .joe_aside__item.newest .list .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

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

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

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

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

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

.joe_aside__item.author .list .item, .joe_aside__item.newest .list .item {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    line-height: 30px
}

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

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

.joe_aside__item.author .list .item .link:hover, .joe_aside__item.newest .list .item:hover .link, .joe_aside__item.notice .notice_content a[href*=http]:hover, .joe_aside__item.today .joe_aside__item-contain .item .desc a:hover {
    color: var(--theme)
}

.joe_aside__item.author .list .item .link:hover::after, .joe_aside__item.newest .list .item:hover .link:after, .joe_aside__item.notice .notice_content a[href*=http]:hover::after {
    width: 100%
}

.joe_aside__item.hot, .joe_aside__item.newest, .joe_aside__item.newreply, .joe_aside__item.notice, .joe_aside__item.qrcode, .joe_aside__item.timelife, .joe_aside__item.today, .joe_aside__item.weather {
    background: var(--background)
}

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

.joe_aside__item.newest .list .item {
    margin-bottom: 15px;
    line-height: 20px
}

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

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

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

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

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

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

.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 {
    background: var(--background-notice);
    -webkit-box-shadow: var(--shadow-notice);
    box-shadow: var(--shadow-notice);
    -webkit-animation: var(--animation-notice);
    animation: var(--animation-notice)
}

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

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

.joe_aside__item.qrcode .qrcode_img {
    display: block;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 10px;
    border-radius: 5px
}

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

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

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

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

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

.joe_aside__item.timelife .item .progress, .joe_aside__item.timelife .item .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

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

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

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

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

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

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

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

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

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

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

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

.joe_aside__item.hot .item:nth-child(1) .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 {
    position: relative;
    display: block;
    border-radius: var(--radius-inner);
    overflow: hidden
}

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

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

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

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

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

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

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

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

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

.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 {
    display: block;
    color: var(--routine);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: color .25s;
    transition: color .25s;
    font-size: 13px
}

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

.joe_aside__item.today .joe_aside__item-contain .item:nth-child(even) .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 .empty {
    text-align: center;
    color: var(--routine)
}

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

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

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

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

.joe_aside__item.newreply .item .user .info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

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

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

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

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

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

.joe_aside__item.newreply .item .reply .link a, .joe_aside__item.newreply .item .reply .link:hover, .joe_aside__item.tags-cloud .tags-cloud-list a:hover, .joe_aside__item.tags-cloud .tags_more:hover, .joe_aside__item.tags-cloud .tags_more:hover i {
    color: var(--theme)
}

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

.joe_aside__item.advert {
    display: block;
    min-height: 32px;
    background: var(--background)
}

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

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

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

.joe_aside__item.tags-cloud .text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

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

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

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

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

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

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

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

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

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

.joe_archive__title-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

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

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

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

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

.joe_list__item .information .abstract, .joe_list__item .information .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word
}

.joe_list__item .information .title {
    margin-bottom: 10px;
    color: var(--main);
    font-size: 18px;
    line-height: 24px;
    max-height: 48px;
    -webkit-transition: color .35s;
    transition: color .35s
}

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

.joe_list__item .information .abstract {
    color: var(--minor);
    line-height: 22px;
    max-height: 44px;
    opacity: .85
}

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

.joe_list__item .meta {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: auto;
    color: var(--minor);
    font-size: 13px
}

.joe_list__item .meta, .joe_list__item .meta .categories, .joe_list__item .meta .items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.joe_list__item .meta .items {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

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

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

.joe_list__item .meta .categories {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 320px;
    white-space: nowrap;
    overflow-x: auto
}

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

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

.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 {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
}

.joe_list__item.default, .joe_list__loading .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

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

.joe_list__item.default:hover .thumbnail time, .joe_list__item.single:hover .thumbnail time {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

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

.joe_list__item.default .thumbnail img {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid var(--classD);
    -webkit-transition: opacity .35s;
    transition: opacity .35s
}

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

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

.joe_list__item.default .information {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0
}

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

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

.joe_list__item.default .thumbnail img, .joe_list__item.multiple .thumbnail img, .joe_list__item.single .thumbnail img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: var(--radius-inner)
}

.joe_list__item.single .thumbnail img {
    -webkit-transition: opacity .35s;
    transition: opacity .35s
}

.joe_list__item.single .thumbnail time {
    top: 10px;
    right: 10px
}

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

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

.joe_list__item.multiple .thumbnail img {
    -webkit-transition: opacity .35s, -webkit-transform .35s;
    transition: transform .35s, opacity .35s;
    transition: transform .35s, opacity .35s, -webkit-transform .35s
}

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

.joe_list__item.none .information {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 140px
}

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

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

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

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

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

.joe_list__loading .item .information .abstract p {
    height: 18px;
    margin-bottom: 5px;
    -webkit-animation: list_abstract_loading .8s infinite alternate;
    animation: list_abstract_loading .8s infinite alternate
}

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

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

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

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

.joe_load:active {
    -webkit-transform: scale(.75);
    transform: scale(.75)
}

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

.joe_empty {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 50px 0;
    color: var(--routine)
}

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

.joe_empty.mini {
    padding: 20px 0
}

.joe_detail .joe_comment_box h2, .joe_empty.hide {
    display: none
}

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

.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, .joe_gird__item :last-child {
    margin-bottom: 0 !important
}

.joe_gird {
    display: grid
}

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

.joe_checkbox:disabled {
    cursor: not-allowed
}

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

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

.joe_mtitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

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

.joe_mtitle__text:hover {
    padding: 0
}

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

.joe_mtitle__text::before {
    left: -35px
}

.joe_mtitle__text::after {
    right: -35px
}

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

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

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

.joe_abtn__icon .fa {
    color: #fff
}

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

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

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

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

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

.joe_anote__content, .joe_anote__icon {
    display: inline-block;
    vertical-align: top
}

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

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

.joe_anote__content {
    color: #fff;
    padding: 0 12px 0 6px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    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 {
    display: block;
    width: 100%;
    height: 2px;
    background-size: 80px
}

.joe_hide {
    position: relative;
    display: block;
    padding: 30px 0;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
    background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px)
}

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

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

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

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

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

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

.joe_message:hover .joe_message__icon {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}

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

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

.joe_message.success {
    border-left-color: #2bde3f;
    background: #2bde3f20;
    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,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MDE1ODgxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMTU3IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgcC1pZD0iNDExNTgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=)
}

.joe_message.info {
    border-left-color: #1d72f3;
    background: #1d72f320;
    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,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MzM4MjIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYxNjg0IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03NjcuOTczOTc1IDExNi4zNDYwODZjMCA2NC4yNTI3MzQtNDEuNjgzMjE0IDExNi4zODg3NS05My4wOTM5MzUgMTE2LjM4ODc1UzU4MS43ODYxMDYgMTgwLjU5ODgyIDU4MS43ODYxMDYgMTE2LjM0NjA4NkM1ODEuNzg2MTA2IDUyLjA5MzM1MiA2MjMuNDY5MzIgMCA2NzQuODgwMDQgMFM3NjcuOTczOTc1IDUyLjA5MzM1MiA3NjcuOTczOTc1IDExNi4zNDYwODZ6TTI1NiA1MDQuMjk0MzY1czcwLjgyMzA2Ni0yODQuNzg1NTIzIDI4Ni43NDgwOS0yNzEuMDQ3NTU1YzIxNS45MjUwMjQgMTMuNjk1MzA0IDY3LjIzOTI0OSAyNjEuNDQ4MDQzLTEzLjI2ODY1OSA1MDEuNjQ5MTY2LTgwLjUwNzkwOCAyNDAuMjAxMTIzIDEwMC4yNjE1NyA3MS40MjAzNjkgMTQ1LjQwMDYwOS03LjU1MTYxNiAwIDAtOTMuMTM2NTk5IDQwNi43NjMzMjMtMzY3LjM0MTMyNyAyNjcuNjc3MDYtMTI4LjU0ODEzMi02NS4yMzQwMTcgMzIuMjU0MzYtMzk4LjA1OTc2NSAxMDMuMTIwMDkyLTU0NS41OTM1OTlDNDgxLjU2NzIgMzAxLjgwODY1OCAzMzYuNjM1OTAxIDM4Ny42MDY5NjMgMjU2IDUwNC4yNTE3MDF6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2MTY4NSI+PC9wYXRoPjwvc3ZnPg==)
}

.joe_message.warning {
    border-left-color: #ffc007;
    background: #ffc00720;
    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,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MTI5NTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3NDkyIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00NzkuODE3MTQzIDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJDNjQzLjY1NzE0MyA0MC45NiA1OTIuNDU3MTQzIDAgNTQxLjI1NzE0MyAwIDQ3OS44MTcxNDMgMCA0MzguODU3MTQzIDUxLjIgNDM4Ljg1NzE0MyAxMTIuNjRsNDAuOTYgNTUyLjk2eiBtNjEuNDQgMTUzLjZjLTYxLjQ0IDAtMTAyLjQgNDAuOTYtMTAyLjQgMTAyLjQgMCA2MS40NCA0MC45NiAxMDIuNCAxMDIuNCAxMDIuNCA2MS40NCAwIDEwMi40LTQwLjk2IDEwMi40LTEwMi40IDAtNjEuNDQtNDAuOTYtMTAyLjQtMTAyLjQtMTAyLjR6IiBwLWlkPSI0NzQ5MyIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==)
}

.joe_message.error {
    border-left-color: #f56c6c;
    background: #f56c6c20;
    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,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MjAyNDk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDg5MTYiPjwvcGF0aD48cGF0aCBkPSJNODMwLjIgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAwTDE5My44IDI2NC41Yy0xOS40LTE5LjQtMTkuNC01MS4zIDAtNzAuNyAxOS40LTE5LjQgNTEuMy0xOS40IDcwLjcgMGw1NjUuNyA1NjUuN2MxOS40IDE5LjQgMTkuNCA1MS4zIDAgNzAuN3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQ4OTE3Ij48L3BhdGg+PC9zdmc+)
}

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

.joe_progress {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

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

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

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

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

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

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

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

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

.joe_card__list-item:last-child, .joe_detail__article table tbody tr:last-child td {
    border-bottom: none
}

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

.joe_timeline {
    line-height: 26px
}

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

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

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

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

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

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

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

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

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

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

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

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

.joe_tabs__body-item {
    padding: 15px
}

.joe_card__describe-content :last-child, .joe_collapse__item-wrapper--content :last-child, .joe_tabs__body-item :last-child {
    margin-bottom: 0 !important
}

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

.joe_pdf iframe {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    border: 0
}

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

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

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

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

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

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

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

.joe_collapse, .joe_detail__article ol li, .joe_detail__article ul li {
    line-height: 26px
}

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

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

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

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

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

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

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

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

.joe_cloud {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--classC);
    border-radius: var(--radius-inner);
    overflow: hidden
}

.joe_cloud__logo {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    background-size: 100% 100%
}

.joe_cloud__logo._default {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTEzNS40NjcgODIzLjY4YTM3MC41NiA5My42NTMgMCAxIDAgNzQxLjEyIDAgMzcwLjU2IDkzLjY1MyAwIDEgMC03NDEuMTIgMHoiIGZpbGw9IiNCNkM5Q0IiLz48cGF0aCBkPSJNODUuMzMzIDgxMi4zNzNWMTUxLjA0YzguNzQ3LTIzLjA0IDIzLjQ2Ny00Mi42NjcgNDkuMjgtNDIuNjY3IDU1LjI1NCAxLjI4IDExMC45MzQtOS4zODYgMTY1LjU0NyA2LjgyN2ExNC41MDcgMTQuNTA3IDAgMCAwIDEwLjg4LTIuMzQ3IDcxLjY4IDcxLjY4IDAgMCAxIDMyLjIxMy01LjU0NmgxMTQuNTZhNTYuMzIgNTYuMzIgMCAwIDEgNjQgNTIuOTA2IDYxLjQ0IDYxLjQ0IDAgMCAwLTguNzQ2IDY5LjU0NyAyMDYuNTA3IDIwNi41MDcgMCAwIDEgOC41MzMgMjkuMjI3djU0MS40NGE1MS42MjcgNTEuNjI3IDAgMCAxLTQ4Ljg1MyA1Mi45MDZjLTU1LjI1NCAwLTExMS4xNDcgOC45Ni0xNjUuOTc0LTYuMTg2YTEzLjg2NyAxMy44NjcgMCAwIDAtOS4xNzMgMCA5NS41NzMgOTUuNTczIDAgMCAxLTQ1LjY1MyA2LjE4NmwtOTMuMjI3IDEuMjhjLTMzLjcwNyAyLjU2LTYxLjQ0LTYuNjEzLTczLjM4Ny00Mi4yNHptMzg5LjEyLTMzMS43MzNWMTc1LjU3M2MwLTEwLjQ1MyAxLjkyLTIxLjMzMy0xNC43Mi0yMS4zMzNIMzQxLjEyYTE0LjUwNyAxNC41MDcgMCAwIDAtMTUuNTczIDEwLjY2NyA5NS4xNDcgOTUuMTQ3IDAgMCAwLTcuMDQgNDEuMzg2djU2OC4zMmMxLjQ5MyAyNi42NjcgOS42IDM0LjM0NyAzNi4wNTMgMzQuMzQ3aDk5LjJjMTYuNDI3IDAgMjEuMzMzLTUuMzMzIDIxLjMzMy0yMS4zMzMtLjg1My0xMDIuNC0uNjQtMjA0LjgtLjY0LTMwNi45ODd6bS0zNDIuNCAwVjc4Ny4yYzAgOS42LTEuOTIgMjAuMDUzIDEzLjY1NCAxOS44NEgyNjYuMjRjNi4xODcgMCAxMS41MiAwIDEzLjQ0LTcuODkzYTEzOS4wOTMgMTM5LjA5MyAwIDAgMCA4LjMyLTM5LjA0VjIwMC4zMmExNDUuOTIgMTQ1LjkyIDAgMCAwIDAtMTUuNTczYy0yLjc3My0yNS4xNzQtOS44MTMtMzEuMzYtMzQuOTg3LTMxLjM2aC05OS4yYy0xNy40OTMgMC0yMS4zMzMgNS4zMzMtMjEuMzMzIDIxLjMzMyAwIDEwMi42MTMtLjQyNyAyMDUuMjI3LS40MjcgMzA2Ljc3M3oiIGZpbGw9IiMzMTQ1NTMiLz48cGF0aCBkPSJNODY0IDgyOC44bC02Mi4wOCAyMS4zMzNjLTQwLjUzMyAxNC4wOC02Ni45ODcgMS40OTQtODEuOTItMzkuMjUzLTcuODkzLTIxLjMzMy0xNi4yMTMtNDIuNjY3LTI0LjMyLTY0bC0zLjYyNy0zLjg0YTY0IDY0IDAgMCAwLTUuNzYtMjQuMzJjLTM2LjA1My0xMDAuNjkzLTcxLjY4LTIwMS44MTMtMTA4LjM3My0zMDIuMjkzLTE4Ljk4Ny01MS44NC0zNC45ODctMTA0Ljk2LTU3LjM4Ny0xNTUuNTJBMjA2LjUwNyAyMDYuNTA3IDAgMCAwIDUxMiAyMzEuNjhhNjEuNDQgNjEuNDQgMCAwIDEgOC43NDctNjkuNTQ3IDY3MS4xNDcgNjcxLjE0NyAwIDAgMSAxNDAuNTg2LTUzLjU0NmMyNy45NDctOC4xMDcgNTEuMiA5LjE3MyA2Mi4wOCAzOS42OHE1Mi40OCAxNDUuOTIgMTA0LjUzNCAyOTIuMDUzbDEwMy42OCAyOTAuMzQ3YzE2LjY0IDQ2LjI5MyA1LjMzMyA3MC42MTMtNDAuMzIgODcuNDY2LTkuMzg3IDMuMi0xOC4zNDcgNy4wNC0yNy4zMDcgMTAuNjY3em0yNi44OC03MS44OTNzLTEuMjgtNC4wNTQtMi4zNDctNy4wNFE3ODQuNjQgNDU4Ljg4IDY4MC45NiAxNjguMTA3Yy00LjQ4LTEyLjgtMTAuNDUzLTE1LjM2LTIzLjA0LTEwLjY2Ny0yOS4wMTMgMTEuMzA3LTU4LjAyNyAyMS4zMzMtODcuODkzIDMxLjE0Ny0xNy4yOCA1LjMzMy0xOC4xMzQgMTMuMDEzLTEyLjU4NyAyOC4zNzMgMzkuODkzIDEwOS40NCA3OC43MiAyMTkuMzA3IDExNy45NzMgMzI5LjE3M2w4OC4zMiAyNDYuODI3YzMuMiA5LjE3MyA1LjU0NyAxOS40MTMgMTkuODQgMTQuMDggMzIuODU0LTEyLjE2IDY1LjcwNy0yMy42OCA5OC43NzQtMzUuNDEzYTExLjMwNyAxMS4zMDcgMCAwIDAgOC43NDYtMTQuNzJ6IiBmaWxsPSIjNzkzOTQzIi8+PHBhdGggZD0iTTQ3NC40NTMgNDgwLjY0djMwNi45ODdjMCAxNS43ODYtNC4yNjYgMjEuMzMzLTIxLjMzMyAyMS4zMzMtMzMuMDY3LTEuMDY3LTY2LjEzMyAwLTk5LjIgMC0yNi40NTMgMC0zNC41Ni03LjY4LTM2LjA1My0zNC4zNDd2LTU2OC4zMmE5NS4xNDcgOTUuMTQ3IDAgMCAxIDcuMDQtNDEuMzg2IDE0LjUwNyAxNC41MDcgMCAwIDEgMTUuNTczLTEwLjY2N2gxMTguNjEzYzE2LjY0IDAgMTQuNzIgMTAuNDUzIDE0LjcyIDIxLjMzM3EuNjQgMTUyLjMyLjY0IDMwNS4wNjd6TTQxMi4xNiA1NzZ2MTMyLjA1M2MwIDExLjA5NCAxLjA2NyAyMS4zMzQgMTQuNzIgMjIuODI3czE2LjY0LTExLjA5MyAxNi40MjctMjMuMDRWNDQzLjczM2MwLTExLjA5My0xLjA2Ny0yMS4zMzMtMTQuNzItMjIuODI2cy0xNi42NCAxMS4wOTMtMTYuNjQgMjMuMDRjLjQyNiA0My4wOTMuMjEzIDg3LjA0LjIxMyAxMzIuMDUzem0zOC44MjctMjkwLjk4N2E1MC41NiA1MC41NiAwIDEgMC01MS40MTQgNDkuNzA3IDUwLjk4NyA1MC45ODcgMCAwIDAgNTEuNjI3LTUwLjc3M3pNMzU3Ljc2IDY0MS4wNjd2NjcuODRjMCAxMC44OCAyLjM0NyAyMS4zMzMgMTQuNzIgMjEuMzMzczE2LjY0LTkuMzg3IDE2LjY0LTIxLjMzM3YtMTM1LjY4YzAtMTAuODgtMi41Ni0yMS4zMzQtMTQuNzItMjEuMzM0cy0xNi42NCA5LjM4Ny0xNi42NCAyMS4zMzRjLjIxMyAyMi42MTMgMCA0NS40NCAwIDY3Ljg0ek0xMzIuMDUzIDQ4MS40OTNWMTc2LjQyN2MwLTE2Ljg1NCA0LjI2Ny0yMi44MjcgMjEuMzM0LTIxLjMzNCAzMy4wNjYgMS4yOCA2Ni4xMzMgMCA5OS4yIDAgMjUuMzg2IDAgMzIuMjEzIDYuMTg3IDM0Ljk4NiAzMS4zNmExNDUuOTIgMTQ1LjkyIDAgMCAxIDAgMTUuNTc0djU1OS43ODZhMTM5LjA5MyAxMzkuMDkzIDAgMCAxLTguMzIgMzkuMDRjLTIuMTMzIDcuNDY3LTcuNDY2IDcuODk0LTEzLjQ0IDcuODk0SDE0NS4yOGMtMTUuNTczIDAtMTMuNjUzLTEwLjI0LTEzLjY1My0xOS44NFY1MTEuNTczcS40MjYtMTUuMzYuNDI2LTMwLjA4em02Mi4yOTQgMTA2LjY2N1Y0NjcuODRjMC0xMS43MzMgMC0yMy44OTMtMTUuMzYtMjQuMTA3cy0xNiAxMS43MzQtMTYgMjMuNjh2MjM4LjkzNGMwIDExLjUyIDAgMjMuODkzIDE1LjM2IDI0LjEwNnMxNi0xMS43MzMgMTYtMjMuNjhjLS4yMTQtMzkuODkzIDAtNzkuMzYgMC0xMTguODI2ek0yNTYgMjgzLjczM2E1MC41NiA1MC41NiAwIDEgMC01MS4yIDQ5LjkyIDUwLjc3MyA1MC43NzMgMCAwIDAgNTEuMi00OS45MnptLTcuNjggMzQxLjMzNHYtODEuNDk0YzAtMTEuMzA2LTEuNzA3LTIxLjMzMy0xNS4zNi0yMS4zMzNzLTE2IDEwLjI0LTE2IDIxLjMzM1Y3MDguNDhjMCAxMS4zMDcgMS43MDcgMjEuMzMzIDE1LjM2IDIxLjMzM3MxNi0xMC4yNCAxNi0yMS4zMzNjLjIxMy0yNy45NDcuNDI3LTU1Ljg5My40MjctODMuNjI3eiIgZmlsbD0iI0I3RTFFQiIvPjxwYXRoIGQ9Ik04OTEuMDkzIDc1Ni45MDdhMTEuMzA3IDExLjMwNyAwIDAgMS04Ljc0NiAxNC43MmMtMzIuODU0IDExLjczMy02NS45MiAyMy40NjYtOTguNzc0IDM1LjQxMy0xNC4yOTMgNS4zMzMtMTYuNjQtNC45MDctMTkuODQtMTQuMDhsLTg4LjMyLTI0Ni44MjdDNjM2LjE2IDQzNi4yNjcgNTk3LjMzMyAzMjYuNCA1NTcuMjI3IDIxNi45NmMtNS41NDctMTUuMTQ3LTQuNjk0LTIzLjA0IDEyLjU4Ni0yOC4zNzMgMjkuNjU0LTguOTYgNTguODgtMjAuMDU0IDg3Ljg5NC0zMS4xNDcgMTIuNTg2LTQuOTA3IDE4LjU2LTIuMzQ3IDIzLjA0IDEwLjY2N3ExMDMuNjggMjkwLjk4NiAyMDcuNzg2IDU4MS43NmMxLjI4IDIuOTg2IDIuMTM0IDUuOTczIDIuNTYgNy4wNHptLTEyMC4zMi0yNjYuMjRjMC0yLjU2LTIuMTMzLTYuODI3LTMuNjI2LTExLjA5NEw2ODcuNzg3IDI1NmE4Mi41NiA4Mi41NiAwIDAgMC0zLjYyNy04Ljk2Yy0zLjg0LTcuNjgtOS44MTMtMTIuOC0xOC41Ni05LjgxM2ExNC45MzMgMTQuOTMzIDAgMCAwLTEwLjQ1MyAxOS44NGMwIDMuMiAxLjkyIDYuMTg2IDIuOTg2IDkuMTczbDc5Ljc4NyAyMjQuNDI3YTY4LjQ4IDY4LjQ4IDAgMCAwIDUuMzMzIDEyLjM3MyAxNC4yOTMgMTQuMjkzIDAgMCAwIDE4LjU2IDUuOTczYzYuMTg3LTMuNDEzIDkuMzg3LTkuMzg2IDguOTYtMTguMzQ2em0xOS4yIDEyOGE1MC41NiA1MC41NiAwIDEgMCA1MC4xMzQgNTAuOTg2IDUwLjk4NyA1MC45ODcgMCAwIDAtNTAuNzc0LTUwLjk4NnptLTk2LjY0LTE4Mi40YzAtMi45ODctMi41Ni04LjUzNC00LjQ4LTE0LjA4cS0yNi4wMjYtNzIuOTYtNTIuMDUzLTE0NC44NTRjLTMuODQtMTAuODgtNy40NjctMjQuNzQ2LTIzLjI1My0xOS40MTNzLTEwLjY2NyAxNy45Mi02LjQgMjkuMjI3bDUyLjkwNiAxNDcuNjI2YTcyLjUzMyA3Mi41MzMgMCAwIDAgNS45NzQgMTQuMjk0IDEzLjg2NyAxMy44NjcgMCAwIDAgMTcuMDY2IDUuNzZjNy4wNC0zLjIgMTAuMjQtOC43NDcgMTAuMjQtMTguNTZ6IiBmaWxsPSIjRkJCNkFDIi8+PHBhdGggZD0iTTQxMi4xNiA1NzZWNDQzLjk0N2MwLTExLjk0NyAxLjQ5My0yMy42OCAxNi42NC0yMy4wNHMxNC43MiAxMS43MzMgMTQuNzIgMjIuODI2VjcwNy44NGMwIDExLjk0Ny0xLjQ5MyAyMy42OC0xNi40MjcgMjMuMDRzLTE0LjcyLTExLjczMy0xNC43Mi0yMi44MjdjMC00NS4wMTMtLjIxMy04OS4zODYtLjIxMy0xMzIuMDUzem0zOS4wNC0yOTIuMDUzYTUwLjU2IDUwLjU2IDAgMSAxLTQ5LjQ5My01MS40MTQgNTAuOTg3IDUwLjk4NyAwIDAgMSA0OS40OTMgNTEuNDE0em0tMzAuOTMzLTEuNzA3Yy0yLjM0Ny0xMS41Mi04Ljc0Ny0xOC45ODctMjEuMzM0LTE4LjEzM2ExOC45ODcgMTguOTg3IDAgMCAwIDEuNDk0IDM4LjE4NmMxMi41ODYtLjIxMyAxOC4zNDYtOC4zMiAxOS42MjYtMjAuMDUzek0zNTcuNzYgNjQxLjA2N3YtNjcuODRjMC0xMS43MzQgMi45ODctMjEuMzM0IDE2LjY0LTIxLjMzNHMxNC43MiAxMC4yNCAxNC43MiAyMS4zMzR2MTM1LjY4YzAgMTEuNzMzLTIuOTg3IDIxLjMzMy0xNi42NCAyMS4zMzNzLTE0LjcyLTEwLjI0LTE0LjcyLTIxLjMzM2MuMjEzLTIyLjYxNCAwLTQ1LjIyNyAwLTY3Ljg0em0tMTYzLjQxMy01My4xMnYxMTguNGMwIDExLjczMyAwIDIzLjg5My0xNiAyMy42OHMtMTUuMzYtMTIuNTg3LTE1LjM2LTI0LjEwN1Y0NjYuOTg3YzAtMTEuNzM0IDAtMjMuODk0IDE2LTIzLjY4czE1LjM2IDEyLjU4NiAxNS4zNiAyNC4xMDZjLS4yMTQgNDAuMzIgMCA4MC40MjcgMCAxMjAuNTM0ek0yNTYgMjgzLjczM2E1MC41NiA1MC41NiAwIDEgMS00OS45Mi01MS4yIDUwLjc3MyA1MC43NzMgMCAwIDEgNDkuOTIgNTEuMnptLTMwLjcyIDBhMTkuNjI3IDE5LjYyNyAwIDAgMC0xOS4yLTE5LjIgMTkuMiAxOS4yIDAgMCAwLTEuOTIgMzguMTg3YzEyLjU4Ny40MjcgMTguOTg3LTcuMjUzIDIxLjU0Ny0xOS42Mjd6bTIzLjQ2NyAzNDEuMTJ2ODMuNDE0YzAgMTEuNTItMi4zNDcgMjEuMzMzLTE2IDIxLjMzM3MtMTUuMzYtMTAuODgtMTUuMzYtMjEuMzMzVjU0My4zNmMwLTExLjUyIDIuMzQ2LTIxLjMzMyAxNi0yMS4zMzNzMTUuMzYgMTAuODggMTUuMzYgMjEuMzMzYy0uMjE0IDI3LjA5MyAwIDUzLjk3MyAwIDgxLjQ5M3oiIGZpbGw9IiMzMTQ1NTMiLz48cGF0aCBkPSJNNzcwLjc3MyA0OTAuNjY3YzAgOC45Ni0xLjkyIDE0LjkzMy04Ljc0NiAxNy40OTNhMTQuMjkzIDE0LjI5MyAwIDAgMS0xOC41Ni01Ljk3MyA2OC40OCA2OC40OCAwIDAgMS01LjMzNC0xMi4zNzRsLTgwLTIyMi43MmMtMS4wNjYtMi45ODYtMi4xMzMtNi4xODYtMi45ODYtOS4xNzNhMTQuOTMzIDE0LjkzMyAwIDAgMSAxMC40NTMtMTkuODRjOC43NDctMi45ODcgMTQuOTMzIDEuOTIgMTguNTYgOS44MTNhODIuNTYgODIuNTYgMCAwIDEgMy42MjcgOC45Nkw3NjggNDc5LjU3M2MwIDQuMjY3IDEuOTIgOC41MzQgMi43NzMgMTEuMDk0em0xOC41NiAxMjhhNTAuNTYgNTAuNTYgMCAxIDEgMCAxMDAuOTA2IDUwLjU2IDUwLjU2IDAgMCAxIDAtMTAwLjkwNnptMTkuMiA1MC41NmMtMS45Mi0xMS41Mi04LjEwNi0xOS40MTQtMjAuMDUzLTE4Ljk4N2ExOC45ODcgMTguOTg3IDAgMCAwIDAgMzcuOTczYzEyLjU4Ny0uNDI2IDE4LjU2LTguMzIgMjAuNDgtMTkuODR6bS0xMTUuMi0yMzIuOTZjMCAxMC4wMjYtMy4yIDE1LjM2LTEwLjI0IDE3LjQ5M2ExMy44NjcgMTMuODY3IDAgMCAxLTE3LjA2Ni01Ljc2IDcyLjUzMyA3Mi41MzMgMCAwIDEtNS45NzQtMTQuMjkzTDYwNy4xNDcgMjg2LjA4Yy00LjA1NC0xMS4zMDctOS4xNzQtMjQuMTA3IDYuNC0yOS4yMjdzMTkuMiA4LjUzNCAyMy4yNTMgMTkuNDE0bDUyLjA1MyAxNDUuOTJjMS45MiA0LjQ4IDMuNDE0IDExLjA5MyA0LjQ4IDE0LjA4eiIgZmlsbD0iIzc5Mzk0MyIvPjwvc3ZnPg==)
}

.joe_cloud__logo._360 {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjxwYXRoIGQ9Ik04NDMuMjk0IDg3MS45MDZjMC00OS42OTQgNDAuNjU5LTkwLjM1MyA5MC4zNTMtOTAuMzUzUzEwMjQgODIyLjIxMiAxMDI0IDg3MS45MDZzLTQwLjY1OSA5MC4zNTMtOTAuMzUzIDkwLjM1My05MC4zNTMtNDAuNjU5LTkwLjM1My05MC4zNTN6IiBmaWxsPSIjRkY5OTMyIi8+PHBhdGggZD0iTTg0NC44IDY4Ni42ODJsLTEzMS4wMTItNTIuNzA2Yy0xMC41NC00LjUxNy0xMC41NC0xMi4wNDctNi4wMjMtMjIuNTg4IDEyLjA0Ny0zMS42MjMgMTguMDctNjYuMjU5IDE4LjA3LTEwMC44OTQgMC0xNDcuNTc2LTEyNC45ODgtMjc0LjA3LTI3NC4wNy0yNzQuMDdzLTI3NC4wNyAxMjYuNDk0LTI3NC4wNyAyNzQuMDdjMCAzNC42MzUgOS4wMzQgNzAuNzc3IDIxLjA4MSAxMDIuNCAzLjAxMiA2LjAyNCAzLjAxMiAxMy41NTMgMCAxOS41NzctMy4wMTEgNC41MTctNi4wMjMgMC0xMC41NCAxLjUwNUw1NS43MTcgNjc3LjY0N2MtMS41MDYgMS41MDYtNC41MTggMS41MDYtNi4wMjQgMS41MDYtOS4wMzUgMC0xNS4wNTktNC41MTgtMTguMDctMTMuNTUzQzEyLjA0NyA2MTQuNCAxLjUwNiA1NjMuMiAxLjUwNiA1MTAuNDk0IDEuNTA2IDI2My41MyAyMDQuOCA2MC4yMzUgNDUzLjI3IDYwLjIzNXM0NTAuMjU4IDIwMS43ODkgNDUwLjI1OCA0NDguNzUzYzAgNTguNzMtMTAuNTQgMTE0LjQ0Ny0zMS42MjMgMTY3LjE1My0xLjUwNiA0LjUxOC02LjAyNCA5LjAzNS0xMi4wNDcgMTAuNTQxLTMuMDEyIDEuNTA2LTQuNTE4IDEuNTA2LTcuNTMgMS41MDZzLTQuNTE3IDAtNy41MjktMS41MDZ6IiBmaWxsPSIjMEZCMjY0Ii8+PHBhdGggZD0iTTUxLjIgNzE4LjMwNmMtNy41My0xNS4wNTktMTMuNTUzLTMxLjYyNC0xOS41NzYtNDYuNjgyLTMuMDEyLTcuNTMtMy4wMTItMTMuNTUzLTMuMDEyLTE2LjU2NSAwLTQ5LjY5NCA0MC42NTktODguODQ3IDkxLjg1OS04OC44NDcgMzcuNjQ3IDAgNjkuMjcgMjIuNTg4IDg0LjMyOSA1NS43MTcgMS41MDYgMy4wMTIgNi4wMjQgMTIuMDQ3IDkuMDM1IDE2LjU2NSA0Ni42ODMgODguODQ3IDEzOC41NDEgMTQ2LjA3IDIzOS40MzYgMTQ2LjA3IDk5LjM4OCAwIDE4OS43NC01NS43MTcgMjM3LjkyOS0xNDEuNTUyIDQuNTE4LTkuMDM2IDE2LjU2NS0zMC4xMTggMTguMDctMzEuNjI0IDE1LjA2LTMwLjExNyA0My42NzEtNDUuMTc2IDc2LjgtNDUuMTc2IDUxLjIgMCA5MS44NiA0MC42NTkgOTEuODYgODguODQ3IDAgNi4wMjMgMCAxMy41NTMtNC41MTggMjIuNTg4bC05LjAzNiAyMi41ODh2MS41MDZjLTEuNTA1IDQuNTE4LTMuMDExIDcuNTMtNi4wMjMgMTIuMDQ3LTc2LjggMTUzLjYtMjMxLjkwNiAyNDguNDctNDAzLjU3NyAyNDguNDdTMTI5LjUwNiA4NjguODk1IDUxLjIgNzE4LjMwN3oiIGZpbGw9IiNGRjk5MzIiLz48L3N2Zz4=)
}

.joe_cloud__logo._bd {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTI3MS4zOCA0MjkuNjM3YTI0NS41IDI0NS41IDAgMCAxLTMuMzk1LTQwLjc3N2MwLTEzNC42OCAxMDkuMTgtMjQzLjg2IDI0My44Ni0yNDMuODZzMjQzLjg2IDEwOS4xOCAyNDMuODYgMjQzLjg2YTI0NS41IDI0NS41IDAgMCAxLTMuMzk0IDQwLjc3NkM4NzUuOTY3IDQzMC4zMTIgOTc2IDUzMC43NjMgOTc2IDY1NC41NzhjMCAxMjQuMjM1LTEwMC43MTIgMjI0Ljk0Ny0yMjQuOTQ2IDIyNC45NDctNjIuNzQzIDAtMTE5LjQ4Ni0yNS42ODgtMTYwLjI4Ny02Ny4xMmwuMDAzLS4wMDRjLTIxLjQ0LTIxLjgyMi0yMS4zMjItNTYuODkzLjM1NC03OC41NyAyMS43OTYtMjEuNzk1IDU3LjEzMy0yMS43OTUgNzguOTI4IDAgLjY5My42OTQgMS4zNjUgMS40IDIuMDE0IDIuMTIgMjAuNDI3IDE5Ljg3IDQ4LjMxNyAzMi4xMDggNzkuMDY1IDMyLjEwOCA2Mi42MzEgMCAxMTMuNDA0LTUwLjc3MiAxMTMuNDA0LTExMy40MDMgMC02Mi42MzEtNTAuNzczLTExMy40MDMtMTEzLjQwNC0xMTMuNDAzLTI4LjczOSAwLTU0Ljk4MSAxMC42OS03NC45NjcgMjguMzExbC0uMDk2LS4wOTYtMS44ODYgMS44ODZjLTIuMiAyLjAzMy00LjMyIDQuMTUyLTYuMzUzIDYuMzUzbC00LjMwNiA0LjMwNS4wNzYuMDc3LTIyOS44NzYgMjI5Ljg3Ni0uMDMtLjAzYy00MC44MzMgNDEuNzA4LTk3Ljc2NyA2Ny41OS0xNjAuNzQ3IDY3LjU5QzE0OC43MTIgODc5LjUyNSA0OCA3NzguODEzIDQ4IDY1NC41NzhjMC0xMjMuNzExIDk5Ljg2Ni0yMjQuMDk4IDIyMy4zOC0yMjQuOTR6bTEuNjQ0IDMzOC40MjJjNjIuNjMgMCAxMTMuNDAzLTUwLjc3MiAxMTMuNDAzLTExMy40MDMgMC02Mi42MzEtNTAuNzcyLTExMy40MDMtMTEzLjQwMy0xMTMuNDAzLTYyLjYzMSAwLTExMy40MDQgNTAuNzcyLTExMy40MDQgMTEzLjQwMyAwIDYyLjYzIDUwLjc3MyAxMTMuNDAzIDExMy40MDQgMTEzLjQwM3pNNTExLjg0NSA1MjEuMWM3My4wMzQgMCAxMzIuMjQtNTkuMjA2IDEzMi4yNC0xMzIuMjQgMC03My4wMzMtNTkuMjA2LTEzMi4yMzktMTMyLjI0LTEzMi4yMzlzLTEzMi4yNCA1OS4yMDYtMTMyLjI0IDEzMi4yNGMwIDczLjAzMyA1OS4yMDYgMTMyLjIzOSAxMzIuMjQgMTMyLjIzOXoiIGZpbGw9IiMwNkE3RkYiLz48cGF0aCBkPSJNNjQzLjM1MSA0MDIuODY4YTU2Ljk2NiA1Ni45NjYgMCAwIDEtLjM1Mi02LjMzNGMwLTMxLjEyMyAyNS4yMy01Ni4zNTMgNTYuMzUzLTU2LjM1M3M1Ni4zNTMgMjUuMjMgNTYuMzUzIDU2LjM1M2MwIDIuMzktLjE1IDQuNzQ1LS40MzggNy4wNTctNy42MTYgMTI3LjgyLTExMy42ODggMjI5LjEyOC0yNDMuNDIyIDIyOS4xMjgtMTI5LjczNCAwLTIzNS44MDYtMTAxLjMwNy0yNDMuNDIyLTIyOS4xMjhhNTYuOTA4IDU2LjkwOCAwIDAgMS0uNDM4LTcuMDU3YzAtMzEuMTIzIDI1LjIzLTU2LjM1MyA1Ni4zNTMtNTYuMzUzczU2LjM1MyAyNS4yMyA1Ni4zNTMgNTYuMzUzYzAgMi4xNDEtLjEyIDQuMjU1LS4zNTIgNi4zMzQgNi45OTYgNjYuNDQ4IDYzLjIwNCAxMTguMjMgMTMxLjUwNiAxMTguMjMgNjguMzAyIDAgMTI0LjUxLTUxLjc4MiAxMzEuNTA2LTExOC4yM3oiIGZpbGw9IiNGRjQzNkEiLz48L3N2Zz4=)
}

.joe_cloud__logo._ty {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjxwYXRoIGQ9Ik0yODMuNSAzNjguOGMtMTAuMyAzMS43LTguMyA2Mi4zIDExLjggODkuNiAyMy44IDMyLjIgNTYuOSA0My41IDk2LjEgMzkuMiAxMS0xLjIgMjEuNS0zLjggMzEuOC03LjcgNDAuNy0xNS42IDY3LjgtNTcuOCA2MS05OC02LjUtMzguMy0yOC44LTY2LTY0LjgtNzkuOC02OC40LTI2LjItMTMyLjMtMTUuMi0xODkuNyAyOS45LTM1LjMgMjcuNy02MC43IDYzLTY3LjcgMTA4LjItMTEuMiA3My4xIDMuNCAxMzkuNSA1OC44IDE5Mi4zIDQxLjEgMzkuMiA5MC40IDU3LjQgMTQ3LjggNTUuOSA3Mi4zLTEuOSAxMzIuOS0zMCAxODUuNi03Ny45IDMxLjktMjkuMSA1Ny40LTYzLjggODQuOC05Ni45IDM2LjYtNDQuMyA3OC40LTgxLjUgMTM0LjEtMTAwLjMgNTYuMi0xOC45IDExMS42LTE2LjMgMTY2LjQgNS44IDQuMyAxLjcgOC42IDMuNSAxNSA2LjEtMTAuNiAxLjQtMTkuMiAyLjItMjcuNiAzLjgtNDIuOCA3LjgtNzYuMSAzMS41LTEwNC41IDYzLTMwLjMgMzMuNS01NC42IDcxLjYtODAuOCAxMDguMi0zNi41IDUxLjEtNzYuNiA5OC44LTEyNy41IDEzNi41LTYzLjUgNDctMTM0LjEgNzMuMy0yMTMuNiA2OS42LTU3LjktMi42LTExMi4zLTE5LjktMTYyLjYtNDktODMuNi00OC40LTE0MS0xMTcuNy0xNjIuMy0yMTMuMi0yMC4yLTkwLjMgMi4yLTE3MS44IDYwLjItMjQyLjcgNTIuOC02NC42IDEyNC05NS40IDIwNi0xMDQuMyAxMTUtMTIuNSAyMjEuNiA1Mi4xIDI2OS41IDE0OSAzNS4zIDcxLjUgMjMuNSAxNTIuNS0zMS4xIDIxMC4yLTM1LjIgMzcuMi03OS43IDU3LjUtMTMwLjUgNjEuNy01OS40IDQuOC0xMTIuOS0xMS43LTE1Ni45LTUyLjktNTQuOS01MS42LTcxLjktMTQwLjQtMTUtMjA2LjMgMS4xLTEuMyAyLjUtMi41IDMuOC0zLjcgMy4yLS4yIDMuMSAxLjQgMS45IDMuN3oiIGZpbGw9IiNGNUM1M0UiLz48L3N2Zz4=)
}

.joe_cloud__logo._ct {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjxwYXRoIGQ9Ik04NTAuNDYxIDc2NC40ODljLTE4LjgyOCA1MC4yMjUtMzUuODc5IDg2Ljg0MS04Mi40NjQgODYuODQxSDEyMC4xNjJjLTQ2LjU3OSAwLTg0Ljk2Mi00MC4yNjctODQuOTYyLTg2Ljg0MUwxNzUuNzU5IDI1OC40NmMxMy41NjgtNTcuMDkxIDM1Ljg4OS04Ni44MyA4Mi40NjItODYuODNoNjQ3LjgzN2M0Ni41ODIgMCA4NC45NjIgNDAuMjQ2IDg0Ljk2MiA4Ni44M0w4NTAuNDYxIDc2NC40ODl6TTMyMi41MTIgMzM3LjI0MmMtNC4zMjQgNC40MTctNy4xOTkgOC43NjQtNy4zNTMgOS4wMjQtLjEwMy4yMDctMi40NzkgNC45OTktMy4xODQgNi45MDktLjcwNSAxLjg4OC0yLjk0NyA5LjM3Ny0zLjA1MSA5LjcxbC0yLjQyNyA4Ljk4MnMtMS45MyA5LjI5NC0yLjIyIDEwLjc4OGMtLjIyOCAxLjE4Mi0xLjM0OSA5LjIyLTEuODc4IDEzLjA5MS0uMTM1Ljk4NS0uMjI4IDEuNjM4LS4yMzggMS43LS4wNjIuMzk1LTEuMTgyIDExLjgxNC0uODkzIDE3LjkyNC4yNzEgNi4wOTkuODQyIDE2LjcxMS44NSAxNi43NjIuMDEyLjEzNSAxLjYzIDEzLjczMyAzLjg3OSAyMi45MjMgMi4xNTkgOC43NzUgNC4yNDMgMTUuNjg1IDYuMzg5IDIxLjEyIDIuMDU0IDUuMTY1IDcuMDMzIDE0LjY4OCA3LjczOSAxNS43ODguMTI2LjE5Ni40MTUuNzA1LjgyOSAxLjQ1MiAyLjA1NCAzLjY3IDYuODY4IDEyLjI2IDExLjI5NiAxNy4yMTggNi4wOTggNi44MjYgMTIuNDQ3IDEzLjc5NiAxNy4yNSAxNy40MDYgNC4zMzcgMy4yNTggMTMuMjIzIDkuMzM0IDE5LjA2NSAxMS40MyA1LjI2OCAxLjkwOSA4Ljk2IDIuODg1IDEwLjE2NSAzLjAwOGguMTM1bC42NTItLjAyLjE0Ny0uNThjLjE2NS0uNjIyLS4yOTItLjg3MS0xLjAzOC0xLjI2Ni0xLjMxNy0uNzA1LTQuMzc4LTIuMzQzLTYuMzY5LTUuMDItMi44NjQtMy44MzgtNy4xMzYtMTEuMTA4LTkuNzgxLTE4Ljk0MS0yLjYyMy03Ljc2OS00LjE2LTE0Ljk5OC00LjczLTE3LjcyNi0uMzQxLTEuNjI5LTEuMTMxLTYuNjkxLTEuODk5LTExLjU4NWE5ODIuNzA2IDk4Mi43MDYgMCAwIDAtMS4zODktOC43NzVjLS4zNDMtMi4wNzQtMS41MTUtMTIuNzY5LTIuMTA3LTI0LjUtLjc0OC0xNC44MDIuMTM1LTMwLjE0Mi4xMzUtMzAuMjg4LjEzNS0xLjkzIDIuNTMtMjcuNzU4IDUuMjU5LTM5LjE2N2wuMjQ5LTEuMDE3YzIuNjM2LTExLjAxNSA0LjM4OC0xOC4yOTggOC45NzQtMjUuMzA5IDYuMDM3LTkuMjExIDguNzY0LTExLjI4NSA5LjMxNS0xMS4zMDZhLjg3Ljg3IDAgMCAwIC44Ny0uNjk0Yy4zODYtMS43OTQtOS40MzgtOS42NzktMTQuMTQ3LTExLjgxNC01LjQ0NS0yLjQ0OC0xMi4wNzQtNC45NjktMTkuOTk3LTQuOTY5LTYuMzcyLjE3NS0xNi4wMTkgMy4xODItMjAuNTAxIDcuNzQ2em00MDAuODExIDUwLjM2OGMtMTAuMTIzLTU3LjQ5Ny01MS4yNS03Ny44OTgtODMuMzk2LTc3Ljg5OC0yMi4zMDEgMC00My4zMzcgOC44MTYtNTkuMjI5IDI0LjgzMi0xNy43MjggMTcuODcyLTI3LjQxMyA0My4wNDYtMjcuOTk2IDcyLjgwNnYuMzcybC40NjcuNDY3aC4zMTNjLjU5IDAgLjY5My0uMTY2IDMuMzUtNC4yODMgOC4zMDYtMTIuOTE0IDMzLjU5Ni01Mi4xODUgNjEuMDExLTU4LjIwMWE0MS40OSA0MS40OSAwIDAgMSA4Ljg2OS0uOTc2YzE0LjM2NyAwIDI3LjEyNCA3LjUzMSAzNC45ODcgMjAuNjQyIDE0LjE5OSAyMy42OTEgMTAuMTIzIDYwLjcyMi0xMS4xNzEgMTAxLjYxMi04Ljg0OCAxNi45OS0zNi42NDYgNjYuNTUtNTguNjY4IDkxLjM2Mi01LjE3NCA1LjgyOS0xMC41MTggMTIuMDExLTE2LjE4MiAxOC41NjYtMjAuNDM0IDIzLjY3LTQxLjU2MyA0OC4xNDktNTUuNTE0IDU2LjUxMWEyNy43NTYgMjcuNzU2IDAgMCAwLTUuNjk1IDQuNTIzYy4xNjYtOC4xNzUuMzczLTE2LjM0Ny41Ny0yNC40OC40ODktMjAuMDE5IDEuMDA1LTQwLjcwMiAxLjAwNS02MC40MyAwLTMxLjUzMy0xLjIxMi01Ny42MS0zLjYwOS03Ny40ODQtMS40MTEtMTEuNzQzLTMuNTM4LTIxLjg2Ni01LjI0OS0yOS45OTYtLjY0My0zLjAzLTEuMjI1LTUuNzc4LTEuNjgtOC4yMTUtMy44OS0yMC43NDYtMTguMTcyLTUwLjM0OC0yNi41NTYtNjIuODk5LTcuOTQ2LTExLjg2Ny0yMS42NTgtMjUuNzU2LTM1LjgwNy0zNi4yNDItMTMuOTQtMTAuMzMyLTM3Ljg1OS0yMC4yMjctNTUuNjgtMjMuMDA3LTUuMDcxLS43OTctMTAuMDQxLTEuMjAzLTE0Ljc3LTEuMjAzLTExLjIyMyAwLTE5LjcyOSAyLjIyLTI1Ljg5IDQuMTcxLTYuMDE1IDEuODg3LTExLjczMSA1LjI0OC0xNS40NzUgNy43Mzh2LjAxYy0yLjk2NiAxLjUyNS00LjQxOSAzLjE2NC00LjQ4MSAzLjI0N2wxLjAzNyAxLjA4OWMuMDE5LS4wMTEgMS42Ni0xLjMxNyA0LjIzLTMuMDI5IDUuNjEzLTIuODUyIDEyLjkzNS0zLjIwNSAyMS4xMy0uOTQ0IDQuNDcxIDEuMjIzIDkuNjU3IDMuOTczIDE0LjkyOCA2Ljg1NyAxOC42NTkgMTQuMDEzIDI2LjExOCAyNC43MzggMzEuNTczIDM2LjUyMiAzLjk4MyA4LjYwOSA3LjI4MSAxNy40MzYgMTEuMzY5IDMwLjQ1MyA0LjEwOSAxMy4wODkgNy44MzMgMzUuODY5IDkuNjk4IDU5LjQxNS45MjUgMTEuNjE4IDEuNjcxIDI0LjA2NSAyLjQ1OCAzNy4yMzcgMS45NzEgMzMuMDQ3IDQuMDAzIDY3LjIxNSA5LjE0OSA5NC4xMDEgMi43OCAxNC41NDEgNi4xMTkgMjcuODYgMTAuMTg2IDQwLjc0MyAxMi40NTcgMzkuMzU0IDMwLjU3OCA2OC43NyA0My4zNzggODMuMTQ4IDExLjc1MSAxMy4yMzQgMjcuMjM5IDI2LjY5OCAzMC42ODMgMjYuNjk4LjA4MSAwIC4xNTUgMCAuMjI2LS4wMTlsLjAxMy4wMTkuMDUxLS4wMTljLjMzMi0uMDgzLjUzOC0uMjUuNjYzLS4zOTUuMDE5LS4wMi4wNDItLjA2Mi4wNjEtLjA4MmguMDExYy4zMjItLjIwNyAzMi43NjktMjEuMTYyIDU3LjI5OS00MS43NjEgODguMTEzLTczLjkzOSAxNjguMTUtMTk4Ljk1MSAxNDguMzI3LTMxMS41Nzh6IiBmaWxsPSIjRkZCOTBGIi8+PC9zdmc+)
}

.joe_cloud__logo._wy {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjxwYXRoIGQ9Ik04ODAuMyA2MzEuOWMtMy40IDAtNi45LS42LTEwLjItMS44LTE2LjEtNS43LTI0LjUtMjMuMy0xOC45LTM5LjQgNi40LTE4LjEgOS42LTM3LjEgOS42LTU2LjUgMC05My4zLTc1LjktMTY5LjItMTY5LjEtMTY5LjItNzcuNiAwLTE0NS4xIDUyLjQtMTY0IDEyNy41LTQuMiAxNi41LTIwLjggMjYuNi0zNy41IDIyLjQtMTYuNS00LjItMjYuNS0yMS0yMi40LTM3LjUgMjUuOS0xMDIuNSAxMTgtMTc0LjEgMjIzLjktMTc0LjEgMTI3LjMgMCAyMzAuOCAxMDMuNiAyMzAuOCAyMzAuOSAwIDI2LjQtNC40IDUyLjMtMTMuMSA3Ny00LjUgMTIuNy0xNi40IDIwLjctMjkuMSAyMC43eiIgZmlsbD0iIzA5RiIvPjxwYXRoIGQ9Ik00NDcuNCA3ODMuM0gzMzIuNmMtMTI3LjMgMC0yMzAuOS05Ny41LTIzMC45LTIxNy4zIDAtOTQuOSA2NS45LTE3OC4zIDE2MC0yMDYuOCAxMC4yLTExNy45IDEwOS41LTIxMC43IDIzMC0yMTAuNyAxMDcuMSAwIDIwMS44IDc1LjggMjI1LjMgMTgwLjEgMy43IDE2LjYtNi44IDMzLjEtMjMuNCAzNi45LTE2LjcgMy45LTMzLjItNi43LTM2LjktMjMuMy0xNy4xLTc2LjQtODYuNS0xMzEuOS0xNjUtMTMxLjktOTMuMyAwLTE2OS4yIDc1LjktMTY5LjIgMTY5LjEgMS43IDguMS4zIDE1LjQtNC40IDIyLjMtNC42IDYuOS0xMS43IDEwLjQtMTkuOSAxMi03OC4yIDE0LjgtMTM0LjkgNzguOS0xMzQuOSAxNTIuNCAwIDg1LjggNzUuOSAxNTUuNiAxNjkuMiAxNTUuNmgxMTQuOGMxNyAwIDMwLjkgMTMuOCAzMC45IDMwLjlzLTEzLjggMzAuNy0zMC44IDMwLjd6bTExMi43LTMxYy04LjIgMC0xNi4zLTMuMi0yMi40LTkuNi0xMS43LTEyLjQtMTEuMy0zMS45IDEuMS00My42bDEyNi43LTEyMC40YzExLjgtMTEuMyAzMC41LTExLjMgNDIuNSAwTDgzNC44IDY5OWMxMi40IDExLjcgMTIuOSAzMS4zIDEuMSA0My42LTExLjcgMTIuMy0zMS4zIDEyLjktNDMuNiAxLjFMNjg2LjggNjQzLjYgNTgxLjMgNzQzLjhjLTUuOSA1LjctMTMuNiA4LjUtMjEuMiA4LjV6IiBmaWxsPSIjMDlGIi8+PHBhdGggZD0iTTY4Ni44IDg3OWMtMTcgMC0zMC45LTEzLjgtMzAuOS0zMC45VjYwMWMwLTE3IDEzLjktMzAuOSAzMC45LTMwLjlzMzAuOSAxMy44IDMwLjkgMzAuOXYyNDcuMWMwIDE3LjEtMTMuOSAzMC45LTMwLjkgMzAuOXoiIGZpbGw9IiMwOUYiLz48L3N2Zz4=)
}

.joe_cloud__logo._github {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjxwYXRoIGQ9Ik01MTEuOTY2IDBDMjI5LjIzOSAwIDAgMjI5LjIzOSAwIDUxMi4wMzQgMCA3MzguMjM2IDE0Ni43MDUgOTMwLjEzMyAzNTAuMTc0IDk5Ny44MmMyNS42IDQuNzEgMzQuOTE4LTExLjA5NCAzNC45MTgtMjQuNjc5IDAtMTIuMTUxLS40MDktNDQuMzM5LS42ODItODcuMDc0LTE0Mi40MDUgMzAuOTU5LTE3Mi40NzYtNjguNjQyLTE3Mi40NzYtNjguNjQyLTIzLjI3OS01OS4xMTktNTYuODMyLTc0Ljg4OC01Ni44MzItNzQuODg4LTQ2LjQ5LTMxLjc0NCAzLjUxNi0zMS4xMyAzLjUxNi0zMS4xMyA1MS4zNyAzLjYxOCA3OC40MzggNTIuNzcgNzguNDM4IDUyLjc3IDQ1LjY3IDc4LjI2OCAxMTkuODA4IDU1LjY3MiAxNDguOTkyIDQyLjU2NCA0LjY0Mi0zMy4xMDkgMTcuODg2LTU1LjY3MSAzMi40OTUtNjguNDcxLTExMy42OTgtMTIuOTAzLTIzMy4xOTktNTYuODMyLTIzMy4xOTktMjUzLjAzMSAwLTU1LjkxIDE5LjkzNC0xMDEuNjE0IDUyLjcwMi0xMzcuMzg2LTUuMjkxLTEyLjk3MS0yMi44MzUtNjUuMDI0IDUuMDE3LTEzNS41MSAwIDAgNDIuOTc0LTEzLjc1NSAxNDAuOCA1Mi40OThhNDkwLjA3IDQ5MC4wNyAwIDAgMSAxMjguMTcxLTE3LjIzOCA0OTAuODM2IDQ5MC44MzYgMCAwIDEgMTI4LjE3MSAxNy4yMzhjOTcuNzU4LTY2LjI1MyAxNDAuNjYzLTUyLjQ5OCAxNDAuNjYzLTUyLjQ5OCAyNy45MjEgNzAuNDg2IDEwLjM0MyAxMjIuNTM5IDUuMDg2IDEzNS41MSAzMi44MzYgMzUuNzcyIDUyLjYzNCA4MS40NzYgNTIuNjM0IDEzNy4zODYgMCAxOTYuNjc3LTExOS43MDYgMjM5Ljk1OC0yMzMuNzc5IDI1Mi42NTUgMTguMzk3IDE1LjgwNCAzNC43ODEgNDcuMDM2IDM0Ljc4MSA5NC43ODkgMCA2OC40NzEtLjY0OCAxMjMuNjk5LS42NDggMTQwLjQ1OCAwIDEzLjY4OCA5LjI1IDI5LjYyOCAzNS4yMjUgMjQuNjQ1Qzg3Ny40MzEgOTI5LjkyOSAxMDI0IDczOC4xNjcgMTAyNCA1MTIuMDM0IDEwMjQgMjI5LjIzOSA3OTQuNzI2IDAgNTExLjk2NiAwIiBmaWxsPSIjRjY2Ii8+PC9zdmc+)
}

.joe_cloud__logo._lz {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjxwYXRoIGQ9Ik02NzguNjQgNTE0LjAwN2ExNjguNDQ4IDE2OC40NDggMCAxIDAtMTY4LjQ0NyAxNjcuNzA2QTE2OC4wNyAxNjguMDcgMCAwIDAgNjc4LjY0IDUxNC4wMDd6IiBmaWxsPSIjRjRDQTFDIi8+PHBhdGggZD0iTTk4My4wNCA2MDMuNDEyYTI0Mi40ODggMjQyLjQ4OCAwIDAgMC0yODAuMzkyLTIzOC40MDdBMjUzLjMyMiAyNTMuMzIyIDAgMCAwIDI1Ni4yMiAyODcuMThhMjQ5LjEzNCAyNDkuMTM0IDAgMCAwLTQ4Ljk1NyAxNTMuMzg1QTIwMy4zOTcgMjAzLjM5NyAwIDAgMCAyNDAuMTg5IDg0NC44aDUyNy43NzVhMzEuOTkgMzEuOTkgMCAwIDAgMTQuNzUtMy43MTcgMjQyLjAzOCAyNDIuMDM4IDAgMCAwIDIwMC4zMjYtMjM3LjY3ek03NDAuNjA4IDc4MC43MTNIMjQwLjE4OWExMzkuMzg3IDEzOS4zODcgMCAxIDEgMC0yNzguNzY5IDMxLjk3IDMxLjk3IDAgMCAwIDguNzA0LTEuMzQxIDMxLjk2NCAzMS45NjQgMCAwIDAgMjQuODQ4LTM1Ljk5OSAxODcuODEyIDE4Ny44MTIgMCAwIDEgMTU3Ljc0Mi0yMTQuMDE2IDE4OC40NjIgMTg4LjQ2MiAwIDAgMSAyMDkuNTQxIDEzMi44MzkgMjQxLjYyOCAyNDEuNjI4IDAgMCAwLTE0Mi44NDggMjE5Ljk4NSAzMi4xOCAzMi4xOCAwIDAgMCA2NC4zNTggMCAxNzguMDY4IDE3OC4wNjggMCAxIDEgMTc4LjA3NCAxNzcuMzAxeiIgZmlsbD0iIzU5NUJCMyIvPjwvc3ZnPg==)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.joe_detail__category .item:last-child {
    margin-right: 0
}

.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 {
    font-size: 24px;
    color: var(--classF);
    text-align: center;
    padding-top: 40px;
    margin-bottom: 15px;
    word-break: break-word
}

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

.joe_detail__count {
    position: relative;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--classC)
}

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

.joe_detail__count, .joe_detail__count-information {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

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

.joe_detail__count-information .meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 35px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 12px
}

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

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

.joe_detail__count-information .meta .item, .joe_detail__overdue-wrapper .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.joe_detail__count-information .meta .item {
    color: var(--minor);
    line-height: 16px
}

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

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

.joe_detail__overdue {
    padding-top: 5px
}

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

.joe_detail__overdue-wrapper .title {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 500
}

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

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

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

.joe_detail__article {
    padding: 10px 0;
    font-size: 15px;
    word-break: break-word;
    color: var(--routine)
}

.joe_detail__article.uncopy, .joe_detail__article.uncopy .code-toolbar pre[class*=language-], .joe_detail__article.uncopy .code-toolbar pre[class*=language-] code {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important
}

.joe_detail__article.uncopy code:not([class]) {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important
}

.joe_detail__article.indent > p {
    text-indent: 2em
}

.joe_detail__article.indent > p > img {
    margin-left: -2em
}

.joe_detail__article.center-img span[data-fancybox] {
    text-align: center
}

.joe_detail__article.right-img span[data-fancybox] {
    text-align: right
}

.joe_detail__article.single_code_select code:not([class]) {
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all
}

.joe_detail__article h1, .joe_detail__article h2, .joe_detail__article h3 {
    color: var(--main);
    line-height: 24px;
    position: relative
}

.joe_detail__article h4, .joe_detail__article h5, .joe_detail__article h6 {
    color: var(--main);
    line-height: 24px;
    margin-bottom: 18px;
    position: relative
}

.joe_detail__article h1 {
    margin: 40px 0 20px
}

.joe_detail__article h1::before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    content: "¶";
    top: -4px;
    margin-right: 12px;
    font-size: 24px;
    color: var(--theme)
}

.joe_detail__article h2 {
    margin: 40px 0 20px;
    font-size: 1.4em
}

.joe_detail__article h2::before, .joe_detail__article h3::before {
    top: -2px;
    left: 0;
    width: 20px;
    height: 20px;
    background-size: auto 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVJJREFUWEftl7FKw1AUhv9rbmf1PRw6utkHEOoi6WPoE1ifQJ8gySKCOtRFRBKsDuIiDdZAURBFF50M2sFIzpGogVK03JA2cbh3S/i55zvfvYETgRyLj5erIKOO949FyKm5eHvvHEBV2jyruq1QDQ7n2DNXALEx+D7e2vl6lBYp76scHCzErtmCEPVhqEIAfus8BZk4wM+Zd/46tskDeI0mgLUyAdoAFsoDcM0XCDFdHoDX4FGfbRF3QANoA9qANqANaAPawD82EEWId1sAOJQWz6iO+5nGch41kDw9I3bbYOaTis21wgG4G4AuAzCwXrEoGV6V1ngMJPoPjoB+PzSIa8KBr1QdwFgA6KID7t1AgFYNC5uqxZNcbgB+eASdngHM+9LmpSzF8wFEEagbgHvXoQA3s3aegmYz8P1f4NNVME+39z5e3w4lkSMc3GXtPM1/AjYDFjDGddN5AAAAAElFTkSuQmCC)
}

.joe_detail__article h3 {
    margin: 30px 0 18px;
    font-size: 1.3em
}

.joe_detail__article h3::before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    content: "";
    top: -3px;
    margin-right: 8px;
    background-position: center;
    background-repeat: none;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAH1JREFUWEft1qENgDAQheH/JANg60DAJIgmrMFCzEEYgTFgDyRFIClp0yBf9evl8pl3RsYbp7BjNLHoMptljPiMZH3WAhKQgAQkIIGXQAXUT79cniHaNMa5draliqqojIID86nRHEtvbSqlBSQgAQlIQAISkECRAA746SC5Ad6XpiGnnOGPAAAAAElFTkSuQmCC)
}

.joe_detail__article h4 {
    font-size: 1.18em
}

.joe_detail__article h2::before, .joe_detail__article h4::before, .joe_detail__article h5::before, .joe_detail__article h6::before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    content: "";
    margin-right: 6px;
    background-position: center;
    background-repeat: none
}

.joe_detail__article h4::before {
    top: -2px;
    width: 22px;
    height: 22px;
    color: var(--theme);
    background-size: auto 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAndJREFUWEftVkty2kAQfT1SBLtwg6AqwzbxCQIniG8QvAmwCp8kRqvgFa5KwHjlkI3NCeIbhJwgXptUgW9AdiDQdGoITqUsjcZyuYqNZ6WSXs88vel+3YQtL9ry+Xgk8KhApALNAe8x5PPbCUrgabdsD2/e+1edEpN4FsIRps7OwT9cXKKHCLw75QIL+V0XRFIUP1dptBx3ChKkxQlw8UnOG5mqLESgdsYZy5dTAE8jg5lH3Ypd5Mlxxl8ttDgGRulcq5iYgApofgn6ILzVBQsSu5/e0OXiqnMOotdatVjsOvkPl4muQIFrp5y1hJzEBA67ZavEk07WX5EexzxM5b1SYgJrFQbBOQDt3wVSuP0qTRfjowsAr3SHODa75HrqqiKX1gdMycjAYa9stU3JCPBhKue1ExNQAY3BakSgl1HBDMykI9z+Ps0WV0eXIITKdhM3c+yUS259FrVPrBM2TlclEnSmY8+S93tV+/yvH+hxxLzv5D11paFltOLmIFD3FzIbtRMzpr2K5arn+bgzJZAWl8631rjby0zAUJI3xnTfkjQTiFEAwHW3bGWNCoCv0zlvjUukgOoJgPymzQGg3itbfVMOMKiezh30ExOIqwIAvwNHZFUVzMcdbbUonGOnsomr4P1XfiFZ/tS6GOOkW7FqJh8gwomz06ol9oE7O6GhH9zLCbfeCxqDoE3AR61sm5nA/3XUZ47pmneYCSLnAeHLCQGZaAvmH72yXdjMA6oTanHpnFfQ5tDmQ+KJ6MZ+jckXY7//k4pWYB7sQVCUccxU3a9teHKcWS7ne0wI4Rhipqv7REZkku8hvhut+CEOidvjkcDWFfgD9RMzMKE7f80AAAAASUVORK5CYII=)
}

.joe_detail__article h5, .joe_detail__article h6 {
    font-size: 1em
}

.joe_detail__article h5::before, .joe_detail__article h6::before {
    top: -1px;
    left: 0;
    width: 18px;
    height: 18px;
    background-size: 100% 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==)
}

.joe_detail__article h6::before {
    width: 16px;
    height: 16px;
    background-size: auto 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC)
}

.joe_detail__article hr {
    border: 0;
    height: 1px;
    background-color: var(--classB);
    margin-bottom: 18px
}

.joe_detail__article blockquote, .joe_detail__article p {
    line-height: 26px;
    margin-bottom: 18px
}

.joe_detail__article blockquote {
    padding: 8px 15px;
    color: var(--routine);
    background: var(--classD);
    border-left: 5px solid var(--quote);
    border-radius: var(--radius-inner)
}

.joe_detail__article blockquote p {
    margin: 0
}

.joe_detail__article a:not([class]) {
    display: inline-block;
    line-height: 26px;
    text-indent: 0;
    color: var(--theme);
    position: relative
}

.joe_detail__article a:not([class]):hover::after {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.joe_detail__article a:not([class])::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: var(--theme);
    -webkit-transform: scaleX(.25);
    transform: scaleX(.25);
    opacity: 0;
    -webkit-transition: opacity .35s, -webkit-transform .35s;
    transition: transform .35s, opacity .35s;
    transition: transform .35s, opacity .35s, -webkit-transform .35s
}

.joe_detail__article span[data-fancybox] {
    display: block;
    text-align: left
}

.joe_detail__article img {
    display: inline-block;
    max-width: var(--img-max-width) !important;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    margin: 5px 0;
    border-radius: var(--radius-img);
    -webkit-transition: -webkit-transform .35s, -webkit-box-shadow .35s;
    transition: transform .35s, box-shadow .35s;
    transition: transform .35s, box-shadow .35s, -webkit-transform .35s, -webkit-box-shadow .35s
}

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

.joe_detail__article video, .joe_detail__article > iframe {
    min-width: 700px;
    overflow: hidden;
    border-radius: var(--radius-img)
}

.joe_detail__article > iframe {
    display: block;
    margin: 0 auto;
    min-height: 500px;
    max-width: 100%;
    border: 0
}

.joe_detail__article video {
    max-width: 100% !important
}

.joe_detail__article .mermaid {
    margin: 10px 0;
    padding: 10px;
    background: #f9f9f9;
    border-radius: var(--radius-inner)
}

.joe_detail__article .mermaid svg, .joe_detail__article video {
    display: block;
    margin: 0 auto
}

.joe_detail__article .owo_image {
    max-height: 26px;
    vertical-align: top
}

.joe_detail__article .indent {
    text-indent: 2em
}

.joe_detail__article ol, .joe_detail__article ul {
    margin-bottom: 18px;
    padding-left: 36px
}

.joe_detail__article ol li.task-list-item, .joe_detail__article ul li.task-list-item {
    margin-left: -16px;
    list-style: none
}

.joe_detail__article ol li.task-list-item input, .joe_detail__article ul li.task-list-item input {
    position: relative;
    top: 1px
}

.joe_detail__article ol li {
    list-style: decimal
}

.joe_detail__article ul li {
    list-style: disc
}

.joe_detail__article table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: unset;
    color: var(--routine);
    margin-bottom: 18px;
    overflow: hidden;
    font-size: 13px;
    border: 1px solid var(--classE);
    border-radius: 4px
}

.joe_detail__article table td, .joe_detail__article table th {
    padding: 8px;
    border-right: 1px solid var(--classE);
    border-bottom: 1px solid var(--classE)
}

.joe_detail__article table thead th {
    font-weight: 500;
    background: var(--classC)
}

.joe_detail__article table tbody tr td:last-child, .joe_detail__article table thead th:last-child {
    border-right: none
}

.joe_detail__article table tbody tr {
    -webkit-transition: background .35s;
    transition: background .35s
}

.joe_detail__article table tbody tr:hover {
    background: var(--classD)
}

.joe_detail__article-video {
    margin-bottom: 18px
}

.joe_detail__article-video .episodes, .joe_detail__article-video .play {
    position: relative;
    background: var(--classD);
    padding: 60px 15px 15px
}

.joe_detail__article-video .episodes .title, .joe_detail__article-video .play .title {
    position: absolute;
    top: 15px;
    left: -10px;
    background: var(--theme);
    color: #fff;
    font-weight: 500;
    -webkit-box-shadow: 2px 5px 10px rgba(49, 58, 70, .15);
    box-shadow: 2px 5px 10px rgba(49, 58, 70, .15);
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    border-radius: 2px 2px 2px 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.joe_detail__article-video .episodes .title::after, .joe_detail__article-video .play .title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: -10px;
    border-style: solid;
    border-width: 10px;
    border-color: var(--theme) transparent transparent;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.joe_detail__article-video .episodes .box, .joe_detail__article-video .play .box {
    border-top: 1px solid var(--classB);
    padding-top: 15px
}

.joe_detail__article-video .play {
    margin-bottom: 15px
}

.joe_detail__article-video .play .box iframe {
    width: 100%;
    height: 500px;
    background: #000;
    border-radius: var(--radius-img)
}

.joe_detail__article-video .episodes .box {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 15px
}

.joe_detail__article-video .episodes .box .item {
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background: var(--background);
    color: var(--routine);
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: background .35s, color .35s, -webkit-transform .35s, -webkit-box-shadow .35s;
    transition: transform .35s, box-shadow .35s, background .35s, color .35s;
    transition: transform .35s, box-shadow .35s, background .35s, color .35s, -webkit-transform .35s, -webkit-box-shadow .35s;
    padding: 0 10px
}

.joe_detail__article-video .episodes .box .item.active {
    color: #fff;
    background: var(--theme)
}

.joe_detail__article-video .episodes .box .item.active, .joe_detail__article-video .episodes .box .item:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
    box-shadow: 0 5px 5px rgba(0, 0, 0, .1)
}

.joe_detail__article-protected {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);
    padding: 20px 0;
    margin-bottom: 18px
}

.joe_detail__article-protected .contain {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow)
}

.joe_detail__article-protected .contain .icon {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 15px
}

.joe_detail__article-protected .contain .password {
    width: 250px;
    height: 40px;
    border: 0;
    color: var(--routine);
    padding-left: 50px;
    background: var(--background)
}

.joe_detail__article-protected .contain .submit {
    position: absolute;
    top: 50%;
    right: 15px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--main);
    border: 0;
    background: 0 0
}

.joe_detail__agree, .joe_detail__agree .agree .icon {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.joe_detail__agree {
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 30px 0 10px
}

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

.joe_detail__agree .agree .icon {
    cursor: pointer;
    position: relative;
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    background: #f56c6c;
    border-radius: 50%
}

.joe_detail__agree .agree .icon.active {
    -webkit-animation: box_shadow 1s;
    animation: box_shadow 1s;
    -webkit-box-shadow: 0 0 0 20px transparent;
    box-shadow: 0 0 0 20px transparent
}

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

.joe_action_item.mode svg.active, .joe_detail__agree .agree .icon .joe-font.active {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

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

.joe_detail__agree .agree .icon .icon-like:hover {
    -webkit-animation: box_shadow 1s infinite;
    animation: box_shadow 1s infinite;
    -webkit-box-shadow: 0 0 0 20px transparent;
    box-shadow: 0 0 0 20px transparent
}

.joe_detail__agree .agree .icon, .joe_detail__operate, .joe_detail__operate-tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.joe_detail__operate {
    margin-bottom: 15px;
    padding-top: 20px;
    color: var(--routine)
}

.joe_detail__operate-tags {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-x: auto;
    margin-right: 5px
}

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

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

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

.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 {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--background);
    border-radius: 50%
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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 {
    -webkit-animation: dong ease .5s .2s infinite alternate;
    animation: dong ease .5s .2s infinite alternate
}

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

.joe_detail__copyright {
    padding-top: 15px;
    border-top: 1px solid var(--classC)
}

.joe_detail__copyright .content {
    background: var(--classD);
    padding: 15px;
    border-radius: var(--radius-inner)
}

.joe_detail__copyright .content .item {
    color: var(--minor);
    margin-bottom: 5px;
    word-break: break-word;
    line-height: 22px
}

.joe_detail__copyright .content .item:last-child {
    margin-bottom: 0
}

.joe_detail__copyright .content .item .icon {
    width: 18px;
    height: 18px;
    margin-right: 3px;
    vertical-align: -4px
}

.joe_detail__copyright .content .item .link {
    word-break: break-all;
    color: var(--minor)
}

.joe_detail__copyright .content .item .link:hover {
    color: var(--theme)
}

.joe_detail__related {
    padding-top: 15px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.joe_detail__friends-item .contain .content, .joe_leaving-list .item .user {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.joe_detail__friends-item .contain .content {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 15px
}

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

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

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

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

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

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

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

.joe_leaving-list .item .user {
    padding: 0 10px;
    color: #fff;
    border-bottom: 1px dashed rgba(255, 255, 255, .85);
    height: 40px;
    cursor: move
}

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

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

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

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

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

.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 {
    white-space: pre-line;
    word-break: break-all
}

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

.joe_leaving-none, .joe_pagination li {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

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

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

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

.joe_footer .joe_container.central, .joe_pagination {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    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);
    -webkit-transition: all .35s;
    transition: all .35s
}

.joe_comment__respond-form .body .draw .line li.active, .joe_comment__respond-form .foot .submit .cancle:hover, .joe_footer .joe_container .site_visit_number span, .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 {
    font-weight: 600;
    color: #007cff
}

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

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

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

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

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

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

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

.joe_footer .joe_container .site_police a::before {
    display: inline-block;
    margin-right: 4px;
    vertical-align: text-bottom;
    content: "";
    width: 14px;
    height: 14px;
    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 center;
    background-size: 100% 100%
}

.joe_footer .joe_container .site_visit_number {
    margin-left: 5px;
    font-size: 13px
}

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

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

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

.joe_pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 36px;
    padding-bottom: 30px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.joe_action_item.mode {
    pointer-events: auto
}

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

.joe_comment_box {
    text-align: center
}

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

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

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

.joe_comment__close {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--routine)
}

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

.joe_comment__respond-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.joe_comment__respond-type .item {
    background: var(--classD);
    padding: 0 15px;
    height: 32px;
    color: var(--main);
    border: 0;
    -webkit-transition: color .35s, background .35s;
    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 {
    color: #fff;
    background: var(--theme)
}

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

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

.joe_comment__respond-form .head .list {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

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

.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 {
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1px;
    height: 15px;
    background: var(--classA)
}

.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 {
    width: 100%;
    height: 200px;
    border: 0;
    resize: none;
    vertical-align: middle;
    color: var(--routine);
    background: 0 0
}

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

.joe_comment__respond-form .body .draw .color, .joe_comment__respond-form .body .draw .line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    left: 10px
}

.joe_comment__respond-form .body .draw .line {
    top: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

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

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

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

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

.joe_comment__respond-form .body .draw .color li:nth-child(1) {
    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 {
    position: absolute;
    right: 10px;
    cursor: pointer;
    fill: var(--minor);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    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 .comment-list__item-contain .term .content .user, .joe_comment__respond-form .foot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.joe_comment__respond-form .foot {
    position: relative;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 15px 15px
}

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

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

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

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

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

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

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

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

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

.joe_comment .comment-list__item-contain .term .content {
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-bottom: 1px solid var(--classC);
    padding-bottom: 15px
}

.joe_comment .comment-list__item-contain .term .content .user {
    margin-bottom: 8px;
    line-height: 20px;
    color: var(--main)
}

.joe_comment .comment-list__item-contain .term .content .user .author {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 10px
}

.joe_comment .comment-list__item-contain .term .content .user .author a {
    color: #409eff
}

.joe_comment .comment-list__item-contain .term .content .user .owner {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: var(--theme);
    color: #fff;
    padding: 0 5px;
    border-radius: 2px;
    font-style: normal
}

.joe_comment .comment-list__item-contain .term .content .user .agent {
    margin-left: auto;
    font-size: 12px;
    color: var(--minor)
}

.joe_comment .comment-list__item-contain .term .content .user .waiting {
    color: #e6a23c;
    font-style: normal
}

.joe_comment .comment-list__item-contain .term .content .substance {
    width: 100%;
    background: var(--classD);
    padding: 12px 15px;
    border-radius: 0 var(--radius-inner) var(--radius-inner) 10px;
    color: var(--main);
    margin-bottom: 8px;
    word-break: break-word;
    line-height: 24px
}

.joe_comment .comment-list__item-contain .term .content .substance .parent {
    color: #388bff;
    margin-bottom: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 500
}

.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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--minor)
}

.joe_comment .comment-list__item-contain .term .content .handle .date {
    margin-right: 10px
}

.joe_comment .comment-list__item-contain .term .content .handle .reply {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--main);
    font-size: 13px;
    cursor: pointer;
    -webkit-transition: color .35s;
    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-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 {
    margin-left: 63px;
    margin-bottom: 15px;
    -webkit-animation: showComment .5s;
    animation: showComment .5s
}

.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 {
    font-weight: 500;
    color: var(--theme)
}

.joe_owo__contain {
    position: relative
}

.joe_owo__contain .seat {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer
}

.joe_owo__contain .box {
    width: 100%;
    display: none;
    background: var(--background);
    border-radius: var(--radius-inner);
    overflow: hidden;
    margin-top: 15px
}

.joe_owo__contain .box .scroll {
    display: none;
    max-height: 200px;
    overflow-y: auto;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    padding: 5px
}

.joe_owo__contain .box .scroll .item {
    text-align: center;
    width: calc(100% / 18);
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    border-radius: var(--radius-inner);
    -webkit-transition: background .25s;
    transition: background .25s
}

.joe_owo__contain .box .scroll .item img {
    max-width: 100%;
    max-height: 100%
}

.joe_owo__contain .box .scroll .item:hover {
    background: var(--classD)
}

.joe_owo__contain .box .scroll:nth-child(3) .item {
    color: var(--routine);
    width: calc(100% / 5)
}

.joe_owo__contain .box .bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: 1px solid var(--classC)
}

.joe_owo__contain .box .bar .item {
    line-height: 30px;
    padding: 0 10px;
    cursor: pointer;
    color: var(--routine);
    -webkit-transition: background .25s, color .25s;
    transition: background .25s, color .25s
}

.joe_owo__contain .box .bar .item.active {
    color: #fff;
    background: var(--theme)
}

.joe_nodata {
    padding: 20px;
    color: var(--minor)
}

.joe_advert-large, .joe_advert-small {
    position: relative;
    min-height: 32px;
    background: var(--sib-background)
}

.joe_advert-large img, .joe_advert-small img {
    display: block;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

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

.joe_advert-large {
    margin-top: 10px;
    overflow: hidden;
    border-radius: var(--radius-inner)
}

.canvas-backdrop {
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0
}

.canvas-backdrop.above {
    z-index: 90
}

.blur-up {
    -webkit-filter: blur(5px) !important;
    filter: blur(5px) !important;
    -webkit-transition: -webkit-filter 400ms;
    transition: filter 400ms;
    transition: filter 400ms, -webkit-filter 400ms
}

.blur-up.lazyloaded {
    -webkit-filter: blur(0) !important;
    filter: blur(0) !important
}

.profile-color-modes-illu-frame {
    opacity: 0;
    -webkit-animation: profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;
    animation: profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards
}

.profile-color-modes-illu-red {
    stroke: #da3633;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    -webkit-animation-duration: .1s;
    animation-duration: .1s
}

.profile-color-modes-illu-orange, .profile-color-modes-illu-purple {
    stroke: #f0883e;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-duration: .1s;
    animation-duration: .1s
}

.profile-color-modes-illu-purple {
    stroke: #8957e5;
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

.profile-color-modes-illu-green {
    stroke: #3fb950;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-timing-function: cubic-bezier(.47, 2.92, .84, -1.5);
    animation-timing-function: cubic-bezier(.47, 2.92, .84, -1.5)
}

.profile-color-modes-illu-blue {
    stroke: #388bfd;
    -webkit-animation-delay: .7s;
    animation-delay: .7s;
    -webkit-animation-duration: .1s;
    animation-duration: .1s
}

.profile-color-modes-illu-group {
    -webkit-animation: profile-color-modes-illu-anim .2s cubic-bezier(.72, .08, 1, .68) backwards;
    animation: profile-color-modes-illu-anim .2s cubic-bezier(.72, .08, 1, .68) backwards
}

.profile-color-modes-illu-frame:first-child {
    opacity: 1;
    -webkit-animation: profile-color-modes-illu-anim-frame-hide 0s forwards;
    animation: profile-color-modes-illu-anim-frame-hide 0s forwards;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s
}

.profile-color-modes-illu-frame:nth-child(8) {
    -webkit-animation: profile-color-modes-illu-anim-frame-show 0s forwards;
    animation: profile-color-modes-illu-anim-frame-show 0s forwards;
    -webkit-animation-delay: 3.56s;
    animation-delay: 3.56s
}

.profile-color-modes-illu-frame:nth-child(2) {
    -webkit-animation-delay: 1.8s, 2.58s;
    animation-delay: 1.8s, 2.58s
}

.profile-color-modes-illu-frame:nth-child(3) {
    -webkit-animation-delay: 2.58s, 2.66s;
    animation-delay: 2.58s, 2.66s
}

.profile-color-modes-illu-frame:nth-child(4) {
    -webkit-animation-delay: 2.66s, 2.78s;
    animation-delay: 2.66s, 2.78s
}

.profile-color-modes-illu-frame:nth-child(5) {
    -webkit-animation-delay: 2.78s, 2.84s;
    animation-delay: 2.78s, 2.84s
}

.profile-color-modes-illu-frame:nth-child(6) {
    -webkit-animation-delay: 2.84s, 3.44s;
    animation-delay: 2.84s, 3.44s
}

.profile-color-modes-illu-frame:nth-child(7) {
    -webkit-animation-delay: 3.44s, 3.56s;
    animation-delay: 3.44s, 3.56s
}

.profile-color-modes-illu-frame:nth-child(10), .profile-color-modes-illu-frame:nth-child(9) {
    -webkit-animation: none;
    animation: none
}

.showInUp {
    -webkit-animation: showInUp .35s;
    animation: showInUp .35s
}

.topInDown {
    -webkit-animation: topInDown .8s;
    animation: topInDown .8s
}

.showInDown {
    -webkit-animation: showInDown .35s;
    animation: showInDown .35s
}

@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
}