:root {
    --jl-main-color: #4370f5;
    --jl-hover-color: #3a5f9a;
    --jl-text-color: rgba(0, 0, 0, 0.84);
    --jl-text-light: rgba(0, 0, 0, 0.68);
    --jl-text-gray: rgba(0, 0, 0, 0.6);
    --jl-text-gray-lightest: rgba(0, 0, 0, 0.5);
    --jl-border-color: rgba(0, 0, 0, 0.1);
    --jl-border-color-light: rgba(0, 0, 0, 0.05);
    --jl-background-gray: #f5f7fd;
    --jl-background-gray-light: #f9f9f9;
    --jl-background-gray-lightest: #fafafa;
    --jl-background-white: rgba(255, 255, 255, 1);
    --jl-color-white: #fff;
    --jl-placeholder-color: #f4f4f4
}

/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background-color: rgba(0, 0, 0, 0)
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

@font-face {
    font-family: "iconfont";
    src: url("iconfont.woff2?t=1690880744906") format("woff2"), url("iconfont.woff?t=1690880744906") format("woff"), url("iconfont.ttf?t=1690880744906") format("truetype")
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-shuji:before {
    content: ""
}

.icon-a-erweimaiconqrcode:before {
    content: ""
}

.icon-a-diannaoiconcomputer:before {
    content: ""
}

.icon-weixin:before {
    content: ""
}

.icon-time:before {
    content: ""
}

.icon-a-statusbarmenu:before {
    content: ""
}

.icon-place:before {
    content: ""
}

.icon-tips:before {
    content: ""
}

.icon-home:before {
    content: ""
}

.icon-a-booklistmemoir:before {
    content: ""
}

.icon-a-booklistthinking:before {
    content: ""
}

.icon-a-booklistwork:before {
    content: ""
}

.icon-a-accountprofilephoto:before {
    content: ""
}

.icon-a-booklistrenren:before {
    content: ""
}

.icon-a-booklistproduct:before {
    content: ""
}

.icon-a-booklistuserexperience:before {
    content: ""
}

.icon-a-accountfans:before {
    content: ""
}

.icon-a-accountsettings:before {
    content: ""
}

.icon-a-commonoperateline:before {
    content: ""
}

.icon-a-accountrecords:before {
    content: ""
}

.icon-a-accountfollow:before {
    content: ""
}

.icon-a-accountarticle:before {
    content: ""
}

.icon-a-commoneditline:before {
    content: ""
}

.icon-a-commonlikeline:before {
    content: ""
}

.icon-a-commonmore:before {
    content: ""
}

.icon-a-commongiftfill:before {
    content: ""
}

.icon-a-commonlikefull:before {
    content: ""
}

.icon-a-commonashbinline:before {
    content: ""
}

.icon-a-commonhotfill:before {
    content: ""
}

.icon-a-commentgoodline:before {
    content: ""
}

.icon-a-commentemotesmile:before {
    content: ""
}

.icon-a-videohottest:before {
    content: ""
}

.icon-a-videolatest:before {
    content: ""
}

.icon-a-commonleftarrow:before {
    content: ""
}

.icon-a-commonrightarrow:before {
    content: ""
}

.icon-a-commoncollectfill:before {
    content: ""
}

.icon-a-commonshare:before {
    content: ""
}

.icon-a-commoncollect1:before {
    content: ""
}

.icon-a-commononarrow:before {
    content: ""
}

.icon-a-commonuparrow:before {
    content: ""
}

.icon-a-commoncomment:before {
    content: ""
}

.icon-wechat:before {
    content: ""
}

.icon-a-wenrewardic1:before {
    content: ""
}

.icon-a-wenrecommendedic1:before {
    content: ""
}

.icon-a-wendailyic1:before {
    content: ""
}

.icon-a-commonturnoff:before {
    content: ""
}

.icon-a-commonselected:before {
    content: ""
}

.icon-a-mobilesignin:before {
    content: ""
}

.icon-a-sidebarcircleicon:before {
    content: ""
}

.icon-a-navcontribute:before {
    content: ""
}

.icon-a-sidebararticlelistbg:before {
    content: ""
}

.icon-a-sidesuspensionscrolling:before {
    content: ""
}

.icon-a-sidesuspensiontrack:before {
    content: ""
}

.icon-a-sidesuspensionarrowdown:before {
    content: ""
}

.icon-a-sidebarnewsic:before {
    content: ""
}

.icon-a-wendailyic:before {
    content: ""
}

.icon-a-wenrewardic:before {
    content: ""
}

.icon-a-wenrecommendedic:before {
    content: ""
}

.icon-a-commonarrowright:before {
    content: ""
}

.icon-a-navencyclopedia:before {
    content: ""
}

.icon-a-navsearch:before {
    content: ""
}

.icon-a-navinfo:before {
    content: ""
}

.icon-a-navhome1:before {
    content: ""
}

.icon-a-navinspiration:before {
    content: ""
}

html {
    scroll-behavior: smooth
}

body {
    background-color: var(--jl-background-gray);
    color: var(--jl-text-color);
    line-height: 1.8;
    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, STHeiti, WenQuanYi Micro Hei, Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased
}

a {
    text-decoration: none;
    color: inherit
}

input,
button,
textarea {
    /*appearance: none;*/
    outline: none
}

img {
    max-width: 100%;
    height: auto
}

button,
label {
    cursor: pointer
}

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

.u-block {
    display: block !important
}

.u-relative {
    position: relative
}

.u-hide {
    display: none
}

.u-width335 {
    width: 335px
}

.u-width850 {
    width: 885px
}

.u-centered {
    margin-left: auto;
    margin-right: auto
}

.u-width880 {
    width: 880px
}

.u-backgroundColorWhite {
    background-color: var(--jl-background-white)
}

.u-floatRight {
    float: right
}

.u-floatLeft {
    float: left
}

.u-width780 {
    width: 780px;
    margin-left: auto;
    margin-right: auto
}

.u-textAlignCenter {
    text-align: center
}

.u-rounded {
    border-radius: 4px
}

.u-marginTop30 {
    margin-top: 30px
}

.u-marginTop20 {
    margin-top: 20px
}

.u-flex0 {
    flex: 0 0 auto
}

.u-flex1 {
    flex: 1 1 auto
}

.u-paddingLeft15 {
    padding-left: 15px
}

.u-shadowed {
    box-shadow: 0 1px 1px 0 var(--jl-border-color-light)
}

.u-width315 {
    width: 315px
}

.u-clearfix {
    *zoom: 1
}

.u-clearfix:before,
.u-clearfix:after {
    display: table;
    content: " "
}

.u-clearfix:after {
    clear: both
}

.u-cursorPointer {
    cursor: pointer
}

.u-paddingBottom30 {
    padding-bottom: 30px !important
}

.u-marginBottom30 {
    margin-bottom: 30px
}

.u-marginBottom20 {
    margin-bottom: 20px
}

.pm-adTitle {
    font-size: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--jl-border-color);
    font-weight: 700;
    text-align: center
}

.u-marginRight0 {
    margin-right: 0 !important
}

.u-paddingLeft20 {
    padding-left: 20px !important
}

.y-paddingTop30 {
    padding-top: 30px
}

.el-form {
    position: relative
}

.avatar-uploader {
    position: absolute;
    right: 0;
    top: 30px
}

.avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.avatar-uploader .avatar {
    width: 80px;
    height: 80px;
    display: block
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center
}

.footer--links {
    list-style: none;
    display: flex;
    flex-wrap: wrap
}

.footer--links li {
    margin-right: 10px
}

.u-paddingTop30 {
    padding-top: 30px
}

.screen-reader-text {
    position: absolute;
    top: -9999px;
    left: -9999px
}

.demo--radioText {
    display: inline-block;
    border: 1px solid var(--jl-main-color);
    color: var(--jl-main-color);
    border-radius: 3px;
    box-sizing: border-box;
    padding: 10px;
    width: 106px;
    text-align: center
}

.demo--radio:checked+.demo--radioText {
    background-color: #f2f5fd
}

.demo--label {
    display: flex;
    box-sizing: content-box;
    cursor: pointer;
    align-items: center
}

.demo--label:nth-child(3n) {
    margin-right: 0
}

.demo--radio {
    display: none
}

.demo--radioInput {
    background-color: var(--jl-background-white);
    border: 1px solid var(--jl-border-color);
    border-radius: 100%;
    display: inline-block;
    height: 16px;
    margin-right: 10px;
    margin-top: -1px;
    vertical-align: middle;
    width: 16px;
    line-height: 1;
    box-sizing: content-box
}

.demo--radio:checked+.demo--radioInput:after {
    background-color: var(--jl-main-color);
    border-radius: 100%;
    content: "";
    display: inline-block;
    height: 12px;
    margin: 2px;
    width: 12px
}

.demo--checkbox.demo--radioInput,
.demo--radio:checked+.demo--checkbox.demo--radioInput:after {
    border-radius: 0
}

.butterBar {
    left: 50%;
    margin-left: -320px;
    max-width: 640px;
    position: fixed;
    text-align: center;
    top: 0;
    width: 58%;
    z-index: 1000;
    line-height: 1.8
}

.butterBar a {
    text-decoration: underline
}

.butterBar-message {
    margin-top: 0;
    background: #888;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 0 1px rgba(0, 0, 0, .35);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 0;
    padding: 12px 25px;
    color: #eee
}

.butterBar--error .butterBar-message {
    background-color: #cc5454;
    color: #fff
}

@media screen and (max-width: 640px) {
    .butterBar {
        margin-left: 5%;
        width: 90%;
        left: 0
    }
}

.button {
    border: 1px solid var(--jl-main-color);
    background-color: var(--jl-main-color);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    padding: 4px 12px
}

.button--toggle .default {
    display: inline
}

.button--toggle .active {
    display: none
}

.button--toggle.active .default {
    display: none
}

.button--toggle.active .active {
    display: inline
}

.ui-captionStrong {
    color: var(--jl-text-color)
}

.container {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto
}

.main-content {
    padding-top: 30px
}

.home-block {
    display: flex;
    align-items: flex-start
}

.dot:before {
    content: "·";
    margin-left: .5em;
    margin-right: .5em
}

.el-popover {
    min-width: 0 !important
}

.u-flexCenter {
    display: flex;
    align-items: center
}

.u-marginRight10 {
    margin-right: 10px
}

.u-marginLeft10 {
    margin-left: 10px
}

.popover {
    background-color: var(--jl-background-white)
}

.is-fixedHeader .pm--metabar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 800
}

.is-fixedHeader .surface--content {
    padding-top: 60px
}

.pm--metabar {
    background-color: var(--jl-background-white);
    height: 60px;
    border-bottom: 1px solid var(--jl-border-color);
    font-size: 14px;
    box-sizing: border-box
}

.pm--metabar .logo {
    width: 162px;
    height: 58px
}

.pm--metabar__right {
    margin-left: auto;
    height: 60px
}

.pm--metabar__right .avatar {
    border-radius: 100%;
    padding: 1px;
    border: 1px solid var(--jl-main-color);
    cursor: pointer;
    width: 30px;
    height: 30px;
    object-fit: cover
}

.pm--metabar__right .avatar.is_es {
    border-color: orange
}

.pm--metabarItem {
    margin-right: 20px;
    cursor: pointer;
    height: 60px
}

.pm--metabarItem:hover,
.pm--metabarItem.active {
    color: var(--jl-main-color)
}

.pm--metabarItem:hover>svg,
.pm--metabarItem.active>svg {
    fill: var(--jl-main-color)
}

.pm--metabarItem svg {
    margin-right: 6px
}

.subnav-ul {
    display: flex;
    list-style: none;
    height: 60px;
    margin: 0
}

.menu-item {
    padding: 0 10px;
    display: flex;
    align-items: center;
    color: var(--jl-text-light);
    position: relative
}

.menu-item--new {
    padding-right: 20px
}

.menu-item--new:after {
    background-color: red;
    border-radius: 3px;
    color: #fff;
    content: "hot";
    font-size: 10px;
    line-height: 1;
    padding: 1px 3px;
    position: absolute;
    right: -4px;
    top: 17px
}

.menu-item a:hover {
    color: var(--jl-main-color)
}

.menu-item svg {
    margin-left: 4px;
    transition: .5s
}

.menu-item:hover svg {
    transform: rotateX(180deg)
}

.menu-item:hover .sub--menuWidth {
    display: block;
    animation: sub-nav-show .5s
}

.menu-item:hover .sub--menu {
    display: flex;
    animation: sub-nav-show .5s
}

.sub--menu {
    display: none;
    background-color: var(--jl-background-white);
    position: absolute;
    top: 60px;
    padding: 0 10px;
    left: -36px;
    z-index: 800;
    flex-direction: column;
    width: 120px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0px 20px 35px var(--jl-border-color)
}

.sub--menu a {
    color: var(--jl-text-light);
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    text-align: center
}

.sub--menu a:hover {
    color: var(--jl-main-color)
}

.sub--menu a:last-child {
    border-bottom: none
}

.sub--menuWidth {
    display: none;
    background-color: var(--jl-background-white);
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0px 20px 35px var(--jl-border-color);
    padding: 30px 0 40px;
    background-image: url(../images/bglogo.png);
    background-repeat: no-repeat;
    background-position: right -15px bottom -15px;
    background-size: 150px;
    z-index: 800
}

.dropCard--item {
    width: 194px;
    margin-right: 40px
}

.dropCard--item img {
    display: block;
    transition: .5s
}

.dropCard--item:hover img {
    transform: scale(1.05)
}

.dropCard--item .title {
    font-weight: 700;
    text-align: center;
    font-size: 16px;
    padding: 15px 0 12px;
    line-height: 1
}

.dropCard--item .des {
    color: var(--jl-text-gray-lightest);
    line-height: 1.4;
    text-align: justify;
    font-size: 14px
}

.dropCard--list {
    display: flex;
    align-items: flex-start
}

.pm--category {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%
}

.pm--categoryItem {
    border: 1px solid var(--jl-border-color);
    padding: 20px 0;
    width: 14.6666667%;
    box-sizing: border-box;
    margin-bottom: 20px;
    line-height: 1;
    border-radius: 5px
}

.pm--categoryItem a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0
}

.pm--categoryItem:hover {
    border-color: var(--jl-main-color);
    background-color: var(--jl-main-color);
    color: #fff !important
}

.pm--categoryItem:hover a {
    color: #fff !important
}

.pm--categoryItem .name {
    font-weight: normal;
    margin: 4px 0 10px;
    font-size: 14px
}

.pm--categoryItem .count {
    margin: 0;
    font-weight: 200
}

.pm--metabar__dropdown {
    height: 60px
}

.pm--metabar__dropdown:hover .pm--userCard__dropdown {
    display: block;
    animation: sub-nav-show .5s
}

.pm--metabar__dropdown:hover .pm--qrcodeCard__dropdown {
    display: flex;
    animation: sub-nav-show .5s
}

.pm--qrcodeCard__dropdown {
    position: absolute;
    background-color: var(--jl-background-white);
    width: 130px;
    justify-content: center;
    right: 0;
    top: 60px;
    border-radius: 0 0 4px 4px;
    border: 1px solid var(--jl-border-color-light);
    border-top: 0;
    display: none;
    padding: 10px 0;
    box-sizing: border-box
}

.pm--userCard__dropdown {
    position: absolute;
    background-color: var(--jl-background-white);
    width: 300px;
    right: 0;
    top: 60px;
    border-radius: 0 0 4px 4px;
    border: 1px solid var(--jl-border-color-light);
    border-top: 0;
    display: none
}

.userCard--info {
    text-align: center;
    padding-top: 15px;
    background-color: var(--jl-background-gray-lightest);
    padding-bottom: 15px
}

.userCard--avatar {
    border-radius: 100%;
    width: 48px;
    height: 48px;
    object-fit: cover
}

.userCard--name {
    font-size: 16px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.userCard--name .real--verify {
    font-size: 12px;
    border: 1px solid orange;
    color: orange;
    padding: 2px 5px;
    line-height: 1;
    border-radius: 4px;
    margin-left: 4px
}

.userCard--description {
    font-size: 14px;
    color: var(--jl-text-gray)
}

.userCard--menu {
    background-color: var(--jl-background-white)
}

.userCard--menu .menuItem {
    display: flex;
    padding: 5px 10px;
    border-bottom: 1px solid var(--jl-border-color)
}

.userCard--menu .menuItem:first-child .item {
    color: var(--jl-text-gray);
    width: 33%;
    text-align: center;
    line-height: 1.2;
    padding: 10px 0
}

.userCard--menu .menuItem:first-child .item svg {
    width: 18px;
    fill: var(--jl-text-gray-lightest)
}

.userCard--menu .menuItem:first-child .item:hover {
    background-color: var(--jl-main-color);
    color: var(--jl-color-white)
}

.userCard--menu .menuItem:first-child .item:hover svg {
    fill: var(--jl-color-white)
}

.userCard--menu .menuItem:last-child {
    padding: 10px 0;
    border-bottom: 0
}

.userCard--menu .menuItem:last-child .item {
    width: 50%;
    text-align: center;
    color: var(--jl-text-gray)
}

.userCard--menu .menuItem:last-child .item:hover {
    color: var(--jl-main-color)
}

.message--link {
    position: relative
}

.message--link .message-count {
    background-color: #c00;
    border-radius: 999em;
    color: #fff;
    font-size: 10px;
    height: 12px;
    left: 10px;
    line-height: 12px;
    opacity: .8;
    padding: 0 5px;
    position: absolute;
    text-align: center;
    top: -1px
}

.pm--vipCard {
    user-select: none;
    cursor: default
}

.pm--vipCard__title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 18px;
    color: #7e4f1a;
    background-color: #ffecd2;
    height: 69px;
    margin-bottom: 15px
}

.pm--vipCard__title img {
    width: 25px;
    margin-right: 7px
}

.pm--vipCard__list {
    padding: 5px 15px 10px;
    display: flex;
    flex-wrap: wrap
}

.pm--vipCard__item {
    width: 50%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--jl-text-light);
    margin-bottom: 10px;
    box-sizing: border-box;
    padding-left: 5px
}

.pm--vipCard__item img {
    margin-right: 6px
}

.pm--vipCard__button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 18px;
    font-weight: 500;
    font-size: 14px;
    color: #7e4f1a
}

.pm--vipCard__button a {
    background: #fbc985;
    border-radius: 4px;
    width: 326px;
    text-align: center;
    cursor: pointer;
    padding: 5px 0
}

.dropCard--courses {
    display: flex;
    align-items: flex-start
}

.dropCourse--list {
    width: 25%;
    border-right: 1px solid var(--jl-border-color);
    padding-left: 30px
}

.dropCourse--list:last-child {
    border-right: 0;
    flex: 1 1 auto
}

.dropCourse--list:first-child {
    padding-left: 0
}

.dropCourse--title {
    font-size: 18px;
    color: var(--jl-text-gray);
    margin-bottom: 4px
}

.dropCourse--double {
    display: flex;
    align-items: flex-start
}

.dropCourse--doubleItem {
    width: 170px
}

.dropCourse--item {
    font-size: 14px;
    color: var(--jl-text-light);
    line-height: 1.4;
    padding: 5px 0
}

.dropCourse--item a:hover {
    text-decoration: underline
}

.dropCourse--more {
    padding-top: 3px;
    font-size: 12px
}

.dropCourse--more .el-icon-d-arrow-right {
    margin-left: 5px;
    position: relative;
    transition: .5s
}

.dropCourse--more:hover {
    text-decoration: underline
}

.dropCourse--more:hover .el-icon-d-arrow-right {
    transform: translate3d(5px, 0, 0)
}

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

    25% {
        transform: scale(1.2)
    }

    50% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes sub-nav-show {
    0% {
        transform: translate3d(0, 10px, 0);
        opacity: .1
    }

    to {
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes play-state {
    0% {
        stroke-dashoffset: 37
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes loading {
    to {
        filter: brightness(0.9)
    }
}

.placeholder .title,
.placeholder .desc,
.placeholder .img {
    border-radius: 2px;
    background-color: var(--jl-placeholder-color);
    animation: loading 1s linear infinite alternate
}

.postlist-placeholder {
    margin-bottom: 20px
}

.postlist-placeholder .title {
    height: 30px;
    margin-top: 0;
    margin-bottom: 15px
}

.postlist-placeholder .img {
    height: 100%
}

.postlist-placeholder .desc {
    height: 20px;
    margin-bottom: 10px
}

.postlist-placeholder .desc:last-child {
    width: 80%
}

.topCard--list {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.topCard--item {
    border: 1px solid #f2f2f2;
    padding: 12px 15px 0;
    box-sizing: border-box;
    margin-bottom: 15px;
    background: var(--jl-background-white);
    width: 288px;
    height: 130px
}

.topCard--tags {
    display: flex;
    flex-wrap: wrap;
    padding-top: 15px
}

.topCard--tags a {
    color: var(--jl-main-color);
    background-color: rgba(67, 112, 245, .1);
    font-size: 12px;
    margin-right: 9px;
    margin-bottom: 10px;
    border-radius: 2px;
    line-height: 1.4;
    padding: 2px 6px;
    transition: .5s background-color;
    will-change: background-color
}

.topCard--tags a.hot {
    color: #fff;
    background-color: var(--jl-main-color)
}

.topCard--tags a.hot:hover {
    background-color: var(--jl-main-color)
}

.topCard--tags a:hover {
    background-color: rgba(67, 112, 245, .2)
}

.topCard--title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--jl-border-color-light);
    padding: 0 0 8px;
    margin: 0px;
    display: flex;
    align-items: center
}

.topCard--title svg {
    width: 24px;
    height: 24px;
    margin-right: 5px
}

.topCard--title span {
    font-size: 12px;
    color: var(--jl-text-gray-lightest);
    margin-left: 5px;
    align-self: flex-end;
    transform: translate3d(0, -4px, 0)
}

.stream-video--title {
    display: flex;
    font-size: 18px;
    align-items: center;
    padding-bottom: 15px;
    font-weight: 700;
    line-height: 1
}

.stream-video--title .more {
    font-size: 14px;
    color: var(--jl-text-gray-lightest);
    margin-left: auto;
    font-weight: 400
}

.stream-video--title .more:hover {
    text-decoration: underline
}

.stream-videoNav--list {
    display: flex;
    align-items: center
}

.stream-videoNav--item {
    background: #f8f8f8;
    cursor: pointer;
    line-height: 1.4;
    font-size: 12px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999rem;
    margin-left: 15px;
    color: #111;
    font-weight: normal
}

.stream-videoNav--item.is-active {
    background: linear-gradient(90deg, #ffb821 0, #ff5c38 45%, #ff1459);
    color: #fff
}

.home-video-list {
    padding-bottom: 20px;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 15px
}

.home--navCards {
    padding-bottom: 50px
}

.relate-text {
    margin-top: 20px;
    background-color: var(--jl-background-white);
    padding: 20px
}

.relate-text__title {
    font-size: 18px
}

.relate-text__list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    counter-reset: slist;
    padding-top: 10px
}

.relate-text__item {
    counter-increment: slist;
    display: flex;
    margin-bottom: 15px;
    width: 48%
}

.relate-text__item .title {
    line-height: 1.4
}

.relate-text__item .title:hover {
    color: var(--jl-main-color)
}

.relate-text__item .content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 25px
}

.relate-text__item .content:before {
    content: counter(slist);
    position: absolute;
    border: 1px solid #777;
    color: var(--jl-text-gray);
    font-size: 12px;
    left: 0;
    top: 2px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700
}

.relate-text__item .meta {
    font-size: 14px;
    color: var(--jl-text-gray);
    margin-top: auto
}

.relate-text__item .img-link,
.relate-text__item .img {
    margin-left: 15px;
    border-radius: 4px;
    overflow: hidden;
    width: 120px;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start
}

.relate-text__item .img-link .cover,
.relate-text__item .img .cover {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px
}

.relate-text__item .img-link img,
.relate-text__item .img img {
    transition: .5s
}

.relate-text__item .img-link:hover img,
.relate-text__item .img:hover img {
    transform: scale(1.05)
}

.withOpenCourse {
    position: relative
}

.withOpenCourse .openCourse--container {
    border-top: 1px solid var(--jl-border-color);
    position: absolute;
    display: none;
    padding: 15px;
    border-radius: 0 0 5px 5px;
    background-color: #fff;
    width: 885px;
    right: -243px;
    box-sizing: border-box;
    z-index: 300;
    top: 49px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05);
    justify-content: space-between
}

.withOpenCourse .openCourse--qrcode {
    width: 48px;
    margin-left: auto;
    flex: 0 0 auto;
    border: 1px solid var(--jl-main-color);
    padding: 1px;
    border-radius: 2px
}

.withOpenCourse .openCourse--meta {
    display: flex;
    align-items: center;
    font-size: 12px
}

.withOpenCourse .openCourse--item {
    width: 32%;
    display: flex;
    flex-direction: column
}

.withOpenCourse .openCourse--image {
    border-radius: 5px;
    margin-bottom: 10px
}

.withOpenCourse .openCourse--title {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 5px
}

.withOpenCourse:hover .openCourse--container {
    display: flex;
    align-items: flex-start
}

.index--banner {
    padding-top: 40px
}

.slider {
    width: 623px;
    display: flex
}

.slider .main-slider {
    position: relative;
    height: 336px;
    overflow: hidden
}

.slider .main-slider .prev,
.slider .main-slider .next {
    background-color: rgba(0, 0, 0, .45);
    width: 50px;
    height: 100px;
    top: 50%;
    margin-top: -25px;
    position: absolute;
    z-index: 200;
    display: none
}

.slider .main-slider .prev {
    left: 0
}

.slider .main-slider .next {
    right: 0
}

.slider .supernice {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 300
}

.slider .supernice ul {
    display: flex
}

.slider .supernice li {
    height: 12px;
    right: 12px;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 100%;
    display: flex;
    margin: 10px 5px;
    cursor: pointer
}

.slider .supernice li svg {
    height: 12px;
    width: 12px;
    z-index: 10;
    transform: rotate(-90deg) translateZ(0);
    opacity: 0
}

.slider .supernice li svg circle {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 37 37;
    stroke-dashoffset: 37;
    stroke: #fff
}

.slider .supernice li.on {
    background-color: rgba(255, 255, 255, .6)
}

.slider .supernice li.on svg {
    opacity: 1
}

.slider .supernice li.on svg circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 3.7s linear
}

.slider ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.slider:hover .supernice li.on svg {
    opacity: 1
}

.slider:hover .supernice li.on svg circle {
    stroke-dashoffset: 37;
    transition: stroke-dashoffset .5s linear
}

.slider .bd {
    position: relative
}

.slider .bd li {
    position: relative
}

.slider .bd li img {
    display: block;
    transition: .5s transform;
    transform-origin: bottom center
}

.slider .bd li:hover img {
    transform: scale(1.1)
}

.slider .bd li .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 5%, rgba(0, 0, 0, 0.65));
    transition: .5s
}

.slider .bd li .title {
    position: absolute;
    bottom: 15px;
    left: 25px;
    right: 100px;
    font-weight: 700;
    color: #fff;
    font-size: 20px;
    line-height: 1.6
}

.small-slider {
    width: 245px;
    margin-left: 16px
}

.small-slider-item {
    height: 160px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden
}

.small-slider-item a {
    display: flex;
    position: relative
}

.small-slider-item a img {
    transition: .5s;
    height: 160px;
    width: 246px;
    object-fit: cover
}

.small-slider-item a .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 5%, rgba(0, 0, 0, 0.65));
    transition: .5s
}

.small-slider-item a:hover img {
    transform: scale(1.1)
}

.small-slider-item a:hover .mask {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 5%, rgba(0, 0, 0, 0.85))
}

.small-slider-item:last-child {
    margin-bottom: 0
}

.small-slider-item .title {
    position: absolute;
    bottom: 10px;
    color: #fff;
    line-height: 1.4;
    left: 10px;
    right: 10px
}

.top-activity {
    width: 335px;
    height: 336px;
    margin-left: auto;
    background-color: #333;
    color: #fff;
    overflow: hidden;
    background-image: url(../images/logo-a.png);
    background-repeat: no-repeat;
    background-position: right bottom
}

.top-activity a {
    display: block;
    overflow: hidden;
    position: relative
}

.top-activity a .status {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--jl-main-color);
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    z-index: 300
}

.top-activity a img {
    transition: .5s;
    display: block
}

.top-activity a:hover img {
    transform: scale(1.1)
}

.top-activity .content {
    padding: 15px 15px 15px
}

.top-activity .meta {
    font-size: 14px;
    line-height: 1.8
}

.top-activity .meta svg {
    fill: #fff;
    width: 22px;
    height: 22px;
    margin-right: 4px
}

.top-activity .meta .date,
.top-activity .meta .address {
    display: flex;
    align-items: center
}

.activity-title {
    line-height: 1.6;
    margin-bottom: 5px;
    max-height: 3.2em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.home--bannerImage {
    object-fit: cover;
    width: 623px;
    height: 336px
}

.postlist-item {
    display: flex;
    margin-bottom: 15px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05)
}

.postlist-item__tag {
    font-size: 12px;
    color: rgba(0, 0, 0, .5);
    background-color: #f2f4f6;
    padding: 1px 6px;
    line-height: 1.6;
    margin-left: 5px;
    border-radius: 4px
}

.postlist-item__tag:hover {
    text-decoration: none !important;
    background-color: var(--jl-main-color);
    color: #fff
}

.postlist-item:last-child {
    margin-bottom: 0
}

.postlist-item--ad .action {
    width: 150px;
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px
}

.postlist-item--ad .content {
    justify-content: center
}

.postlist-item:hover {
    box-shadow: 0 3px 5px rgba(0, 0, 0, .05)
}

.postlist-item .post-img {
    width: 236px;
    height: 143px;
    flex: 0 0 auto;
    padding: 15px;
    position: relative
}

.postlist-item .post-img a {
    display: block;
    overflow: hidden
}

.postlist-item .post-img a img {
    transition: .5s;
    display: block;
    width: 236px;
    height: 143px;
    object-fit: cover
}

.postlist-item .post-img a img:hover {
    transform: scale(1.1)
}

.postlist-item .post-img .post-cat {
    position: absolute;
    background-color: #303842;
    color: #fff;
    border-radius: 3px;
    padding: 1px 10px;
    top: 25px;
    left: 25px;
    font-size: 12px;
    z-index: 200
}

.postlist-item .post-img .post-cat.operate {
    background-color: #6e2fd8
}

.postlist-item .post-img .post-cat.it {
    background-color: #dda23c
}

.postlist-item .post-img .post-cat.pmd {
    background-color: #34415d
}

.postlist-item .post-img .post-cat.active {
    background-color: #29bbc0
}

.postlist-item .post-img .post-cat.rp {
    background-color: #43ad32
}

.postlist-item .post-img .post-cat.pd {
    background-color: #b145b8
}

.postlist-item .post-img .post-cat.ucd {
    background-color: #ee5757
}

.postlist-item .content {
    flex: 1 1 auto;
    padding: 15px 15px 15px 0px;
    display: flex;
    flex-direction: column
}

.postlist-item .post-title {
    font-size: 20px;
    line-height: 1.4;
    margin: 0 0 5px;
    transition: .5s
}

.postlist-item .post-title a:visited {
    color: var(--jl-color-light)
}

.postlist-item .post-title a:hover {
    color: var(--jl-main-color)
}

.postlist-item .des {
    font-size: 14px;
    color: var(--jl-text-gray);
    text-align: justify;
    line-height: 1.6;
    margin: 0 0 5px;
    max-height: 3.2em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.meta--sup {
    display: flex
}

.meta--sup__right {
    margin-left: auto;
    display: flex;
    align-items: center
}

.meta--sup__right .views {
    margin-right: 4px
}

.stream-list-meta {
    margin-top: auto;
    display: flex;
    font-size: 12px;
    color: var(--jl-text-gray-lightest);
    align-items: center;
    line-height: 1.6
}

.article--title+.stream-list-meta {
    margin-top: 8px
}

.stream-list-meta a:hover {
    text-decoration: underline
}

.stream-list-meta .icon {
    margin-left: 4px
}

.stream-list-meta .avatar {
    border-radius: 100%;
    margin-right: 8px;
    height: 36px;
    width: 36px;
    object-fit: cover
}

.stream-list-meta .avatar .svgIcon {
    margin: 0 3px
}

.home--nav {
    border-bottom: 1px solid rgba(143, 145, 143, .3);
    overflow: hidden;
    margin-bottom: 20px;
    font-size: 18px;
    display: flex
}

.home--nav .current {
    padding-bottom: 5px;
    border-bottom: 3px solid var(--jl-main-color);
    color: var(--jl-main-color);
    font-weight: 700
}

.stream-topics,
.home--questionCards {
    background-color: var(--jl-background-white);
    padding: 20px;
    margin-bottom: 20px
}

.stream-list-topic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px
}

.stream-img-pad {
    display: flex;
    flex-direction: column;
    width: 272px;
    background-color: var(--jl-background-white)
}

.stream-img-pad .image {
    position: relative;
    display: flex;
    border-radius: 4px;
    overflow: hidden
}

.stream-img-pad .image .topic-i {
    position: absolute;
    right: 0;
    top: 10px;
    background-color: #ffd9af;
    color: #a7723a;
    padding: 0 5px;
    line-height: 1.6;
    font-size: 12px;
    border-radius: 4px 0 0 4px;
    opacity: .9;
    font-style: normal
}

.stream-img-pad .image img {
    border-radius: 4px;
    height: 150px;
    object-fit: cover;
    width: 100%
}

.stream-img-pad .image:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background-color: rgba(0, 0, 0, .3)
}

.stream-img-pad .image .meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 18px;
    font-size: 12px;
    color: #fff
}

.stream-img-pad .posts {
    background-color: var(--jl-background-gray-lightest);
    padding: 6px 10px;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--jl-text-light)
}

.stream-img-pad .posts a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: .5s
}

.stream-img-pad .posts a::before {
    content: "•";
    margin-right: 1px;
    color: var(--jl-main-color)
}

.stream-img-pad .posts a:hover {
    color: var(--jl-main-color)
}

.stream-img-pad .info {
    padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto
}

.stream-img-pad .title {
    font-size: 16px;
    margin: 0;
    line-height: 1.4;
    transition: .5s
}

.stream-img-pad .title:hover {
    color: var(--jl-main-color)
}

.stream-img-pad .desc {
    font-size: 13px;
    color: var(--jl-text-gray-lightest);
    padding: 5px 0 0;
    line-height: 1.5;
    max-height: 3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.stream-img-pad .action {
    text-align: center;
    padding: 10px 0;
    margin-top: auto
}

.stream-img-pad .action .button {
    border: 1px solid var(--jl-main-color);
    color: var(--jl-main-color);
    padding: 5px 22px;
    border-radius: 5px;
    background-color: var(--jl-background-white);
    font-size: 12px
}

.stream-img-pad .action .button:hover {
    background-color: var(--jl-main-color);
    color: #fff
}

.navCard--list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.navCard--item {
    background-color: var(--jl-background-white);
    width: 49%;
    margin-bottom: 2%;
    padding: 25px;
    box-sizing: border-box;
    display: flex;
    align-items: center
}

.navCard--itemImage {
    width: 54px;
    margin-right: 15px;
    display: flex
}

.navCard--item .des {
    font-size: 14px;
    color: var(--jl-text-gray-lightest)
}

.pagination {
    padding: 30px 0 50px
}

.pagination .page-numbers {
    background-color: var(--jl-border-color-light);
    font-size: 14px;
    padding: 6px 14px;
    color: var(--jl-text-gray-lightest);
    border-radius: 4px
}

.pagination .page-numbers.current {
    background-color: var(--jl-main-color);
    color: #fff
}

.loadmore {
    background-color: var(--jl-background-white);
    color: var(--jl-main-color);
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 1px 1px 0 var(--jl-border-color-light);
    cursor: pointer
}

.u-backgroundColorWhite .loadmore {
    background-color: #fafafa
}

.block--action {
    padding: 20px 0
}

.tagCard--item {
    width: 300px;
    background-color: var(--jl-background-white)
}

.tagCard--header {
    padding: 10px;
    background-color: #fafafa
}

.tagCard--content {
    padding: 10px
}

.tagCard--post {
    border-bottom: 1px solid var(--jl-border-color);
    padding: 5px 0;
    font-size: 14px;
    color: var(--jl-text-light)
}

.tagCard--post:last-child {
    border-bottom: 0
}

.tagCard--list {
    display: flex;
    justify-content: space-between;
    padding-bottom: 50px
}

.questionCard {
    counter-reset: section
}

.questionCard--item {
    background-color: var(--jl-background-white);
    position: relative;
    width: 49%;
    display: flex;
    flex-direction: column;
    counter-increment: section
}

.questionCard--item:nth-child(n+5) .content {
    border-bottom: 0;
    padding-bottom: 0
}

.questionCard--item:nth-child(-n+2) .content {
    padding-top: 0
}

.questionCard--item .content {
    padding: 20px 5px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    border-bottom: 1px dotted var(--jl-border-color)
}

.questionCard--item .content .link {
    margin-left: auto;
    border: 1px solid var(--jl-main-color);
    line-height: 1.2;
    padding: 3px 8px;
    border-radius: 4px;
    color: var(--jl-main-color)
}

.questionCard--item .content .link:hover {
    background-color: var(--jl-main-color);
    color: #fff
}

.questionCard--item .content .title {
    display: flex;
    align-items: flex-start;
    line-height: 1.4;
    transition: .5s
}

.questionCard--item .content .title:hover {
    color: var(--jl-main-color)
}

.questionCard--item .content .title .reward {
    color: #f50;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-right: 6px;
    font-size: 16px;
    font-weight: 700
}

.questionCard--item .content .title .reward img {
    margin-right: 4px;
    width: 20px
}

.questionCard--item .content .des {
    font-size: 14px;
    color: var(--jl-text-gray)
}

.questionCard--item .content .action {
    display: flex;
    align-items: center;
    padding-top: 10px;
    font-size: 12px;
    color: var(--jl-text-gray);
    margin-top: auto
}

.questionCard--item .content .action .rachel--box__list {
    display: flex;
    margin-right: 5px
}

.questionCard--item .content .action .avatar {
    border-radius: 100%;
    width: 24px;
    height: 24px;
    margin-left: -8px;
    border: 2px solid var(--jl-background-white)
}

.questionCard--item .content .action .avatar:first-child {
    margin-left: 0
}

.questionCard--list {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.questionCard--prefix {
    background-color: var(--jl-main-color);
    color: #fff;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 8px;
    line-height: 1.6
}

.post-navigation {
    background-color: var(--jl-background-white);
    padding: 25px;
    margin-top: 30px
}

.button--toggle .is-default {
    display: inline
}

.button--toggle .is-active {
    display: none
}

.button.topicshare {
    background-color: var(--jl-background-white) !important;
    color: var(--jl-main-color) !important;
    margin-left: 10px;
    line-height: 1.6;
    font-size: 12px;
    padding: 4px 26px;
    border-radius: 2px;
    border: 0
}

.homeTab {
    /*margin-top:10px;*/
    background-color: var(--jl-background-white);
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    display: flex;
    margin-bottom: 10px
}

.homeTab__top {
    margin-top: 0
}

.homeTab span {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
    height: 50px;
    box-sizing: border-box;
    cursor: pointer
}

.homeTab span.is-active:before,
.homeTab span.loading:before {
    background-color: var(--jl-main-color);
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: 0
}

.homeTab span.is-active:before {
    right: 0
}

.homeTab span.hot:before {
    background-color: rgba(204, 0, 0, .8);
    color: #fff;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 2px;
    position: absolute;
    top: 6px;
    right: -5px;
    font-weight: 700;
    content: "hot";
    line-height: 1;
    text-transform: capitalize
}

.post-navigation {
    display: flex
}

img[data-action=zoom] {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in
}

.zoom-img,
.zoom-img-wrap {
    position: relative;
    z-index: 1000;
    transition: all 300ms
}

img.zoom-img {
    cursor: pointer;
    cursor: -webkit-zoom-out;
    cursor: -moz-zoom-out
}

.zoom-overlay {
    z-index: 900;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms
}

.zoom-overlay-open .zoom-overlay {
    opacity: 1
}

.zoom-overlay-open,
.zoom-overlay-transitioning {
    cursor: default
}

.form--content {
    width: 500px;
    padding-top: 15px
}

.form--content .el-form-item__label {
    line-height: 22px !important
}

.home-ad-link {
    overflow: hidden
}

.home-ad-link img {
    transition: .5s;
    display: block
}

.home-ad-link:hover img {
    transform: scale(1.05)
}

.stickyIcon {
    fill: red;
    margin-right: 4px;
    transform: translate3d(0, 1px, 0);
    display: inline-block
}

.hot-post-nav {
    padding: 5px 15px 5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.hot-post-nav-item {
    border: 2px solid var(--jl-main-color);
    color: var(--jl-main-color);
    font-size: 13px;
    padding: 2px 15px;
    border-radius: 6px;
    font-weight: 500;
    background: #fff;
    line-height: 1.5;
    margin-right: 12px;
    margin-bottom: 10px;
    user-select: none;
    cursor: pointer
}

.hot-post-nav-item.active {
    background-color: var(--jl-main-color);
    color: #fff;
    cursor: not-allowed
}

.hot-post-nav-item:not(.active):hover {
    background-color: rgba(67, 112, 245, .1)
}

.class--nav {
    padding: 24px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 4px 4px 12px 0 #f3f5f8;
    font-size: 14px;
    margin-top: 30px;
    line-height: 1.2
}

.class--nav a {
    margin-right: 20px
}

.widget-post-item--withImage {
    list-style: none;
    padding: 0;
    display: flex;
    counter-increment: list;
    padding: 5px 0
}

.widget-post-item--withImage .img {
    flex: 0 0 auto;
    margin-right: 10px;
    position: relative;
    overflow: hidden;
    border-radius: 3px
}

.widget-post-item--withImage .img a {
    display: block
}

.widget-post-item--withImage .img a img {
    border-radius: 3px;
    display: block;
    transition: .5s;
    width: 100px;
    height: 60px;
    object-fit: cover
}

.widget-post-item--withImage .img a:hover img {
    transform: scale(1.05)
}

.widget-post-item--withImage .img::before {
    content: counter(list);
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 12px;
    background-color: #ff5c00;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 0 0 3px 0;
    z-index: 200
}

.widget-post-item--withImage .img__large {
    width: 100%;
    margin-bottom: 10px
}

.widget-post-item--withImage .img__large a img {
    width: 309px;
    height: 169px
}

.widget-post-item--withImage .content {
    flex: 1 1 auto
}

.widget-post-list--withImage {
    counter-reset: list;
    list-style: none;
    padding: 10px 0 0;
    margin: 0
}

.widget-post-list--withImage .content {
    display: flex;
    justify-content: space-between;
    flex-direction: column
}

.widget-post-list--withImage .title {
    line-height: 1.3;
    font-size: 14px;
    font-weight: 700;
    transition: .5s
}

.widget-post-list--withImage .title:hover {
    color: var(--jl-main-color)
}

.widget-post-list--withImage .meta {
    font-size: 12px;
    color: var(--jl-text-gray)
}

.inner {
    padding: 15px
}

.widget-content {
    padding-top: 15px
}

.code-ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.code-ul li {
    margin-bottom: 15px;
    font-size: 16px;
    color: var(--jl-text-light);
    display: flex;
    align-items: center
}

.code-ul li img {
    width: 32px;
    margin-right: 8px;
    background-color: #f2f2f2;
    border-radius: 100%
}

.code-ul li:last-child {
    margin-bottom: 0
}

.code-ul li a {
    margin-left: auto;
    border: 1px solid var(--jl-main-color);
    color: var(--jl-main-color);
    font-size: 12px;
    padding: 3px 10px;
    line-height: 1.2;
    border-radius: 3px
}

.code-ul li a:hover {
    color: #fff;
    background-color: var(--jl-main-color)
}

.widget-title {
    border-bottom: 3px solid var(--jl-border-color-light);
    align-items: center;
    font-size: 18px;
    display: flex;
    line-height: 1
}

.widget-title .tab {
    margin-left: auto;
    font-size: 12px;
    color: var(--jl-text-gray)
}

.widget-title .tabItem {
    cursor: pointer
}

.widget-title .tabItem.is-active {
    color: var(--jl-main-color)
}

.widget-title .btn {
    margin-left: auto;
    font-size: 14px;
    color: var(--jl-text-gray);
    padding-bottom: 2px
}

.widget-title .btn:hover {
    color: var(--jl-main-color)
}

.widget-title span {
    border-bottom: 3px solid var(--jl-main-color);
    padding-bottom: 8px;
    transform: translate3d(0, 3px, 0);
    margin-right: 15px
}

.widget-title span.is-link {
    border-color: rgba(0, 0, 0, 0)
}

.widget-title span.is-link:hover {
    border-color: var(--jl-main-color)
}

.widget-author-list {
    padding-top: 5px
}

.widget-author-list-content {
    flex: 1 1 auto
}

.widget-author-list-item {
    display: flex;
    padding: 15px 0;
    align-items: flex-start;
    border-bottom: 1px dotted var(--jl-border-color)
}

.widget-author-list-item:last-child {
    border-bottom: 0
}

.widget-author-list-item h4 {
    margin: 0;
    line-height: 1;
    font-size: 16px;
    margin-bottom: 6px;
    display: flex;
    align-items: center
}

.widget-author-list-item h4 .button {
    font-weight: normal;
    margin-left: auto
}

.widget-author-list-item h4 .button--follow {
    padding: 4px 10px
}

.widget-author-list-item h4 a {
    color: var(--jl-text-light)
}

.widget-author-list-item h4 a:hover {
    color: var(--jl-main-color)
}

.widget-author-list-item .des {
    margin: 0 0 2px;
    line-height: 1.5;
    font-size: 14px;
    color: var(--jl-text-gray)
}

.widget-author-list-item .meta {
    font-size: 12px;
    color: var(--jl-text-gray-lightest)
}

.widget-author-list-item .image-link {
    flex: 0 0 auto;
    margin-right: 10px;
    width: 44px;
    display: flex;
    height: 44px
}

.widget-author-list-item .avatar {
    border-radius: 100%
}

.widgetQuestion--list {
    padding-top: 0px
}

.widgetQuestion--item {
    font-size: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--jl-border-color);
    list-style: none
}

.widgetQuestion--item:first-child {
    padding-top: 0
}

.widgetQuestion--item .meta {
    color: var(--jl-text-gray);
    line-height: 1
}

.widgetQuestion--item .title {
    line-height: 1.4;
    margin-bottom: 6px
}

.widgetQuestion--item .title:hover {
    color: var(--jl-main-color)
}

.widgetQuestion--item:last-child {
    border-bottom: 0
}

.widget-book-item {
    display: flex;
    padding: 10px 0 0;
    align-items: flex-start
}

.widget-book-item .img {
    margin-right: 10px;
    width: 108px;
    flex: 0 0 auto
}

.widget-book-item .content {
    flex: 1 1 auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column
}

.widget-book-item .content .des {
    font-size: 14px;
    color: var(--jl-text-gray);
    line-height: 1.6
}

.widget-book-item .content .author {
    margin-top: auto;
    font-size: 14px;
    color: var(--jl-text-gray)
}

.widget-book-item .content .t {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4
}

.widget-book-item .content .t:hover {
    color: var(--jl-main-color)
}

.bookmore {
    border: 1px solid var(--jl-border-color);
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 5px
}

.widget-action {
    padding-top: 20px;
    padding-bottom: 10px;
    display: flex;
    justify-content: center
}

.widget-rich a {
    display: flex;
    overflow: hidden;
    margin-bottom: 10px;
    align-items: center;
    border-radius: 4px
}

.widget-rich a img {
    transition: .5s
}

.widget-rich a img:hover {
    transform: scale(1.05)
}

.widget {
    box-shadow: 0 1px 1px 0 var(--jl-border-color-light)
}

.widget-wechat {
    display: flex;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px
}

.widget-wechat .img {
    margin-right: 10px;
    width: 120px;
    line-height: 1.2
}

.widget-wechat .img .des {
    font-size: 12px;
    color: var(--jl-text-gray)
}

.widget-wechat .content {
    font-size: 14px;
    padding-bottom: 5px
}

.widget-wechat .content p {
    margin: 0 0 5px
}

.widget-wechat .content .title {
    font-size: 16px;
    color: var(--jl-main-color);
    margin-bottom: 10px
}

.widget--toc {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--jl-text-gray)
}

.widget--toc li {
    padding: 3px 0;
    padding-left: 14px;
    position: relative
}

.widget--toc li.current:before {
    content: "";
    display: block;
    position: absolute;
    left: -16px;
    top: 50%;
    width: 12px;
    height: 5px;
    background: var(--jl-main-color);
    margin-top: -2px
}

.widget--tocTitle {
    font-size: 16px;
    margin-bottom: 10px
}

.js-sidebar.is-fixed {
    position: fixed;
    bottom: 0;
    width: 335px
}

.widget--question--hero {
    display: flex;
    position: relative;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    height: 196px
}

.widget--question--hero .img {
    transition: .5s
}

.widget--question--hero:hover .img {
    transform: scale(1.05)
}

.widget--question--hero:before {
    background: linear-gradient(269deg, rgba(105, 179, 171, 0.3) 0%, rgba(105, 179, 171, 0.7) 50%, rgb(105, 179, 171) 100%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    position: absolute;
    z-index: 200
}

.widget--question--hero .content {
    color: #fff;
    position: absolute;
    z-index: 300;
    left: 15px;
    right: 15px;
    bottom: 15px
}

.widget--question--hero .content .title {
    font-weight: 700;
    line-height: 1.6
}

.widget--question--hero .content .des {
    font-size: 14px;
    line-height: 1.6;
    padding: 10px 0
}

.widget--question--hero .content .meta {
    display: flex;
    align-items: center;
    font-size: 12px
}

.widget--question--hero .content .meta .avatar-list {
    display: flex;
    align-items: center;
    padding-left: 6px
}

.widget--question--hero .content .meta .avatar-list .avatar {
    border: 1px solid #eee;
    margin-left: -6px;
    border-radius: 100%
}

.widget--question--hero .content .meta .c {
    padding-left: 5px
}

.widget--question--hero .content .meta .btn {
    color: #6cb4a7;
    background-color: #fff;
    font-size: 12px;
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 4px
}

.author--meta .button--follow {
    padding: 8px 14px;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0)
}

.sidebar {
    margin-left: auto
}

.widget {
    border-radius: 4px;
    margin-bottom: 20px
}

.widget-book-slider .supernice {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0 0 10px;
    padding: 0
}

.widget-book-slider .supernice li {
    width: 16px;
    height: 6px;
    cursor: pointer;
    background-color: var(--jl-border-color);
    border-radius: 5px;
    margin: 0 5px
}

.widget-book-slider .supernice li.on {
    background-color: var(--jl-main-color)
}

.site-footer {
    background-color: #222c3c;
    color: #818394
}

.site-footer .copyright {
    background-color: #1d2431;
    font-size: 12px;
    padding: 20px 0
}

.site-footer .copyright .inforight {
    margin-left: auto;
    text-align: right
}

.site-footer .footer-title {
    font-size: 16px;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 700
}

.site-footer ul {
    list-style: none;
    padding: 0
}

.info-section {
    width: 440px;
    text-align: justify
}

.link-section {
    width: 150px;
    padding-right: 20px
}

.partner-section {
    width: 300px
}

.qr-section {
    display: flex
}

.qr-section--item {
    display: flex;
    flex-direction: column
}

.qr-section--item p {
    margin: 0;
    text-align: center
}

.qr-section img {
    width: 120px;
    border: 5px solid #fff;
    border-radius: 5px;
    margin: 10px 10px 5px 10px
}

.blue-pic-ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    padding-right: 40px !important
}

.blue-pic-ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 0 10px
}

.blue-pic-ul li a {
    display: flex;
    align-items: center
}

.footer-sections {
    padding: 50px 0 30px;
    align-items: flex-start;
    font-size: 14px;
    justify-content: space-between
}

.footer-nav ul {
    display: flex;
    align-items: center
}

.footer-nav ul li {
    margin-right: 15px
}

.site--footer {
    background-color: #1d2431;
    color: #91969e
}

.comments-area {
    margin-top: 20px;
    padding: 20px;
    margin-bottom: 20px
}

.comment-textarea,
.textarea--unlogin {
    border: 1px solid var(--jl-border-color);
    height: 100px;
    width: 100%;
    border-radius: 5px;
    resize: none;
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.6
}

.textarea--unlogin {
    margin-bottom: 10px;
    background-color: #fafafa;
    cursor: pointer;
    color: var(--jl-text-gray)
}

.comment-submit {
    background-color: var(--jl-main-color);
    color: #fff;
    border: 0;
    font-size: 12px;
    padding: 6px 22px;
    border-radius: 4px
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 20px 0
}

.children {
    list-style: none;
    margin-left: 58px;
    background-color: #f2f4f6;
    padding: 0 20px 0;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 25px
}

.children .comment-avatar {
    width: 36px
}

.children .comment:last-child .comment-block {
    border-bottom: 0
}

.children .comment-bottom {
    font-size: 12px
}

.children .comment-block {
    border-top: 0;
    border-bottom: 1px solid var(--jl-border-color-light)
}

.comment-author {
    display: flex;
    align-items: center;
    font-size: 12px
}

.comment-author a {
    color: var(--jl-main-color)
}

.post-c-a {
    background-color: var(--jl-main-color);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    padding: 0 6px;
    line-height: 1.5;
    margin: 0 6px
}

.comment-body {
    padding: 15px 0;
    border-bottom: 1px solid var(--jl-border-color)
}

.comment-info {
    margin-bottom: 5px
}

.comment-avatar {
    width: 48px;
    flex: 0 0 auto;
    margin-right: 10px;
    padding-top: 5px
}

.comment-section {
    flex: 1 1 auto
}

.comment-bottom {
    font-size: 12px;
    color: var(--jl-text-gray);
    display: flex;
    align-items: center
}

.comment-bottom .icon {
    margin-left: 5px;
    fill: #777
}

.comment-bottom .comment-reply {
    transition: .5s color
}

.comment-bottom .comment-reply:hover {
    color: var(--jl-main-color)
}

.comment-content {
    color: var(--jl-text-light);
    line-height: 1.6;
    padding-bottom: 5px;
    word-break: break-all
}

.comment-content p:last-child {
    margin: 0
}

.comment-block {
    padding: 20px 0;
    border-top: 1px solid var(--jl-border-color);
    display: flex;
    align-items: flex-start;
    font-size: 14px
}

.comment .avatar {
    border-radius: 100%
}

.no-comment {
    text-align: center;
    padding: 30px 0;
    font-size: 18px;
    color: var(--jl-text-gray)
}

.comment-list-header {
    line-height: 1;
    padding-bottom: 15px
}

.comment-list-header .title {
    font-size: 18px;
    font-weight: 700
}

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

.commentnav .page-numbers {
    border: 1px solid var(--jl-main-color);
    color: var(--jl-main-color);
    padding: 4px 10px;
    border-radius: 4px;
    line-height: 1.4;
    font-size: 14px;
    margin: 0 5px
}

.commentnav .page-numbers.current {
    background-color: var(--jl-main-color);
    color: #fff
}

.user-leve {
    color: var(--jl-main-color)
}

.comment-reply {
    cursor: pointer;
    margin-left: 5px
}

.respond {
    padding-bottom: 10px
}

.comment-list .respond {
    padding-left: 58px
}

.comment-list .children .respond {
    padding-left: 46px
}

#cancel-comment-reply-link {
    color: var(--jl-text-gray);
    font-size: 12px
}

#cancel-comment-reply-link:hover {
    color: var(--jl-main-color)
}

.c-article-comments-report-form {
    position: absolute;
    top: -350px;
    right: -30px;
    z-index: 10;
    width: 270px;
    height: 320px;
    font-size: 14px;
    background-color: #fff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .16);
    padding: 20px 16px
}

.c-article-comments-report-form:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    bottom: -10px;
    right: 30px;
    border-style: solid;
    border-width: 10px;
    border-color: #fff #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    box-shadow: 2px -2px 4px rgba(0, 0, 0, .16)
}

.c-article-comments-report-form .c-article-comments-report-form__content {
    display: flex;
    flex-direction: column
}

.c-article-comments-report-form .c-article-comments-report-form__content label {
    line-height: 50px;
    border-bottom: .5px solid #e7e7e7
}

.c-article-comments-report-form .c-article-comments-report-form__content label input {
    margin-right: 10px
}

.c-article-comments-report-form .c-article-comments-report-form__title {
    margin-bottom: 10px;
    color: #121212
}

.c-article-comments-report-form .c-article-comments-report-form__btn {
    text-align: right;
    margin-top: 10px
}

.c-article-comments-report-form .c-article-comments-report-form__btn button {
    width: 80px;
    height: 32px;
    border-radius: 2px;
    background-color: var(--jl-main-color);
    border: none;
    outline: 0;
    color: #fff
}

.js-report-content {
    margin-left: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative
}

.pm--authorPageHeader {
    padding: 40px 0px;
    box-sizing: border-box
}

.pm--authorPageHeader.is-bookAuthor {
    padding-bottom: 20px
}

.pm--authorPageHeader .name {
    font-size: 26px;
    display: flex;
    align-items: center
}

.pm--authorPageHeader .name .item {
    margin-left: 5px
}

.pm--authorPageHeader .description {
    color: var(--jl-text-gray-lightest)
}

.pm--authorPageHeader .avatar {
    width: 110px;
    height: 110px;
    border-radius: 100%;
    object-fit: cover;
    margin-right: 20px;
    flex: 0 0 auto
}

.pm--authorPageHeader .author-page-meta {
    margin-left: auto
}

.pm--authorPageHeader__content {
    flex: 1 1 auto
}

.pm--authorPageHeader__content .button--follow {
    font-size: 12px;
    padding: 1px 14px;
    margin-left: 5px
}

.user--noData {
    text-align: center;
    padding: 150px 0 150px
}

.author--header {
    height: 220px;
    background-image: url("//image.woshipm.com/kan/img/banner.png");
    background-size: cover
}

.author--meta {
    margin-top: -60px
}

.author--meta .avatar {
    border-radius: 100%;
    border: 3px solid #fff
}

.author--meta .name {
    font-size: 26px;
    display: flex;
    align-items: center
}

.author--meta .name img,
.author--meta .name svg {
    margin-left: 5px
}

.author--meta .description {
    color: var(--jl-text-gray-lightest)
}

.author--meta .action {
    position: absolute;
    right: 0;
    top: 150px
}

.author-page-meta {
    padding-top: 15px;
    padding-bottom: 20px;
    display: flex
}

.author-page-meta span {
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-right: 12px;
    font-size: 12px;
    color: var(--jl-text-gray-lightest);
    position: relative;
    padding-left: 12px
}

.author-page-meta span:before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 1px;
    background-color: var(--jl-border-color)
}

.author-page-meta span:first-child:before {
    display: none
}

.author-page-meta span i {
    font-style: normal;
    color: var(--jl-main-color);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2
}

.author--nav {
    border-bottom: 1px solid var(--jl-border-color)
}

.author--navList {
    display: flex;
    color: var(--jl-text-gray);
    margin-bottom: -1px
}

.author--nav span {
    padding-bottom: 5px;
    margin-right: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    font-size: 14px;
    cursor: pointer
}

.author--nav span.current {
    color: var(--jl-main-color);
    border-color: var(--jl-main-color);
    cursor: not-allowed
}

.post--card {
    background-color: var(--jl-background-white);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--jl-border-color-light);
    border-radius: 2px;
    overflow: hidden
}

.u-backgroundColorWhite .post--card {
    background-color: #f4f7fd
}

.post--card__placehold {
    visibility: hidden
}

.post--card__img {
    position: relative
}

.post--card__img .post-cat {
    position: absolute;
    background-color: var(--jl-text-gray);
    color: #fff;
    border-radius: 3px;
    padding: 1px 10px;
    top: 10px;
    left: 10px;
    font-size: 12px;
    z-index: 200
}

.post--card__img a {
    display: flex;
    overflow: hidden
}

.post--card__img a img {
    transition: .5s
}

.post--card__img a img:hover {
    transform: scale(1.1)
}

.post--card .content {
    padding: 10px 15px 15px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column
}

.post--card .content .stream-list-meta {
    margin-top: auto
}

.post--card__list {
    padding: 25px 0 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px
}

.post--card__title {
    font-size: 16px;
    margin: 0 0 8px;
    line-height: 1.4;
    transition: .5s
}

.post--card__title:hover {
    color: var(--jl-main-color)
}

.authorActivity--list {
    padding: 25px 0 20px
}

.authorActivity--list .view-comment {
    border-top: 1px solid var(--jl-border-color);
    margin-top: 15px;
    padding-top: 15px;
    font-size: 12px;
    color: var(--jl-text-gray-lightest);
    cursor: pointer;
    display: flex;
    align-items: center
}

.authorActivity--list .view-comment .avatar {
    width: 24px;
    margin-right: 12px;
    border-radius: 100%
}

.authorActivity--list .view-comment .content {
    background-color: #f8f8f8;
    padding: 5px 15px;
    flex: 1 1 auto;
    border-radius: 5px
}

.authorActivity--list .action {
    font-size: 14px
}

.authorActivity--list .action .open {
    color: var(--jl-main-color);
    cursor: pointer
}

.authorActivity--list .link-s {
    color: var(--jl-main-color);
    font-size: 14px
}

.authorActivity--list .link-s .fa {
    margin-right: 6px
}

.authorActivity--list .qrcode-des {
    text-align: center;
    padding-top: 5px
}

.authorActivity--list .qrcode-des .fa {
    color: green;
    margin-right: 8px
}

.authorActivity--list .card--tags {
    display: flex;
    padding-top: 10px
}

.authorActivity--list .card--tag {
    border: 1px solid var(--jl-main-color);
    color: var(--jl-main-color);
    font-size: 12px;
    border-radius: 999rem;
    padding: 1px 12px
}

.authorActivity--list .card--status {
    padding: 20px;
    margin-bottom: 15px;
    border: 0;
    background-color: #f9f9f9;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
}

.authorActivity--list .card--status__avatar {
    margin-right: 10px;
    display: flex
}

.authorActivity--list .card--status__header {
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, .5);
    font-size: 12px;
    position: relative
}

.authorActivity--list .card--status__header .avatar {
    border-radius: 999rem;
    width: 36px;
    height: 36px
}

.authorActivity--list .card--status__header .content {
    width: 100%
}

.authorActivity--list .card--status__header .content .dark {
    color: var(--jl-text-color);
    width: 80%;
    display: flex;
    align-items: center
}

.authorActivity--list .card--status__header .content .button {
    color: var(--jl-main-color);
    border: 1px solid var(--jl-main-color);
    background-color: var(--jl-background-white);
    position: absolute;
    right: 0;
    top: 5px;
    padding: 4px 12px;
    font-size: 14px;
    border-radius: 4px
}

.authorActivity--list .card--status__header .content .button.active {
    background-color: var(--jl-main-color);
    color: #fff
}

.authorActivity--list .card--status__content {
    font-size: 14px;
    white-space: pre-wrap;
    padding-top: 10px
}

.authorActivity--list .card--status .footer--right {
    display: flex;
    margin-left: auto;
    align-items: center;
    font-size: 12px
}

.authorActivity--list .card--status__footer {
    font-size: 14px;
    color: rgba(0, 0, 0, .5);
    display: flex;
    padding-top: 10px
}

.authorActivity--list .card--status__footer .action {
    cursor: pointer
}

.authorActivity--list .card--status__footer .action.cute {
    color: var(--jl-main-color)
}

.authorActivity--list .card--status__footer a:hover {
    color: var(--jl-main-color)
}

@media(max-width: 600px) {
    .authorActivity--list .card--status {
        padding: 15px;
        margin-bottom: 15px
    }
}

.authorActivity--list .card--statusImage--list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 400px;
    padding-top: 10px
}

.authorActivity--list .card--statusImage--thumb {
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 5px
}

.authorActivity--list .link-box {
    width: 100%;
    padding-top: 10px
}

.authorActivity--list .link-box-card {
    display: flex;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid var(--jl-border-color);
    border-radius: 5px
}

.authorActivity--list .link-box-card:hover {
    border-color: var(--jl-main-color)
}

.authorActivity--list .link-box-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column
}

.authorActivity--list .link-box-image {
    width: 64px;
    height: 64px;
    background-size: cover;
    flex: 0 0 auto
}

.authorActivity--list .link-box-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3
}

.authorActivity--list .link-box-link {
    font-size: 12px;
    margin-top: auto;
    color: rgba(0, 0, 0, .5)
}

.authorActivity--list .ts-main .tm-font {
    font-weight: 400;
    font-size: 15px;
    color: rgba(0, 0, 0, .88);
    text-align: left;
    line-height: 23px;
    margin-top: 10px;
    text-align: justify
}

.authorActivity--list .ts-main .tm-img {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 10px 0 6px 0
}

.authorActivity--list .ts-main .tm-img .long {
    width: 64px;
    height: 164px;
    border-radius: 4px
}

.authorActivity--list .ts-main .tm-img .short {
    width: 206px;
    height: 154px;
    border-radius: 4px
}

.authorActivity--list .ts-main .tm-img .lot {
    width: 82px;
    height: 82px;
    border-radius: 4px;
    margin: 0px 6px 6px 0
}

.authorActivity--list .ts-main .tm-position {
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, .4);
    margin-top: 5px
}

.authorActivity--list .ts-main .tm-position img {
    width: 12px;
    height: 12px;
    margin-right: 2px;
    vertical-align: middle;
    margin-top: -2px
}

.authorActivity--list .ts-main .tm-position span {
    margin-right: 10px
}

.authorActivity--list .ts-main .tm-quan {
    width: fit-content;
    padding: 4px 8px;
    background: #f4f7fc;
    border-radius: 4px;
    margin-top: 8px
}

.authorActivity--list .ts-main .tm-quan img {
    width: 18px;
    height: 18px;
    border-radius: 50%
}

.authorActivity--list .ts-main .tm-quan .s1 {
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, .88)
}

.authorActivity--list .ts-main .tm-quan .s2 {
    color: rgba(0, 0, 0, .12);
    padding: 0 6px
}

.authorActivity--list .ts-main .tm-article .ta-title {
    font-weight: 400;
    font-size: 13px;
    color: rgba(0, 0, 0, .4);
    text-align: left;
    line-height: 19px;
    margin: 0
}

.authorActivity--list .ts-main .tm-article .ta-txt {
    font-weight: 400;
    font-size: 15px;
    color: rgba(0, 0, 0, .88);
    text-align: left;
    line-height: 23px;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.authorActivity--list .ts-main .tm-article .ta-link {
    width: 100%;
    height: 62px;
    background: #f4f7fc;
    border-radius: 4px;
    padding: 7px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 10px 0 0
}

.authorActivity--list .ts-main .tm-article .ta-link .tl {
    width: 41px;
    height: 41px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center
}

.authorActivity--list .ts-main .tm-article .ta-link .tl img {
    width: 41px;
    height: 41px;
    object-fit: cover
}

.authorActivity--list .ts-main .tm-article .ta-link .tl.red-bag {
    background: rgba(232, 50, 69, .15)
}

.authorActivity--list .ts-main .tm-article .ta-link .tl.red-bag img {
    width: 16px;
    height: 18px
}

.authorActivity--list .ts-main .tm-article .ta-link .tl.quest {
    background: rgba(39, 149, 227, .15)
}

.authorActivity--list .ts-main .tm-article .ta-link .tl.quest img {
    width: 21px;
    height: 19px
}

.authorActivity--list .ts-main .tm-article .ta-link p {
    width: 90%;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, .64);
    margin-left: 10px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.all-world-only-flag {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.all-world-only-flag .awo-flag {
    font-size: 12px;
    height: 18px;
    font-weight: 400;
    line-height: 18px;
    padding: 0 6px 0 22px;
    border-radius: 4px;
    position: relative;
    margin-left: 15px
}

.all-world-only-flag .awo-flag::before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -2px;
    left: 0;
    z-index: 99
}

.all-world-only-flag .awo-flag.lightblue {
    color: #19abe3;
    background: rgba(154, 227, 255, .2)
}

.all-world-only-flag .awo-flag.lightblue::before {
    background: url(https://static.woshipm.com/2021011315284069973label_official@2x.png) no-repeat;
    background-size: 100% 100%
}

.all-world-only-flag .awo-flag.blue {
    color: #3489fe;
    background: rgba(147, 192, 255, .2)
}

.all-world-only-flag .awo-flag.blue:before {
    background: url(https://static.woshipm.com/2021011315300420054PC_label_Guest@2x.png) no-repeat;
    background-size: 100% 100%
}

.all-world-only-flag .awo-flag.orange {
    color: #f29100;
    background: rgba(255, 210, 141, .2)
}

.all-world-only-flag .awo-flag.orange::before {
    background: url(https://static.woshipm.com/2021011315302364301PC-label_Columnist@2x.png) no-repeat;
    background-size: 100% 100%
}

.all-world-only-flag .awo-flag.yellow {
    color: #d6a400;
    background: rgba(255, 210, 141, .2)
}

.all-world-only-flag .awo-flag.yellow::before {
    background: url(https://static.woshipm.com/2021011315301466598PC_label_writer@2x.png) no-repeat;
    background-size: 100% 100%
}

.all-world-only-flag .awo-flag.green {
    color: #19c07b;
    background: rgba(133, 237, 195, .2)
}

.all-world-only-flag .awo-flag.green:before {
    background: url(https://static.woshipm.com/2021011315350596626PC_label_teacher@2x.png) no-repeat;
    background-size: 100% 100%
}

.all-world-only-flag .awo-flag.king:before {
    background: url(https://static.woshipm.com/2021011315295275769PC_label_Answer_list_thinker@2x.png) no-repeat;
    background-size: 100% 100%
}

.all-world-only-flag .awo-flag.pen::before {
    background: url(https://static.woshipm.com/2021011315285142208label_Welcome%20writer@2x.png) no-repeat;
    background-size: 100% 100%
}

.all-world-only-flag .awo-flag.brown {
    color: #b39469;
    background: rgba(255, 210, 141, .2)
}

.all-world-only-flag .awo-flag.brown:before {
    background: url(https://static.woshipm.com/2021011315345442061svip@2x.png) no-repeat;
    background-size: 100% 100%
}

.all-world-only-flag .awo-flag.pink {
    color: #f74c5a;
    background: rgba(253, 118, 129, .2)
}

.all-world-only-flag .awo-flag.pink::before {
    background: url(https://static.woshipm.com/2021011315351544407vip@2x.png) no-repeat;
    background-size: 100% 100%
}

.all-world-only-flag .awo-flag.font-white {
    color: #fff !important
}

.pm-answerCard {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(0, 0, 0, .64)
}

.pm-answerCard--icon {
    width: 82px;
    height: 82px;
    background: rgba(39, 149, 227, .15);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: 20px
}

.pm-answerCard--icon img {
    width: 48px
}

.pm-answerCard--content {
    flex: 1 1 auto;
    min-width: 0
}

.pm-answerCard--content--text {
    font-weight: 400;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pm-answerCard--title {
    font-weight: 500;
    font-size: 17px;
    color: #333
}

.authorBook {
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    background-color: #f9f9f9;
    padding: 12px;
    display: flex;
    width: 500px
}

.authorBook--headline {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px
}

.authorBookArea {
    padding: 15px 0 25px
}

.pm--authorPageHeader+.authorBookArea {
    padding-top: 0
}

.authorBook--cover {
    width: 60px;
    height: 88px;
    object-fit: cover;
    margin-right: 10px;
    flex: 0 0 auto;
    border-radius: 3px
}

.authorBook--content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto
}

.authorBook--desc {
    font-size: 12px;
    color: rgba(0, 0, 0, .6)
}

.authorBook--title {
    font-weight: bold
}

.authorBook--meta {
    margin-top: auto;
    font-size: 12px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: rgba(0, 0, 0, .6)
}

.authorBook--link {
    margin-left: auto;
    display: flex;
    align-items: center
}

.authorBook--link svg {
    width: 14px;
    height: 14px
}

.authorBook--link svg:hover path {
    stroke: var(--jl-main-color)
}

.topic--banner {
    background-image: url(https://image.woshipm.com/kan/img/topics-banner.jpg);
    background-size: cover;
    text-align: center;
    color: #fff;
    padding: 50px
}

.hero-title {
    margin: 0
}

.hero-description {
    font-size: 16px
}

.pmFeature--container {
    padding-top: 10px
}

.pmFeature--list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 300px
}

.pmFeature--item {
    box-sizing: border-box;
    width: 49%;
    margin-bottom: 25px;
    background-color: var(--jl-background-white);
    border-radius: 6px;
    transition: .5s;
    padding: 20px;
    display: flex;
    align-items: flex-start
}

.pmFeature--item h4 {
    font-size: 12px;
    line-height: 24px;
    font-weight: 400;
    color: var(--jl-text-gray);
    overflow: hidden;
    margin: 2px 0 10px
}

.pmFeature--item__small {
    padding: 18px;
    margin-bottom: 15px
}

.pmFeature--item__small h2 {
    margin-bottom: 3px !important;
    font-size: 16px !important;
    font-weight: 400 !important
}

.pmFeature--item__small h4 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.2
}

.pmFeature--item__small .pmFeature--des {
    line-height: 1.5;
    margin-bottom: 8px;
    font-size: 13px
}

.pmFeature--post {
    padding-top: 8px
}

.pmFeature--post a:hover {
    color: var(--jl-main-color)
}

.pmFeature--authorInfo {
    display: flex;
    align-items: center
}

.pmFeature--authorInfo .button--follow {
    margin-left: auto;
    user-select: none;
    padding: 3px 12px
}

.pmFeature--image {
    width: 180px;
    margin-right: 20px;
    display: flex;
    flex: 0 0 auto
}

.pmFeature--image__small {
    width: 80px;
    margin-right: 20px;
    padding-top: 5px
}

.pmFeature--image__small a {
    display: flex;
    align-items: center
}

.pmFeature--image__small .u-relative .newusertagIcon {
    right: -2px
}

.pmFeature--image__small .cover {
    width: 80px;
    border-radius: 4px;
    height: 80px;
    object-fit: cover
}

.pmFeature--image__small .cover.avatar {
    border-radius: 100%;
    height: 64px;
    width: 64px
}

.pmFeature--image__avatar {
    width: 64px
}

.pmFeature--des {
    color: var(--jl-text-gray-lightest);
    font-size: 14px;
    line-height: 1.6
}

.pmFeature--content {
    flex: 1 1 auto
}

.pmFeature--content h2 {
    font-size: 18px;
    line-height: 1.4;
    margin-top: 0;
    overflow: hidden;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--jl-text-light)
}

.pmFeature--content h2:hover {
    color: var(--jl-main-color)
}

.pmFeature--content ul {
    list-style: none;
    padding: 10px 12px;
    background: var(--jl-background-gray-light);
    border-radius: 5px;
    margin: 5px 0 0
}

.pmFeature--content ul li {
    font-size: 14px;
    margin: 0 0 3px;
    list-style: none
}

.pmFeature--content ul li:last-child {
    margin-bottom: 0
}

.pmFeature--content ul li a {
    color: var(--jl-text-light);
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    transition: .5s
}

.pmFeature--content ul li a:hover {
    color: var(--jl-main-color);
    transform: translate3d(5px, 0, 0)
}

.js-postlist {
    padding-top: 10px
}

.overlay--new {
    display: flex;
    justify-content: center;
    align-items: center
}

.pm-tools-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 40px;
    padding-bottom: 50px
}

.pm-tools-item {
    width: 300px;
    margin-bottom: 18px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05)
}

.pm-tools-item .des {
    margin: 0;
    padding: 15px;
    text-align: justify;
    font-size: 14px;
    color: var(--jl-text-gray)
}

.pm-tools-header {
    padding: 16px
}

.pm-tools-header h2 {
    margin: 0;
    line-height: 1.2;
    font-size: 16px
}

.pm-tool-img {
    display: flex
}

.tool-btn {
    padding: 15px;
    display: none
}

.recomendUser-banner {
    margin-bottom: 30px
}

.recomendUser-banner .hero--standalone:before {
    background-image: url(https://image.woshipm.com/wp-files/2022/11/fYKEfTEHxS9yuTGlPjz7.jpg!/both/1600x600)
}

.cooperation-banner .hero--standalone:before {
    background-image: url(https://image.woshipm.com/wp-files/2023/02/BsHGsVTcRXgrjImDlMNf.jpg);
    filter: blur(0px)
}

.cooperation-banner .hero--search {
    background-color: rgba(255, 255, 255, .2)
}

.es-banner .hero--standalone {
    color: rgba(0, 0, 0, .9)
}

.es-banner .hero--standalone:before {
    background-image: url(https://image.woshipm.com/2023/04/13/044a4c92-d9c3-11ed-a45c-00163e0b5ff3.png);
    filter: blur(0px);
    background-size: auto 1000px;
    background-position: center bottom;
    background-repeat: no-repeat
}

.es-banner .hero--standalone::after {
    display: none
}

.es-banner .hero--search {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .05);
    padding: 10px;
    color: var(--jl-text-gray)
}

.es-banner .hero--search::placeholder {
    color: var(--jl-text-gray)
}

.recomendBook-banner {
    margin-bottom: 20px
}

.recomendBook-banner .hero--standalone:before {
    background-image: url(https://image.woshipm.com/wp-files/2022/12/wlv76cVcDgBrtHeAWmKN.jpeg)
}

.hero--standalone {
    padding: 75px 0;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden
}

.hero--standalone::before {
    content: "";
    position: absolute;
    top: -50px;
    left: -50px;
    bottom: -50px;
    right: -50px;
    background-image: url("//image.woshipm.com/build/img/gongjubg.jpeg!/both/1600x600");
    background-size: cover;
    filter: blur(10px)
}

.hero--standalone::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3)
}

.hero--standalone .hero-title {
    font-size: 24px;
    margin-bottom: 5px;
    position: relative;
    z-index: 1
}

.hero--standalone .hero-description {
    position: relative;
    z-index: 1
}

.jl-book-title--hero {
    padding: 20px 0 0px;
    margin: 0
}

.y-textAlignCenter {
    text-align: center
}

.jl-book-header {
    text-align: center;
    padding: 15px 0
}

.jl-book--list {
    padding: 20px;
    display: flex;
    flex-wrap: wrap
}

.jl-book-item {
    width: 110px;
    margin: 20px
}

.jl-book-item h3 {
    font-size: 14px;
    margin: 0;
    font-weight: normal;
    line-height: 1.5
}

.jl-book-item h3::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: var(--jl-main-color);
    border-radius: 100%;
    margin-right: 5px;
    transform: translate3d(0, -3px, 0)
}

.userList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 0 20px
}

.userItem {
    width: 250px;
    margin-bottom: 20px;
    border: 1px solid var(--jl-border-color);
    padding: 20px;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.userItem .u-relative .newusertagIcon {
    position: absolute;
    bottom: 7px;
    right: -4px
}

.userItem .avatar {
    border-radius: 100%;
    width: 64px;
    height: 64px;
    object-fit: cover
}

.userItem .name {
    font-size: 18px
}

.userItem .des {
    color: var(--jl-text-gray);
    font-size: 14px;
    margin: 8px 0 12px
}

.userItem .action {
    margin-top: auto
}

.userItem .meta {
    margin: 10px 0;
    position: relative
}

.userItem .meta span {
    position: relative;
    background-color: #fff;
    padding: 0 10px;
    z-index: 200
}

.userItem .meta::after {
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    background-color: var(--jl-border-color);
    top: 14px;
    content: ""
}

.recent-update {
    text-align: left
}

.recent-update a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.user-left {
    width: 200px;
    background-color: #fff;
    margin-right: 30px;
    flex: 0 0 auto
}

.user-right {
    flex: 1 1 auto;
    background-color: #fff;
    height: 100%;
    padding: 5px 20px 20px 20px;
    min-height: 503px
}

.follow-nav {
    border-bottom: 1px solid var(--jl-border-color);
    padding-bottom: 10px
}

.user-wrap {
    display: flex;
    align-items: flex-start;
    margin-top: 30px;
    margin-bottom: 30px
}

.tag-list-empety {
    padding: 50px 0
}

.user-menu {
    margin: 0;
    padding: 20px 20px
}

.user-menu li {
    padding: 10px 0
}

.user-menu li .fa {
    margin-right: 6px;
    width: 20px
}

.user-menu li:hover {
    color: var(--jl-main-color)
}

.user-bookmark {
    list-style: none;
    padding: 0
}

.bookmark-list-item {
    font-size: 14px;
    border-bottom: 1px solid var(--jl-border-color);
    padding: 10px 0;
    color: var(--jl-text-gray)
}

.bookmark-list-item:last-child {
    border-bottom: 0
}

.widget--fixed {
    width: 360px;
    box-sizing: border-box
}

.widget--fixed.is-active {
    position: fixed;
    top: 90px
}

.yoonaOnline--widgetBtn {
    display: block;
    background-color: var(--jl-main-color);
    color: #fff;
    border-radius: 5px;
    text-align: center;
    padding: 6px;
    font-size: 14px
}

.yoonaOnline--widgetTitle {
    font-size: 20px;
    color: var(--jl-text-light);
    font-weight: 200;
    margin: 0
}

.yoonaOnline--buttons {
    display: flex;
    align-items: center
}

.yoonaOnline--description {
    font-size: 14px;
    color: #f99b01;
    margin-bottom: 10px;
    margin-top: -10px
}

.yoonaOnline--linkItem {
    width: 140px;
    background-color: var(--jl-main-color);
    border: 1px solid var(--jl-main-color);
    color: #fff;
    text-align: center;
    padding: 5px 15px;
    font-size: 14px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.8;
    box-sizing: border-box;
    margin-right: 15px
}

.yoonaOnline--linkItem.chat {
    background-color: #fff;
    color: var(--jl-main-color)
}

.yoonaOnline--linkItem.chat img {
    width: 22px;
    margin-right: 6px
}

.yoonaOnline--pick {
    display: flex;
    padding: 10px 150px 50px
}

.yoonaOnline--pickDate {
    width: 280px;
    padding: 20px 20px;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 5px;
    box-shadow: 0px 5px 10px 0 rgba(46, 61, 73, .05)
}

.yoonaOnline--pickDatePrefix {
    display: flex;
    align-items: center;
    color: var(--jl-main-color);
    padding-bottom: 20px;
    font-weight: 500
}

.yoonaOnline--pickDatePrefix svg {
    margin-right: 10px
}

.yoonaOnline--pickDateItem {
    border: 1px solid #343547;
    padding: 5px 10px;
    font-size: 14px;
    color: #343547;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 15px;
    cursor: pointer
}

.yoonaOnline--pickDateItem.is-active {
    border-color: var(--jl-main-color);
    color: var(--jl-main-color)
}

.yoonaOnline--pickDateItem.disabled {
    cursor: not-allowed;
    background-color: #fafafa;
    color: #aaa;
    border-color: #aaa
}

.yoonaOnline--banner {
    height: 300px;
    background-size: cover;
    background-position: center
}

.yoonaOnline--tips {
    display: flex;
    padding-bottom: 40px;
    padding-top: 30px
}

.yoonaOnline--tipsItem {
    display: flex;
    margin-right: 16px;
    align-items: center;
    font-size: 14px;
    color: var(--jl-text-light)
}

.yoonaOnline--tipsItem svg {
    fill: var(--jl-main-color);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .1);
    margin-right: 6px;
    border-radius: 999rem;
    width: 16px;
    height: 16px
}

.yoonaOnline--price {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 10px;
    color: #f99b01
}

.yoonaOnline--price .prefix {
    font-size: 16px
}

.yoonaOnline--headerContent {
    padding-left: 80px
}

.yoonaOnline--headerContent h2 {
    font-size: 28px;
    font-weight: 300;
    color: var(--jl-main-color);
    padding: 20px 0 0
}

.yoonaOnline--headerList {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0
}

.yoonaOnline--headerItem {
    border-left: 2px solid #dbe2e8;
    width: 280px;
    padding: 0 25px
}

.yoonaOnline--headerItem .prefix {
    color: #7d97ad;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    align-items: center
}

.yoonaOnline--headerItem .prefix svg {
    margin-right: 4px
}

.yoonaOnline--headerItem .content {
    color: #2e3d49;
    font-weight: 500;
    font-size: 18px
}

.yoonaOnline--headerItem .des {
    color: #525c65;
    font-size: 14px
}

.main-left {
    width: 50%;
    height: 100%;
    float: left;
    border-right: 1px solid #dbe2e8;
    text-align: left;
    position: relative
}

.time_open {
    padding: 6px;
    width: 300px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 20px;
    color: #343547;
    border: 1px solid #343547
}

.time_open.is-active {
    color: var(--jl-main-color);
    border-color: var(--jl-main-color)
}

.ptip {
    font-size: 14px;
    color: var(--jl-text-gray-lightest)
}

.apply-main {
    width: 700px;
    margin: 30px auto;
    display: flex
}

.main-right {
    padding-left: 40px
}

.main-right .price span {
    color: #ff8106;
    font-size: 24px
}

.main-right .remain {
    padding: 10px 0 20px;
    color: var(--jl-text-gray)
}

.cd-button {
    width: 235px;
    display: block;
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 48px;
    background-color: var(--jl-main-color);
    border-radius: 3px;
    margin-bottom: 20px
}

.y-marginTop40 {
    margin-top: 40px
}

.yoonaMenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 150px
}

.yoonaMenuItem {
    border: 1px solid var(--jl-border-color-light);
    font-size: 20px;
    font-weight: 300;
    width: 300px;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    margin-bottom: 30px;
    background-color: #fff;
    box-shadow: 0 3px 15px rgba(0, 0, 0, .02)
}

.yoonaMenuItem:not(.disabled):hover {
    color: var(--jl-main-color)
}

.yoonaMenuItem.disabled {
    background-color: #dedede;
    cursor: not-allowed
}

.price--original {
    color: var(--jl-text-gray-lightest);
    text-decoration: line-through;
    font-size: 16px;
    margin-left: 10px
}

.overlay--content__contact {
    overflow: unset !important
}

.overlay--onlineContent {
    padding: 20px 0 10px;
    width: 360px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.overlay--onlineItem {
    text-align: center;
    position: relative;
    cursor: pointer
}

.overlay--onlineItem .text {
    color: var(--jl-main-color)
}

.overlay--onlineItem:hover .dropdown {
    display: block
}

.overlay--onlineItem .dropdown {
    padding: 5px;
    position: absolute;
    line-height: 1;
    top: 50px;
    background-color: #fff;
    display: none;
    width: 140px;
    border: 1px solid var(--jl-border-color);
    border-radius: 4px;
    font-size: 14px;
    left: -37px
}

.overlay--onlineItem .dropdown.phone {
    color: var(--jl-text-gray);
    padding-top: 20px;
    padding-bottom: 20px
}

.overlay--onlineItem .dropdown:before {
    content: "";
    border: 10px solid;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #eee rgba(0, 0, 0, 0);
    position: absolute;
    top: -20px;
    left: 60px
}

.overlay--onlineItem .dropdown:after {
    content: "";
    border: 10px solid;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff rgba(0, 0, 0, 0);
    position: absolute;
    top: -19px;
    left: 60px
}

.yoonaEvent--contact {
    position: relative;
    cursor: pointer;
    display: flex;
    background-color: #f2f4f6;
    border-radius: 5px;
    padding-top: 5px;
    overflow: hidden;
    box-shadow: 0 5px 10px var(--jl-border-color-light);
    margin-bottom: 20px
}

.yoonaEvent--contact:last-child {
    margin-bottom: 0
}

.yoonaEvent--contactImg {
    width: 130px;
    height: 130px
}

.yoonaEvent--contactInfo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 30px 15px 25px 0;
    align-items: flex-start
}

.yoonaEvent--contactInfo .title {
    font-size: 18px;
    color: var(--jl-text-gray);
    margin-bottom: auto;
    line-height: 1.2
}

.yoonaEvent--contactInfo .btn {
    background: linear-gradient(90deg, #f3091a, #ff8063);
    box-shadow: 0 5px 10px rgba(255, 79, 58, .3);
    color: #fff;
    padding: 6px 22px;
    border-radius: 999rem;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 600
}

.yoonaEvent--banner {
    display: flex;
    height: 300px;
    background-size: cover;
    background-position: 50%
}

.yoonaEvent--userTitle {
    font-weight: 300;
    font-size: 18px
}

.yoonaEvent--userBox {
    border: 1px solid var(--jl-border-color);
    box-shadow: 0 2px 5px var(--jl-border-color-light);
    border-radius: 5px;
    padding: 10px
}

.yoonaEvent--userList {
    display: flex;
    justify-content: center
}

.yoonaEvent--userItem {
    text-align: center;
    font-size: 14px;
    color: var(--jl-text-gray);
    padding: 10px 15px 5px;
    line-height: 1.8
}

.yoonaEvent--userItem .avatar {
    border-radius: 999rem;
    box-shadow: 0 2px 5px var(--jl-border-color-light)
}

.yoonaEvent--nav {
    height: 60px;
    line-height: 60px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 2px 7px -3px rgba(144, 144, 144, .65)
}

.yoonaEvent--navButtons {
    margin-left: auto;
    display: flex;
    align-items: center
}

.yoonaEvent--navList {
    display: flex;
    align-items: center
}

.yoonaEvent--navList .apply--button {
    margin-left: 20px;
    background: linear-gradient(90deg, #ff9000, #ff795a);
    box-shadow: 0 0 10px rgba(246, 191, 90, .34);
    color: #fff;
    border-radius: 999rem;
    padding: 6px 18px;
    line-height: 1.6;
    letter-spacing: .5px;
    font-size: 12px;
    font-weight: 600
}

.yoonaEvent--navList .apply--button:last-child {
    background: linear-gradient(90deg, #f3091a, #ff795a);
    box-shadow: 0 0 10px rgba(255, 0, 0, .22)
}

.yoonaEvent--navList .apply--button.disabled {
    background: #aaa !important;
    box-shadow: none
}

.yoonaEvent--nav .e_title {
    margin-right: 30px;
    font-weight: 500;
    line-height: 58px;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    cursor: pointer
}

.yoonaEvent--nav .e_title.is-active {
    color: #ff9000;
    border-color: #ff9000
}

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

.v-flex img {
    margin-left: 4px;
    cursor: pointer
}

.v-hasNote {
    position: relative
}

.v-hasNote:hover .v-note {
    display: block
}

.v-note {
    display: none;
    border: 1px solid #ff8932;
    border-radius: 5px;
    position: absolute;
    padding: 5px;
    background-color: #fff;
    width: 200px;
    font-size: 12px;
    line-height: 1.5;
    top: 24px;
    left: -10px;
    z-index: 2
}

.v-note:before {
    border: 6px solid;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ff8932;
    content: "";
    position: absolute;
    top: -12px;
    left: 23px
}

.v-note:after {
    border: 6px solid;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;
    content: "";
    position: absolute;
    top: -11px;
    left: 23px
}

.v-eventButton {
    display: inline-block;
    border-radius: 999rem;
    border: 1px solid #000;
    padding: 5px 15px;
    line-height: 1.4;
    font-size: 12px;
    margin-right: 15px
}

.v-eventButton:hover {
    background-color: #000;
    color: #fff
}

.chat--button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 12px;
    color: #f99b01
}

.chat--button img {
    width: 20px;
    margin-bottom: 3px
}

.v-table {
    display: flex;
    align-items: center
}

.v-tableItem {
    width: 25%;
    padding: 15px 0px;
    font-size: 14px;
    line-height: 1.2
}

.v-tableItem:first-child {
    padding-left: 30px
}

.v-tableItem:nth-child(2) {
    width: 25%
}

.v-tableItem:nth-child(3) {
    width: 35%
}

.v-tableItem:nth-child(4) {
    width: 15%
}

.tour_event {
    display: flex;
    font-size: 14px
}

.tour_event ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.tour_event li {
    margin-left: 36px;
    position: relative
}

.tour_event li:before {
    content: "";
    width: 20px;
    border-top: 1px dashed #aaaeb3;
    position: absolute;
    left: -29px;
    top: 12px
}

.tour_event li:first-child {
    margin-left: 0
}

.tour_event li:first-child:before {
    width: 0
}

.tour_event li p {
    color: var(--jl-text-gray);
    margin: 0;
    line-height: 1.8
}

.tour_event a {
    display: inline-block;
    border-radius: 1px;
    line-height: 24px;
    background: #aaaeb3;
    color: #fff;
    font-size: 12px;
    width: 80px;
    text-align: center;
    transition: all .2s linear
}

.tour_event .select a {
    background: #f37
}

.v-eventMetaCard {
    display: flex
}

.v-eventMetaCard--action {
    align-items: center;
    display: flex;
    padding-top: 20px
}

.v-eventMetaCard--actionButtons {
    display: flex;
    align-items: center;
    margin-left: auto
}

.v-eventMetaCard--actionButtons .apply--button {
    background: linear-gradient(90deg, #ff9000, #ff795a);
    box-shadow: 0 0 10px rgba(246, 191, 90, .34);
    color: #fff;
    padding: 4px 18px;
    margin-left: 20px;
    line-height: 1.8;
    border-radius: 999rem;
    letter-spacing: .5px;
    font-size: 12px;
    font-weight: 600;
    display: flex
}

.v-eventMetaCard--actionButtons .apply--button:last-child {
    background: linear-gradient(90deg, #f3091a, #ff795a);
    box-shadow: 0 0 10px rgba(255, 0, 0, .22)
}

.v-eventMetaCard--actionButtons .apply--button.disabled {
    background: #aaa;
    box-shadow: none
}

.v-eventMetaCard--actionStream {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--jl-text-gray)
}

.v-eventMetaCard--actionStream img {
    margin-right: 4px;
    transform: translateY(-1px)
}

.v-eventMetaCard--status {
    display: flex;
    align-items: center;
    color: #03b349
}

.v-eventMetaCard--status img {
    width: 20px;
    margin-right: 4px;
    transform: translateY(-1px)
}

.v-eventMetaCard--status__hot {
    color: #d81e06
}

.v-eventMetaCard--status__end {
    color: rgba(0, 0, 0, .44)
}

.v-eventMetaCard--image {
    width: 320px;
    margin-right: 20px;
    flex: 0 0 auto;
    position: relative;
    display: flex
}

.v-eventMetaCard--image .view {
    position: absolute;
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    border-radius: 999rem;
    right: 10px;
    bottom: 10px;
    padding: 6px 12px;
    line-height: 1.2;
    font-size: 12px
}

.v-eventMetaCard--metaItem {
    font-size: 14px;
    color: var(--jl-text-light);
    line-height: 1.4;
    padding: 5px 0;
    display: flex;
    align-items: flex-start
}

.v-eventMetaCard--metaItem .prefix {
    display: flex;
    align-items: center;
    flex: 0 0 auto
}

.v-eventMetaCard--metaItem .prefix img {
    margin-right: 4px;
    transform: translateY(-1px)
}

.v-eventMetaCard--content {
    flex: 1 1 auto
}

.v-eventMetaCard--title {
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: 4px;
    font-size: 20px;
    letter-spacing: .5px
}

.v-eventMetaCard--ticketBoard {
    margin-top: 20px;
    border: 2px solid #ff9000;
    color: var(--jl-text-light);
    border-radius: 4px
}

.v-eventMetaCard--ticketBoard .price {
    color: #f37;
    padding-top: 3px
}

.v-eventMetaCard--ticketBoard .original {
    color: #999;
    text-decoration: line-through;
    font-size: 12px
}

.v-eventMetaCard--ticketBoard__header {
    background-color: #ff9000;
    color: #fff
}

.v-eventMetaCard--ticketBoard__item:last-child {
    border-bottom: 0;
    border-radius: 0 0 4px 4px
}

.v-eventMetaCard--ticketBoard__item:nth-child(even) {
    background-color: #f6f6f6
}

.txt-share-box {
    display: flex;
    align-items: center
}

.txt-share-box img {
    width: 105px;
    margin-right: 18px
}

.txt-share-content-title {
    font-size: 20px;
    margin-bottom: 10px
}

.BMap_cpyCtr {
    display: none
}

.anchorBL {
    display: none
}

.overlay--content__contact {
    padding: 30px 80px 40px !important
}

.overlay--contactTitle {
    font-weight: 600;
    font-size: 20px
}

.overlay--contactContent {
    display: flex;
    padding-top: 20px;
    align-items: center
}

.overlay--contactContent img {
    width: 120px;
    margin-right: 50px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px
}

.overlay--contactContent p {
    margin-bottom: 6px;
    color: rgba(0, 0, 0, .7);
    font-size: 16px
}

.overlay--contactContent div {
    text-align: left;
    line-height: 1.4;
    padding-top: 15px
}

.button--close {
    line-height: 1;
    padding: 10px;
    border: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0)
}

.withLineHeight {
    line-height: 1.8
}

.y-maxWith1200 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto
}

.y-maxWidth800 {
    width: 800px;
    float: left
}

.y-maxWidth360 {
    float: right;
    width: 360px
}

.y-widegt {
    background-color: #fff;
    border-radius: 3px;
    padding: 20px;
    margin-bottom: 30px
}

.logo-xmas {
    display: flex;
    align-items: center
}

.y-widget-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 15px;
    padding-bottom: 2px;
    padding-top: 1px;
    position: relative
}

.y-widget-title:before {
    height: 1em;
    width: 5px;
    border-radius: 999em;
    content: "";
    display: inline-block;
    background-color: var(--jl-main-color);
    vertical-align: -3px;
    margin-right: 4px
}

.starEvent--item {
    margin-bottom: 15px
}

.starEvent--item:last-child {
    margin-bottom: 0
}

.starEvent--title {
    font-size: 18px;
    line-height: 1.4
}

.starEvent--meta {
    font-size: 14px;
    color: rgba(0, 0, 0, .44)
}

.u-backgroundGrayLightest {
    background-color: #f7f7f7
}

.training-detail {
    margin-left: auto;
    margin-right: auto;
    width: 1100px;
    background: #fff;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .05);
    border-radius: 10px;
    transform: translate3d(0, -50%, 0)
}

.training-main {
    padding: 20px 40px 30px
}

.training-main .top-cen {
    color: #666;
    font-size: 16px;
    line-height: 24px;
    display: flex
}

.training-main .top-cen .money {
    display: inline-block;
    font-size: 36px;
    font-weight: 700;
    padding-right: 5px;
    height: 50px;
    line-height: 50px
}

.training-main .top-cen .money small {
    font-size: 22px;
    margin-right: 4px
}

.training-main .top-cen .time-cen {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center
}

.training-red {
    color: #ff3221;
    font-weight: 600
}

.count-name {
    float: left;
    color: #666;
    font-size: 16px;
    margin-right: -8px
}

.wrap-label {
    display: flex;
    align-items: center
}

.training-main .wrap-label .label {
    margin-right: 6px;
    padding: 2px 12px;
    border: 1px solid #999;
    border-radius: 13px;
    color: #333;
    font-size: 12px
}

.btn-cen {
    margin-left: auto;
    display: flex;
    align-items: center
}

.btn-cen .note--last {
    font-size: 14px;
    margin-right: 10px
}

.btn-cen .yoonaOnline--linkItem {
    margin-right: 0
}

.btn-cen .yoonaOnline--linkItem.disabled {
    cursor: not-allowed;
    background-color: #ccc;
    border-color: #ccc
}

.training-main .bot-cen {
    display: flex;
    align-items: flex-end
}

.training-main .bot-cen .label {
    font-size: 12px;
    color: #999;
    line-height: 40px
}

.training-main .bot-cen .label.lh18 {
    line-height: 18px
}

.yoonaOpen--banner {
    height: 360px;
    background-size: auto 300px;
    background-position: top center
}

.money2 {
    display: inline-block;
    color: #999;
    text-decoration: line-through;
    font-size: 16px;
    position: relative
}

.yoonaOpenSidebar--item {
    margin-bottom: 15px
}

.yoonaOpenSidebar--item a {
    display: block;
    position: relative
}

.yoonaOpenSidebar--item a:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .3)
}

.yoonaOpenSidebar--item a img {
    display: block
}

.yoonaOpenSidebar--item a .title {
    position: absolute;
    background: linear-gradient(-135deg, transparent 8px, #fff 0);
    padding: 8px;
    font-size: 14px;
    bottom: 10px;
    left: 10px;
    right: 30px;
    line-height: 1.4
}

.yoonaOnline--header {
    background-color: #fff
}

.y-marginTop30 {
    margin-top: 30px
}

.userNavTab {
    display: flex;
    border-bottom: 1px solid #ddd;
    align-items: center
}

.userNavTab--item {
    padding: 10px 0;
    margin-right: 15px;
    cursor: pointer
}

.userNavTab--item.current {
    color: var(--jl-main-color)
}

.userList--empty {
    text-align: center;
    padding: 30px 0;
    font-size: 18px;
    color: var(--jl-text-gray)
}

.userPost--item {
    padding: 10px 0;
    border-bottom: 1px solid #eee
}

.userPost--item:last-child {
    border-bottom: 0
}

.userPost--item .title {
    font-size: 16px
}

.userPost--item .title:hover {
    color: var(--jl-main-color)
}

.userPost--item .meta {
    font-size: 14px;
    color: var(--jl-text-gray)
}

.userPost--item .meta .action {
    cursor: pointer
}

.userPost--item .meta .action:hover {
    color: var(--jl-main-color)
}

.userComment--item {
    padding: 10px 0;
    border-bottom: 1px solid #eee
}

.userComment--item:last-child {
    border-bottom: 0
}

.userComment--item .title {
    font-size: 14px
}

.userComment--item .title a {
    color: var(--jl-main-color)
}

.userComment--item .title a:hover {
    text-decoration: underline
}

.userComment--item .content {
    font-size: 14px;
    color: var(--jl-text-gray)
}

.userComment--item .meta {
    font-size: 12px
}

.userComment--item .meta .action {
    cursor: pointer
}

.userComment--item .meta .action:hover {
    color: var(--jl-hover-color)
}

.userAnswer--item {
    padding: 10px 0;
    border-bottom: 1px solid #eee
}

.userAnswer--item:last-child {
    border-bottom: 0
}

.userAnswer--item .title {
    font-size: 16px
}

.userAnswer--item .content {
    font-size: 14px;
    color: var(--jl-text-gray)
}

.userSubCard--action {
    margin-left: auto
}

.userSubCard--item {
    border-bottom: 1px solid #eee;
    padding: 20px;
    display: flex;
    align-items: center
}

.userSubCard--item:last-child {
    border-bottom: 0
}

.userSubCard--item .name {
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center
}

.userSubCard--item .tags {
    display: flex;
    align-items: center;
    padding-top: 8px
}

.userSubCard--item .tags .tag {
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 2px;
    margin-right: 5px;
    background-color: #f5f5f5;
    color: var(--jl-text-gray);
    line-height: 1.2
}

.userSubCard--item .des {
    color: var(--jl-text-gray);
    font-size: 14px;
    line-height: 1.4;
    margin: 8px 0 0
}

.userSubCard--item .content {
    flex: 1 1 auto
}

.userSubCard--item .avatar {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 100%;
    margin-right: 10px
}

.user-page-header {
    padding: 50px 0;
    overflow: hidden;
    background-color: #fafafa;
    position: relative;
    background-position: 50%;
    background-size: cover;
    background-image: url("//image.woshipm.com/kan/img/user-center-banner.png")
}

.user-page-header .avatar {
    border-radius: 100%;
    border: 3px solid #fff;
    float: left;
    margin-right: 20px
}

.user-page-header .author-title {
    font-size: 24px;
    color: #fff;
    margin-bottom: 5px;
    margin-top: 15px
}

.user-page-header p {
    font-size: 14px;
    margin-bottom: 5px;
    color: #fff;
    margin-top: 0
}

.user-page-header .button--dingyue {
    background-color: rgba(0, 0, 0, 0);
    color: #3284f4;
    border: 1px solid #3284f4;
    display: inline-block;
    padding: 0 10px;
    margin-top: 5px;
    font-size: 12px;
    border-radius: 3px;
    opacity: .8;
    line-height: 24px;
    height: 25px
}

.author-page-info {
    float: left;
    width: 50%
}

.setting-page-user-meta {
    float: right;
    padding: 20px;
    color: #fff;
    line-height: 1.8
}

.setting-page-user-meta span {
    display: inline-block;
    text-align: center;
    padding-top: 25px;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background: url("//image.woshipm.com/kan/img/blue.png") no-repeat 50%;
    font-size: 16px
}

.setting-page-user-meta span i {
    display: block;
    font-style: normal;
    line-height: 1;
    font-size: 14px;
    color: rgba(255, 255, 255, .98)
}

.setting-page-user-meta span:nth-child(odd) {
    background-image: url("//image.woshipm.com/kan/img/red.png")
}

.user-message-item {
    padding: 10px 15px;
    font-size: 14px;
    color: var(--jl-text-gray);
    position: relative;
    border-bottom: 1px solid #eee
}

.user-message-item.unread::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -2px;
    width: 4px;
    height: 4px;
    background-color: #3284f4;
    border-radius: 100%
}

.list-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.js-hot-qlist-home {
    padding-top: 10px
}

.user-qes-item {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px
}

.user-qes-item:last-child {
    border-bottom: 0
}

.user-qes-item h2 {
    font-size: 18px;
    margin: 0 0 10px;
    font-weight: 500;
    line-height: 1.5;
    transition: .5s
}

.user-qes-item h2:hover {
    color: var(--jl-main-color)
}

.user-qes-item .user-qes-meta {
    font-size: 12px;
    color: var(--jl-text-gray);
    display: flex;
    align-items: center
}

.user-qes-item .user-qes-meta .avatar {
    border-radius: 100%;
    width: 24px;
    height: 24px;
    margin-left: -10px;
    border: 2px solid #fff
}

.user-qes-item .user-qes-meta .meta-right {
    margin-left: auto;
    display: flex
}

.user-qes-item .user-qes-meta .meta-right .btn {
    color: var(--jl-main-color);
    font-size: 12px;
    border: 1px solid var(--jl-main-color);
    padding: 0px 8px;
    border-radius: 4px
}

.user-qes-item .user-qes-meta .meta-right .btn:hover {
    background-color: var(--jl-main-color);
    color: #fff
}

.user-qes-item .user-qes-meta .user-avatars {
    display: flex;
    align-items: center;
    padding-left: 10px;
    margin-right: 6px
}

.hot-qlist-hero {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px
}

.hot-qlist-hero .widget--question--hero {
    width: 49%;
    border-radius: 4px;
    height: 226px
}

.hot-qlist-hero .widget--question--hero:nth-child(2):before {
    background: linear-gradient(269deg, rgba(179, 149, 105, 0.3) 0%, rgba(179, 149, 105, 0.7) 50%, rgb(179, 154, 105) 100%)
}

.el-backtop {
    border-radius: 4px !important;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05) !important
}

.page404 {
    text-align: center;
    padding: 100px 0 50px
}

.page404 .img404 {
    width: 300px;
    margin-bottom: 50px
}

.page404--actions {
    padding-bottom: 30px
}

.page404--actions a {
    background-color: var(--jl-main-color);
    color: #fff;
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 4px
}

.paginations {
    padding: 30px 0
}

.paginations .page-numbers {
    margin: 10px
}

.userReward--list {
    padding: 15px 0
}

.vava-input {
    background: #fff none repeat scroll 0 0;
    border: 1px solid var(--jl-border-color);
    border-radius: 4px;
    width: 600px;
    font-size: 16px;
    color: #b3b3b1;
    padding: 15px;
    margin-bottom: 15px
}

.vava-label {
    padding-top: 50px;
    font-size: 12px;
    color: var(--jl-text-gray)
}

.vava-niubi {
    font-size: 14px;
    color: var(--jl-text-gray)
}

.vava-niubi .btn {
    color: var(--jl-main-color)
}

.topicAll--active .pm--topTopic--all {
    display: flex
}

.pm--topTopic--all {
    display: none;
    background-color: #fff;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .02);
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    right: 0;
    max-height: 183px;
    border-top: 1px solid var(--jl-border-color);
    overflow-y: auto;
    padding: 10px 20px 20px
}

.pm--topTopic--it {
    width: 33.333%;
    padding: 2px 30px;
    font-size: 16px;
    box-sizing: border-box
}

.pm--topTopic--it a {
    color: var(--jl-text-light);
    display: flex;
    align-items: center
}

.pm--topTopic--it a>span {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pm--topTopic--it a:hover {
    color: var(--jl-main-color)
}

.pm--topTopic--it a .count {
    color: var(--jl-text-gray);
    font-size: 14px;
    margin-left: auto
}

.pm--topTopic--list {
    display: flex;
    background-color: #fff;
    padding: 15px;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .02);
    margin-top: -37px;
    position: relative;
    justify-content: space-between
}

.pm--topTopic--item {
    width: 20%;
    font-size: 12px
}

.pm--topTopic--item__author {
    width: 14.2857142857%
}

.pm--topTopic--item__author:last-child {
    text-align: left !important
}

.pm--topTopic--item:last-child {
    text-align: right
}

.pm--topTopic--item a {
    display: flex;
    align-items: center
}

.pm--topTopic--item a h3 {
    margin: 0;
    font-size: 14px;
    font-weight: normal;
    color: var(--jl-text-light);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 178px
}

.pm--topTopic--item a:hover h3 {
    color: var(--jl-main-color)
}

.pm--topTopic--title {
    flex: 1 1 auto;
    line-height: 1.6
}

.pm--topTopic--title p {
    margin: 0;
    color: var(--jl-text-gray-lightest)
}

.pm--topTopic--img {
    margin-right: 10px;
    display: flex;
    align-items: center
}

.pm--topTopic--img img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 5px
}

.pm--topTopic--img img.avatar {
    border-radius: 100%
}

.policy--container {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: flex-start
}

.policy--menu {
    width: 150px;
    padding: 10px 0 10px 20px;
    margin-right: 25px;
    box-sizing: border-box;
    flex: 0 0 auto;
    font-size: 14px
}

.policy--menu .policyNav-items {
    padding: 0;
    margin: 0
}

.policy--menu .policyNav-items .menu-item {
    padding: 5px 0;
    line-height: 1.6;
    border-right: 3px solid rgba(0, 0, 0, 0)
}

.policy--menu .policyNav-items .menu-item.current-menu-item {
    border-right-color: var(--jl-main-color)
}

.policy--wrapper {
    flex: 1 1 auto;
    padding: 20px 30px;
    margin-bottom: 50px
}

.policy--wrapper .policy--content {
    font-size: 14px
}

.policy--wrapper .policy--title {
    font-size: 18px;
    margin: 0;
    line-height: 1;
    border-bottom: 1px solid var(--jl-border-color);
    padding-bottom: 15px;
    margin-bottom: 15px
}

.verify--title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px
}

.verify--form {
    max-width: 700px
}

.verify--content {
    padding: 20px;
    background-color: var(--jl-background-white);
    border-radius: 4px;
    margin-top: 20px;
    line-height: 1.6;
    color: var(--jl-text-light)
}

.verify--note {
    color: #f56c6c;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.2
}

.verify--success {
    padding: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.verify--success .msg {
    margin-bottom: 20px;
    color: var(--jl-text-light)
}

.verify--avatar {
    height: 64px;
    width: 64px;
    object-fit: cover;
    border-radius: 5px
}

.verify--image {
    max-width: 200px;
    height: auto
}

.verify--footer {
    display: flex;
    padding: 10px 0;
    justify-content: center
}

.verify--footer .el-button {
    margin: 0 10px
}

.pm-verify {
    background-color: var(--jl-background-white);
    padding: 30px;
    margin-top: 20px
}

.overlay--search {
    position: fixed;
    background-color: var(--jl-background-white);
    left: 0;
    right: 0;
    top: 60px;
    z-index: 700;
    bottom: 0;
    padding: 50px 0
}

.overlay--search .container {
    width: 800px
}

.overlay--search__title {
    font-size: 32px;
    font-weight: 700
}

.overlay--search__input {
    border: 1px solid var(--jl-border-color);
    width: 100%;
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 4px;
    margin: 10px 0;
    box-sizing: border-box !important
}

.overlay--search__tags {
    padding-top: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.overlay--search__tag {
    background-color: #f2f2f2;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    color: #777;
    margin: 0 10px 10px 0
}

.overlay--search__tag:hover {
    color: var(--jl-main-color)
}

.overlay--search__recommand {
    padding-top: 40px
}

.search-features {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.search-feature-item {
    width: 32%
}

.search-feature-item h3 {
    margin: 0;
    font-size: 16px
}

.component-fade-enter-active,
.component-fade-leave-active {
    transition: .3s ease
}

.component-fade-enter,
.component-fade-leave-to {
    transform: translate3d(0, -20px, 0)
}

.overlay,
.userList {
    text-align: center
}

.overlay {
    background-color: rgba(255, 255, 255, .97);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000900
}

.overlay--sammi {
    width: 300px;
    display: inline-block;
    margin-top: 150px;
    position: relative
}

.overlay--sammi .close-btn-2 {
    position: absolute;
    top: -30px;
    right: -15px;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    color: var(--jl-color-white)
}

.overlay iframe {
    background: #fff;
    border: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    border-radius: 4px
}

.overlay:before {
    content: "";
    height: 100%;
    margin-right: -0.25em
}

.overlay-dialog,
.overlay:before {
    display: inline-block;
    vertical-align: middle
}

.overlay-dialog {
    max-width: 580px;
    outline: 0 none;
    overflow: hidden;
    padding: 100px 80px;
    position: relative
}

.overlay-dialog .overlayclose-btn {
    color: #aaa !important;
    padding: 5px 10px !important
}

.overlay-dialog .button--signin {
    border-radius: 2px;
    font-size: 16px;
    height: 58px;
    max-width: 456px;
    padding-left: 18px;
    text-align: left;
    width: 100%
}

.overlay-actions .button--link {
    margin-top: -24px
}

.overlay-content {
    color: var(--jl-text-gray);
    line-height: 1.4;
    margin-bottom: 30px
}

.overlay-content .phone-form p {
    margin-bottom: 14px
}

.overlay-content p {
    font-size: 14px;
    margin-bottom: 0;
    line-height: 1.8;
    margin-top: 0
}

.overlay-title {
    color: rgba(0, 0, 0, .8);
    font-size: 24px;
    line-height: 1.1;
    margin-bottom: 6px
}

.overlay-footer {
    color: #b3b3b1;
    font-size: 12px;
    margin-bottom: 10px;
    margin-top: 50px
}

.overlay--dark {
    background-color: var(--jl-text-gray)
}

.overlay--dark .button--close {
    color: #fff
}

.overlay--dark .overlay-dialog {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .44);
    max-width: 520px;
    padding: 0
}

.overlay--dark .overlay-title {
    background-color: #f0f0f0;
    color: rgba(0, 0, 0, .8);
    font-size: 18px;
    margin-bottom: 0;
    padding: 24px;
    margin-top: 0
}

.overlay--dark .overlay-title.title--phone {
    background-color: #fff;
    margin-top: 20px;
    font-weight: 400;
    padding-bottom: 12px
}

.overlay--dark .overlay-content {
    color: var(--jl-text-gray);
    font-size: 16px;
    margin: 24px 0;
    padding: 0 32px;
    text-align: left
}

.overlay--dark .overlay-actions {
    margin-bottom: 0;
    padding: 0 32px;
    margin-top: 16px
}

.overlay--dark .overlay-actions .button {
    margin: 0 5px
}

.overlay--dark .overlay-footer {
    margin: 0 0 16px
}

.overlay-dialog--email .overlay-content {
    margin-bottom: 0
}

.button--filled {
    background: #292929;
    color: rgba(255, 255, 255, .97);
    border-color: #292929
}

.button--filled:hover {
    background-color: #727171;
    border-color: #727171
}

.overlayclose-btn {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    padding: 5px 15px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10000000;
    color: #333;
    background: rgba(0, 0, 0, 0);
    border: 0;
    cursor: pointer;
    line-height: 1
}

.phone-form {
    text-align: left;
    padding-bottom: 20px
}

.phone-form p {
    margin-bottom: 10px
}

.phone-form .user-info-message {
    font-size: 12px;
    color: #c00
}

.phone-form .button--sendMessage {
    border: 1px solid #eee;
    background-color: #f0f0f0;
    color: #999;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    width: 140px;
    box-sizing: border-box;
    height: 36px
}

.phone-form label {
    display: block;
    font-size: 12px;
    color: var(--jl-text-gray-lightest)
}

.phone-form input[type=text] {
    width: 300px;
    padding: 0 10px;
    border: 1px solid var(--jl-border-color);
    background-color: var(--jl-background-white);
    border-radius: 3px;
    height: 36px;
    font-size: 12px;
    box-sizing: border-box
}

.phone-form input[type=text]:focus {
    border-color: var(--jl-main-color)
}

.phone-form input[type=text].input--creditNum {
    width: 140px;
    margin-right: 18px
}

.phone-form input[type=submit] {
    box-sizing: border-box;
    width: 300px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    height: 36px;
    color: var(--jl-color-white);
    border-radius: 3px;
    border: 0;
    background-color: var(--jl-main-color)
}

.wpd-lay-title {
    width: 100px;
    display: inline-block;
    font-size: 14px
}

.wpd-dialog {
    background-color: var(--jl-background-white);
    border-radius: 5px;
    padding: 40px;
    max-width: 540px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin-top: 40px
}

.wpd-dialog .day {
    height: 30px;
    width: auto;
    display: inline-block;
    vertical-align: middle
}

.wpd-input-text {
    font-size: 32px;
    height: auto;
    line-height: 38px;
    background-color: rgba(0, 0, 0, 0);
    border: 0
}

.wpd-input-textarea {
    height: 50px;
    margin: 0;
    padding: 0;
    resize: none;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    font-size: 14px
}

.wpd-input-item {
    padding: 15px 20px
}

.wpd-input-item.message {
    border-top: 1px solid var(--jl-border-color)
}

.wpd-inputs {
    background-color: #f5f5f5;
    border: 1px solid var(--jl-border-color);
    border-radius: 4px;
    color: var(--jl-text-gray);
    margin-bottom: 15px;
    width: 360px;
    margin-top: 15px
}

.wpd-inputs label {
    display: inline-block;
    float: none;
    margin: 0 10px 0 0;
    padding: 0;
    vertical-align: middle
}

.wpd-payway {
    margin-bottom: 15px
}

.wpd-payway-title {
    font-size: 14px;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.8;
    color: var(--jl-text-gray)
}

.wpd-header {
    text-align: center;
    padding-top: 15px
}

.wpd-avatar {
    height: 64px;
    width: 64px;
    object-fit: cover;
    border: 1px solid var(--jl-border-color);
    padding: 2px;
    border-radius: 100%
}

.wpd-btn-close {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    padding: 5px 15px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10000000;
    color: var(--jl-text-gray-lightest);
    background-color: var(--jl-background-white);
    border: 0;
    cursor: pointer
}

.wpd-btn-confirm {
    display: inline-block;
    border-radius: 3px;
    background-color: var(--jl-main-color);
    padding: 0 25px;
    height: 40px;
    line-height: 39px;
    cursor: pointer;
    font-size: 18px;
    border: 0;
    color: var(--jl-color-white)
}

.wpd-overlay-notice {
    font-size: 12px;
    color: var(--jl-text-gray-lightest);
    padding-top: 5px
}

.wpd-overlay-body h4 {
    font-weight: 700
}

.overlay-dialog--animate {
    transform-origin: bottom center;
    animation: fade-in-pulse-08 .3s cubic-bezier(0.8, 0.02, 0.45, 0.91) forwards
}

@keyframes fade-in-pulse-08 {
    0% {
        opacity: 0;
        transform: scale(0.8)
    }

    50% {
        opacity: 1
    }

    70%,
    to {
        transform: scale(1)
    }
}

.mobile-share-container {
    max-width: 96vw;
    position: relative;
    width: 375px
}

.mobile-share-inner {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    text-align: left;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%
}

.mobile-share-head {
    letter-spacing: .5px;
    position: relative
}

.mobile-share-head-img {
    background-color: #fff;
    background-position: 50%;
    background-size: cover;
    height: calc(min(375px, 96vw)*.6667);
    overflow: hidden
}

.mobile-share-title {
    bottom: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    left: 0;
    line-height: 26px;
    margin: 0;
    padding: 40px 20px 20px;
    position: absolute;
    right: 0;
    text-align: justify;
    z-index: 0
}

.mobile-share-title-bg {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: -1
}

.mobile-share-body {
    background: #fff
}

.mobile-share-content {
    padding: 20px 20px 22px;
    position: relative
}

.mobile-share-meta {
    align-items: center;
    color: rgba(0, 0, 0, .6);
    display: flex;
    font-size: 12px;
    font-weight: 400;
    justify-content: space-between;
    line-height: 24px;
    margin-bottom: 20px;
    overflow: hidden
}

.mobile-share-text {
    color: rgba(0, 0, 0, .68);
    font-size: 14px;
    letter-spacing: .5px;
    line-height: 1.6;
    text-align: justify
}

.mobile-share-body-line {
    bottom: 0;
    color: rgba(0, 0, 0, .3);
    font-size: 10px;
    left: 20px;
    letter-spacing: 4px;
    line-height: 1;
    overflow: hidden;
    position: absolute;
    text-align: center;
    white-space: nowrap;
    width: calc(100% - 40px)
}

.mobile-share-footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    padding: 20px
}

.mobile-share-qr {
    flex-shrink: 0;
    height: 80px;
    position: relative;
    width: 80px
}

.mobile-share-qrbg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.mobile-share-qrbg img {
    display: block;
    height: 100%;
    width: 100%
}

.mobile-share-qrcode {
    box-sizing: border-box;
    height: 80px;
    padding: 5px;
    width: 80px
}

.mobile-share-qrcode img {
    display: block;
    height: 70px;
    width: 70px
}

.mobile-share-inner+.mobile-share-canvas {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.category-card__left {
    width: 439px
}

.category-card__right {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 431px
}

.category-cardItem {
    display: flex
}

.category-cardItem__D {
    background-color: var(--jl-background-white);
    height: 159px
}

.category-cardItem__D .img {
    width: 200px;
    flex: 0 0 auto;
    position: relative
}

.category-cardItem__D .img img {
    width: 200px;
    height: 159px;
    object-fit: cover
}

.category-cardItem__D .img::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 5%, rgba(0, 0, 0, 0.65))
}

.category-cardItem__D .content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.category-cardItem__D .content .title {
    line-height: 1.6;
    font-size: 18px;
    font-weight: 700
}

.category-cardItem__D .img {
    display: flex;
    align-items: flex-start
}

.category-cardItem__D .meta {
    font-size: 14px;
    color: var(--jl-text-gray-lightest)
}

.category-cardItem__S {
    position: relative
}

.category-cardItem__S .img {
    display: flex;
    align-items: flex-start;
    position: relative
}

.category-cardItem__S .img::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 5%, rgba(0, 0, 0, 0.65))
}

.category-cardItem__S .title {
    line-height: 1.6;
    color: #fff;
    position: absolute;
    bottom: 15px;
    left: 20px;
    right: 20px;
    font-weight: 700;
    font-size: 20px
}

.category-card {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px
}

.category--nav {
    background-color: var(--jl-background-white)
}

.category--navList {
    justify-content: space-between;
    box-shadow: 0 0px 3px var(--jl-border-color-light)
}

.category--navItem {
    font-size: 14px;
    color: var(--jl-text-light);
    padding: 15px 0
}

.category--navItem.current {
    color: var(--jl-main-color)
}

.active--nav {
    background-color: var(--jl-background-white);
    padding: 15px 20px;
    display: flex;
    margin: 20px 0
}

.active--nav span {
    margin-right: 20px;
    font-size: 14px;
    cursor: pointer
}

.active--nav span.active {
    color: var(--jl-main-color)
}

.active-item {
    border-radius: 4px;
    overflow: hidden;
    width: 32%;
    margin-bottom: 20px
}

.active-item .active--image {
    display: block;
    overflow: hidden
}

.active-item .active--image img {
    display: block;
    transition: .5s
}

.active-item .active--image:hover img {
    transform: scale(1.05)
}

.active-item .content {
    padding: 15px 20px
}

.active-item .post-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 10px;
    font-weight: normal;
    height: 3.2rem;
    overflow: hidden;
    text-align: left
}

.active-item .post-title:hover {
    color: var(--jl-main-color)
}

.active-item .iconss {
    position: absolute;
    right: 0;
    top: 10px;
    fill: var(--jl-main-color) !important;
    width: 24px;
    height: 24px
}

.active-item .meta {
    position: relative;
    font-size: 14px;
    color: var(--jl-text-gray);
    padding-bottom: 5px
}

.active-item .meta .date,
.active-item .meta .address {
    display: flex;
    align-items: center
}

.active-item .meta .date svg,
.active-item .meta .address svg {
    margin-right: 4px;
    fill: #666
}

.active-item .meta .event-status {
    position: absolute;
    right: 0;
    top: 8px;
    background-color: var(--jl-main-color);
    color: #fff;
    padding: 4px 12px;
    font-size: 14px;
    border-radius: 4px
}

.active-item__narrow {
    width: 24%
}

.active-item__narrow .content {
    padding: 10px 15px
}

.active-item__narrow .post-title {
    font-size: 16px
}

.active-item__narrow .meta .event-status {
    font-size: 12px
}

.active--cardList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 0px;
    padding-bottom: 20px
}

.active--cardNav {
    display: flex;
    justify-content: center;
    padding-bottom: 50px
}

.active--title {
    font-weight: 700;
    color: var(--jl-main-color);
    margin: 30px 0 10px;
    font-size: 18px;
    display: flex
}

.active--title span {
    border-bottom: 3px solid var(--jl-main-color)
}

.active--cardList {
    display: flex
}

.event-banner {
    height: 320px;
    position: relative;
    overflow: hidden
}

.event-banner ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.event-banner ul li {
    background-position: 50%;
    background-size: cover;
    height: 320px
}

.event-banner ul li a {
    display: block;
    height: 100%;
    width: 100%
}

.event-banner .hd {
    position: absolute;
    bottom: 10px;
    text-align: center;
    left: 0;
    right: 0
}

.event-banner .hd li {
    display: inline-block;
    border-radius: 100%;
    height: 16px;
    width: 16px;
    cursor: pointer;
    margin: 5px;
    background-color: #fff
}

.event-banner .hd li.on {
    background-color: var(--jl-main-color)
}

.postFooterInfo {
    padding: 18px 25px
}

.postFooterInfo .avatar {
    border-radius: 100%
}

.authorCard--content {
    position: relative
}

.authorCard--content .button {
    position: absolute;
    right: 0
}

.authorCard--title {
    font-size: 18px;
    color: var(--jl-main-color);
    margin-bottom: 5px
}

.authorCard--title .icon {
    margin-left: 4px
}

.authorCard--title .button--follow {
    padding: 6px 12px;
    top: 10px
}

.authorCard--description {
    padding-bottom: 8px;
    color: var(--jl-text-gray)
}

.authorCard--meta {
    border-top: 1px dashed #eee;
    padding-top: 10px;
    font-size: 14px;
    color: var(--jl-text-gray);
    line-height: 1.4
}

.article--actions {
    display: flex;
    align-items: center;
    padding-top: 5px
}

.article--actions__right {
    margin-left: auto;
    display: flex;
    align-items: center
}

.article--actions__right .button {
    margin-left: 10px;
    border: 1px solid var(--jl-main-color);
    background-color: var(--jl-background-white);
    color: var(--jl-main-color);
    border-radius: 999rem;
    padding: 2px 14px;
    transition: .5s
}

.article--actions__right .button:hover,
.article--actions__right .button.active {
    background-color: var(--jl-main-color);
    color: var(--jl-background-white)
}

.button--pay {
    background-color: var(--jl-main-color);
    color: #fff;
    fill: #fff;
    font-size: 14px;
    border: 1px solid var(--jl-main-color);
    padding: 4px 22px;
    border-radius: 999rem
}

.donation-list {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.donation-item {
    display: flex;
    align-items: center;
    margin-left: -12px;
    background-color: var(--jl-background-white);
    padding: 3px;
    border-radius: 100%
}

.donation-item img {
    border-radius: 100%;
    width: 32px;
    height: 32px
}

.pay-num {
    margin-left: auto;
    font-size: 14px;
    color: var(--jl-text-gray)
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.button--follow {
    background-color: var(--jl-background-white);
    color: var(--jl-main-color);
    font-size: 12px;
    padding: 1px 12px;
    border-radius: 999rem;
    line-height: 1.1
}

.button--follow:hover,
.button--follow.active {
    color: var(--jl-background-white);
    background-color: var(--jl-main-color)
}

.support-author {
    text-align: center;
    padding: 20px;
    margin-bottom: 15px
}

.support-author .support-title {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--jl-text-gray)
}

.article-topAd {
    background-color: rgba(221, 162, 60, .1);
    border-radius: 4px;
    color: #dda23c;
    margin-bottom: 15px;
    padding: 8px 15px;
    margin-top: 10px;
    font-size: 14px
}

.article-topAd a {
    text-decoration: underline
}

.grap {
    word-break: break-all
}

.grap pre {
    background-color: #f2f4f6;
    padding: 20px
}

.grap ol,
.grap ul {
    padding-left: 50px;
    color: var(--jl-text-gray)
}

.grap ol li {
    margin-bottom: 5px
}

.grap ul {
    list-style: none;
    padding-left: 40px
}

.grap ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 5px
}

.grap ul li::before {
    content: "·";
    color: var(--jl-main-color);
    margin-right: 6px;
    margin-bottom: 5px;
    font-size: 32px;
    position: absolute;
    left: 0;
    top: -1px;
    line-height: 1
}

.grap h2 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 10px;
    line-height: 1.4;
    background-image: url(../images/h1.svg);
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position: 0 7px
}

.grap h3 {
    background-image: url(../images/h2.svg);
    background-repeat: no-repeat;
    padding-left: 15px;
    background-position: 0 6px;
    font-size: 18px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 10px;
    line-height: 1.4;
    color: var(--jl-text-light)
}

.grap blockquote {
    background-image: url(../images/b.svg);
    background-repeat: no-repeat;
    background-position: left 30px top 20px;
    background-color: #f8f8f8;
    color: var(--jl-text-light);
    margin: 30px 0;
    padding: 40px 30px 20px
}

.grap blockquote:first-of-type {
    margin-top: 20px
}

.grap blockquote p {
    margin: 0 0 10px
}

.grap p {
    margin-bottom: 18px;
    margin-top: 0
}

.grap a {
    text-decoration: underline
}

.grap a:hover {
    color: var(--jl-main-color)
}

.taglist {
    display: flex;
    padding: 15px 0
}

.taglist a {
    background-color: #f5f5f5;
    font-size: 12px;
    padding: 4px;
    border-radius: 999rem;
    padding-right: 16px;
    display: flex;
    align-items: center;
    line-height: 1.4;
    margin-right: 15px;
    color: #333
}

.taglist a:before {
    content: "#";
    color: #e62828;
    border-radius: 100%;
    background-color: #fff;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-right: 6px;
    font-weight: 700
}

.relatedPosts {
    padding: 25px;
    margin-bottom: 20px
}

.relatedPosts--list {
    display: flex;
    justify-content: space-between
}

.relatedPosts--half {
    width: 49%
}

.relatedPosts--aladdin a {
    display: block
}

.relatedPosts--aladdin a img {
    border-radius: 4px;
    height: 284px;
    object-fit: cover;
    width: 100%
}

.relatedPosts--group {
    counter-reset: relate;
    padding: 0;
    margin: 0
}

.relatedPosts--item .title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    transition: .5s color
}

.relatedPosts--item .title:hover {
    color: var(--jl-main-color)
}

.relatedPosts--item img {
    border-radius: 4px
}

.relatedPosts--item .meta {
    font-size: 14px;
    color: var(--jl-text-gray-lightest)
}

.relatedPosts--item__small {
    display: flex;
    counter-increment: related;
    margin-bottom: 10px
}

.relatedPosts--item__small:last-child {
    margin-bottom: 0
}

.relatedPosts--item__small .content {
    flex: 1 1 auto
}

.relatedPosts--item__small .title {
    font-weight: 700;
    line-height: 1.4;
    transition: .5s color
}

.relatedPosts--item__small .title:hover {
    color: var(--jl-main-color)
}

.relatedPosts--item__small .meta {
    font-size: 14px;
    color: var(--jl-text-gray)
}

.relatedPosts--item__small .img {
    flex: 0 0 auto;
    margin-right: 10px;
    position: relative;
    border-radius: 4px;
    overflow: hidden
}

.relatedPosts--item__small .img a {
    display: flex
}

.relatedPosts--item__small .img:before {
    content: counter(related);
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 12px;
    background-color: #ff5c00;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 0 0 3px 0
}

.article--wrapper {
    padding: 25px 25px
}

.article--title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0
}

.article--title__page {
    margin-bottom: 15px
}

.artilce--meta2 .button--follow {
    margin-left: 5px
}

.article--meta {
    padding-top: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: var(--jl-text-gray)
}

.article--meta a {
    color: var(--jl-main-color);
    display: flex;
    align-items: center
}

.article--meta .reading--time {
    margin-left: auto;
    display: flex;
    align-items: center
}

.article--meta .reading--time svg {
    margin-right: 4px
}

.article--meta .avatar {
    border-radius: 100%;
    margin-right: 10px;
    width: 30px;
    height: 30px
}

.article--heroAd {
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
    cursor: pointer
}

.article--heroAd img {
    transition: .5s;
    display: block
}

.article--heroAd:hover img {
    transform: scale(1.05)
}

.cute {
    color: var(--jl-main-color)
}

.shareMenu--title {
    display: flex;
    align-items: center;
    margin-bottom: 6px
}

.shareMenu--title svg {
    margin-right: 4px
}

.shareMenu a:hover {
    color: var(--jl-main-color)
}

.PositiveLabelBar-content {
    height: 42px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 20px;
    color: #c2a469;
    background-color: rgba(194, 164, 105, .08);
    width: 100%;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    margin-bottom: 15px
}

.PositiveLabelBar-content svg {
    margin-right: 5px
}

.PositiveLabelBar-title {
    font-weight: 600
}

audio:not([controls]) {
    display: none;
    height: 0
}

.js-progressBar {
    height: 1px;
    background-color: #eee;
    position: relative
}

.js-progress {
    padding: 10px 0;
    flex: 1 1 auto
}

.js-play-bar {
    height: 1px;
    left: 0;
    top: 0;
    transition: .5s linear
}

.js-play-bar,
.js-play-bar:before {
    position: absolute;
    background-color: #000
}

.js-play-bar:before {
    content: "";
    height: 5px;
    width: 5px;
    border-radius: 100%;
    right: -2px;
    top: -2px
}

.jp-play {
    display: block
}

.jp-state-playing .jp-play,
.jp-stop {
    display: none
}

.jp-state-playing .jp-stop {
    display: block
}

.jp-controls {
    margin-right: 15px
}

.jp-controls button {
    border: 1px solid rgba(0, 0, 0, .84);
    border-radius: 3px;
    background-color: #fff;
    height: 42px;
    width: 42px;
    text-align: center;
    line-height: 12px
}

.jp-controls button svg {
    fill: rgba(0, 0, 0, .84)
}

.jp-interface {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--jl-text-gray)
}

.jp-type-single {
    padding: 15px 0 5px
}

.js-player-tap {
    font-size: 12px;
    position: absolute;
    left: 0;
    top: -20px
}

.vava-input {
    background: #fff none repeat scroll 0 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    width: 600px;
    font-size: 16px;
    color: #b3b3b1;
    padding: 15px;
    margin-bottom: 15px
}

.vava-label {
    padding-top: 50px;
    font-size: 12px;
    color: #b3b3b1
}

.progress-bar {
    margin-top: 30px;
    height: 3px;
    border-radius: 999em;
    background-color: #5079b7
}

.postFooterTopic {
    display: flex;
    align-items: center;
    padding-right: 20px
}

.postFooterTopic--image {
    width: 72px;
    position: relative;
    display: flex;
    margin-right: 8px
}

.postFooterTopic--image img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px
}

.postFooterTopic--image .topic-i {
    position: absolute;
    left: 0;
    top: 0px;
    background-color: #ffd9af;
    color: #a7723a;
    padding: 0 5px;
    line-height: 1.6;
    font-size: 12px;
    border-radius: 4px 0px 4px 0px;
    opacity: .9;
    font-style: normal
}

.postFooterTopic--meta {
    font-size: 14px;
    color: var(--jl-text-gray-lightest);
    margin-left: auto;
    margin-right: 15px;
    display: flex;
    align-items: center
}

.postFooterTopic--title {
    font-size: 16px;
    font-weight: 500;
    margin-right: 10px
}

.postFooterTopic--prefix {
    color: var(--jl-text-gray);
    font-size: 14px
}

.postFooterTopic--action {
    margin-left: auto;
    background-color: var(--jl-main-color);
    color: #fff;
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 4px
}

.postFooterTopic--action:hover {
    background-color: var(--jl-hover-color)
}

.postFooterTopic--posts {
    padding-left: 20px
}

.postFooterTopic--posts a {
    display: flex;
    align-items: center;
    color: var(--jl-text-light);
    font-size: 14px
}

.postFooterTopic--posts a:hover {
    text-decoration: underline
}

.postFooterTopic--posts a:before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: var(--jl-main-color);
    border-radius: 100%;
    margin-right: 8px
}

.wpd-payItem {
    display: flex;
    justify-content: space-between;
    padding-top: 10px
}

.pay-way {
    display: flex;
    justify-content: center
}

.pay-way .demo--label {
    margin: 5px
}

.article--copyright {
    font-size: 14px;
    margin-top: 20px;
    background-color: #f2f4f6;
    color: var(--jl-text-gray);
    border-radius: 5px;
    line-height: 1.4;
    padding: 15px
}

.article--copyright p {
    margin-bottom: 8px
}

.article--copyright p:last-child {
    margin-bottom: 0
}

.article--copyright b {
    font-size: 16px;
    font-size: 16px;
    border-left: var(--jl-main-color) solid 4px;
    padding-left: 8px;
    line-height: 1;
    display: inline-block
}

.mce-top-part {
    position: fixed !important;
    left: 0;
    right: 0;
    top: 60px;
    background: rgba(255, 255, 255, .5) !important;
    display: flex !important;
    justify-content: center;
    z-index: 11
}

.mce-top-part:before {
    display: none
}

div.mce-toolbar-grp {
    border-bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0) !important
}

.fa-editor-form {
    margin-top: 100px;
    padding: 30px;
    box-shadow: 0 1px 5px 0 var(--jl-border-color-light);
    position: relative
}

.fa-new-psot-title {
    border: 0;
    background-color: rgba(0, 0, 0, 0);
    padding: 10px 0;
    font-size: 20px;
    width: 100%;
    box-sizing: border-box
}

.wp-editor-wrap {
    border-top: 1px solid var(--jl-border-color);
    margin-top: 10px
}

.mce-panel,
.wp-editor-container {
    border: 0 !important;
    box-shadow: none !important
}

.writing-column {
    width: 760px
}

.writing-action {
    position: fixed;
    border-top: 1px solid var(--jl-border-color);
    bottom: 0;
    padding: 30px 0;
    background-color: var(--jl-background-white);
    width: 700px;
    display: flex
}

.writing-action .button {
    margin-right: 12px
}

.writing-action .button--preview {
    background-color: var(--jl-background-white);
    color: var(--jl-main-color);
    margin-left: auto
}

.writing--copyright {
    padding-bottom: 100px;
    font-size: 14px;
    color: var(--jl-text-gray)
}

.writing--copyright a {
    color: var(--jl-main-color)
}

.writing--copyright p {
    margin-bottom: 5px;
    margin-top: 0
}

.card--tags {
    display: flex;
    padding-top: 10px
}

.card--tag {
    border: 1px solid var(--jl-main-color);
    color: var(--jl-main-color);
    font-size: 12px;
    border-radius: 999rem;
    padding: 1px 12px
}

.card--list {
    padding-top: 50px
}

.card--status {
    border-radius: 5px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid var(--jl-border-color-light);
    background-color: #fff
}

.card--status:last-child {
    margin-bottom: 0
}

.card--status__header {
    display: flex;
    align-items: center;
    color: var(--jl-text-gray-lightest);
    font-size: 12px
}

.card--status__header .avatar {
    border-radius: 999rem;
    margin-right: 10px;
    width: 36px
}

.card--status__header .dark {
    color: var(--jl-text-color)
}

.card--status__content {
    font-size: 14px;
    white-space: pre-wrap;
    padding-top: 10px
}

.card--status__footer {
    font-size: 14px;
    color: var(--jl-text-gray-lightest);
    display: flex;
    padding-top: 10px
}

.card--status__footer .action {
    cursor: pointer
}

.card--status__footer a:hover {
    color: var(--jl-main-color)
}

.card--statusImage--list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 400px;
    padding-top: 10px
}

.card--statusImage--thumb {
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 5px
}

.card--comments {
    padding-top: 20px;
    border-top: 1px solid var(--jl-border-color);
    margin-top: 10px;
    font-size: 14px
}

.card--comments .list {
    padding-top: 10px
}

.card--comments .list .item {
    border-bottom: 1px dotted var(--jl-border-color);
    position: relative;
    padding: 10px 0
}

.card--comments .list .item .r {
    position: absolute;
    right: 0;
    top: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--jl-text-gray)
}

.card--comments .list .item .r:hover {
    color: var(--jl-main-color)
}

.card--comments .list .item:last-child {
    border-bottom: 0
}

.card--comments .list .item .avatar {
    width: 24px;
    border-radius: 100%
}

.card--comments .list .item .content {
    padding: 10px 0
}

.card--comments .list .item .header {
    display: flex;
    align-items: center;
    font-size: 12px
}

.card--comments .list .item .header .avatar {
    margin-right: 6px
}

.subreply {
    padding: 10px 0 10px 30px
}

.subreply .subreplyitem {
    padding: 10px 0;
    position: relative
}

.subreply .subreplyitem:last-child {
    border-bottom: 0
}

.card--commentAction {
    text-align: right;
    padding-top: 6px
}

.viewNav {
    background-color: #fff;
    position: fixed;
    width: 110px;
    top: 110px;
    padding: 10px;
    box-sizing: border-box;
    margin-left: -130px
}

.viewNav--item {
    display: block;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    border-radius: 5px;
    margin-bottom: 5px
}

.viewNav--item.current {
    background-color: var(--jl-main-color);
    color: #fff
}

.viewNav--item:hover {
    background-color: rgba(242, 242, 242, .6);
    color: var(--jl-main-color)
}

.viewNav--item:last-child {
    margin-bottom: 0
}

.viewContainer {
    position: relative;
    width: 640px;
    margin: 0 auto
}

.card--form {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid var(--jl-border-color-light);
    border-radius: 5px
}

@media(max-width: 600px) {
    .viewNav {
        display: none
    }

    .card--list {
        width: auto;
        margin-left: 0
    }

    .header-nav,
    .pm--metabar__right,
    .site-footer {
        display: none
    }
}

.card--formAction {
    display: flex;
    align-items: center;
    padding-top: 10px
}

.card--formAction .el-upload--text,
.card--formAction .tag {
    font-size: 14px;
    color: var(--jl-main-color)
}

.card--formAction .el-upload--text .fa,
.card--formAction .tag .fa {
    margin-right: 5px
}

.card--formAction .tag {
    margin-left: 10px
}

.card--formAction .el-button {
    margin-left: auto
}

.card--formTag {
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-bottom: 15px
}

.card--formTag .item {
    border: 1px solid var(--jl-main-color);
    color: var(--jl-main-color);
    border-radius: 999rem;
    padding: 2px 14px;
    font-size: 14px;
    line-height: 1.2
}

.card--formEditor {
    margin-top: 10px;
    padding-top: 10px;
    border: 1px solid var(--jl-border-color);
    border-radius: 5px
}

.card--formEditor .el-textarea__inner {
    border: 0;
    resize: none
}

.card--formEditor.disabled {
    background-color: #f5f7fa
}

.card--formImages {
    padding: 15px 15px 0
}

.card--formImage {
    margin: 0 5px 5px 0;
    border-radius: 5px
}

.textareaPlace {
    background-color: #f5f7fa;
    color: #c0c4cc;
    height: 94px;
    padding: 5px 15px
}

.textareaPlace a {
    color: var(--jl-main-color)
}

.multiple-img-wrapper {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap
}

.multiple-img-wrapper img {
    display: block
}

.multiple-img-wrapper.col-3 {
    width: 300px
}

.multiple-img-wrapper.col-3 .multiple-img-container {
    margin-bottom: 2%;
    width: 32%;
    margin-right: 2%
}

.multiple-img-wrapper.col-3 .multiple-img-container:nth-child(3n) {
    margin-right: 0
}

.multiple-img-wrapper.col-4 {
    width: 200px
}

.multiple-img-wrapper.col-4 .multiple-img-container {
    margin-bottom: 2%;
    width: 49%;
    margin-right: 2%
}

.multiple-img-wrapper.col-4 .multiple-img-container:nth-child(2n) {
    margin-right: 0
}

.detail-img-wrapper {
    position: relative
}

.detail-img-wrapper .toggle-zoomout {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: zoom-out;
    z-index: 100
}

.detail-img-wrapper .next-img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 30%;
    cursor: url(../images/cursor-right.cur), auto;
    z-index: 200
}

.detail-img-wrapper .prev-img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    cursor: url(../images/cursor-left.cur), auto;
    z-index: 200
}

.top-panel {
    background-color: #f4f5f7;
    font-size: 12px;
    padding: 2px 10px;
    display: none
}

.small-img-container {
    width: 45px;
    height: 45px;
    background-size: cover;
    border: 2px solid rgba(0, 0, 0, 0);
    padding: 1px;
    margin-right: 2px;
    opacity: .7
}

.small-img-container.small-img-active,
.small-img-container:hover {
    border-color: var(--jl-main-color);
    opacity: 1
}

.small-img-wrapper {
    display: flex
}

.b-thumb {
    cursor: zoom-in
}

.digest--list {
    padding: 0px 0
}

.digest--item {
    font-size: 14px;
    padding: 10px 0;
    border-bottom: 1px dotted var(--jl-border-color)
}

.digest--item:last-child {
    border-bottom: 0
}

.digest--item:hover .digest--desc {
    height: auto
}

.digest--title {
    font-weight: bold;
    line-height: 1.4;
    display: flex;
    align-items: flex-start
}

.digest--title::before {
    content: "";
    height: 6px;
    width: 6px;
    background-color: var(--jl-background-white);
    border: 3px solid rgba(67, 112, 245, .5);
    border-radius: 100%;
    margin-right: 4px;
    flex: 0 0 auto;
    margin-top: 4px;
    transition: .5s
}

.digest--title:hover::before {
    border-color: var(--jl-main-color)
}

.digest--time {
    font-size: 12px;
    color: var(--jl-text-gray);
    margin-bottom: 2px;
    padding-left: 16px
}

.digest--desc {
    overflow: hidden;
    margin-top: 5px
}

.digest--summary {
    background-color: #f8f8f8;
    margin: 5px 0 0;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--jl-text-gray)
}

.digest--source a {
    color: var(--jl-main-color)
}

.digest--source a:hover {
    text-decoration: underline
}

.digest--dateWrap {
    margin-bottom: 15px
}

.digest--dateWrap .digest--dateItem {
    margin-bottom: 30px
}

.digest--dateWrap .digest--date {
    font-size: 14px;
    display: flex;
    margin-bottom: 10px;
    padding-top: 25px
}

.digest--dateWrap .digest--date span {
    background-color: var(--jl-main-color);
    color: #fff;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    line-height: 1.4
}

.digest--dateWrap .title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 3px
}

.digest--dateWrap .title a:hover {
    color: var(--jl-main-color)
}

.digest--dateWrap .time {
    font-size: 12px;
    color: var(--jl-text-gray-lightest);
    margin-bottom: 10px;
    display: flex;
    align-items: center
}

.digest--dateWrap .time span {
    margin-left: 7px;
    background-color: #d72121;
    color: #fff;
    line-height: 1;
    border-radius: 4px;
    padding: 2px 4px
}

.digest--dateWrap .short {
    color: var(--jl-text-gray);
    font-size: 14px;
    line-height: 1.8
}

.share--text {
    font-size: 12px;
    text-align: center
}

.digest--more {
    display: flex;
    align-items: center;
    justify-content: center
}

.digest--more a {
    color: var(--jl-main-color);
    font-size: 14px;
    border: 1px solid var(--jl-main-color);
    padding: 3px 20px
}

.digest--single {
    padding-top: 15px
}

.digest--single .title {
    font-size: 20px;
    font-weight: bold
}

.digest--single .time {
    font-size: 14px;
    color: var(--jl-text-gray-lightest)
}

.digest--single .short {
    color: var(--jl-text-light)
}

.digest--next {
    margin-top: 20px;
    padding: 15px 0
}

.digest--next .title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 3px
}

.digest--next .time {
    font-size: 12px;
    color: rgba(0, 0, 0, .5);
    margin-bottom: 10px;
    display: flex;
    align-items: center
}

.digest--next .time span {
    margin-left: 7px;
    background-color: #d72121;
    color: #fff;
    line-height: 1;
    border-radius: 4px;
    padding: 2px 4px
}

.digest--next .next--title {
    font-size: 14px;
    color: var(--jl-main-color)
}

.report--list {
    display: flex;
    flex-direction: column
}

.report--item {
    padding: 10px;
    border-bottom: 1px solid var(--jl-border-color)
}

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

.report--dialog .el-dialog__body {
    padding-top: 0;
    padding-bottom: 0
}

.u-marginLeft20 {
    margin-left: 20px
}

.u-marginLeftAuto {
    margin-left: auto
}

.el-dialog__body {
    padding-top: 0
}

.recommend--list__item {
    padding: 10px 0
}

.recommend--list__item:last-child {
    padding-bottom: 0
}

.recommend--list__item__logo {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 10px
}

.recommend--list__item__meta {
    font-size: 12px;
    color: var(--jl-text-gray-lightest)
}

.recommend--list__item__title {
    font-size: 14px;
    font-weight: bold
}

.recommend--list__item>a {
    display: flex;
    align-items: flex-start
}

.hero--search {
    border: 0;
    background-color: rgba(0, 0, 0, .2);
    padding: 5px;
    border-radius: 999rem;
    width: 500px;
    outline: none;
    color: #fff;
    line-height: 1.8;
    font-size: 14px;
    text-align: center
}

.hero--search::placeholder {
    color: rgba(255, 255, 255, .5)
}

.cateItem {
    border: 1px solid #eee;
    margin-right: 20px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 3px 18px;
    border-radius: 999rem;
    font-size: 14px;
    background-color: #eee;
    color: var(--jl-text-light)
}

.cateItem.active {
    color: #fff;
    background-color: var(--jl-main-color);
    border-color: var(--jl-main-color)
}

.cateList {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.recommend--list__title {
    font-weight: bold;
    line-height: 1;
    color: var(--jl-text-light);
    margin-bottom: 10px
}

.top-list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
    list-style: none
}

.top-item {
    width: 24%;
    text-align: center;
    box-sizing: border-box;
    padding: 20px
}

.top-item .top-title {
    line-height: 21px;
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 18px
}

.top-item img {
    height: 80px
}

.top-item .top-tips {
    font-size: 14px;
    line-height: 1.4;
    color: var(--jl-text-gray-lightest)
}

.title--image {
    display: block;
    margin: 30px auto;
    width: 350px
}

.hero-title__flex {
    display: flex;
    align-items: center;
    justify-content: center
}

.hero-title__flex span {
    border: 1px solid rgba(255, 255, 255, .4);
    display: flex;
    width: 250px;
    border-radius: 999rem;
    font-size: 16px;
    overflow: hidden;
    border-radius: 5px
}

.hero-title__flex span .hti {
    width: 50%;
    padding: 5px 0;
    font-style: normal;
    font-weight: 400 !important;
    color: #fff;
    background-color: var(--jl-main-color);
    border-radius: 5px
}

.hero-title__flex span a {
    background-color: rgba(0, 0, 0, 0) !important
}

.education--item {
    border-bottom: 1px solid var(--jl-border-color);
    padding: 15px
}

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

.education--item__time {
    font-size: 14px;
    color: var(--jl-text-gray)
}

.education--item:hover .education--item__title .action {
    display: flex
}

.education--item__title {
    font-size: 16px;
    color: var(--jl-text-color);
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center
}

.education--item__title .action {
    margin-left: auto;
    align-items: center;
    display: none
}

.education--item__title .action i {
    cursor: pointer
}

.education--item__title .action i:hover {
    color: var(--jl-hover-color)
}

.education--item__title .action .el-icon-delete {
    margin-left: 10px
}

.user--info__more--item {
    margin-bottom: 10px
}

.user--info__more--item h4 {
    display: flex;
    align-items: center
}

.user--info__more--item h4 .el-icon-circle-plus-outline {
    margin-left: auto;
    cursor: pointer
}

.user--info__more--item h4 .el-icon-circle-plus-outline:hover {
    color: var(--jl-hover-color)
}

.es-bannerNotice {
    font-size: 14px;
    background-color: #5e82f7;
    padding: 5px 0;
    color: #fff
}

.es-bannerNotice .container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.es-bannerNotice .container .close {
    position: absolute;
    right: 0
}

.es-bannerNotice a {
    margin-left: 10px;
    background-color: rgba(255, 255, 255, .3);
    line-height: 1.5;
    padding: 3px 8px;
    border-radius: 2px
}

.es-icon {
    margin-left: 5px;
    width: 24px;
    height: 23px;
    object-fit: cover
}

.esCard {
    padding: 15px
}

.esCard--title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    color: rgba(0, 0, 0, .68)
}

.esCard--desc {
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 10px
}

.esCard--action {
    display: flex;
    justify-content: center
}

.esCard--actionItem {
    cursor: pointer;
    width: 178px;
    border-radius: 5px;
    background-color: var(--jl-main-color);
    color: #fff;
    text-align: center;
    cursor: pointer;
    padding: 5px 0;
    display: block
}

.esProduct--addon {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px
}

.esProduct--addon .productList {
    border-top: 0;
    margin-top: 0;
    padding-top: 0
}

.esProduct--imageTitle {
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    align-items: center
}

.esProduct--imageTitle .count {
    margin-left: auto;
    font-weight: normal;
    color: rgba(0, 0, 0, .5);
    font-size: 14px
}

.esProduct--images {
    display: flex;
    flex-wrap: wrap
}

.esProduct--images .el-image {
    width: 200px;
    height: 120px;
    padding: 5px;
    border: 1px solid #ddd;
    margin-right: 10px;
    margin-bottom: 10px
}

.esProduct--desc {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee
}

.esProduct--content {
    padding-bottom: 10px;
    padding-top: 10px
}

.esProduct--body {
    font-size: 14px
}

.esProduct--infos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start
}

.esProduct--info {
    width: 33%;
    margin-bottom: 15px
}

.esProduct--info__title {
    color: rgba(0, 0, 0, .5)
}

.esProduct--info__title span {
    margin-right: 5px
}

.esProduct--info__content {
    padding-left: 19px
}

.es--caseDetailTitle {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 5px;
    font-weight: bold
}

.es--caseDetailMeta {
    font-size: 14px;
    color: rgba(0, 0, 0, .6);
    margin-bottom: 10px
}

.es--caseDetailMeta .el-icon-view,
.es--caseDetailMeta .el-icon-timer {
    margin-right: 5px
}

.es--caseDetailContent {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    white-space: pre-line
}

.es--applyContainer {
    margin-bottom: 50px;
    padding: 20px;
    border-radius: 5px
}

.es-productDetailHeader {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.es-productDetailLogo {
    border-radius: 4px;
    border: 5px solid #fff;
    background: #fff;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .1);
    z-index: 1;
    display: flex
}

.es-productDetailLogo img {
    border-radius: 2px;
    width: 64px;
    height: 64px;
    object-fit: cover
}

.es-productDetailName {
    font-weight: bold;
    margin-top: 15px;
    font-size: 24px;
    line-height: 1;
    margin-bottom: 10px
}

.es-productDetailDescription {
    font-size: 18px;
    color: rgba(0, 0, 0, .5);
    line-height: 1.5;
    margin-top: 10px
}

.esApply--count {
    font-size: 12px;
    color: rgba(0, 0, 0, .6);
    margin-bottom: 5px;
    text-align: right
}

.esApply--btn {
    border-radius: 999rem;
    background-color: var(--jl-main-color);
    color: #fff;
    font-size: 12px;
    padding: 5px 20px;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    font-weight: bold;
    align-items: center
}

.comenter-wrapper {
    width: 100%;
    margin: 32px auto 0;
    display: flex;
    align-items: stretch;
    position: relative
}

.comenter-wrapper .right-content {
    width: 476px;
    height: 439px;
    background: #f2f5ff;
    border-radius: 4px;
    padding: 0;
    margin: 0;
    margin-left: auto;
    position: relative;
    list-style: none
}

.comenter-wrapper .right-content--title {
    background-color: #eaefff;
    padding: 15px;
    line-height: 1;
    font-weight: 500;
    font-size: 18px;
    background-image: url(../images/title0bg.png);
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat
}

.comenter-wrapper .right-content .apply--contact {
    background-color: var(--jl-main-color);
    color: #fff;
    width: 240px;
    margin: 50px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border-radius: 5px;
    cursor: pointer
}

.comenter-wrapper .right-content .apply--contact .el-icon-chat-line-round {
    margin-right: 10px
}

.comenter-wrapper .right-content:before {
    content: "";
    border-left: 1px dashed #574994;
    height: 100px;
    position: absolute;
    z-index: 0;
    left: 46px;
    top: 85px
}

.comenter-wrapper .right-content .right-item {
    padding-left: 32px;
    margin: 27px 0;
    position: relative;
    z-index: 1
}

.comenter-wrapper .right-content .right-tips {
    padding-left: 36px;
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 8px
}

.comenter-wrapper .right-content .right-title {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 8px
}

.comenter-wrapper .right-content .right-title .icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: #574790;
    color: #fff
}

.comenter-wrapper .left-content {
    width: 650px
}

.es--topActions {
    display: flex;
    align-items: center;
    padding: 15px 0
}

.es--topInfo {
    font-size: 12px
}

.es--header {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px
}

.es--header .inner {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 0;
    position: relative
}

.es--header__logo {
    margin-right: 10px;
    width: 64px;
    height: 64px;
    object-fit: cover
}

.es--header__name {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center
}

.es--header__description {
    font-size: 14px;
    color: rgba(0, 0, 0, .5)
}

.es--header__description .el-button {
    position: absolute;
    top: 0;
    right: 0
}

.es--header__link {
    margin-left: 15px;
    font-size: 14px;
    font-weight: normal;
    color: #206cff
}

.es--header__link span {
    margin-right: 5px
}

.esWrapper {
    display: flex;
    align-items: flex-start
}

.esWrapper--left {
    flex: 1 1 auto
}

.esWrapper--right {
    width: 300px;
    padding: 20px;
    flex: 0 0 auto;
    background-color: #fff;
    margin-left: 20px;
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 142px 100px;
    border-radius: 5px
}

.esItem__count {
    display: flex;
    align-items: center;
    margin-left: 20px;
    flex: 0 0 auto
}

.esItem__countItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px
}

.esItem__countItem__value {
    font-size: 32px;
    font-weight: bold;
    color: #000;
    line-height: 1.4;
    font-style: italic
}

.esItem__countItem__title {
    font-size: 14px;
    color: rgba(0, 0, 0, .5)
}

.esItem {
    position: relative;
    margin-bottom: 10px;
    top: 0;
    background-color: #fff;
    background-size: 100% 100%;
    border-radius: 8px;
    transition: all .5s;
    padding: 15px;
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 142px 100px
}

.esItem .productItem {
    margin-bottom: 0
}

.esItem__name {
    font-size: 18px;
    font-weight: 500;
    color: rgba(0, 0, 0, .8);
    margin-bottom: 5px;
    line-height: 1.2;
    display: flex;
    align-items: center
}

.esItem__name .topic-i {
    background-color: #ffd9af;
    color: #a7723a;
    padding: 0 5px;
    line-height: 1.6;
    font-size: 12px;
    border-radius: 4px;
    opacity: .9;
    font-style: normal;
    margin-left: 8px;
    font-weight: normal
}

.esItem__meta {
    font-size: 12px;
    color: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    margin-top: 8px
}

.esItem__meta .size {
    background-color: #f8f8f8;
    padding: 5px 10px;
    margin-right: 10px;
    border-radius: 4px;
    line-height: 1
}

.esItem__description {
    font-size: 14px;
    color: rgba(0, 0, 0, .5);
    line-height: 1.6
}

.esItem__logo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px
}

.rateScore--list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-bottom: 10px
}

.rateScore--item {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 3px
}

.es--rateInfo {
    display: flex;
    align-items: center
}

.es--rateInfo .el-rate {
    margin-right: 5px;
    display: flex;
    align-items: center
}

.comment--item {
    padding: 15px 0;
    border-bottom: 1px solid #eee
}

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

.comment--item footer {
    font-size: 12px;
    color: rgba(0, 0, 0, .5)
}

.comment--item footer .el-icon-timer {
    margin-right: 5px
}

.comment--item header {
    display: flex;
    align-items: center;
    line-height: 1.2
}

.comment--item header .name {
    font-size: 14px
}

.comment--item header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 15px
}

.comment--item header .rate--info {
    margin-top: 5px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: rgba(0, 0, 0, .5)
}

.comment--item header .rate--info .el-rate {
    height: auto;
    display: flex;
    align-items: center;
    margin-right: 5px
}

.comment--item header .rate--info .el-rate__text {
    font-size: 12px;
    color: rgba(0, 0, 0, .5)
}

.comment--item .comment--content {
    font-size: 14px;
    line-height: 1.6;
    padding: 10px 0
}

.esProduct--title {
    color: rgba(0, 0, 0, .5)
}

.productItem {
    width: 245px;
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #f8f8f8;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1.6
}

.productItem:last-child {
    margin-right: 0
}

.productItem img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    margin-right: 10px;
    border-radius: 2px
}

.productItem .product-name {
    font-size: 14px;
    font-weight: bold
}

.productItem .product-desc {
    font-size: 12px;
    color: rgba(0, 0, 0, .5);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: 1.6;
    max-height: 1.6em;
    overflow: hidden
}

.productList {
    display: flex;
    flex-wrap: wrap;
    padding-top: 15px;
    border-top: 1px dotted #eee;
    margin-top: 15px
}

.productList .projectImg {
    width: 100%;
    height: 138px;
    font-size: 0;
    color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 4px 4px 0 0
}

.itemCompinyHeader {
    display: flex;
    align-items: flex-start
}

.companyTitle {
    flex: 1 1 auto
}

.case-item {
    width: 260px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    transition: all .3s ease;
    position: relative;
    z-index: 0;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid #eee
}

.case-item:nth-child(3n) {
    margin-right: 0
}

.case-item .actions {
    position: relative;
    z-index: 20;
    color: #fff;
    padding: 5px;
    text-align: right
}

.case-item .actions .el-icon {
    cursor: pointer;
    margin-left: 5px
}

.case-item .case-bt {
    position: absolute;
    bottom: 25px;
    left: 20px;
    width: calc(100% - 40px);
    display: flex;
    justify-content: space-between
}

.case-item .case-bt .logo {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .08)
}

.case-item .case-bt .logo img {
    width: 30px;
    height: 30px;
    object-fit: cover
}

.case-item .case-bt .industry-wrap {
    display: flex;
    align-items: center
}

.case-item .case-bt .industry-wrap .industry {
    height: 18px;
    border-radius: 4px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 400
}

.case-item .case-bt .industry-wrap .industry-size {
    background: #f4f5fa;
    color: rgba(38, 38, 38, .5)
}

.case-item:after {
    content: "";
    width: 100%;
    height: 0;
    background-color: #206cff;
    display: block;
    border-radius: 0 0 8px 8px;
    position: absolute;
    bottom: -6px;
    z-index: -1
}

.case-item .cover-wrap {
    position: relative;
    z-index: 0
}

.case-item .cover-wrap:before {
    position: absolute;
    width: 100%;
    height: 160px;
    background: rgba(0, 0, 0, .5);
    border-radius: 8px 8px 0 0;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none
}

.case-item .cover-wrap .product-name {
    position: absolute;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    padding: 0 10px;
    left: 20px;
    max-width: calc(100% - 40px);
    bottom: 16px;
    height: 22px;
    line-height: 22px;
    display: flex;
    align-items: center;
    z-index: 2;
    pointer-events: none;
    background: #ff722c;
    border-radius: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.case-item .cover-wrap .cover {
    width: 260px;
    height: 160px;
    background: rgba(0, 0, 0, .5);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    z-index: 0
}

.case-item .cover-wrap .cover .img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px 8px 0 0
}

.case-item .con-wrap {
    padding: 20px 20px 25px;
    position: relative;
    flex: 1;
    border-radius: 0 0 8px 8px;
    background-color: #fff
}

.case-item .con-wrap .title {
    font-size: 16px;
    font-weight: 500;
    color: #262626;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 8px
}

.case-item .con-wrap .content {
    font-size: 13px;
    font-weight: 400;
    height: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: rgba(38, 38, 38, .4);
    line-height: 18px
}

.productList {
    display: flex;
    flex-wrap: wrap
}

.productList .projectImg {
    width: 100%;
    height: 138px;
    font-size: 0;
    color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 4px 4px 0 0
}

.apply--title {
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    padding: 15px 0
}

.corp--content-wrap {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 5px
}

.corp--content-wrap h3 {
    line-height: 1;
    border-left: 4px solid var(--jl-main-color);
    padding-left: 6px;
    margin-bottom: 10px;
    margin-top: 0px;
    background: none !important
}

.corp--content-wrap .corp--content {
    margin-bottom: 20px;
    white-space: pre-line
}

.corp--content-wrap .postlist-item {
    box-shadow: none;
    border-bottom: 1px solid #eee;
    margin-bottom: 0
}

.corp--content-wrap .postlist-item:last-child {
    border-bottom: 0
}

.corp--content-wrap .postlist-item .post-img {
    padding-left: 0
}

.asApply--addon {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 100px;
    padding-bottom: 80px
}

.asApply--addon__right {
    background-image: url(https://image.woshipm.com/2023/04/11/0801a77a-d835-11ed-bdd7-acde48001122.png);
    width: 521px;
    height: 224.85px;
    background-size: cover;
    margin-top: 15px
}

.asApply--addon__right .title {
    font-size: 17px;
    text-align: center;
    color: #fff;
    padding: 10px;
    font-weight: bold
}

.asApply--addon__right .desc {
    font-size: 14px;
    padding: 20px
}

.asApply--addon__right .desc p {
    margin-bottom: 10px;
    margin-top: 0
}

.asApply--addon__left .title {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 20px
}

.asApply--addon__left .list .item {
    font-size: 17px;
    color: rgba(0, 0, 0, .9);
    line-height: 26px;
    margin-bottom: 20px;
    position: relative;
    padding-left: 25px
}

.asApply--addon__left .list .item::before {
    background-image: url(https://image.woshipm.com/2023/04/11/5f461a10-d836-11ed-bdd7-acde48001122.png);
    content: "";
    width: 14px;
    height: 11px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    background-size: cover;
    top: 7px
}

.esApply--content {
    padding-top: 40px;
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between
}

.esApply--content__right {
    width: 560px;
    background: #fff;
    box-shadow: 0 2px 10px 0 rgba(191, 204, 212, .3);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 40px
}

.esApply--content__right .el-form-item--small .el-form-item__label {
    line-height: 1;
    padding-bottom: 0px
}

.esApply--content__right .el-select {
    width: 100%
}

.esApply--content__right .button--esapply,
.esApply--content__right .button--contact {
    width: 100%;
    padding: 13px
}

.esApply--content__right .button--contact {
    color: #4570f7;
    background-color: #eaefff;
    border: 0;
    margin-left: 0;
    margin-top: 15px
}

.esApply--content__left {
    padding-top: 30px
}

.esApply--content__left .title {
    font-size: 32px;
    line-height: 1.5;
    font-weight: bold
}

.esApply--content__left .title.cute {
    color: var(--jl-main-color)
}

.esApply--content__left .subtitle {
    font-size: 28px;
    line-height: 1.5;
    margin-top: 20px;
    font-weight: bold
}

.esApply--content__left .subtitle span {
    color: var(--jl-main-color);
    margin-left: 8px;
    margin-right: 8px
}

.esApply--content__left .list {
    margin-top: 30px
}

.esApply--content__left .list .item {
    background-color: rgba(244, 249, 255, .7);
    border-radius: 8px;
    width: 384px;
    height: 106px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 0 25px
}

.esApply--content__left .list .item img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex: 0 0 auto;
    margin-right: 20px
}

.esApply--content__left .list .item .top {
    font-size: 19px;
    line-height: 1.5;
    font-weight: bold;
    color: rgba(0, 0, 0, .9);
    margin-bottom: 5px
}

.esApply--content__left .list .item .bottom {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(102, 102, 102, .9)
}

.esApply--contact {
    position: fixed;
    right: 10px;
    top: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.esApply--contact .icon {
    width: 36px
}

.esApply--contact .gustor {
    background-color: var(--jl-main-color);
    color: #fff;
    border-radius: 999rem;
    font-size: 12px;
    padding: 1px 12px
}

.esApply--contact .qrcode {
    max-width: 100%
}

.esApply--contact .addonArea {
    position: absolute;
    right: 100px;
    background-color: #fff;
    display: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .1);
    padding: 15px;
    width: 250px;
    box-sizing: border-box
}

.esApply--contact .addonArea--title {
    font-size: 18px;
    font-weight: bold
}

.esApply--contact .addonArea--list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px
}

.esApply--contact .addonArea--list span {
    font-size: 12px;
    color: rgba(0, 0, 0, .5);
    position: relative;
    padding-left: 25px
}

.esApply--contact .addonArea--list span::before {
    background-image: url(https://image.woshipm.com/2023/04/11/5f461a10-d836-11ed-bdd7-acde48001122.png);
    content: "";
    width: 12px;
    height: 10px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    background-size: cover;
    top: 7px
}

.esApply--contact .addonArea--note {
    font-size: 14px;
    color: rgba(0, 0, 0, .5);
    text-align: center
}

.esApply--contact:hover .addonArea {
    display: block
}

.coop--areaMeta {
    display: flex;
    align-items: center
}

.coop--location::after {
    content: "";
    margin-right: 5px
}

.coop--location:last-child::after {
    margin-right: 0
}

.coop--areaMeta {
    display: flex;
    align-items: center
}

.coop--areaMeta .el-icon {
    margin-right: 3px
}

.coop--header {
    background-color: #fff;
    margin: 0 0 20px 0;
    border-radius: 5px
}

.coop--header .inner {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 0;
    font-size: 14px;
    color: var(--jl-text-gray)
}

.coop--header .inner .support--avatar {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    margin-right: 10px
}

.coop--content {
    background-color: #fff;
    border-radius: 5px;
    margin: 0 0 20px 0
}

.coop--content h3,
.coop--content .el-descriptions__title {
    margin: 0;
    color: #303133;
    line-height: 1;
    margin-bottom: 10px;
    border-left: 3px solid var(--jl-main-color);
    padding-left: 8px;
    font-size: 16px
}

.coop--content h3+div,
.coop--content .el-descriptions__title+div {
    margin-bottom: 20px
}

.coop--title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 15px
}

.coop--status {
    font-size: 12px;
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 5px
}

.coop--navs {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0
}

.widget--coopContent {
    display: flex;
    align-items: flex-start
}

.widget--coopAvatar {
    margin-right: 5px;
    width: 48px;
    flex: 0 0 auto;
    padding-top: 5px
}

.widget--coopAvatar .avatar {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    object-fit: cover
}

.widget--coop--item {
    padding: 15px 0;
    border-bottom: 1px solid var(--jl-border-color)
}

.widget--coop--item:last-child {
    border-bottom: none
}

.widget--coop--item .user {
    font-size: 12px
}

.widget--coop--item .title {
    font-size: 14px;
    line-height: 1.4
}

.widget--coop--item .title a {
    transition: .5s
}

.widget--coop--item .title a:hover {
    text-decoration: underline;
    color: var(--jl-main-color)
}

.widget--coop--item .meta {
    font-size: 12px;
    color: var(--jl-text-light);
    display: flex;
    align-items: center;
    padding-top: 8px
}

.widget--coop--item .metaContent {
    color: #d69b0d;
    padding: 5px 12px;
    background: #fff9e9;
    line-height: 1.2;
    font-size: 12px;
    border-radius: 999rem;
    margin-right: 5px
}

.coop--item {
    padding: 15px;
    background-color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    border-radius: 4px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05)
}

.coop--item .contact--info {
    font-size: 12px;
    color: var(--jl-text-gray);
    display: flex;
    align-items: center;
    margin-top: 10px
}

.coop--item .contact--info>div {
    margin-right: 10px
}

.coop--item:last-child {
    margin-bottom: 0
}

.coop--itemAvatar {
    width: 65px;
    margin-right: 15px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5px
}

.coop--itemAvatar a {
    margin-top: 10px;
    border: 1px solid var(--jl-main-color);
    color: var(--jl-main-color);
    border-radius: 2px;
    font-size: 12px;
    line-height: 1.4;
    padding: 1px 10px
}

.coop--itemAvatar a:hover {
    background-color: var(--jl-main-color);
    color: #fff
}

.coop--itemAvatar .avatar {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%
}

.coop--itemContent {
    flex: 1 1 auto
}

.coop--item .title {
    font-size: 16px
}

.coop--item .title a {
    transition: .5s
}

.coop--item .title a:hover {
    text-decoration: underline;
    color: var(--jl-main-color)
}

.coop--item .meta {
    font-size: 12px;
    color: var(--jl-text-light);
    display: flex;
    align-items: center;
    padding-top: 8px
}

.coop--item .metaContent {
    color: #d69b0d;
    padding: 5px 12px;
    background: #fff9e9;
    line-height: 1.2;
    font-size: 12px;
    border-radius: 999rem;
    margin-right: 5px
}

.coop--item .user {
    font-size: 14px;
    color: var(--jl-text-gray);
    display: flex;
    align-items: center
}

.coop--createLink {
    font-size: 14px;
    color: var(--jl-main-color)
}

.coop--createLink:hover {
    text-decoration: underline
}

.image--list {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap
}

.image--list .image--item {
    width: 100px;
    margin-right: 15px;
    position: relative
}

.image--list .image--item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px
}

.image--list .image--item .el-icon-delete {
    cursor: pointer;
    position: absolute;
    top: -11px;
    right: -11px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 100%;
    padding: 2px
}

.coop-follower--item {
    padding: 10px;
    border-bottom: 1px solid var(--jl-border-color)
}

.coop-follower--item:last-child {
    border-bottom: 0
}

.coop-follower--item .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px
}

.coop-follower--item .title a:hover {
    text-decoration: underline;
    color: var(--jl-main-color)
}

.coop-follower--item .user {
    font-size: 14px;
    display: flex;
    align-items: center;
    color: var(--jl-text-gray);
    margin-bottom: 5px
}

.coop-follower--item .user img {
    margin-right: 10px;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    object-fit: cover
}

.coop-follower--item .meta {
    font-size: 14px;
    color: var(--jl-text-gray);
    display: flex;
    align-items: center
}

.coop-follower--item .meta .contact--info {
    display: flex;
    align-items: center
}

.coop-follower--item .meta .contact--info>div {
    margin-right: 10px
}

.contact--note {
    margin-bottom: 10px
}

.coop--notice {
    font-size: 12px;
    line-height: 16px;
    color: #8797a1;
    border-top: 1px solid #e4ebf0;
    padding-top: 15px;
    margin-top: 10px
}

.coop--notice span {
    color: #ffc552;
    margin-right: 5px
}

.coop-sdbCreate {
    background-color: var(--jl-main-color);
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    padding: 5px 25px;
    cursor: pointer
}

.coop-sdbCreateArea {
    display: flex;
    justify-content: center;
    padding: 20px 0
}

.contact--area {
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 5px
}

.article--bottomActions {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px
}

.article--bottomAction {
    margin: 0 20px;
    background: linear-gradient(to bottom, #ff5000, #ff9300);
    border-radius: 999rem !important;
    padding: 10px 35px !important;
    display: flex;
    align-items: center;
    font-size: 14px !important;
    border: 0 !important
}

.article--bottomAction .svgIcon--use {
    margin-right: 8px
}

.article--bottomAction .count {
    margin-left: 5px
}

.article--bottomAction:hover {
    background: linear-gradient(to top, #ff5000, #ff9300)
}

.article--bottomAction.button--pay {
    background: linear-gradient(to bottom, #006eff, #13adff)
}

.article--bottomAction.button--pay:hover {
    background: linear-gradient(to top, #006eff, #13adff)
}

.article--bottomAction.active {
    background: #9ba5af !important
}

.u-bold {
    font-weight: bold
}

#wpuf-insert-image-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.upload-item .progress {
    position: relative;
    height: 4px;
    background-color: #eee
}

.upload-item .progress .bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background-color: var(--jl-main-color)
}

.pm-notice-date {
    font-weight: bold;
    margin-top: 10px
}

.message--listDate {
    border-bottom: 1px solid var(--jl-border-color);
    padding-bottom: 5px
}

.message--listDate .user-message-item {
    border-bottom: 1px dotted var(--jl-border-color)
}

.message--listDate .user-message-item:last-child {
    border-bottom: none
}

.message--listDate:last-child {
    border-bottom: 0
}

.message--more {
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
    border: 1px solid var(--jl-border-color-light);
    border-radius: 3px;
    font-size: 14px;
    color: var(--jl-main-color);
    padding: 8px 0
}

.message--more:hover {
    background-color: var(--jl-border-color-light)
}

.pm-author-age {
    font-size: 12px;
    color: var(--jl-text-light)
}

.icon--hot {
    display: flex;
    align-items: center;
    padding: 2px 5px;
    border-radius: 4px;
    color: #fa455f;
    background-color: rgba(255, 20, 43, .05)
}

.icon--hot svg {
    margin-right: 5px;
    width: 14px;
    height: 14px
}

.fixed--posts {
    position: fixed;
    border-radius: 0 8px 8px 0;
    left: 0;
    bottom: 100px;
    transform: translate3d(-100%, 0, 0);
    background-color: rgba(255, 255, 255, .8);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
    transition: .5s transform;
    z-index: 100;
    width: 320px;
    padding-bottom: env(safe-area-inset-bottom)
}

.fixed--posts.active {
    transform: translate3d(0, 0, 0)
}

.fixed--post__item {
    padding: 10px;
    display: flex;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.2
}

.fixed--post__item .img-link {
    width: 110px;
    flex: 0 0 auto;
    margin-right: 10px;
    display: flex;
    align-items: center
}

.fixed--post__item .img-link img {
    border-radius: 3px
}

.fixed--post__item .content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column
}

.fixed--post__item .content .title {
    font-weight: bold;
    line-height: 1.3;
    max-height: 3.9em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.fixed--post__item .content .meta {
    font-size: 12px;
    color: rgba(0, 0, 0, .5);
    margin-top: auto;
    display: flex;
    align-items: center
}

.fixed--post__item .content .meta .rts {
    background: rgba(255, 140, 52, .1);
    color: #ff6000;
    margin-right: 8px;
    padding: 0 4px;
    border-radius: 4px
}

.qdb--dialog {
    width: 701px;
    height: 432px;
    background: #fff;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-image: url(https://image.woshipm.com/2023/06/27/ab1fde62-14b8-11ee-b89d-00163e0b5ff3.png);
    background-size: auto 432px;
    background-repeat: no-repeat;
    background-position: left center;
    display: flex
}

.qdb--dialog__contact {
    width: 442px;
    height: auto;
    background: #fff;
    flex-direction: column;
    padding: 30px;
    box-sizing: border-box
}

.qdb--dialog__contact .contact--success {
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.2
}

.qdb--dialog__contact .contact--title {
    font-weight: 400;
    font-size: 18px;
    color: #333
}

.qdb--dialog__contact .contact--desc {
    font-weight: 400;
    font-size: 14px;
    color: #7f848c;
    margin-bottom: 15px
}

.qdb--dialog__contact .contact--input {
    background: #f5f5f5;
    border-radius: 6px;
    height: 50px;
    margin-bottom: 12px;
    border: 0;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 14px;
    color: #7f848c
}

.qdb--dialog__contact .contact--submit {
    height: 50px;
    background: #4384f4;
    border-radius: 6px;
    width: 100%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    border: 0
}

.qdb--dialog .icon--close {
    background-image: url(https://image.woshipm.com/2023/06/27/a6e4d660-14bb-11ee-81f1-00163e0b5ff3.png);
    width: 14px;
    height: 14px;
    position: absolute;
    top: 20px;
    right: 20px;
    background-size: cover;
    cursor: pointer
}

.qdb--dialog .left {
    width: 360px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 50px 0 0
}

.qdb--dialog .left .h--title {
    font-weight: 600;
    font-size: 31px;
    color: #2962e4;
    text-align: center
}

.qdb--dialog .left .s--title {
    font-weight: 400;
    font-size: 18px;
    color: #333;
    text-align: center
}

.qdb--dialog .left .list {
    padding: 30px 50px
}

.qdb--dialog .left .list .item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    color: #333;
    font-size: 14px;
    font-weight: 300
}

.qdb--dialog .left .list .item img {
    width: 22px;
    height: 18.04px;
    margin-right: 10px
}

.qdb--dialog .left .list .item b {
    font-weight: 500
}

.qdb--dialog .right {
    width: 341px;
    padding: 30px;
    box-sizing: border-box
}

.qdb--dialog .right--title {
    line-height: 1;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 17px;
    color: #333
}

.qdb--dialog .right--title .avatar {
    width: 25px;
    height: 25px;
    margin-right: 10px
}

.qdb--dialog .right .qrcode--area {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    font-weight: 400;
    font-size: 14px;
    color: #7f848c;
    align-items: center;
    justify-content: center
}

.qdb--dialog .right .qrcode--area .qrcode {
    width: 180px;
    height: 180px;
    margin: 5px 0 20px
}

.qdb--dialog .right .qrcode--area b {
    color: #333;
    font-weight: bold
}

.qdb--dialog__click {
    background-image: url(https://image.woshipm.com/2023/06/30/18a749e4-171a-11ee-8bea-00163e0b5ff3.png)
}

.qdb--dialog__click .left {
    padding: 50px 30px
}

.qdb--dialog__click .left .h--title {
    font-weight: 600;
    font-size: 25px;
    color: #333;
    text-align: left;
    line-height: 1.2
}

.qdb--dialog__click .left .s--title {
    text-align: left;
    padding-top: 10px
}

.qdb--dialog__click .left .list {
    padding: 30px 0
}

.qdb--dialog__click .left .list .item {
    font-size: 16px;
    padding: 5px 0
}

.qdb--dialog__click .left .list .item b {
    color: #4384f4;
    margin-right: 5px
}

.el-autocomplete {
    width: 100%
}

.relate--fancy {
    position: relative;
    border-radius: 4px;
    overflow: hidden
}

.relate--fancy .title {
    position: absolute;
    bottom: 20px;
    left: 15px;
    right: 15px;
    line-height: 1.4;
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    z-index: 2
}

.relate--fancy img {
    display: block
}

.relate--fancy::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%)
}

.yyp--fancyText {
    background-color: #f8f8f8;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    text-decoration: none !important;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 5px;
    color: inherit !important
}

.yyp--fancyText .title {
    flex: 1 1 auto
}

.yyp--fancyText:hover {
    box-shadow: 0 2px 15px rgba(0, 0, 0, .1)
}

.yyp--fancyText:hover .title {
    text-decoration: underline !important
}

.yyp--fancyPost {
    padding: 0 25px;
    margin-bottom: 20px
}

.yyp--fancyPostBtn {
    margin-left: 10px;
    border: 1px solid var(--jl-main-color);
    color: var(--jl-main-color);
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.5;
    padding: 5px 12px;
    flex: 0 0 auto;
    font-size: 12px
}

.yyp--fancyPostBtn:hover {
    background-color: var(--jl-main-color);
    color: #fff
}

.yyp--fancyPostItem {
    background-color: #f8f8f8;
    padding: 15px;
    display: flex;
    align-items: center;
    text-decoration: none !important;
    border-radius: 5px
}

.yyp--fancyPostItem:hover {
    box-shadow: 0 2px 15px rgba(0, 0, 0, .1)
}

.yyp--fancyPostItem:hover .content .title {
    text-decoration: underline
}

.yyp--fancyPostItem .cover {
    width: 106px;
    height: 69px;
    margin-right: 10px;
    border-radius: 4px;
    object-fit: cover;
    flex: 0 0 auto
}

.yyp--fancyPostItem .content {
    flex: 1 1 auto
}

.yyp--fancyPostItem .content .title {
    font-size: 14px;
    color: rgba(0, 0, 0, .8);
    font-weight: 500
}

.yyp--fancyPostItem .content .meta {
    font-size: 12px;
    color: rgba(0, 0, 0, .5)
}

.inspiration--banner {
    background-image: url(https://image.woshipm.com/2023/08/02/db64bf12-3104-11ee-9da3-00163e0b5ff3.png);
    background-size: cover;
    box-sizing: border-box;
    padding: 30px 0
}

.inspiration--banner .hero--title {
    font-weight: 600;
    font-size: 30px;
    color: #333;
    text-align: center;
    margin: 0 0 10px
}

.inspiration--banner .hero--desc {
    font-weight: 400;
    font-size: 14px;
    color: #333;
    text-align: center;
    margin: 20px 0
}

.inspiration--nav {
    display: flex;
    justify-content: center
}

.inspiration--navItem {
    width: 173px;
    height: 70px;
    background: #fdfdfd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 12px;
    font-weight: 400;
    font-size: 16px;
    color: #333;
    cursor: pointer
}

.inspiration--navItem.is-active {
    background: var(--jl-main-color);
    color: #fff;
    cursor: not-allowed
}

.note-container {
    display: flex;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 8px 64px 0 rgba(0, 0, 0, .04), 0 1px 4px 0 rgba(0, 0, 0, .02);
    border-radius: 20px;
    background: #fff;
    transform-origin: left top;
    height: 640px;
    width: 1200px;
    margin: 50px auto
}

.inspiration--moreTitle {
    font-size: 22px;
    font-weight: bold
}

.media-container {
    position: relative;
    background: rgba(0, 0, 0, .03);
    flex-shrink: 0;
    flex-grow: 0;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    border-radius: 20px 0 0 20px;
    transform: translateZ(0);
    height: 100%;
    object-fit: contain;
    width: auto;
    width: 780px;
    position: relative;
    height: 640px
}

.media-container .arrow-controller {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    border-radius: 36px;
    z-index: 2;
    cursor: pointer;
    transition: all .3s;
    opacity: 1
}

.media-container .arrow-controller.right {
    right: 0;
    transform: translate3d(50px, 0, 0)
}

.media-container .arrow-controller.left {
    left: 0;
    transform: translate3d(-50px, 0, 0)
}

.media-container:hover .arrow-controller {
    opacity: 1;
    transform: translate3d(0, 0, 0)
}

.media-container .fraction {
    position: absolute;
    right: 28px;
    top: 24px;
    padding: 4px 8px;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    border-radius: 12px;
    z-index: 2;
    color: #fff;
    background: rgba(64, 64, 64, .25);
    backdrop-filter: saturate(150%) blur(10px);
    opacity: 1;
    transition: all .3s;
    width: auto;
    left: auto;
    bottom: auto
}

.media-container .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box
}

.media-container .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    width: 640px;
    height: 640px
}

.interactions {
    flex-shrink: 0;
    padding: 12px 0px 0px;
    border-top: 1px solid #eee;
    flex-basis: 45px;
    background-color: #fff;
    z-index: 1
}

.interactions .comment-form {
    padding: 0
}

.interactions .comment-form .comment-empty {
    width: 100%;
    border: 0;
    height: auto;
    line-height: 1.4
}

.interaction-container {
    box-sizing: border-box;
    flex-shrink: 0;
    border-radius: 0 20px 20px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
    border-left: 1px solid rgba(0, 0, 0, .08);
    width: 440px;
    padding: 20px
}

.interaction-container .respond {
    margin-bottom: 0;
    padding-bottom: 0
}

.interaction-container .note--scroller {
    transition: scroll .4s;
    overflow-y: scroll;
    flex-grow: 1;
    padding-left: 5px;
    padding-right: 5px
}

.note--header {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--jl-main-color);
    padding-bottom: 20px
}

.note--header a {
    display: flex;
    align-items: center
}

.note--header a:hover {
    color: var(--jl-hover-color)
}

.note--header .avatar {
    border-radius: 100%;
    height: 32px;
    width: 32px;
    margin-right: 8px
}

.note--header.scrolled {
    border-bottom: 1px solid #eee
}

.ins--title {
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    color: #333
}

.ins--content {
    font-weight: 400;
    font-size: 16px;
    color: #333
}

.ins--content p {
    white-space: pre-wrap;
    word-break: break-all
}

.ins--respond {
    display: flex;
    align-items: center;
    border-radius: 999rem;
    border: 1px solid #eee;
    padding: 7px
}

.ins--respond .comm-rich {
    border: 0 !important;
    padding: 0 10px !important;
    max-height: 20px;
    background-color: rgba(0, 0, 0, 0)
}

.ins--respond__submit {
    flex: 0 0 auto;
    margin-left: 5px
}

.ins--respond__submit .submit {
    border-radius: 999rem !important
}

.ins--respond__submit .submit:hover {
    border-color: var(--jl-main-color);
    color: var(--jl-main-color)
}

.blockCards__single {
    padding-bottom: 50px
}

.blockCards__single .blockCard {
    background-color: #fff
}

.ins--meta {
    font-size: 12px;
    color: #9d9d9d;
    padding-bottom: 15px;
    display: flex;
    align-items: center
}

.ins--meta .tag {
    margin-left: auto
}

.zoom-out {
    cursor: zoom-out
}

.fullscreen-img-viewer {
    background: #fff;
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2211199;
    display: block;
    width: 100%;
    height: 100%
}

.fullscreen-img-viewer .note-slider {
    width: 100%;
    height: 100%
}

.fullscreen-img-viewer .note-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain
}

.zoom-in {
    cursor: zoom-in
}

.discuss--list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 50px 0 30px
}

.discuss--item {
    border: 1px solid #f4f7fd;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff
}

.discuss--item:hover {
    box-shadow: 0 3px 14px 0 rgba(175, 197, 199, .5019607843)
}

.discuss--item .cover {
    height: 150px;
    display: flex;
    align-items: center;
    position: relative
}

.discuss--item .cover .meta {
    position: absolute;
    bottom: 10px;
    right: 16px;
    font-weight: 400;
    font-size: 12px;
    color: #fdfdfd;
    line-height: 1.2;
    display: flex;
    align-items: center
}

.discuss--item .cover .meta i {
    color: #c00;
    margin-right: 4px;
    transform: translate3d(0, -1px, 0)
}

.discuss--item .cover .prefix {
    background-color: #fdfdfd;
    width: 34px;
    height: 34px;
    border-radius: 100%;
    position: absolute;
    left: 16px;
    top: 16px;
    background-image: url(https://image.woshipm.com/2023/08/02/b63c86aa-30e8-11ee-b550-00163e0b5ff3.png);
    background-size: 17px 20px;
    background-position: center;
    background-repeat: no-repeat
}

.discuss--item .cover img {
    width: 100%;
    height: 150px;
    object-fit: cover
}

.discuss--item .cover::before {
    content: "";
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.discuss--item .content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    height: 189px;
    box-sizing: border-box
}

.discuss--item .content .title {
    font-weight: 500;
    font-size: 17px;
    color: #333;
    line-height: 1.5
}

.discuss--item .content .title:hover {
    color: var(--jl-main-color)
}

.discuss--item .content .description {
    background: #fafafa;
    border-radius: 2px;
    margin-top: auto;
    padding: 12px;
    font-weight: 400
}

.discuss--item .content .description p {
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    height: 4.8em;
    box-sizing: content-box
}

.discuss--banner {
    height: 197px;
    background-size: cover;
    background-color: #d8d8d8;
    filter: blur(34px)
}

.discuss--banner--wrapper {
    overflow: hidden;
    height: 197px
}

.discuss--hero {
    font-weight: 500;
    font-size: 20px;
    color: #0a3537;
    line-height: 1.5
}

.discuss--hero+.discuss--list {
    padding-top: 10px
}

.discuss--header {
    background: #fff;
    box-shadow: 0 2px 11px 0 rgba(237, 237, 237, .5019607843);
    position: relative;
    border-radius: 8px;
    margin-top: -150px
}

.discuss--header .content {
    display: flex;
    align-items: flex-start;
    padding: 28px
}

.discuss--header .content .cover {
    width: 286px;
    height: 172px;
    object-fit: cover;
    flex: 0 0 auto;
    margin-right: 20px
}

.discuss--header .content .detail {
    padding-top: 15px;
    flex: 1 1 auto
}

.discuss--header .content .detail .prefix {
    font-weight: 400;
    font-size: 15px;
    color: #f85354
}

.discuss--header .content .detail .title {
    font-weight: 400;
    font-size: 28px;
    color: #0a3537;
    line-height: 1.5
}

.discuss--header .content .detail .desc {
    font-weight: 400;
    line-height: 1.6;
    margin-top: 10px;
    font-size: 15px;
    color: #0a3537
}

.discuss--header .content .count {
    font-weight: 500;
    font-size: 28px;
    color: #0a3537;
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
    flex: 0 0 auto;
    line-height: 1.4
}

.discuss--header .content .count span {
    font-weight: 400;
    font-size: 15px;
    color: #0a3537
}

.prize--area {
    background-image: linear-gradient(90deg, #ebf8ff 1%, #fff8f8 100%);
    border-radius: 0 0 8px 8px;
    font-weight: 300;
    font-size: 13px;
    color: #0a3537;
    letter-spacing: 0;
    position: relative;
    padding: 15px 28px
}

.prize--area .prize {
    position: absolute;
    right: 30px;
    cursor: pointer;
    font-weight: 300;
    font-size: 13px;
    color: #0a3537;
    display: flex;
    align-items: center;
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

.prize--area .prize img {
    width: 25px;
    height: 25px;
    margin-right: 4px
}

.discuss--formTitle {
    font-weight: 500;
    font-size: 18px;
    color: #0a3537;
    margin-bottom: 5px
}

.hikari-form {
    padding-top: 10px !important
}

.hikari-form-inner .submit {
    border-radius: 999rem
}

.blockCards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
    padding: 30px 0
}

.blockCards__user {
    grid-template-columns: repeat(4, 1fr)
}

.blockCards__user .blockCard {
    background: #f4f7fd
}

.blockCard {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    position: relative
}

.blockCard:hover {
    box-shadow: 0 3px 14px 0 rgba(175, 197, 199, .5019607843)
}

.blockCard--inspiration .meta .tag {
    margin-left: auto
}

.blockCard--inspiration .meta .brand,
.blockCard--inspiration .meta .avatar {
    height: 24px;
    width: 24px;
    object-fit: cover;
    border-radius: 100%
}

.blockCard .cover {
    background-size: cover;
    height: 189px;
    position: relative
}

.blockCard .cover::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .3)
}

.blockCard .tip {
    position: absolute;
    right: 0;
    color: #fff;
    font-size: 12px;
    top: 10px;
    background-color: var(--jl-main-color);
    line-height: 1.4;
    padding: 3px 5px 3px 12px;
    border-radius: 999rem 0 0 999rem
}

.blockCard .content {
    padding: 10px 13px
}

.blockCard .content .title {
    font-weight: 500;
    font-size: 18px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 10px;
    margin-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 2.8em
}

.blockCard .content .title:hover {
    color: var(--jl-main-color)
}

.blockCard .content .meta {
    font-weight: 400;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center
}

.blockCard .content .meta .avatar {
    border-radius: 999rem;
    margin-right: 5px;
    height: 24px;
    width: 24px
}

.blockCard .content .meta .iconfont {
    margin-left: auto;
    color: #c00;
    margin-right: 4px
}

.prize--userList {
    display: flex;
    align-items: center;
    margin-top: 5px
}

.prize--userItem {
    display: flex;
    align-items: center;
    margin-right: 10px;
    font-size: 12px
}

.prize--userItem .avatar {
    border-radius: 999rem;
    margin-right: 4px;
    width: 24px;
    height: 24px;
    transition: 1.5s;
    border: 2px solid #fff
}

.prize--userItem:hover {
    text-decoration: underline
}

.prize--userItem:hover .avatar {
    transform: rotate(360deg)
}

.prize--userPrefix {
    margin-right: 5px;
    background-clip: text;
    color: rgba(0, 0, 0, 0);
    line-height: 1;
    font-weight: 600;
    background-image: linear-gradient(to right, #374559, #e3716c)
}

.hikari-list {
    display: block;
    column-count: 4;
    padding-bottom: 20px;
    column-gap: 16px
}

.hikari-list .hikari-item {
    width: auto;
    break-inside: avoid;
    margin-bottom: 16px
}

.discussComment {
    width: auto;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 16px
}

.discussComment .blockBottom {
    position: relative
}

.discussComment .blockBottom img {
    width: 40px;
    height: 22px
}

.discussComment .blockBottom .pather {
    display: flex;
    align-items: center;
    padding: 0 0 10px 20px;
    margin-top: -20px;
    font-weight: 400;
    font-size: 13px;
    color: #0a3537
}

.discussComment .blockBottom .pather .avatar {
    border-radius: 100%;
    width: 32px;
    height: 32px;
    margin-right: 6px
}

.discussComment .blockBottom .pather .hikari-btn {
    margin-left: auto !important;
    background: #fafafa !important;
    font-weight: 300;
    font-size: 13px;
    color: #333 !important;
    padding: 3px 12px
}

.discussComment .blockBottom .pather .hikari-btn svg {
    fill: #333 !important;
    border: 0
}

.discussComment .blockBottom .pather .hikari-btn.is-active {
    background-color: #20abee !important;
    color: #fff !important
}

.discussComment .blockBottom .pather .hikari-btn.is-active svg {
    fill: #fff !important
}

.discussComment .blockTop {
    padding: 15px;
    background-color: #fafafa;
    border-radius: 5px 5px 5px 0;
    font-weight: 400;
    font-size: 16px;
    color: #0a3537
}

.overlay-prize {
    padding-top: 10px
}

.overlay-prize>img {
    position: relative;
    transform: translateX(-8px)
}

.overlay-prize--content {
    background: #f4f7fa;
    border-radius: 4px;
    padding: 20px 30px;
    margin-bottom: 20px;
    margin-top: 10px
}

.overlay-prize--action {
    width: 120px;
    padding: 8px 0
}

.main--container {
    width: 1200px;
    margin-left: auto;
    margin-right: auto
}

.comment-form .submit {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #999;
    font-size: 12px;
    display: inline-block;
    padding: 4px 18px;
    cursor: pointer;
    border-radius: 3px
}

.note--scroller .comment-list .children .respond {
    padding-left: 0px
}

.article_books {
    position: relative
}

.article_books .u-booknav {
    position: sticky;
    top: 70px;
    z-index: 10;
    background: #fff;
    padding: 2px 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(70, 86, 125, .05);
    font-size: 14px
}

.article_books .u-booknav ul {
    display: flex;
    list-style: none;
    justify-content: center
}

.article_books .u-booknav ul li {
    margin: 0 15px
}

.article_books .u-booknav ul li a {
    padding: 5px 15px
}

.article_books .u-booknav ul li a.active,
.article_books .u-booknav ul li a:hover {
    background-color: #2962e4;
    color: #fff;
    border-radius: 999rem
}

.article_books .u-rounded {
    border-radius: 10px
}

.article_books .book--container {
    padding: 10px 0
}

.article_books h2 {
    font-size: 20px;
    font-weight: bold;
    padding-top: 10px;
    margin-bottom: 10px
}

.article_books .books {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px;
    padding: 40px
}

.article_books .books .book {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 15px 15px 20px;
    position: relative;
    border-radius: 10px;
    overflow: hidden
}

.article_books .books .book img {
    height: 180px;
    width: 125px;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(70, 86, 125, .15)
}

.article_books .books .book .text {
    font-size: 16px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
    font-weight: 500;
    width: 100%;
    text-align: center
}

.article_books .books .book .desc {
    font-size: 12px;
    color: #8f8f8f;
    line-height: 18px;
    width: 100%;
    height: 36px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.article_books .books .book .item-btns {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #20abee;
    color: #fff;
    text-align: center;
    line-height: 42px;
    font-size: 14px;
    display: none;
    border-radius: 0 0 10px 10px
}

.article_books .books .book:hover {
    box-shadow: 0 10px 20px rgba(70, 86, 125, .05)
}

.article_books .books .book:hover .text {
    color: #20abee;
    text-decoration: underline
}

.article_books .books .book:hover .desc {
    display: none
}

.article_books .books .book:hover .item-btns {
    display: block
}

.user--badgetItem {
    width: 20px;
    height: auto
}

.newusertagIcon {
    margin-left: 4px
}

.u-relative .newusertagIcon {
    position: absolute;
    bottom: -1px;
    right: 3px
}

.u-relative.image-link .newusertagIcon {
    position: absolute;
    bottom: -2px;
    right: -3px
}

.item {
    position: relative
}

.item:hover .login-popover {
    display: block
}

.login-popover {
    position: absolute;
    top: 25px;
    right: 0;
    border-top: 16px solid rgba(0, 0, 0, 0);
    display: none
}

.login-popover::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 12px solid #fff;
    border-left: 12px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    left: 290px;
    top: -6px;
    z-index: 1
}

.login-guide-close {
    position: absolute;
    color: #8a919f;
    top: 20px;
    right: 20px;
    cursor: pointer
}

.login-guide-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 24px;
    line-height: 24px;
    width: 100%
}

.login-guide-icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: #eaf2ff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

.login-guide-icon {
    color: #4370f5;
    width: 16px;
    height: 16px;
    margin-right: 0 !important
}

.login-guide-icon:hover {
    fill: currentColor !important
}

.login-guide-login-button {
    width: 280px;
    margin: 16px 0 8px;
    border-radius: 4px;
    height: 38px;
    border: 0;
    background-color: #4370f5;
    color: #fff
}

.login-guide-register {
    color: #8a919f;
    font-size: 13px;
    line-height: 22px;
    display: flex;
    flex-direction: row
}

.login-guide-register-button {
    margin: 0;
    font-size: 13px;
    color: #4370f5;
    cursor: pointer
}

.login-guide-list {
    display: flex;
    flex-direction: row;
    flex: 1 0 auto;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    justify-content: space-between;
    align-items: center;
    color: #515767;
    font-size: 14px;
    line-height: 22px
}

.login-guide-list-item {
    width: 130px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    align-items: center
}

.login-guide-text {
    margin-left: 8px;
    color: #666
}

.login-guide-wrap {
    width: 340px;
    padding: 20px 24px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 16px rgba(0, 0, 0, .08);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center
}

.login-guide-popup {
    position: fixed;
    bottom: 2rem;
    right: 82px;
    z-index: 1
}

.event-banner.es--slider {
    height: 400px
}

.event-banner.es--slider .hd {
    bottom: 40px
}

.event-banner.es--slider .pic li {
    background-position: top center;
    height: 400px;
    background-size: auto 400px
}

.bookmarkCats {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.bookmarkCats span {
    margin-right: 10px;
    margin-top: 10px;
    border-radius: 999rem;
    font-size: 12px;
    background-color: #f2f2f2;
    padding: 2px 15px;
    color: rgba(0, 0, 0, .6);
    cursor: pointer
}

.bookmarkCats span i {
    margin-left: 5px;
    font-style: normal;
    font-weight: normal
}

.bookmarkCats span:hover,
.bookmarkCats span.current {
    background-color: var(--jl-main-color);
    color: #fff
}

.video--list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
    grid-auto-flow: row;
    padding-top: 25px;
    padding-bottom: 25px
}

.video--item {
    background-color: #f4f7fd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    width: 235px
}

.video--item .prefix {
    display: flex;
    align-items: center;
    padding-bottom: 7px
}

.video--item .prefix .tag {
    font-size: 12px;
    color: #fff;
    background-color: #ff4d4f;
    padding: 2px 6px;
    border-radius: 5px;
    line-height: 1.4
}

.video--item:hover .cover svg {
    fill: #fff
}

.video--item .cover {
    border-radius: 5px 5px 0 0;
    display: flex;
    align-items: center;
    position: relative
}

.video--item .cover::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .3)
}

.video--item .cover img {
    height: 282px;
    object-fit: cover;
    width: 100%;
    border-radius: 5px 5px 0 0
}

.video--item .cover svg {
    width: 32px;
    height: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    fill: rgba(255, 255, 255, .6)
}

.video--item .cover .time {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    line-height: 1.2;
    padding: 3px 8px;
    border-radius: 5px
}

.video--item .content {
    padding: 10px 15px 15px;
    min-width: 0
}

.video--item .content .title {
    font-size: 16px;
    min-width: 0;
    font-weight: bold;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.video--item .content .meta {
    display: flex;
    align-items: center;
    margin-top: 10px;
    font-size: 12px;
    color: rgba(0, 0, 0, .6)
}

.video--item .content .meta .avatar {
    border-radius: 100%;
    margin-right: 6px;
    width: 24px;
    height: 24px;
    object-fit: cover
}

.video--item .content .meta time {
    margin-left: auto
}

.nav {
    /*margin-top:20px;display:flex;*/
    justify-content: center
}

@media screen and (max-width: 600px) {
    .video--list {
        display: block
    }

    .video--item {
        width: 100%;
        margin-bottom: 10px
    }

    .video--container {
        margin-top: 0px;
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px
    }
}

.user-message__title {
    font-weight: bold;
    margin-bottom: 0px;
    color: rgba(0, 0, 0, .8)
}

.featureLoadMore {
    width: 300px;
    border-radius: 999rem
}

.overlay-dialog__topics {
    max-width: 1000px !important;
    width: 1000px;
    padding: 50px !important
}

.overlay--topics {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    max-height: 500px;
    overflow-y: auto;
    padding-top: 30px
}

.overlay--topics .overlay--topic {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer
}

.overlay--topics .overlay--topic:hover .overlay--topic__title {
    color: var(--jl-main-color)
}

.overlay--topics .overlay--topic .overlay--topic__title {
    font-size: 16px;
    font-weight: bold
}

.overlay--topics .overlay--topic .overlay--topic__desc {
    font-size: 14px;
    color: rgba(0, 0, 0, .5);
    line-height: 1.3;
    max-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.overlay--topics .overlay--topic .overlay--topic__image {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 5px;
    flex: 0 0 auto;
    margin-right: 15px
}

.overlay--topics .overlay--topic .overlay--topic__content {
    text-align: left
}

.icon-num-1201,
.icon-num-1202,
.icon-num-1203,
.icon-num-1204 {
    width: 33px !important
}

.icon-num-1601 {
    width: 32px !important
}

.icon-height20 {
    height: 20px !important;
    width: auto !important
}

.harmony--card {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05);
    margin-top: 20px
}

.harmony--zhibo {
    display: flex;
    align-items: flex-start
}

.harmony--zhibo__item {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 20px
}

.harmony--zhibo__item .cat {
    position: absolute;
    color: #fff;
    background-color: #c00;
    font-size: 14px;
    padding: 2px 15px;
    top: 0;
    left: 0
}

.harmony--zhibo__item:last-child {
    margin-bottom: 0
}

.harmony--zhibo img {
    max-width: 100%
}

.harmony--zhibo__main {
    width: 800px
}

.harmony--zhibo__secondary {
    width: 380px;
    margin-left: auto;
    display: flex;
    flex-direction: column
}

.harmony--zhibo__secondary img {
    height: 215px;
    object-fit: cover;
    width: 100%
}

.module-content {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.module-content .module-item {
    max-width: calc(33.33333% - 6.66667px);
    -webkit-box-flex: 1;
    -webkit-flex: 1 1;
    flex: 1 1;
    overflow: hidden;
    border-radius: 8px;
    background-color: #fff;
    position: relative
}

.module-content .module-item .cat {
    position: absolute;
    color: #fff;
    background-color: var(--jl-main-color);
    font-size: 12px;
    padding: 2px 15px;
    top: 0;
    left: 0;
    z-index: 3
}

.module-content .module-item .cat.red {
    background-color: #c00
}

.module-content .module-item-imginfo {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative
}

.module-content .module-item-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 223px
}

.module-content .module-item-msg {
    padding: 4px 12px 12px
}

.module-content .module-item-title {
    font-size: 18px;
    font-weight: 700;
    color: #191919;
    line-height: 26px;
    margin-bottom: 4px
}

.harmony--questions__list .questionCard--item {
    width: 100%
}

.harmony--posts .postlist-item .post-img {
    padding-left: 0
}

.module-item-desc {
    font-size: 14px;
    height: 40px;
    color: #898989;
    line-height: 20px
}

.ivu-line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2
}

.classify-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: 24px;
    font-size: 0;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.classify-list>a {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1;
    flex: 1 1;
    min-width: 25%;
    max-width: calc(33.33333% - 16px)
}

.course-item {
    position: relative;
    border-radius: 4px;
    overflow: hidden
}

.course-item-msg {
    height: 88px;
    background: #fff;
    border-radius: 0 0 4px 4px;
    border: 1px solid #f4f4f4;
    padding: 4px 12px 0;
    word-break: break-all
}

.course-item-title {
    height: 24px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(0, 0, 0, .85);
    line-height: 24px;
    margin-bottom: 4px
}

.course-item-desc {
    font-size: 14px;
    color: rgba(0, 0, 0, .6);
    line-height: 20px;
    overflow: hidden
}

.course-item-img img {
    object-fit: cover;
    width: 100%;
    height: 216px
}

.course-item-action {
    display: flex;
    align-items: center;
    padding-top: 10px
}

.course-item-action span {
    background-color: var(--jl-main-color);
    color: #fff;
    padding: 2px 15px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer
}

.classify-title {
    font-size: 20px;
    font-weight: bold;
    margin: 30px 0 10px
}

.harmony--community {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px
}

.harmony--community__text {
    font-size: 14px;
    color: rgba(0, 0, 0, .6)
}

.harmony--questions__list .questionCard--item:nth-child(-n+2) .content {
    padding-top: 20px
}

.harmony--questions__list .questionCard--item:nth-child(n+5) .content {
    border-bottom: 1px;
    padding-bottom: 20px
}

.article-topAd+.article--content {
    margin-top: 20px
}

.ui-toast {
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    display: inline-block;
    padding: 0 16px;
    background: #000000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    color: #FFFFFF;
    border-radius: 6px;
    position: fixed;
    z-index: 99;
    top: 40%;
    left: 48%;
    font-size: 16px;
}

.tool {
    padding: 24px 0;
    text-align: center;
    border-top: #EEEEEE 1px solid;
}

.tool i {
    font-style: normal;
    font-size: 14px;
    color: #555555;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0 28px;
    cursor: pointer;
}

.tool b {
    font-weight: normal;
    font-size: 12px;
}

.tool .like {
    background: url('img/tool-like.png') no-repeat 0 center;
}

.tool .liked,
.tool .like:hover {
    background: url('img/tool-like-on.png') no-repeat 0 center;
    color: #FF6600;
}

.tool .hate {
    background: url('img/tool-hate.png') no-repeat 0 center;
}

.tool .hated,
.tool .hate:hover {
    background: url('img/tool-hate-on.png') no-repeat 0 center;
    color: #FF6600;
}

.tool .report {
    background: url('img/tool-report.png') no-repeat 0 center;
}

.tool .report:hover {
    background: url('img/tool-report-on.png') no-repeat 0 center;
    color: #FF6600;
}

.tool .favorite {
    background: url('img/tool-favorite.png') no-repeat 0 center;
}

.tool .favorited,
.tool .favorite:hover {
    background: url('img/tool-favorite-on.png') no-repeat 0 center;
    color: #FF6600;
}

.tool .comment {
    background: url('img/tool-comment.png') no-repeat 0 center;
}

.tool .comment:hover {
    background: url('img/tool-comment-on.png') no-repeat 0 center;
    color: #FF6600;
}

.tool .award {
    background: url('img/tool-award.png') no-repeat 0 center;
}

.tool .award:hover {
    background: url('img/tool-award-on.png') no-repeat 0 center;
    color: #FF6600;
}

.tool .share {
    background: url('img/tool-share.png') no-repeat 0 center;
}

.tool .share:hover {
    background: url('img/tool-share-on.png') no-repeat 0 center;
    color: #FF6600;
}