body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
ol,
dl,
dt,
dd,
p,
span,
div,
object,
iframe,
pre,
a,
abbr,
cite,
input,
button,
select,
option {
    margin: 0;
    padding: 0;
    font-weight: normal;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

ul,
li,
ol,
dl,
dd,
dt,
form {
    list-style: none;
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'Arial', 'SimSun'
}

html {
    height: 100%
}

body {
    background-color: #f5f6f7;
    line-height: 24px;
    font-size: 16px;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'Arial', 'SimSun'
}

img {
    border: 0;
    outline: none
}

em,
i {
    font-style: normal
}

button,
input,
textarea {
    outline: none;
    border: 0
}

textarea {
    resize: none
}

a {
    outline: none;
    text-decoration: none
}

a:link,
a:visited {
    color: #4f4f4f
}

a:hover,
a:active,
a:focus {
    text-decoration: none
}

.clearfix:after {
    content: '.';
    height: 0;
    visibility: hidden;
    display: block;
    clear: both
}

.btn {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    text-align: center;
    padding: 0 20px;
    border: 0
}

.btn:focus,
.btn:active {
    outline: none;
    border: 0;
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0)
}

.btn-small {
    font-size: 14px;
    min-width: 80px
}

.btn-large {
    font-size: 16px;
    min-width: 100px
}

.btn-red {
    color: #fff;
    background: #e41d1d
}

.btn-gray {
    color: #666;
    background: #e5e5e5
}

.btn-gray-fred,
.btn-gray-fred:link,
.btn-gray-fred:visited,
.btn-gray-fred:focus {
    font-size: 16px;
    color: #de686d;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #de686d;
    line-height: 30px
}

.btn-gray-fred:hover,
.btn-gray-fred:active {
    color: #fff;
    background: #de686d
}

.btn-empty {
    display: inline-block;
    height: 24px;
    line-height: 22px;
    text-align: center;
    padding: 0 20px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    font-size: 12px;
    color: #e41d1d;
    background: rgba(0, 0, 0, 0)
}

.btn-noborder {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    color: #888;
    padding: 0 0;
    border: 0;
    background: rgba(0, 0, 0, 0)
}

.btn-noborder:hover,
.btn-noborder:active {
    background: rgba(0, 0, 0, 0)
}

.btn-redborder {
    display: inline-block;
    height: 32px;
    border-radius: 4px;
    min-width: 90px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #e41d1d;
    padding: 0 20px;
    border: 1px solid #e41d1d;
    background: #fff
}

.btn-redborder:link,
.btn-redborder:visited {
    color: #e41d1d
}

.btn-redborder:hover,
.btn-redborder:active,
.btn-redborder:focus {
    color: #fff;
    background: #e41d1d
}

.btn-redborder-small {
    display: inline-block;
    height: 24px;
    border-radius: 4px;
    min-width: 52px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    color: #e41d1d;
    padding: 0 20px;
    border: 1px solid #de686d;
    background: #f3f7f9
}

.btn-redborder-small:link,
.btn-redborder-small:visited {
    color: #e41d1d
}

.btn-redborder-small:hover,
.btn-redborder-small:active,
.btn-redborder-small:focus {
    color: #fff;
    background: #e41d1d
}

.dropdown-menu {
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    border: 1px #e5e5e5 solid
}

html body .floatL {
    float: left
}

html body .floatR {
    float: right
}

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

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

.pulllog-box {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999999;
    height: 64px;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    color: #fff;
    background: rgba(88, 105, 120, 0.9)
}

.pulllog-box .pulllog {
    margin: 0 auto
}

.pulllog-box .pulllog .text {
    line-height: 2
}

.pulllog-box .pulllog .pulllog-btn div {
    width: 80px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer
}

.pulllog-box .pulllog .pulllog-btn div a {
    color: #fff
}

.pulllog-box .pulllog .pulllog-btn .pulllog-login {
    background: #58bace;
    margin-right: 24px;
    border-radius: 4px
}

.pulllog-box .pulllog .pulllog-btn .pulllog-sigin {
    background: #e66666
}

.pulllog-box .iconb {
    line-height: 3;
    margin-top: -44px
}

.pulllog-box .iconb i {
    cursor: pointer
}

@media (max-width:1366px) {
    .pulllog {
        padding-right: 40px
    }
}

.odd-overhidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

body #loginWrap {
    display: none;
    position: fixed;
    z-index: 9999999;
    border: 1px solid #dcdcdc;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -200px;
    opacity: 1;
    background: none 0 0 repeat scroll #fff
}

body #dlMask {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999998;
    left: 0;
    top: 0;
    opacity: .3;
    display: none
}

@font-face {
    font-family: 'DINCond-Black';
    src: url("https://csdnimg.cn/release/blogv2/dist/pc/fonts/DINCond-Black.ttf")
}

#user-ordertip .commodity_desc .btn {
    line-height: 36px !important
}

aside {
    width: 300px;
    float: left
}

aside .mb8 {
    margin-bottom: 8px
}

aside div.aside-box {
    margin-bottom: 8px;
    background-color: #fff;
    border-radius: 2px
}

aside div.aside-box.custom-box img {
    max-width: 100%
}

aside div.aside-box.custom-box .aside-content a:hover {
    color: #5094d5
}

aside div.aside-box a {
    color: #555666;
    cursor: pointer
}

aside div.aside-box h3.aside-title {
    position: relative;
    padding: 16px 16px 0;
    font-size: 14px;
    color: #333;
    font-weight: bold
}

aside div.aside-box h3.aside-title .subscribe-column-box {
    text-align: right;
    position: absolute;
    right: 0;
    top: 0;
    padding: 15px 16px 0
}

aside div.aside-box h3.aside-title .subscribe-column-box .tip-subscribe-column {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: relative
}

aside div.aside-box h3.aside-title .subscribe-column-box .tip-subscribe-column:hover {
    cursor: pointer
}

aside div.aside-box h3.aside-title .subscribe-column-box .tip-subscribe-column .tip {
    display: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    width: 282px;
    height: 248px;
    background: #fff;
    -webkit-box-shadow: 0 -3px 4px 0 rgba(184, 184, 184, 0.43);
    box-shadow: 0 -3px 4px 0 rgba(184, 184, 184, 0.43);
    border: 1px solid #9bd2fd;
    top: 30px;
    left: -137px;
    z-index: 3000;
    text-align: justify;
    line-height: 18px;
    font-size: 12px;
    border-radius: 4px;
    color: #4d4d4d;
    padding: 16px;
    line-height: 18px
}

aside div.aside-box h3.aside-title .subscribe-column-box .tip-subscribe-column .tip .text {
    margin-bottom: 8px
}

aside div.aside-box h3.aside-title .subscribe-column-box .tip-subscribe-column .tip .bt-close {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    right: 14px;
    top: 14px
}

aside div.aside-box h3.aside-title .subscribe-column-box .tip-subscribe-column .tip .bt-close:hover {
    cursor: pointer
}

aside div.aside-box h3.aside-title .subscribe-column-box .tip-subscribe-column .tip .bt-close svg {
    display: block;
    width: 10px;
    height: 10px;
    fill: #b8b8b8 !important
}

aside div.aside-box h3.aside-title .subscribe-column-box .tip-subscribe-column .tip .bar {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    left: 130px;
    top: -7px
}

aside div.aside-box h3.aside-title .subscribe-column-box .tip-subscribe-column .tip:before {
    position: absolute;
    content: '';
    width: 10px;
    height: 1px;
    background: #9bd2fd;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 131px;
    top: -5px
}

aside div.aside-box h3.aside-title .subscribe-column-box .tip-subscribe-column .tip:after {
    position: absolute;
    content: '';
    width: 10px;
    height: 1px;
    background: #9bd2fd;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 131px;
    top: -5px
}

aside div.aside-box h3.aside-title .subscribe-column-box .tip-subscribe-column svg {
    width: 14px;
    height: 14px;
    vertical-align: middle
}

aside div.aside-box h3.aside-title .subscribe-column-box .bt-subscribe-column {
    display: inline-block;
    margin-left: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 65px;
    height: 24px;
    border-radius: 2px;
    border: 1px solid #ca0a16;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    line-height: 24px;
    color: #ca0a16
}

aside div.aside-box div.aside-content {
    padding: 12px 16px 16px 16px;
    overflow: hidden
}

aside div.aside-box div.aside-content .tracking-click li a {
    display: block;
    width: 100%;
    position: relative
}

aside div.aside-box div.aside-content .tracking-click li a svg {
    position: absolute;
    left: 0;
    top: 3px
}

aside div.aside-box div.aside-content * {
    word-wrap: break-word
}

aside #asideProfile.active .profile-intro .user-info {
    padding-top: 0
}

aside #asideProfile.active .avatar-box {
    width: 50px !important;
    height: 50px !important;
    position: relative
}

aside #asideProfile.active .avatar-box .avatar_pic {
    width: 50px !important;
    height: 50px !important
}

aside #asideProfile.active .avatar-box .identity {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 0;
    right: 0
}

aside #asideProfile.active .profile-intro {
    padding-bottom: 0 !important
}

aside #asideProfile.active .profile-intro .user-info span.name,
aside #asideProfile.active .profile-intro .user-info span.name:hover {
    color: #222226;
    font-size: 18px;
    font-weight: 600
}

aside #asideProfile.active .profile-intro-name-boxFooter-new {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 8px
}

aside #asideProfile.active .profile-intro-name-leve {
    margin-right: 4px
}

aside #asideProfile.active .profile-intro-name-leve,
aside #asideProfile.active .profile-intro-name-years {
    padding: 0 4px;
    display: inline-block;
    border-radius: 2px;
    background: #f5f6f7;
    color: #555666;
    font-family: 'PingFang SC';
    font-size: 13px;
    font-style: normal;
    font-weight: 400
}

aside #asideProfile.active .profile-intro-name-leve img,
aside #asideProfile.active .profile-intro-name-years img {
    width: 18px;
    vertical-align: text-bottom
}

aside #asideProfile.active .profile-intro-Identity-information {
    padding: 0 16px;
    padding-top: 6px
}

aside #asideProfile.active .profile-intro-Identity-information .profile-information-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 10px;
    position: relative
}

aside #asideProfile.active .profile-intro-Identity-information .profile-information-box img {
    width: 20px;
    height: 20px;
    margin-right: 4px
}

aside #asideProfile.active .profile-intro-Identity-information .profile-information-box>span {
    color: #222226;
    font-size: 14px;
    font-weight: 400;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

aside #asideProfile.active .profile-intro-Identity-information .profile-information-box .profile-mask-box {
    position: absolute;
    width: 244px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding-bottom: 10px;
    display: none
}

aside #asideProfile.active .profile-intro-Identity-information .profile-information-box .profile-mask-box>p {
    width: 244px;
    padding: 6px 8px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.8);
    font-size: 12px;
    font-weight: 400;
    border-radius: 4px;
    color: #fff !important
}

aside #asideProfile.active .profile-intro-Identity-information .profile-information-box .profile-mask-box::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
    display: inline-block;
    border-width: 0 7px 6px 7px;
    left: 50%;
    bottom: 5px;
    -webkit-transform: translateX(-50%) rotate(180deg);
    transform: translateX(-50%) rotate(180deg);
    z-index: 10
}

aside #asideProfile.active .profile-intro-rank-information {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 76px;
    margin: 0 16px;
    margin-top: 16px;
    border-radius: 2px;
    background: #fafafa;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

aside #asideProfile.active .profile-intro-rank-information dl {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center
}

aside #asideProfile.active .profile-intro-rank-information dl dd {
    color: #222226;
    font-size: 15px;
    font-weight: 500 !important
}

aside #asideProfile.active .profile-intro-rank-information dl dd span {
    font-weight: 500 !important
}

aside #asideProfile.active .profile-intro-rank-information dl dt {
    margin-top: 4px;
    color: #555666;
    font-size: 13px;
    font-weight: 400
}

aside #asideProfile.active .profile-intro-name-boxOpration {
    margin-top: 8px
}

aside #asideProfile.active .profile-intro-name-boxOpration #btnAttent {
    background: #fc5531 !important;
    border: none !important;
    color: #fff !important
}

aside #asideProfile.active .opt-letter-watch-box {
    width: 120px
}

aside #asideProfile.active .opt-letter-watch-box .personal-letter,
aside #asideProfile.active .opt-letter-watch-box .personal-watch {
    width: 120px;
    height: 32px;
    line-height: 32px !important;
    border-radius: 16px
}

aside #asideProfile {
    padding-bottom: 10px
}

aside #asideProfile .profile-intro {
    padding: 16px 16px 6px 16px
}

aside #asideProfile .profile-intro .profile-intro-name-box {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

aside #asideProfile .profile-intro .profile-intro-name-box .identity {
    height: 20px;
    margin-right: 2px;
    vertical-align: bottom
}

aside #asideProfile .profile-intro .profile-intro-name-boxTop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

aside #asideProfile .profile-intro .profile-intro-name-boxFooter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

aside #asideProfile .profile-intro .profile-intro-name-boxFooter .profile-intro-name-boxOpration {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 20px
}

aside #asideProfile .profile-intro .profile-intro-name-boxFooter .profile-intro-name-boxOpration #btnAttent {
    margin-bottom: 0;
    text-decoration: none;
    width: 48px;
    height: 24px;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    line-height: 22px
}

aside #asideProfile .profile-intro .personal-address-box {
    margin-top: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

aside #asideProfile .profile-intro .personal-address-box .address {
    font-size: 13px;
    color: #999aaa;
    line-height: 20px;
    position: relative
}

aside #asideProfile .profile-intro .personal-address-box .address:hover .con {
    display: block
}

aside #asideProfile .profile-intro .personal-address-box .address .con {
    position: absolute;
    display: none;
    left: -58px;
    top: 24px;
    width: 272px;
    background: #fff;
    -webkit-box-shadow: 0 1px 8px 0 #e8e8ed;
    box-shadow: 0 1px 8px 0 #e8e8ed;
    border-radius: 2px;
    font-size: 12px;
    color: #222226;
    line-height: 18px;
    padding: 6px 8px 6px 10px
}

aside #asideProfile .profile-intro .personal-address-box .address .con::before {
    position: absolute;
    left: 114px;
    top: -12px;
    content: '';
    width: 0;
    height: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 6px 6px;
    border-color: transparent transparent #e8e8ed transparent
}

aside #asideProfile .profile-intro .personal-address-box .address .con::after {
    position: absolute;
    left: 113px;
    top: -12px;
    content: '';
    width: 0;
    height: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 7px 7px 7px;
    border-color: transparent transparent #fff transparent
}

aside #asideProfile .profile-intro .avatar-box {
    position: relative;
    width: 48px;
    height: 48px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

aside #asideProfile .profile-intro .avatar-box img.avatar_pic {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%
}

aside #asideProfile .profile-intro .avatar-box .memberhead {
    width: 24px;
    height: 15px;
    position: absolute;
    top: -12px;
    left: 12px
}

aside #asideProfile .profile-intro .avatar-box svg {
    width: 24px;
    position: absolute;
    top: -16px;
    left: 12px;
    display: none
}

aside #asideProfile .profile-intro .user-info {
    margin-left: 8px;
    width: 156px;
    position: relative;
    padding-top: 4px
}

aside #asideProfile .profile-intro .user-info .personal-home-page {
    color: #999aaa;
    font-size: 13px;
    line-height: 20px;
    height: 20px;
    overflow: hidden
}

aside #asideProfile .profile-intro .user-info .personal-home-page a.personal-home-certification {
    padding-left: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

aside #asideProfile .profile-intro .user-info .personal-home-page a.personal-home-certification img {
    height: 14px;
    margin-right: 4px;
    vertical-align: -2px
}

aside #asideProfile .profile-intro .user-info .personal-home-years {
    min-width: 62px
}

aside #asideProfile .profile-intro .user-info span.name {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

aside #asideProfile .profile-intro .user-info span.name:hover {
    color: #fc5531
}

aside #asideProfile .profile-intro .user-info span.vip-name {
    color: #bb9444
}

aside #asideProfile .profile-intro .user-info span.vip-name:hover {
    color: #fc5531
}

aside #asideProfile .profile-intro .user-info #uid {
    white-space: inherit;
    margin-right: 6px;
    overflow: hidden
}

aside #asideProfile .profile-intro .user-info p.name a {
    display: inline-block;
    color: #3d3d3d;
    font-weight: 700;
    max-width: 150px;
    max-height: 66px;
    overflow: hidden;
    word-wrap: break-word
}

aside #asideProfile .profile-intro .user-info .flag {
    position: relative
}

aside #asideProfile .profile-intro .user-info .flag .bubble {
    display: none;
    width: 134px;
    position: absolute;
    top: 28px;
    left: -42px;
    z-index: 9;
    padding: 8px 6px;
    line-height: 12px;
    text-align: center;
    background-color: rgba(15, 15, 15, 0.8);
    font-size: 12px;
    border-radius: 4px;
    color: #fff
}

aside #asideProfile .profile-intro .user-info .flag .bubble:before {
    content: ' ';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 7px;
    border-color: transparent transparent rgba(15, 15, 15, 0.8);
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -7px
}

aside #asideProfile .profile-intro .user-info .expert-blog:hover .bubble {
    display: block
}

aside #asideProfile .profile-intro .user-info .company-blog:hover .bubble {
    display: block
}

aside #asideProfile .profile-intro .opt-box {
    width: 48px;
    height: 24px
}

aside #asideProfile .profile-intro .opt-box a.btn {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    width: 48px;
    height: 24px;
    min-width: auto;
    font-size: 12px
}

aside #asideProfile .profile-intro .opt-box a.btn#btnAsk {
    margin-bottom: 0
}

aside #asideProfile .data-info {
    padding: 9px 10px
}

aside #asideProfile .data-info.item-tiling dl:hover a>.font {
    color: #fc5531
}

aside #asideProfile .data-info.item-tiling .count {
    color: #4a4d52;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px
}

aside #asideProfile .data-info.item-tiling dd {
    color: #999aaa;
    font-size: 14px;
    line-height: 22px;
    padding: 3px 0
}

aside #asideProfile .data-info.item-tiling dd.font {
    color: #222226
}

aside #asideProfile .data-info.item-tiling a {
    color: #999aaa !important
}

aside #asideProfile .data-info.item-tiling .level {
    width: 22px;
    height: 22px;
    vertical-align: -6px
}

aside #asideProfile .item-rank {
    height: 1px;
    background-color: #f5f6f7;
    width: 268px;
    margin: auto
}

aside #asideProfile .aside-box-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 16px
}

aside #asideProfile .aside-box-footer .aside-box-footerClassify dt {
    display: inline
}

aside #asideProfile .aside-box-footer .aside-box-footerClassify dd {
    display: inline
}

aside #asideProfile .aside-box-footer .aside-box-footerClassify dd svg.icon {
    font-size: 18px
}

aside #asideProfile .badge-box {
    position: relative;
    width: 100%
}

aside #asideProfile .badge-box>span {
    margin-right: 2px
}

aside #asideProfile .badge-box .badge {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

aside #asideProfile .badge-box .icon-badge {
    display: block;
    margin-right: 2px;
    cursor: pointer
}

aside #asideProfile .badge-box .icon-badge div.mouse-box {
    position: relative
}

aside #asideProfile .badge-box .icon-badge div.mouse-box img {
    width: 36px;
    height: 36px
}

aside #asideProfile .grade-box {
    margin-top: -8px;
    padding: 16px
}

aside #asideProfile .grade-box .visit-middle {
    width: 34%
}

aside #asideProfile .grade-box dl:nth-child(odd) {
    width: 55%
}

aside #asideProfile .grade-box dl:nth-child(even) {
    width: 45%
}

aside #asideProfile .grade-box dl {
    margin-top: 8px;
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

aside #asideProfile .grade-box dl dt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

aside #asideProfile .grade-box dl dd {
    font-weight: 600;
    margin-left: 6px
}

aside #asideProfile .grade-box dl dd svg.icon {
    font-size: 18px
}

aside .swiper-remuneration-container,
aside .swiper-slide-box-remuneration {
    width: 100%;
    height: 138px;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px
}

aside .swiper-remuneration-container img,
aside .swiper-slide-box-remuneration img {
    width: 100%;
    height: 138px
}

aside .swiper-remuneration-container .swiper-remuneration-button-prev,
aside .swiper-slide-box-remuneration .swiper-remuneration-button-prev {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -8px;
    cursor: pointer;
    z-index: 10
}

aside .swiper-remuneration-container .swiper-remuneration-button-next,
aside .swiper-slide-box-remuneration .swiper-remuneration-button-next {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
    cursor: pointer
}

aside .swiper-remuneration-container .swiper-remuneration-pagination,
aside .swiper-slide-box-remuneration .swiper-remuneration-pagination {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center
}

aside .swiper-remuneration-container .swiper-remuneration-pagination .swiper-pagination-bullet,
aside .swiper-slide-box-remuneration .swiper-remuneration-pagination .swiper-pagination-bullet {
    width: 24px;
    height: 4px;
    border-radius: 0;
    background: #fff
}

aside .c-blog-side-box {
    margin-bottom: 10px;
    background: -webkit-gradient(linear, left top, left bottom, from(#b8b6ff), color-stop(28%, #fff));
    background: linear-gradient(180deg, #b8b6ff 0%, #fff 28%)
}

aside .c-blog-side-box .c-blog-side-box-title {
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

aside .c-blog-side-box .c-blog-side-box-title img {
    height: 18px
}

aside .c-blog-side-box .c-blog-side-box-title span {
    display: block;
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 600;
    margin-left: 6px
}

aside .c-blog-side-box .c-blog-side-box-content {
    padding: 16px;
    padding-top: 0
}

aside .c-blog-side-box .c-blog-side-box-content a {
    display: block;
    background: #f7f7f7;
    border-radius: 6px;
    height: 46px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px
}

aside .c-blog-side-box .c-blog-side-box-content a .c-blog-side-box-content-title {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    color: #1a1a1a
}

aside .c-blog-side-box .c-blog-side-box-content a img {
    width: 16px
}

aside #remuneration {
    display: none;
    margin-bottom: 8px
}

aside #remuneration img {
    height: 138px
}

aside #asideHotArticle ul.hotArticle-list,
aside #asideProjectArticle ul.hotArticle-list,
aside #thirdProjectArticle ul.hotArticle-list {
    margin-top: -8px
}

aside #asideHotArticle ul.hotArticle-list li,
aside #asideProjectArticle ul.hotArticle-list li,
aside #thirdProjectArticle ul.hotArticle-list li {
    margin-top: 8px
}

aside #asideHotArticle ul.hotArticle-list li a,
aside #asideProjectArticle ul.hotArticle-list li a,
aside #thirdProjectArticle ul.hotArticle-list li a {
    display: block;
    word-wrap: break-word;
    color: #555666
}

aside #asideHotArticle ul.hotArticle-list li a:hover,
aside #asideProjectArticle ul.hotArticle-list li a:hover,
aside #thirdProjectArticle ul.hotArticle-list li a:hover {
    color: #fc5531
}

aside #asideHotArticle ul.hotArticle-list li a .read,
aside #asideProjectArticle ul.hotArticle-list li a .read,
aside #thirdProjectArticle ul.hotArticle-list li a .read {
    font-size: 12px;
    color: #999aaa;
    line-height: 24px
}

aside #asideHotArticle ul.hotArticle-list li a img,
aside #asideProjectArticle ul.hotArticle-list li a img,
aside #thirdProjectArticle ul.hotArticle-list li a img {
    width: 14px;
    height: 14px;
    vertical-align: -3px;
    margin-right: 3px;
    margin-left: 4px
}

aside #asideHotArticle ul.project-article-list li,
aside #asideProjectArticle ul.project-article-list li,
aside #thirdProjectArticle ul.project-article-list li {
    margin-top: 12px
}

aside #asideHotArticle ul.project-article-list li a,
aside #asideProjectArticle ul.project-article-list li a,
aside #thirdProjectArticle ul.project-article-list li a {
    padding-left: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 20px;
    color: #1a1a1a;
    font-weight: 500
}

aside #asideHotArticle ul.project-article-list li a span.icon-index,
aside #asideProjectArticle ul.project-article-list li a span.icon-index,
aside #thirdProjectArticle ul.project-article-list li a span.icon-index {
    margin-right: 8px;
    margin-left: -24px;
    background-color: #b5b5b5;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    border-radius: 4px;
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    font-weight: 600;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

aside #asideHotArticle ul.project-article-list li a span.title-text,
aside #asideProjectArticle ul.project-article-list li a span.title-text,
aside #thirdProjectArticle ul.project-article-list li a span.title-text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 20px;
    word-break: break-all
}

aside #asideHotArticle ul.project-article-list li:nth-child(1) a span.icon-index,
aside #asideProjectArticle ul.project-article-list li:nth-child(1) a span.icon-index,
aside #thirdProjectArticle ul.project-article-list li:nth-child(1) a span.icon-index {
    background-color: #fc5531 !important
}

aside #asideHotArticle ul.project-article-list li:nth-child(2) a span.icon-index,
aside #asideProjectArticle ul.project-article-list li:nth-child(2) a span.icon-index,
aside #thirdProjectArticle ul.project-article-list li:nth-child(2) a span.icon-index {
    background-color: #fc8931 !important
}

aside #asideHotArticle ul.project-article-list li:nth-child(3) a span.icon-index,
aside #asideProjectArticle ul.project-article-list li:nth-child(3) a span.icon-index,
aside #thirdProjectArticle ul.project-article-list li:nth-child(3) a span.icon-index {
    background-color: #fcb231 !important
}

aside #asideHotArticle .btn-more,
aside #asideProjectArticle .btn-more,
aside #thirdProjectArticle .btn-more {
    padding: 6px 0;
    margin-top: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    background-color: transparent;
    border: none;
    color: #000;
    font-size: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    color: #666;
    line-height: 17px
}

aside #asideHotArticle .btn-more img,
aside #asideProjectArticle .btn-more img,
aside #thirdProjectArticle .btn-more img {
    margin-left: 2px;
    display: block;
    width: 12px;
    height: 12px
}

aside #asideArchive.flexible-box div.aside-content {
    max-height: 255px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

aside #asideArchive ul {
    margin-top: -12px
}

aside #asideArchive ul li {
    margin-top: 12px
}

aside #asideArchive ul li a {
    display: block;
    color: #555666
}

aside #asideArchive ul li a:hover {
    color: #fc5531
}

aside #asideArchive ul li a .title {
    width: 185px;
    float: left
}

aside #asideArchive ul li a span.count {
    font-size: 12px;
    color: #999aaa
}

aside #asideArchive ul li a img {
    float: left;
    width: 28px;
    height: 28px;
    margin-right: 12px;
    border-radius: 4px
}

aside #asideArchive ul li.indentation {
    margin-left: 32px
}

aside #asideArchive ul li.indentation a .title {
    width: 153px;
    float: left
}

aside #asideArchive .aside-content {
    padding: 12px 6px 16px 16px
}

aside #asideArchive .archive-box {
    overflow: hidden;
    overflow-y: auto;
    margin-right: -4px;
    margin-left: -3px;
    scrollbar-width: thin;
    max-height: 248px;
    margin-top: 8px
}

aside #asideArchive .archive-box::-webkit-scrollbar {
    width: 3px
}

aside #asideArchive .archive-box::-webkit-scrollbar-thumb {
    width: 3px;
    height: 60px;
    background-color: rgba(153, 154, 170, 0.3);
    border-radius: 2px
}

aside #asideArchive .archive-title {
    font-size: 14px;
    line-height: 22px;
    color: #4a4d52;
    margin-bottom: 8px;
    padding: 0 6px
}

aside #asideArchive .archive-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

aside #asideArchive .archive-item {
    width: 56px;
    margin-right: 6px;
    margin-left: 6px;
    margin-bottom: 12px
}

aside #asideArchive .archive-item a:hover .count {
    color: #fc5531
}

aside #asideArchive .archive-item span {
    display: block
}

aside #asideArchive .archive-item span.time {
    height: 22px;
    background-color: #edf0f3;
    border-radius: 6px 6px 0 0;
    opacity: .8;
    color: #999aaa;
    line-height: 22px;
    margin-bottom: 1px;
    text-align: center
}

aside #asideArchive .archive-item span.count {
    height: 22px;
    background-color: #f6f8fa;
    border-radius: 0 0 6px 6px;
    color: #555666;
    line-height: 20px;
    font-weight: 500;
    text-align: center
}

aside #asideArchive .archive-bar {
    background: #f0f0f0;
    height: 1px;
    margin: 12px 0
}

aside #asideArchive .archive-list-item {
    padding: 4px 0 4px 6px;
    width: 50%;
    float: left
}

aside #asideArchive .archive-list-item:hover .year,
aside #asideArchive .archive-list-item:hover .num {
    color: #fc5531
}

aside #asideArchive .archive-list-item .year,
aside #asideArchive .archive-list-item .num {
    color: #4a4d52;
    line-height: 22px
}

aside #asideArchive .archive-list-item .year {
    margin-right: 8px
}

aside #asideArchiveNew .aside-content {
    padding: 12px 16px 16px 16px
}

aside #asideArchiveNew .archive-title {
    font-size: 14px;
    line-height: 22px;
    color: #4a4d52;
    margin-bottom: 8px;
    padding: 0;
    font-weight: 500;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

aside #asideArchiveNew .archive-title.border-top {
    border-top: 1px solid #f2f2f2;
    padding-top: 12px;
    margin-bottom: 12px;
    margin-top: 12px
}

aside #asideArchiveNew .archive-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

aside #asideArchiveNew .archive-item {
    width: 58px;
    padding-right: 1px;
    padding-left: 1px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

aside #asideArchiveNew .archive-item a:hover .count {
    color: #fc5531
}

aside #asideArchiveNew .archive-item span {
    display: block
}

aside #asideArchiveNew .archive-item span.time {
    height: 22px;
    background-color: #edf0f3;
    border-radius: 6px 6px 0 0;
    opacity: .8;
    color: #999aaa;
    line-height: 22px;
    margin-bottom: 1px;
    text-align: center
}

aside #asideArchiveNew .archive-item span.count {
    height: 22px;
    background-color: #f6f8fa;
    border-radius: 0 0 6px 6px;
    color: #555666;
    line-height: 20px;
    font-weight: 500;
    text-align: center
}

aside #asideArchiveNew .archive-bar {
    background: #f0f0f0;
    height: 1px;
    margin: 12px 0
}

aside #asideArchiveNew .archive-list-item-container {
    padding: 0 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

aside #asideArchiveNew .archive-list-item-container.no-swiper {
    padding: 0
}

aside #asideArchiveNew .archive-list-item-container.no-swiper .swiper {
    width: 100%
}

aside #asideArchiveNew .archive-list-item-container.no-swiper .archive-list-item {
    text-align: left
}

aside #asideArchiveNew .archive-list-item-container .swiper {
    width: 220px
}

aside #asideArchiveNew .archive-list-item-container .swiper-prev {
    margin-left: -24px
}

aside #asideArchiveNew .archive-list-item-container .swiper-next {
    margin-right: -24px
}

aside #asideArchiveNew .swiper-archive-content-box {
    padding: 0 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

aside #asideArchiveNew .swiper-archive-content-box .swiper {
    width: 232px
}

aside #asideArchiveNew .swiper-archive-content-box .swiper-prev {
    margin-left: -18px
}

aside #asideArchiveNew .swiper-archive-content-box .swiper-next {
    margin-right: -18px
}

aside #asideArchiveNew .swiper-archive-content-box.no-swiper {
    padding: 0
}

aside #asideArchiveNew .swiper-archive-content-box.no-swiper .swiper {
    width: 100%
}

aside #asideArchiveNew .swiper-archive-content-box.no-swiper .archive-item {
    padding: 0 6px
}

aside #asideArchiveNew .swiper-archive-content-box.no-swiper .archive-item:first-child {
    padding-left: 0
}

aside #asideArchiveNew .swiper-archive-content-box.no-swiper .archive-item:last-child {
    padding-right: 0
}

aside #asideArchiveNew .archive-list-item {
    width: 50%;
    padding: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: center
}

aside #asideArchiveNew .archive-list-item:hover .year,
aside #asideArchiveNew .archive-list-item:hover .num {
    color: #fc5531
}

aside #asideArchiveNew .archive-list-item .year,
aside #asideArchiveNew .archive-list-item .num {
    color: #4a4d52;
    line-height: 22px
}

aside #asideArchiveNew .archive-list-item .year {
    margin-right: 8px
}

aside #asideArchiveNew .swiper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow: hidden
}

aside #asideArchiveNew .swiper .swiper-content {
    width: 220px;
    overflow: hidden
}

aside #asideArchiveNew .swiper .swiper-wrapper {
    width: 100%;
    height: 100%
}

aside #asideArchiveNew .swiper-btn {
    position: relative;
    width: 16px;
    height: 16px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    cursor: pointer;
    color: #666;
    z-index: 10
}

aside #asideArchiveNew .swiper-btn.swiper-button-disabled {
    color: #ccc
}

aside #asideArchiveNew .swiper-btn.swiper-button-disabled:hover {
    color: #ccc
}

aside #asideArchiveNew .swiper-btn:hover {
    color: #fc5531
}

aside #asideArchiveNew .swiper-btn .icon-swiper-btn {
    width: 16px;
    height: 16px;
    fill: currentColor
}

aside #asideCategory.flexible-box .aside-content {
    max-height: 208px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

aside #asideCategory.flexible-box .aside-content::after {
    bottom: 0
}

aside #asideCategory.flexible-box-new .aside-content {
    max-height: 208px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #999aaa transparent
}

aside #asideCategory.flexible-box-new .aside-content::-webkit-scrollbar {
    width: 6px;
    background-color: transparent
}

aside #asideCategory.flexible-box-new .aside-content::-webkit-scrollbar-thumb {
    background-color: #999aaa;
    border-radius: 3px
}

aside #asideCategory.flexible-box-new .aside-content::-webkit-scrollbar-track {
    background-color: transparent
}

aside #asideCategory.flexible-box-new .aside-content::after {
    bottom: 0
}

aside #asideCategory .aside-content {
    position: relative
}

aside #asideCategory .aside-content::after {
    display: block;
    position: absolute;
    content: '';
    width: 1px;
    height: 12px;
    background: #fff;
    left: 16px;
    bottom: 16px
}

aside #asideCategory .aside-content::before {
    display: block;
    position: absolute;
    content: '';
    width: 1px;
    height: 12px;
    background: #fff;
    left: 16px;
    top: 12px
}

aside #asideCategory .aside-content ul {
    border-left: 1px dashed #ccccd8
}

aside #asideCategory .aside-content ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 16px
}

aside #asideCategory .aside-content ul li .special-column-name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #555666;
    font-size: 14px;
    line-height: 24px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    position: relative
}

aside #asideCategory .aside-content ul li .special-column-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

aside #asideCategory .aside-content ul li .special-column-name .special-column-bar {
    width: 12px;
    height: 1px;
    border-bottom: 1px dashed #ccccd8;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

aside #asideCategory .aside-content ul li .special-column-name .special-column-bar.special-column-bar-second {
    width: 44px
}

aside #asideCategory .aside-content ul li .special-column-name img {
    width: 24px;
    height: 24px;
    border: 1px solid #e8e8ed;
    border-radius: 2px;
    display: block;
    margin-right: 8px;
    margin-left: 4px
}

aside #asideCategory .aside-content ul li .special-column-name .img-mantle {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 16px;
    top: 0;
    background: rgba(0, 0, 0, 0.1)
}

aside #asideCategory .aside-content ul li .special-column-name .img-mantle.img-mantle-second {
    left: 48px
}

aside #asideCategory .aside-content ul li .special-column-name:hover {
    color: #fc5531
}

aside #asideCategory .aside-content ul li .special-column-name .pay-tag {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 8px;
    height: 18px;
    line-height: 16px;
    border: 1px solid #fc5531;
    border-radius: 2px;
    color: #fc5531;
    font-size: 12px;
    padding: 1px 4px
}

aside #asideCategory .aside-content ul li .special-column-num {
    color: #999aaa;
    font-size: 14px;
    line-height: 16px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-left: 16px
}

aside #asideCategory .aside-content ul li:nth-last-child(1) {
    margin-bottom: 0
}

aside #his-selection .title {
    line-height: 22px;
    margin-bottom: 2px;
    color: #999aaa
}

aside #his-selection .title:hover .text {
    color: #fc5531
}

aside #his-selection .his-selection-item {
    margin-top: 12px
}

aside #his-selection .his-selection-item:nth-child(1) {
    margin-top: 0
}

aside #his-selection .his-selection-item .title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

aside #his-selection .his-selection-item .tag {
    padding: 2px 4px;
    background: #fc5531;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    font-weight: 500
}

aside #his-selection .his-selection-item .tag.active {
    background: #ffeeea;
    color: #fc5531
}

aside #his-selection .his-selection-item .text {
    color: #1a1a1a;
    font-weight: 500
}

aside #his-selection .his-selection-item .read-count {
    color: #999;
    margin-top: 4px
}

aside #his-selection .his-selection-move {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 29px;
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    margin-top: 12px
}

aside #his-selection .his-selection-move img {
    width: 12px;
    height: 12px
}

aside #his-selection .his-selection-move a {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #999
}

aside #asideNewComments ul.newcomment-list {
    margin-top: -10px
}

aside #asideNewComments ul.newcomment-list li {
    margin-top: 8px
}

aside #asideNewComments ul.newcomment-list li .title {
    line-height: 22px;
    margin-bottom: 2px;
    color: #999aaa;
    display: block
}

aside #asideNewComments ul.newcomment-list li .title:hover {
    color: #fc5531
}

aside #asideNewComments ul.newcomment-list li p.comment {
    font-size: 14px;
    color: #555666;
    word-wrap: break-word;
    vertical-align: top;
    display: block;
    word-break: break-all
}

aside #asideNewComments ul.newcomment-list li p.comment:before {
    height: 18px
}

aside #asideNewComments ul.newcomment-list li p.comment img {
    width: 22px;
    vertical-align: middle
}

aside #asideNewComments ul.newcomment-list li p.comment a.user-name {
    color: #555666
}

aside #asideNewComments ul.newcomment-list li p.comment a.user-name:hover {
    color: #fc5531
}

aside #asideNewComments ul.newcomment-list li p.comment .reply {
    color: #999;
    font-size: 12px
}

aside #asideSearchArticle .search-comter {
    padding: 0 16px
}

aside #asideSearchArticle .aside-search {
    height: 32px;
    border-radius: 5px;
    background: #f0f0f5;
    margin: 8px 0;
    position: relative
}

aside #asideSearchArticle .aside-search .input-serch-blog {
    font-size: 14px;
    color: #555666;
    display: block;
    float: left;
    width: 226px;
    padding-left: 16px;
    border: 0;
    height: 32px;
    border-radius: 5px;
    background: 0 0
}

aside #asideSearchArticle .aside-search input::-webkit-input-placeholder {
    color: #555666
}

aside #asideSearchArticle .aside-search input::-moz-input-placeholder {
    color: #555666
}

aside #asideSearchArticle .aside-search input::-ms-input-placeholder {
    color: #555666
}

aside #asideSearchArticle .aside-search .btn-search-blog {
    background-color: #e8e8ee;
    color: #ccc;
    font-size: 14px;
    display: block;
    text-align: center;
    width: 32px;
    height: 32px;
    float: right;
    line-height: 32px;
    margin-top: 0;
    -webkit-transition: background-color .5s;
    transition: background-color .5s;
    border-radius: 0 5px 5px 0;
    cursor: pointer
}

aside #asideSearchArticle .aside-search .btn-search-blog img {
    width: 32px;
    height: 32px
}

aside #asideSearchArticle .aside-search .btn-search-blog-active {
    background-color: #fc5531;
    -webkit-transition: background-color .5s;
    transition: background-color .5s
}

aside .flexible-box-new {
    position: relative
}

aside .flexible-box-new div#aside-content {
    padding-bottom: 0
}

aside .flexible-box-new a.flexible-btn-new-close {
    display: block;
    width: 100%;
    height: 36px;
    line-height: 36px;
    background: #fff;
    display: none
}

aside .flexible-box-new a.flexible-btn-new-close img {
    width: 16px;
    height: 16px;
    vertical-align: middle
}

aside .flexible-box-new a.flexible-btn-new {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 36px;
    line-height: 36px;
    background: linear-gradient(19.15deg, #fff 12.82%, rgba(255, 255, 255, 0.8) 87.18%);
    color: #666
}

aside .flexible-box-new a.flexible-btn-new img {
    width: 16px;
    height: 16px;
    vertical-align: middle
}

aside .flexible-box div#aside-content,
aside .flexible-box-new div#aside-content,
aside .flexible-box div#aside-content-column,
aside .flexible-box-new div#aside-content-column {
    padding-bottom: 0
}

aside .flexible-box a.flexible-btn,
aside .flexible-box-new a.flexible-btn {
    display: block;
    padding: 10px
}

aside .flexible-box a.flexible-btn img,
aside .flexible-box-new a.flexible-btn img {
    width: 12px;
    height: 7px
}

aside #asideRank .rank-href {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    height: 44px;
    line-height: 44px;
    overflow: hidden;
    color: #fff;
    padding: 0 16px
}

aside #asideRank .rank-href .rank-num {
    font-family: DINCond-Black;
    font-size: 28px;
    line-height: 36px
}

aside #asideTopicStar {
    padding: 16px;
    background: #fff;
    margin-bottom: 8px
}

aside #asideTopicStar .rate-t {
    font-size: 14px;
    color: #555666;
    line-height: 24px;
    margin-bottom: 16px
}

aside #asideTopicStar .rate-c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 16px;
    height: 32px;
    height: 32px;
    background: #f0f0f5;
    border-radius: 2px;
    padding: 0 8px
}

aside #asideTopicStar .rate-c .rate-c-l {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

aside #asideTopicStar .rate-c .rate-c-l.active span.rate-item:hover {
    cursor: default
}

aside #asideTopicStar .rate-c .rate-c-l span {
    font-size: 13px;
    color: #222226;
    line-height: 32px
}

aside #asideTopicStar .rate-c .rate-c-l span.rate-default-text {
    margin-left: 4px
}

aside #asideTopicStar .rate-c .rate-c-l span.rate-item:hover {
    cursor: pointer
}

aside #asideTopicStar .rate-c .rate-c-l img {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -1px
}

aside #asideTopicStar .rate-c .rate-c-l img.active {
    display: none
}

aside #asideTopicStar .rate-c .rate-c-l .rate-item-active img.active {
    display: inline-block
}

aside #asideTopicStar .rate-c .rate-c-l .rate-item-active img.default {
    display: none
}

aside #asideTopicStar .rate-c .rate-c-r.active span {
    color: #222226
}

aside #asideTopicStar .rate-c .rate-c-r.active span:hover {
    cursor: default
}

aside #asideTopicStar .rate-c .rate-c-r span {
    display: inline-block;
    width: 46px;
    height: 20px;
    font-size: 13px;
    border-radius: 2px;
    border: 1px solid #ccccd9;
    text-align: center;
    line-height: 20px;
    color: #fc5431
}

aside #asideTopicStar .rate-c .rate-c-r span:hover {
    cursor: pointer
}

aside #asideTopicStar .rate-b {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    line-height: 22px
}

aside #asideTopicStar .rate-b a {
    display: block;
    width: 50%;
    text-align: center;
    line-height: 21px;
    color: #222226
}

aside #asideTopicStar .rate-b a:hover {
    color: #fc5531
}

aside #asideTopicStar .rate-b span {
    display: block;
    width: 1px;
    height: 21px;
    border: 1px solid #f0f0f5
}

aside #asideTopicStar .rate-b img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: -3px
}

aside .opensource-project-sidebox .aside-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    background-color: #f9f9f9;
    font-size: 16px
}

aside .opensource-project-sidebox .aside-title .link-more {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    padding-right: 18px;
    background-image: url("../../images/icon-arrow-right.png");
    background-size: 14px 14px;
    background-position: right center;
    background-repeat: no-repeat;
    font-size: 12px
}

aside .opensource-project-sidebox .aside-title .link-more:hover {
    color: #4ea1de;
    background-image: url("../../images/line-right.png")
}

aside .gitcode-project-sidebox {
    display: none;
    width: 300px
}

aside .gitcode-project-sidebox .aside-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    background-color: #f9f9f9;
    font-size: 16px
}

aside .gitcode-project-sidebox .aside-title .link-more {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    padding-right: 18px;
    background-image: url("../../images/icon-arrow-right.png");
    background-size: 14px 14px;
    background-position: right center;
    background-repeat: no-repeat;
    font-size: 12px
}

aside .gitcode-project-sidebox .aside-title .link-more:hover {
    color: #4ea1de;
    background-image: url("../../images/line-right.png")
}

aside .gitcode-project-sidebox .aside-content {
    padding: 16px !important
}

aside .gitcode-project-sidebox .title {
    margin-bottom: 16px;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #555666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

aside .gitcode-project-sidebox .title a {
    display: block
}

aside .gitcode-project-sidebox .title a:hover {
    color: #fc5531
}

aside .gitcode-project-sidebox .opt-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-top: -8px
}

aside .gitcode-project-sidebox .opt-box .btn {
    margin: 0 !important;
    margin-left: 8px !important;
    margin-top: 8px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    width: 129px;
    border: 1px solid #f2f2f5;
    border-radius: 4px
}

aside .gitcode-project-sidebox .opt-box .btn:hover {
    border-color: #ccccd8
}

aside .gitcode-project-sidebox .opt-box .btn img.icon {
    margin-right: 8px;
    display: block;
    width: 16px;
    height: 16px
}

aside .gitcode-project-sidebox .opt-box .btn .count {
    margin-left: 12px;
    padding: 0 4px;
    display: block;
    font-size: 12px;
    background-color: #f5f6f7;
    border-radius: 4px;
    height: 16px;
    line-height: 16px;
    color: #555666
}

aside .gitcode-project-sidebox .opt-box .btn.btn-source {
    color: #be5c0c
}

aside .gitcode-project-sidebox .opt-box .btn.btn-source:hover {
    border-color: #ffbd5f
}

aside .gitcode-project-sidebox .gitcode-related-box {
    margin-top: -16px
}

aside .gitcode-project-sidebox .gitcode-item-box {
    margin-top: 16px
}

aside .gitcode-project-sidebox .gitcode-item-box:hover .title-box .title {
    color: #fc5531
}

aside .gitcode-project-sidebox .gitcode-item-box:hover .title-box .start {
    color: #fc5531;
    background-image: url("../../images/line-star-hover.png")
}

aside .gitcode-project-sidebox .gitcode-item-box:hover .desc {
    color: #fc5531
}

aside .gitcode-project-sidebox .gitcode-item-box .title-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

aside .gitcode-project-sidebox .gitcode-item-box .title-box .title {
    padding: 0;
    margin: 0;
    margin-right: 8px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 500;
    color: #555666;
    line-height: 24px
}

aside .gitcode-project-sidebox .gitcode-item-box .title-box .start {
    margin-left: auto;
    display: block;
    padding-left: 20px;
    color: #999aaa;
    font-size: 12px;
    line-height: 20px;
    background-image: url("../../images/line-star.png");
    background-size: 14px 14px;
    background-position: left center;
    background-repeat: no-repeat;
    white-space: nowrap
}

aside .gitcode-project-sidebox .gitcode-item-box .desc {
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #999aaa;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

aside .starmap-box.box3 .img-box {
    position: relative;
    width: 100%;
    height: 168px
}

aside .starmap-box.box3 .img-box img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    aspect-ratio: 16/9
}

aside .starmap-box.box3 .img-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(62.96%, rgba(255, 255, 255, 0.71)), to(#fff));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.71) 62.96%, #fff 100%)
}

aside .starmap-box.box3 .img-box .img-tag {
    background: #006fff;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    padding: 0 8px;
    position: absolute;
    top: 8px;
    left: 8px;
    border-radius: 4px
}

aside .starmap-box.box3 .info-box {
    padding: 0 16px
}

aside .starmap-box.box3 .info-box .title {
    padding: 0;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis
}

aside .starmap-box.box3 .info-box .desc {
    margin-top: 4px;
    color: #666;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis
}

aside .starmap-box.box3 .info-box .tag-box {
    margin-top: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

aside .starmap-box.box3 .info-box .tag-box .tag-item {
    margin-left: 4px;
    padding: 4px 8px;
    background-color: #f2f2f2;
    border-radius: 6px;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    white-space: nowrap
}

aside .starmap-box.box3 .info-box .tag-box .tag-item:first-child {
    margin-left: 0
}

aside .starmap-box.box3 .operate-box {
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

aside .starmap-box.box3 .operate-box .btn-go-mall {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #2774e9;
    color: #2774e9;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
    background-color: transparent
}

aside .starmap-box.box3 .operate-box .btn-go-deploy {
    margin-left: 8px;
    border-radius: 6px;
    background: #2774e9;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: none
}

@media screen and (max-width:1200px) {
    #asideFooter {
        position: unset !important
    }
}

.point-outer {
    position: absolute;
    z-index: 20;
    -webkit-transition: all .8s cubic-bezier(.39, -.4, .83, .23) 0s
}

.point-inner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ff6326;
    -webkit-transition: all .8s linear 0s
}

.point-outer.point-pre {
    display: none
}

.profile-intro-name-boxOpration {
    padding: 8px 16px 10px 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.opt-letter-watch-box {
    color: #f5a523;
    font-size: 12px;
    width: 126px;
    height: 28px;
    border-radius: 14px;
    line-height: 26px;
    text-align: center
}

.opt-letter-watch-box .bt-button {
    display: block;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    font-size: 14px
}

.opt-letter-watch-box .personal-watch {
    color: #555666;
    line-height: 26px;
    border-radius: 14px;
    border: 1px solid #ccccd8
}

.opt-letter-watch-box .personal-watch:hover {
    border-color: #555666
}

.opt-letter-watch-box .personal-letter {
    border: 1px solid #ccccd8;
    background-color: #fff;
    color: #555666;
    line-height: 28px;
    border-radius: 14px
}

.opt-letter-watch-box .personal-letter:hover {
    color: #555666;
    border-color: #555666
}

.opt-letter-watch-box .attented {
    position: relative;
    background: #fff;
    color: #999aaa;
    border: 1px solid #ccccd8
}

.opt-letter-watch-box .attented:hover {
    color: #555666;
    border-color: #555666
}

.opt-letter-watch-box .attented:active {
    background: #f5f5f5
}

.ml8 {
    margin-left: 8px
}

.mr8 {
    margin-right: 8px
}

.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both
}

.ellipsis {
    position: relative;
    line-height: 1.5em;
    max-height: 3em;
    overflow: hidden
}

.ellipsis:before {
    content: '...';
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    width: 24px;
    padding-left: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(40%, #fff));
    background: linear-gradient(to right, transparent, #fff 40%)
}

.ellipsis:after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: #fff
}

.chatdoc-robot-box {
    position: fixed;
    top: 48px;
    right: 0;
    width: 100%;
    height: calc(100% - 48px);
    z-index: 1001;
    display: none
}

.chatdoc-robot-box .pos-box {
    margin-left: auto;
    position: relative;
    height: 100%;
    width: 490px
}

.chatdoc-robot-box .chatdoc-content-box {
    height: 100%;
    -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12)
}

.chatdoc-robot-box .chatdoc-content-box .chat-container {
    border-radius: 0
}

.chatdoc-robot-box #btnChatDocMove,
.chatdoc-robot-box #btnChatDocClose {
    position: absolute;
    border: none;
    background-color: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1
}

.chatdoc-robot-box #btnChatDocMove img,
.chatdoc-robot-box #btnChatDocClose img {
    display: block;
    pointer-events: none
}

.chatdoc-robot-box #btnChatDocClose {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    right: 0;
    top: 0;
    width: 28px;
    height: 28px;
    z-index: 1000
}

.chatdoc-robot-box #btnChatDocClose img {
    width: 14px
}

.chatdoc-robot-box #btnChatDocMove {
    left: 0;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 100px;
    cursor: col-resize;
    z-index: 1000
}

.chatdoc-robot-box #btnChatDocMove img {
    width: 24px
}

.btn-side-chatdoc-contentbox {
    position: relative
}

.btn-side-chatdoc-contentbox .side-chatdoc-desc-box {
    display: none;
    position: absolute;
    left: -8px;
    top: 22px;
    -webkit-transform: translate(-100%, -100%);
    transform: translate(-100%, -50%);
    width: 163px;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #ededef;
    border-radius: 4px;
    -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
    padding-right: 14px
}

.btn-side-chatdoc-contentbox .side-chatdoc-desc-box img {
    width: 16px;
    right: 10px;
    top: 11px;
    position: absolute;
    cursor: pointer
}

.btn-side-chatdoc-contentbox .side-chatdoc-desc-box::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 0;
    height: 0;
    margin-top: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #fff
}

.btn-side-chatdoc {
    padding: 0;
    display: block;
    background-color: transparent;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden
}

.btn-side-chatdoc img {
    display: block;
    width: 100%;
    height: auto
}

.is_black_skin .btn-side-chatdoc-contentbox .side-chatdoc-desc-box {
    background-color: #2e2e32 !important;
    border-color: #43434d !important;
    color: #b4b4b4 !important
}

.is_black_skin .btn-side-chatdoc-contentbox .side-chatdoc-desc-box::after {
    border-color: transparent transparent transparent #43434d
}

:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animate__fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

.animate__fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@-webkit-keyframes backOutRight {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    20% {
        opacity: .7;
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7)
    }

    to {
        opacity: .7;
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translateX(2000px) scale(.7)
    }
}

@keyframes backOutRight {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    20% {
        opacity: .7;
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7)
    }

    to {
        opacity: .7;
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translateX(2000px) scale(.7)
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

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

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

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

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

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

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

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

main {
    margin-bottom: 40px;
    float: right
}

main .markdown_views pre .code-annotation {
    top: 6px !important
}

main div.blog-content-box {
    position: relative;
    padding: 0 24px 16px;
    background: #fff;
    border-radius: 2px 2px 0 0
}

main div.blog-content-box .hot-words-highlight {
    background: #fc5531;
    font-weight: 600;
    color: #fff
}

main div.blog-content-box .hot-words-highlight:hover {
    cursor: pointer
}

main div.blog-content-box #content_views pre.new-version span.hide-preCode-bt {
    background: unset !important
}

main div.blog-content-box #content_views.tomorrow-night pre.new-version .opt-box,
main div.blog-content-box #content_views.atom-one-dark pre.new-version .opt-box,
main div.blog-content-box #content_views.dracula pre.new-version .opt-box,
main div.blog-content-box #content_views.tomorrow-night-eighties pre.new-version .opt-box,
main div.blog-content-box #content_views.prism-tomorrow-night pre.new-version .opt-box,
main div.blog-content-box #content_views.prism-atom-one-dark pre.new-version .opt-box,
main div.blog-content-box #content_views.prism-dracula pre.new-version .opt-box,
main div.blog-content-box #content_views.prism-tomorrow-night-eighties pre.new-version .opt-box {
    border-color: #666;
    color: #fff
}

main div.blog-content-box #content_views.tomorrow-night pre.new-version .opt-box .hljs-button,
main div.blog-content-box #content_views.atom-one-dark pre.new-version .opt-box .hljs-button,
main div.blog-content-box #content_views.dracula pre.new-version .opt-box .hljs-button,
main div.blog-content-box #content_views.tomorrow-night-eighties pre.new-version .opt-box .hljs-button,
main div.blog-content-box #content_views.prism-tomorrow-night pre.new-version .opt-box .hljs-button,
main div.blog-content-box #content_views.prism-atom-one-dark pre.new-version .opt-box .hljs-button,
main div.blog-content-box #content_views.prism-dracula pre.new-version .opt-box .hljs-button,
main div.blog-content-box #content_views.prism-tomorrow-night-eighties pre.new-version .opt-box .hljs-button {
    background-image: url("../../images/icon-copy-dark.png")
}

main div.blog-content-box #content_views.tomorrow-night pre.new-version .opt-box .code-run-btn,
main div.blog-content-box #content_views.atom-one-dark pre.new-version .opt-box .code-run-btn,
main div.blog-content-box #content_views.dracula pre.new-version .opt-box .code-run-btn,
main div.blog-content-box #content_views.tomorrow-night-eighties pre.new-version .opt-box .code-run-btn,
main div.blog-content-box #content_views.prism-tomorrow-night pre.new-version .opt-box .code-run-btn,
main div.blog-content-box #content_views.prism-atom-one-dark pre.new-version .opt-box .code-run-btn,
main div.blog-content-box #content_views.prism-dracula pre.new-version .opt-box .code-run-btn,
main div.blog-content-box #content_views.prism-tomorrow-night-eighties pre.new-version .opt-box .code-run-btn {
    background-image: url("../../images/icon-run-dark.png")
}

main div.blog-content-box #content_views.tomorrow-night pre.new-version .hide-preCode-box,
main div.blog-content-box #content_views.atom-one-dark pre.new-version .hide-preCode-box,
main div.blog-content-box #content_views.dracula pre.new-version .hide-preCode-box,
main div.blog-content-box #content_views.tomorrow-night-eighties pre.new-version .hide-preCode-box,
main div.blog-content-box #content_views.prism-tomorrow-night pre.new-version .hide-preCode-box,
main div.blog-content-box #content_views.prism-atom-one-dark pre.new-version .hide-preCode-box,
main div.blog-content-box #content_views.prism-dracula pre.new-version .hide-preCode-box,
main div.blog-content-box #content_views.prism-tomorrow-night-eighties pre.new-version .hide-preCode-box {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(26, 26, 26, 0)), color-stop(49.52%, rgba(26, 26, 26, 0.84)), to(#1a1a1a)) !important;
    background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.84) 49.52%, #1a1a1a 100%) !important
}

main div.blog-content-box #content_views.tomorrow-night pre.new-version .hide-preCode-box .hide-preCode-bt,
main div.blog-content-box #content_views.atom-one-dark pre.new-version .hide-preCode-box .hide-preCode-bt,
main div.blog-content-box #content_views.dracula pre.new-version .hide-preCode-box .hide-preCode-bt,
main div.blog-content-box #content_views.tomorrow-night-eighties pre.new-version .hide-preCode-box .hide-preCode-bt,
main div.blog-content-box #content_views.prism-tomorrow-night pre.new-version .hide-preCode-box .hide-preCode-bt,
main div.blog-content-box #content_views.prism-atom-one-dark pre.new-version .hide-preCode-box .hide-preCode-bt,
main div.blog-content-box #content_views.prism-dracula pre.new-version .hide-preCode-box .hide-preCode-bt,
main div.blog-content-box #content_views.prism-tomorrow-night-eighties pre.new-version .hide-preCode-box .hide-preCode-bt {
    color: #b2b2b2
}

main div.blog-content-box #content_views.tomorrow-night pre.new-version.set-code-show .hide-preCode-box,
main div.blog-content-box #content_views.atom-one-dark pre.new-version.set-code-show .hide-preCode-box,
main div.blog-content-box #content_views.dracula pre.new-version.set-code-show .hide-preCode-box,
main div.blog-content-box #content_views.tomorrow-night-eighties pre.new-version.set-code-show .hide-preCode-box,
main div.blog-content-box #content_views.prism-tomorrow-night pre.new-version.set-code-show .hide-preCode-box,
main div.blog-content-box #content_views.prism-atom-one-dark pre.new-version.set-code-show .hide-preCode-box,
main div.blog-content-box #content_views.prism-dracula pre.new-version.set-code-show .hide-preCode-box,
main div.blog-content-box #content_views.prism-tomorrow-night-eighties pre.new-version.set-code-show .hide-preCode-box {
    background: unset !important
}

main div.blog-content-box #content_views.tomorrow-night .code-runner-container .code-runner-box,
main div.blog-content-box #content_views.atom-one-dark .code-runner-container .code-runner-box,
main div.blog-content-box #content_views.dracula .code-runner-container .code-runner-box,
main div.blog-content-box #content_views.tomorrow-night-eighties .code-runner-container .code-runner-box,
main div.blog-content-box #content_views.prism-tomorrow-night .code-runner-container .code-runner-box,
main div.blog-content-box #content_views.prism-atom-one-dark .code-runner-container .code-runner-box,
main div.blog-content-box #content_views.prism-dracula .code-runner-container .code-runner-box,
main div.blog-content-box #content_views.prism-tomorrow-night-eighties .code-runner-container .code-runner-box {
    border-color: #666
}

main div.blog-content-box #content_views.tomorrow-night .code-runner-container .code-runner-box .runner-result-title,
main div.blog-content-box #content_views.atom-one-dark .code-runner-container .code-runner-box .runner-result-title,
main div.blog-content-box #content_views.dracula .code-runner-container .code-runner-box .runner-result-title,
main div.blog-content-box #content_views.tomorrow-night-eighties .code-runner-container .code-runner-box .runner-result-title,
main div.blog-content-box #content_views.prism-tomorrow-night .code-runner-container .code-runner-box .runner-result-title,
main div.blog-content-box #content_views.prism-atom-one-dark .code-runner-container .code-runner-box .runner-result-title,
main div.blog-content-box #content_views.prism-dracula .code-runner-container .code-runner-box .runner-result-title,
main div.blog-content-box #content_views.prism-tomorrow-night-eighties .code-runner-container .code-runner-box .runner-result-title,
main div.blog-content-box #content_views.tomorrow-night .code-runner-container .code-runner-box .runner-result-content,
main div.blog-content-box #content_views.atom-one-dark .code-runner-container .code-runner-box .runner-result-content,
main div.blog-content-box #content_views.dracula .code-runner-container .code-runner-box .runner-result-content,
main div.blog-content-box #content_views.tomorrow-night-eighties .code-runner-container .code-runner-box .runner-result-content,
main div.blog-content-box #content_views.prism-tomorrow-night .code-runner-container .code-runner-box .runner-result-content,
main div.blog-content-box #content_views.prism-atom-one-dark .code-runner-container .code-runner-box .runner-result-content,
main div.blog-content-box #content_views.prism-dracula .code-runner-container .code-runner-box .runner-result-content,
main div.blog-content-box #content_views.prism-tomorrow-night-eighties .code-runner-container .code-runner-box .runner-result-content {
    color: #fff !important
}

main div.blog-content-box #content_views.tomorrow-night .code-runner-container .code-runner-box .runner-result-title.error,
main div.blog-content-box #content_views.atom-one-dark .code-runner-container .code-runner-box .runner-result-title.error,
main div.blog-content-box #content_views.dracula .code-runner-container .code-runner-box .runner-result-title.error,
main div.blog-content-box #content_views.tomorrow-night-eighties .code-runner-container .code-runner-box .runner-result-title.error,
main div.blog-content-box #content_views.prism-tomorrow-night .code-runner-container .code-runner-box .runner-result-title.error,
main div.blog-content-box #content_views.prism-atom-one-dark .code-runner-container .code-runner-box .runner-result-title.error,
main div.blog-content-box #content_views.prism-dracula .code-runner-container .code-runner-box .runner-result-title.error,
main div.blog-content-box #content_views.prism-tomorrow-night-eighties .code-runner-container .code-runner-box .runner-result-title.error,
main div.blog-content-box #content_views.tomorrow-night .code-runner-container .code-runner-box .runner-result-content.error,
main div.blog-content-box #content_views.atom-one-dark .code-runner-container .code-runner-box .runner-result-content.error,
main div.blog-content-box #content_views.dracula .code-runner-container .code-runner-box .runner-result-content.error,
main div.blog-content-box #content_views.tomorrow-night-eighties .code-runner-container .code-runner-box .runner-result-content.error,
main div.blog-content-box #content_views.prism-tomorrow-night .code-runner-container .code-runner-box .runner-result-content.error,
main div.blog-content-box #content_views.prism-atom-one-dark .code-runner-container .code-runner-box .runner-result-content.error,
main div.blog-content-box #content_views.prism-dracula .code-runner-container .code-runner-box .runner-result-content.error,
main div.blog-content-box #content_views.prism-tomorrow-night-eighties .code-runner-container .code-runner-box .runner-result-content.error {
    color: #e34d2c !important
}

main div.blog-content-box .code-runner-container {
    margin-bottom: 24px;
    border-radius: 5px;
    overflow: hidden
}

main div.blog-content-box .code-runner-container pre {
    margin-bottom: 0;
    border-radius: 0
}

main div.blog-content-box .code-runner-container .code-runner-box {
    padding: 12px 16px;
    border-top: 1px solid #e5e5e5;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 20px
}

main div.blog-content-box .code-runner-container .code-runner-box .runner-result-content {
    padding-top: 4px;
    white-space: pre-line;
    min-height: 45px
}

main div.blog-content-box .code-runner-container .code-runner-box .runner-result-content.error {
    color: #e34d2c !important
}

main div.blog-content-box .code-runner-container .code-runner-box p.desc {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    text-align: center;
    font-size: 12px !important;
    color: #999
}

main div.blog-content-box pre {
    max-height: 340px;
    border-radius: 5px;
    overflow-y: hidden
}

main div.blog-content-box pre.new-version {
    position: relative;
    padding-top: 36px
}

main div.blog-content-box pre.new-version.prettyprint .pre-numbering {
    top: 36px;
    padding: 0
}

main div.blog-content-box pre.new-version .fixed-btn {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 12px 8px;
    border-radius: 8px;
    background: rgba(249, 249, 249, 0.8);
    -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.11);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.11);
    font-size: 14px;
    line-height: 20px;
    width: 102px;
    height: 36px;
    color: #1a1a1a;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out
}

main div.blog-content-box pre.new-version .fixed-btn .look-more-preCode {
    margin: 0;
    width: 12px;
    height: 12px;
    margin-left: 4px
}

main div.blog-content-box pre.new-version .fixed-btn:hover {
    background: #f9f9f9
}

main div.blog-content-box pre.new-version.set-code-height {
    height: 266px
}

main div.blog-content-box pre.new-version.set-code-height.set-code-show {
    height: unset
}

main div.blog-content-box pre.new-version.set-code-height.set-code-show .hide-preCode-box {
    background: unset;
    margin-bottom: -6px;
    margin-left: -56px;
    margin-right: -16px;
    background: unset !important
}

main div.blog-content-box pre.new-version.set-code-height.set-code-show .hide-preCode-box .look-more-preCode {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

main div.blog-content-box pre.new-version.set-code-height.set-code-show .hide-preCode-box .hide-preCode-bt::before {
    content: '收起'
}

main div.blog-content-box pre.new-version.set-code-height.set-code-hide .hide-preCode-box {
    height: unset
}

main div.blog-content-box pre.new-version.set-code-height.set-code-hide .hide-preCode-box span {
    background: unset !important
}

main div.blog-content-box pre.new-version.set-code-height.set-code-hide span.hide-preCode-bt::before {
    content: '展开'
}

main div.blog-content-box pre.new-version.set-code-height .hide-preCode-box {
    padding: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(245, 245, 245, 0)), color-stop(34.13%, rgba(245, 245, 245, 0.9)), to(#f5f5f5));
    background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.9) 34.13%, #f5f5f5 100%)
}

main div.blog-content-box pre.new-version.set-code-height .hide-preCode-box .hide-preCode-bt {
    padding: 8px 0;
    height: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: unset;
    background-color: transparent;
    color: #666;
    font-size: 14px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer
}

main div.blog-content-box pre.new-version.set-code-height .hide-preCode-box .hide-preCode-bt .look-more-preCode {
    margin: unset;
    margin-left: 4px;
    width: 14px;
    height: 14px;
    cursor: pointer !important;
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

main div.blog-content-box pre.new-version.set-code-height .hide-preCode-box .hide-preCode-bt::before {
    display: block
}

main div.blog-content-box pre.new-version .opt-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    content: '';
    height: 31px;
    padding: 0 16px;
    line-height: 18px;
    background-color: inherit;
    color: #1a1a1a;
    border-bottom: 1px solid #e5e5e5
}

main div.blog-content-box pre.new-version .code-language {
    position: absolute;
    top: 7px;
    left: 16px;
    font-size: 14px;
    font-weight: 600
}

main div.blog-content-box pre.new-version .code-run-btn {
    margin-left: 16px;
    padding-left: 18px;
    height: 30px;
    line-height: 30px;
    background-image: url("../../images/icon-run.png");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 0 center;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer
}

main div.blog-content-box pre.new-version .code-run-btn.loading {
    pointer-events: none;
    background-image: none !important;
    color: #999
}

main div.blog-content-box pre.new-version .code-run-btn.loading::before {
    margin-right: 4px;
    margin-left: -16px;
    -webkit-animation: rotate 1s linear infinite;
    animation: rotate 1s linear infinite;
    display: inline-block;
    content: '';
    background-image: url("../../images/icon-run-loading.png");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 0 center;
    width: 14px;
    height: 14px;
    vertical-align: -2px
}

main div.blog-content-box pre.new-version .hljs-button,
main div.blog-content-box pre.new-version .btn-code-notes {
    position: relative;
    left: unset !important;
    top: unset !important;
    right: unset !important;
    margin: 0;
    display: block !important;
    background-color: transparent !important;
    color: inherit !important;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    height: 30px !important;
    line-height: 30px;
    font-weight: 400 !important;
    font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, SimHei, SimSun
}

main div.blog-content-box pre.new-version .hljs-button {
    padding-left: 18px;
    background-image: url("../../images/icon-copy.png");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 0 center;
    color: inherit !important
}

main div.blog-content-box pre.new-version .hljs-button.active {
    width: unset !important
}

main div.blog-content-box pre.new-version .hljs-button::after {
    margin-top: -2px;
    display: block;
    color: inherit !important;
    white-space: nowrap
}

main div.blog-content-box pre.new-version .btn-code-notes {
    padding-left: 26px;
    padding-right: 0;
    margin-left: auto;
    border: none
}

main div.blog-content-box pre.new-version .btn-code-notes::after {
    content: '';
    margin: 0 16px;
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #e5e5e5
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

main div.blog-content-box pre:hover .code-annotation {
    display: block
}

main div.blog-content-box pre:hover .btn-code-notes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

main div.blog-content-box pre .hljs-button {
    font-size: 14px;
    top: 8px !important;
    height: 26px !important
}

main div.blog-content-box pre .hljs-button.active {
    width: 67px !important
}

main div.blog-content-box pre .hljs-button.add_def {
    right: 112px !important
}

main div.blog-content-box pre .hljs-button.def {
    right: 88px !important
}

main div.blog-content-box pre .hljs-button.def.add_def {
    right: 192px !important
}

main div.blog-content-box pre .hljs-button.mddef {
    top: 6px !important;
    right: 80px !important
}

main div.blog-content-box pre .hljs-button.mddef.add_def {
    right: 184px !important
}

main div.blog-content-box pre .btn-code-notes {
    display: none;
    position: absolute;
    right: 16px;
    border: none;
    top: 16px;
    padding: 0 8px;
    height: 26px;
    padding-left: 26px;
    color: #fff;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 4px;
    background-color: #99a;
    font-weight: 500;
    font-size: 14px;
    background-image: url("../../images/trae-icon.png");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 8px center
}

main div.blog-content-box pre .btn-code-notes.icon-db {
    background-image: url("../../images/icon-db.png")
}

main div.blog-content-box pre .btn-code-notes.mdeditor {
    top: 10px;
    right: 8px
}

main div.blog-content-box pre .btn-code-notes.mdeditor.btn_def {
    top: 8px
}

main div.blog-content-box pre .btn-code-notes.btn_def {
    right: 90px
}

main div.blog-content-box pre .code-edithtml {
    position: absolute;
    right: 16px;
    top: 16px
}

main div.blog-content-box pre .code-edithtml.active {
    top: 8px;
    right: 8px
}

main div.blog-content-box pre .code-edithtml .code-edithtml-box {
    position: relative;
    width: 72px;
    height: 26px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #fff;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 4px;
    background-color: #082966;
    font-weight: 500;
    -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    font-size: 14px
}

main div.blog-content-box pre .code-edithtml .code-edithtml-box>div {
    width: 100%;
    height: 100%;
    position: absolute;
    display: inline-block;
    opacity: 0
}

main div.blog-content-box pre .code-edithtml .code-edithtml-box button {
    width: 100%;
    height: 100%;
    display: inline-block
}

main div.blog-content-box pre .code-edithtml .code-edithtml-box i {
    width: 24px;
    height: 14px;
    background-image: url("../../images/20240702045224.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 2px;
    margin-left: 8px
}

main div.blog-content-box pre .code-annotation {
    display: none;
    cursor: pointer;
    border-radius: 4px;
    background: #fc5531;
    position: absolute;
    right: 78px;
    top: 12px;
    padding: 2px 10px;
    font-size: 14px;
    color: #fff
}

main div.blog-content-box pre .code-annotation .code-annotation-mask {
    display: none;
    position: absolute;
    top: 0;
    right: 86px;
    width: 146px;
    padding: 6px 0;
    text-align: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: #666;
    border-radius: 4px;
    color: #fff
}

main div.blog-content-box pre .code-annotation .code-annotation-mask:after {
    content: attr(data-title)
}

main div.blog-content-box pre .code-annotation .code-annotation-mask:before {
    display: block;
    content: '';
    width: 11px;
    height: 11px;
    background: #666;
    position: absolute;
    right: -4px;
    margin: auto;
    top: 7px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg)
}

main div.blog-content-box pre .code-annotation:after {
    content: attr(data-title)
}

main div.blog-content-box pre .code-annotation:hover {
    background: #fc1944
}

main div.blog-content-box pre .code-annotation.active {
    background: #8e8ea0;
    color: #fff;
    cursor: default
}

main div.blog-content-box pre .code-annotation.active:hover .code-annotation-mask {
    display: block
}

main div.blog-content-box pre.set-code-show {
    max-height: unset
}

main div.blog-content-box pre.set-code-hide {
    height: 340px;
    overflow-y: hidden
}

main div.blog-content-box pre.set-code-hide .hide-preCode-box {
    width: 100%;
    padding-top: 78px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10
}

main div.blog-content-box pre.set-code-hide .hide-preCode-box span.hide-preCode-bt {
    display: block;
    margin: auto;
    width: 44px;
    height: 22px;
    background: #f0f0f5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-top: 6px;
    cursor: pointer
}

main div.blog-content-box pre.set-code-hide .hide-preCode-box .look-more-preCode {
    cursor: pointer !important;
    display: block;
    margin: auto;
    width: 22px;
    height: 16px
}

main div.blog-content-box .article-header-box {
    padding-top: 8px;
    z-index: 9;
    background-color: #fff;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

main div.blog-content-box .article-header-box .jump_article {
    display: none
}

main div.blog-content-box .article-header-box .jump_article .related-article {
    margin-bottom: 12px;
    height: 26px;
    line-height: 26px
}

main div.blog-content-box .article-header-box .jump_article .related-article a {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 26px;
    font-weight: bold
}

main div.blog-content-box .article-header-box .jump_article .related-article a span {
    margin-right: 14px;
    padding: 4px 6px;
    border: 1px solid #e0e0e0;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 18px
}

main div.blog-content-box .article-header-box .article-header .un-collection {
    font-size: 14px;
    margin-right: 0
}

main div.blog-content-box .article-header-box .article-header .un-collection span {
    margin-right: 0 !important
}

main div.blog-content-box .article-header-box .article-header div.article-title-box {
    margin-bottom: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

main div.blog-content-box .article-header-box .article-header div.article-title-box span.article-type {
    margin-right: 8px;
    margin-top: 9px
}

main div.blog-content-box .article-header-box .article-header div.article-title-box .title-article {
    font-size: 28px;
    word-wrap: break-word;
    color: #222226;
    font-weight: 600;
    margin: 0;
    word-break: break-all
}

main div.blog-content-box .article-header-box .article-header .ai-title-box {
    padding-bottom: 12px;
    margin-bottom: 8px;
    position: relative;
    margin-top: 8px;
    color: #666;
    font-size: 16px;
    border-bottom: 1px solid #f2f2f2
}

main div.blog-content-box .article-header-box .article-header .ai-title-box .ai-title-abstract {
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-line-clamp: 1;
    background-color: #fff;
    cursor: pointer
}

main div.blog-content-box .article-header-box .article-header .ai-title-box .ai-title-abstract.active {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-line-clamp: unset;
    padding-bottom: 8px;
    z-index: 1
}

main div.blog-content-box .article-header-box .article-header .ai-title-box img {
    margin-right: 8px;
    height: 20px;
    width: auto;
    vertical-align: -4px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box {
    position: relative;
    background: #f8f8f8;
    border-radius: 4px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box {
    padding-left: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 4px;
    margin-right: 8px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box .posered-by-kdoc {
    float: right;
    margin-top: 8px;
    margin-left: auto;
    margin-right: 8px;
    padding-left: 16px;
    color: #5094d5 !important;
    font-size: 12px;
    line-height: 1;
    background-image: url("../../images/20221213030354.png");
    background-repeat: no-repeat;
    background-size: 12px 12px;
    background-position: left 0
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box.artic-tag-box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box.artic-tag-box a.tag-link {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 8px;
    padding: 3px 6px;
    font-size: 12px;
    background-color: #fff;
    color: #5094d5;
    border: 1px solid #eaeaef;
    height: 24px;
    line-height: 17px;
    border-radius: 2px;
    display: inline-block
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box.artic-tag-box a.tag-link:hover {
    color: #277ccc
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box span.label {
    display: inline-block;
    color: #999aaa
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box .community-enter-box {
    border: 1px solid #eaeaef;
    font-size: 14px;
    line-height: 22px;
    display: inline-block;
    padding: 0 8px;
    background: #fff;
    border-radius: 2px;
    margin-right: 8px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box .community-enter-box:hover .community-enter-type {
    color: #fc5531
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box .community-enter-box img {
    display: inline-block;
    width: 20px;
    height: 16px;
    vertical-align: text-top;
    margin-right: 4px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box .community-enter-box .community-enter-title {
    color: #555666
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box .community-enter-box .community-enter-type {
    color: #555666
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box .origin-plan-box {
    background: #e9f1f9;
    border: 1px solid rgba(34, 124, 204, 0.2);
    font-size: 12px;
    line-height: 22px;
    display: inline-block;
    padding: 0 5px;
    border-radius: 2px;
    margin-right: 8px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box .origin-plan-box:hover .origin-plan-name {
    color: #277ccc
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box .origin-plan-box img {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 4px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box .origin-plan-box .origin-plan-name {
    color: #5094d5
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.slide-content-box {
    display: none;
    background-color: #fff;
    padding: 4px 0
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.slide-content-box .article-copyright {
    padding: 8px;
    padding-left: 0;
    font-size: 14px;
    color: #6f6f82
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.slide-content-box .creativecommons,
main div.blog-content-box .article-header-box .article-header div.article-info-box div.slide-content-box .article-source-link {
    color: #6f6f82;
    font-size: 13px;
    word-break: break-all
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.slide-content-box .creativecommons a,
main div.blog-content-box .article-header-box .article-header div.article-info-box div.slide-content-box .article-source-link a {
    color: #5094d5
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.slide-content-box .all-tags-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .article-bar-top-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right: 8px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top {
    color: #999aaa;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .bar-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 12px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .bar-content.active {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .bar-content .article-vip-box {
    line-height: 18px;
    margin-right: 0;
    height: 18px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top span,
main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top a {
    vertical-align: top;
    margin-right: 12px;
    line-height: 32px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .article-type-img {
    width: 36px;
    height: 32px;
    line-height: 32px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .read-count-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .read-count-box.is-like {
    cursor: pointer
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .read-count-box.is-like.like-ab-new:hover img {
    display: none !important
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .read-count-box.is-like.like-ab-new:hover img.active {
    display: inline-block !important
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .read-count-box.is-like.like-ab-new:hover span.read-count {
    color: #fc5531
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .article-heard-img {
    margin-right: 4px;
    width: 16px;
    height: 16px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .article-read-img {
    width: 16px;
    height: 16px;
    margin-top: 0
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .article-collect-img {
    vertical-align: -3px;
    margin-top: 0;
    margin-right: 0;
    width: 16px;
    height: 16px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .article-time-img {
    width: 16px;
    height: 16px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top #blog_detail_zk_collection {
    color: #999aaa;
    display: inline-block
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top #blog_detail_zk_collection:hover img.isdefault {
    display: none !important
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top #blog_detail_zk_collection:hover img.isactive {
    display: inline-block !important
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top #blog_detail_zk_collection:hover span {
    color: #fc5531
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .follow-nickName {
    color: #555666;
    margin-right: 20px;
    max-width: 232px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .follow-nickName.vip-name {
    color: #bb9444
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .follow-nickName:hover {
    color: #fc5531
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .article-vip-img {
    margin-right: 4px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .article-vip-img-new {
    height: 18px;
    margin-right: 4px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top .article-vip-text {
    color: #bb9444
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top span.c-gray {
    color: #858585
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top span.c-red {
    color: #e33e33
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top span.c-green {
    color: #00cf5a
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top span.c-orange {
    color: #fc8931
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top span.time {
    position: relative;
    font-size: 12px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top a.tag-link {
    margin-right: 8px;
    color: #3399ea
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .up-time {
    display: none;
    position: absolute;
    text-align: center;
    color: #555666;
    background: #fff;
    z-index: 3000;
    padding: 2px 4px;
    top: 35px;
    left: 0;
    -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
    border: 1px solid #eaeaef
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .up-time span {
    display: block;
    text-align: center;
    font-size: 12px;
    line-height: 18px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .up-time:before {
    content: ' ';
    width: 8px;
    height: 8px;
    border: 1px solid #eaeaef;
    background: #fff;
    position: absolute;
    left: 4px;
    top: -4px;
    -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .up-time:after {
    content: ' ';
    width: 10px;
    height: 5px;
    background: #fff;
    position: absolute;
    left: 3px;
    top: 0
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .operating {
    line-height: 32px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .operating.active .href-article-edit:after {
    right: -9px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .operating a.href-article-edit,
main div.blog-content-box .article-header-box .article-header div.article-info-box .operating span.href-article-edit {
    position: relative;
    color: #8fb0c9;
    padding: 0 4px;
    font-size: 12px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .operating a.href-article-edit:last-child::after,
main div.blog-content-box .article-header-box .article-header div.article-info-box .operating span.href-article-edit:last-child::after {
    display: none
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .operating a.href-article-edit:after,
main div.blog-content-box .article-header-box .article-header div.article-info-box .operating span.href-article-edit:after {
    display: block;
    content: '';
    width: 1px;
    height: 11px;
    background: #e0e0e0;
    position: absolute;
    top: 2px;
    right: -2px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .operating a.href-article-edit#btnSuperDel,
main div.blog-content-box .article-header-box .article-header div.article-info-box .operating span.href-article-edit#btnSuperDel {
    margin-left: 14px
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .operating a.href-article-edit:hover,
main div.blog-content-box .article-header-box .article-header div.article-info-box .operating span.href-article-edit:hover {
    color: #fc5531
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .operating a.href-article-edit:active,
main div.blog-content-box .article-header-box .article-header div.article-info-box .operating span.href-article-edit:active {
    color: #5c91df
}

main div.blog-content-box .article-header-box .article-header div.article-info-box .operating a.slide-toggle:after {
    display: none
}

main div.blog-content-box .article-header-box .article-header div.ai-article-tag {
    width: 100%;
    border-radius: 2px;
    background: #f6fbff;
    margin: 16px 0;
    padding: 0 16px;
    padding-top: 2px;
    position: relative
}

main div.blog-content-box .article-header-box .article-header div.ai-article-tag .ai-article-tag-text {
    color: #838599;
    font-size: 12px;
    margin-top: -8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10px;
    padding-bottom: 10px
}

main div.blog-content-box .article-header-box .article-header div.ai-article-tag .ai-article-tag-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 7px;
    height: 45px;
    overflow: hidden
}

main div.blog-content-box .article-header-box .article-header div.ai-article-tag .ai-article-tag-box .ai-article-tag-item-active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 10px;
    height: 26px
}

main div.blog-content-box .article-header-box .article-header div.ai-article-tag .ai-article-tag-box .ai-article-tag-item-active img {
    height: 100%
}

main div.blog-content-box .article-header-box .article-header div.ai-article-tag .ai-article-tag-box .ai-article-tag-item {
    margin-top: 10px;
    margin-left: 9px;
    height: 26px;
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(rgba(0, 204, 204, 0.2)), color-stop(rgba(137, 204, 253, 0.2)), to(rgba(252, 108, 255, 0.2)));
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, rgba(0, 204, 204, 0.2), rgba(137, 204, 253, 0.2), rgba(252, 108, 255, 0.2));
    border-radius: 8px;
    padding: 0 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

main div.blog-content-box .article-header-box .article-header div.ai-article-tag .ai-article-tag-box .ai-article-tag-item span {
    font-size: 12px;
    background: linear-gradient(93deg, #359eff 5.45%, #0038ff 97.71%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

main div.blog-content-box .article-header-box .article-header div.ai-article-tag .ai-article-tag-box .ai-article-tag-item:hover {
    cursor: pointer;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#0cc), color-stop(#89ccfd), to(#fc6cff));
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #0cc, #89ccfd, #fc6cff);
    -webkit-box-shadow: 0 1px 10.4px 0 rgba(122, 189, 227, 0.6);
    box-shadow: 0 1px 10.4px 0 rgba(122, 189, 227, 0.6)
}

main div.blog-content-box .article-header-box .article-header div.ai-article-tag .ai-article-tag-box .ai-article-tag-item:hover span {
    background: linear-gradient(93deg, #359eff 5.45%, #bd00ff 97.71%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

main div.blog-content-box .creatActivityHref {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    background: #f9f9f9;
    margin-top: 12px
}

main div.blog-content-box .creatActivityHref img {
    width: 16px;
    height: 16px
}

main div.blog-content-box .creatActivityHref p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

main div.blog-content-box .creatActivityHref p .title {
    font-size: 14px;
    color: #1a1a1a;
    margin-right: 8px;
    margin-left: 8px
}

main div.blog-content-box .creatActivityHref p .title:hover {
    color: #fc5531
}

main div.blog-content-box .creatActivityHref p .text {
    color: #999aaa;
    font-size: 12px;
    margin-right: 8px
}

main div.blog-content-box #article-header-box .article-bar-top span.time,
main div.blog-content-box #article-header-box .article-bar-top span {
    margin-right: 8px
}

main div.blog-content-box #article-header-box .article-title-box {
    margin-bottom: 4px
}

main div.blog-content-box #article-header-box #blog_detail_zk_collection:hover .get-collection {
    color: #fc5531 !important
}

main div.blog-content-box #article-header-box .like-ab-new .article-read-img {
    margin-top: -2px
}

main div.blog-content-box #article-header-box .article-bar-top span.c-red {
    color: #fc5531
}

main div.blog-content-box #article-header-box .article-bar-top,
main div.blog-content-box #article-header-box .get-collection {
    font-size: 12px
}

main div.blog-content-box #article-header-box .article-collect-img {
    vertical-align: -2px
}

main div.blog-content-box #article-header-box .blog-tags-box {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 16px
}

main div.blog-content-box #article-header-box .blog-tags-box .tags-box {
    margin-right: 0
}

main div.blog-content-box #article-header-box .blog-tags-box,
main div.blog-content-box #article-header-box .bar-content {
    padding-left: 0
}

main div.blog-content-box #article-header-box .tag-link-new {
    margin-right: 4px;
    font-size: 14px;
    color: #006fff;
    padding: 0 4px;
    border-radius: 4px
}

main div.blog-content-box #article-header-box .tag-link-new:hover {
    background: rgba(0, 111, 255, 0.102)
}

main div.blog-content-box #article-header-box .community-name {
    color: #999aaa;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

main div.blog-content-box #article-header-box .community-name a.button:hover {
    color: #fc5531
}

main div.blog-content-box #article-header-box .community-name a.button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

main div.blog-content-box #article-header-box .community-name a.button img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    border-radius: 4px
}

main div.blog-content-box #article-header-box .community-name a.jion {
    border-radius: 12px;
    border: 1px solid #006fff;
    color: #006fff;
    padding: 0 6px;
    height: 24px;
    line-height: 23px;
    font-size: 12px;
    margin-left: 8px
}

main div.blog-content-box #article-header-box .community-name a.jion:hover {
    background: #e5f1ff
}

main div.blog-content-box #article-header-box .artic-tag-box {
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

main div.blog-content-box #article-header-box .artic-tag-box .article-tag {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

main div.blog-content-box #article-header-box .artic-tag-box .article-tag>p {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

main div.blog-content-box #article-header-box .title-article {
    font-size: 30px
}

main div.blog-content-box #article-header-box .article-info-box {
    background: none
}

main div.blog-content-box #article-header-box .article-type-text {
    padding: 0 6px;
    border-radius: 4px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    margin-right: 8px
}

main div.blog-content-box #article-header-box .article-type-text.translate {
    background: rgba(0, 111, 255, 0.102);
    color: #006fff
}

main div.blog-content-box #article-header-box .article-type-text.original {
    background: #ffeeea;
    color: #fc5531
}

main div.blog-content-box #article-header-box .article-type-text.reprint {
    background: rgba(39, 182, 96, 0.102);
    color: #27b660
}

main div.blog-content-box #article-header-box .href-article-edit {
    color: #999aaa
}

main div.blog-content-box #article-header-box .href-article-edit:hover {
    color: #fc5531
}

main div.blog-content-box #article-header-box .href-article-edit-new {
    position: relative;
    height: 100%;
    line-height: 32px;
    cursor: pointer
}

main div.blog-content-box #article-header-box .href-article-edit-new .href-article-edit-click {
    display: block
}

main div.blog-content-box #article-header-box .href-article-edit-new.active {
    color: #fc5531
}

main div.blog-content-box #article-header-box .href-article-edit-new:hover>span {
    color: #fc5531
}

main div.blog-content-box #article-header-box .href-article-edit-new .slide-content-box-new {
    position: absolute;
    top: 36px;
    left: 0;
    max-width: 400px;
    min-width: 100px;
    display: none;
    text-align: left;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 17px;
    padding: 6px 8px;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px
}

main div.blog-content-box #article-header-box .href-article-edit-new .slide-content-box-new::before {
    content: ' ';
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(0, 0, 0, 0.8);
    position: absolute;
    top: -9px
}

main div.blog-content-box #article-header-box .href-article-edit-new .slide-content-box-new a {
    vertical-align: unset;
    color: #fff;
    text-decoration: underline;
    margin-right: 0
}

main div.blog-content-box #article-header-box .href-article-edit-new .slide-content-box-new a:hover {
    color: #006fff
}

main div.blog-content-box #article-header-box .slide-content-box-new a {
    color: #006fff
}

main div.blog-content-box .article_resource {
    width: 100%;
    height: 56px;
    border-radius: 4px;
    background: #e8f3fc;
    padding: 0 16px;
    overflow: hidden;
    margin-bottom: 12px
}

main div.blog-content-box .article_resource .article_resource_content {
    float: left;
    width: calc(100% - 100px)
}

main div.blog-content-box .article_resource .article_resource_content dl {
    overflow: hidden;
    width: 100%
}

main div.blog-content-box .article_resource .article_resource_content dl dt {
    float: left;
    padding: 10px 0
}

main div.blog-content-box .article_resource .article_resource_content dl dt img {
    display: block;
    width: 32px;
    height: 36px
}

main div.blog-content-box .article_resource .article_resource_content dl dd {
    margin-left: 8px;
    padding: 7px 0;
    float: left;
    overflow: hidden;
    width: calc(100% - 40px)
}

main div.blog-content-box .article_resource .article_resource_content dl dd p {
    font-size: 14px;
    text-align: left;
    line-height: 20px;
    width: 320px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

main div.blog-content-box .article_resource .article_resource_content dl dd .article_resource_title {
    color: #000;
    margin-bottom: 2px
}

main div.blog-content-box .article_resource .article_resource_content dl dd .article_resource_describe {
    color: #4d4d4d;
    width: 100%
}

main div.blog-content-box .article_resource .article_resource_down {
    float: right;
    width: 80px;
    padding: 12px 0
}

main div.blog-content-box .article_resource .article_resource_down a {
    display: block;
    width: 80px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
    color: #fff;
    background: #ca0c16;
    font-size: 14px
}

main div.blog-content-box .padding24 {
    padding-left: 24px;
    padding-right: 24px
}

main div.blog-content-box article {
    position: relative;
    padding-top: 16px
}

main div.blog-content-box article .table-box {
    overflow-x: auto;
    margin-bottom: 24px
}

main div.blog-content-box article .table-box table {
    margin-bottom: 0
}

main div.blog-content-box article * {
    font-synthesis-style: auto;
    word-wrap: break-word
}

main div.blog-content-box article #content_views strong>* {
    font-weight: 700
}

main div.blog-content-box article #content_views img {
    cursor: -webkit-zoom-in;
    cursor: zoom-in
}

main div.blog-content-box article #content_views fieldset {
    width: auto !important;
    height: auto !important;
    padding: 16px
}

main div.blog-content-box article #content_views .markdown_views h1 {
    font-size: 22px;
    line-height: 32px
}

main div.blog-content-box article #content_views .markdown_views h2 {
    font-size: 22px;
    line-height: 32px
}

main div.blog-content-box article #content_views .markdown_views h3 {
    font-size: 20px;
    line-height: 30px
}

main div.blog-content-box article #content_views .markdown_views h4 {
    font-size: 18px;
    line-height: 28px
}

main div.blog-content-box article #content_views .markdown_views h5 {
    font-size: 16px;
    line-height: 26px
}

main div.blog-content-box article #content_views .markdown_views h6 {
    font-size: 16px;
    line-height: 24px
}

main div.blog-content-box article .article-source-link {
    font-size: 13px;
    color: #6b6b6b;
    line-height: 18px;
    margin-bottom: 12px;
    margin-top: 4px
}

main div.blog-content-box article .article-source-link a {
    font-size: 12px;
    color: #3399ea;
    text-decoration: underline
}

main div.blog-content-box div.article-bar-bottom {
    position: relative
}

main div.blog-content-box .article_info_click {
    margin-right: 0 !important;
    font-size: 12px;
    color: #3399ea;
    letter-spacing: 0;
    line-height: 20px;
    cursor: pointer;
    background-color: #fff;
    top: 0;
    right: 101px;
    width: 45px;
    display: inline-block
}

main div.blog-content-box div.article-ad {
    overflow: hidden;
    padding-top: 24px
}

main div.blog-content-box div.article-ad>div {
    text-align: center
}

main div.blog-content-box div.related-article {
    margin-top: 18px;
    line-height: 28px;
    width: 48%;
    display: inline-block
}

main div.blog-content-box div.related-article a:hover {
    color: #ca0c16
}

main div.blog-content-box div.related-article a:hover span {
    border-color: #ca0c16;
    color: #ca0c16
}

main div.blog-content-box div.related-article.related-article-prev {
    margin-right: 16px
}

main div.blog-content-box div.related-article.related-article-prev+.related-article-next {
    margin-top: 0
}

main div.blog-content-box div.related-article:last-child {
    margin-bottom: 0
}

main div.blog-content-box div.related-article>a>span {
    margin-right: 8px;
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid #e3e3e3;
    color: #4d4d4d
}

main .edu-promotion {
    margin-top: 8px;
    background: #fff;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05)
}

main .t0 {
    width: 100%;
    margin-top: 1px;
    margin-bottom: 1px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px 24px
}

main .t0 h4 {
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 28px;
    color: #3d3d3d
}

main .t0 h4 em {
    color: #ca0c16;
    font-style: normal
}

main .t0 .t0-img {
    float: left;
    width: 130px;
    margin-right: 32px
}

main .t0 .description {
    word-wrap: break-word;
    font-size: 14px;
    color: #999
}

.hide-article-pos {
    position: relative;
    z-index: 996;
    padding-top: 160px;
    bottom: -1px;
    margin-top: -220px
}

.hide-article-pos.active {
    margin-top: -372px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(52.22%, rgba(255, 255, 255, 0.52)), to(#fff));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.52) 52.22%, #fff 100%)
}

.hide-article-pos.activeb {
    margin-top: -296px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(52.22%, rgba(255, 255, 255, 0.52)), to(#fff));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.52) 52.22%, #fff 100%)
}

.hide-article-style {
    padding-top: 0;
    margin-top: 0;
    background-color: #fff
}

div.directory-boxshadow-dialog {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9000
}

div.directory-boxshadow-dialog .directory-boxshadow-dialog-box {
    width: 100%;
    height: 100%;
    position: absolute
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box {
    position: absolute;
    margin-top: 15vh;
    z-index: 1;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box .vip-limited-time-offer-content {
    position: relative;
    background-image: url("../../images/directory-boxshadow-dialog.png");
    background-size: cover;
    width: 400px;
    height: 594px
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box .vip-limited-time-offer-content .limited-time-btn {
    width: 100%;
    height: 66px;
    bottom: 19px;
    position: absolute;
    left: 0
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box .vip-limited-time-offer-content .limited-img {
    width: 24px;
    position: absolute;
    top: 73px;
    right: 0;
    cursor: pointer
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box .vip-limited-time-offer-content .limited-box .limited-num {
    font-size: 50px;
    position: absolute;
    top: 230px;
    left: 78px;
    font-weight: 800;
    color: #fff
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box .vip-limited-time-offer-content .limited-box .limited-quan {
    position: absolute;
    top: 240px;
    left: 209px;
    font-size: 36px;
    font-weight: bold;
    color: #fff
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box .vip-limited-time-offer-content .limited-time-box {
    font-size: 18px;
    font-weight: 500;
    color: #fff
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box .vip-limited-time-offer-content .time-hour {
    position: absolute;
    top: 318px;
    left: 145px
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box .vip-limited-time-offer-content .time-minite {
    position: absolute;
    top: 318px;
    left: 213px
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box .vip-limited-time-offer-content .time-second {
    position: absolute;
    top: 318px;
    left: 283px
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new {
    position: absolute;
    padding: 24px;
    top: 50%;
    z-index: 1;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 300px;
    height: 251px;
    border-radius: 8px;
    background: #fff;
    text-align: center
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .limited-img-new {
    position: absolute;
    z-index: 1;
    top: 10px;
    width: 18px;
    right: 10px;
    cursor: pointer
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .vip-limited-time-top {
    color: #222226;
    font-size: 20px;
    text-align: center
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .vip-limited-time-text {
    text-align: center;
    display: block;
    color: #555666;
    font-family: "PingFang SC";
    font-size: 12px;
    margin-top: 4px;
    margin-bottom: 8px
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .limited-time-box-new {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .limited-time-box-new span {
    width: 36px;
    padding: 0 8px;
    border-radius: 8px;
    background: #e4e4e4;
    text-align: center;
    font-size: 14px;
    color: #222226
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .limited-time-box-new i {
    font-size: 14px;
    color: #222226;
    margin: 0 8px
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .limited-time-vip-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 44px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 8px;
    padding: 0 10px;
    background: rgba(252, 85, 49, 0.1);
    margin-top: 16px;
    margin-bottom: 24px;
    color: #555666
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .limited-time-vip-box p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fc5531
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .limited-time-vip-box p img {
    height: 26px;
    margin-right: 4px
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .limited-time-vip-box p .active {
    font-size: 18px;
    font-weight: 600
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .limited-time-vip-box .time-minite {
    color: #555666
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .limited-time-btn-new {
    width: 120px;
    height: 38px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fc5531;
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

div.directory-boxshadow-dialog .vip-limited-time-offer-box-new .limited-time-btn-new:hover {
    background: #fc1944
}

div.hide-article-box {
    width: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(70%, #fff));
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 70%);
    padding-bottom: 32px
}

div.hide-article-box.vipmaskclassname {
    display: none
}

div.hide-article-box .border {
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    width: 100%;
    height: 2px;
    margin-bottom: 10px
}

div.hide-article-box #btn-lobinreadmore {
    width: 121px;
    color: #3399ea;
    border: 1px solid #3399ea
}

div.hide-article-box .article-footer-btn {
    color: #ca0c16;
    border: 1px solid #ca0c16;
    font-size: 14px;
    line-height: 30px
}

div.hide-article-box .article-footer-btn svg {
    width: 20px;
    height: 20px;
    vertical-align: middle
}

div.hide-article-box .article-footer-btn:hover {
    background-color: #fde3e4
}

div.hide-article-box .article-footer-btn:active {
    background-color: #fcc7ca
}

div.hide-article-box .liked {
    color: #999;
    fill: #999;
    border: 1px solid #999
}

div.hide-article-box .liked:hover,
div.hide-article-box .liked:active {
    background-color: #fff
}

div.hide-article-box .clear-share-style-article-footer {
    position: absolute;
    height: 34px;
    width: 100%;
    background-image: unset !important;
    padding: 0 !important;
    margin: 0 6px !important;
    top: 0;
    left: -5px
}

div.hide-article-box .article-footer-share-btn {
    position: relative;
    vertical-align: bottom
}

div.hide-article-box .chevrondown {
    color: #ca0c16;
    fill: #ca0c16;
    width: 22px
}

div.hide-article-box .follow-text {
    color: #ca0c16
}

div.hide-article-box .btn-readmore-style {
    display: block;
    width: 156px;
    height: 40px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(252, 85, 49, 0.2);
    box-shadow: 0 2px 4px 0 rgba(252, 85, 49, 0.2);
    border-radius: 20px;
    border: 1px solid #fc5531;
    font-weight: 500;
    color: #fc5531;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    margin: auto
}

div.hide-article-box .btn-readmore-style .readmore-img {
    width: 11px;
    height: 6px;
    vertical-align: 1px
}

div.hide-article-box .btn-readmore-style:hover {
    background: rgba(252, 85, 49, 0.1)
}

div.hide-article-box .studyvip-bt-href {
    display: block;
    margin-top: 12px;
    padding: 8px 0;
    background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(43%, #fff4e5), color-stop(57%, #fff4e5), to(#fff));
    background: linear-gradient(90deg, #fff 0%, #fff4e5 43%, #fff4e5 57%, #fff 100%);
    position: relative
}

div.hide-article-box .studyvip-bt-href img {
    width: auto;
    height: 20px;
    display: block;
    margin: auto
}

div.hide-article-box .studyvip-bt-href::before {
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff4e5;
    top: -6px;
    right: 33%
}

#content_views .container {
    width: 100% !important
}

#content_views {
    position: relative;
    min-height: 70px;
    font-size: 16px !important
}

#content_views .csdn-video-box iframe[data-mediaembed] {
    margin: 0;
    display: block;
    width: 730px;
    height: 365px
}

#content_views .csdn-video-box iframe[data-mediaembed=edu_course] {
    width: 100%;
    height: 600px
}

#content_views .csdn-video-box p {
    margin-top: 10px
}

#content_views div.csdn-data-video {
    margin: 0;
    width: 660px;
    height: 426px;
    position: relative
}

#content_views div.csdn-data-video img {
    display: block;
    margin: 0
}

#content_views div.csdn-data-video p {
    position: absolute;
    margin: 0 16px;
    left: 0;
    bottom: 18px;
    font-weight: bold
}

#content_views .desc {
    margin-bottom: 32px
}

.vip-mask {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.vip-mask .recommend-ask-box {
    margin-left: 40px
}

.vip-mask .vip-mask-card-box {
    margin-bottom: -20px;
    margin-top: 16px;
    position: relative
}

.vip-mask .vip-mask-card-box img {
    width: 100%
}

.vip-mask .vip-mask-card-box.active img {
    width: 420px
}

.vip-mask .read-all-content-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 128px;
    padding: 9px 16px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    background: #fff;
    border-radius: 26px;
    border: 1px solid #fc5531;
    cursor: pointer;
    color: #fc5531;
    font-size: 16px
}

.vip-mask .openvippay {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 220px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #fc5531;
    display: inline-block;
    text-align: center;
    line-height: 38px;
    color: #fc5531;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    background: #fff
}

.vip-mask .openvippay .btn-tag {
    position: absolute;
    right: -36px;
    bottom: 32px;
    height: 20px
}

.vip-mask .openvippay img.lock-img {
    width: 16px;
    height: 19px;
    margin-right: 8px;
    vertical-align: sub
}

.vip-mask .openvippay .badge-box {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -100%
}

.vip-mask .openvippay .badge-box .badge {
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: normal;
    white-space: nowrap
}

.vip-mask .openvippay .badge-box .triangle {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top: 5px solid;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.vip-mask .download-edu-app {
    width: 166px;
    height: 40px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(252, 85, 49, 0.2);
    box-shadow: 0 2px 4px 0 rgba(252, 85, 49, 0.2);
    border-radius: 20px;
    border: 1px solid #fc5531;
    display: inline-block;
    text-align: center;
    line-height: 38px;
    color: #fc5531;
    margin-left: 24px
}

.vip-mask .download-edu-app:hover {
    background: rgba(252, 85, 49, 0.1)
}

.column-mask,
.read-column-mask {
    text-align: center
}

.column-mask .about-more,
.read-column-mask .about-more {
    display: inline-block;
    width: 119px;
    height: 40px;
    background: #fff;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
    color: #5094d5;
    line-height: 40px;
    margin: 0 8px
}

.column-mask .lock-text,
.read-column-mask .lock-text {
    display: inline-block;
    width: 167px;
    height: 40px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(252, 85, 49, 0.2);
    box-shadow: 0 2px 4px 0 rgba(252, 85, 49, 0.2);
    border-radius: 20px;
    border: 1px solid #fc5531;
    font-size: 14px;
    font-weight: 500;
    color: #fc5531;
    line-height: 40px;
    text-align: center;
    position: relative
}

.column-mask .lock-text.off-shelf,
.read-column-mask .lock-text.off-shelf {
    cursor: default
}

.column-mask .lock-text:hover,
.read-column-mask .lock-text:hover {
    background: rgba(252, 85, 49, 0.1)
}

.column-mask .lock-text img.lock-img,
.read-column-mask .lock-text img.lock-img {
    width: 16px;
    height: 18px;
    vertical-align: -4px;
    margin: auto
}

.column-mask .lock-text img.subscript-img,
.read-column-mask .lock-text img.subscript-img {
    height: 24px;
    position: absolute;
    right: -15px;
    top: -13px
}

.column-mask .bt-tip-icon,
.read-column-mask .bt-tip-icon {
    position: absolute;
    display: block;
    right: -8px;
    top: -18px;
    height: 24px;
    border-radius: 12px 12px 12px 0;
    border: 1px solid #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    background: #fc1944;
    color: #fff;
    padding: 0 6px;
    text-align: center
}

.column-mask .lock-icon,
.read-column-mask .lock-icon {
    display: block;
    width: 100%
}

.column-mask .lock-icon img.lock-img,
.read-column-mask .lock-icon img.lock-img {
    width: 16px;
    height: 19px;
    vertical-align: -2px;
    margin: auto;
    margin-bottom: 16px
}

.column-mask .column-studyvip-bt,
.read-column-mask .column-studyvip-bt {
    font-family: "PingFang SC";
    display: inline-block;
    min-width: 168px;
    height: 40px;
    background: #fae8d0;
    border-radius: 23px;
    border: 1px solid #eed3ab;
    margin-left: 8px;
    line-height: 40px;
    text-align: center;
    position: relative
}

.column-mask .column-studyvip-bt .column_studyvip_free-active,
.read-column-mask .column-studyvip-bt .column_studyvip_free-active {
    display: inline-block;
    position: absolute;
    top: -18px;
    right: 0;
    width: 76px;
    height: 24px;
    background: #fc1944;
    border-radius: 12px 12px 12px 0;
    border: 1px solid #fff;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 24px;
    background: #fc1944;
    color: #fff;
    text-align: center
}

.column-mask .column-studyvip-bt:hover,
.read-column-mask .column-studyvip-bt:hover {
    background: #f8c883
}

.column-mask .column-studyvip-bt:hover img.column-activty-img,
.read-column-mask .column-studyvip-bt:hover img.column-activty-img {
    width: 360px;
    height: 200px
}

.column-mask .column-studyvip-bt .column-studyvip-icon,
.read-column-mask .column-studyvip-bt .column-studyvip-icon {
    width: 18px;
    height: 18px;
    vertical-align: -3px
}

.column-mask .column-studyvip-bt .column-studyvip-tit,
.read-column-mask .column-studyvip-bt .column-studyvip-tit {
    font-size: 14px;
    font-weight: 500;
    color: #69421b;
    position: relative
}

.column-mask .column-studyvip-bt img.column-activty-img,
.read-column-mask .column-studyvip-bt img.column-activty-img {
    position: absolute;
    right: 0;
    bottom: 39px;
    z-index: 10;
    width: 0;
    height: 0;
    -webkit-box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.04);
    box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.column-mask .column-studyvip-bt .column-studyvip-dec,
.read-column-mask .column-studyvip-bt .column-studyvip-dec {
    font-size: 12px;
    color: #a06a1a
}

.column-mask .column_coupon_box,
.read-column-mask .column_coupon_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 16px;
    display: none
}

.column-mask .column_coupon_box .column_coupon_main,
.read-column-mask .column_coupon_box .column_coupon_main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #ffe8de;
    border-radius: 4px
}

.column-mask .column_coupon_box .column_coupon_main.active .column_coupon_r,
.read-column-mask .column_coupon_box .column_coupon_main.active .column_coupon_r {
    color: #999aaa;
    cursor: not-allowed
}

.column-mask .column_coupon_box .column_coupon_main .column_coupon_icon,
.read-column-mask .column_coupon_box .column_coupon_main .column_coupon_icon {
    width: 64px;
    height: 22px
}

.column-mask .column_coupon_box .column_coupon_main .column_coupon_text,
.read-column-mask .column_coupon_box .column_coupon_main .column_coupon_text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.column-mask .column_coupon_box .column_coupon_main .column_coupon_l,
.read-column-mask .column_coupon_box .column_coupon_main .column_coupon_l {
    font-size: 12px;
    font-weight: 600;
    color: #ff6461;
    line-height: 16px;
    padding-left: 6px;
    padding-right: 24px
}

.column-mask .column_coupon_box .column_coupon_main .column_coupon_m,
.read-column-mask .column_coupon_box .column_coupon_main .column_coupon_m {
    width: 1px;
    height: 14px;
    background: rgba(255, 97, 134, 0.2)
}

.column-mask .column_coupon_box .column_coupon_main .column_coupon_r,
.read-column-mask .column_coupon_box .column_coupon_main .column_coupon_r {
    font-size: 12px;
    font-weight: 500;
    color: #ff6662;
    line-height: 16px;
    padding: 0 12px;
    cursor: pointer
}

.column-mask.e-book .lock-text {
    border: 1px solid #fc5531;
    line-height: 20px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #fc5531;
    width: 186px
}

.column-mask.e-book .mask-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 22px
}

.column-mask.e-book .ebook-studyvip-free {
    min-width: 156px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 40px;
    padding: 4px 18px;
    border-radius: 43px;
    background: #e4dcf5;
    border: none
}

.column-mask.e-book .ebook-studyvip-free>span {
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: #5e3d79
}

.column-mask.e-book .ebook-studyvip-free .studyvip-icon {
    width: 18px;
    height: 18px;
    margin-right: 4px
}

.column-mask.e-book .normalVip-flash-sale {
    font-family: "PingFang SC";
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    min-width: 157px;
    height: 40px;
    padding: 4px 18px;
    border-radius: 43px;
    background: #fbe9d5;
    border: none;
    cursor: pointer
}

.column-mask.e-book .normalVip-flash-sale .normalVip-flash-sale-text {
    font-size: 14px;
    font-weight: 500;
    color: #623b19;
    line-height: 16px
}

.column-mask.e-book .normalVip-flash-sale .normalVip-flash-sale-icon {
    width: 18px;
    height: 18px;
    margin-right: 4px
}

.column-mask.e-book .normalVip-flash-sale .normalVip-flash-sale-price {
    font-size: 14px;
    font-weight: 600;
    margin-left: 8px;
    color: #623b19;
    line-height: 16px
}

.column-mask.e-book .normalVip-flash-sale .normalVip-flash-sale-price .symbol {
    font-size: 14px;
    font-weight: 600;
    color: #623b19;
    line-height: 16px;
    margin-right: 2px
}

.column-mask.e-book .normalVip-flash-sale .normalVip-flash-sale-tip {
    position: absolute;
    top: -12.5px;
    right: 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #fff;
    z-index: 2
}

.column-mask.e-book .normalVip-flash-sale .normalVip-flash-sale-tip-bg {
    position: absolute;
    top: -16px;
    right: 0;
    width: 89px;
    height: 26px;
    -o-object-fit: cover;
    object-fit: cover
}

.csdn-side-toolbar {
    bottom: 30px !important
}

.csdn-side-toolbar #sidecolumn-deepseek {
    height: auto
}

.csdn-side-toolbar #sidecolumn-deepseek img {
    width: 100%;
    opacity: 1
}

.csdn-side-toolbar #sidecolumn-deepseek .show-txt {
    white-space: normal
}

.csdn-side-toolbar #sidecolumn-deepseek .show-txt.active {
    left: -70px;
    top: 98px
}

.csdn-side-toolbar #sidecolumn-deepseek .show-txt.active::before {
    top: 50%;
    left: 101%;
    -webkit-transform: translateX(-50%) rotate(-90deg);
    transform: translateX(-50%) rotate(-90deg)
}

.csdn-side-toolbar #sidecolumn-deepseek .show-txt.active::after {
    top: 50%;
    left: 102%;
    -webkit-transform: translateX(-50%) rotate(-90deg);
    transform: translateX(-50%) rotate(-90deg)
}

.csdn-side-toolbar #slide-details-cknows-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 18px 10px;
    cursor: pointer
}

.csdn-side-toolbar .slide-details-cknows-box {
    border-radius: 23px;
    margin-top: 24px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #fff;
    position: relative
}

.csdn-side-toolbar .slide-details-cknows-box:hover .slide-details-cknows-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.csdn-side-toolbar .slide-details-cknows-box:hover::before {
    content: '';
    position: absolute;
    right: 45px;
    -webkit-transform: translateX(-50%) rotate(-45deg);
    transform: translateX(-50%) rotate(-45deg);
    width: 10px;
    height: 10px;
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    background-color: transparent;
    z-index: 10;
    background: #fff;
    top: 53px
}

.csdn-side-toolbar .slide-details-cknows-box:hover::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 16px;
    right: 54px;
    background-color: #fff;
    z-index: 10;
    top: 50px
}

.csdn-side-toolbar .slide-details-cknows-box .icon-bg {
    width: 20px
}

.csdn-side-toolbar .slide-details-cknows-box .title {
    margin-top: 8px;
    width: 12px;
    font-weight: 600;
    font-size: 14px;
    color: #000
}

.csdn-side-toolbar .slide-details-cknows-box .slide-details-cknows-content {
    display: none;
    position: absolute;
    right: 44px;
    padding-right: 10px;
    top: -38px
}

.csdn-side-toolbar .slide-details-cknows-box .slide-details-cknows-content .slide-details-cknows-mask {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #fff;
    border-radius: 4px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 12px 8px 16px 12px;
    padding-top: 12px;
    width: 220px;
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.149);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.149)
}

.csdn-side-toolbar .slide-details-cknows-box .slide-details-cknows-content a {
    width: 96px;
    height: 80px;
    margin-top: 4px;
    margin-right: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 4px
}

.csdn-side-toolbar .slide-details-cknows-box .slide-details-cknows-content a:hover {
    background: #f2f2f2
}

.csdn-side-toolbar .slide-details-cknows-box .slide-details-cknows-content a img {
    width: 24px;
    height: 24px
}

.csdn-side-toolbar .slide-details-cknows-box .slide-details-cknows-content a span {
    color: #999;
    font-size: 12px;
    margin-top: 8px
}

.csdn-side-toolbar .sidecolumn-vip {
    margin-top: 24px;
    display: block;
    text-align: center
}

.csdn-side-toolbar .sidecolumn-vip img {
    width: 42px
}

.htmledit_views p,
.markdown_views p {
    font-size: 16px !important
}

#content_views .link-card-box {
    margin: 8px auto 16px;
    padding: 8px 16px;
    display: block;
    background: #f5f7fa;
    border-radius: 4px;
    border: 1px solid #dbdbdb;
    cursor: pointer
}

#content_views .link-card-box:hover {
    border-color: #409eff
}

#content_views .link-card-box span {
    display: block
}

#content_views .link-card-box .link-title {
    margin-bottom: 8px;
    color: #222226;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#content_views .link-card-box .link-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
    max-height: 40px;
    font-size: 14px;
    font-weight: 400;
    color: #999aaa;
    line-height: 20px;
    overflow: hidden
}

#content_views .link-card-box .link-link {
    color: #409eff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1;
    background-size: 14px 14px;
    background-repeat: no-repeat
}

#content_views .link-card-box .link-link img {
    margin-right: 8px;
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px
}

#content_views.markdown_views>.toc ul {
    margin: 0;
    padding: 0;
    padding-left: 48px
}

#content_views.markdown_views>.toc ul li {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 2px
}

#content_views.htmledit_views>#main-toc {
    margin-bottom: 24px
}

.recommend-ask-box.has-bg {
    background-color: #fff;
    width: 100%;
    padding: 24px
}

.recommend-ask-box .chat-box {
    position: relative;
    padding: 0 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    height: 48px
}

.recommend-ask-box .chat-box input[type="text"] {
    margin-right: 40px;
    border: none;
    display: block;
    width: 100%;
    line-height: 48px;
    color: #555666;
    font-size: 14px
}

.recommend-ask-box .chat-box input[type="text"]::-webkit-input-placeholder {
    color: #999aaa
}

.recommend-ask-box .chat-box input[type="text"]::-moz-placeholder {
    color: #999aaa
}

.recommend-ask-box .chat-box input[type="text"]::-ms-input-placeholder {
    color: #999aaa
}

.recommend-ask-box .chat-box input[type="text"]::placeholder {
    color: #999aaa
}

.recommend-ask-box .chat-box .btn-gochat {
    padding: 12px 16px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    border: none;
    background-color: #f7f7fc;
    cursor: pointer;
    white-space: nowrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #222226;
    border-radius: 0 20px 20px 0
}

.recommend-ask-box .chat-box .btn-gochat img {
    margin-left: 8px;
    display: block;
    width: 24px;
    height: auto
}

.recommend-ask-box .chat-box .btn-gochat img.btn-tag {
    position: absolute;
    right: 0;
    top: 4px;
    width: auto;
    height: 20px;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%)
}

.recommend-ask-box .chat-box .btn-gochat img.icon-robot {
    margin-left: 0;
    margin-right: 8px;
    width: 20px;
    height: auto
}

.recommend-ask-box .btn-box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.recommend-ask-box .btn-box img.btn-tag {
    position: absolute;
    right: 32px;
    top: -16px;
    display: block;
    height: 20px;
    width: auto;
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

.recommend-ask-box a.btn-link-toask {
    position: relative;
    background-image: url("../../images/icon-go-ask-new.png");
    background-size: 16px 16px;
    background-position: 16px center;
    background-repeat: no-repeat;
    height: 40px;
    padding: 10px 24px 6px 40px;
    background-color: #fff;
    color: #222226;
    font-size: 16px;
    font-weight: 500;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 20px;
    border: 1px solid #7a7a7a
}

.recommend-ask-box a.btn-link-toask:hover {
    background-color: #f5f6f7
}

.is_black_skin .recommend-ask-box {
    color: #b4b4b4 !important
}

.aigc-blog-detail p {
    margin: 16px 0;
    font-size: 12px;
    color: #ccc;
    text-align: center
}

.ai-abstract-box {
    margin-top: 12px;
    position: relative
}

.ai-abstract-box.active {
    min-height: 66px
}

.ai-abstract-box .abstract-ab {
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(34, 34, 38, 0.67)
}

.ai-abstract {
    padding: 8px 16px;
    z-index: 11;
    border-radius: 8px;
    background-color: #fff
}

.ai-abstract::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(99deg, rgba(255, 91, 145, 0.05) 2%, rgba(63, 169, 245, 0.05) 51.48%, rgba(58, 175, 246, 0.05) 57.25%, rgba(46, 193, 248, 0.05) 65.5%, rgba(25, 222, 251, 0.05) 74.57%, rgba(0, 255, 255, 0.05) 82.82%)
}

.ai-abstract.active {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2)
}

.ai-abstract.active .abstract-content {
    -webkit-line-clamp: unset
}

.ai-abstract .abstract-content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-line-clamp: 2;
    color: #666;
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    word-break: break-all
}

.ai-abstract .abstract-content img {
    height: 20px;
    margin-right: 8px;
    vertical-align: text-top
}

.ai-abstract>p {
    color: rgba(34, 34, 38, 0.6);
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400
}

.ai-abstract>p a {
    color: #277ccc
}

.blog-extension-box .blog_extension,
.blog-extension-box .blog_extension_card {
    border-radius: 8px
}

.runner-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 44px;
    min-width: 128px;
    padding: 16px;
    margin-left: 16px;
    margin-right: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 8px;
    color: #fff;
    background: #2774e9;
    border: none
}

.runner-btn:hover .icon-play.play4 {
    background-image: url("../../images/0d50be7475f840bc9334adb05c18e13f.png")
}

.runner-btn .icon-play {
    width: 16px;
    height: 16px;
    background-image: url("../../images/842fedd3c3f84f7097616cdc56124fc0.png");
    background-size: 16px 16px;
    margin-right: 8px
}

.runner-btn .icon-play.play2 {
    background-image: url("../../images/2aa6d7dab9a2413d84b74b0de6e7951a.png");
    margin-left: 8px;
    margin-right: 0
}

.runner-btn .icon-play.play3 {
    background-image: url("../../images/2aa6d7dab9a2413d84b74b0de6e7951a.png");
    width: 16px;
    height: 16px;
    background-size: 16px 16px
}

.runner-btn .icon-play.play4 {
    background-image: url("../../images/c0b9934dfadb4f92af4187a1c865fa66.png");
    margin-left: 3px;
    margin-right: 0;
    width: 14px;
    height: 14px
}

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

.runner-box.ins-code-runner-btn {
    cursor: pointer
}

.runner-box.box1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #222226;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 16px
}

.runner-box.box1 .ins-code-runner-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer
}

.runner-box.box1 span {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    font-family: "PingFang SC"
}

.runner-box.box1 .runner-btn {
    background: none;
    width: auto;
    height: auto;
    padding: 0;
    margin-left: 0;
    color: #2774e9;
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    min-width: unset
}

.runner-box.box1 .to-recommend-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    line-height: 22px;
    color: #666
}

.runner-box.box1 .to-recommend-link:hover {
    color: #006fff
}

.runner-box.box1 .to-recommend-link:hover img.hover {
    display: block
}

.runner-box.box1 .to-recommend-link:hover img.normal {
    display: none
}

.runner-box.box1 .to-recommend-link img {
    width: 16px;
    height: 16px;
    margin-left: 6px
}

.runner-box.box1 .to-recommend-link img.normal {
    display: block
}

.runner-box.box1 .to-recommend-link img.hover {
    display: none
}

.runner-box.box2 {
    margin-top: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    height: 72px
}

.runner-box.box2 .inscode-ai-ask-box {
    padding: 14px 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 24px;
    width: 50%;
    height: 72px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #fff;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.runner-box.box2 .inscode-ai-ask-box:hover,
.runner-box.box2 .inscode-ai-ask-box:focus-within {
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 16px 48px 0 rgba(29, 31, 58, 0.06), 0 8px 24px 0 rgba(29, 31, 58, 0.03), 0 4px 12px 0 rgba(29, 31, 58, 0.03), 0 2px 6px 0 rgba(29, 31, 58, 0.03), 0 1px 3px 0 rgba(29, 31, 58, 0.03);
    box-shadow: 0 16px 48px 0 rgba(29, 31, 58, 0.06), 0 8px 24px 0 rgba(29, 31, 58, 0.03), 0 4px 12px 0 rgba(29, 31, 58, 0.03), 0 2px 6px 0 rgba(29, 31, 58, 0.03), 0 1px 3px 0 rgba(29, 31, 58, 0.03)
}

.runner-box.box2 .inscode-ai-ask-box #txtInscodeAsk {
    padding: 0;
    width: 100%;
    resize: none;
    border: none;
    font-size: 16px;
    color: #1a1a1a;
    line-height: 22px;
    outline: none
}

.runner-box.box2 .inscode-ai-ask-box #txtInscodeAsk::-webkit-input-placeholder {
    color: #999;
    font-size: 14px
}

.runner-box.box2 .inscode-ai-ask-box #txtInscodeAsk::-moz-placeholder {
    color: #999;
    font-size: 14px
}

.runner-box.box2 .inscode-ai-ask-box #txtInscodeAsk::-ms-input-placeholder {
    color: #999;
    font-size: 14px
}

.runner-box.box2 .inscode-ai-ask-box #txtInscodeAsk::placeholder {
    color: #999;
    font-size: 14px
}

.runner-box.box2 .inscode-ai-ask-box #txtInscodeAsk:focus {
    outline: none
}

.runner-box.box2 .inscode-ai-ask-box .inscode-submit-btn {
    padding: 4px 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 17px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 1000px;
    border: none;
    height: 32px
}

.runner-box.box2 .inscode-ai-ask-box .inscode-submit-btn:hover {
    opacity: .7
}

.runner-box.box2 .inscode-ai-ask-box .inscode-submit-btn img {
    margin-left: 4px;
    display: block;
    width: 12px;
    height: 12px
}

.runner-box.box2 .ins-code-runner-btn {
    width: 50%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    background: #f9f9f9 url("../../images/60efa1f5ae5240b3991f02f260995545.png") left top no-repeat;
    background-size: 164px 72px;
    border-radius: 8px
}

.runner-box.box2 .ins-code-runner-btn:hover {
    background-color: #e0e0e0
}

.runner-box.box2 .ins-code-runner-btn:hover .mask {
    background: -webkit-gradient(linear, left top, right top, from(rgba(224, 224, 224, 0)), to(#e0e0e0));
    background: linear-gradient(90deg, rgba(224, 224, 224, 0) 0%, #e0e0e0 100%)
}

.runner-box.box2 .ins-code-runner-btn .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: 16px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.runner-box.box2 .ins-code-runner-btn .mask {
    width: 128px;
    height: 72px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-left: 36px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(247, 247, 250, 0)), to(#f9f9f9));
    background: linear-gradient(90deg, rgba(247, 247, 250, 0) 0%, #f9f9f9 100%)
}

.runner-box.box2 .ins-code-runner-btn span {
    color: #1d1f3a;
    font-family: 'PingFang SC';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px
}

.runner-box.box2 .ins-code-runner-btn .runner-btn {
    padding: 0;
    margin: 0;
    margin-top: 4px;
    background: none;
    font-size: 16px;
    color: #2774e9;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 600;
    width: auto;
    min-width: unset;
    line-height: 25px;
    height: unset
}

.runner-box.box3 {
    position: fixed;
    bottom: 140px;
    width: 332px;
    height: 187px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 4px;
    background-color: #000;
    background-image: url("https://csdnimg.cn/release/blogv2/dist/pc/img/runCode/bg-box.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2);
    right: 200px;
    z-index: 1000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.runner-box.box3 .close-btn {
    position: absolute;
    font-size: 32px;
    color: #fff;
    cursor: pointer;
    right: 16px;
    position: absolute;
    top: 16px;
    height: 16px;
    line-height: 16px;
    width: 16px;
    cursor: pointer;
    font-family: sans-serif
}

.runner-box.box3 .title {
    color: #fff;
    font-family: "PingFang SC";
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    max-width: 176px;
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
}

.runner-box.box3 .runner-btn {
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    padding: 16px;
    font-size: 16px;
    line-height: 22px;
    border-radius: 4px;
    font-weight: 600
}

.runner-box.box4 {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: .5px solid #666;
    color: #999;
    padding: 12px 0
}

.runner-box.box4 span {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: "PingFang SC"
}

.runner-box.box4 .runner-btn {
    background: none;
    width: auto;
    height: auto;
    padding: 0;
    margin-left: 0;
    color: #80b7ff;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.runner-box.box4 .runner-btn:hover {
    color: #006fff
}

.is_black_skin .runner-box.box1 {
    color: #ccc;
    border-bottom: 1px solid #4b4848
}

.is_black_skin .runner-box.box1 .to-recommend-link {
    color: #fff
}

.is_black_skin .runner-box.box1 .to-recommend-link:hover {
    color: #006fff
}

.starmap-box {
    cursor: pointer
}

.starmap-box.box1 {
    margin-top: 24px;
    color: #222226;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px
}

.starmap-box.box1 .btn-go {
    margin-left: 6px;
    color: #006fff;
    padding-right: 26px;
    background-image: url("../../images/icon-arrow-right1.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: right center;
    background-color: transparent;
    font-size: 16px;
    font-weight: 600;
    border: none
}

.starmap-box.box2 {
    margin-top: 24px;
    margin-bottom: 24px
}

.starmap-box.box2 .starmap-title {
    font-size: 16px;
    font-weight: 500;
    color: #666
}

.starmap-box.box2 .starmap-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 8px;
    padding: 8px;
    background-color: #f9f9f9;
    border-radius: 10px
}

.starmap-box.box2 .starmap-content .starmap-info-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.starmap-box.box2 .starmap-content .starmap-info-box .img-box {
    width: 85px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.starmap-box.box2 .starmap-content .starmap-info-box .img-box img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    aspect-ratio: 16/9
}

.starmap-box.box2 .starmap-content .starmap-info-box .info-box {
    margin-left: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.starmap-box.box2 .starmap-content .starmap-info-box .info-box .title-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.starmap-box.box2 .starmap-content .starmap-info-box .info-box .title-box .title {
    font-size: 16px;
    color: #000;
    font-weight: 600;
    line-height: 22px
}

.starmap-box.box2 .starmap-content .starmap-info-box .info-box .title-box .tag-box {
    margin-left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.starmap-box.box2 .starmap-content .starmap-info-box .info-box .title-box .tag-box .tag-item {
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    color: #666;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px
}

.starmap-box.box2 .starmap-content .starmap-info-box .info-box .title-box .tag-box .tag-item:first-child {
    margin-left: 0
}

.starmap-box.box2 .starmap-content .starmap-info-box .info-box .desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: #666;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px
}

.starmap-box.box2 .starmap-content .starmap-operate-box {
    margin-left: 28px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.starmap-box.box2 .starmap-content .starmap-operate-box .starmap-operate-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 6px 12px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 100px;
    background: #2774e9;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    border: none
}

.is_black_skin .starmap-box.box1 {
    color: #fff
}

.is_black_skin .starmap-box.box2 .starmap-content {
    background-color: rgba(255, 255, 255, 0.1)
}

.is_black_skin .starmap-box.box2 .starmap-content .starmap-info-box .info-box .title-box .title {
    color: #fff
}

.is_black_skin .starmap-box.box2 .starmap-content .starmap-info-box .info-box .title-box .tag-box .tag-item {
    border-color: #4d4d4d;
    background-color: #1a1a1a;
    color: #fff
}

.is_black_skin .starmap-box.box2 .starmap-content .starmap-info-box .info-box .desc {
    color: #b2b2b2
}

.pagination-box {
    margin-top: -1px;
    padding: 0 0 0
}

.pagination-box .ui-paging-container {
    margin-bottom: 4px
}

#commentAuthAlertModal {
    position: fixed;
    z-index: 1000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

#commentAuthAlertModal .pos-box {
    position: relative;
    width: 100%;
    height: 100%
}

#commentAuthAlertModal .pos-box .modal-box {
    padding: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 160px;
    border-radius: 4px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

#commentAuthAlertModal .pos-box .modal-box .title {
    color: #000;
    font-family: PingFang SC;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px
}

#commentAuthAlertModal .pos-box .modal-box .content-box {
    margin-top: 8px;
    color: #555666;
    font-family: PingFang SC;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

#commentAuthAlertModal .pos-box .modal-box .content-box svg {
    vertical-align: -3px
}

#commentAuthAlertModal .pos-box .modal-box .opt-box {
    margin-top: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

#commentAuthAlertModal .pos-box .modal-box .opt-box .btn-modal-close {
    padding: 4px 14px;
    margin-left: auto;
    border-radius: 16px;
    background: #fc5531;
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer
}

.comment-reward-item {
    margin-top: 2px;
    padding-left: 18px;
    margin-right: 8px;
    height: 18px;
    background-image: url("https://csdnimg.cn/release/blogv2/dist/pc/img/iconCommentReward.png");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.comment-reward-item[data-status='received'],
.comment-reward-item[data-status='expired'],
.comment-reward-item[data-status='completed'] {
    opacity: .6
}

.comment-reward-item .amount {
    display: block;
    padding: 0 6px;
    height: 18px;
    background: #fde7e8;
    border-radius: 8px;
    font-size: 12px;
    color: #fc5533;
    line-height: 18px
}

.redEnvolope {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(61, 61, 61, 0.5);
    z-index: 2001;
    cursor: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.redEnvolope .env-box {
    width: 375px;
    position: relative;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.redEnvolope .env-box .env-container {
    position: relative;
    width: 100%;
    height: 550px;
    font-size: 14px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    background: #fff
}

.redEnvolope .env-box .env-container .pre-open {
    position: relative;
    overflow: hidden;
    height: 100%;
    background-size: 100%;
    color: #fff;
    text-align: center;
    font-weight: 500;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.redEnvolope .env-box .env-container .pre-open .top {
    position: relative;
    height: 422px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("https://csdnimg.cn/release/blogv2/dist/pc/img/red-open-bg.png");
    z-index: 10;
    top: 0
}

.redEnvolope .env-box .env-container .pre-open .top.slide-top {
    -webkit-animation: silde-to-top .8s ease;
    animation: silde-to-top .8s ease
}

.redEnvolope .env-box .env-container .pre-open .top header {
    line-height: 40px;
    font-size: 18px;
    padding-top: 60px;
    word-break: break-all;
    background: none;
    height: unset
}

.redEnvolope .env-box .env-container .pre-open .top header .author {
    margin-top: 12px;
    line-height: 30px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    padding: 0 16px
}

.redEnvolope .env-box .env-container .pre-open .top header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle
}

.redEnvolope .env-box .env-container .pre-open .top .bot-icon {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 0;
    background: url("https://csdnimg.cn/release/blogv2/dist/pc/img/top-cir.png") no-repeat;
    background-size: contain
}

.redEnvolope .env-box .env-container .pre-open footer {
    position: absolute;
    border-radius: 0 0 8px 8px;
    height: 160px;
    width: 100%;
    bottom: 0;
    background: url("https://csdnimg.cn/release/blogv2/dist/pc/css/icon-img/red-bottom.png") no-repeat;
    background-size: 100%;
    z-index: 99
}

.redEnvolope .env-box .env-container .pre-open footer.slide-bottom {
    -webkit-animation: silde-to-bottom .8s ease;
    animation: silde-to-bottom .8s ease
}

.redEnvolope .env-box .env-container .pre-open footer .tip {
    color: #f0f0f0
}

.redEnvolope .env-box .env-container .pre-open footer .tip .rule {
    color: #fff;
    margin-left: 8px;
    text-decoration: underline
}

.redEnvolope .env-box .env-container .pre-open footer .red-openbtn {
    width: 106px;
    height: 106px;
    background: url("https://csdnimg.cn/release/blogv2/dist/pc/css/icon-img/red-open.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: relative;
    top: 25px;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 20
}

.redEnvolope .env-box .env-container .pre-open footer .red-openbtn.red-hidebtn {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
    opacity: 0
}

.redEnvolope .env-box .env-container .pre-open footer .red-openbtn.open-start {
    -webkit-animation: open .2s linear .5s infinite alternate;
    animation: open .2s linear .5s infinite alternate
}

.redEnvolope .env-box .env-container .pre-open footer .red-openbtn.rotate-start {
    -webkit-animation: rotatestart .5s linear 0s infinite alternate;
    animation: rotatestart .5s linear 0s infinite alternate
}

@-webkit-keyframes open {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1)
    }

    100% {
        -webkit-transform: translate(-50%, -50%) scale(.95);
        transform: translate(-50%, -50%) scale(.95)
    }
}

@keyframes open {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1)
    }

    100% {
        -webkit-transform: translate(-50%, -50%) scale(.95);
        transform: translate(-50%, -50%) scale(.95)
    }
}

@-webkit-keyframes rotatestart {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateY(0);
        transform: translate(-50%, -50%) rotateY(0)
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotateY(180deg);
        transform: translate(-50%, -50%) rotateY(180deg)
    }
}

@keyframes rotatestart {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateY(0);
        transform: translate(-50%, -50%) rotateY(0)
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotateY(180deg);
        transform: translate(-50%, -50%) rotateY(180deg)
    }
}

.redEnvolope .env-box .env-container .opened {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    width: calc(100% + 2px);
    height: 100%;
    background-size: 100%;
    color: #fff;
    text-align: center;
    font-weight: 500;
    margin: auto;
    position: absolute;
    top: 0;
    display: none
}

.redEnvolope .env-box .env-container .opened .bot-icon {
    background: url("../../images/red-inner-top.png") no-repeat;
    background-size: contain;
    height: 100px;
    top: -1px !important;
    padding-top: 12px
}

.redEnvolope .env-box .env-container .opened .bot-icon header {
    word-break: break-all;
    background: none;
    height: unset
}

.redEnvolope .env-box .env-container .opened .bot-icon header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 8px
}

.redEnvolope .env-box .env-container .opened .bot-icon header .author {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    padding: 0 16px;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.redEnvolope .env-box .env-container .opened .bot-icon header .author .tt {
    max-width: 230px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.redEnvolope .env-box .env-container .opened .receive-box {
    height: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.redEnvolope .env-box .env-container .opened .receive-box header {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f2;
    background: none;
    height: unset
}

.redEnvolope .env-box .env-container .opened .receive-box header .my-receive {
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fc5533;
    line-height: 40px;
    margin-bottom: 4px
}

.redEnvolope .env-box .env-container .opened .receive-box header .wallet-msg {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222226;
    line-height: 20px;
    margin-bottom: 8px
}

.redEnvolope .env-box .env-container .opened .receive-box header .wallet-msg a {
    color: #277ccc
}

.redEnvolope .env-box .env-container .opened .receive-box header .receive-msg {
    display: inline-block;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999aaa;
    line-height: 18px
}

.redEnvolope .env-box .env-container .opened .receive-box header a.rule {
    margin-left: 4px;
    color: #277ccc;
    font-size: 12px;
    font-weight: 400
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list {
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list .user-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 12px 24px;
    position: relative
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list .user-item:after {
    content: '';
    width: calc(100% - 48px);
    height: 1px;
    background: #f0f0f2;
    position: absolute;
    bottom: 0;
    display: block;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list .user-item .user-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list .user-item .user-info img {
    width: 32px;
    height: 32px;
    -webkit-box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.3);
    margin-right: 16px;
    border-radius: 50%
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list .user-item .user-info .u-info {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    text-align: left
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list .user-item .user-info .u-info .name {
    font-size: 14px;
    color: #222226;
    line-height: 20px;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list .user-item .user-info .u-info .time {
    font-size: 12px;
    color: #999aaa;
    line-height: 16px
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list .user-item .money {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list .user-item .money span {
    font-size: 14px;
    font-weight: 400;
    color: #222226;
    line-height: 20px
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list .user-item .money img {
    width: 66px
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list::-webkit-scrollbar {
    width: 5px;
    height: 100px
}

.redEnvolope .env-box .env-container .opened .receive-box .receive-list::-webkit-scrollbar-thumb {
    background-color: rgba(153, 154, 170, 0.6);
    border-radius: 2px
}

.redEnvolope .env-box .close-btn {
    background: url("../../images/redstart-close.png") no-repeat;
    background-size: 100%;
    width: 28px;
    height: 28px;
    margin: 16px auto;
    cursor: pointer
}

.redEnvolope .env-box .close-btn:hover {
    background: url("../../images/redend-close.png") no-repeat;
    background-size: 100%
}

.redEnvolope.wap .env-box {
    width: 320px
}

.redEnvolope.wap .env-box .env-container {
    height: 468px
}

.redEnvolope.wap .env-box .env-container .pre-open .top {
    height: 354px
}

.redEnvolope.wap .env-box .env-container .pre-open .top .bot-icon {
    bottom: -8px
}

.redEnvolope.wap .env-box .env-container .pre-open footer {
    height: 136px
}

.redEnvolope.wap .env-box .env-container .pre-open footer .tip {
    margin-top: -12px
}

.redEnvolope.wap .env-box .env-container .opened .bot-icon {
    height: 86px;
    padding-top: 8px
}

.redEnvolope.wap .env-box .env-container .opened .bot-icon header {
    background: none;
    height: unset
}

.redEnvolope.wap .env-box .env-container .opened .bot-icon header img {
    margin-bottom: 0
}

.redEnvolope.wap .env-box .env-container .opened .receive-box header {
    padding-top: 0;
    background: none;
    height: unset
}

.redEnvolope.wap .env-box .env-container .opened .receive-box header .my-receive {
    font-size: 22px;
    font-weight: 500;
    color: #fc5533;
    margin: 8px 0;
    line-height: 22px
}

.redEnvolope.wap .env-box .env-container .opened .receive-box header .wallet-msg {
    font-size: 12px;
    font-weight: 400;
    color: #222226;
    margin-bottom: 4px
}

.redEnvolope.wap .env-box .env-container .opened .receive-box header .wallet-msg a {
    color: #277ccc
}

@-webkit-keyframes silde-to-top {
    0% {
        top: 0
    }

    100% {
        top: -425px
    }
}

@keyframes silde-to-top {
    0% {
        top: 0
    }

    100% {
        top: -425px
    }
}

@-webkit-keyframes silde-to-bottom {
    0% {
        bottom: 0
    }

    100% {
        bottom: -200px
    }
}

@keyframes silde-to-bottom {
    0% {
        bottom: 0
    }

    100% {
        bottom: -200px
    }
}

.comment-box.comment-box-new2 {
    margin-bottom: 8px;
    border-radius: 2px;
    background: #fff;
    width: 100%;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content
}

.comment-box.comment-box-new2.unlogin-comment-box-new {
    padding: 20px 24px
}

.comment-box.comment-box-new2.unlogin-comment-box-new .unlogin-comment-model {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.comment-box.comment-box-new2.unlogin-comment-box-new .unlogin-comment-tit {
    display: inline-block;
    padding-right: 16px;
    font-size: 16px;
    font-weight: 500;
    color: #222226;
    line-height: 24px;
    margin-right: 24px;
    background-image: url("../../images/commentArrowRightWhite.png");
    background-size: 16px auto;
    background-repeat: no-repeat;
    background-position: right center
}

.comment-box.comment-box-new2.unlogin-comment-box-new .unlogin-comment-text {
    font-size: 14px;
    color: #555666;
    line-height: 24px
}

.comment-box.comment-box-new2.unlogin-comment-box-new .unlogin-comment-bt {
    font-size: 14px;
    padding: 3px 7px;
    background: #f0f0f2;
    color: #222226;
    border-radius: 2px;
    border: 1px solid #ccccd8;
    margin: 0 6px
}

.comment-box.comment-box-new2.unlogin-comment-box-new .unlogin-comment-bt:hover {
    cursor: pointer
}

.comment-box.comment-box-new2.login-comment-box-new {
    padding: 16px 24px;
    overflow: hidden
}

.comment-box.comment-box-new2.login-comment-box-new .has-comment {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.comment-box.comment-box-new2.login-comment-box-new .has-comment .one-line-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

.comment-box.comment-box-new2.login-comment-box-new .has-comment .has-comment-tit {
    display: inline-block;
    padding-right: 16px;
    font-size: 16px;
    font-weight: 500;
    color: #222226;
    line-height: 24px;
    margin-right: 24px;
    background-image: url("../../images/commentArrowRightWhite.png");
    background-size: 16px auto;
    background-repeat: no-repeat;
    background-position: right center;
    white-space: nowrap;
    cursor: pointer
}

.comment-box.comment-box-new2.login-comment-box-new .has-comment a.has-comment-bt-right {
    float: right;
    width: 82px;
    height: 32px;
    background: #fc5531;
    border-radius: 16px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #fff
}

.comment-box.comment-box-new2.login-comment-box-new .has-comment .has-comment-con {
    color: #222226;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.comment-box.comment-box-new2.login-comment-box-new .has-comment .has-comment-con .right-box .new-info-box .comment-top .name-href .name {
    max-width: 100%
}

.comment-box.comment-box-new2.login-comment-box-new .has-comment .has-comment-con .right-box .new-info-box .comment-top .nick-name {
    max-width: 100%
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .comment-reward-item {
    display: block;
    white-space: nowrap;
    margin-right: 0;
    margin-top: 0;
    margin-left: 8px
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-href {
    font-size: 14px;
    color: #777888;
    line-height: 20px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-href img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-href .hot-comment-gpt-icon {
    width: auto;
    height: 17px;
    position: absolute;
    bottom: -8px;
    border-radius: 0;
    left: 2px
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-tag {
    width: 30px;
    height: 16px;
    font-size: 12px;
    color: #fc5531;
    line-height: 16px;
    text-align: center;
    display: block;
    margin-left: 8px;
    background: rgba(252, 85, 49, 0.1);
    border-radius: 2px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con {
    margin-right: 24px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 32px;
    margin-left: 4px;
    font-size: 14px;
    color: #222226;
    line-height: 32px;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con .comment-match-url {
    word-break: break-word;
    color: #5893c2
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con .comment-match-url img {
    width: 16px;
    height: 16px;
    vertical-align: text-top
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con img {
    width: 20px;
    vertical-align: middle
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con pre::-webkit-scrollbar {
    height: 5px
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con pre::-webkit-scrollbar-thumb {
    background: rgba(142, 149, 154, 0.2);
    border-radius: 2px
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con pre>ol.hljs-ln li .hljs-ln-numbers,
.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con pre .hljs-ln li .hljs-ln-numbers {
    display: inline-block;
    border-right: 1px solid #fff;
    width: 24px;
    text-align: right;
    margin-right: 4px
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con pre>ol.hljs-ln li .hljs-ln-numbers .hljs-ln-n,
.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con pre .hljs-ln li .hljs-ln-numbers .hljs-ln-n {
    display: inline
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con pre>ol.hljs-ln li .hljs-ln-code,
.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con pre .hljs-ln li .hljs-ln-code {
    display: inline
}

.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con pre>ol.hljs-ln li .hljs-ln-code .hljs-ln-line,
.comment-box.comment-box-new2.login-comment-box-new .hot-comment-box .hot-comment-con pre .hljs-ln li .hljs-ln-code .hljs-ln-line {
    display: inline
}

.comment-box.comment-box-new2.comment-box-nostyle {
    padding: 0;
    margin-bottom: 0;
    margin-top: 0 !important
}

.comment-box.comment-box-new2 .comment-title {
    font-size: 18px;
    font-weight: 600;
    color: #222226;
    line-height: 32px;
    margin-bottom: 8px
}

.comment-box.comment-box-new2 .comment-title span {
    margin-left: 4px
}

.comment-box.comment-box-new2 .comment-quote {
    position: relative;
    font-size: 14px;
    color: #777888;
    line-height: 20px;
    padding-left: 10px;
    padding-right: 8px;
    margin-bottom: 8px;
    margin-left: 40px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2
}

.comment-box.comment-box-new2 .comment-quote:hover .comment-quote-close {
    display: block
}

.comment-box.comment-box-new2 .comment-quote .comment-quote-bar {
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    width: 2px;
    height: 16px;
    background: #ccccd8;
    z-index: 20
}

.comment-box.comment-box-new2 .comment-quote .comment-quote-close {
    display: none;
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d8d8d8
}

.comment-box.comment-box-new2 .comment-quote .comment-quote-close img {
    width: 8px;
    height: 8px;
    display: block;
    margin: auto;
    margin-top: 4px
}

.comment-box.comment-box-new2 .comment-quote .comment-quote-close:hover {
    cursor: pointer
}

.comment-box.comment-box-new2 .comment-list-container {
    padding-top: 12px
}

.comment-box.comment-box-new2 .comment-list-container>.opt-box {
    height: 20px
}

.comment-box.comment-box-new2 .comment-list-container div.btn {
    margin: 0;
    font-size: 12px;
    height: 20;
    line-height: 20px
}

.comment-box.comment-box-new2 .comment-list-container div.btn .look-more-comment {
    margin-left: 4px;
    width: 22px;
    height: 14px;
    vertical-align: -3px
}

.comment-box.comment-box-new2 .comment-list .second-look-more,
.pc-flodcomment-sidebox .comment-list .second-look-more {
    display: inline-block;
    font-size: 14px;
    color: #777888;
    line-height: 20px;
    margin-left: 32px;
    position: relative;
    top: -12px
}

.comment-box.comment-box-new2 .comment-list .second-look-more img,
.pc-flodcomment-sidebox .comment-list .second-look-more img {
    width: 14px;
    height: 20px;
    vertical-align: -5px
}

.comment-box.comment-box-new2 .comment-list .second-look-more:hover,
.pc-flodcomment-sidebox .comment-list .second-look-more:hover {
    cursor: pointer
}

.comment-box.comment-box-new2 .comment-list .comment-line-box,
.pc-flodcomment-sidebox .comment-list .comment-line-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative
}

.comment-box.comment-box-new2 .comment-list .comment-line-box.comment-line-box-hide,
.pc-flodcomment-sidebox .comment-list .comment-line-box.comment-line-box-hide {
    display: none
}

.comment-box.comment-box-new2 .comment-list .comment-line-box.comment-line-box-hide:first-child,
.pc-flodcomment-sidebox .comment-list .comment-line-box.comment-line-box-hide:first-child {
    display: block
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .comment-edit-box,
.pc-flodcomment-sidebox .comment-list .comment-line-box .comment-edit-box {
    padding-left: 40px;
    margin-bottom: 16px;
    margin-top: -8px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .comment-edit-box .comment-content,
.pc-flodcomment-sidebox .comment-list .comment-line-box .comment-edit-box .comment-content {
    height: 60px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .comment-list-item,
.pc-flodcomment-sidebox .comment-list .comment-line-box .comment-list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .comment-list-href,
.pc-flodcomment-sidebox .comment-list .comment-line-box .comment-list-href {
    display: block;
    padding-top: 15px;
    height: 48px;
    position: relative
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .comment-list-href img.tag,
.pc-flodcomment-sidebox .comment-list .comment-line-box .comment-list-href img.tag {
    position: absolute;
    bottom: -7px;
    height: 17px;
    left: 2px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .comment-list-href img.avatar,
.pc-flodcomment-sidebox .comment-list .comment-line-box .comment-list-href img.avatar {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e8e8ed
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box {
    padding-top: 16px;
    padding-bottom: 16px;
    width: 100%;
    margin-left: 8px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box {
    width: 100%
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box:hover>.comment-top .opt-comment,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box:hover>.comment-top .opt-comment {
    display: block
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-bottom: 4px;
    line-height: 20px;
    font-size: 14px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .user-box,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .user-box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    right: 0;
    top: 0;
    padding-right: 8px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment_status_tip,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment_status_tip {
    display: inline-block;
    width: 30px;
    height: 16px;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    margin-right: 4px;
    vertical-align: 1px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment_status_tip.is_bloger,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment_status_tip.is_bloger {
    background: rgba(252, 85, 49, 0.1);
    color: #fc5531
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment_status_tip.is_top,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment_status_tip.is_top {
    background: rgba(64, 158, 255, 0.1);
    color: #409eff
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .name-href,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .name-href {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .name-href .name,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .name-href .name {
    display: inline-block;
    max-width: 110px;
    color: #777888;
    margin-right: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .date,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .date {
    font-size: 14px;
    color: #777888
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .text,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .text {
    color: #999aaa;
    margin: 0 6px;
    min-width: 28px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .nick-name,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .nick-name {
    color: #777888;
    margin-right: 10px;
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment {
    line-height: 20px;
    height: 20px;
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    padding-left: 16px;
    background: #fff
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .comment_img_replay,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .comment_img_replay {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 2px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-bt,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-bt {
    font-size: 14px;
    color: #555666;
    margin-right: 16px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-reply,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-reply {
    position: relative;
    left: -16px;
    padding-left: 16px;
    margin-right: 0
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report {
    position: relative
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report .btn-report-img,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report .btn-report-img {
    width: 20px;
    height: 20px;
    vertical-align: middle
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report .hide-box,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report .hide-box {
    display: none;
    position: absolute;
    z-index: 10;
    top: 20px;
    left: -28px;
    width: 80px;
    text-align: center;
    font-size: 12px;
    background: #fff;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    padding: 4px 0
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report .hide-box::before,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report .hide-box::before {
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #fff;
    position: absolute;
    top: -4px;
    left: 36px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report .hide-box .hide-item,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report .hide-box .hide-item {
    display: block;
    width: 100%;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #555666
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report .hide-box .hide-item:hover,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report .hide-box .hide-item:hover {
    background: #f7f7fc
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report:hover .hide-box,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .opt-comment .btn-report:hover .hide-box {
    display: block
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment-like,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment-like {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    color: #4d4d4d;
    text-align: right;
    height: 16px;
    line-height: 16px;
    margin-top: 2px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment-like img.comment-like-img,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment-like img.comment-like-img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 4px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment-like img.unclickImg,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment-like img.unclickImg {
    display: inline-block
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment-like img.clickedImg,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment-like img.clickedImg {
    display: none
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment-like span,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .comment-like span {
    color: #999aaa;
    vertical-align: middle
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .liked img.unclickImg,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .liked img.unclickImg {
    display: none
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .liked img.clickedImg,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .liked img.clickedImg {
    display: inline-block
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-top .liked span,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-top .liked span {
    color: #e33e33
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .gpt-comment,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .gpt-comment {
    height: 20px;
    background: #f5f6f7;
    border-radius: 2px;
    color: #777888;
    display: inline-block;
    padding: 0 4px;
    line-height: 20px;
    font-size: 12px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment {
    font-size: 14px;
    color: #222226;
    line-height: 22px;
    word-break: break-word
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment .comment-match-url,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment .comment-match-url {
    word-break: break-word;
    color: #5893c2
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment .comment-match-url img,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment .comment-match-url img {
    width: 16px;
    height: 16px;
    vertical-align: text-top
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment img,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment img {
    width: 20px;
    vertical-align: middle
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre::-webkit-scrollbar,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre::-webkit-scrollbar {
    height: 5px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre::-webkit-scrollbar-thumb,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre::-webkit-scrollbar-thumb {
    background: rgba(142, 149, 154, 0.2);
    border-radius: 2px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre>ol.hljs-ln li .hljs-ln-numbers,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre>ol.hljs-ln li .hljs-ln-numbers,
.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre .hljs-ln li .hljs-ln-numbers,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre .hljs-ln li .hljs-ln-numbers {
    display: inline-block;
    border-right: 1px solid #fff;
    width: 24px;
    text-align: right;
    margin-right: 4px
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre>ol.hljs-ln li .hljs-ln-numbers .hljs-ln-n,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre>ol.hljs-ln li .hljs-ln-numbers .hljs-ln-n,
.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre .hljs-ln li .hljs-ln-numbers .hljs-ln-n,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre .hljs-ln li .hljs-ln-numbers .hljs-ln-n {
    display: inline
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre>ol.hljs-ln li .hljs-ln-code,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre>ol.hljs-ln li .hljs-ln-code,
.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre .hljs-ln li .hljs-ln-code,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre .hljs-ln li .hljs-ln-code {
    display: inline
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre>ol.hljs-ln li .hljs-ln-code .hljs-ln-line,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre>ol.hljs-ln li .hljs-ln-code .hljs-ln-line,
.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre .hljs-ln li .hljs-ln-code .hljs-ln-line,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .new-comment pre .hljs-ln li .hljs-ln-code .hljs-ln-line {
    display: inline
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .comment-quote-item,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .comment-quote-item {
    font-size: 14px;
    color: #777888;
    line-height: 16px;
    padding-left: 8px;
    border-left: 2px solid #ccccd8;
    margin-bottom: 6px;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden
}

.comment-box.comment-box-new2 .comment-list .comment-line-box .right-box .new-info-box .comment-center .comment-quote-item *,
.pc-flodcomment-sidebox .comment-list .comment-line-box .right-box .new-info-box .comment-center .comment-quote-item * {
    color: #777888
}

.comment-box.comment-box-new2 .comment-list .replay-box,
.pc-flodcomment-sidebox .comment-list .replay-box {
    padding-left: 32px
}

.comment-box.comment-box-new2 .comment-list .replay-box .comment-edit-box,
.pc-flodcomment-sidebox .comment-list .replay-box .comment-edit-box {
    padding-left: 32px
}

.comment-box.comment-box-new2 .comment-list .replay-box .comment-list-href,
.pc-flodcomment-sidebox .comment-list .replay-box .comment-list-href {
    padding-top: 0;
    height: 24px
}

.comment-box.comment-box-new2 .comment-list .replay-box .comment-list-href img.avatar,
.pc-flodcomment-sidebox .comment-list .replay-box .comment-list-href img.avatar {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%
}

.comment-box.comment-box-new2 .comment-list .replay-box .name,
.pc-flodcomment-sidebox .comment-list .replay-box .name,
.comment-box.comment-box-new2 .comment-list .replay-box .nick-name,
.pc-flodcomment-sidebox .comment-list .replay-box .nick-name {
    max-width: 90px
}

.comment-box.comment-box-new2 .comment-list .replay-box .right-box,
.pc-flodcomment-sidebox .comment-list .replay-box .right-box {
    border-top: 0;
    padding-top: 0
}

.comment-box.comment-box-new2 .comment-list .replay-box .right-box .comment-edit-box,
.pc-flodcomment-sidebox .comment-list .replay-box .right-box .comment-edit-box {
    padding-left: 32px
}

.comment-box.comment-box-new2 .comment-unallow-notice,
.pc-flodcomment-sidebox .comment-unallow-notice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: -24px;
    margin-bottom: 0;
    padding: 16px 24px;
    background: rgba(252, 85, 49, 0.1);
    color: #fc5531;
    font-size: 16px
}

.comment-box.comment-box-new2 .comment-unallow-notice svg,
.pc-flodcomment-sidebox .comment-unallow-notice svg {
    margin-right: 8px
}

.comment-box.comment-box-new2 .comment-edit-box,
.pc-flodcomment-sidebox .comment-edit-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.comment-box.comment-box-new2 .comment-edit-box .user-img,
.pc-flodcomment-sidebox .comment-edit-box .user-img {
    margin-right: 8px;
    padding-top: 9px
}

.comment-box.comment-box-new2 .comment-edit-box .user-img img,
.pc-flodcomment-sidebox .comment-edit-box .user-img img {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e8e8ed
}

.comment-box.comment-box-new2 .comment-edit-box .comment-reward-box,
.pc-flodcomment-sidebox .comment-edit-box .comment-reward-box {
    margin-top: 8px;
    display: none;
    position: relative;
    margin-left: 16px;
    padding: 5px 8px 0;
    width: 200px;
    height: 64px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: #f55045;
    border-radius: 6px;
    color: #fff;
    overflow: hidden
}

.comment-box.comment-box-new2 .comment-edit-box .comment-reward-box .btn-remove-reward,
.pc-flodcomment-sidebox .comment-edit-box .comment-reward-box .btn-remove-reward {
    position: absolute;
    top: 0;
    right: 0;
    opacity: .8;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-image: url("../../images/iconRemoveReward.png");
    background-size: cover
}

.comment-box.comment-box-new2 .comment-edit-box .comment-reward-box .form-reward-box .info,
.pc-flodcomment-sidebox .comment-edit-box .comment-reward-box .form-reward-box .info {
    background-image: url("../../images/iconRedpacket.png");
    font-size: 14px;
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-position: left center;
    padding-left: 32px;
    height: 32px;
    padding-left: 28px;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    line-height: 28px
}

.comment-box.comment-box-new2 .comment-edit-box .comment-reward-box .form-reward-box .price-info,
.pc-flodcomment-sidebox .comment-edit-box .comment-reward-box .form-reward-box .price-info {
    font-size: 12px
}

.comment-box.comment-box-new2 .comment-edit-box form,
.pc-flodcomment-sidebox .comment-edit-box form {
    width: 100%;
    position: relative;
    background: rgba(245, 246, 247, 0.8);
    border-radius: 8px;
    padding: 14px 0
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-sofa-flag,
.pc-flodcomment-sidebox .comment-edit-box form .comment-sofa-flag {
    position: absolute;
    height: 18px;
    top: -14px;
    right: 0;
    z-index: 12
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-content,
.pc-flodcomment-sidebox .comment-edit-box form .comment-content {
    display: block;
    width: 100%;
    background: rgba(248, 249, 251, 0.8);
    border: none;
    padding: 0 16px;
    border-radius: 4px;
    resize: none;
    height: 88px;
    font-size: 14px;
    line-height: 22px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'SF Pro Display', Roboto, Noto, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-content::-webkit-scrollbar,
.pc-flodcomment-sidebox .comment-edit-box form .comment-content::-webkit-scrollbar {
    width: 2px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-content::-webkit-scrollbar-thumb,
.pc-flodcomment-sidebox .comment-edit-box form .comment-content::-webkit-scrollbar-thumb {
    background-color: rgba(153, 154, 170, 0.3)
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-content::-webkit-input-placeholder,
.pc-flodcomment-sidebox .comment-edit-box form .comment-content::-webkit-input-placeholder {
    color: #999aaa
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-content::-moz-placeholder,
.pc-flodcomment-sidebox .comment-edit-box form .comment-content::-moz-placeholder {
    color: #999aaa
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-content:-moz-placeholder,
.pc-flodcomment-sidebox .comment-edit-box form .comment-content:-moz-placeholder {
    color: #999aaa
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-content:-ms-input-placeholder,
.pc-flodcomment-sidebox .comment-edit-box form .comment-content:-ms-input-placeholder {
    color: #999aaa
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 8px 16px 0 16px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-transition: display .3s ease-in-out;
    transition: display .3s ease-in-out
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-l,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-l {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-l .tip,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-l .tip {
    font-size: 12px;
    color: #999aaa;
    line-height: 17px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-l .tip em,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-l .tip em {
    color: #222226;
    font-style: normal
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-flod-item,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-flod-item {
    color: #999aaa;
    font-size: 14px;
    cursor: pointer;
    display: none
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-flod-item:hover,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-flod-item:hover {
    color: #555666
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-flod-item .bar,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-flod-item .bar {
    width: 1px;
    height: 16px;
    background: #e8e8ed;
    margin-left: 14px;
    display: inline-block;
    vertical-align: middle
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-flod-item .count,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-flod-item .count {
    color: #555666;
    margin-right: 2px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 12px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item:nth-child(1),
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item:nth-child(1) {
    margin-left: 0
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item:nth-child(3),
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item:nth-child(3) {
    margin-left: 12px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item:hover,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item:hover {
    cursor: pointer
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item:hover .comment-operate-tip,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item:hover .comment-operate-tip {
    display: block
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .btn-comment-input,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .btn-comment-input {
    display: block;
    width: 60px;
    height: 24px;
    background: #fc5531;
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    border: none
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-operate-img,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-operate-img {
    display: block;
    width: 20px;
    height: 20px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-operate-tip,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-operate-tip {
    display: none;
    position: absolute;
    right: -18px;
    top: 28px;
    width: 60px;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    background: #222226;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    color: #fff;
    z-index: 2001
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-operate-tip:before,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-operate-tip:before {
    content: '';
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    position: absolute;
    top: -3px;
    left: 30px;
    background: #222226
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box {
    display: none;
    width: 328px;
    padding: 8px 0;
    z-index: 2000;
    position: absolute;
    right: -56px;
    top: 34px;
    background: #fff;
    -webkit-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box .comment-emoticon-img-box,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box .comment-emoticon-img-box {
    padding-bottom: 16px;
    padding-left: value;
    overflow: auto;
    height: 228px;
    scrollbar-width: thin
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box .comment-emoticon-img-box::-webkit-scrollbar,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box .comment-emoticon-img-box::-webkit-scrollbar {
    width: 3px;
    height: 100px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box .comment-emoticon-img-box::-webkit-scrollbar-thumb,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box .comment-emoticon-img-box::-webkit-scrollbar-thumb {
    background-color: rgba(153, 154, 170, 0.3);
    border-radius: 2px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box .emoticon-monkey-img,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box .emoticon-monkey-img {
    width: 32px;
    height: 32px;
    float: left;
    margin-left: 12px;
    margin-top: 12px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box .emoticon-monkey-img:hover,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box .emoticon-monkey-img:hover {
    cursor: pointer
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box:before,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-emoticon-box:before {
    content: '';
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    position: absolute;
    top: -4px;
    right: 60px;
    background: #fff
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box {
    display: none;
    width: 270px;
    z-index: 10;
    padding: 8px 0;
    position: absolute;
    right: -24px;
    top: 34px;
    background: #fff;
    -webkit-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box:before,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box:before {
    content: '';
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    position: absolute;
    top: -4px;
    right: 30px;
    background: #fff
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box ul,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box ul {
    overflow: auto;
    height: 226px;
    scrollbar-width: thin
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box ul::-webkit-scrollbar,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box ul::-webkit-scrollbar {
    width: 3px;
    height: 100px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box ul::-webkit-scrollbar-thumb,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box ul::-webkit-scrollbar-thumb {
    background-color: rgba(153, 154, 170, 0.3);
    border-radius: 2px
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box ul li a,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box ul li a {
    display: block;
    padding: 0 8px;
    height: 40px;
    clear: both;
    font-weight: normal;
    line-height: 40px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.comment-box.comment-box-new2 .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box ul li a:hover,
.pc-flodcomment-sidebox .comment-edit-box form .comment-operate-box .comment-operate-r .comment-operate-item .comment-code-box ul li a:hover {
    background: #f5f5f5
}

.comment-box.comment-box-new2 .flod-bt-dom,
.pc-flodcomment-sidebox .flod-bt-dom {
    text-align: center;
    height: 1px;
    background: #f0f0f2;
    position: relative;
    margin: 0 0 26px 0
}

.comment-box.comment-box-new2 .flod-bt-dom .flod-bt,
.pc-flodcomment-sidebox .flod-bt-dom .flod-bt {
    background: #fff;
    font-size: 14px;
    color: #999aaa;
    line-height: 20px;
    position: relative;
    padding: 0 14px;
    left: 0;
    right: 0;
    top: -10px;
    margin-left: -20px
}

.comment-box.comment-box-new2 .flod-bt-dom .flod-bt .flod-count,
.pc-flodcomment-sidebox .flod-bt-dom .flod-bt .flod-count,
.comment-box.comment-box-new2 .flod-bt-dom .flod-bt .flod-look,
.pc-flodcomment-sidebox .flod-bt-dom .flod-bt .flod-look {
    color: #555666
}

.comment-box.comment-box-new2 .flod-bt-dom .flod-bt .flod-count,
.pc-flodcomment-sidebox .flod-bt-dom .flod-bt .flod-count {
    margin-right: 4px
}

.comment-box.comment-box-new2 .flod-bt-dom .flod-bt .flod-look,
.pc-flodcomment-sidebox .flod-bt-dom .flod-bt .flod-look {
    margin-left: 4px
}

.comment-box.comment-box-new2 .flod-bt-dom .flod-bt .flod-look:hover,
.pc-flodcomment-sidebox .flod-bt-dom .flod-bt .flod-look:hover {
    cursor: pointer
}

.comment-side-box-shadow {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2000
}

.comment-side-box-shadow .comment-side-content {
    background: #fff;
    width: 500px;
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    overflow: hidden;
    overflow-y: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 88px 24px 32px 24px;
    scrollbar-width: none
}

.comment-side-box-shadow .comment-side-content::-webkit-scrollbar {
    width: 5px;
    height: 100px
}

.comment-side-box-shadow .comment-side-content::-webkit-scrollbar-thumb {
    background-color: rgba(153, 154, 170, 0.3);
    border-radius: 2px
}

.comment-side-box-shadow .comment-side-content .comment-side-tit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid #e8e8ed;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0
}

.comment-side-box-shadow .comment-side-content .comment-side-tit .comment-side-tit-count {
    height: 24px;
    font-size: 16px;
    font-weight: 500;
    color: #222226;
    line-height: 24px
}

.comment-side-box-shadow .comment-side-content .comment-side-tit .comment-side-tit-close {
    width: 12px;
    height: 12px;
    cursor: pointer
}

.comment-side-box-shadow .side-look-comment a {
    display: block;
    width: 186px;
    height: 32px;
    background: #f5f6f7;
    border-radius: 16px;
    color: #555666;
    text-align: center;
    line-height: 32px;
    margin: auto
}

.comment-side-box-shadow .side-look-comment a img {
    vertical-align: middle;
    width: 14px;
    height: 20px;
    margin-left: 4px
}

.comment-side-box-shadow .look-flod-comment {
    display: none;
    font-size: 14px;
    color: #555666;
    line-height: 20px;
    text-align: center
}

.comment-side-box-shadow .look-flod-comment .look-more-flodcomment,
.comment-side-box-shadow .look-flod-comment .count {
    color: #222226
}

.comment-side-box-shadow .pc-flodcomment-sidebox {
    display: none;
    width: 100%;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content
}

.comment-side-box-shadow .pc-flodcomment-sidebox .comment-fold-tit {
    color: #999aaa;
    line-height: 24px
}

.comment-side-box-shadow .pc-flodcomment-sidebox .comment-fold-tit .back {
    display: inline-block;
    margin-right: 18px;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    overflow: hidden
}

.comment-side-box-shadow .pc-flodcomment-sidebox .comment-fold-tit .back img {
    width: 24px;
    height: 24px
}

.comment-side-box-shadow .pc-flodcomment-sidebox .comment-fold-tit .count {
    color: #555666
}

.comment-side-box-shadow .pc-flodcomment-sidebox .comment-fold-tit .tip {
    font-size: 14px;
    color: #277ccc;
    line-height: 16px;
    margin-left: 12px
}

.comment-side-box-shadow .pc-flodcomment-sidebox .comment-fold-tit .park {
    font-size: 14px;
    color: #277ccc;
    line-height: 24px;
    float: right
}

.comment-side-box-shadow .pc-flodcomment-sidebox .comment-fold-tit .park img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px
}

.comment-side-box-shadow pre>ol.hljs-ln {
    width: 368px !important
}

.comment-side-box-shadow .comment-rewarddialog-box {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.2)
}

.comment-side-box-shadow .comment-rewarddialog-box .form-box {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 4px;
    overflow: hidden
}

.comment-side-box-shadow .comment-rewarddialog-box .title-box {
    position: relative;
    padding: 16px 24px;
    height: 56px;
    width: 380px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    background-image: url("../../images/bgCommentFormTitle.png");
    background-size: contain;
    background-repeat: no-repeat
}

.comment-side-box-shadow .comment-rewarddialog-box .title-box .desc {
    font-size: 14px
}

.comment-side-box-shadow .comment-rewarddialog-box .title-box .btn-form-close {
    position: absolute;
    width: 36px;
    height: 28px;
    top: 0;
    right: 0;
    cursor: pointer;
    background-image: url("../../images/btnCloseCommentRewardForm.png");
    background-size: contain;
    background-repeat: no-repeat
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    color: #222226;
    margin-top: 20px;
    padding: 0 24px
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box.error p.notice,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box.error p.notice {
    display: block
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box label,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box label {
    margin-bottom: 8px;
    font-size: 14px
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box input,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box input {
    padding: 8px 12px;
    border: none;
    height: 20px;
    line-height: 20px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 100%
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box input::-webkit-input-placeholder,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box input::-webkit-input-placeholder {
    color: #777888
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box input::-moz-placeholder,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box input::-moz-placeholder {
    color: #777888
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box input:-moz-placeholder,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box input:-moz-placeholder {
    color: #777888
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box input:-ms-input-placeholder,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box input:-ms-input-placeholder {
    color: #777888
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box p.notice,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box p.notice {
    display: none;
    margin-top: 4px;
    margin-bottom: -16px;
    font-size: 12px;
    color: #fc1944;
    line-height: 1
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box .ipt-btn-box,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box .ipt-btn-box,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box .ipt-txt-box,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box .ipt-txt-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    background: #fff;
    border-radius: 2px;
    border: 1px solid #e8e8ed
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box .ipt-btn-box .btn-ipt,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box .ipt-btn-box .btn-ipt,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box .ipt-txt-box .btn-ipt,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box .ipt-txt-box .btn-ipt {
    position: absolute;
    right: 12px;
    top: 8px;
    cursor: pointer
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box .ipt-btn-box .btn-ipt.btn-random,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box .ipt-btn-box .btn-ipt.btn-random,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box .ipt-txt-box .btn-ipt.btn-random,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box .ipt-txt-box .btn-ipt.btn-random {
    width: 20px;
    height: 20px;
    background-image: url("../../images/suiji.png");
    background-size: 14px 14px;
    background-position: center center;
    background-repeat: no-repeat
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .ipt-box .ipt-txt-box .after-txt,
.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box .ipt-txt-box .after-txt {
    position: absolute;
    right: 12px;
    top: 8px;
    font-size: 14px;
    width: 20px;
    text-align: right
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box .balance-info {
    padding: 7px 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    color: #222226;
    background: rgba(232, 232, 237, 0.4);
    border-radius: 2px;
    border: 1px solid #e8e8ed;
    line-height: 20px
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box .balance-info .balance {
    margin: 0 4px;
    font-size: 18px;
    font-weight: 600
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .balance-info-box .balance-info .link-charge {
    margin-left: auto;
    font-size: 14px;
    color: #277ccc;
    font-weight: 400
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .opt-box {
    padding: 40px 24px 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    color: #222226
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .opt-box .pay-info {
    display: none
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .opt-box .pay-info .price {
    margin-right: 4px;
    font-size: 16px;
    font-weight: 500;
    color: #fc5531
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .opt-box .ml-auto {
    margin-left: auto
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .opt-box .ml8 {
    margin-left: 8px
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .opt-box button {
    padding: 5px 0;
    height: 20px;
    min-width: 80px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    border-radius: 20px;
    border: 1px solid #ccccd8;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .opt-box button.btn-cancel {
    color: #222226;
    background-color: #fff
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .opt-box button.btn-submit {
    color: #fff;
    background-color: #fc5531;
    border-color: #fc5531
}

.comment-side-box-shadow .comment-rewarddialog-box #commentRewardForm .opt-box button.btn-submit:disabled {
    background-color: #febbad;
    border-color: #febbad
}

.comment-side-box-shadow .rr-guide-box {
    position: absolute;
    z-index: 12;
    right: 492px
}

.comment-side-box-shadow .rr-guide-box img {
    display: block;
    width: 360px;
    height: auto
}

.comment-side-box-shadow .rr-guide-box .rr-first-box {
    top: 0
}

.comment-side-box-shadow .rr-guide-box .rr-second-box {
    display: none;
    margin-top: 240px
}

.comment-side-box-shadow .rr-guide-box .btn-guide-known {
    position: absolute;
    bottom: 24px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 32px;
    width: 80px;
    background: #fc5531;
    border-radius: 24px;
    border: 1px solid #fc5531;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    font-size: 14px
}

.imgViewDom {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 3000
}

.imgViewDom .swiper {
    width: 80%;
    height: 80%;
    background: #111;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 8px;
    overflow: hidden
}

.imgViewDom .swiper .close-btn {
    width: 24px;
    height: 24px;
    position: absolute;
    color: #fff;
    right: 10px;
    top: 10px;
    text-align: center;
    line-height: 24px;
    background: #3d3d3d;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10
}

.imgViewDom .swiper .close-btn img {
    margin: 6px;
    display: block;
    width: 12px;
    height: 12px
}

.imgViewDom .swiper .swiper-slide {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer
}

.imgViewDom .swiper .swiper-slide a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    margin: 0 40px;
    width: 100%;
    overflow: hidden;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.imgViewDom .swiper .swiper-slide img {
    display: block;
    -o-object-fit: scale-down;
    object-fit: scale-down;
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: none;
    transition: none
}

.imgViewDom .swiper .swiper-button-prev,
.imgViewDom .swiper .swiper-button-next {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px
}

.imgViewDom .swiper .swiper-button-prev::after,
.imgViewDom .swiper .swiper-button-next::after {
    font-size: 22px
}

.imgViewDom .img-preview-box {
    position: relative;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden
}

.imgViewDom .img-preview-box img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.imgViewDom div.img-preview-opt-box {
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.imgViewDom div.img-preview-opt-box button.btn-img-preview {
    padding: 4px 8px;
    font-size: 24px;
    font-weight: 400;
    border-radius: 4px;
    background-color: rgba(242, 242, 242, 0.8);
    color: #1a1a1a;
    border: none;
    cursor: pointer;
    -webkit-transition: background-color .2s ease;
    transition: background-color .2s ease;
    font-family: monospace;
    line-height: 1
}

.imgViewDom div.img-preview-opt-box button.btn-img-preview:hover {
    background-color: rgba(224, 224, 224, 0.85)
}

.imgViewDom div.img-preview-opt-box button.btn-img-preview.mx-8 {
    margin: 0 8px
}

.imgViewDom div.img-preview-opt-box button.btn-img-preview.fz-14 {
    font-size: 14px;
    font-weight: 400;
    width: 50px;
    text-align: center
}

.pagination-box .ui-paging-container ul {
    text-align: center;
    padding-top: 2px
}

.pagination-box .ui-paging-container ul li {
    border: none;
    background-color: #f7f7fc;
    color: #999;
    border-radius: 4px;
    display: inline-block;
    margin-left: 8px;
    padding: 0;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 13px
}

.pagination-box .ui-paging-container ul li:hover {
    cursor: pointer
}

.pagination-box .ui-paging-container ul li.js-page-first,
.pagination-box .ui-paging-container ul li.js-page-last {
    display: none
}

.pagination-box .ui-paging-container ul li.js-page-action:hover {
    color: #222226
}

.pagination-box .ui-paging-container ul li.ui-paging-ellipse:hover {
    cursor: default
}

.pagination-box .ui-paging-container ul li.ui-pager-disabled {
    color: #999
}

.pagination-box .ui-paging-container ul li.ui-pager-disabled:hover {
    cursor: default;
    border: none;
    color: #999
}

.pagination-box .ui-paging-container ul li[data-page]:hover {
    color: #222226
}

.pagination-box .ui-paging-container ul li[data-page].focus {
    color: #fff;
    background-color: #555666
}

.pagination-box .ui-paging-container ul li[data-page].focus:hover {
    cursor: default
}

.ellipsis-online {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all
}

.ellipsis-online-1 {
    -webkit-line-clamp: 1
}

.ellipsis-online-2 {
    -webkit-line-clamp: 2
}

.display-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.recommend-box.recommend-box-style {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    overflow: hidden
}

.recommend-box.recommend-highlight-default .recommend-item-box .title-box .tit:hover em {
    color: #fc5531
}

.recommend-box.recommend-highlight-default .recommend-item-box .title-box .tit em {
    color: #282b31
}

.recommend-box.recommend-highlight-default .recommend-item-box .desc-box .desc {
    -webkit-line-clamp: 2
}

.recommend-box.recommend-highlight-default .recommend-item-box .desc-box .desc em {
    color: #999aaa
}

.recommend-box .recommend-item-box {
    padding: 8px 24px;
    background-color: #fff;
    font-style: normal;
    border-top: 1px solid #f7f7fc;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.recommend-box .recommend-item-box .content-box-img {
    width: 88px;
    height: 66px;
    margin-right: 16px
}

.recommend-box .recommend-item-box .content-box-img img {
    width: 88px;
    height: 66px
}

.recommend-box .recommend-item-box .content-box {
    width: 100%
}

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

.recommend-box .recommend-item-box .title-box .type-tag {
    height: 20px;
    padding: 0 6px;
    background: #fc5531;
    font-weight: 600;
    color: #fff;
    line-height: 20px;
    margin-right: 4px;
    border-radius: 4px;
    font-size: 12px
}

.recommend-box .recommend-item-box .title-box .type {
    min-width: 22px;
    height: 16px;
    position: relative
}

.recommend-box .recommend-item-box .title-box .type:hover .tip {
    display: block
}

.recommend-box .recommend-item-box .title-box .type img {
    width: 16px;
    height: 16px
}

.recommend-box .recommend-item-box .title-box .type .tip {
    display: none;
    width: 44px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    color: #555666;
    font-size: 12px;
    position: absolute;
    border-radius: 2px;
    left: -14px;
    top: -36px;
    background: #fff;
    -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12);
    z-index: 999
}

.recommend-box .recommend-item-box .title-box .type .tip:before {
    content: '';
    position: absolute;
    display: block;
    background: #fff;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    bottom: -4px;
    left: 0;
    right: 0;
    margin: auto
}

.recommend-box .recommend-item-box .title-box .tit {
    color: #282b31;
    font-size: 16px;
    line-height: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.recommend-box .recommend-item-box .title-box .tit:hover {
    color: #fc5531
}

.recommend-box .recommend-item-box .title-box .tit em {
    color: #fc5531;
    font-style: normal
}

.recommend-box .recommend-item-box .title-box .tit .tag {
    color: #507999;
    background: #ebf2f7;
    line-height: 22px;
    height: 20px;
    font-size: 12px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: -2px;
    padding: 0 6px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 2px
}

.recommend-box .recommend-item-box .info-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.recommend-box .recommend-item-box .info-box .blog-title {
    color: #999aaa;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-line-clamp: 1
}

.recommend-box .recommend-item-box .info-box .blog-title:hover {
    color: #fc5531
}

.recommend-box .recommend-item-box .info-box .info {
    min-width: 32px;
    max-width: 312px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.recommend-box .recommend-item-box .info-box .info:hover .read {
    display: none
}

.recommend-box .recommend-item-box .info-box .info:hover .time {
    display: block
}

.recommend-box .recommend-item-box .info-box .info-block {
    font-size: 13px;
    color: #999aaa;
    margin-left: 16px;
    line-height: 24px
}

.recommend-box .recommend-item-box .info-box .download-star {
    width: 13px;
    height: 13px;
    margin-left: 16px;
    margin-right: -14px
}

.recommend-box .recommend-item-box .info-box .time {
    display: none
}

.recommend-box .recommend-item-box .info-box .read-img {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 2px
}

.recommend-box .recommend-item-box .desc-box .desc {
    color: #999aaa;
    font-size: 14px
}

.recommend-box .recommend-item-box .desc-box .desc em {
    color: #fc5531;
    font-style: normal
}

.recommend-box #recommend-item-box-tow {
    display: block
}

.first-recommend-box,
.second-recommend-box {
    margin-top: 0
}

.second-recommend-box+#commentBox+#pcCommentBox {
    margin-top: 8px
}

.recommend-tit-mod {
    font-size: 18px;
    font-weight: 600;
    color: #222226;
    line-height: 24px;
    padding: 12px 24px;
    background: #fff
}

.recommend-tit-mod .look-more {
    color: #267dcc !important;
    float: right;
    font-size: 14px
}

.recommend-tit-mod .look-more img.search-icon {
    width: 16px;
    height: 17px;
    vertical-align: middle;
    margin-right: 4px
}

.recommend_down {
    color: #333;
    font-weight: bold;
    margin-bottom: 16px;
    font-size: 14px
}

.recommend_down .recommend_down_link {
    color: #4ea1db;
    font-weight: 400
}

.recommend_down .recommend_down_link em {
    font-style: normal
}

.report-box,
.report-box-new {
    display: none;
    position: fixed;
    top: 27%;
    left: 50%;
    margin-left: -249px;
    border: 1px solid #e3e3e3;
    background: #fff;
    border-radius: 4px;
    z-index: 200
}

.pos-boxer {
    width: 496px;
    background: #fff;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none
}

.content-input {
    width: 100%;
    padding: 0 8px;
    outline: 0;
    border: 0
}

.pos-content {
    padding: 16px;
    padding-bottom: 0
}

.box-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.box-title .btn-close {
    width: 12px;
    height: 12px
}

.box-title .btn-close:hover {
    cursor: pointer
}

.box-title p {
    cursor: default;
    width: 32px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #3d3d3d;
    line-height: 22px
}

.box-title span {
    font-size: 14px;
    color: #e0e0e0
}

.box-top {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #3d3d3d;
    padding-bottom: 10px;
    cursor: default
}

.box-header {
    margin-top: 16px
}

.box-botoo {
    width: 100%
}

.box-botoom ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.box-botoom ul li {
    width: 110px;
    height: 32px;
    text-align: center;
    cursor: pointer;
    line-height: 32px;
    background: #f0f0f5;
    margin: 0 5.5px 8px 0;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3d3d3d
}

.box-botoom ul li.box-active {
    color: #fc5531
}

.box-content-top span {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #3d3d3d;
    cursor: default
}

.box-content-bottom ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.box-content-bottom ul li {
    cursor: pointer
}

.box-content-bottom {
    margin-top: 8px
}

.box-content-bottom ul li {
    width: 110px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    background: #f0f0f5;
    margin: 0 5.5px 8px 0;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3d3d3d
}

.box-content-bottom ul li.box-active {
    color: #fc5531
}

.pos-footer {
    margin-top: 46px;
    margin-bottom: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 12px
}

.pos-footer p {
    width: 77px;
    height: 32px;
    background: #fff;
    border-radius: 16px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #999aaa;
    cursor: pointer;
    margin-left: 25px
}

.pos-footer p.box-active {
    border: 1px solid #fc5531;
    background: #fc5531;
    color: #fff
}

.box-input {
    width: 465px;
    border-radius: 4px;
    background: rgba(248, 249, 251, 0.8);
    border-radius: 4px;
    border: 1px solid #dadde0;
    text-align: center
}

.box-input textarea {
    outline: none;
    margin-top: 8px;
    border: 0;
    border-radius: 2px;
    line-height: 22px;
    height: 48px;
    width: 450px;
    resize: none;
    border-color: #ccc;
    font-size: 14px;
    color: #999aaa;
    background: #f8f9fb
}

.dp-highlighter,
.prettyprint {
    position: relative;
    overflow-y: hidden;
    overflow-x: auto
}

.pad_bot {
    padding-bottom: 45px !important
}

.save_code {
    display: none;
    position: absolute;
    height: 60px;
    right: 30px;
    top: 5px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    z-index: 2
}

#mask_code {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 990
}

.gist_edit {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 505px;
    height: 330px;
    margin: -165px 0 0 -252px;
    z-index: 9999
}

.save_snippets {
    clear: both;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dddcdd;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.save_snippets .tit {
    clear: both;
    overflow: hidden;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #dddcdd;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.save_snippets .tit h3 {
    float: left;
    font-weight: normal;
    font-size: 16px;
    height: 45px;
    line-height: 45px;
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.gist_edit_list {
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%
}

.save_snippets .tit span {
    display: block;
    float: right;
    color: #999;
    height: 45px;
    line-height: 45px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.save_snippets .tit span a {
    color: #00f;
    text-decoration: underline
}

.save_snippets .tit span a:link,
.save_snippets .tit span a:visited,
.save_snippets .tit span a:hover,
.save_snippets .tit span a:active {
    color: #00f;
    text-decoration: underline
}

.save_snippets .con_form {
    clear: both;
    overflow: hidden;
    padding-top: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.save_snippets .con_form .gist_edit_list li {
    clear: both;
    overflow: hidden;
    min-height: 32px;
    margin-bottom: 20px;
    list-style: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.save_snippets .con_form .gist_edit_list li span.red {
    display: block;
    float: left;
    line-height: 36px;
    height: 32px;
    color: #f00;
    padding-right: 10px;
    margin-left: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.save_snippets .con_form .gist_edit_list li span.txt {
    display: block;
    float: left;
    height: 32px;
    line-height: 32px;
    padding-right: 20px
}

.save_snippets .con_form .gist_edit_list li .form-input {
    float: left;
    width: 398px;
    height: 30px;
    border: 1px solid #dddcdd;
    background: #fafafa;
    padding: 0 10px;
    color: #666;
    font-family: "Microsoft YaHei";
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

#divSearchTags {
    float: left;
    width: 398px;
    color: #666;
    font-family: "Microsoft YaHei";
    border: 1px solid #dddcdd;
    background: #fafafa;
    padding: 0 10px;
    margin-left: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left
}

#divSearchTags .label span {
    color: #666
}

.insertTag {
    height: 30px;
    width: 208px;
    color: #666;
    background: none;
    border: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

#divSearchTags .blog_tag {
    display: block;
    float: left;
    margin: 7px 10px 7px 0;
    padding: 0 5px;
    background: #f3f3f3;
    color: #666;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

#divSearchTags .blog_tag span {
    display: block;
    float: left
}

#divSearchTags .label a {
    color: #666;
    margin-left: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.save_snippets .con_form .gist_edit_list li .form-textarea {
    float: left;
    width: 398px;
    height: 60px;
    font-size: 12px;
    border: 1px solid #dddcdd;
    background: #fafafa;
    padding: 3px 10px;
    color: #666;
    font-family: "Microsoft YaHei";
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.save_snippets .bottom-bar {
    clear: both;
    overflow: hidden;
    border-top: 1px solid #dddcdd;
    padding: 17px 20px
}

.save_snippets .bottom-bar .btn-submit {
    border: 1px solid #888;
    background: #f0f0f0;
    border-radius: 2px;
    border-left: 0;
    border-top: 0;
    width: 45px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    float: right;
    margin-left: 7px;
    font-size: 12px;
    font-family: "Microsoft YaHei";
    color: #333
}

.file_holder .file_content.code table.lines pre.line_numbers {
    width: 40px !important
}

#loginWrap {
    position: fixed;
    top: 100px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 160
}

body,
html {
    height: 100%
}

.recommend-right {
    float: left !important;
    width: 0;
    display: none;
    position: relative
}

.recommend-right .recommend-top-adbox {
    overflow: hidden;
    display: none
}

.recommend-right .recommend-list-box {
    height: 100%
}

.recommend-right .recommend-list-box .align-items-stretch {
    overflow: auto;
    scrollbar-width: thin
}

.recommend-right .recommend-list-box .align-items-stretch::-webkit-scrollbar {
    width: 3px;
    height: 100px
}

.recommend-right .recommend-list-box .align-items-stretch::-webkit-scrollbar-thumb {
    background-color: rgba(153, 154, 170, 0.3);
    border-radius: 2px
}

.recommend-right .recommend-fixed-box {
    width: 300px;
    margin-top: 8px !important;
    margin-right: 2px
}

.recommend-right .title {
    font-size: 16px;
    color: #3d3d3d;
    padding: 8px 0 0 8px
}

.recommend-right .showImage {
    width: 292px;
    height: 176px;
    position: relative
}

.recommend-right .showImage img {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%
}

.recommend-right .showImage .content {
    position: absolute;
    bottom: 0;
    z-index: 2;
    color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
    height: 60px;
    width: 100%
}

.recommend-right .showImage .content h6 {
    font-size: 14px;
    width: 80%;
    height: 22px;
    display: inline-block;
    padding-left: 8px;
    margin-top: 30px
}

.recommend-right .showImage .content .read {
    vertical-align: 6px;
    color: #999
}

.recommend-right .right-item {
    padding: 8px 8px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 0 !important;
    overflow: hidden;
    word-wrap: break-word;
    border-bottom: 1px solid #f5f5f5
}

.recommend-right .right-item:last-child {
    border-bottom: none
}

.recommend-right .right-item .content h5:hover {
    color: #5094d5
}

.recommend-right .right-item .h5width {
    width: 66%;
    float: left
}

.recommend-right .right-item .imgbox {
    width: 89px;
    height: 60px;
    border: 1px solid #fff;
    background-color: #fff
}

.recommend-right .right-item .imgbox img {
    height: 100%;
    display: block;
    margin: 0 auto
}

.recommend-right .right-item .context-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.recommend-right .right-item .context-box .content-width {
    width: 70%;
    float: left
}

.recommend-right .right-item .context-box .content {
    line-height: 18px
}

.recommend-right .right-item .context-box .content h5 {
    color: #555666;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: normal;
    word-break: break-all
}

.recommend-right .right-item .context-box .content h5 em {
    font-style: normal
}

.recommend-right .right-item .context-box .content h5:hover {
    color: #fc5531
}

.recommend-right .right-item .context-box .content span {
    margin-right: 4px;
    font-size: 12px;
    color: #999;
    letter-spacing: 0;
    line-height: 20px;
    display: inline-block
}

.recommend-right .right-item .context-box .content span img {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    float: none
}

.recommend-right .right-item .context-box .content .download_mark {
    border: 1px solid #e3e3e3;
    padding: 2px;
    margin-right: 4px
}

.recommend-right .right-item .context-box .download_mark_button {
    margin-left: 8px;
    border: 1px solid #fc5531;
    color: #fc5531;
    padding: 0 3px;
    border-radius: 4px;
    word-break: break-all;
    float: right;
    min-width: 60px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    font-size: 12px
}

.recommend-right .right-item .context-box .download_mark_button:hover {
    background-color: #fff5f2;
    border-color: #fc5531
}

.recommend-right .right-item .context-box .right-item-desc {
    font-size: 12px;
    color: #999
}

.nodata .container {
    margin-left: 0
}

.nodata .recommend-right {
    width: 300px;
    margin-left: 8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.nodata .recommend-right[data-type='recommend'] .recommend-right_aside {
    height: unset
}

.nodata .recommend-right[data-type='recommend'] #recommend-right {
    height: unset
}

.nodata .recommend-right[data-type='recommend'] ul {
    background-color: #fff
}

.nodata .recommend-right_aside {
    height: 100%;
    position: relative
}

.nodata .recommend-right_aside #recommend-right {
    width: 300px
}

.nodata .recommend-right_aside #recommend-right.isActive {
    position: fixed;
    top: 55px
}

.nodata .recommend-right_aside #groupfile {
    display: none
}

.nodata .recommend-right_aside .groupfile {
    max-height: 50%;
    border-radius: 2px
}

.nodata .recommend-right_aside .groupfile-div,
.nodata .recommend-right_aside .groupfile-div1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.nodata .recommend-right_aside #kind_person_column .aside-content {
    max-height: 208px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #999aaa transparent
}

.nodata .recommend-right_aside #kind_person_column .aside-content::-webkit-scrollbar {
    width: 6px;
    background-color: transparent
}

.nodata .recommend-right_aside #kind_person_column .aside-content::-webkit-scrollbar-thumb {
    background-color: #999aaa;
    border-radius: 3px
}

.nodata .recommend-right_aside #kind_person_column .aside-content::-webkit-scrollbar-track {
    background-color: transparent
}

.nodata .recommend-right_aside #kind_person_column .aside-content::after {
    bottom: 0
}

.nodata .recommend-right_aside .kind_person {
    width: 300px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 2px;
    overflow: hidden
}

.nodata .recommend-right_aside .kind_person .bottom-text-img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 30px;
    cursor: pointer
}

.nodata .recommend-right_aside .kind_person .bottom-text-img img {
    width: 12px;
    height: 7px
}

.nodata .recommend-right_aside .kind_person .aside-content {
    padding: 16px 16px 32px 16px;
    position: relative
}

.nodata .recommend-right_aside .kind_person .aside-content::after {
    display: block;
    position: absolute;
    content: '';
    width: 1px;
    height: 12px;
    background: #fff;
    left: 16px;
    bottom: 32px
}

.nodata .recommend-right_aside .kind_person .aside-content::before {
    display: block;
    position: absolute;
    content: '';
    width: 1px;
    height: 12px;
    background: #fff;
    left: 16px;
    top: 16px
}

.nodata .recommend-right_aside .kind_person .aside-content ul {
    border-left: 1px dashed #ccccd8
}

.nodata .recommend-right_aside .kind_person .aside-content ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 16px;
    font-size: 14px
}

.nodata .recommend-right_aside .kind_person .aside-content ul li .special-column-name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #555666;
    font-size: 14px;
    line-height: 24px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    position: relative
}

.nodata .recommend-right_aside .kind_person .aside-content ul li .special-column-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.nodata .recommend-right_aside .kind_person .aside-content ul li .special-column-name .special-column-bar {
    width: 12px;
    height: 1px;
    border-bottom: 1px dashed #ccccd8;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.nodata .recommend-right_aside .kind_person .aside-content ul li .special-column-name .special-column-bar.special-column-bar-second {
    width: 44px
}

.nodata .recommend-right_aside .kind_person .aside-content ul li .special-column-name img {
    width: 24px;
    height: 24px;
    border: 1px solid #e8e8ed;
    border-radius: 2px;
    display: block;
    margin-right: 8px;
    margin-left: 4px
}

.nodata .recommend-right_aside .kind_person .aside-content ul li .special-column-name .img-mantle {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 16px;
    top: 0;
    background: rgba(0, 0, 0, 0.1)
}

.nodata .recommend-right_aside .kind_person .aside-content ul li .special-column-name .img-mantle.img-mantle-second {
    left: 48px
}

.nodata .recommend-right_aside .kind_person .aside-content ul li .special-column-name:hover {
    color: #fc5531
}

.nodata .recommend-right_aside .kind_person .aside-content ul li .special-column-name .pay-tag {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 8px;
    height: 18px;
    line-height: 16px;
    border: 1px solid #fc5531;
    border-radius: 2px;
    color: #fc5531;
    font-size: 12px;
    padding: 1px 4px
}

.nodata .recommend-right_aside .kind_person .aside-content ul li .special-column-num {
    color: #999aaa;
    font-size: 14px;
    line-height: 16px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-left: 16px
}

.nodata .recommend-right_aside .kind_person .aside-content ul li:nth-last-child(1) {
    margin-bottom: 0
}

.nodata .recommend-right_aside .common_title .common_left {
    float: left;
    height: 22px;
    width: 4px;
    background: #ca0c16;
    margin-right: 8px
}

.nodata .recommend-right_aside .common_title .common_text {
    float: left;
    line-height: 22px;
    font-size: 14px;
    color: #3d3d3d;
    font-weight: 500
}

.super-private {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -235px;
    margin-top: -150px;
    z-index: 100000;
    width: 470px;
    height: 160px;
    padding: 16px;
    background-color: #fff;
    border: 1px solid #000
}

.super-private .private-title .title {
    font-size: 16px;
    color: #3d3d3d;
    display: inline-block
}

.super-private .private-title .private-close {
    float: right;
    cursor: pointer
}

.super-private .private-title .private-close svg {
    fill: #e0e0e0
}

.super-private .private-content {
    margin-top: 10px
}

.super-private .private-content .select-name {
    line-height: 32px
}

.super-private .private-content .select {
    display: inline-block;
    float: right;
    width: 360px;
    height: 32px
}

.super-private .private-content .select .input-mod {
    width: 360px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: context-menu;
    padding-right: 0
}

.super-private .private-content .select .input-mod .select-active {
    line-height: 20px
}

.super-private .private-content .select .input-mod .select-button {
    float: right;
    height: 18px
}

.super-private .private-content .select .input-mod .select-button svg {
    width: 20px;
    height: 16px;
    fill: #d6d6d6
}

.super-private .private-content .select .select-option {
    display: none;
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 1px 8px;
    position: relative;
    z-index: 2;
    top: 5px;
    height: 107px;
    overflow-x: auto
}

.super-private .private-content .select .select-option li {
    cursor: context-menu;
    font-size: 14px;
    color: #4d4d4d;
    letter-spacing: 0;
    line-height: 28px
}

.super-private .private-content .other {
    display: none;
    margin-top: 10px
}

.super-private .private-content .other .textarea-box {
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 360px;
    float: right;
    padding: 8px
}

.super-private .private-content .other textarea {
    border: 0;
    resize: none;
    width: 100%;
    height: 64px
}

.super-private .private-content .other .number {
    text-align: right;
    padding: 0 10px;
    font-size: 14px;
    color: #ccc
}

.super-private .private-footer {
    position: absolute;
    bottom: 16px;
    right: 16px
}

.super-private .private-footer div {
    display: inline-block;
    padding: 4px 20px;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px
}

.super-private .private-footer .private-send {
    margin-left: 10px;
    border-radius: 4px
}

.super-private .private-footer .no-active {
    background: #ebebeb;
    color: #c2c2c2
}

.super-private .private-footer .active,
.super-private .private-footer .close-active {
    background: #ca0c16;
    color: #fff
}

.private-error {
    diplay: none
}

.rotate180 {
    -webkit-transform: rotate(.5turn);
    transform: rotate(.5turn);
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.rotate0 {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.template-box {
    padding: 6px 0;
    text-align: center;
    background: #fff;
    border-top: 1px solid #f4f5f6;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px
}

.template-box span {
    font-size: 14px;
    color: #555666;
    line-height: 20px;
    padding: 0 4px
}

.template-box .back-home {
    color: #555666
}

.template-box .back-home:hover {
    color: #fc5531
}

.skin-boxshadow {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999
}

.pay-code {
    width: 238px;
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    height: 330px;
    background: #fff;
    padding: 32px 36px
}

.pay-code .content-blance {
    padding-bottom: 34px;
    display: none
}

.pay-code .content-blance .blance-bt {
    display: block;
    width: 128px;
    height: 32px;
    background: #e33e33;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 32px;
    text-align: center;
    margin: auto
}

.pay-code .pay-balance-con {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0
}

.pay-code .pay-balance-con img {
    width: 16px;
    height: 13px;
    margin-left: 0
}

.pay-code .pay-balance-con span {
    font-size: 14px;
    font-weight: 400;
    color: #fc5531
}

.pay-code .pay-balance {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 4px
}

.pay-code .pay-code-tile {
    position: relative
}

.pay-code .pay-code-tile img {
    margin-left: 6px
}

.pay-code .pay-code-tile:hover div.pay-code-content {
    display: block
}

.pay-code .pay-code-tile div.pay-code-content {
    display: none;
    position: absolute;
    background: #fff;
    top: 26px;
    z-index: 100;
    left: -102px;
    width: 227px;
    height: 114px;
    text-align: center;
    -webkit-box-shadow: 0 3px 4px 0 rgba(184, 184, 184, 0.43);
    box-shadow: 0 3px 4px 0 rgba(184, 184, 184, 0.43);
    border: 1px solid #d9e1e9;
    padding-top: 8px;
    border-radius: 5px
}

.pay-code .pay-code-tile div.pay-code-content .span {
    text-align: start;
    font-size: 14px;
    padding: 0 8px;
    color: #555666
}

.pay-code .pay-code-tile div.pay-code-content .span p {
    font-size: 12px
}

.pay-code .pay-code-tile div.pay-code-content p.title {
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #555666;
    line-height: 22px
}

.pay-code .pay-code-tile div.pay-code-content #shareQrCode,
.pay-code .pay-code-tile div.pay-code-content #shareCode {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.pay-code .pay-code-tile div.pay-code-content span {
    position: absolute;
    right: 8px;
    top: 2px;
    cursor: pointer;
    color: #999aaa
}

.pay-code .pay-code-tile div.pay-code-content:before {
    display: block;
    border: 1px solid #d9e1e9;
    content: "";
    width: 12px;
    height: 12px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -5px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg)
}

.pay-code .pay-code-tile div.pay-code-content:after {
    display: block;
    content: "";
    width: 80px;
    height: 10px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    z-index: 10
}

.pay-code img {
    height: 12px;
    width: 12px
}

.pay-code span,
.pay-code a {
    padding-left: 6px;
    font-size: 12px
}

.pay-code .pay-money {
    font-size: 14px;
    color: #4d4d4d;
    line-height: 20px;
    text-align: center;
    margin-bottom: 20px
}

.pay-code .pay-money span {
    font-size: 22px;
    font-weight: 600;
    color: #fc5531;
    line-height: 20px
}

.pay-code .content-code {
    width: 166px;
    height: 200px;
    border: 1px solid #ebebeb;
    padding-top: 10px;
    text-align: center
}

.pay-code .content-code #payCode {
    width: 148px;
    height: 148px;
    margin: auto
}

.pay-code .content-code #payCode img {
    width: 148px;
    height: 148px
}

.pay-code .content-code #payCode .renovate,
.pay-code .content-code #payCode .renov-men {
    width: 148px;
    height: 148px;
    background: #666;
    text-align: center;
    padding-top: 42px
}

.pay-code .content-code #payCode .renovate:hover,
.pay-code .content-code #payCode .renov-men:hover {
    cursor: pointer
}

.pay-code .content-code #payCode .renovate img,
.pay-code .content-code #payCode .renov-men img {
    display: block;
    width: 28px;
    height: 28px;
    margin: auto;
    margin-bottom: 12px
}

.pay-code .content-code #payCode .renovate span,
.pay-code .content-code #payCode .renov-men span {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    line-height: 21px
}

.pay-code .content-code .pay-style {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #4d4d4d;
    text-align: center;
    height: 20px;
    line-height: 20px
}

.pay-code .content-code .pay-style span {
    display: inline-block
}

.pay-code .content-code .pay-style span.text {
    margin-left: 4px;
    vertical-align: super
}

.pay-code .content-code .pay-style img {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 2px
}

.pay-code .bt-close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 10px;
    height: 10px
}

.pay-code .bt-close:hover {
    cursor: pointer
}

.pay-code .bt-close svg {
    width: 10px;
    height: 10px
}

#blogColumnPayAdvert,
#blogHuaweiyunAdvert {
    background-color: #fff
}

#blogColumnPayAdvert.active-padding .column-group,
#blogHuaweiyunAdvert.active-padding .column-group {
    padding-bottom: 0
}

#blogColumnPayAdvert .column-group,
#blogHuaweiyunAdvert .column-group {
    padding: 16px 0
}

#blogColumnPayAdvert .column-group.active,
#blogHuaweiyunAdvert .column-group.active {
    padding: 0 0;
    margin: 16px 0 -8px 0
}

#blogColumnPayAdvert .column-group.open .column-group-item,
#blogHuaweiyunAdvert .column-group.open .column-group-item {
    -webkit-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0
}

#blogColumnPayAdvert .column-group.open .column-group-item:hover,
#blogHuaweiyunAdvert .column-group.open .column-group-item:hover {
    -webkit-box-shadow: 0 0 10px 0 rgba(232, 232, 237, 0.4);
    box-shadow: 0 0 10px 0 rgba(232, 232, 237, 0.4)
}

#blogColumnPayAdvert .column-group.open .column-group-item.column-group0,
#blogHuaweiyunAdvert .column-group.open .column-group-item.column-group0 {
    margin-top: 0;
    width: 100%
}

#blogColumnPayAdvert .column-group.open .column-group-item.column-group1,
#blogHuaweiyunAdvert .column-group.open .column-group-item.column-group1 {
    margin-top: -1px;
    width: 100%
}

#blogColumnPayAdvert .column-group.open .column-group-item.column-group2,
#blogHuaweiyunAdvert .column-group.open .column-group-item.column-group2 {
    margin-top: -1px;
    width: 100%
}

#blogColumnPayAdvert .column-group:hover,
#blogHuaweiyunAdvert .column-group:hover {
    cursor: pointer
}

#blogColumnPayAdvert .column-group-item,
#blogHuaweiyunAdvert .column-group-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 56px;
    padding: 9px 16px 9px 16px;
    background: #fff;
    -webkit-box-shadow: 0 0 10px 0 rgba(232, 232, 237, 0.4);
    box-shadow: 0 0 10px 0 rgba(232, 232, 237, 0.4);
    border-radius: 2px;
    border: 1px solid #f0f0f0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    -webkit-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out;
    -webkit-transition: margin-top .2s ease-in-out;
    transition: margin-top .2s ease-in-out
}

#blogColumnPayAdvert .column-group-item.curriculum-active .item-l,
#blogHuaweiyunAdvert .column-group-item.curriculum-active .item-l {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

#blogColumnPayAdvert .column-group-item.column-group0,
#blogHuaweiyunAdvert .column-group-item.column-group0 {
    margin-top: 0;
    z-index: 3
}

#blogColumnPayAdvert .column-group-item.column-group1,
#blogHuaweiyunAdvert .column-group-item.column-group1 {
    width: 99%;
    margin: auto;
    margin-top: -48px;
    z-index: 2
}

#blogColumnPayAdvert .column-group-item.column-group2,
#blogHuaweiyunAdvert .column-group-item.column-group2 {
    width: 98%;
    margin: auto;
    margin-top: -48px;
    z-index: 1
}

#blogColumnPayAdvert .column-group-item.column-group-item-one,
#blogHuaweiyunAdvert .column-group-item.column-group-item-one {
    -webkit-box-shadow: none;
    box-shadow: none
}

#blogColumnPayAdvert .column-group-item.column-group-item-one:hover,
#blogHuaweiyunAdvert .column-group-item.column-group-item-one:hover {
    -webkit-box-shadow: 0 0 10px 0 rgba(232, 232, 237, 0.4);
    box-shadow: 0 0 10px 0 rgba(232, 232, 237, 0.4)
}

#blogColumnPayAdvert .column-group-item .item-l,
#blogHuaweiyunAdvert .column-group-item .item-l {
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

#blogColumnPayAdvert .column-group-item .item-l a,
#blogHuaweiyunAdvert .column-group-item .item-l a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

#blogColumnPayAdvert .column-group-item .item-l img,
#blogHuaweiyunAdvert .column-group-item .item-l img {
    width: 36px;
    height: 36px;
    border-radius: 2px;
    border: 1px solid #f5f6f7;
    vertical-align: middle
}

#blogColumnPayAdvert .column-group-item .item-l .title,
#blogHuaweiyunAdvert .column-group-item .item-l .title {
    font-size: 16px;
    font-weight: 500;
    color: #222226;
    line-height: 22px;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

#blogColumnPayAdvert .column-group-item .item-l .title>span,
#blogHuaweiyunAdvert .column-group-item .item-l .title>span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

#blogColumnPayAdvert .column-group-item .item-l .title .tit,
#blogHuaweiyunAdvert .column-group-item .item-l .title .tit {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 162px
}

#blogColumnPayAdvert .column-group-item .item-l .title .dec,
#blogHuaweiyunAdvert .column-group-item .item-l .title .dec {
    margin-left: 8px;
    font-size: 14px;
    color: #999aaa;
    line-height: 20px
}

#blogColumnPayAdvert .column-group-item .item-l .title .dec.more,
#blogHuaweiyunAdvert .column-group-item .item-l .title .dec.more {
    min-width: 150px
}

#blogColumnPayAdvert .column-group-item .item-l .title .dec.more img,
#blogHuaweiyunAdvert .column-group-item .item-l .title .dec.more img {
    width: 16px;
    height: 20px;
    vertical-align: sub;
    border: none
}

#blogColumnPayAdvert .column-group-item .item-l .title .rank,
#blogHuaweiyunAdvert .column-group-item .item-l .title .rank {
    background: #fff4e5;
    border-radius: 2px;
    font-size: 12px;
    color: #823708;
    vertical-align: top;
    line-height: 16px;
    display: inline-block;
    padding-right: 4px;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content
}

#blogColumnPayAdvert .column-group-item .item-l .title .rank img,
#blogHuaweiyunAdvert .column-group-item .item-l .title .rank img {
    width: 19px;
    height: 16px;
    border-radius: 2px 0 8px 2px;
    margin-right: 4px;
    vertical-align: top
}

#blogColumnPayAdvert .column-group-item .item-l .title:hover,
#blogHuaweiyunAdvert .column-group-item .item-l .title:hover {
    color: #fc5531
}

#blogColumnPayAdvert .column-group-item .item-m,
#blogHuaweiyunAdvert .column-group-item .item-m {
    min-width: 260px;
    font-size: 14px;
    color: #999aaa;
    line-height: 40px
}

#blogColumnPayAdvert .column-group-item .item-m span,
#blogHuaweiyunAdvert .column-group-item .item-m span {
    float: right;
    margin-right: 20px
}

#blogColumnPayAdvert .column-group-item .item-m span.old-add-new-box,
#blogHuaweiyunAdvert .column-group-item .item-m span.old-add-new-box {
    display: inline-block;
    min-width: 48px;
    text-align: right;
    width: 110px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    height: 100%;
    vertical-align: middle;
    position: relative
}

#blogColumnPayAdvert .column-group-item .item-m span.old-add-new-box .tipTag,
#blogHuaweiyunAdvert .column-group-item .item-m span.old-add-new-box .tipTag {
    background: #fc5531;
    border-radius: 12px 0;
    border: 1px solid #fff;
    position: absolute;
    top: -12px;
    line-height: 20px;
    padding: 2px 8px;
    font-size: 12px;
    color: #fff;
    font-weight: normal;
    font-style: normal;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 0 10px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px
}

#blogColumnPayAdvert .column-group-item .item-m span.price,
#blogHuaweiyunAdvert .column-group-item .item-m span.price {
    display: block;
    height: 20px;
    float: none;
    font-family: "PingFang SC";
    color: #fc5531;
    font-weight: 500;
    margin-right: 0
}

#blogColumnPayAdvert .column-group-item .item-m span.price.price-style,
#blogHuaweiyunAdvert .column-group-item .item-m span.price.price-style {
    height: 40px;
    line-height: 40px
}

#blogColumnPayAdvert .column-group-item .item-m span.oldprice,
#blogHuaweiyunAdvert .column-group-item .item-m span.oldprice {
    height: 20px;
    margin-right: 0;
    text-decoration: line-through
}

#blogColumnPayAdvert .column-group-item .item-m span.oldprice.price-style,
#blogHuaweiyunAdvert .column-group-item .item-m span.oldprice.price-style {
    display: none
}

#blogColumnPayAdvert .column-group-item .item-m.e-book,
#blogHuaweiyunAdvert .column-group-item .item-m.e-book {
    height: 24px;
    min-width: 120px;
    color: #999aaa;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 16px;
    margin-right: 16px;
    margin-top: 6px;
    padding: 2px 0
}

#blogColumnPayAdvert .column-group-item .item-m.e-book span,
#blogHuaweiyunAdvert .column-group-item .item-m.e-book span {
    float: none;
    line-height: 20px;
    height: 20px;
    white-space: nowrap;
    margin-right: 0
}

#blogColumnPayAdvert .column-group-item .item-m.e-book span.oldprice,
#blogHuaweiyunAdvert .column-group-item .item-m.e-book span.oldprice {
    line-height: 15px;
    height: 15px;
    font-size: 12px
}

@media (min-width:1550px) and (max-width:1700px) {

    #blogColumnPayAdvert .column-group-item .item-m.e-book,
    #blogHuaweiyunAdvert .column-group-item .item-m.e-book {
        display: none
    }
}

#blogColumnPayAdvert .column-group-item .item-r,
#blogHuaweiyunAdvert .column-group-item .item-r {
    padding: 4px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

#blogColumnPayAdvert .column-group-item .item-r span.curriculum-box,
#blogHuaweiyunAdvert .column-group-item .item-r span.curriculum-box {
    color: #555666;
    padding-right: 20px;
    line-height: 28px
}

#blogColumnPayAdvert .column-group-item .item-r a,
#blogHuaweiyunAdvert .column-group-item .item-r a {
    display: block;
    width: 80px;
    height: 28px;
    font-size: 12px;
    color: #555666;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #ccccd8;
    text-align: center;
    line-height: 28px;
    font-family: "PingFang SC"
}

#blogColumnPayAdvert .column-group-item .item-r a:hover,
#blogHuaweiyunAdvert .column-group-item .item-r a:hover {
    cursor: default;
    border: 1px solid #555666
}

#blogColumnPayAdvert .column-group-item .item-r a.article-column-bt:hover,
#blogHuaweiyunAdvert .column-group-item .item-r a.article-column-bt:hover {
    cursor: pointer
}

#blogColumnPayAdvert .column-group-item .item-r a.article-column-subscribe,
#blogHuaweiyunAdvert .column-group-item .item-r a.article-column-subscribe {
    color: #999aaa
}

#blogColumnPayAdvert .column-group-item .item-r a.article-column-subscribe:hover,
#blogHuaweiyunAdvert .column-group-item .item-r a.article-column-subscribe:hover {
    border: 1px solid #ccccd8
}

#blogColumnPayAdvert .column-group-item .item-r a .column_studyvip_free-active,
#blogHuaweiyunAdvert .column-group-item .item-r a .column_studyvip_free-active {
    display: inline-block;
    position: absolute;
    top: -18px;
    right: 0;
    width: 76px;
    height: 24px;
    background: #fc1944;
    border-radius: 12px 12px 12px 0;
    border: 1px solid #fff;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 24px;
    background: #fc1944;
    color: #fff;
    text-align: center
}

#blogColumnPayAdvert .column-group-item .item-r a.article-book-bt,
#blogHuaweiyunAdvert .column-group-item .item-r a.article-book-bt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 24px;
    padding: 4px 8px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2px;
    border-radius: 16px;
    border: 1px solid #ccccd8;
    background: #fff;
    font-size: 12px;
    color: #555666;
    line-height: 16px;
    white-space: nowrap;
    min-width: 103px
}

#blogColumnPayAdvert .column-group-item .item-r a.article-book-bt .article-book-bt-price,
#blogHuaweiyunAdvert .column-group-item .item-r a.article-book-bt .article-book-bt-price {
    color: #1a1a1a;
    line-height: 20px
}

#blogColumnPayAdvert .column-group-item .item-r a.article-book-bt .article-book-bt-price .symbol,
#blogHuaweiyunAdvert .column-group-item .item-r a.article-book-bt .article-book-bt-price .symbol {
    font-size: 12px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 20px;
    margin-right: 2px
}

#blogColumnPayAdvert .column-group-item .item-r a.column-studyvip-free,
#blogHuaweiyunAdvert .column-group-item .item-r a.column-studyvip-free {
    display: inline-block;
    min-width: 142px;
    height: 28px;
    background: #fae8d0;
    border-radius: 23px;
    border: 1px solid #eed3ab;
    font-size: 12px;
    color: #69421b;
    text-align: center;
    line-height: 28px;
    margin-left: 8px;
    position: relative;
    border: none
}

#blogColumnPayAdvert .column-group-item .item-r a.column-studyvip-free:hover,
#blogHuaweiyunAdvert .column-group-item .item-r a.column-studyvip-free:hover {
    cursor: pointer;
    background: #f8c883
}

#blogColumnPayAdvert .column-group-item .item-r a.ebook-studyvip-free,
#blogHuaweiyunAdvert .column-group-item .item-r a.ebook-studyvip-free {
    min-width: 128px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 24px;
    padding: 4px 13px;
    border-radius: 16px;
    background: #e4dcf5;
    border: none;
    font-size: 12px;
    line-height: 16px;
    color: #5e3d79;
    font-family: "PingFang SC";
    font-weight: 500
}

#blogColumnPayAdvert .column-group-item .item-r a.ebook-studyvip-free .studyvip-icon,
#blogHuaweiyunAdvert .column-group-item .item-r a.ebook-studyvip-free .studyvip-icon {
    width: 16px;
    height: 16px;
    margin-right: 2px
}

#blogColumnPayAdvert .column-group-item .item-r a.normalVip-flash-sale,
#blogHuaweiyunAdvert .column-group-item .item-r a.normalVip-flash-sale {
    font-family: "PingFang SC";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    gap: 2px;
    min-width: 128px;
    height: 24px;
    padding: 4px 13px;
    border-radius: 16px;
    background: #fbe9d5;
    border: none;
    font-size: 12px;
    line-height: 16px;
    color: #623b19;
    cursor: pointer;
    white-space: nowrap;
    width: auto
}

#blogColumnPayAdvert .column-group-item .item-r a.normalVip-flash-sale .normalVip-flash-sale-icon,
#blogHuaweiyunAdvert .column-group-item .item-r a.normalVip-flash-sale .normalVip-flash-sale-icon {
    width: 16px;
    height: 16px;
    margin-right: 2px
}

#blogColumnPayAdvert .column-group-item .item-r a.normalVip-flash-sale .normalVip-flash-sale-price,
#blogHuaweiyunAdvert .column-group-item .item-r a.normalVip-flash-sale .normalVip-flash-sale-price {
    font-size: 14px;
    font-weight: 500
}

#blogColumnPayAdvert .column-group-item .item-r a.normalVip-flash-sale .normalVip-flash-sale-price .symbol,
#blogHuaweiyunAdvert .column-group-item .item-r a.normalVip-flash-sale .normalVip-flash-sale-price .symbol {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #623b19;
    margin-right: 2px
}

#blogColumnPayAdvert .column-group-item .item-r a.normalVip-flash-sale .normalVip-flash-sale-tip,
#blogHuaweiyunAdvert .column-group-item .item-r a.normalVip-flash-sale .normalVip-flash-sale-tip {
    position: absolute;
    top: -16px;
    right: 0;
    background: #fc5531;
    border-radius: 12px 0;
    font-size: 12px;
    color: #fff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 0 10px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

#blogColumnPayAdvert .column-group-item .item-r a.column-studyvip-discount,
#blogHuaweiyunAdvert .column-group-item .item-r a.column-studyvip-discount {
    display: inline-block;
    min-width: 90px;
    margin-left: 12px;
    height: 28px;
    background: #4c4c4c;
    border-radius: 23px;
    font-size: 12px;
    text-align: center;
    color: #ffcd66;
    line-height: 28px;
    margin-left: 8px;
    border: none;
    position: relative
}

#blogColumnPayAdvert .column-group-item .item-r a.column-studyvip-discount:hover,
#blogHuaweiyunAdvert .column-group-item .item-r a.column-studyvip-discount:hover {
    cursor: pointer;
    background: #555666
}

#blogColumnPayAdvert .column-group-item .item-r a .column-studyvip-icon,
#blogHuaweiyunAdvert .column-group-item .item-r a .column-studyvip-icon {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 4px
}

#blogColumnPayAdvert .column-group-item .item-r .article-column-off-shelf,
#blogHuaweiyunAdvert .column-group-item .item-r .article-column-off-shelf {
    width: 120px;
    text-align: center;
    height: 28px;
    background: #f7f7fc;
    border-radius: 16px;
    border: 1px solid #ccccd8;
    font-size: 12px;
    font-weight: 500;
    color: #ccccd8;
    padding: 4px 0;
    cursor: default
}

#blogColumnPayAdvert .column-group-item .item-r.e-book,
#blogHuaweiyunAdvert .column-group-item .item-r.e-book {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

#blogColumnPayAdvert .column-advert-box,
#blogHuaweiyunAdvert .column-advert-box {
    z-index: 997;
    padding: 16px 0;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    border-bottom: 1px solid #f5f6f7
}

#blogColumnPayAdvert .column-advert-box .left-advert-box,
#blogHuaweiyunAdvert .column-advert-box .left-advert-box {
    width: 82px;
    height: 82px;
    margin-right: 12px
}

#blogColumnPayAdvert .column-advert-box .left-advert-box img,
#blogHuaweiyunAdvert .column-advert-box .left-advert-box img {
    width: 82px;
    height: 82px;
    border-radius: 4px
}

#blogColumnPayAdvert .column-advert-box .middle-advert-box,
#blogHuaweiyunAdvert .column-advert-box .middle-advert-box {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 12px;
    overflow: hidden;
    width: 100%
}

#blogColumnPayAdvert .column-advert-box .middle-advert-box .title,
#blogHuaweiyunAdvert .column-advert-box .middle-advert-box .title {
    margin-bottom: 2px;
    height: 25px;
    font-size: 18px;
    font-weight: 600;
    color: #555666;
    line-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#blogColumnPayAdvert .column-advert-box .middle-advert-box .title:hover,
#blogHuaweiyunAdvert .column-advert-box .middle-advert-box .title:hover {
    color: #fc5531
}

#blogColumnPayAdvert .column-advert-box .middle-advert-box .introduce,
#blogHuaweiyunAdvert .column-advert-box .middle-advert-box .introduce {
    line-height: 16px;
    font-size: 14px;
    color: #999aaa;
    margin-bottom: 6px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

#blogColumnPayAdvert .column-advert-box .middle-advert-box .other-introduce,
#blogHuaweiyunAdvert .column-advert-box .middle-advert-box .other-introduce {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: auto
}

#blogColumnPayAdvert .column-advert-box .middle-advert-box .information,
#blogHuaweiyunAdvert .column-advert-box .middle-advert-box .information {
    height: 24px
}

#blogColumnPayAdvert .column-advert-box .middle-advert-box .information img,
#blogHuaweiyunAdvert .column-advert-box .middle-advert-box .information img {
    width: 24px;
    height: 24px;
    border-radius: 50%
}

#blogColumnPayAdvert .column-advert-box .middle-advert-box .information span,
#blogHuaweiyunAdvert .column-advert-box .middle-advert-box .information span {
    margin-left: 8px;
    line-height: 24px;
    vertical-align: top;
    color: #5f6471
}

#blogColumnPayAdvert .column-advert-box .middle-advert-box .information:hover span,
#blogHuaweiyunAdvert .column-advert-box .middle-advert-box .information:hover span {
    color: #fc5531
}

#blogColumnPayAdvert .column-advert-box .right-advert-box .bt-advert-box,
#blogHuaweiyunAdvert .column-advert-box .right-advert-box .bt-advert-box {
    padding-top: 8px;
    margin-bottom: 16px;
    text-align: right;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

#blogColumnPayAdvert .column-advert-box .right-advert-box .bt-click,
#blogHuaweiyunAdvert .column-advert-box .right-advert-box .bt-click {
    font-size: 16px;
    background-color: #fff;
    border-radius: 15px;
    border: 1px solid #fc5531;
    font-size: 14px;
    line-height: 30px;
    padding: 0 25px;
    color: #fc5531;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 8px
}

#blogColumnPayAdvert .column-advert-box .right-advert-box .bt-click:hover,
#blogHuaweiyunAdvert .column-advert-box .right-advert-box .bt-click:hover {
    background-color: #fff5f2
}

#blogColumnPayAdvert .column-advert-box .right-advert-box .bt-share-column,
#blogHuaweiyunAdvert .column-advert-box .right-advert-box .bt-share-column {
    position: relative;
    margin-left: 0
}

#blogColumnPayAdvert .column-advert-box .right-advert-box .bt-share-column .share-column-box,
#blogHuaweiyunAdvert .column-advert-box .right-advert-box .bt-share-column .share-column-box {
    position: absolute;
    display: none;
    width: 185px;
    height: 200px;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 16px 16px 0 16px;
    background: #fff;
    left: -34px;
    top: 38px
}

#blogColumnPayAdvert .column-advert-box .right-advert-box .bt-share-column .share-column-box .share-column-text,
#blogHuaweiyunAdvert .column-advert-box .right-advert-box .bt-share-column .share-column-box .share-column-text {
    font-size: 12px;
    line-height: 17px;
    color: #555666;
    text-align: center
}

#blogColumnPayAdvert .column-advert-box .right-advert-box .bt-share-column .share-column-box .share-column-img,
#blogHuaweiyunAdvert .column-advert-box .right-advert-box .bt-share-column .share-column-box .share-column-img {
    margin-top: 4px
}

#blogColumnPayAdvert .column-advert-box .right-advert-box .bt-share-column .share-column-box .share-column-img img,
#blogHuaweiyunAdvert .column-advert-box .right-advert-box .bt-share-column .share-column-box .share-column-img img {
    display: block;
    width: 132px;
    height: 136px;
    margin: auto
}

#blogColumnPayAdvert .column-advert-box .right-advert-box .un-bt-click,
#blogHuaweiyunAdvert .column-advert-box .right-advert-box .un-bt-click {
    font-size: 16px;
    background-color: #fff;
    border-radius: 15px;
    border: none;
    font-size: 14px;
    line-height: 30px;
    padding: 0 25px;
    color: #555666;
    border: 1px solid #555666;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 8px
}

#blogColumnPayAdvert .column-advert-box .right-advert-box .count-advert-box,
#blogHuaweiyunAdvert .column-advert-box .right-advert-box .count-advert-box {
    text-align: right;
    min-width: 222px
}

#blogColumnPayAdvert .column-advert-box .right-advert-box .count-advert-box span.advert-money,
#blogHuaweiyunAdvert .column-advert-box .right-advert-box .count-advert-box span.advert-money {
    font-size: 16px;
    font-weight: 600;
    color: #fc5531;
    line-height: 26px;
    margin-right: 4px
}

#blogColumnPayAdvert .column-advert-box .right-advert-box .count-advert-box span.advert-count-people,
#blogHuaweiyunAdvert .column-advert-box .right-advert-box .count-advert-box span.advert-count-people {
    font-size: 14px;
    color: #fc5531;
    line-height: 22px
}

.learning_the_member_box {
    width: 100%;
    height: 32px;
    background: rgba(255, 244, 229, 0.5);
    border-radius: 2px;
    padding: 0 16px;
    margin-top: -2px
}

.learning_the_member_box a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.learning_the_member_box a .left,
.learning_the_member_box a .right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.learning_the_member_box a .left span,
.learning_the_member_box a .right span {
    line-height: 32px;
    color: #69421b;
    font-size: 14px
}

.learning_the_member_box a .left img {
    width: 16px;
    height: 16px;
    margin-right: 4px
}

.learning_the_member_box a .right img {
    width: 10px;
    height: 16px;
    margin-left: 2px
}

@media screen and (max-width:1320px) {
    #blogColumnPayAdvert .column-group-item .item-l .title .tit {
        width: 115px
    }
}

.more-toolbox-new {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    margin-bottom: 8px;
    background-color: #fff
}

.more-toolbox-new .left-toolbox {
    position: relative;
    z-index: 10;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 17px 24px;
    height: 64px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    -webkit-box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.06);
    box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.06);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px
}

.more-toolbox-new .left-toolbox.no-style {
    padding: 16px 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.more-toolbox-new .toolbox-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.more-toolbox-new .toolbox-left .profile-box .profile-href {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden
}

.more-toolbox-new .toolbox-left .profile-box .profile-img {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    border: 1px solid #f5f6f7;
    margin-right: 8px
}

.more-toolbox-new .toolbox-left .profile-box .profile-name {
    max-width: 160px;
    height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    color: #222226;
    line-height: 24px;
    margin-right: 8px
}

.more-toolbox-new .toolbox-left .profile-attend {
    position: relative
}

.more-toolbox-new .toolbox-left .profile-attend .profile-subscribe-box {
    position: absolute;
    display: none;
    bottom: 46px
}

.more-toolbox-new .toolbox-left .profile-attend .profile-subscribe-cont {
    width: 152px;
    padding: 8px 16px;
    height: 186px;
    background: #fff;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    border: 1px solid #e4e7ed;
    position: relative
}

.more-toolbox-new .toolbox-left .profile-attend .profile-subscribe-cont .subscribe-img {
    width: 120px;
    height: 120px;
    display: block
}

.more-toolbox-new .toolbox-left .profile-attend .profile-subscribe-cont .subscribe-img-close {
    width: 17px;
    height: 17px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer
}

.more-toolbox-new .toolbox-left .profile-attend .profile-subscribe-cont .profile-subscribe-box-head {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #222226;
    text-align: center
}

.more-toolbox-new .toolbox-left .profile-attend .profile-subscribe-cont .profile-subscribe-box-head span {
    color: #1eab44
}

.more-toolbox-new .toolbox-left .profile-attend .profile-subscribe-cont .profile-subscribe-box-text {
    text-align: center
}

.more-toolbox-new .toolbox-left .profile-attend a {
    display: block;
    min-width: 60px;
    height: 28px;
    background: #fff;
    border-radius: 16px;
    font-size: 14px;
    line-height: 28px;
    text-align: center
}

.more-toolbox-new .toolbox-left .profile-attend a.tool-bt-attend {
    border: 1px solid #ccccd8;
    color: #555666
}

.more-toolbox-new .toolbox-left .profile-attend a.tool-bt-attend:hover {
    border: 1px solid #555666
}

.more-toolbox-new .toolbox-left .profile-attend a.tool-unbt-attend {
    color: #999aaa;
    border: 1px solid #ccccd8
}

.more-toolbox-new .toolbox-left .profile-attend a.tool-unbt-attend:hover {
    color: #555666;
    border: 1px solid #555666
}

.more-toolbox-new .toolbox-left .profile-attend a.tool-item-follow {
    background: #e33e33;
    color: #fff;
    border: 1px solid #e33e33;
    position: absolute;
    bottom: 4px;
    left: 4px;
    height: 28px;
    line-height: 28px;
    z-index: 10
}

.more-toolbox-new .toolbox-left .profile-attend a.tool-item-follow.active-animation {
    -webkit-animation: myflistdeom .8s 1;
    animation: myflistdeom .8s 1;
    nimation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0, .7, .9, 1);
    animation-timing-function: cubic-bezier(0, .7, .9, 1);
    -webkit-animation-fill-mode: forwards
}

.more-toolbox-new .toolbox-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.more-toolbox-new .toolbox-right .tool-directory {
    padding-left: 16px
}

.more-toolbox-new .toolbox-right .tool-directory a {
    display: block;
    min-width: 74px;
    height: 28px;
    border-radius: 16px;
    color: #555666;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #ccccd8
}

.more-toolbox-new .toolbox-right .tool-directory a:hover {
    border: 1px solid #555666
}

.more-toolbox-new .toolbox-right .tool-column {
    padding-left: 16px
}

.more-toolbox-new .toolbox-right .tool-column .tool-bt-off-shelf {
    width: 130px;
    background: #f7f7fc;
    border-radius: 16px;
    border: 1px solid #ccccd8;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ccccd8;
    padding: 4px 0;
    text-align: center
}

.more-toolbox-new .toolbox-right .tool-column a {
    display: block;
    min-width: 74px;
    height: 28px;
    border-radius: 16px;
    color: #fff;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.more-toolbox-new .toolbox-right .tool-column a.tool-bt-subscribe {
    background: #fc5531
}

.more-toolbox-new .toolbox-right .tool-column a.tool-bt-subscribe:hover {
    background: #fc1944
}

.more-toolbox-new .toolbox-right .tool-column a.tool-unbt-subscribe {
    color: #999aaa;
    border: 1px solid #ccccd8
}

.more-toolbox-new .toolbox-right .tool-column a.tool-unbt-subscribe:hover {
    color: #555666;
    border: 1px solid #555666;
    cursor: default
}

.more-toolbox-new .toolbox-middle {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.more-toolbox-new .toolbox-list {
    margin: -17px 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.more-toolbox-new .tool-item {
    padding: 0 8px;
    height: 64px
}

.more-toolbox-new .tool-item.tool-item-comment {
    position: relative
}

.more-toolbox-new .tool-item.tool-item-comment .guide-rr-first {
    margin-top: -12px;
    margin-left: -4px;
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    z-index: 12
}

.more-toolbox-new .tool-item.tool-item-comment .guide-rr-first img {
    display: block;
    width: 360px;
    height: auto
}

.more-toolbox-new .tool-item.tool-item-comment .guide-rr-first .btn-guide-known {
    position: absolute;
    bottom: 24px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 32px;
    width: 80px;
    background: #fc5531;
    border-radius: 16px;
    border: 1px solid #fc5531;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    font-size: 14px
}

.more-toolbox-new .tool-item.tool-downloadpdf {
    padding: 0
}

.more-toolbox-new .tool-item.tool-downloadpdf .tool-hover-tip {
    left: -30px
}

.more-toolbox-new .tool-item.tool-item-bar {
    width: 1px;
    height: 16px;
    background: #f0f0f2;
    margin: 0 8px;
    padding: 0
}

.more-toolbox-new .tool-item .tool-item-href {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.more-toolbox-new .tool-item .tool-item-href .count {
    color: #999aaa;
    font-size: 14px
}

.more-toolbox-new .tool-item .tool-item-href .count.active {
    color: #fc5531
}

.more-toolbox-new .tool-item .animation-dom {
    position: absolute;
    bottom: 6px
}

.more-toolbox-new .tool-item .animation-dom.active-animation {
    -webkit-animation: myflist .8s 1;
    animation: myflist .8s 1;
    nimation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0, .7, .9, 1);
    animation-timing-function: cubic-bezier(0, .7, .9, 1);
    -webkit-animation-fill-mode: forwards
}

.more-toolbox-new .tool-item .triplet-prompt {
    position: absolute;
    display: none;
    width: 333px;
    height: 40px;
    border-radius: 4px;
    background: #fef7f0;
    border: 1px solid #ffd5a6;
    color: #df760c;
    font-size: 14px;
    line-height: 40px;
    right: 4px;
    padding-left: 8px;
    top: -50px;
    z-index: 2
}

.more-toolbox-new .tool-item .triplet-prompt img.close-prompt {
    display: inline-block;
    margin-left: 8px;
    width: 24px;
    height: 26px;
    vertical-align: middle
}

.more-toolbox-new .tool-item .triplet-prompt img.close-prompt:hover {
    cursor: pointer
}

.more-toolbox-new .tool-item .triplet-prompt:before {
    content: '';
    position: absolute;
    display: block;
    background: #fef7f0;
    border: 1px solid #ffd5a6;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    bottom: -4px;
    right: 30px
}

.more-toolbox-new .tool-item .triplet-prompt:after {
    content: '';
    position: absolute;
    display: block;
    background: #fef7f0;
    width: 12px;
    height: 6px;
    bottom: 0;
    right: 28px
}

.more-toolbox-new .tool-item .jumpimg {
    display: inline-block;
    width: 18px;
    height: 18px;
    padding: 0;
    vertical-align: bottom;
    margin-right: 4px;
    overflow: hidden;
    margin-left: -4px;
    margin-right: 4px
}

.more-toolbox-new .tool-item .jumpimg:first-child {
    margin-left: 16px
}

.more-toolbox-new .tool-item .jumpimg:last-child {
    margin-right: 0
}

.more-toolbox-new .tool-item .jumpimg img {
    width: 18px;
    height: 18px;
    border-radius: 50%
}

.more-toolbox-new .tool-reward {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    cursor: pointer
}

.more-toolbox-new .tool-reward a {
    width: 100%
}

.more-toolbox-new .tool-reward .name {
    vertical-align: top
}

.more-toolbox-new .tool-phong {
    position: relative
}

.more-toolbox-new .tool-QRcode {
    position: relative;
    height: 64px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.more-toolbox-new.more-toolbar .tool-active {
    margin: 0 12px;
    padding: 0
}

.more-toolbox-new.more-toolbar .tool-active>.tool-item-href {
    opacity: .6
}

.more-toolbox-new.more-toolbar .tool-active:hover>.tool-item-href {
    opacity: 1
}

.more-toolbox-new.more-toolbar .tool-active:hover .more-opt-box {
    display: block
}

.more-toolbox-new.more-toolbar .tool-active img {
    margin-right: 2px;
    height: 20px;
    width: 20px
}

.more-toolbox-new.more-toolbar .tool-active .more-opt-box {
    display: none;
    padding: 10px 16px;
    position: absolute;
    top: 0;
    left: 50%;
    background: #fff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%)
}

.more-toolbox-new.more-toolbar .tool-active .more-opt-box::after {
    margin-left: -8px;
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.more-toolbox-new.more-toolbar .tool-active .more-opt-box .mini-box {
    display: none
}

.more-toolbox-new.more-toolbar .tool-active .more-opt-box .normal-box {
    display: block
}

.more-toolbox-new.more-toolbar .tool-active .more-opt-box .tool-item-href {
    margin-top: 12px;
    white-space: nowrap;
    opacity: .6;
    cursor: pointer;
    line-height: 20px
}

.more-toolbox-new.more-toolbar .tool-active .more-opt-box .tool-item-href:hover {
    opacity: 1
}

.more-toolbox-new.more-toolbar .tool-active .more-opt-box .tool-item-href img {
    margin-right: 10px
}

.more-toolbox-new.more-toolbar .tool-active .more-opt-box .tool-item-href:first-child {
    margin-top: 0
}

.more-toolbox-new.more-toolbar .left-toolbox .tool-hover-tip {
    border-radius: 4px
}

.more-toolbox-new .tool-active {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative
}

.more-toolbox-new .tool-active:hover .tool-hover-tip {
    display: block
}

.more-toolbox-new .tool-active:first-child a {
    padding-left: 0
}

.more-toolbox-new .tool-active .QRcode {
    display: none;
    position: absolute;
    top: 8px;
    z-index: 100;
    left: 51px;
    width: 168px;
    max-height: 319px;
    background: #fff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-transform: translate(-100%, -100%);
    transform: translate(-100%, -100%)
}

.more-toolbox-new .tool-active .QRcode .share-code {
    padding-bottom: 16px
}

.more-toolbox-new .tool-active .QRcode .share-code-box {
    margin: 0 auto;
    width: 138px;
    height: 138px;
    padding: 8px;
    background: #fff;
    margin-top: 17px;
    border-radius: 4px;
    border: 1px solid #e0e0e0
}

.more-toolbox-new .tool-active .QRcode .share-code-box img {
    display: block;
    width: 120px;
    height: 120px;
    margin: auto
}

.more-toolbox-new .tool-active .QRcode .share-code-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 14px;
    color: #555666;
    line-height: 20px;
    margin-top: 8px
}

.more-toolbox-new .tool-active .QRcode .share-code-text img {
    margin-right: 8px;
    display: block;
    width: 20px;
    height: 20px
}

.more-toolbox-new .tool-active .QRcode .share-bg-box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.more-toolbox-new .tool-active .QRcode .share-bg-box::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 21px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.more-toolbox-new .tool-active .QRcode .share-bg-box .share-content {
    padding: 10px 16px;
    border-bottom: 1px solid #f3f3f3
}

.more-toolbox-new .tool-active .QRcode .share-bg-box .share-content:first-child {
    border-radius: 4px 4px 0 0
}

.more-toolbox-new .tool-active .QRcode .share-bg-box .share-content:hover {
    background-color: #f5f5fa
}

.more-toolbox-new .tool-active .QRcode .share-bg-box .share-content:hover a.btn-share {
    font-weight: 500;
    color: #000
}

.more-toolbox-new .tool-active .QRcode .share-bg-box .share-content a.btn-share {
    display: block;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 28px;
    font-size: 14px;
    color: #222226;
    line-height: 20px
}

.more-toolbox-new .tool-active .QRcode .share-bg-box .share-content a.btn-share[data-type="link"] {
    background-image: url("../../images/icon-link.png")
}

.more-toolbox-new .tool-active .QRcode .share-bg-box .share-content a.btn-share[data-type="qq"] {
    background-image: url("../../images/icon-qq.png")
}

.more-toolbox-new .tool-active .QRcode .share-bg-box .share-content a.btn-share[data-type="weibo"] {
    background-image: url("../../images/icon-weibo.png")
}

.more-toolbox-new .tool-active .tool-hover-tip,
.more-toolbox-new .tool-active .tool-active-list {
    width: 82px;
    display: none;
    height: 32px;
    background: #fff;
    border: 2px solid #ededef;
    position: absolute;
    color: #222226;
    left: -20px;
    bottom: 64px;
    z-index: 1
}

.more-toolbox-new .tool-active .tool-hover-tip.three-click,
.more-toolbox-new .tool-active .tool-active-list.three-click {
    left: -14px
}

.more-toolbox-new .tool-active .tool-hover-tip .text,
.more-toolbox-new .tool-active .tool-active-list .text {
    display: block;
    position: absolute;
    font-size: 14px;
    text-align: center;
    width: 100%;
    padding: 3px 0;
    z-index: 11
}

.more-toolbox-new .tool-active .tool-hover-tip .text.space,
.more-toolbox-new .tool-active .tool-active-list .text.space {
    letter-spacing: 5px;
    padding: 3px 18px
}

.more-toolbox-new .tool-active .tool-hover-tip:before,
.more-toolbox-new .tool-active .tool-active-list:before {
    display: block;
    border: 2px solid #ededef;
    content: '';
    width: 18px;
    height: 18px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -6px;
    -webkit-box-shadow: 0 2px 4px 0 #f0f0f0;
    box-shadow: 0 2px 4px 0 #f0f0f0;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg)
}

.more-toolbox-new .tool-active .tool-hover-tip:after,
.more-toolbox-new .tool-active .tool-active-list:after {
    display: block;
    content: '';
    width: 40px;
    height: 20px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    z-index: 10
}

.more-toolbox-new .tool-active .tool-hover-tip.collect,
.more-toolbox-new .tool-active .tool-active-list.collect {
    width: unset;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 64px;
    margin-left: -6px
}

.more-toolbox-new .tool-active .tool-hover-tip.collect .collect-operate-box,
.more-toolbox-new .tool-active .tool-active-list.collect .collect-operate-box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    z-index: 11
}

.more-toolbox-new .tool-active .tool-hover-tip.collect .collect-operate-box span.collect-text,
.more-toolbox-new .tool-active .tool-active-list.collect .collect-operate-box span.collect-text {
    padding: 2px 18px;
    display: block;
    white-space: nowrap
}

.more-toolbox-new .tool-active .tool-active-list {
    width: 188px;
    left: -74px;
    z-index: 1
}

.more-toolbox-new .tool-active .tool-active-list .text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.more-toolbox-new .tool-active .tool-active-list span {
    color: #277ccc;
    margin: 0 8px;
    cursor: pointer
}

.more-toolbox-new .tool-active .tool-active-list img {
    margin-right: 0;
    width: 18px;
    height: 18px;
    cursor: pointer
}

.more-toolbox-new .tool-active img {
    width: 24px;
    height: 24px
}

.more-toolbox-new .tool-active img.company {
    width: 40px;
    height: 28px;
    vertical-align: middle
}

.more-toolbox-new .tool-active img.company.active:hover {
    cursor: pointer
}

.more-toolbox-new .tool-active img.company:hover {
    cursor: default
}

.more-toolbox-new .tool-active span.name,
.more-toolbox-new .tool-active span.count {
    font-size: 14px;
    color: #555666
}

.more-toolbox-new .tool-active span.countx {
    margin-top: -8px;
    margin-left: 2px;
    font-size: 12px
}

.more-toolbox-new .tool-active a:hover span {
    color: #fc5531
}

.more-toolbox-new .right-toolbox {
    min-width: 110px;
    text-align: right;
    padding-right: 24px
}

.more-toolbox-new .right-toolbox .tool-mover-ad {
    height: 28px;
    border-radius: 14px;
    background: #fc5531;
    line-height: 28px;
    text-align: center;
    color: #fff;
    padding: 0 10px
}

.more-toolbox-new .right-toolbox .tool-mover-ad:hover {
    background: #fc1944
}

.more-toolbox-new .right-toolbox .tool-mover-ad-mask {
    position: absolute;
    bottom: 52px;
    background: #fef7f0;
    border: 1px solid #ffd5a6;
    padding: 8px 10px;
    padding-right: 30px;
    text-align: start;
    font-size: 14px;
    color: #df760c;
    font-weight: 400;
    right: 34px;
    white-space: nowrap;
    border-radius: 4px;
    z-index: 1
}

.more-toolbox-new .right-toolbox .tool-mover-ad-mask:before {
    content: '';
    position: absolute;
    display: block;
    background: #fef7f0;
    border: 1px solid #ffd5a6;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    bottom: -4px;
    right: 30px
}

.more-toolbox-new .right-toolbox .tool-mover-ad-mask:after {
    content: '';
    position: absolute;
    display: block;
    background: #fef7f0;
    width: 12px;
    height: 6px;
    bottom: 0;
    right: 28px
}

.more-toolbox-new .right-toolbox .tool-mover-ad-mask img {
    position: absolute;
    cursor: pointer;
    top: 7px;
    right: 4px;
    width: 24px;
    height: 24px
}

.more-toolbox-new .right-toolbox .jump-net-article {
    font-size: 14px;
    color: #3399ea;
    line-height: 36px
}

.more-toolbox-new .tool-mover-open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    margin-right: 32px
}

.more-toolbox-new .tool-mover-open span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #5893c2;
    line-height: 20px;
    margin-right: 8px
}

.more-toolbox-new .tool-mover-open img {
    width: 10px;
    height: 5px
}

.more-toolbox-new .tool-item.is-traffic .tool-item-href img.is-traffic-img {
    width: 92px;
    height: auto
}

.more-toolbox-new .tool-item.is-traffic .is-traffic-bubblebox {
    display: none;
    position: absolute;
    top: 16px;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    z-index: 1
}

.more-toolbox-new .tool-item.is-traffic .is-traffic-bubblebox .pos-box {
    position: relative
}

.more-toolbox-new .tool-item.is-traffic .is-traffic-bubblebox .is-traffic-bubble img.traffic-bubble-img {
    display: block;
    width: 314px;
    height: auto
}

.more-toolbox-new .tool-item.is-traffic .is-traffic-bubblebox img.traffic-bubble-closeimg {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50%;
    border: none;
    cursor: pointer
}

.more-toolbox-new .gitcode-guide-box {
    display: none;
    position: relative;
    padding: 1px;
    height: 112px;
    width: calc(100% - 48px);
    margin: 0 24px;
    overflow: hidden;
    border-radius: 4px
}

.more-toolbox-new .gitcode-guide-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: -webkit-gradient(linear, left top, right top, color-stop(20%, #b03ffa), color-stop(40%, #d454aa), color-stop(60%, #ff7a55), color-stop(80%, #f9fbff), to(#3688ef));
    background: linear-gradient(to right, #b03ffa 20%, #d454aa 40%, #ff7a55 60%, #f9fbff 80%, #3688ef 100%);
    border-radius: 4px;
    z-index: 1
}

.more-toolbox-new .gitcode-guide-box .gitcode-content-box {
    padding: 16px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 110px;
    background-color: #17191c;
    border-radius: 4px;
    z-index: 2;
    background-image: url("../../images/bg.png");
    background-size: auto 100%;
    background-position: right top
}

.more-toolbox-new .gitcode-guide-box .gitcode-content-box .title {
    color: #ebf3ff;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px
}

.more-toolbox-new .gitcode-guide-box .gitcode-content-box .desc {
    margin-right: 16px;
    margin-top: 4px;
    color: #999aaa;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.more-toolbox-new .gitcode-guide-box .gitcode-content-box .count {
    margin-top: 8px;
    line-height: 16px
}

.more-toolbox-new .gitcode-guide-box .gitcode-content-box .count .icon {
    padding-left: 18px;
    color: #999aaa;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    background-size: 14px 14px;
    background-position: left center;
    background-repeat: no-repeat
}

.more-toolbox-new .gitcode-guide-box .gitcode-content-box .count .icon.icon-start {
    background-image: url("../../images/line-star.png")
}

.more-toolbox-new .gitcode-guide-box .gitcode-content-box .count .icon.icon-fork {
    margin-left: 16px;
    background-image: url("../../images/line-fork.png")
}

.more-toolbox-new .gitcode-guide-box .gitcode-content-box .left {
    width: 100%;
    overflow: hidden
}

.more-toolbox-new .gitcode-guide-box .gitcode-content-box .right {
    position: relative;
    margin-left: auto;
    width: 150px;
    -ms-flex-line-pack: center;
    align-content: center
}

.more-toolbox-new .gitcode-guide-box .gitcode-content-box .right .easter-egg {
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    height: auto
}

.more-toolbox-new .gitcode-guide-box .gitcode-content-box .right .btn-tocode {
    display: block;
    width: 150px;
    height: auto
}

.is_black_skin .more-toolbox-new.more-toolbar .more-opt-box {
    background: #404041 !important;
    color: #999 !important
}

.is_black_skin .more-toolbox-new.more-toolbar .more-opt-box::after {
    border-top-color: #404041
}

@media screen and (min-width:1550px) and (max-width:1700px) {
    .more-toolbox-new.more-toolbar .tool-item {
        padding: 0;
        margin: 0 8px
    }
}

@media screen and (max-width:1320px) {
    .more-toolbox-new.more-toolbar .tool-item {
        padding: 0;
        margin: 0 8px
    }

    .more-toolbox-new.more-toolbar .tool-active.tool-downloadpdf,
    .more-toolbox-new.more-toolbar .tool-active.tool-item-reward {
        display: none
    }

    .more-toolbox-new.more-toolbar .tool-active .more-opt-box .normal-box {
        display: none
    }

    .more-toolbox-new.more-toolbar .tool-active .more-opt-box .mini-box {
        display: block
    }
}

.reward-box {
    display: none;
    width: 323px;
    position: absolute;
    background: #fff;
    top: 48px;
    left: -115px;
    z-index: 2001;
    padding: 16px 24px 24px 24px;
    background: #fff;
    -webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    border: 1px solid #ddd
}

.reward-box:after {
    position: absolute;
    content: "";
    right: 50%;
    top: 0;
    margin-top: -12px;
    display: block;
    width: 0;
    height: 0;
    border: 6px solid;
    border-color: transparent transparent #fff transparent
}

.reward-box .rewad-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: 30px;
    margin-bottom: 8px;
    position: relative
}

.reward-box .rewad-title span.reward-close {
    position: absolute;
    right: 0;
    top: 9px;
    width: 12px;
    height: 12px
}

.reward-box .rewad-title span.reward-close:hover {
    cursor: pointer
}

.reward-box .rewad-title span.reward-close svg {
    display: block;
    width: 12px;
    height: 12px;
    fill: #787878
}

.reward-box dl {
    overflow: hidden;
    margin-bottom: 22px
}

.reward-box dl dd {
    float: left;
    width: 42px;
    height: 42px
}

.reward-box dl dd a {
    height: 42px !important;
    padding: 0 !important
}

.reward-box dl dd img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%
}

.reward-box dl dt {
    float: left;
    margin-left: 8px;
    width: calc(100% - 50px)
}

.reward-box dl dt .blog-name {
    font-size: 14px;
    font-weight: 500;
    color: #4f4f4f;
    line-height: 21px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.reward-box dl dt .blog-discript {
    font-size: 14px;
    color: #999;
    line-height: 20px
}

.reward-box .change-bt-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 18px
}

.reward-box .change-bt-box .reward-bt {
    width: 50%;
    display: block;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: #999aaa;
    font-size: 16px;
    font-weight: 500
}

.reward-box .change-bt-box .reward-bt:hover {
    cursor: pointer
}

.reward-box .change-bt-box .reward-bt.reward-bt-active {
    color: #fc5531
}

.reward-box .change-bt-box .reward-bt-space {
    width: 1px;
    height: 19px;
    background-color: #f0f0f5
}

.reward-box .money-box {
    overflow: hidden
}

.reward-box .money-box span {
    display: block;
    float: left;
    width: 80px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-bottom: 16px;
    color: #ccc;
    margin-left: 16px;
    text-align: center;
    line-height: 40px
}

.reward-box .money-box span:nth-child(3n+1) {
    margin-left: 0
}

.reward-box .money-box span.choosed {
    border: 1px solid #fc5531;
    color: #fc5531
}

.reward-box .money-box span:hover {
    cursor: pointer;
    border: 1px solid #fc5531;
    color: #fc5531
}

.reward-box .sure-box {
    margin-top: 8px
}

.reward-box .sure-box p.is-have-money {
    overflow: hidden;
    line-height: 36px
}

.reward-box .sure-box p.is-have-money span {
    font-size: 14px;
    color: #fc5531
}

.reward-box .sure-box p.is-have-money a {
    float: right;
    display: inline-block;
    width: 76px;
    height: 36px;
    background: #fc5531;
    border-radius: 18px;
    text-align: center;
    color: #fff
}

.reward-box .sure-box p.is-have-money a:hover {
    background: #fc1944
}

.skin-boxshadow {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9000
}

.reward-tip {
    position: fixed;
    left: 50%;
    bottom: 120px;
    display: inline-block;
    margin-left: -80px;
    padding: 16px;
    background: #515151;
    border-radius: 4px
}

.reward-tip span {
    font-size: 16px;
    color: #fff;
    line-height: 22px;
    margin-left: 4px
}

.reward-success svg {
    fill: #86ca5e !important
}

.reward-error svg {
    fill: #fff !important
}

.reward-popupbox-new {
    display: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 375px;
    max-height: 422px;
    position: fixed;
    background: #fff;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 9001;
    padding: 24px;
    border-radius: 4px
}

.reward-popupbox-new .rewad-title {
    font-size: 18px;
    font-weight: 500;
    color: #222226;
    line-height: 25px;
    position: relative;
    margin-bottom: 16px
}

.reward-popupbox-new .rewad-title span.reward-close {
    position: absolute;
    right: 0;
    top: 6px;
    width: 16px;
    height: 16px
}

.reward-popupbox-new .rewad-title span.reward-close:hover {
    cursor: pointer
}

.reward-popupbox-new .rewad-title span.reward-close img {
    display: block;
    width: 16px;
    height: 16px;
    fill: #e0e0e0
}

.reward-popupbox-new dl.profile-box {
    overflow: hidden
}

.reward-popupbox-new dl.profile-box dd {
    float: left;
    width: 40px;
    height: 40px
}

.reward-popupbox-new dl.profile-box dd a {
    height: 40px !important;
    padding: 0 !important
}

.reward-popupbox-new dl.profile-box dd img {
    width: 40px !important;
    height: 40px !important;
    border: 1px solid #f5f6f7;
    border-radius: 50%
}

.reward-popupbox-new dl.profile-box dt {
    float: left;
    margin-left: 10px;
    width: calc(100% - 50px)
}

.reward-popupbox-new dl.profile-box dt .blog-name {
    font-size: 16px;
    color: #222226;
    line-height: 22px;
    font-weight: 500;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px
}

.reward-popupbox-new dl.profile-box dt .blog-discript {
    font-size: 12px;
    color: #999aaa;
    line-height: 16px;
    height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.reward-popupbox-new .reward-box-new .reward-content {
    margin-top: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 7px 0;
    border-top: 1px solid #f0f0f2;
    border-bottom: 1px solid #f0f0f2
}

.reward-popupbox-new .reward-box-new .reward-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.reward-popupbox-new .reward-box-new .reward-left .reward-href {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-left: -4px
}

.reward-popupbox-new .reward-box-new .reward-left .reward-href:hover {
    cursor: defualt
}

.reward-popupbox-new .reward-box-new .reward-left .reward-href img {
    width: 18px;
    height: 18px;
    border: 1px solid #fff;
    border-radius: 50%
}

.reward-popupbox-new .reward-box-new .reward-right {
    font-size: 14px;
    color: #999aaa;
    line-height: 18px;
    margin-left: 8px
}

.reward-popupbox-new .reward-box-new .reward-right .count {
    color: #555666;
    margin-right: 2px;
    margin-left: 2px
}

.reward-popupbox-new .money-box {
    position: relative;
    height: 120px
}

.reward-popupbox-new .money-box .customize-tip {
    display: none;
    width: 114px;
    height: 32px;
    background: #fff;
    border: 2px solid #ededef;
    font-size: 13px;
    font-weight: 400;
    color: #222226;
    line-height: 16px;
    position: absolute;
    right: -10px;
    bottom: 45px;
    text-align: center;
    line-height: 32px
}

.reward-popupbox-new .money-box .customize-tip:after {
    position: absolute;
    display: block;
    content: '';
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    bottom: -5px;
    right: 0;
    left: 0;
    margin: auto;
    border: 2px solid #ededef;
    z-index: 2
}

.reward-popupbox-new .money-box .customize-tip:before {
    position: absolute;
    display: block;
    content: '';
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    bottom: -2px;
    right: 0;
    left: 0;
    margin: auto;
    background-color: #fff;
    z-index: 3
}

.reward-popupbox-new .money-box .customize-money {
    float: left;
    width: 93px;
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 2px;
    border: 1px solid #e8e8ed;
    margin-top: 24px;
    color: #999aaa;
    margin-left: 24px;
    text-align: center;
    font-size: 16px;
    line-height: 40px
}

.reward-popupbox-new .money-box .customize-money.active {
    border: 1px solid #556;
    font-size: 24px;
    font-weight: 500;
    color: #222226
}

.reward-popupbox-new .money-box .customize-money.active::-webkit-input-placeholder {
    font-size: 18px;
    font-weight: 400
}

.reward-popupbox-new .money-box .customize-money.active:-moz-placeholder {
    font-size: 18px;
    font-weight: 400
}

.reward-popupbox-new .money-box .customize-money.active::-moz-placeholder {
    font-size: 18px;
    font-weight: 400
}

.reward-popupbox-new .money-box .customize-money.active:-ms-input-placeholder {
    font-size: 18px;
    font-weight: 400
}

.reward-popupbox-new .money-box span {
    display: block;
    float: left;
    width: 93px;
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 2px;
    border: 1px solid #e8e8ed;
    margin-top: 24px;
    color: #999aaa;
    margin-left: 24px;
    text-align: center;
    font-size: 18px;
    line-height: 40px;
    font-family: PingFangSC-Medium, PingFang SC
}

.reward-popupbox-new .money-box span:nth-child(1),
.reward-popupbox-new .money-box span:nth-child(2),
.reward-popupbox-new .money-box span:nth-child(3) {
    margin-top: 16px
}

.reward-popupbox-new .money-box span:nth-child(3n+1) {
    margin-left: 0
}

.reward-popupbox-new .money-box span.choosed {
    border: 1px solid #556;
    font-size: 24px;
    font-weight: 500;
    color: #222226
}

.reward-popupbox-new .money-box span:hover {
    cursor: pointer;
    border: 1px solid #556;
    color: #fc5531;
    font-size: 24px;
    font-weight: 500;
    color: #222226
}

.reward-popupbox-new .pay-box {
    margin-top: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.reward-popupbox-new .pay-box .pay-type {
    font-size: 14px;
    line-height: 20px
}

.reward-popupbox-new .pay-box .pay-type:hover {
    cursor: pointer
}

.reward-popupbox-new .pay-box .pay-type.pay-type-blance {
    width: 220px
}

.reward-popupbox-new .pay-box .pay-type.pay-type-money {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.reward-popupbox-new .pay-box .pay-type.active img.choose {
    display: inline-block
}

.reward-popupbox-new .pay-box .pay-type.active img.unchoose {
    display: none
}

.reward-popupbox-new .pay-box .pay-type img {
    display: none;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: -3px
}

.reward-popupbox-new .pay-box .pay-type img.choose {
    display: none
}

.reward-popupbox-new .pay-box .pay-type img.unchoose {
    display: inline-block
}

.reward-popupbox-new .pay-box .pay-type .pay-type-name {
    color: #222226
}

.reward-popupbox-new .pay-box .pay-type .pay-type-num {
    color: #999aaa
}

.reward-popupbox-new .sure-box .sure-box-blance {
    padding-top: 16px;
    height: 128px;
    position: relative
}

.reward-popupbox-new .sure-box .sure-box-blance.active p.tip {
    display: block
}

.reward-popupbox-new .sure-box .sure-box-blance.active p.is-have-money a {
    background: #ffbaab
}

.reward-popupbox-new .sure-box .sure-box-blance.active p.is-have-money a:hover {
    cursor: default
}

.reward-popupbox-new .sure-box .sure-box-blance p.tip {
    font-size: 14px;
    color: #fc1944;
    line-height: 20px;
    height: 20px;
    display: none
}

.reward-popupbox-new .sure-box .sure-box-blance p.tip .go-invest {
    color: #277ccc;
    margin-left: 4px
}

.reward-popupbox-new .sure-box .sure-box-blance p.is-have-money {
    overflow: hidden;
    line-height: 36px;
    position: absolute;
    right: 0;
    bottom: 0
}

.reward-popupbox-new .sure-box .sure-box-blance p.is-have-money a {
    float: right;
    display: inline-block;
    width: 96px;
    height: 32px;
    background: #fc5531;
    border-radius: 18px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 32px;
    color: #fff
}

.reward-popupbox-new .sure-box .sure-box-money {
    display: none;
    padding-top: 24px
}

.reward-popupbox-new .sure-box .sure-box-money .code-box {
    border-top: 1px solid #f0f0f2;
    padding-top: 16px
}

.reward-popupbox-new .sure-box .sure-box-money .code-num-box {
    text-align: center;
    line-height: 25px;
    font-size: 18px;
    margin-bottom: 16px
}

.reward-popupbox-new .sure-box .sure-box-money .code-num-box .code-name {
    color: #222226;
    font-weight: 500
}

.reward-popupbox-new .sure-box .sure-box-money .code-num-box .code-num {
    color: #fc5531
}

.reward-popupbox-new .sure-box .sure-box-money .code-img-box {
    width: 120px;
    height: 120px;
    overflow: hidden;
    margin: auto;
    margin-bottom: 8px
}

.reward-popupbox-new .sure-box .sure-box-money .code-img-box img {
    width: 120px;
    height: 120px
}

.reward-popupbox-new .sure-box .sure-box-money .code-img-box .renovate {
    width: 120px;
    height: 120px;
    background: #666;
    text-align: center;
    padding-top: 22px
}

.reward-popupbox-new .sure-box .sure-box-money .code-img-box .renovate:hover {
    cursor: pointer
}

.reward-popupbox-new .sure-box .sure-box-money .code-img-box .renovate img {
    display: block;
    width: 28px;
    height: 28px;
    margin: auto;
    margin-bottom: 12px
}

.reward-popupbox-new .sure-box .sure-box-money .code-img-box .renovate span {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 21px
}

.reward-popupbox-new .sure-box .sure-box-money .code-pay-box {
    text-align: center
}

.reward-popupbox-new .sure-box .sure-box-money .code-pay-box img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    vertical-align: sub
}

.reward-popupbox-new .sure-box .sure-box-money .code-pay-box span {
    font-size: 14px;
    color: #555666;
    line-height: 20px
}

#directory .group_item {
    max-height: 485px
}

.groupfile {
    width: 300px;
    background-color: #fff;
    margin-bottom: 0;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden
}

.groupfile .aside-title {
    margin-bottom: 8px
}

.groupfile .group_item {
    overflow: auto;
    margin-bottom: 16px;
    margin-right: 2px;
    scrollbar-width: thin
}

.groupfile .group_item::-webkit-scrollbar {
    width: 3px;
    height: 100px
}

.groupfile .group_item::-webkit-scrollbar-thumb {
    background-color: rgba(153, 154, 170, 0.3);
    border-radius: 2px
}

.groupfile .pos-box {
    position: relative
}

.groupfile .pos-box .scroll-box .toc-box {
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.groupfile .pos-box .scroll-box .toc-box ol li {
    margin-top: 12px
}

.groupfile .pos-box .scroll-box .toc-box ol li a {
    display: block;
    width: 100%;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    white-space: nowrap;
    height: 24px;
    line-height: 24px
}

.groupfile .pos-box .scroll-box .toc-box>ol>li:first-child>a {
    height: 24px;
    line-height: 24px
}

.groupfile .pos-box .scroll-box .toc-box>ol li.active {
    background-color: #f0f0f5
}

.groupfile .pos-box .scroll-box .toc-box>ol li.active>a {
    color: #fc5531 !important
}

.groupfile .pos-box .scroll-box .toc-box>ol>li:hover:not(.sub-box) {
    background-color: #f0f0f5
}

.groupfile .pos-box .scroll-box .toc-box>ol>li:hover:not(.sub-box)>a {
    color: #fc5531
}

.groupfile .pos-box .scroll-box .toc-box>ol>li.sub-box>ol>li:hover:not(.sub-box) {
    background-color: #f0f0f5
}

.groupfile .pos-box .scroll-box .toc-box>ol>li.sub-box>ol>li:hover:not(.sub-box)>a {
    color: #fc5531
}

.groupfile .pos-box .scroll-box .toc-box>ol>li.sub-box>ol>li.sub-box>ol>li:hover:not(.sub-box) {
    background-color: #f0f0f5
}

.groupfile .pos-box .scroll-box .toc-box>ol>li.sub-box>ol>li.sub-box>ol>li:hover:not(.sub-box)>a {
    color: #fc5531
}

.groupfile .pos-box .scroll-box .toc-box>ol>li.sub-box>ol>li:first-child {
    margin-top: 0
}

.groupfile .pos-box .scroll-box .toc-box>ol>li.sub-box>ol>li.sub-box>ol>li:first-child {
    margin-top: 0
}

.groupfile .pos-box .scroll-box .toc-box>ol>li>a {
    padding: 0 16px;
    color: #2d2e2f;
    font-weight: 500
}

.groupfile .pos-box .scroll-box .toc-box>ol>li.sub-box ol li a {
    color: #555666;
    padding: 0 16px 0 40px
}

.groupfile .pos-box .scroll-box .toc-box>ol>li.sub-box ol li.sub-box a {
    color: #555666;
    padding: 0 16px 0 64px
}

#directory.groupfile-active,
#groupfile.groupfile-active {
    position: relative
}

#directory.groupfile-active .toc-box li,
#groupfile.groupfile-active .toc-box li {
    margin-top: 2px
}

#directory.groupfile-active .toc-box li a,
#groupfile.groupfile-active .toc-box li a {
    height: 34px;
    line-height: 34px
}

#directory.groupfile-active .groupfile-div .group_item,
#groupfile.groupfile-active .groupfile-div .group_item {
    max-height: 117px;
    overflow: hidden
}

#directory.groupfile-active .group_item,
#groupfile.groupfile-active .group_item {
    max-height: 446px;
    overflow: auto;
    margin-bottom: 0
}

#directory.groupfile-active .align-items-stretch,
#groupfile.groupfile-active .align-items-stretch {
    scrollbar-width: thin;
    scrollbar-color: #999aaa transparent
}

#directory.groupfile-active .align-items-stretch::-webkit-scrollbar,
#groupfile.groupfile-active .align-items-stretch::-webkit-scrollbar {
    width: 6px;
    background-color: transparent
}

#directory.groupfile-active .align-items-stretch::-webkit-scrollbar-thumb,
#groupfile.groupfile-active .align-items-stretch::-webkit-scrollbar-thumb {
    background-color: #999aaa;
    border-radius: 3px
}

#directory.groupfile-active .align-items-stretch::-webkit-scrollbar-track,
#groupfile.groupfile-active .align-items-stretch::-webkit-scrollbar-track {
    background-color: transparent
}

#directory.groupfile-active .flexible-btn-new,
#groupfile.groupfile-active .flexible-btn-new {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: linear-gradient(19.15deg, #fff 12.82%, rgba(255, 255, 255, 0.8) 87.18%);
    color: #666;
    cursor: pointer
}

#directory.groupfile-active .flexible-btn-new.active,
#groupfile.groupfile-active .flexible-btn-new.active {
    display: none
}

#directory.groupfile-active .flexible-btn-new img,
#groupfile.groupfile-active .flexible-btn-new img {
    width: 16px;
    height: 16px;
    vertical-align: middle
}

#directory.groupfile-active .flexible-btn-new-close,
#groupfile.groupfile-active .flexible-btn-new-close {
    display: block;
    cursor: pointer;
    width: 100%;
    height: 36px;
    text-align: center;
    line-height: 36px;
    background: #fff;
    display: none
}

#directory.groupfile-active .flexible-btn-new-close.active,
#groupfile.groupfile-active .flexible-btn-new-close.active {
    display: block
}

#directory.groupfile-active .flexible-btn-new-close.close,
#groupfile.groupfile-active .flexible-btn-new-close.close {
    display: none
}

#directory.groupfile-active .flexible-btn-new-close img,
#groupfile.groupfile-active .flexible-btn-new-close img {
    width: 16px;
    height: 16px;
    vertical-align: middle
}

.gitcode-qc-right-box,
.gitcode-qc-left-box {
    max-height: 320px;
    margin-bottom: 8px;
    overflow: hidden
}

.blogger-info-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 16px;
    border: 1px solid #e9e9e9;
    background-color: #f7f7fc;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.blogger-info-card .card-lt {
    width: 58px;
    height: 58px;
    margin-right: 16px;
    -ms-flex-item-align: start;
    align-self: flex-start;
    border: 1px solid #e7e7e7;
    border-radius: 100%;
    overflow: hidden
}

.blogger-info-card .card-lt img {
    width: 100%;
    height: 100%;
    cursor: pointer
}

.blogger-info-card .card-rt {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.blogger-info-card .card-rt .wap-icon {
    position: relative;
    top: 3px
}

.blogger-info-card .card-rt .wap-icon .bubble {
    display: none;
    width: 134px;
    position: absolute;
    top: 28px;
    left: -60px;
    z-index: 9;
    padding: 8px 6px;
    line-height: 12px;
    text-align: center;
    background-color: rgba(15, 15, 15, 0.8);
    font-size: 12px;
    border-radius: 4px;
    color: #fff
}

.blogger-info-card .card-rt .wap-icon .bubble:before {
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 7px;
    border-color: transparent transparent rgba(15, 15, 15, 0.8);
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -7px
}

.blogger-info-card .card-rt .icon-two:hover .bubble {
    display: block
}

.blogger-info-card .card-rt .card-rt-header {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.blogger-info-card .card-rt .card-rt-header .nick-name {
    color: #bb9444;
    font-size: 14px;
    margin-right: 4px
}

.blogger-info-card .card-rt .card-rt-header img {
    height: 20px;
    overflow: hidden
}

.blogger-info-card .card-rt .card-rt-header .space {
    width: 14px
}

.blogger-info-card .card-rt .card-rt-header .tag {
    color: #555666;
    font-size: 12px;
    font-style: normal;
    padding: 0 4px;
    margin-right: 8px;
    border: 1px solid #c8c8cd;
    border-radius: 3px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.blogger-info-card .card-rt .card-rt-header .btn-edit {
    position: absolute;
    top: 0;
    right: 0;
    color: #e33e33;
    font-size: 12px;
    padding: 0 8px;
    border: 1px solid #fcecea;
    border-radius: 4px;
    background-color: #fcecea
}

.blogger-info-card .card-rt .card-rt-body {
    color: #555666;
    font-size: 14px;
    margin-top: 8px;
    word-wrap: break-word !important;
    word-break: break-all !important
}

.over-the-screen {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    display: none
}

.over-the-screen .over-the-screen-box {
    width: 467px;
    height: 317px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto
}

.over-the-screen .over-the-screen-box .over-the-screen-img {
    width: 467px;
    height: 317px;
    border-radius: 4px;
    overflow: hidden
}

.over-the-screen .over-the-screen-box .over-the-screen-close {
    display: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    position: absolute;
    right: -48px;
    top: -48px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 10
}

.over-the-screen .over-the-screen-box .over-the-screen-close img {
    width: 100%
}

#articleContentAd {
    width: 100%;
    background: #fbfbfb;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    padding: 16px 24px 20px 24px;
    margin-bottom: 16px;
    overflow: hidden
}

#articleContentAd .ad-top {
    padding-bottom: 6px;
    border-bottom: 1px solid #979797;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-bottom: 16px
}

#articleContentAd .ad-top .ad-top-tit .ad-top-topic {
    font-size: 24px;
    color: #3e3e3e;
    line-height: 35px;
    font-weight: 500
}

#articleContentAd .ad-top .ad-top-tit .ad-top-type {
    font-size: 24px;
    color: #949494;
    line-height: 35px;
    font-weight: 500
}

#articleContentAd .ad-top .ad-top-tit .ad-top-num {
    margin-left: 16px;
    font-size: 20px;
    color: #fc5531;
    line-height: 35px;
    font-weight: 500
}

#articleContentAd .ad-top .ad-top-tag {
    min-width: 180px;
    text-align: right
}

#articleContentAd .ad-top .ad-top-tag .ad-top-count {
    font-size: 20px;
    color: #949494;
    text-align: right;
    font-weight: 700
}

#articleContentAd .ad-top .ad-top-tag .ad-top-text {
    font-size: 20px;
    color: #949494;
    text-align: right;
    font-weight: 700
}

#articleContentAd .ad-con .ad-con-tit {
    font-size: 16px;
    color: #8a8a8a;
    font-weight: 500;
    margin-bottom: 4px;
    line-height: 24px
}

#articleContentAd .ad-con .ad-con-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

#articleContentAd .ad-con .ad-con-box .ad-con-txt {
    margin-right: 56px;
    font-size: 14px;
    color: #000;
    font-weight: 400;
    text-align: justify;
    line-height: 20px
}

#articleContentAd .ad-con .ad-con-box .ad-con-go {
    background-image: linear-gradient(91deg, #ffba40 4%, #ff503e 39%, #ff2f50 82%, #ff1b40 100%);
    border-radius: 20px;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    min-width: 136px;
    text-align: center;
    padding: 4px 0
}

.articleConDownSource {
    background: #f5f6f7;
    border-radius: 2px;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #f5f6f7;
    margin-top: 8px;
    margin-bottom: 8px
}

.articleConDownSource:hover {
    border: 1px solid #e8e8ed
}

.articleConDownSource:hover .card-left-t {
    font-weight: 500
}

.articleConDownSource a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.articleConDownSource a .card-left {
    width: 100%;
    overflow: hidden
}

.articleConDownSource a .card-left .card-left-t {
    width: 100%;
    font-size: 16px;
    color: #555666;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.articleConDownSource a .card-left .card-left-b {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-top: 6px;
    height: 20px
}

.articleConDownSource a .card-left .card-left-b .classfiy {
    display: block;
    width: 41px;
    height: 20px;
    background: #e8e8ed;
    color: #999aaa;
    border-radius: 2px;
    text-align: center;
    line-height: 20px;
    margin-right: 8px;
    font-size: 12px
}

.articleConDownSource a .card-left .card-left-b .star {
    width: 13px;
    height: 13px;
    margin-right: 4px;
    cursor: pointer !important
}

.articleConDownSource a .card-left .card-left-b .text {
    font-size: 12px;
    font-weight: 400;
    color: #999aaa;
    line-height: 20px
}

.articleConDownSource a .card-left .card-left-b .circle {
    background: #999aaa;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    margin: 0 4px;
    vertical-align: middle
}

.articleConDownSource a .card-right {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-left: 16px
}

.articleConDownSource a .card-right .card-right-t {
    margin-bottom: 6px
}

.articleConDownSource a .card-right .card-right-t img {
    display: block;
    width: 16px;
    height: 16px;
    margin: auto;
    cursor: pointer !important
}

.articleConDownSource a .card-right .card-right-b {
    font-size: 14px;
    color: #999aaa;
    line-height: 20px;
    text-align: center
}

.side-search-box {
    position: absolute;
    background: #616161;
    right: 56px;
    top: -2px;
    padding: 10px 16px;
    display: none;
    border-radius: 4px
}

.side-search-box:after {
    background: #616161;
    position: absolute;
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    right: -4px;
    top: 18px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg)
}

.side-search-box .side-search-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 260px;
    color: #fff;
    line-height: 28px
}

.side-search-box .side-search-content span {
    display: block
}

.side-search-box .side-search-content span.search-txt {
    font-size: 16px
}

.side-search-box .side-search-content span.search-txt:hover {
    cursor: text
}

.side-search-box .side-search-content span.search-bt {
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #4e4e4e;
    text-align: center
}

.side-search-box .side-search-content span.search-bt:hover {
    cursor: pointer
}

.side-search-box .side-search-content span.search-bt.yes {
    color: #267dcc
}

.side-question-box {
    position: absolute;
    display: none;
    width: 388px;
    height: 214px;
    background: #fff;
    -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    left: -398px;
    text-align: left
}

.side-question-box:hover {
    cursor: text
}

.side-question-box:after {
    background: #fff;
    position: absolute;
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    right: -6px;
    top: 100px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg)
}

.side-question-box .side-question-content {
    padding: 16px 16px 20px 16px;
    position: relative;
    z-index: 1
}

.side-question-box .side-question-content .question-tit {
    height: 28px;
    font-size: 20px;
    font-weight: 600;
    color: #222226;
    line-height: 28px;
    margin-bottom: 12px
}

.side-question-box .side-question-content .question-txt {
    height: 52px;
    font-size: 17px;
    color: #555666;
    line-height: 26px;
    margin-bottom: 18px
}

.side-question-box .side-question-content .color {
    color: #fc5531;
    font-weight: 500
}

.side-question-box .side-question-content .question-bt {
    display: block;
    width: 108px;
    height: 32px;
    background: #fc5531;
    border-radius: 2px;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    color: #fff;
    line-height: 32px
}

.side-question-box .side-question-content .question-bt:hover {
    cursor: pointer;
    background: #fc1944
}

.side-question-box .side-question-bg {
    width: 124px !important;
    height: 134px;
    position: absolute;
    top: 24px;
    right: 16px
}

.side-question-box .side-question-close {
    width: 16px !important;
    height: 16px;
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 2
}

.side-question-box .side-question-close:hover {
    cursor: pointer
}

.side-question-box .question-tip-box {
    border-top: 1px solid #f8f8f8;
    padding: 8px 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    height: 33px
}

.side-question-box .question-tip-box .question-tip-content {
    overflow: hidden
}

.side-question-box .question-tip-box .question-tip-img {
    width: 16px;
    height: 11px;
    margin-right: 2px
}

.side-question-box .question-tip-box .question-tip-txt {
    font-size: 13px;
    font-weight: 400;
    color: #999aaa;
    line-height: 16px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.side-question-box .question-tip-box .question-tip-txt .question {
    color: #555666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.side-question-box .question-tip-box .question-tip-txt .time {
    min-width: 60px
}

.side-question-box .question-tip-box .question-tip-txt .name {
    min-width: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 2px
}

.side-question-box .question-tip-box .question-tip-txt .text {
    min-width: 72px
}

.icon-option-beta {
    width: 26px !important;
    height: 12px;
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 10
}

.csdn-side-toolbar {
    z-index: 1000 !important
}

.directory-boxshadow {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9001
}

.forbidden-htmlbody-scroll {
    overflow: hidden
}

.column-info-container {
    height: 874px
}

.column-info-container .columnlist-box {
    position: relative;
    width: 300px;
    z-index: 1
}

.column-info-container .columnlist-box .columnlist-content-box {
    padding: 20px 16px;
    width: 300px
}

.column-info-container .columnlist-box .columnlist-content-box .columnlist-head {
    margin-bottom: 12px
}

.column-info-container .columnlist-box .columnlist-content-box .columnlist-con {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f0f0
}

.column-info-container .columnlist-box .columnlist-content-box .columnlist-con .rank {
    margin-bottom: 12px;
    display: inline-block;
    background: #fff4e5;
    border-radius: 2px;
    font-size: 12px;
    color: #823708;
    vertical-align: top;
    line-height: 16px;
    padding-right: 4px
}

.column-info-container .columnlist-box .columnlist-content-box .columnlist-con .rank img {
    width: 19px;
    height: 16px;
    border-radius: 2px 0 8px 2px;
    margin-right: 4px;
    vertical-align: top
}

.column-info-container .columnlist-box .columnlist-content-box .columnlist-con .columnlist-con-desc {
    line-height: 22px;
    color: #555666;
    max-height: 88px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical
}

.column-info-container .columnlist-box .columnlist-content-box .columnlist-con .columnlist-con-bt {
    margin-top: 16px
}

.column-info-container .columnlist-box .columnlist-content-box .columnlist-con .columnlist-con-bt .columnlist-con-btn {
    margin-left: 0
}

.column-info-container .columnlist-box .columnlist-content-box .columnlist-list .columnlist-list-box {
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: auto !important
}

.column-info-container .columnlist-box .columnlist-content-box .columnlist-list .columnlist-list-box::-webkit-scrollbar {
    width: 3px
}

.column-info-container .columnlist-box .columnlist-content-box .columnlist-list .columnlist-list-box::-webkit-scrollbar-thumb {
    width: 3px;
    height: 60px;
    background-color: #555666;
    border-radius: 2px
}

.column-info-container .columnlist-box .columnlist-content-box .columnlist-list .columnlist-list-item .columnlist-list-href {
    margin-bottom: 12px
}

.column-info-container .columnlist-box .columnlist-content-box .columnlist-list .columnlist-list-item .columnlist-list-href .text {
    color: #555666
}

.columnlist-box {
    z-index: 9002;
    background: #fff;
    width: 0;
    -webkit-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out;
    overflow: hidden;
    position: fixed;
    float: right;
    height: 100%;
    right: 0;
    top: 0;
    bottom: 0
}

.columnlist-box.open {
    width: 380px
}

.columnlist-box .columnlist-content-box {
    padding: 40px 24px;
    width: 380px
}

.columnlist-box .columnlist-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px
}

.columnlist-box .columnlist-head .columnlist-head-l {
    min-width: 72px
}

.columnlist-box .columnlist-head .columnlist-head-l .columnlist-head-img {
    width: 64px;
    height: 64px;
    border-radius: 2px;
    border: 1px solid #f5f6f7
}

.columnlist-box .columnlist-head .columnlist-head-r {
    width: 100%;
    height: 64px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.columnlist-box .columnlist-head .columnlist-head-r .columnlist-head-tit {
    width: 100%;
    -ms-flex-item-align: start;
    align-self: flex-start
}

.columnlist-box .columnlist-head .columnlist-head-r .columnlist-head-tit a {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #222226;
    line-height: 22px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.columnlist-box .columnlist-head .columnlist-head-r .columnlist-head-con {
    width: 100%;
    -ms-flex-item-align: end;
    align-self: flex-end;
    font-size: 14px;
    color: #999aaa;
    line-height: 20px;
    text-align: left
}

.columnlist-box .columnlist-head .columnlist-head-r .columnlist-head-con span {
    margin-right: 16px
}

.columnlist-box .columnlist-con {
    margin-bottom: 32px
}

.columnlist-box .columnlist-con .columnlist-con-autor {
    font-size: 14px;
    color: #999aaa;
    line-height: 20px;
    margin-bottom: 16px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.columnlist-box .columnlist-con .columnlist-con-price {
    font-size: 18px;
    font-weight: 600;
    color: #fc5531;
    line-height: 25px;
    margin-bottom: 12px
}

.columnlist-box .columnlist-con .columnlist-con-bt {
    margin-top: 8px
}

.columnlist-box .columnlist-con .columnlist-con-bt .article-column-off-shelf {
    width: 143px;
    display: inline-block;
    text-align: center;
    margin-left: 8px;
    height: 28px;
    background: #f7f7fc;
    border-radius: 16px;
    border: 1px solid #ccccd8;
    font-size: 14px;
    font-weight: 500;
    color: #ccccd8;
    line-height: 29px;
    cursor: default
}

.columnlist-box .columnlist-con .columnlist-con-bt .columnlist-con-btn {
    display: inline-block;
    width: 88px;
    height: 30px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #ccccd8;
    color: #555666;
    font-size: 14px;
    line-height: 30px;
    margin-left: 8px;
    text-align: center
}

.columnlist-box .columnlist-con .columnlist-con-bt .columnlist-con-btn:hover {
    cursor: default;
    border: 1px solid #555666
}

.columnlist-box .columnlist-con .columnlist-con-bt .columnlist-con-btn.columnlist-con-look {
    margin-left: 0
}

.columnlist-box .columnlist-con .columnlist-con-bt .columnlist-con-btn.columnlist-con-look:hover {
    cursor: pointer
}

.columnlist-box .columnlist-con .columnlist-con-bt .columnlist-con-btn.article-column-subscribe {
    color: #999aaa
}

.columnlist-box .columnlist-con .columnlist-con-bt .columnlist-con-btn.article-column-subscribe:hover {
    border: 1px solid #ccccd8
}

.columnlist-box .columnlist-con .columnlist-con-bt .columnlist-con-btn.columnlist-con-subscribe {
    background: #fc5531;
    border: none;
    color: #fff
}

.columnlist-box .columnlist-con .columnlist-con-bt .columnlist-con-btn.columnlist-con-subscribe:hover {
    background: #fc1944;
    cursor: pointer
}

.columnlist-box .columnlist-con .columnlist-con-bt .column_studyvip_free-active {
    display: inline-block;
    position: absolute;
    top: -18px;
    right: 0;
    width: 76px;
    height: 24px;
    background: #fc1944;
    border-radius: 12px 12px 12px 0;
    border: 1px solid #fff;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 24px;
    background: #fc1944;
    color: #fff;
    text-align: center
}

.columnlist-box .columnlist-con .columnlist-con-bt .column-studyvip-free {
    display: inline-block;
    min-width: 138px;
    height: 30px;
    background: #fae8d0;
    border-radius: 23px;
    border: 1px solid #eed3ab;
    font-size: 14px;
    color: #69421b;
    text-align: center;
    line-height: 30px;
    margin-left: 4px;
    position: relative
}

.columnlist-box .columnlist-con .columnlist-con-bt .column-studyvip-free:hover {
    cursor: pointer;
    background: #f8c883
}

.columnlist-box .columnlist-con .columnlist-con-bt .column-studyvip-discount {
    display: inline-block;
    min-width: 83px;
    position: relative;
    margin-left: 12px;
    height: 30px;
    background: #4c4c4c;
    border-radius: 23px;
    font-size: 14px;
    text-align: center;
    color: #ffcd66;
    line-height: 30px;
    margin-left: 8px
}

.columnlist-box .columnlist-con .columnlist-con-bt .column-studyvip-discount:hover {
    cursor: pointer;
    background: #555666
}

.columnlist-box .columnlist-con .columnlist-con-bt .column-studyvip-icon {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 4px
}

.columnlist-box .columnlist-list .columnlist-list-box {
    overflow: auto;
    height: 300px;
    -webkit-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
    scrollbar-width: none
}

.columnlist-box .columnlist-list .columnlist-list-box::-webkit-scrollbar {
    width: 0
}

.columnlist-box .columnlist-list .columnlist-list-box::-webkit-scrollbar-thumb {
    background-color: rgba(153, 154, 170, 0.3)
}

.columnlist-box .columnlist-list .look-more-article {
    text-align: center;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #999aaa;
    border-radius: 2px;
    margin-top: 32px
}

.columnlist-box .columnlist-list .look-more-article .look-more-img {
    vertical-align: -5px;
    width: 14px;
    height: 20px
}

.columnlist-box .columnlist-list .look-more-article.active {
    color: #222226;
    background: #f5f6f7
}

.columnlist-box .columnlist-list .look-more-article.active:hover {
    cursor: pointer
}

.columnlist-box .columnlist-list .columnlist-list-tit {
    font-size: 16px;
    font-weight: 500;
    color: #222226;
    line-height: 22px;
    margin-bottom: 16px
}

.columnlist-box .columnlist-list .columnlist-list-item:last-child .columnlist-list-href {
    margin-bottom: 0
}

.columnlist-box .columnlist-list .columnlist-list-item .columnlist-list-href {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 18px
}

.columnlist-box .columnlist-list .columnlist-list-item .columnlist-list-href:hover .text {
    color: #fc5531
}

.columnlist-box .columnlist-list .columnlist-list-item .columnlist-list-href .text {
    font-size: 14px;
    color: #222226;
    line-height: 22px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left
}

.columnlist-box .columnlist-list .columnlist-list-item .columnlist-list-href .text.active {
    color: #fc5531
}

.columnlist-box .columnlist-list .columnlist-list-item .columnlist-list-href .try-read {
    display: block;
    width: 36px;
    height: 18px;
    color: #fc5531;
    background: #ffeee9;
    border-radius: 2px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    margin-left: 8px
}

.columnlist-box .columnlist-close {
    position: absolute;
    right: 24px;
    top: 16px;
    width: 14px;
    height: 14px;
    overflow: hidden
}

.columnlist-box .columnlist-close:hover {
    cursor: pointer
}

.columnlist-box .columnlist-close img {
    width: 14px;
    height: 14px;
    vertical-align: 2px
}

.annotation-boxshadow {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9001
}

.annotation-boxshadow .annotation-content {
    position: absolute;
    width: 800px;
    height: 554px;
    left: 50%;
    top: 50%;
    border-radius: 8px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: url("../../images/annotation-back.png") no-repeat;
    padding: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.annotation-boxshadow .annotation-content .annotation-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 14px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.annotation-boxshadow .annotation-content .annotation-header .text {
    color: #222226;
    font-size: 18px
}

.annotation-boxshadow .annotation-content .annotation-header p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #555666;
    font-size: 14px;
    margin-left: 24px
}

.annotation-boxshadow .annotation-content .annotation-header p span {
    padding: 0 4px;
    color: #fc5531
}

.annotation-boxshadow .annotation-content .i-ai-code-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 12px
}

.annotation-boxshadow .annotation-content .i-ai-code-bottom .annotation-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #ccccd8;
    background: #fff;
    width: 54px;
    height: 26px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.annotation-boxshadow .annotation-content .i-ai-code-bottom .annotation-btn.active {
    color: #fc5531
}

.annotation-boxshadow .annotation-content .i-ai-code-bottom .annotation-btn:hover {
    border-color: #999aaa
}

.annotation-boxshadow .annotation-content .i-ai-code-bottom .annotation-btn img {
    width: 16px;
    height: 16px;
    margin-right: 4px
}

.annotation-boxshadow .annotation-content .annotation-close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 16px;
    cursor: pointer
}

#content_views .hl {
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer
}

#content_views .hl-1 {
    margin-right: 3px;
    padding-right: 14px;
    color: #fc5531;
    background: transparent;
    background-image: url("../../images/iconHighlight.svg");
    background-repeat: no-repeat;
    background-size: 12px 14px;
    background-position: right top;
    -webkit-box-shadow: none;
    box-shadow: none
}

#content_views .doubao-hl {
    color: #4ea1db !important;
    -webkit-box-shadow: none;
    box-shadow: none
}

#content_views .hl-git-1 {
    cursor: pointer;
    color: #4ea1db !important;
    margin-right: 3px;
    padding-right: 18px;
    background: transparent;
    background-image: url("../../images/gitcode-key.png");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: right center;
    -webkit-box-shadow: none;
    box-shadow: none
}

#content_views .hl-git-1:hover {
    color: #fc5531 !important;
    background-image: url("../../images/gitcode-key-active.png");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: right center
}

#content_views .hl-2 {
    color: #000;
    background: #b4ff00
}

#content_views .hl-3 {
    color: #fff;
    background: #fc11ff
}

#content_views .hl-4 {
    color: #000;
    background: #ff0
}

#content_views .hl-5 {
    color: #000;
    background: #ffc600
}

#content_views .hl-6 {
    color: #fff;
    background: #f00
}

body .keyword-dec-box {
    width: 360px;
    display: none;
    -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    border: 1px solid #e8e8ed;
    position: absolute;
    left: 0;
    top: 0;
    padding: 16px;
    background: #fff;
    z-index: 11
}

body .keyword-dec-box span {
    display: block
}

body .keyword-dec-box span.tit {
    font-size: 16px;
    line-height: 24px;
    color: #222226;
    font-weight: 500
}

body .keyword-dec-box span.dec {
    font-size: 14px;
    line-height: 22px;
    margin-top: 10px;
    color: #222226
}

#git-hub-box-bt {
    display: none;
    position: absolute;
    z-index: 1000;
    cursor: pointer;
    text-align: left;
    width: 440px;
    height: 222px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #dae0e5;
    padding: 20px
}

#git-hub-box-bt .git-hub-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid #dae0e5;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 20px
}

#git-hub-box-bt .git-hub-top .git-hub-info p {
    margin: 0
}

#git-hub-box-bt .git-hub-top .git-hub-info .info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

#git-hub-box-bt .git-hub-top .git-hub-info img {
    width: 18px;
    height: 18px;
    margin-right: 10px
}

#git-hub-box-bt .git-hub-top .git-hub-info .text {
    font-size: 14px !important;
    font-weight: 500;
    color: #4f4f4f;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-line-clamp: 1
}

#git-hub-box-bt .git-hub-top .git-hub-info p.next {
    margin-top: 10px;
    font-size: 12px !important;
    font-weight: 400;
    color: #4ea1db !important
}

#git-hub-box-bt .git-hub-top .git-hub-info p.next .tag {
    padding: 2px 4px;
    background: #4ea1db;
    border-radius: 2px;
    font-size: 12px !important;
    font-weight: 400;
    color: #fff
}

#git-hub-box-bt .git-hub-top .git-hub-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

#git-hub-box-bt .git-hub-top .git-hub-btn p {
    margin: 0
}

#git-hub-box-bt .git-hub-top .git-hub-btn p {
    margin-right: 8px
}

#git-hub-box-bt .git-hub-top .git-hub-btn p,
#git-hub-box-bt .git-hub-top .git-hub-btn a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 8px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid #dae0e5;
    font-size: 14px !important;
    color: #fc5531;
    line-height: 20px;
    cursor: pointer
}

#git-hub-box-bt .git-hub-bottom {
    margin-top: 20px;
    height: 90px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

#git-hub-box-bt .git-hub-bottom .git-hub-desc {
    font-size: 14px !important;
    font-family: Helvetica;
    color: #4f4f4f;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-line-clamp: 3;
    line-height: 17px
}

#git-hub-box-bt .git-hub-bottom .git-hub-newnps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

#git-hub-box-bt .git-hub-bottom .git-hub-newnps span {
    font-size: 12px !important;
    font-weight: 400;
    color: #777888
}

#git-hub-box-bt .git-hub-bottom .git-hub-newnps p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0
}

#git-hub-box-bt .git-hub-bottom .git-hub-newnps>span,
#git-hub-box-bt .git-hub-bottom .git-hub-newnps p {
    margin-right: 16px
}

#git-hub-box-bt .git-hub-bottom .git-hub-newnps img {
    width: 16px;
    height: 16px;
    margin-right: 2px
}

.article-search-tip {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #444;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 6px 10px;
    height: 52px;
    position: absolute;
    z-index: 985;
    -webkit-transform: translateY(-64px);
    transform: translateY(-64px)
}

.article-search-tip:hover {
    opacity: 1
}

.article-search-tip:after {
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #444;
    bottom: -8px;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute
}

.article-search-tip:before {
    display: block;
    content: '';
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    background: #444;
    bottom: -4px;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    z-index: 1
}

.article-search-tip .article-href {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 4px;
    border-radius: 2px;
    margin-left: 10px
}

.article-search-tip .article-href:first-child {
    margin-left: 0
}

.article-search-tip .article-href:hover {
    background: #656565
}

.article-search-tip .article-href img {
    display: block;
    width: 16px
}

.article-search-tip .article-href .article-text {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff
}

.article-previous {
    width: 100%;
    padding: 12px 16px;
    background-color: #fff;
    margin-bottom: 8px
}

.article-previous dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.article-previous dl.next {
    margin-top: 12px
}

.article-previous dl dt {
    color: #999
}

.article-previous dl dd {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #1a1a1a
}

.article-previous dl dd a {
    max-width: 370px;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: #1a1a1a
}

.article-previous dl dd a:hover {
    color: #fc5531
}

.article-previous dl dd a.right {
    float: right
}

.side-write-guide-box {
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05)
}

.side-write-guide-box.type-1 .content-box .btn-go-write,
.side-write-guide-box.type-2 .content-box .btn-go-write {
    display: block;
    cursor: pointer
}

.side-write-guide-box.type-1 .content-box .btn-go-write img,
.side-write-guide-box.type-2 .content-box .btn-go-write img {
    display: block;
    width: 100%;
    height: auto
}

.side-write-guide-box.type-3 .content-box {
    padding-bottom: 16px
}

.side-write-guide-box.type-3 .content-box .title-box {
    padding: 16px 10px;
    height: 50px;
    background-size: 100% auto;
    background-position: top left;
    color: #bd5c5d;
    font-weight: bold;
    font-size: 14px;
    line-height: 21px
}

.side-write-guide-box.type-3 .content-box .info-box {
    padding: 14px 16px;
    color: #555666;
    line-height: 22px
}

.side-write-guide-box.type-3 .content-box .btn-go-write {
    margin: 0 16px;
    display: block;
    border-radius: 14px;
    border: 1px solid #fc5531;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    color: #fc5531;
    text-align: center;
    cursor: pointer
}

.side-write-guide-box.type-4 .content-box,
.side-write-guide-box.type-5 .content-box {
    padding: 16px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px
}

.side-write-guide-box.type-4 .content-box .title,
.side-write-guide-box.type-5 .content-box .title {
    margin-right: 4px;
    font-weight: 500;
    color: #fed33c
}

.side-write-guide-box.type-4 .content-box .tag,
.side-write-guide-box.type-5 .content-box .tag {
    margin: 0 4px;
    color: #fed33c;
    font-weight: 500
}

.side-write-guide-box.type-4 .content-box .btn-go-write,
.side-write-guide-box.type-5 .content-box .btn-go-write {
    margin-top: 14px;
    display: block;
    width: 100%;
    border-radius: 14px;
    border: 1px solid #fff;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    color: #fff;
    text-align: center;
    cursor: pointer
}

.sidetool-writeguide-box {
    margin-bottom: 8px;
    position: relative;
    margin-left: -8px
}

.sidetool-writeguide-box .btn-sidetool-writeguide {
    display: block;
    width: 62px;
    border: none;
    background-color: transparent
}

.sidetool-writeguide-box .btn-sidetool-writeguide img {
    display: block;
    width: 100%;
    height: auto
}

.sidetool-writeguide-box .tip-box {
    padding: 8px;
    position: absolute;
    left: -8px;
    top: 0;
    width: 135px;
    background: #fef7f0;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #ffd5a6;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    border-radius: 4px
}

.sidetool-writeguide-box .tip-box a {
    display: block;
    font-size: 14px;
    color: #df760c;
    line-height: 24px
}

.sidetool-writeguide-box .tip-box::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 0;
    height: 0;
    margin-top: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #df760c
}

.sidetool-writeguide-box .tip-box::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 0;
    height: 0;
    margin-top: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent transparent #fef7f0
}

.is_black_skin .side-write-guide-box {
    color: #d3d3d3
}

.is_black_skin .side-write-guide-box.type-3 .title-box {
    background-color: rgba(255, 255, 255, 0.3)
}

.is_black_skin .side-write-guide-box.type-3 .info-box {
    color: #c4c4c8
}

.is_black_skin .side-write-guide-box.type-4,
.is_black_skin .side-write-guide-box.type-5 {
    position: relative
}

.is_black_skin .side-write-guide-box.type-4::after,
.is_black_skin .side-write-guide-box.type-5::after {
    content: '';
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3)
}

.is_black_skin .side-write-guide-box.type-4 .content-box .info-box,
.is_black_skin .side-write-guide-box.type-5 .content-box .info-box,
.is_black_skin .side-write-guide-box.type-4 .content-box .btn-go-write,
.is_black_skin .side-write-guide-box.type-5 .content-box .btn-go-write {
    position: relative;
    z-index: 2
}

.is_black_skin .side-write-guide-box.type-4 .content-box .tag,
.is_black_skin .side-write-guide-box.type-5 .content-box .tag {
    color: #fed33c
}

.is_black_skin .side-write-guide-box.type-4 .content-box .title,
.is_black_skin .side-write-guide-box.type-5 .content-box .title {
    color: #fed33c
}

.recommend-right1 {
    margin-left: 8px;
    width: 300px;
    float: left;
    position: relative;
    display: none
}

.recommend-right1.show-directory {
    display: block
}

.marketing-box {
    width: 400px;
    margin: auto;
    margin-top: 12px
}

.marketing-box .marketing-content {
    width: 100%;
    border: 1px solid #e8e8ed;
    border-radius: 2px;
    background: #fff
}

.marketing-box .marketing-content .marketing-content-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: start;
    padding: 16px
}

.marketing-box .marketing-content .marketing-content-card .marketing-content-card-l {
    height: 48px
}

.marketing-box .marketing-content .marketing-content-card .marketing-content-card-l img {
    width: 46px;
    height: 46px;
    border-radius: 2px;
    border: 1px solid #e8e8ed;
    margin-right: 8px
}

.marketing-box .marketing-content .marketing-content-card .marketing-content-card-r {
    height: 48px;
    width: 100%
}

.marketing-box .marketing-content .marketing-content-card .marketing-content-card-r .marketing-content-card-rt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.marketing-box .marketing-content .marketing-content-card .marketing-content-card-r .marketing-content-card-rt .text {
    font-size: 16px;
    font-weight: 500;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #555666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all
}

.marketing-box .marketing-content .marketing-content-card .marketing-content-card-r .marketing-content-card-rt img {
    float: right;
    width: 5px;
    height: 10px;
    margin-left: 24px
}

.marketing-box .marketing-content .marketing-content-card .marketing-content-card-r .marketing-content-card-rb {
    font-size: 14px;
    font-weight: 400;
    color: #999aaa;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all
}

.article-resource-info-box {
    display: none;
    margin-top: 16px;
    padding: 8px 16px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.article-resource-info-box img.file-icon {
    display: block;
    width: 40px;
    height: auto;
    margin-right: 16px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.article-resource-info-box .info-box {
    margin-right: 24px;
    width: 100%;
    overflow: hidden
}

.article-resource-info-box .info-box p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.article-resource-info-box .info-box .title {
    font-size: 16px;
    font-weight: 500;
    color: #222226;
    line-height: 24px
}

.article-resource-info-box .info-box .desc {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 400;
    color: #777888;
    line-height: 22px
}

.article-resource-info-box .opt-box .btn-resource-link {
    display: block;
    width: 88px;
    height: 30px;
    background-color: #fdf2e2;
    border-radius: 15px;
    line-height: 30px;
    white-space: nowrap;
    color: #69421b;
    text-align: center;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.article-resource-info-box .opt-box .btn-resource-link:hover {
    background-color: #f4e4c7
}

.download-aigc-blogUser-info-box {
    margin-top: 16px;
    display: none;
    overflow: hidden
}

.is_black_skin .article-resource-info-box {
    background-color: #2e2e32;
    border-color: #2e2e32
}

.is_black_skin .article-resource-info-box .info-box .title {
    color: #d3d3d3
}

.is_black_skin .article-resource-info-box .info-box .desc {
    color: #999aaa
}

.recommend-column-box .recommend-column-itembox {
    margin: 8px 0;
    padding: 8px 0
}

.recommend-column-box .recommend-column-itembox .info-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.recommend-column-box .recommend-column-itembox .info-box .img-box {
    position: relative;
    width: 48px;
    height: 48px;
    padding-right: 10px;
    border-radius: 2px;
    overflow: hidden;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.recommend-column-box .recommend-column-itembox .info-box .img-box::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: url("../../images/bg-column.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1
}

.recommend-column-box .recommend-column-itembox .info-box .img-box .column-img {
    margin-left: 1px;
    margin-top: 1px;
    margin-bottom: 1px;
    display: block;
    width: 39px;
    height: 46px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 2px
}

.recommend-column-box .recommend-column-itembox .info-box .info {
    margin-left: 8px;
    width: 100%;
    overflow: hidden
}

.recommend-column-box .recommend-column-itembox .info-box .info .title-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.recommend-column-box .recommend-column-itembox .info-box .info .title-box .title {
    width: 100%;
    color: #2d2e2f;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.recommend-column-box .recommend-column-itembox .info-box .info .title-box .tag {
    margin-left: 2px;
    height: 20px;
    line-height: 20px;
    width: 38px;
    text-align: center;
    color: #fc5531;
    background-color: #feddd6;
    border-radius: 4px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.recommend-column-box .recommend-column-itembox .info-box .info .learn {
    margin-top: 2px;
    line-height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a
}

.recommend-column-box .recommend-column-itembox .desc {
    margin-top: 8px;
    line-height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.recommend-column-box .recommend-column-itembox .rc-article-box {
    margin-top: 16px
}

.recommend-column-box .recommend-column-itembox .rc-article-box a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 22px;
    color: #2d2e2f;
    font-size: 14px;
    font-style: normal
}

.recommend-column-box .recommend-column-itembox .rc-article-box a em {
    font-style: normal;
    color: #fc5531
}

.recommend-column-box .recommend-column-itembox .rc-article-box a::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #d9d9d9;
    margin-right: 8px
}

.is_black_skin .recommend-column-box .recommend-column-itembox .info-box .title-box .title {
    color: #d3d3d3
}

.is_black_skin .recommend-column-box .recommend-column-itembox .info-box .learn {
    color: #999
}

body {
    min-width: 1200px;
    -webkit-font-smoothing: antialiased
}

body[show-catalogue] .main_father.mainfather-concision #mainBox aside.blog_container_aside div#asidedirectory {
    display: none !important
}

body aside.blog_container_aside.show-project-run-ai-side div#asidedirectory,
body aside.blog_container_aside.show-project-run-ai-side div#asideCategory {
    display: block !important
}

body .next-word {
    display: block;
    position: fixed;
    height: 20px;
    width: 40px;
    background: rgba(15, 15, 15, 0.8);
    border-radius: 4px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    z-index: 1000
}

.main_father {
    padding: 8px 12px 0 12px
}

.main_father.mainfather-concision .blog_container_aside,
.main_father.mainfather-concision .recommend-right {
    display: none
}

@media (min-width:1320px) and (max-width:1380px) {
    .nodata.twocolumn-container .container {
        width: 908px
    }

    .nodata .container {
        margin-right: 0;
        width: 1208px
    }

    .nodata .container.container-concision {
        width: 900px
    }

    .nodata .container main {
        width: 900px
    }

    .nodata .container main #pcCommentBox pre>ol.hljs-ln {
        width: 490px !important
    }

    .nodata .container main .articleConDownSource {
        width: 500px
    }
}

@media screen and (max-width:1320px) {
    .nodata.twocolumn-container .container {
        width: 768px
    }

    .nodata .container {
        margin-right: 0;
        width: 1068px
    }

    .nodata .container.container-concision {
        width: 760px
    }

    .nodata .container main {
        width: 760px
    }

    .nodata .container main #pcCommentBox pre>ol.hljs-ln {
        width: 490px !important
    }

    .nodata .container main .toolbox-list .tool-reward {
        display: none
    }

    .nodata .container main .more-toolbox-new .toolbox-left .profile-box .profile-name {
        max-width: 128px
    }

    .nodata .container main .articleConDownSource {
        width: 420px
    }
}

@media screen and (min-width:1380px) {
    .nodata.twocolumn-container .container {
        width: 1018px
    }

    .nodata .container {
        width: 1318px
    }

    .nodata .container.container-concision {
        width: 1010px
    }

    .nodata .container main {
        width: 1010px
    }

    .nodata .container main #pcCommentBox pre>ol.hljs-ln {
        width: 490px !important
    }

    .nodata .container main .articleConDownSource {
        width: 560px
    }
}

@media (min-width:1550px) and (max-width:1700px) {
    .nodata.twocolumn-container .container {
        width: 828px
    }

    .nodata .container {
        width: 1128px
    }

    .nodata .container.container-concision {
        width: 820px
    }

    .nodata .container main {
        width: 820px
    }

    .nodata .container main #pcCommentBox pre>ol.hljs-ln {
        width: 690px !important
    }

    .nodata .container main .articleConDownSource {
        width: 500px
    }
}

@media screen and (min-width:1700px) {
    .nodata .container {
        width: 1318px
    }

    .nodata .container.container-concision {
        width: 1010px
    }

    .nodata .container main {
        width: 1010px
    }

    .nodata .container main #pcCommentBox pre>ol.hljs-ln {
        width: 690px !important
    }

    .nodata .container main .articleConDownSource {
        width: 560px
    }
}

@media screen and (min-width:1251px) and (max-width:1550px) {

    .nodata.twocolumn-container .recommend-right,
    .nodata.twocolumn-container .recommend-right1.show-directory {
        display: block !important
    }
}

.nodata.twocolumn-container #recommend-right {
    position: fixed
}

@media screen and (min-width:1550px) {
    .nodata .container {
        margin-right: 300px
    }

    .nodata .recommend-right,
    .nodata .recommend-right1.show-directory {
        margin-left: -292px;
        display: block
    }

    .nodata .recommend-right .groupfile,
    .nodata .recommend-right1.show-directory .groupfile {
        display: block
    }

    .nodata .recommend-right #asideArchive,
    .nodata .recommend-right1.show-directory #asideArchive {
        display: block
    }

    .nodata aside #asideArchive {
        display: none
    }

    .nodata .runner-box.box3 {
        display: none !important
    }

    aside.blog_container_aside .starmap-box {
        display: none !important
    }

    #asidedirectory,
    #asideCategory,
    #article-previous,
    #asideProjectArticle,
    div.gitcode-qc-left-box {
        display: none
    }

    #pcCommentBox pre>ol.hljs-ln {
        width: 690px !important
    }
}

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

    .nodata #asidedirectory,
    .nodata #asideCategory,
    .nodata .isShowFooterAds,
    .nodata #article-previous,
    .nodata #asideProjectArticle,
    .nodata div.gitcode-qc-left-box {
        display: block
    }

    .nodata aside.blog_container_aside .starmap-box {
        display: block !important
    }

    .nodata .recommend-right .groupfile {
        display: none
    }

    .nodata .recommend-right #asideArchive {
        display: none
    }

    .nodata aside #asideArchive {
        display: block
    }

    main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top span {
        margin-right: 8px
    }
}