@charset"UTF-8";
.box-fl, .box-fr {
    -webkit-transition:width .2s
}
a, body, button, html, input, textarea {
    font-family:"Pingfang SC", STHeiti, "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, sans-serif
}
.blog-body, table p {
    word-wrap:break-word
}
.blog-article, .blog-article .user-card, .header-navbar, .reward-popups {
    -webkit-font-smoothing:antialiased
}
.flex-item:after {
    content:"";
    clear:both;
    display:block
}
.layout-fluid:after, .layout:after {
    font-size:0;
    visibility:hidden;
    height:0;
    table-layout:fixed;
    content:'';
    clear:both
}
@media screen and (min-width:960px) and (max-width:1200px) {
    .flex-item-1 {
        float:left;
        width:8.33333%
    }
    .flex-item-2 {
        float:left;
        width:16.66667%
    }
    .flex-item-3 {
        float:left;
        width:25%
    }
    .flex-item-4 {
        float:left;
        width:33.33333%
    }
    .flex-item-5 {
        float:left;
        width:41.66667%
    }
    .flex-item-6 {
        float:left;
        width:50%
    }
    .flex-item-7 {
        float:left;
        width:58.33333%
    }
    .flex-item-8 {
        float:left;
        width:66.66667%
    }
    .flex-item-9 {
        float:left;
        width:75%
    }
    .flex-item-10 {
        float:left;
        width:83.33333%
    }
    .flex-item-11 {
        float:left;
        width:91.66667%
    }
    .flex-item-12 {
        float:left;
        width:100%
    }
    .flex-offset-1 {
        margin-left:8.33333%
    }
    .flex-offset-2 {
        margin-left:16.66667%
    }
    .flex-offset-3 {
        margin-left:25%
    }
    .flex-offset-4 {
        margin-left:33.33333%
    }
    .flex-offset-5 {
        margin-left:41.66667%
    }
    .flex-offset-6 {
        margin-left:50%
    }
    .flex-offset-7 {
        margin-left:58.33333%
    }
    .flex-offset-8 {
        margin-left:66.66667%
    }
    .flex-offset-9 {
        margin-left:75%
    }
    .flex-offset-10 {
        margin-left:83.33333%
    }
    .flex-offset-11 {
        margin-left:91.66667%
    }
    .flex-offset-12 {
        margin-left:100%
    }
}
@media screen and (min-width:769px) and (max-width:960px) {
    .flex-item-md-1 {
        float:left;
        width:8.33333%
    }
    .flex-item-md-2 {
        float:left;
        width:16.66667%
    }
    .flex-item-md-3 {
        float:left;
        width:25%
    }
    .flex-item-md-4 {
        float:left;
        width:33.33333%
    }
    .flex-item-md-5 {
        float:left;
        width:41.66667%
    }
    .flex-item-md-6 {
        float:left;
        width:50%
    }
    .flex-item-md-7 {
        float:left;
        width:58.33333%
    }
    .flex-item-md-8 {
        float:left;
        width:66.66667%
    }
    .flex-item-md-9 {
        float:left;
        width:75%
    }
    .flex-item-md-10 {
        float:left;
        width:83.33333%
    }
    .flex-item-md-11 {
        float:left;
        width:91.66667%
    }
    .flex-item-md-12 {
        float:left;
        width:100%
    }
}
@media screen and (min-width:320px) {
    .flex-item-sm-1 {
        float:left;
        width:8.33333%
    }
    .flex-item-sm-2 {
        float:left;
        width:16.66667%
    }
    .flex-item-sm-3 {
        float:left;
        width:25%
    }
    .flex-item-sm-4 {
        float:left;
        width:33.33333%
    }
    .flex-item-sm-5 {
        float:left;
        width:41.66667%
    }
    .flex-item-sm-6 {
        float:left;
        width:50%
    }
    .flex-item-sm-7 {
        float:left;
        width:58.33333%
    }
    .flex-item-sm-8 {
        float:left;
        width:66.66667%
    }
    .flex-item-sm-9 {
        float:left;
        width:75%
    }
    .flex-item-sm-10 {
        float:left;
        width:83.33333%
    }
    .flex-item-sm-11 {
        float:left;
        width:91.66667%
    }
    .flex-item-sm-12 {
        float:left;
        width:100%
    }
}
.layout {
    width:100%
}
.layout:after {
    display:table;
    width:0
}
.layout-flex {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.layout-flex .flex-grow {
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1
}
.layout-flex .flex-none {
    -webkit-box-flex:0;
    -ms-flex:none;
    flex:none;
    -ms-flex-item-align:start;
    align-self:flex-start
}
.layout-column {
    width:1200px;
    display:table-cell
}
.layout-left {
    float:left
}
.layout-right {
    float:right
}
.layout-fluid {
    width:100%
}
.layout-fluid:after {
    display:table;
    width:0
}
.box {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
.box.row {
    flex-direction:row;
    -ms-flex-direction:row;
    -webkit-flex-direction:row;
    -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;
    -moz-box-direction:normal;
    -webkit-box-direction:normal
}
.box-fl {
    transition:width .2s;
    -ms-flex-order:1;
    -webkit-box-ordinal-group:2;
    order:1
}
.box-fr {
    transition:width .2s;
    -ms-flex-order:3;
    -webkit-box-ordinal-group:4;
    order:3
}
.box-aw {
    min-width:0;
    -webkit-transition:width .2s;
    transition:width .2s;
    -ms-flex-order:2;
    -webkit-box-ordinal-group:3;
    order:2;
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1
}
.box-aw img {
    width:100%;
    max-width:intrinsic;
    max-width:-moz-fit-content;
    max-width:-webkit-fit-content;
    height:auto
}
.box-aw img.auto-width {
    width:auto;
    max-width:none
}
.box-aw img[data-delay] {
    max-width:none
}
.h1, h1 {
    font-size:26px
}
.h2, h2 {
    font-size:22px
}
.h3, h3 {
    font-size:18px
}
.h4, h4 {
    font-size:16px
}
.h5, h5 {
    font-size:12px
}
.font-red, .font-red a {
    color:red
}
.font-orange, .font-orange a {
    color:#f60
}
.font-gray, .font-gray a {
    color:#888
}
.font-green, .font-green a {
    color:#4eaa4c
}
::-webkit-scrollbar {
    width:10px!important;
    height:10px!important;
    -webkit-appearance:none
}
::-webkit-scrollbar-thumb {
    height:5px;
    border:1px solid transparent;
    border-top:none;
    border-bottom:none;
    -webkit-border-radius:6px;
    background-color:rgba(0, 0, 0, .3);
    background-clip:padding-box
}
::selection {
    background:rgba(0, 0, 0, .2)
}
::-moz-selection {
    background:rgba(0, 0, 0, .2)
}
screen {
    display:block
}
.clear:after, .clear:before, .clearfix:after, .clearfix:before {
    display:table;
    content:''
}
body, html {
    box-sizing:border-box;
    margin:0;
    color:#333;
    -moz-osx-font-smoothing:grayscale;
    -moz-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
html {
    font-size:62.5%
}
body {
    font-size:1.2rem
}
.btn, .container {
    font-size:1.4rem
}
a, button, input, textarea {
    border:none;
    outline:0
}
input[disabled=disabled] {
    cursor:default;
    opacity:.6
}
textarea {
    resize:none
}
input, textarea {
    padding:5px 10px;
    border:1px solid #ddd;
    border-radius:3px
}
a, img {
    border:none
}
input:focus, textarea:focus {
    border-color:#4eaa4c
}
*, :after, :before {
    box-sizing:inherit;
    -webkit-tap-highlight-color:transparent
}
.clear:after, .clearfix:after {
    clear:both
}
.hide, [data-show=mobile] {
    display:none
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    line-height:inherit;
    color:#ccc!important
}
input:-moz-placeholder {
    line-height:inherit;
    color:#aaa!important
}
input::-moz-placeholder {
    line-height:inherit;
    color:#ccc!important
}
input:-ms-input-placeholder {
    line-height:1;
    color:#ccc!important
}
a {
    -webkit-transition:color .3s;
    transition:color .3s;
    text-decoration:none;
    color:#333;
    outline:0
}
ul {
    list-style-type:none
}
li, ul {
    margin:0;
    padding:0
}
.blog-drafts .drafts-lists .time, .text-muted {
    color:#999
}
.text-gary {
    color:#666
}
.text-orange {
    color:#f90
}
.blog-article .blog-copyright a, .blog-article .blog-copyright a a, .blog-article .blog-heading .user-info .icon a, .blog-article .blog-heading .user-info .icon a a, .blog-article .blog-heading .user-info .name a, .blog-article .blog-heading .user-info .name a a, .blog-article .link, .blog-article .link a, .blog-article .panel-related .related-blog-list a, .blog-article .panel-related .related-blog-list a a, .blog-body a, .blog-body a a, .link-blue, .link-blue a {
    color:#46B
}
.blog-article .blog-copyright a a:hover, .blog-article .blog-copyright a:hover, .blog-article .blog-heading .user-info .icon a a:hover, .blog-article .blog-heading .user-info .icon a:hover, .blog-article .blog-heading .user-info .name a a:hover, .blog-article .blog-heading .user-info .name a:hover, .blog-article .link a:hover, Ï.blog-article .link:hover, .blog-article .panel-related .related-blog-list a a:hover, .blog-article .panel-related .related-blog-list a:hover, .blog-body a a:hover, .blog-body a:hover, .link-blue a:hover, .link-blue:hover {
    color:#c00
}
.blog-drafts .drafts-lists .title :hover, .link-lead-hover :hover {
    text-decoration:underline;
    color:#080
}
.btn, .btn a {
    color:#fff
}
.text-left {
    text-align:left
}
.text-right {
    text-align:right
}
.text-center {
    text-align:center
}
table p {
    line-height:1.6;
    margin:5px 0!important
}
[data-wrap=nowrap] {
    white-space:nowrap
}
.over-hide {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}
.items-center {
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
@media screen and (min-width:769px) {
    .sm-show {
        display:none
    }
    .sm-hide {
        display:inline-block
    }
}
@media screen and (max-width:768px) {
    .layout-fluid .layout-left, .layout-fluid .layout-right {
        float:inherit
    }
    .sm-hide {
        display:none
    }
    .sm-show, [data-show=mobile] {
        display:inline-block
    }
}
@media screen and (min-width:961px) {
    .md-show {
        display:none
    }
    .md-hide {
        display:inline-block
    }
}
@media screen and (max-width:960px) {
    .md-show {
        display:inline-block
    }
    .md-hide {
        display:none
    }
}
@media screen and (max-width:1200px) {
    .container {
        width:100%;
        padding-right:3%;
        padding-left:3%
    }
}
.pages {
    text-align:right;
    display:block
}
.btn {
    border-radius:3px;
    padding:.4rem .8rem;
    outline:0;
    border:0;
    margin:0;
    background-color:transparent;
    display:inline-block;
    cursor:pointer
}
.btn.btn-sm {
    font-size:1.2rem;
    padding:.2rem .4rem
}
.btn.btn-lg {
    padding:.4rem 1.2rem;
    font-size:1.6rem
}
.btn-default[class*=btn] {
    background-color:#fff;
    color:#666;
    border:1px solid #ccc
}
.btn-gary[class*=btn] {
    background-color:#ccc
}
.btn-green[class*=btn] {
    background-color:#4eaa4c
}
.btn-text[class*=btn] {
    color:#999
}
.btn-orange[class*=btn] {
    background-color:#f5a623
}
[data-type=tip] {
    width:100%;
    text-align:center
}
[data-type=tip][data-tip-type=fixed] {
    position:fixed;
    left:0
}
.loading-gif, .tooltip-box, [data-type=tip][data-tip-type=absolute] {
    position:absolute
}
[data-type=tip] .tooltips {
    background-color:rgba(0, 0, 0, .6);
    border-radius:3px;
    color:#fff;
    margin:auto;
    padding:12px 30px;
    display:none
}
[data-type=tip] .tooltips a {
    color:#F8E71C
}
.tooltip-box {
    z-index:10;
    border:1px solid #c7bf93;
    background-color:#fff9c9;
    border-radius:5px;
    top:12px;
    color:#666;
    padding:6px 8px;
    font-size:13px
}
.tooltip-box:after, .tooltip-box:before {
    content:" ";
    position:absolute;
    top:-12px;
    left:50%
}
.tooltip-box:before {
    display:inline-block;
    border:6px solid transparent;
    border-bottom:6px solid #c7bf93
}
.tooltip-box:after {
    display:inline-block;
    border:4px solid transparent;
    border-bottom:4px solid #fff9c9;
    margin-left:2px;
    top:-8px
}
.tooltip-box a {
    color:#4eaa4c;
    text-decoration:underline
}
.tooltip-box.bg-white {
    border:1px solid #ddd;
    background-color:#fff
}
.tooltip-box.bg-white:before {
    display:inline-block;
    border:6px solid transparent;
    border-bottom:6px solid #ddd
}
.tooltip-box.bg-white:after {
    display:inline-block;
    border:4px solid transparent;
    border-bottom:4px solid #fff
}
.form-wapper {
    color:#333
}
.form-wapper .form-item {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    min-height:40px;
    margin-bottom:10px
}
.form-wapper .form-item.box-wrap {
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
.form-wapper .form-label {
    line-height:40px;
    padding-right:20px;
    text-align:right
}
.form-wapper .form-ctrl {
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1
}
.form-wapper .input-error {
    font-size:14px;
    padding:0 5px;
    color:#D0021B
}
.header-navbar .top-banner .name, .header-navbar .top-banner a {
    color:#fff;
    text-decoration: none;
}
input.error {
    border:1px solid #D0021B
}
.form-radios {
    display:inline-block;
    cursor:pointer
}
.form-radios label {
    cursor:pointer
}
.form-radios input[type=radio] {
    display:none
}
.form-radios input[type=radio]+label {
    position:relative;
    padding-left:12px;
    vertical-align:middle
}
.form-radios input[type=radio]+label:after, .form-radios input[type=radio]+label:before {
    position:absolute;
    top:50%;
    left:0;
    display:inline-block;
    width:17px;
    height:17px;
    content:'';
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    border-radius:50%
}
.form-radios input[type=radio]+label:before {
    border:1px solid #979797
}
.form-radios input[type=radio]:checked+label:after {
    left:5px;
    width:7px;
    height:7px;
    background:#4eaa4c
}
.header-navbar {
    min-height:40px
}
@media screen and (max-width:960px) {
    .form-wapper .form-label {
        text-align:left
    }
    .header-navbar .sm-hide {
        display:none
    }
}
.header-navbar .top-banner {
    background:-webkit-linear-gradient(left, rgba(78, 170, 76, .5), rgba(0, 202, 133, .5)), #4eaa4c;
    background:linear-gradient(to right, rgba(78, 170, 76, .5), rgba(0, 202, 133, .5)), #4eaa4c;
    color:#fff;
    height:40px;
    line-height:40px;
    padding:0 20px;
    font-size:14px
}
.header-navbar .top-banner .osc-logo {
    width:24px;
    height:24px;
    display:inline-block;
    vertical-align:middle;
    margin-right:20px;
    background: url(/static/blog/image/z.png) 100%;
}
.header-navbar .top-banner .menus .menu-item {
    display:inline-block;
    margin-right:12px
}
.header-navbar .top-banner .user-bar .user-menu:after {
    content:"|";
    margin-left:8px;
    margin-right:5px
}
.header-navbar .top-banner .menu-drop {
    position:relative
}
.header-navbar .top-banner .menu-drop a i.icon-svg {
    width:6px;
    height:6px;
    vertical-align:middle
}
.header-navbar .top-banner .menu-drop .menu-drop-down {
    display:none;
    position:absolute;
    left:-15px;
    width:auto;
    background:#fff;
    box-shadow:0 2px 4px 0 rgba(0, 0, 0, .1);
    z-index:20
}
.header-navbar .top-banner .menu-drop .menu-drop-down .drop-list li {
    color:#111
}
.header-navbar .top-banner .menu-drop .menu-drop-down .drop-list li a {
    padding:0 15px;
    color:#111;
    display:block;
    line-height:36px;
    white-space: nowrap;
    text-decoration: none;
}
.header-navbar .top-banner .menu-drop .menu-drop-down .drop-list li a:hover {
    color:#49ac4f;
    background:#f9f9f9
}
.header-navbar .top-banner .menu-drop:hover .menu-drop-down {
    display:block
}
.header-navbar .top-banner .city-all {
    border-top:1px solid #ddd
}
.footer {
    background:#f8f8f8
}
.footer .container {
    padding-top:20px;
    padding-bottom:20px;
    font-size:1.4rem;
    line-height:2;
    color:#666
}
.footer .container a {
    color:#333;
    white-space:nowrap
}
.footer .container .oscapp {
    line-height:1.6
}
.footer .container .oscapp span {
    float:left
}
.footer .container .oscapp a {
    width:16px;
    margin-left:8px;
    float:left;
    text-indent:-9999em
}

@media screen and (max-width:960px) {
    .footer .layout-right {
        height:30px;
        float:inherit
    }
}
.medal-osc .medal-item {
    display:inline-block;
    position:relative
}
.medal-osc .medal-item .dropdown {
    display:none;
    position:absolute;
    top:28px;
    width:360px;
    line-height:1.8;
    word-break:break-word;
    color:#333;
    background:#fff;
    box-shadow:0 2px 4px 0 rgba(0, 0, 0, .1);
    z-index:20
}
.medal-osc .medal-item .dropdown .panel-row, .medal-osc .medal-item:hover .dropdown {
    display:block
}
.medal-osc .medal-item .dropdown .medal-logo {
    margin-right:10px;
    -webkit-box-flex:0;
    -ms-flex:none;
    flex:none
}
.medal-osc .medal-item .dropdown .medal-logo img {
    width:100px;
    height:100px
}
.medal-osc .medal-item .dropdown .title {
    font-weight:600;
    color:#111;
    line-height:30px;
    font-size:14px
}
.medal-osc .medal-item .tooltip-box:after, .medal-osc .medal-item .tooltip-box:before {
    left:11px
}
[data-emoji=wrapper] {
    position:absolute;
    background:#fff;
    top:25px;
    left:0;
    display:none;
    z-index:30;
    padding:0 15px;
    border:1px solid #eee;
    width:420px
}
[data-emoji=wrapper][data-group] {
    padding-bottom:15px;
    padding-top:5px;
    border-top:1px solid #ddd
}
[data-emoji=wrapper][data-group]:first-child {
    border-top:none
}
[data-emoji=wrapper][data-group-title] {
    line-height:30px
}
[data-emoji=wrapper] .emoji-block {
    display:inline-block;
    font-size:1.4em;
    line-height:36px;
    text-align:center;
    vertical-align:top;
    margin:0;
    padding:0;
    width:36px;
    height:34px;
    cursor:pointer;
    border:1px solid #f6f6f6;
    background-color:#fff
}
[data-emoji=wrapper] .emoji-block:hover {
    border:1px solid #f5a623
}
[data-emoji=wrapper][data-emoji=panel] {
    max-height:350px;
    overflow-y:auto
}
[data-emoji=nav] {
    width:100%;
    display:inline-block
}
[data-emoji-nav] {
    float:left;
    font-size:12px;
    color:#999;
    width:20%;
    padding:10px 0;
    text-align:center;
    cursor:pointer;
    border-bottom:2px solid transparent
}
[data-emoji-nav].active {
    color:#f60;
    border-bottom:2px solid #f60
}
[data-emoji-nav]:hover {
    color:#f60
}
[data-emoji-item] {
    display:none
}
[data-emoji-item].active {
    display:block
}
[data-emoji-render=true] {
    opacity:0;
    -webkit-transition:all .2s;
    transition:all .2s
}
emoji[data-emoji~=emoji] {
    display:inline-block;
    width:24px;
    height:24px;
    line-height:24px;
    vertical-align:top;
    text-align:center;
    margin:0 3px
}
[data-popups-for] {
    position:fixed;
    z-index:999;
    top:50%;
    left:50%;
    display:none;
    width:800px;
    max-width:800px;
    padding:25px;
    -webkit-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
    border-radius:5px;
    background-color:#fafafa;
    box-shadow:0 0 24px 0 rgba(0, 0, 0, .11), 0 24px 24px 0 rgba(0, 0, 0, .15)
}
[data-popups=mask] {
    position:fixed;
    z-index:900;
    top:0;
    left:0;
    display:none;
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, .6)
}
[data-popups-close] {
    font-family:sans-serif;
    font-size:20px;
    font-weight:lighter;
    line-height:20px;
    position:absolute;
    top:8px;
    right:8px;
    overflow:hidden;
    width:20px;
    height:20px;
    cursor:pointer;
    text-align:center;
    color:#ccc
}
@media screen and (max-width:960px) {
    [data-popups-for] {
        top:0;
        left:0;
        overflow-y:scroll;
        width:100vw;
        height:100vh;
        min-height:500px;
        -webkit-transform:none;
        transform:none;
        border-radius:0;
        box-shadow:none
    }
    [data-popups=mask] {
        overflow:hidden;
        height:1000px;
        background-color:#fafafa
    }
}
.panel-comments .comment-form {
    padding:10px
}
.panel-comments .comment-form textarea {
    display:block;
    width:100%;
    font-size:16px;
    outline:0;
    background:#fff;
    height:8rem;
    border-radius:0;
    box-shadow:none;
    -webkit-appearance:initial
}
.panel-comments .comment-form .btn.submit-comment {
    display:inline-block;
    margin-top:10px;
    padding:.5rem 2rem
}
.panel-comments .panel-list {
    padding-left:15px;
    padding-right:0!important
}
.panel-comments textarea {
    font-size:1.4rem
}
.panel-comments .panel-heading {
    margin-top:10px
}
.panel-comments .comment-item {
    border-bottom:1px solid #c8c7cc;
    padding:15px 15px 15px 0;
    word-break:break-all;
    word-break:break-word
}
.panel-comments .comment-item:last-child {
    border:none
}
.panel-comments .comment-item .user {
    padding-bottom:10px
}
.panel-comments .comment-item .icon {
    width:32px;
    height:32px;
    overflow:hidden;
    border-radius:50%;
    margin-right:15px
}
.panel-comments .comment-item .icon img {
    width:100%;
    height:100%;
    vertical-align:baseline
}
.panel-comments .comment-item .user-name {
    font-size:1.5rem;
    line-height:1.2
}
.panel-comments .comment-item .user-info {
    font-size:1.2rem;
    color:#999;
    line-height:1.2;
    margin-top:5px
}
.panel-comments .comment-item .delete {
    font-size:1.2rem;
    width:50px;
    display:block;
    text-align:center;
    color:#999
}
.panel-comments .comment-item .comment-content {
    font-size:1.4rem;
    line-height:1.6;
    color:#111;
    word-wrap:break-word;
    position:relative;
    overflow:hidden
}
.panel-comments .comment-item .comment-content a {
    color:#46B
}
.panel-comments .comment-item .ref {
    position:relative;
    border-bottom:1px solid #c8c7cc;
    margin-left:10px;
    margin-bottom:10px;
    margin-top:5px;
    font-size:1.4rem;
    color:#6a6a6a
}
.panel-comments .comment-item .ref:before {
    position:absolute;
    content:'';
    border-left:1px solid #c8c7cc;
    height:100%;
    margin-left:-10px
}
.panel-comments .comment-item .ref h4 {
    font-size:1.4rem;
    margin:0;
    font-weight:200
}
.panel-comments .comment-item .ref p {
    margin:0
}
.panel-comments .comment-item .icon_box .vote {
    font-size:12px;
    color:#999
}
.panel-comments .comment-item .icon_box .icon-thumbs-o-up-blog {
    width:14px;
    height:14px
}
.blog-comment-form {
    margin-top:10px
}
.blog-comment-form .icon {
    width:40px;
    height:40px;
    border-radius:50%;
    overflow:hidden;
    margin-right:15px
}
.blog-comment-form .icon img {
    width:100%;
    height:100%
}
.blog-comment-form textarea {
    width:100%;
    height:80px
}
.blog-comment-form .blog_emotion, .blog-comment-form .blog_soft {
    width:20px;
    height:20px;
    display:inline-block
}
.blog-comment-form .blog_emotion {
    position:relative
}
#TweetFormPopupWraper {
    display:none;
    position:absolute;
    z-index:9999
}

#TweetFormPopupWraper .emotions {
    background-position:51px 0
}
#TweetFormPopupWraper .images {
    background-position:107px 0
}
#TweetFormPopupWraper .code {
    background-position:165px 0
}
#TweetFormPopup {
    width:392px;
    border:2px solid #ccc;
    background:#ffc;
    padding:5px
}
#TweetFormPopup a.close {
    float:right;
    font-size:8pt;
    font-weight:700;
    -webkit-text-size-adjust:none
}

#TweetCode pre, #TweetImages .l {
    margin:0 0 10px
}
#TweetFormPopup a.emotion:hover {
    border:1px solid #5cc26f
}
#TweetFormPopup .TweetPopupTitle {
    background:#666;
    color:#fff;
    padding:3px 5px;
    margin:0 0 10px;
    font-weight:700
}
#TweetFormPopup .TweetPopupTitle a {
    float:right;
    color:#FFF
}
#TweetImages .tip {
    color:#666
}
#TweetCode {
    padding:5px
}
#TweetCode textarea {
    width:100%;
    height:250px;
    display:block;
    margin:10px 0
}
#TweetCode pre {
    font-size:9pt;
    font-family:Courier New, Arial;
    border:1px solid #ddd;
    border-left:5px solid #6CE26C;
    background:#f6f6f6;
    padding:5px
}
.blog-body {
    font-size:1.6rem;
    font-family:"Pingfang SC", STHeiti, "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, sans-serif;
    color:#3d464d;
    line-height:28px
}
.blog-body .blog-table {
    overflow:hidden;
    overflow-x:auto
}
.blog-body pre, .blog-body pre code {
    overflow-x:auto;
    border-radius:4px;
    padding:10px;
    line-height:1.4;
    word-wrap:normal;
    display:block;
    font-size:13px;
    background:#3f3f3f;
    color:#dcdcdc;
    font-family:Menlo, Monaco, Consolas, "Courier New", monospace
}
.blog-body pre code::-webkit-scrollbar, .blog-body pre::-webkit-scrollbar {
    width:5px!important;
    height:5px!important;
    -webkit-appearance:none
}
.blog-body pre code::-webkit-scrollbar-thumb, .blog-body pre::-webkit-scrollbar-thumb {
    background:rgba(153, 153, 153, .9)
}
.blog-body code, .blog-body pre {
    border-radius:3px;
    padding:2px;
    font-size:13px
}
.blog-body p {
    margin-bottom:16px
}
.blog-body ol, .blog-body ul {
    margin:0 0 0 30px;
    padding:8px 15px
}
.blog-body ol {
    list-style-type:decimal
}
.blog-body ul {
    list-style-type:disc
}
.blog-body img {
    margin:auto;
    max-width:80%;
    height:auto
}
.blog-body table {
    border-collapse:collapse;
    border-spacing:1px;
    font-size:14px;
    color:#444;
    display:block;
    overflow-x:auto;
    max-width:100%;
    border:0
}
.blog-body table thead {
    text-align:left;
    background:#f8f8f8
}
.blog-body table td, .blog-body table th {
    padding:4px 8px;
    border:1px solid #ccc
}
.blog-body blockquote {
    position:relative;
    color:#000;
    font-size:1.5rem;
    background:#f4f4f4;
    margin:20px 0;
    padding:16px 24px 16px 35px
}
.blog-body blockquote:before {
    content:"";
    background-image:url(../imgs/icon-svg/icon-quotation.svg);
    top:12px;
    left:16px;
    font-size:24px;
    color:#4eaa4c;
    position:absolute;
    width:13px;
    height:9px;
    display:inline-block
}
.blog-body h1, .blog-body h2, .blog-body h3, .blog-body h4, .blog-body h5 {
    font-weight:500
}
.blog-body h1 {
    font-size:24px
}
.blog-body h2 {
    font-size:22px
}
.blog-body h3 {
    font-size:18px
}
.blog-body h4 {
    font-size:16px
}
.blog-body video {
    max-width:100%
}
.panel .panel-heading {
    border-bottom:1px solid #e1e1e1;
    font-size:1.8rem;
    line-height:2
}
.panel .panel-heading em {
    font-style:inherit;
    font-size:1.2rem;
    color:#999
}
.divide {
    border-top:1px dashed #d1d1d1;
    height:0;
    overflow:hidden;
    font-size:0;
    margin:20px auto
}
.btn-black-blog {
    border:1px solid #5B5C5F;
    background:#fff;
    border-radius:0;
    color:#5B5C5F
}
.btn-black-blog:hover {
    color:#4eaa4c
}
.user-info .icon {
    border-radius:50%;
    background:#f5f5f5;
    margin:auto;
    overflow:hidden
}
.status-tag, .tags .tag {
    display:inline-block;
    margin-right:5px
}
.user-info .icon img {
    width:100%;
    height:100%;
    vertical-align:baseline
}
.user-info .name {
    color:#000
}
.status-tag {
    border:2px solid transparent;
    border-radius:50%;
    width:29px;
    height:29px;
    vertical-align:text-bottom;
    text-align:center;
    font-size:16px;
    line-height:26px;
    float:left
}
.recommend[class*=status-tag] {
    border-color:#FB7081;
    color:#FB7081
}
.reprint[class*=status-tag] {
    border-color:#8284E9;
    color:#8284E9
}
.private[class*=status-tag] {
    border-color:#594F4F;
    color:#594F4F
}
.original[class*=status-tag] {
    border-color:#51BAE3;
    color:#51BAE3
}
.data-info {
    padding:10px 0
}
.data-info li {
    display:inline-block
}
.follow-status .follow, .follow-status .follow a {
    color:#4eaa4c
}
.tags .tag, .tags .tag a {
    color:#666
}
.follow-status .follow:before {
    content:"";
    width:18px;
    height:18px;
    display:inline-block;
    background:url(../imgs/icon-svg/icon-heart-hollow.svg) no-repeat;
    background-size:contain;
    vertical-align:text-top
}
.follow-status .follow.followed:before {
    background:url(../imgs/icon-svg/icon-heart.svg) no-repeat;
    background-size:contain
}
.tags .tag {
    background:#EBEBEB;
    padding:7px 6px 5px;
    margin-top:5px;
    line-height:1;
    font-size:14px
}
.tags.tags-noborder .tag {
    border-color:transparent;
    background:#f5f5f5;
    color:#666
}
.tool-bar {
    position:fixed;
    right:10px;
    bottom:20px;
    width:40px;
    text-align:left;
    -webkit-transition:all .2s;
    transition:all .2s
}
.tool-bar .item {
    border:1px solid #ddd;
    background:#f5f5f5;
    display:block;
    position:relative;
    border-radius:3px;
    overflow:hidden
}
.tool-bar .item:not(:last-child) {
    border-bottom:none
}
.tool-bar .item .over {
    width:40px;
    height:40px;
    display:block;
    overflow:hidden
}
.tool-bar .item .over .icon {
    width:100%;
    height:100%;
    -webkit-transition:all .2s;
    transition:all .2s
}
.tool-bar .item .over .icon .icon-svg {
    width:18px;
    height:18px;
    margin:11px
}
.tool-bar .item .over .txt {
    width:100%;
    height:100%;
    line-height:40px;
    background:#4eaa4c;
    color:#fff;
    text-align:center
}
@media screen and (min-width:960px) {
    .tool-bar .item:hover .icon {
        margin-top:-40px
    }
}
.float-share {
    position:absolute;
    top:100px;
    right:10px;
    border:1px solid #ddd;
    padding:8px
}
.float-share img {
    width:80px;
    height:80px
}
.float-share span {
    display:block;
    font-size:12px;
    color:#666
}
.reward-list {
    padding-bottom:60px
}
.reward-list .reward-list-title {
    border-bottom:1px solid #ddd;
    line-height:2
}
.reward-list .donate-user-list {
    padding-top:18px
}
.reward-list .donate-user-list .donate-user-item {
    position:relative;
    display:inline-block;
    width:40px;
    height:40px;
    margin-right:10px;
    word-wrap:break-word
}
.reward-list .donate-user-list .donate-user-item img {
    width:100%;
    border-radius:50%
}
.reward-list .donate-user-list .donate-user-item .donate-user-pro {
    position:absolute;
    background:rgba(0, 0, 0, .8);
    color:#fff;
    border-radius:2px;
    font-size:14px;
    padding:7px 10px;
    left:-50%;
    top:110%;
    display:none;
    z-index:1
}
.reward-list .donate-user-list .donate-user-item .donate-user-pro:before {
    position:absolute;
    content:"";
    display:inline-block;
    border-color:transparent;
    border-style:solid;
    border-width:3px;
    border-bottom-color:rgba(0, 0, 0, .8);
    left:33px;
    top:-6px
}
.reward-list .donate-user-list .donate-user-item .donate-user-pro span {
    white-space:nowrap;
    display:inline-block
}
.reward-list .donate-user-list .donate-user-item .donate-user-pro span:not(:first-child):before {
    content:"";
    display:inline-block;
    width:3px;
    height:3px;
    border-radius:50%;
    background:#ddd;
    margin-left:8px;
    margin-right:8px;
    vertical-align:middle
}
.reward-list .donate-user-list .donate-user-item .donate-user-pro .user {
    white-space:nowrap
}
.reward-list .donate-user-list .donate-user-item .donate-user-pro .name {
    color:#4eaa4c
}
.reward-list .donate-user-list .donate-user-item .donate-user-pro .message {
    margin-top:5px;
    color:#ccc;
    width:200px
}
.blog-user {
    padding-top:60px;
    padding-bottom:40px
}
.blog-user .sidebar {
    padding:0 40px 10px 0;
    color:#666;
    border-right:1px dashed #d1d1d1;
    -webkit-transition:width .5;
    transition:width .5
}
.blog-user .sidebar .divide {
    width:20%
}
.blog-user .content {
    padding-left:50px
}
.blog-user .user-info, .blog-user .user-radar {
    text-align:center
}
.blog-user .user-info .icon {
    width:100px;
    height:100px
}
.blog-user .user-info .name {
    font-size:1.8rem;
    line-height:3
}
.blog-user .user-info .name .icon-home {
    height:17px
}
.blog-user .user-info .follow-status {
    margin-bottom:15px
}
.blog-user .user-info .edit {
    margin-top:10px
}
.blog-user .user-info .edit .btn {
    width:100px
}
.blog-user .radar-skill {
    width:100%;
    height:120px;
    text-align:center
}
.blog-user .user-sort {
    line-height:2
}
.blog-user .user-sort .title {
    margin-bottom:15px;
    padding-left:10px;
    line-height:30px;
    border-bottom:1px solid #e1e1e1
}
.blog-user .user-sort .title span {
    font-size:1.8rem;
    color:#000
}
.blog-user .user-sort .title em {
    float:right;
    font-style:inherit;
    font-size:1.2rem;
    color:#666
}
.blog-user .user-sort .sort-list a {
    border-radius:15px;
    height:28px;
    line-height:28px;
    padding:0 10px;
    margin:2px 0;
    display:block
}
.blog-user .user-sort .sort-list a:not([class*=active]):hover {
    cursor:pointer;
    background:#f5f5f5
}
.blog-user .user-sort .sort-list .name {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding-right:15px
}
.blog-user .user-sort .sort-list .num {
    font-size:1.2rem;
    float:right
}
.blog-user .user-sort .sort-list .active {
    background:#f2f2f2;
    color:#4eaa4c;
    font-weight:500
}
.blog-user .user-sort .sort-list .active a {
    color:#fff
}
.blog-user .navbar {
    line-height:40px;
    height:41px;
    position:relative;
    overflow:hidden
}
.blog-user .navbar:after {
    content:"";
    position:absolute;
    bottom:0;
    width:100%;
    clear:both;
    display:block;
    border-bottom:1px solid #e1e1e1;
    z-index:-1
}
.blog-user .navbar .nav-tabs {
    float:left
}
.blog-user .navbar .nav-tabs .active {
    border-bottom:1px solid #4eaa4c;
    color:#4eaa4c
}
.blog-user .navbar .nav-tab {
    width:120px;
    float:left;
    font-size:1.8rem;
    text-align:center;
    color:#999;
    cursor:pointer
}
.blog-user .navbar .search {
    float:right;
    position:relative;
    border-bottom:1px solid transparent;
    width:120px;
    -webkit-transition:all .3s;
    transition:all .3s
}
.blog-user .navbar .search .enter, .blog-user .navbar .search .icon {
    position:absolute;
    top:0
}
.blog-user .navbar .search .icon {
    background-size:cover;
    width:24px;
    height:24px;
    display:inline-block;
    vertical-align:middle;
    top:7px
}
.blog-user .navbar .search input[type=text] {
    border:none;
    width:120px;
    padding-left:30px;
    background:0 0;
    font-size:1.4rem
}
.blog-user .navbar .search .enter {
    right:8px;
    display:none
}
.blog-user .navbar .search .enter svg {
    vertical-align:text-bottom;
    width:12px;
    height:12px;
    fill:#ccc
}
.blog-user .navbar .search.focus {
    border-bottom:1px solid #666;
    width:100%
}
.blog-user .navbar .search.focus input[type=text] {
    width:100%
}
.blog-user .navbar .search.focus .enter {
    display:inline-block
}
.blog-user .list-item {
    padding:25px 12px;
    border-bottom:1px dotted #e1e1e1;
    display:table
}
.blog-user .list-item:hover {
    background:#f8f8f8
}
.blog-user .list-item .layout {
    display:table-cell;
    vertical-align:middle
}
.blog-user .list-item .images {
    width:150px;
    max-height:100px;
    text-align:center;
    vertical-align:middle;
    overflow:hidden
}
.blog-user .list-item .images img {
    max-width:150px;
    vertical-align:middle
}
.blog-user .list-item .title a {
    display:block;
    font-size:2.4rem;
    color:#000;
    word-break:break-all
}
.blog-user .list-item .title a:hover {
    color:#46B
}
.blog-user .list-item .description .highlight, .blog-user .list-item .title .highlight {
    color:#dd4b39
}
.blog-user .list-item .description {
    padding:5px 0 10px
}
.blog-user .list-item .status-stick {
    margin-left:8px;
    white-space:nowrap;
    font-size:14px
}
@media screen and (min-width:1200px) {
    .blog-user .sidebar {
        width:340px;
        float:left
    }
    .blog-user .content {
        display:table-cell;
        width:1200px
    }
    .blog-user .content .search.focus {
        width:330px
    }
}
@media screen and (max-width:1200px) {
    .blog-user .sidebar {
        padding-right:3%
    }
    .blog-user .content {
        padding-left:3%
    }
}
@media screen and (max-width:768px) {
    .blog-user {
        padding-top:30px
    }
    .blog-user .content {
        margin-top:30px
    }
    .blog-user .content, .blog-user .sidebar {
        padding:0;
        border:0
    }
    .blog-user .nav-tabs {
        width:100%
    }
    .blog-user .nav-tabs .nav-tab {
        width:50%
    }
    .blog-user .search {
        width:100%!important;
        background:#f8f8f8
    }
    .blog-user .search input[type=text] {
        width:100%!important;
        font-size:16px!important
    }
    .blog-user .list-item .images {
        display:none
    }
    .blog-user .mores {
        line-height:3;
        text-align:center
    }
    .blog-user .mores a {
        display:block
    }
}
.header-navbar {
    height:40px
}
.header-navbar.float .top-banner {
    position:fixed;
    width:100%;
    z-index:100
}
.blog-article, .blog-article .btn-like-blog, .blog-article .btn-reward-blog, .blog-article .btn-share-blog, .blog-article .opr-btn-blog {
    position:relative
}
.btn-green[disabled=disabled] {
    background:#ddd
}
.blog-article {
    background:#f8f8f8;
    padding:15px 0;
    font-size:16px;
    text-align:center
}
.blog-article .opr-btn-blog .operate-dropdown {
    right:0;
    display:none
}
.blog-article .opr-btn-blog.active .btn-black-blog, .blog-article .opr-btn-blog:hover .btn-black-blog {
    color:#4eaa4c
}
.blog-article .opr-btn-blog.hover:hover .operate-dropdown {
    display:block
}
.blog-article .btn-favor-blog.active .icon-svg {
    background-image:url(../imgs/icon-svg/icon-star-green.svg)
}
.blog-article .btn-favor-blog:not([class~=active]):hover .icon-svg {
    background-image:url(../imgs/icon-svg/icon-star-blog-h.svg)
}
.blog-article .btn-like-blog.active .icon-svg {
    background-image:url(../imgs/icon-svg/icon-thumbs-up-blog-h.svg)
}
.blog-article .btn-like-blog:not([class~=active]):hover .icon-svg {
    background-image:url(../imgs/icon-svg/icon-thumbs-o-up-blog-h.svg)
}
.blog-article .btn-reward-blog.active .icon-svg, .blog-article .btn-reward-blog:hover .icon-svg {
    background-image:url(../imgs/icon-svg/icon-reward-blog-h.svg)
}
.blog-article .btn-share-blog.active .icon-svg, .blog-article .btn-share-blog:hover .icon-svg {
    background-image:url(../imgs/icon-svg/icon-share-o-blog-h.svg)
}
.blog-article[data-type=tip] {
    width:auto
}
.blog-article[data-type=tip][data-tip-type=fixed] {
    top:30%;
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%)
}
.blog-article .float-heading {
    position:fixed;
    top:40px;
    left:0;
    background:#fff;
    width:100%;
    padding:8px 0 12px;
    box-shadow:0 1px 3px rgba(0, 0, 0, .1);
    z-index:-1;
    opacity:0;
    -webkit-transition:all .2s;
    transition:all .2s
}
.blog-article .float-heading .heading {
    font-size:20px;
    line-height:2;
    max-width:550px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.blog-article .float-heading .data-info {
    padding:0;
    font-size:14px;
    color:#666
}
.blog-article .float-heading .opr-btn .opr-btn-blog {
    display:inline-block;
    margin-left:30px
}
.blog-article .float-heading .btn-share-blog .operate-dropdown {
    margin-top:10px;
    margin-right:-20px
}
.blog-article .float-heading .btn-share-blog .operate-dropdown:before {
    position:absolute;
    height:10px;
    top:-10px;
    content:"";
    width:100%;
    display:inline-block
}
.blog-article .float-heading.block {
    top:40px;
    z-index:99;
    opacity:1
}
.blog-article .sidebar {
    position:absolute;
    width:280px;
    min-height:20px;
    float:right;
    text-align:left;
    right:-290px;
    opacity:0
}
.blog-article .sidebar .catalogWrap {
    position:absolute;
    padding-left:10px;
    overflow:hidden;
    overflow-y:auto;
    height:300px;
    width:inherit
}
.blog-article .sidebar .sidebar-scrollbar {
    width:3px;
    height:20px;
    display:inline-block;
    background:#4eaa4c;
    position:absolute;
    left:10px;
    top:7px;
    z-index:1;
    -webkit-transition:all, .4s;
    transition:all, .4s
}
@media screen and (max-width:1400px) {
    .blog-article .sidebar {
        width:182px;
        right:-192px
    }
    .blog-article .blog-article .anchor-content .blog-catalogue-h2 {
        width:155px
    }
}
@media screen and (max-width:1264px) {
    .blog-article .sidebar {
        display:none!important
    }
}
.blog-article .blog-heading .data-info, .blog-article .blog-heading .user-info {
    display:inline-block
}
.blog-article hr {
    border:none;
    border-top:1px solid #ddd
}
.blog-article .blog-content, .blog-article .blog-wrapper {
    width:800px;
    text-align:left;
    position:relative;
    margin:auto
}
.blog-article .blog-heading {
    text-align:left
}
.blog-article .blog-heading .title {
    font-size:28px;
    word-break:break-all
}
.blog-article .blog-heading .title span {
    vertical-align:middle;
    margin-bottom:4px
}
.blog-article .blog-heading .info-opr {
    font-size:16px;
    color:#666;
    margin-top:8px;
    padding-bottom:20px;
    border-bottom:1px solid #ccc
}
.blog-article .blog-heading .user-info .icon {
    width:26px;
    height:26px;
    vertical-align:middle
}
.blog-article .blog-heading .user-info .icon, .blog-article .blog-heading .user-info .name {
    display:inline-block;
    margin:10px 3px
}
.blog-article .blog-heading .data-info li {
    margin:0 8px
}
.blog-article .blog-heading .opr-btn-blog .btn {
    width:88px;
    text-align:center
}
.blog-article .blog-heading .icon-svg {
    width:20px;
    height:20px
}
.blog-article .comment-emoji .NoData {
    font-size:12px
}
.blog-article .operate-menu {
    width:105px;
    position:relative;
    z-index:10
}
.blog-article .operate-menu .input-text {
    background:#fff;
    height:38px;
    line-height:38px;
    padding-left:17px;
    border:1px solid #ccc;
    display:block;
    position:relative;
    color:#5B5C5F
}
.blog-article .operate-menu .input-text:before {
    position:absolute;
    right:10px;
    top:43%;
    content:"";
    display:inline-block;
    border-color:#C3C3C3 transparent transparent;
    border-style:solid;
    border-width:5px 6px
}
.blog-article .operate-menu .select-dropdown {
    display:none;
    background:#fff;
    position:absolute;
    box-shadow:0 2px 4px 0 rgba(0, 0, 0, .1);
    width:100%;
    margin-top:3px
}
.blog-article .operate-menu .select-dropdown:before {
    content:"";
    display:block;
    height:3px;
    margin-top:-3px
}
.blog-article .operate-menu .select-dropdown a {
    display:block;
    height:36px;
    line-height:36px;
    text-align:left;
    padding-left:15px;
    color:#5B5C5F
}
.blog-article .operate-menu .select-dropdown a i {
    margin-right:8px;
    vertical-align:middle
}
.blog-article .operate-menu .select-dropdown a:hover {
    background:#F9F9F9;
    color:#4eaa4c
}
.blog-article .operate-menu:hover .input-text {
    border-color:#4eaa4c
}
.blog-article .operate-menu:hover .select-dropdown {
    display:block
}
.blog-article .operate-menu:hover .select-dropdown:before {
    content:"";
    display:block;
    height:6px;
    margin-top:-6px
}
.blog-article .blog-abstract {
    margin:23px 0 45px;
    line-height:28px;
    word-break:break-all;
    color:#666;
    font-size:18px;
    font-style:italic;
    font-family:Baskerville, Georgia, "Liberation Serif", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, "TW\-Kai", serif
}
.blog-article .blog-body {
    margin-top:30px;
    position:relative
}
.blog-article .blog-body .loading-gif {
    position:inherit
}
.blog-article .blog-opr {
    text-align:right;
    border-bottom:1px solid #ccc;
    padding-bottom:17px;
    font-size:16px
}
.blog-article .related-info {
    line-height:3;
    color:#666
}
.blog-article .related-info li {
    display:inline-block;
    margin-right:10px
}
.blog-article .back-list {
    text-align:left;
    font-size:14px;
    margin-bottom:15px
}
.blog-article .back-list .icon-svg {
    margin-right:5px;
    vertical-align:middle
}
.blog-article .blog-title-ad {
    padding-bottom:15px
}
.blog-article .blog-copyright {
    color:#999;
    margin-top:30px
}
.blog-article .blog-copyright a {
    max-width:60%;
    overflow:hidden;
    text-overflow:ellipsis;
    display:inline-block;
    vertical-align:middle
}
.blog-article .operate {
    text-align:center;
    position:relative;
    margin:74px 0
}
.blog-article .operate .icon-svg {
    width:25px;
    height:25px;
    vertical-align:sub;
    margin-right:5px;
    background-size:contain
}
.blog-article .operate li {
    display:inline-block;
    color:#5B5C5F
}
.blog-article .operate li:not(:last-child) {
    margin-right:25px
}
.blog-article .operate li .btn-black-blog {
    width:140px;
    height:50px;
    line-height:50px;
    font-size:18px;
    padding:0;
    display:block
}
.blog-article .operate .operate-dropdown {
    display:none;
    margin-top:20px
}
.blog-article .operate .operate-dropdown:before {
    height:30px;
    content:"";
    display:block;
    position:absolute;
    top:-26px;
    width:100%
}
.blog-article .operate .hover .favor-dropdown {
    margin-left:-40px
}
.blog-article .user-card {
    background:#5B5C5F;
    padding:30px 0;
    margin-bottom:40px;
    font-size:16px;
    color:#fff
}
.blog-article .user-card .user-info {
    width:85px;
    margin-right:30px;
    display:inline-block
}
.blog-article .user-card .user-info .icon {
    width:76px;
    height:76px
}
.blog-article .user-card .user-info .follow-status .btn-follow {
    width:100%;
    text-align:center;
    margin-top:10px;
    border-radius:1px
}
.blog-article .user-card .user-info .follow-status .btn-follow:hover {
    opacity:.9
}
.blog-article .user-card .user-info .follow-status .btn-follow.followed {
    background:#909090
}
.blog-article .user-card .opus-opr .opus-opr-item {
    display:inline-block;
    color:#D7D7D7
}
.blog-article .user-card .opus-opr .opus-opr-item span {
    color:#18ED6F
}
.blog-article .user-card .opus-opr .opus-opr-item:not(:first-child):before {
    content:" | ";
    display:inline-block;
    padding:0 11px 0 7px
}
.blog-article .user-card .medal {
    display:inline-block
}
.blog-article .user-card .name {
    color:#40E23B;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:22px;
    display:block;
    line-height:40px;
    padding:0!important
}
.blog-article .user-card .card-post-info {
    color:#fff;
    font-size:16px;
    padding:5px 0
}
.blog-article .user-card .card-post-info .card-post {
    margin-right:15px
}
.blog-article .user-card .card-post-info .icon-svg {
    vertical-align:middle
}
.blog-article .user-card .opus-info {
    line-height:2
}
.blog-article .user-card .opus-info a {
    display:inline-block;
    line-height:1;
    padding:2px 5px
}
.blog-article .user-card .opus-info .software-opus span {
    float:left;
    margin:0
}
.blog-article .user-card .opus-info .software-list {
    display:table-cell
}
.blog-article .user-card .user-radar {
    margin-left:10px
}
.blog-article .user-card .icon {
    width:70px;
    height:70px;
    border:2px solid #ddd
}
.blog-article .user-card .medal .medal-item {
    margin-right:5px
}
.blog-article .user-card .medal .medal-item .dropdown {
    left:-7px;
    top:32px
}
.blog-article .user-card .medal img {
    width:24px;
    height:24px;
    border-radius:50%;
    overflow:hidden
}
.blog-article .user-card .medal a {
    padding:0
}
.blog-article .anchor-content {
    border-left:1px solid #CCC;
    padding-left:18px;
    width:280px;
    -webkit-transition:all, .5s;
    transition:all, .5s;
    position:absolute;
    font-size:13px
}
.blog-article .anchor-content .active, .blog-article .anchor-content .active a {
    color:#000!important
}
.blog-article .anchor-content li {
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    margin:10px 0
}
.blog-article .anchor-content li li {
    padding-left:17px
}
.blog-article .anchor-content:after, .blog-article .anchor-content:before {
    z-index:1;
    content:"";
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:50%;
    border:1px solid #A1A1A1;
    position:absolute;
    left:-5px;
    background:#f8f8f8
}
.blog-article .anchor-content:after {
    bottom:0
}
.blog-article .anchor-content .blog-catalogue-h1 {
    font-size:16px
}
.blog-article .anchor-content .blog-catalogue-h2 {
    padding-left:10px;
    font-size:14px
}
.blog-article .anchor-content .blog-catalogue-h3, .blog-article .anchor-content .blog-catalogue-h4, .blog-article .anchor-content .blog-catalogue-h5 {
    font-size:14px;
    color:#666
}
.blog-article .anchor-content .blog-catalogue-h3 a, .blog-article .anchor-content .blog-catalogue-h4 a, .blog-article .anchor-content .blog-catalogue-h5 a {
    color:#666
}
.blog-article .anchor-content .blog-catalogue-h3 {
    padding-left:20px
}
.blog-article .anchor-content .blog-catalogue-h4 {
    padding-left:30px
}
.blog-article .anchor-content .blog-catalogue-h5 {
    padding-left:40px;
    font-size:12px
}
.blog-article .sidebar.fixed {
    top:0
}
.blog-article .sidebar.fixed .catalogWrap {
    top:180px;
    position:fixed
}
.blog-article .panel-related {
    margin-bottom:30px
}
.blog-article .panel-related .related-blog-list {
    margin:10px 15px;
    line-height:1.8
}
.blog-article .panel-related .related-blog-list a {
    font-size:16px;
    margin-right:10px
}
.blog-article .panel-related .related-blog-list .related-opr {
    font-size:14px
}
.blog-article .panel-related .panel-heading {
    border:0
}
.blog-article .panel-related .related-blogs-list.flex-item {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
.blog-article .panel-related .related-blogs-list .icon-svg {
    margin-right:3px
}
.blog-article .panel-related .related-blogs-list .blog-item {
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    background:#fff;
    border:1px solid #ededed;
    border-radius:2px;
    padding:15px;
    -webkit-transition:all, .2s;
    transition:all, .2s;
    max-width:33.3%
}
.blog-article .panel-related .related-blogs-list .blog-item:not(:last-child) {
    margin-right:10px
}
.blog-article .panel-related .related-blogs-list .blog-item .img {
    width:41px;
    height:41px;
    margin-right:10px;
    overflow:hidden
}
.blog-article .panel-related .related-blogs-list .blog-item .img img {
    width:100%
}
.blog-article .panel-related .related-blogs-list .blog-item:hover {
    box-shadow:0 4px 8px 0 rgba(0, 0, 0, .05)
}
.blog-article .panel-related .related-blogs-list .blog-item .author-info {
    font-size:12px;
    color:#666;
    margin-top:6px
}
.blog-article .panel-related .related-blogs-list .blog-item .author-info .icon {
    width:19px;
    height:19px;
    border-radius:50%;
    display:inline-block;
    overflow:hidden;
    vertical-align:middle
}
.blog-article .panel-related .related-blogs-list .blog-item .author-info .icon img {
    width:100%;
    height:100%
}
.blog-article .panel-related .related-blogs-list .blog-item .title {
    word-break:break-all
}
.blog-article .panel-related .relation-data {
    font-size:12px;
    color:#202020
}
.blog-article .panel-related .relation-data .data-item:not(:first-child) {
    margin-left:10px
}
.blog-article .panel-related .relation-data .icon-svg {
    width:15px;
    height:13px
}
.blog-article .panel-comments .panel-list {
    padding:0
}
.blog-article .panel-comments .panel-heading {
    border:0
}
.blog-article .panel-comments .panel-heading em {
    font-size:16px;
    color:#333
}
.blog-article .panel-comments .panel-body {
    background:#fff;
    padding:12px 20px 40px
}
.blog-article .panel-comments .panel-body textarea {
    border-radius:0;
    margin-bottom:10px;
    height:100px
}
.blog-article .panel-comments .comment-item {
    border-color:#DDD;
    padding:23px 0 0
}
.blog-article .panel-comments .comment-item:hover {
    background:#F8F8F8
}
.blog-article .panel-comments .comment-item .icon {
    width:40px;
    height:40px
}
.blog-article .panel-comments .comment-item .user-info {
    line-height:2
}
.blog-article .panel-comments .comment-item .icon_box {
    margin-right:15px
}
.blog-article .panel-comments .comment-item .icon_box a {
    margin:0 5px
}
.blog-article .panel-comments .comment-item .right {
    padding-bottom:15px
}
.blog-article .panel-comments .comment-item .user-name {
    font-size:1.4rem;
    font-weight:600
}
.blog-article .pages {
    display:block;
    text-align:right
}
@media screen and (max-width:960px) {
    .blog-article .blog-content, .blog-article .blog-wrapper, .blog-article .container {
        width:100%;
        padding:0
    }
    .blog-article .blog-wrapper {
        padding-left:3%;
        padding-right:3%
    }
}
.blog-article .share-dropdown {
    position:absolute;
    width:140px;
    background:#fff;
    border:1px solid #ddd;
    margin-top:20px;
    z-index:10000
}
.blog-article .share-dropdown .share-title {
    background:#f8f8f8;
    text-align:left;
    padding:5px 10px;
    display:block;
    font-size:14px;
    line-height:2
}
.blog-article .share-dropdown .bdsharebuttonbox {
    padding:5px 0
}
.blog-article .share-dropdown .bdsharebuttonbox a {
    display:block;
    padding-left:20px;
    margin:5px 10px
}
.blog-article .favor-dropdown {
    position:absolute;
    width:350px;
    border:1px solid #ddd;
    background:#fff;
    z-index:1000;
    padding:20px;
    text-align:left
}
.blog-article .favor-dropdown .tags {
    margin:10px 0
}
.blog-article .favor-dropdown .btn-group {
    margin:15px 0 0
}
.blog-article .favor-dropdown .btn {
    padding:.3rem 1rem;
    margin-right:10px
}
.blog-article .favor-dropdown .tag-switcher {
    position:relative;
    height:20px
}
.blog-article .favor-dropdown .tag-switcher span {
    float:right;
    margin-left:10px
}
.blog-article .favor-dropdown .tag-switcher span a {
    color:#999
}
.blog-article .favor-dropdown .tag-switcher span .icon-svg {
    width:9px;
    height:9px;
    vertical-align:middle
}
.blog-article .favor-dropdown .tag-switcher:after {
    position:relative;
    top:9px;
    content:"";
    border-top:1px solid #eee;
    display:table-cell;
    width:1000px
}
.blog-article .favor-dropdown .tag-switcher.on .icon-svg {
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg)
}
.blog-article input[type=text], .blog-article input[type=password] {
    background-color:#f8f8f8;
    border:1px solid #d1d1d1;
    padding:0 15px;
    height:36px;
    line-height:36px;
    display:block;
    width:100%;
    border-radius:3px;
    -webkit-transition:background-color .2s;
    transition:background-color .2s
}
.blog-article input[type=text]:focus, .blog-article input[type=password]:focus {
    background-color:#fff
}
@media screen and (min-width:960px) and (max-width:1200px) {
    .blog-article .container {
        padding:0
    }
    .blog-article .sidebar {
        margin:0
    }
    .blog-article .blog-content, .blog-article .blog-wrapper {
        max-width:800px;
        width:auto;
        margin:auto;
        display:block
    }
}
.blog-article .reward-list .donate-user-item:hover .donate-user-pro {
    display:inline-block
}
.reward-popups .reward-way label {
    display:inline-block;
    height:32px;
    line-height:32px
}
.reward-popups .reward-alipay label {
    background:url(../imgs/icons/alipay.png) 25px no-repeat;
    background-size:contain;
    width:122px;
    height:32px
}
.reward-popups .reward-wechat .icon-svg {
    vertical-align:bottom
}
.reward-popups .reward-wechat input[type=radio]+label {
    padding-left:25px
}
.reward-status {
    display:none
}
.reward-status .wechat-qr {
    margin-bottom:45px;
    display:inline-block;
    font-size:20px
}
.reward-status .wepay-amount span {
    font-size:30px;
    vertical-align:sub
}
.reward-status em {
    font-style:inherit
}
.reward-status .wechat-qr-img {
    display:inline-block;
    margin-top:45px;
    width:164px
}
.reward-status .wechat-qr-img img {
    width:100%
}
.blog-drafts {
    padding-top:25px;
    padding-bottom:45px;
    min-height:700px
}
.blog-drafts .container {
    position:relative
}
.blog-drafts .drafts-container {
    width:890px;
    margin:auto
}
.blog-drafts .draft-heading {
    font-size:22px;
    color:#000;
    margin-top:20px;
    border-bottom:1px solid #e1e1e1
}
.blog-drafts .draft-heading em {
    font-size:14px;
    color:#999;
    font-style:normal
}
.blog-drafts .draft-heading .layout {
    padding:10px 15px
}
.blog-drafts .drafts-lists .list-item {
    padding:15px;
    min-height:79px;
    border-bottom:1px dotted #d1d1d1
}
.blog-drafts .drafts-lists .list-item .btn-link {
    width:110px;
    text-align:right
}
.blog-drafts .drafts-lists .list-item .btn-link a {
    margin-left:10px
}
.blog-drafts .drafts-lists .title {
    font-size:18px;
    color:#4a4a4a;
    line-height:26px;
    margin-bottom:5px
}
.blog-drafts .drafts-lists .time {
    font-size:13px
}
@media screen and (max-width:960px) {
    .blog-drafts .drafts-container {
        width:100%
    }
}
@media screen and (max-width:768px) {
    .blog-drafts .draft-heading {
        margin:0
    }
    .blog-drafts .draft-heading .edit {
        margin:10px 0
    }
    .blog-drafts .draft-heading .edit a {
        display:block;
        text-align:center;
        font-size:18px
    }
    .blog-drafts .drafts-lists .list-item .btn-link {
        text-align:left;
        margin-top:10px
    }
    .blog-drafts .drafts-lists .list-item .btn-link a {
        margin:0 10px 0 0
    }
    .blog-drafts .layout-flex {
        display:block
    }
}
.reward-popups, .reward-popups input, .reward-popups select, .reward-popups textarea {
    font-size:16px
}
@media screen and (min-width:960px) {
    .reward-popups {
        min-height:495px
    }
}
.reward-popups[data-popups=body] {
    margin:5px 10px 5px 0
}
.reward-popups input[type=text], .reward-popups input[type=number], .reward-popups input[type=tel] {
    line-height:40px;
    width:70%;
    height:40px;
    padding-top:0;
    padding-bottom:0
}
.reward-popups input::-webkit-inner-spin-button, .reward-popups input::-webkit-outer-spin-button {
    -webkit-appearance:none
}
.reward-popups input[type=number] {
    -moz-appearance:textfield
}
.reward-popups textarea {
    line-height:25px;
    width:100%
}
.reward-popups .form-item:not(:last-of-type) {
    margin-bottom:22px
}
.reward-popups .form-label {
    width:100px
}
.reward-popups .reward-way {
    float:left;
    margin-right:25px
}
.reward-popups .icon-svg {
    vertical-align:middle
}
.reward-popups .btn {
    width:100px;
    height:40px
}
.reward-popups .blogger-info .icon {
    display:inline-block;
    overflow:hidden;
    width:60px;
    height:60px;
    border:2px solid #cacaca;
    border-radius:50%
}
.reward-popups .blogger-info .icon img {
    width:100%;
    height:100%
}
.reward-popups .blogger-info .text {
    margin-top:15px;
    margin-bottom:40px
}
.reward-popups .reward-money-box .reward-money {
    line-height:35px;
    display:inline-block;
    float:left;
    width:80px;
    height:35px;
    margin:17px 6px 0 0;
    cursor:pointer;
    text-align:center;
    color:#fff;
    background:#d4d4d4
}
.reward-popups .reward-money-box .reward-money.active {
    background:#626262
}
@media screen and (max-width:960px) {
    .reward-popups .btn, .reward-popups input[type=text], .reward-popups input[type=number], .reward-popups input[type=tel] {
        width:100%
    }
    .reward-popups[data-popups=body] {
        position:relative;
        height:100%;
        margin:0
    }
    .reward-popups .form-button {
        position:absolute;
        bottom:0;
        width:100%;
        text-align:center
    }
}