@charset "UTF-8";
body {
    background:#fff
}
@media (max-width:800px) {
    header {
        display:none
    }
    #main {
        margin-left:0!important;
        padding:0!important;
        overflow:hidden
    }
    .container {
        width:90%
    }
    #main nav .search {
        width:38.2%!important
    }
    footer span {
        float:left!important
    }
    .inactive {
        display:none
    }
    #content article .title .date {
        text-align:left;
        margin-top:0!important
    }

}
@media (min-width:1200px) {
    .container {
        max-width:1400px;
        width:90%
    }

}
header {
    background:#212227;
    position:fixed!important;
    top:0;
    bottom:0;
    padding:0!important;
    width:250px;
    box-shadow:0 0 5px #000
}
header h2 {
    width:100%;
    text-align:center;
    line-height:4rem;
    font-size:1.5rem;
    font-weight:400;
    color:#aaa;
    border-bottom:1px solid #333
}
header h2 a {
    color:#aaa
}
header h2 a:hover {
    color:#bbb;
    text-decoration:none
}
header .logo {
    width:154px;
    height:154px;
    text-align:center;
    margin:29.6px auto;
    display:block;
    border:1px solid #333;
    border-radius:50%
}
header .card {
    border:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0;
    background:#212227;
    padding:0
}
header .card .card-header {
    padding:0
}
header .card .card-header button {
    text-decoration:none;
    color:#aaa;
    padding-left:3rem;
    line-height:2.5rem;
    font-size:1.1rem
}
header .card .card-body {
    padding:0
}
header .card #collapseOne,header .card #collapseThree,header .card #collapseTwo {
    background:rgba(0,0,0,.3)!important
}
header .card #collapseOne li,header .card #collapseThree li,header .card #collapseTwo li {
    display:block;
    padding:0;
    margin-left:1rem;
    border-left:2px solid #222;
    transition:.2s
}
header .card #collapseOne li a,header .card #collapseThree li a,header .card #collapseTwo li a {
    list-style:none;
    padding-left:2rem;
    line-height:3rem;
    color:#aaa;
    transition:.5s;
    display:block;
    width:100%;
    margin-left:2px
}
header .card #collapseOne li a:hover,header .card #collapseThree li a:hover,header .card #collapseTwo li a:hover {
    text-decoration:none
}
header .card #collapseOne li:active,header .card #collapseOne li:hover,header .card #collapseThree li:active,header .card #collapseThree li:hover,header .card #collapseTwo li:active,header .card #collapseTwo li:hover {
    border-left:2px solid #fff
}
#main {
    margin-left:300px;
    padding:0 5%;
    width:100%
}
#main nav {
    width:100%;
    height:4rem;
    background:url(images/border.png) bottom repeat-x #fff
}
#main nav li {
    display:block;
    float:left;
    color:#555
}
#main nav li a {
    line-height:4rem;
    color:#999;
    padding:0 1rem
}
#main nav .search {
    width:20.8%;
    float:right;
    line-height:2.472rem;
    margin-top:.58rem;
    background:#efefef;
    border:none;
    margin-right:.58rem;
    padding-left:16.4px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    transition:.2s
}
#main nav .search:focus {
    width:38.2%
}
#main .name {
    display:none
}
#main .name a {
    font-size:22px;
    color:#555;
    font-weight:700
}
#main .name a:hover {
    text-decoration:none
}
#loading {
    background:url(images/loading.gif) 0 0/100% 100%;
    width:2rem;
    height:2rem;
    position:fixed;
    right:1rem;
    top:.8rem;
    display:none
}
#content {
    margin-top:0;
    padding-top:0
}
#content article {
    background:#fff;
    float:left;
    margin-top:30px;
    width:100%
}
#content article .title {
    font-size:1.6rem;
    color:#555;
    text-align:left;
    padding:2rem 1.5rem 1.5rem;
    background:#fff;
    border-bottom:1px solid #f1f1f1
}
#content article .title a {
    font-size: 1.7rem;
    font-weight: 650;
    text-decoration:none;
    transition:.2s;
    color:#555;
    padding-bottom:.5rem;
    display:block;
    word-wrap:break-word;
    overflow-wrap:break-word
}
#content article .title a:hover {
    color:#000
}
#content article .title .date {
    font-size:.9rem;
    font-weight:300;
    color:#aaa;
    text-align:right;
    margin-top:-2rem
}
#content article .cover-panel {
    width:100%;
    padding:1.8rem 2rem 0
}
#content article .cover-panel .cover-image {
    width:100%;
    height:350px;
    border:1px solid #ccc;
    background-position:center center;
    background-size:100% auto
}
#content article .article-cover {
    width:100%;
    height:auto;
    margin:-1.1rem auto 1rem;
    border:1px solid #ccc;
    background-position:center center;
    background-size:100% auto
}
#content article .text {
    line-height:2;
    font-family:Lato,"PingFang SC","Microsoft YaHei",sans-serif;
    font-size:1.125rem;
    color:#655555;
    text-align:justify;
    padding:1rem 1.5rem 1.8rem;
    min-height:5rem
}
#content article .text img {
    max-width:100%;
    text-align:center;
    margin:30px auto;
    display:block;
    height:auto;
    box-shadow:0 0 10px #e1e1e1
}
#content article .text figcaption {
    text-align:center;
    font-weight:300;
    font-size:90%
}
#content article .text pre {
    max-width:860px
}
#content article .text pre code {
    color:#8b0000
}
#content article .text h1 {
    font-size:1.7rem;
    font-weight: 500;
    position: relative;
    padding-left: 16px;
}

#content article .text h2 {
    font-size:1.4rem;
    font-weight: 500;
    position: relative;
    padding-left: 16px;
}

#content article .text h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 1.2em;
    background: #1677ff;
    border-radius: 4px;
}

#content article .text h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.2em;
    background: #1677ff;
    border-radius: 2px;
}
#content article .text ol li,#content article .text ul li {
    word-break:break-all
}
#content .comment {
    float:left;
    width:100%
}
#content .comment h2 {
    font-size:1.4rem;
    margin-left:1rem
}
#content .comment .comment-list {
    list-style:none;
    margin-top:1rem;
    margin-left:1rem
}
#content .comment .comment-list .avatar {
    width:1.5rem;
    height:1.5rem;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%
}
#content .comment .comment-list .content {
    display:inline-block;
    font-size:1rem;
    font-weight:300;
    line-height:2rem;
    max-width:800px;
    margin-left:1rem
}
#content .comment .comment-list .content span {
    font-weight:400;
    margin-right:1rem
}
#content .comment .comment-list .content span a {
    color:#666
}
#content .comment .comment-list .content p {
    display:inline-block;
    max-width:860px
}
#content .comment .comment-list .author {
    font-weight:400
}
#content .comment .comment-list .author a {
    color:#666;
    font-weight:400
}
#content .comment .comment-list td,#content .comment .comment-list th {
    border-top:0;
    font-weight:300
}
#content .comment .children li {
    margin-top:0
}
#content .comment table {
    margin-top:19rem
}
#content #commentform {
    float:left;
    width:100%;
    margin-top:30px
}
#content #commentform .comment-form-left,#content #commentform .comment-form-right {
    margin-top:30px;
    padding-left:1rem
}
#content #commentform .comment-form-left {
    width:32.2%;
    float:left
}
#content #commentform .comment-form-right {
    width:67.8%;
    float:right
}
#content #commentform li {
    list-style:none;
    margin-top:1rem
}
#content #commentform li input,#content #commentform li textarea {
    border:0;
    background:rgba(10,10,10,.05);
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0
}
#content #commentform li textarea {
    height:92px
}
#content #commentform li span {
    line-height:36px;
    color:#aaa
}
#content #commentform li .btn {
    background:#aaa;
    border:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0;
    float:right
}
#content .comment-info {
    float:left;
    display:block;
    margin:50px 1rem;
    color:#ccc;
    font-style:italic
}
.pagination {
    display:block;
    margin:30px .85rem
}
.pagination a,.pagination span {
    padding:.3rem .65rem;
    margin-right:.6rem;
    line-height:25px;
    color:#777;
    text-decoration:none;
    transition:.2s
}
.pagination a:hover {
    background:#eee
}
.pagination .current {
    color:#000;
    border-bottom:1px solid #ccc
}
#links {
    width:100%;
    background:#fff;
    float:left;
    margin-top:30px;
    padding:1rem 1rem .6rem
}
#links li {
    display:block;
    float:left;
    margin-top:0;
    margin-bottom:10px
}
#links li a {
    padding:5px 12px;
    margin-right:10px;
    line-height:25px;
    color:#555;
    text-decoration:none;
    transition:.2s
}
#links li a:hover {
    background:#eee
}
footer {
    margin:0 auto;
    line-height:3rem;
    height:3rem;
    width:100%;
    color:#aaa
}
footer a {
    color:#aaa
}
footer span {
    text-align:right;
    float:right;
    font-size:.5rem;
    color:#aaa;
    margin-right:1rem
}
.pjax-loading {
    animation:2s linear infinite loading;
    -webkit-animation:2s linear infinite loading;
    -o-animation:2s linear infinite loading;
    -moz-animation:2s linear infinite loading
}
@keyframes loading {
    from {
        transform:rotate(0)
    }
    to {
        transform:rotate(360deg)
    }

}
@-webkit-keyframes loading {
    from {
        -webkit-transform:rotate(0)
    }
    to {
        -webkit-transform:rotate(360deg)
    }

}
@-o-keyframes loading {
    from {
        -o-transform:rotate(0)
    }
    to {
        -o-transform:rotate(360deg)
    }

}
@-moz-keyframes loading {
    from {
        -moz-transform:rotate(0)
    }
    to {
        -moz-transform:rotate(360deg)
    }

}
.comment {
    padding:0 1.5rem
}
#divComments li,divPrevious li {
    width:200px;
    white-space:nowrap;
    word-break:keep-all;
    overflow:hidden;
    text-overflow:ellipsis
}
.commentbox {
    font-size:14px
}
.comtitle {
    overflow:hidden;
    border-bottom:1px dotted #eaeaea;
    padding-bottom:10px
}
.comname {
    font-size:18px;
    color:#655555;
    font-weight:700
}
.commentbox ul.msg {
    list-style:none;
    margin:10px 0 20px;
    padding:0;
    text-align:left;
    table-layout:fixed;
    word-wrap:break-word;
    border-bottom:1px dotted #eaeaea
}
.commentbox li.msgname {
    padding:0 0 .8em;
    margin:0;
    overflow:hidden
}
.commentbox li.msgname img {
    margin-right:10px
}
.commentbox li.msgname small {
    display:inline-block;
    color:#888
}
.commentbox li.msgname .msgcontent {
    padding-left:60px;
    padding-top:10px;
    line-height:1.5;
    color:#655555
}
.commentbox li.msgurl {
    text-align:right;
    padding:2px 10px;
    margin:0
}
.commentbox li.msggravatar {
    display:block;
    float:left;
    margin-right:5px
}
.commentbox li.msgarticle {
    list-style-position:outside;
    padding:0 0 0 55px;
    margin:0;
    line-height:160%
}
.commentbox li.msgtime {
    padding:5px 0 0;
    font-weight:400
}
.commentbox img.avatar {
    width:40px;
    height:40px;
    float:left;
    padding:0 4px 4px 0;
    border:0 solid #eaeaea
}
.commentbox ul.msg ul.msg {
    padding:10px 0 0;
    margin:0;
    border-bottom:none
}
.commentbox ul.msg ul.msg li.msgarticle {
    padding-bottom:0
}
#divCommentPost {
    width:99%;
    margin:0
}
#divCommentPost p {
    margin-top:10px
}
#divCommentPost label {
    margin-top:5px
}
#divCommentPost p.posttop {
    color:#007bff
}
#divCommentPost img {
    margin-bottom:-.5em
}
#cancel-reply {
    float:right;
    margin-right:2em
}
.commentbox div.reply-frm {
    background:#f0f0f0;
    box-shadow:0 0 15px #333;
    margin:1em 1%!important;
    padding:.3em .8em!important;
    min-width:330px
}
.commentbox input.text {
    border:1px solid #eee;
    line-height:20px;
    height:24px;
    padding:2px 5px
}
#txaArticle {
    padding:.5em;
    width:98%;
    height:150px;
    border:1px solid #eee
}
.commentbox input.button {
    color:#fff;
    width:100px;
    height:32px;
    background:#007bff;
    border:1px solid #007bff;
    cursor:pointer
}
.page404 {
    padding:40px 0 50px;
    text-align:center;
    overflow:hidden
}
.page404 h1 {
    margin:10px 0;
    color:#333;
    text-shadow:rgba(61,61,61,.3) 1px 1px,rgba(61,61,61,.2) 2px 2px,rgba(61,61,61,.3) 3px 3px;
    font-weight:700;
    font-size:98px;
    line-height:150px
}
.page404 h3 {
    margin:10px 0;
    color:#333;
    font-size:30px;
    line-height:35px;
    font-weight:400
}
.serach404 {
    margin:20px 0
}
.serach404 p {
    color:#333;
    font-size:14px
}
.serach404 form {
    width:420px;
    margin:10px auto;
    overflow:hidden
}
.serach404 form input {
    float:left;
    width:335px;
    height:40px;
    line-height:38px;
    box-sizing:border-box;
    padding-left:2%;
    border:1px solid #de2211
}
.serach404 form button {
    float:right;
    width:85px;
    line-height:38px;
    height:40px;
    background-color:#de2211;
    color:#fff;
    text-align:center;
    border:1px solid #de2211;
    font-size:16px
}
.goindex404 {
    text-align:center;
    margin:20px 0
}
.goindex404 a {
    display:inline-block;
    padding:8px 30px;
    background-color:#de2211;
    color:#fff;
    border-radius:2px;
    font-size:16px
}
@media screen and (max-width:980px) {
    .page404 {
        padding:0
    }
    .serach404 form {
        width:80%
    }
    .serach404 form input {
        width:75%
    }
    .serach404 form button {
        width:25%
    }

}
@media screen and (max-width:800px) {
    #main .name {
        display:block
    }
    #main nav li {
        display:none
    }

}